bug 描述

添加一个有序/无序列表输入几个内容，然后全选删除，发现列表没有被删除

你预期的样子是？

可以被正常删除

浏览器及版本号

chrome/84

wangEditor 版本

v5

官网能否复现该 bug ？

能/不能

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

• 步骤一 打开http://106.12.198.214:8882/editor/examples/default-mode.html
• 步骤二 添加有序/无序列表，输入内容
• 步骤三 全选删除

bug 描述

当行内代码处于顶格首行时无法彻底删除，会留下一个可输入code区域，即便是后方有其他内容

你预期的样子是？

可全部删除

浏览器及版本号

Chrome/90.0.4430.212

wangEditor 版本

v5

官网能否复现该 bug ？

能/不能

最小成本的复现步骤

• 全选内容删除 或 光标至于第一个字前方
• 插入行内代码
• 删除行内代码内容（如果此时 行内代码后方无内容 这块将无法删除，如果后方有内容可以聚焦到后方进行删除整个code）

如题

如题。

项目开发时，参考的 slate-react 版本比较早（v0.59），而随着项目开发，slate-react 又升级了几个版本。
所以，要把当前代码和最新的 slate-react 版本对齐一下。

可参考资料

• changelog https://github.com/ianstormtaylor/slate/blob/main/packages/slate-react/CHANGELOG.md
• slate-react 提交记录 https://github.com/ianstormtaylor/slate/commits/main/packages/slate-react
• 其他自行去 github 搜索

bug 描述

添加分割线后，光标位于分割线组件中，无法正常输入内容。并且回车无法跳出分割线区域，光标不能重新聚焦。

你预期的样子是？

添加分割线后可正常输入内容

浏览器及版本号

chrome/84

wangEditor 版本

v5

官网能否复现该 bug ？

能/不能

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

• 步骤一 打开http://106.12.198.214:8882/editor/examples/default-mode.html
• 步骤二 添加分割线
• 步骤三 分割线后不能输入内容

bug 描述

examples/default-mode.html 中，如果注释掉下面两行（即异步获取 html）

创建表格时 js 报错

我的问题：为何这里非要用异步获取 html ？不用异步可以吗？

浏览器及版本号

chrome 最新版

wangEditor 版本

v5

最小成本的复现步骤

参考 bug 描述

bug 描述

编辑器输入 console.log('hello world') 全选，点击菜单代码块按钮，然后再次取消代码块，发现内容前多出一行空白。

你预期的样子是？

和代码块内容保持一直，不添加空行

浏览器及版本号

chrome/84

wangEditor 版本

v5

官网能否复现该 bug ？

能/不能

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

• 步骤一 打开http://106.12.198.214:8882/editor/examples/default-mode.html
• 步骤二 输入 console.log('hello world')
• 步骤三 全选，点击菜单代码块按钮，然后再次取消代码块

bug 描述

可用这个页面测试 examples/toolbar.html

输入一句文字，选中加粗（或其他 mark，如 italic through underline code），然后在选区后面换行。

然后会发现光标还在第一行

你预期的样子是？

光标在第二行

浏览器及版本号

chrome 最新版

wangEditor 版本

v5

最小成本的复现步骤

参考 bug 描述

bug 描述

header 和 blockQuote 换行，不在行尾也能插入 paragraph，不符合预期。

具体看这两个代码文件中的 TODO

• https://github.com/wangeditor-team/we-2021/blob/main/packages/basic-modules/src/modules/blockquote/plugin.ts
• https://github.com/wangeditor-team/we-2021/blob/main/packages/basic-modules/src/modules/header/plugin.ts

你预期的样子是？

在行尾换行，插入 paragraph 。不在行尾换行，还是插入当前的 type （header 或 blockQuote）

浏览器及版本号

所有

wangEditor 版本

v5

最小成本的复现步骤

进入编辑器，光标选中一个 header 或 blockQuote （非行尾）换行

bug 描述

你预期的样子是？

placeholder 位置跟随光标位置或直接隐藏

浏览器及版本号

chrome/84

wangEditor 版本

v5

官网能否复现该 bug ？

能/不能

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

• 步骤一 打开http://106.12.198.214:8882/editor/examples/default-mode.html
• 步骤二 添加缩进

现在代码中，某些 svg 代码量太大。所以要检查每个 svg ，如果代码较多，就重新选择一个替换。

例如 IconMoon 的 svg 体积都相对较小 https://www.iconfont.cn/collections/detail?spm=a313x.7781069.0.da5a778a4&cid=20293

如果 IconMoon 没有合适的，就去 https://www.iconfont.cn/ 搜索一个。

【注意】1. 体积要小；2. svg 的图标内容不要变化太大！！！

bug 描述

链接后面直接输入拼音，会有 js 报错，且会重复输入。
而且，在链接后面回车换行，再输入拼音，也是一样的情况。

你预期的样子是？

能正常输入拼音

浏览器及版本号

chrome

wangEditor 版本

v5

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

• 访问 examples/default-mode.html
• 找一个现有的链接，或者插入一个新的链接
• 在链接后面：
  • 直接输入拼音
  • 或者回车换行，再输入拼音

bug 描述

设置/取消 表头，有时候需要点击两次才生效

你预期的样子是？

点击一次就应该生效

浏览器及版本号

chrome

wangEditor 版本

v5 WIP

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

• 访问 examples/index.html
• 插入一个表格，鼠标点击表格内
• 点击 hoverbar 中的“设置/取消 表头”菜单项

bug 描述

代码块的 hoverMenu 切换语言后展示的还是原来的语言，但是代码高亮的效果已经生效。

你预期的样子是？

代码块的 hoverMenu 切换语言后应该展示切换后的语言，并且响应的代码高亮也要有

浏览器及版本号

chrome 最新版本

wangEditor 版本

v5

官网能否复现该 bug ？

能

最小成本的复现步骤

• 打开 example/index.html
• 添加代码的效果，然后输入一些 js 代码，在 hoverMenu 中尝试切换其它语言，例如 ts
• 切换后代码高亮效果出来了，但是 hoverMenu 展示的还是原来的语言

功能描述

当弹出 modal 时，按 esc 键可以关闭

提炼几个功能点

• 按 esc 键，关闭 modal

原型图

无

可参考的案例

操作系统、各类 IDE ，都有这个功能，很好用。

bug 描述

表格和下一行文章的问题，如下：

当表格下有一行文字，光标移动到文字最前面，然后back space（删除），文字就会跑到表格里面

你预期的样子是？

这里按删除后，文字应该不能嵌入到表格中。

如
语雀文档，如果按删除，是将表格直接删除

有道云文档，如果按删除，会先聚焦表格，不会直接删除

腾讯文档，如果按删除，会先聚焦表格，不会直接删除

石墨文档，删除，先聚焦表格，不会直接删除

总结：
当表格下方有一行文字时，将光标移动到文字的第一个字符前，然后按删除键，应该是先聚焦表格，提示用户。大部分的文档都是先聚焦，不是直接删除(语雀除外)

浏览器及版本号

chrome 91.0.4472.114

wangEditor 版本

we-2021

官网能否复现该 bug ？

能

最小成本的复现步骤

bug 描述中可以复现

功能描述

modal 增加一个 title container ，在 title container 上显示 menu title ，并可拖拽 modal 位置
PS：万一 modal 定位错误，可以通过拖拽来补救

提炼几个功能点

• modal 增加一个 title container ，显示 menu title
• title container 可拖拽 modal 位置

原型图

无

可参考的案例

无

bug 描述

1.在某个单独的 package 目录下执行 yarn build 的时候报错

2.build 下 common.js 配置，每个加了 rollup-plugin-delete 配置，会导致构建生产版本的时候，在构建完 umd format 后，将之前构建的 esm format 构建的文件删除。

bug 描述

点击编辑器外区域，也就是编辑器失焦后，之前触发的弹窗不会消失。我去看了我们 v4 版本也没有消失，这个看是否需要优化，先提出来。

你预期的样子是？

无论点击编辑器内部其它区域还是编辑器外部区域，弹窗都应该消失

浏览器及版本号

chrome 最新版

wangEditor 版本

v5.0

官网能否复现该 bug ？

能

最小成本的复现步骤

• 打开 example/index.html
• 点击编辑区域，然后选择某个需要弹窗的菜单功能，比如插入链接
• 点击编辑器外部区域，此时弹窗没有消失

chrome 浏览器，访问 demo http://localhost:8881/examples/index.html

编辑区域，滚动到下图的位置，点击选中图片

然后点击 hoverbar “编辑图片”按钮
此时弹出 modal ，但是编辑区域会自动滚动到上方，体验非常不好。

bug 描述

插入一个视频（mp4 url 或者第三方 iframe），能插入成功。
但点击选中视频时，编辑区域会莫名的滚动，hoverbar 也会出现在其他位置，如下图：

【注意】mp4 url 或者第三方 iframe 最好都要试试，这俩有可能表现不一样。

• mp4 url 可以从这里复制一个 https://www.runoob.com/try/try.php?filename=tryhtml5_video_all
• 第三方 iframe 从 B 站获取即可

你预期的样子是？

点击选中视频，不要滚动

浏览器及版本号

chrome

wangEditor 版本

v5

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

• 访问 examples/index.html
• 插入一个视频（mp4 url 或者第三方 iframe ）
• 点击选中视频，会触发莫名的滚动
• 然后再随意滚动一下编辑器，再次点击选中视频，还可能会触发莫名的滚动

bug 描述

如题

你预期的样子是？

能显示所有输入

浏览器及版本号

chrome 最新版

wangEditor 版本

v5

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

• 参考 examples/index.html 源码，配置 maxLength 和 onMaxLength
• 编辑器输入拼音，到 maxLength 的值
• 拼音能继续输入，但英文、数字不可输入

现在 packages/editor 模块打包出来的体积较大，看能否继续优化一下。例如下图中：

• lodash-es 为何会占用这么大的体积（没有命中 tree-shaking 吗？？）？比 packages/core 的体积都大
• 为何会有 preact 的代码？我们项目中没有用到它
• （其他再自己找一找）

运行 yarn size-stats 可看到上图中体积分析的结果，具体参考 https://github.com/wangeditor-team/we-2021/blob/main/README.md

bug 描述

插入列表后输入内容 按退格键直到只剩下一行，退格键不能删除列表，按下回车则可以

你预期的样子是？

退格键可以删除列表

浏览器及版本号

谷歌

最小成本的复现步骤

• 步骤一 插入列表，输入内容，按退格键删除内容

bug 描述

如“插入链接”，弹出的 modal 中，input 没有被 focus 。
而代码中是写了 focus 的。

你预期的样子是？

input 应该被 focus

浏览器及版本号

chrome

wangEditor 版本

v5

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

• 访问 examples/index.html
• 点击“插入链接”菜单，弹出 modal
• 发现 input 并没有被 focus

chrome 访问 demo 页 http://localhost:8881/examples/index.html

多次打开 modal（如编辑链接），modal elem 会被重复创建。

预期应该是：一个modal 只创建一次 DOM 元素，不能重复。

bug 描述

点击编辑器的空白处，下拉框不会隐藏

你预期的样子是？

下拉框隐藏

浏览器及版本号

谷歌

最小成本的复现步骤

• 步骤一 点击带有下拉框的菜单，显示下拉框
• 步骤二 点击编辑器的空白处

bug 描述

你预期的样子是？

光标定位到输入的文字后面。

浏览器及版本号

safari v14

wangEditor 版本

v5

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

• 访问 examples/index.html
• 随便一行，拼音输入一个汉子
• 光标会定位到当前 text node 的最开始位置

bug 描述

当输入一行文字后，改变字体大小继续输入新的文字，会渲染多余的内容，然后接下来进行删除的时候也会出现问题

你预期的样子是？

正常渲染输入的文字，并且删除时行为正常

浏览器及版本号

Google Chrome 已是最新版本
版本 91.0.4472.114（正式版本） (x86_64)

wangEditor 版本

v5

官网能否复现该 bug ？

能

最小成本的复现步骤

• 步骤一： 先输入一行文字
• 步骤二：将字体大小修改为40px或者其他
• 步骤三：接着输入文字，就会出现上述问题

bug 描述

如下图：

你预期的样子是？

光标定位到下一行

浏览器及版本号

mac safari

wangEditor 版本

v5

最小成本的复现步骤

如标题描述

bug 描述

每次 hoverbarKeys 中的 match 函数会执行多次，看是否能优化

你预期的样子是？

只触发在 element 层级的那一次就行

最小成本的复现步骤

• 打开 example/index.html
• 用鼠标选中一段文字
• 通过 log 或者 debug 可以看到 match 函数执行了多次

bug 描述

在 firefox 中，选择一段文本点击创建连接菜单，插入一个链接，链接 hovermenu 的位置不精确，没有在链接的正上方

你预期的样子是？

创建链接，点击链接出现的 hovermenu 应该在链接的正上放

浏览器及版本号

firefox v89.02

wangEditor 版本

v5

官网能否复现该 bug ？

能

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

-选择一段文本点击创建链接菜单

• 创建一个链接
• 点击链接，查看 hovermenu ，位置不正确

bug 描述

输入一些内容，最后文字添加加粗、下划线背景色等样式，然后全选删除，菜单项对应的会被选中，且无法被取消选中。

你预期的样子是？

菜单项可以被取消选中

浏览器及版本号

chrome/84

wangEditor 版本

v5

官网能否复现该 bug ？

能/不能

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

• 步骤一 打开http://106.12.198.214:8882/editor/examples/default-mode.html
• 步骤二 添加内容，并将最后的内容添加加粗或者颜色等功能
• 步骤三 全选删除

bug 描述

火狐浏览器 - ctrl+a 全选 - 输入拼音，js 报错

你预期的样子是？

无报错

浏览器及版本号

mac os 火狐 v88

mac os safari

wangEditor 版本

v5

最小成本的复现步骤

火狐浏览器访问 examples/index.html

• 不要删除，直接输入拼音，js 报错
• 删除，输入拼音，换行，再输入拼音，js 报错

safari 浏览器访问 examples/index.html

• 不要删除，直接输入拼音，会重复输入（无 js 报错）
• 删除，输入拼音，换行，再输入拼音，会重复输入（无 js 报错）

bug 描述

使用编辑器图片上传功能上传图片，看到控制打印日志上传成功，但是编辑器没有展示图片

你预期的样子是？

编辑器内正常显示上传的图片

浏览器及版本号

chrome 最新版本

wangEditor 版本

v5.0

官网能否复现该 bug ？

能

最小成本的复现步骤

• 点击图片工具
• 选择上传图片
• 选择一张本地图片
• 点击确认上传，就能复现

chrome 浏览器

启动本地 demo ，访问 examples/index.html

1. 点击一个链接
2. 点击 hoverbar 的“取消链接”菜单，链接被取消，变成纯文本
3. 点击菜单栏“undo”按钮，再点击菜单栏“redo”按钮，此时控制台会有 js 报错

bug 描述

在火狐浏览器上创建编辑器全选编辑器内容拼音输入法输入中文，输入的文本异常（没有被包裹在正常的 p 标签下），控制台出现报错

你预期的样子是？

输入的内容应该被正常的 dom 结构包裹，控制台不出现报错

浏览器及版本号

firefox 最新版本

wangEditor 版本

v5

官网能否复现该 bug ？

能

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

• 打开 example/index.html
• 创建编辑器全选内容，使用拼音输入法输入中文
• 插入的文本异常，控制台报错

例如 basic-modules 中的 image module
获取 elemNode 的属性，就必须用 @ts-ignore ，否则就有语法报错，因为 slate Element 接口没有 src alt 等属性。

  // @ts-ignore
  const { src, alt = '', url = '', style = {} } = elemNode

再例如设置文本样式，获取各个 mark 也需要用 @ts-ignore

  // @ts-ignore
  const { bold, italic, underline, code, through } = node

所以，代码中有很多很多的 @ts-ignore，这并不是一个好现象，要想办法去掉。

需要为每一个 module 定义一个单独的 interface（扩展 Element 或者 Text），例如 slate 源码中的 https://github.com/ianstormtaylor/slate/blob/main/site/examples/custom-types.d.ts

如果要改，可以先以 basic-modules 中的 simple-style 和 image 两个模块做实验。

如题。

需全面考虑需求场景，写技术方案设计，评审后再开发。

bug 描述

新建一个表格，表格内插入一张图片，插入完成后将光标置于表格外重新插入一张新的图片，然后将光标定位在表格后面，按backspace删除，发现后面的图片被添加到了表格中。

你预期的样子是？

表格可以被正常删除

浏览器及版本号

Chrome/84.0.4147.89

wangEditor 版本

v5

官网能否复现该 bug ？

能/不能

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

• 步骤一 打开http://106.12.198.214:8882/editor/examples/default-mode.html
• 步骤二 新建一个表格，表格内插入一张图片，插入完成后将光标置于表格外重新插入一张新的图片，然后将光标定位在表格后面
• 步骤三 按backspace删除，发现后面的图片被添加到了表格中。

bug 描述

发现了几个打包的问题：

1. 提交非代码文件（如 md）也会触发 lint 和 test 检查，这不符合预期
2. 当前 eslint 中 == 不会提醒。按理说，应该提醒必须用 ===（除非是 == null）
3. 如果你在代码中写 $ ，即便没定义，eslint 也不会提示

wangEditor 版本

v5

bug 描述

插入视频报错 分两种情况

• 情况一： 403被服务器拦截情况下会报

• 错误信息： Uncaught (in promise) Error: Found multiple root nodes

• 情况二：非mp4后缀插入（虽然有提示插入MP4但并非所有MP4都包含后缀）

• 错误信息： index.js:13868 Uncaught (in promise) TypeError: Cannot read property 'type' of undefined

上述两种情况出现后每次输入内容都会重复触发错误信息
下面分别是两种情况截图

你预期的样子是？

插入后无报错

浏览器及版本号

Chrome/90.0.4430.212

wangEditor 版本

v5

官网能否复现该 bug ？

能/不能

最小成本的复现步骤

情况一

• 编辑器有内容情况下，随便找一条内容后面
• 插入视频 输入
• https://vd3.bdstatic.com/mda-mgudnwrxvqbw2980/sc/cae_h264/1627553100427586704/mda-mgudnwrxvqbw2980.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1627566724-0-0-e138d2ea64a0a3e6c37942cfb3541549&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=.mp4
• 控制台报错、输入内容时偶然触发报错

情况二

• 全选清空内容（不做偶尔也能触发）
• 插入视频 输入
• https://vd3.bdstatic.com/mda-mgudnwrxvqbw2980/sc/cae_h264/1627553100427586704/mda-mgudnwrxvqbw2980.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1627566724-0-0-e138d2ea64a0a3e6c37942cfb3541549&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=
• 控制台已报错、且输入时报错

两段链接不是相同的

bug 描述

当前的 demo 页 http://localhost:8881/examples/index.html

插入一张比较大的图片（尺寸是 1200 * 1793 ），目前滚动条在上方。

此时，点击图片，编辑区域会莫名的滚动到下方，体验非常差。

你预期的样子是？

点击图片，编辑区域不要滚动

浏览器及版本号

chrome 91

wangEditor 版本

v5

官网能否复现该 bug ？

最小成本的复现步骤

见上文 bug 描述

bug 描述

目前只测试到两种情况下会触发，但不确定是什么原因导致

• 情况一：无内容情况下，插入正常的视频
• 情况二：只有一些文字情况下插入正常的视频
  
  原本以为是没内容只有视频导致的，但情况二测试时发现还是无法使用菜单功能，初始状态下的编辑器插入视频可正常使用

你预期的样子是？

插入后菜单栏正常使用

浏览器及版本号

Chrome/90.0.4430.212

wangEditor 版本

v5

官网能否复现该 bug ？

能/不能

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

• 全选清空内容
• 输入一些文字（情况二需要操作）
• 插入正常访问的视频 pm4链接的
• 此时菜单栏已全置灰无法使用

功能描述

增加一个 API editor.focusEnd （或者在当前 editor.focus 函数增加一个 isEnd 参数，也可以） 来 focus 到文档末尾

提炼几个功能点

• focus 到文档末尾

原型图

无

可参考的案例

无

bug 描述

如下图。
切换 select 会有 js 报错。
而且一旦有了 js 报错，再继续操作编辑器，还会持续报错。

你预期的样子是？

没有 js 报错

浏览器及版本号

chrome 最新版

wangEditor 版本

v5

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

• 启动 react example ，访问测试页
• 切换 select ，会有 js 报错
• 继续操作编辑器，持续有 js 报错

bug 描述

examples/like-yuque.html 中，编辑器 focus 状态下，点击以外的 input ，第一次无法 focus 到 input

你预期的样子是？

点击一次即可 focus 到 input

浏览器及版本号

mac chrome 91

wangEditor 版本

v5

最小成本的复现步骤

（请告诉我们，如何最快的复现该 bug）

• 访问 examples/like-yuque.html ，刷新，此时默认 focus 到编辑器
• 点击编辑区域上面的 input ，编辑器 blur ，但无法 focus 到 input —— 不符合预期
• 再次点击 input ，才能 focus 到 input

chrome 打开 demo 页 http://localhost:8881/examples/index.html

选中代码块的文字，不应该出现 hoverbar 。

bug 描述

全选内容后删除，表格没有被删掉

你预期的样子是？

全选编辑器内的内容删除，可以删掉表格

浏览器及版本号

谷歌 版本 91.0.4472.77

最小成本的复现步骤

• 步骤一 插入表格，ctral+a
• 步骤二 点击退格键

全选删除后还留有一个表格头

现在已经安装了 @babel/plugin-transform-runtime 和 @babel/runtime ，并配置了 .babelrc ，但 build 之后仍然没有效果。

例如在源代码中加入 Promise 和 [].includes 等 API ，build 之后仍没有被解析。

需要排查一下原因。