在首行插入视频时，上方存在空段落且无法删除

[sakurawaifu]

bug 描述

在首行插入视频时，上方存在空段落且无法删除

你预期的样子是？

在首行插入视频时，无空段落。插入图片就不存在此问题。

系统和浏览器及版本号

• 操作系统 Windows 10 Version 22H2 (Build 19045.2251)
• 浏览器和版本 Google Chrome | 107.0.5304.107 (正式版本) （64 位）

wangEditor 版本

5.1.23

demo 能否复现该 bug ？

能

• 中文 demo https://www.wangeditor.com/demo/
• English demo https://www.wangeditor.com/demo/?lang=en

最小成本的复现步骤

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

• 步骤一 光标移动到首行
• 步骤二 插入视频

[caohuiboss]

你好 这个解决了嘛，我用的版本如下，也是这个问题，首行插入视频时，视频前面和视频后面会存在空段落，首行的却无法删除

{
    "@wangeditor/core": "^1.1.19",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.12",
    "@wangeditor/plugin-ctrl-enter": "^1.1.2"
}

[sakurawaifu]

你好 这个解决了嘛，我用的版本如下，也是这个问题，首行插入视频时，视频前面和视频后面会存在空段落，首行的却无法删除

{
    "@wangeditor/core": "^1.1.19",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.12",
    "@wangeditor/plugin-ctrl-enter": "^1.1.2"
}

没有。

这个bug究其原因就是视频结点前后均强制存在一个<p>元素。这导致只要视频在开头或结尾，必然存在空段落。这个问题说实话很致命，因为和需求不一致。

飞书的编辑器插入的视频结点是独立存在的，与前后元素没有强关联。

你可以去看下视频元素插入逻辑，以及文档的"自定义扩展新功能"章节，自己扩展一个新的视频元素，同时重写视频菜单。我当时工期紧没时间弄，后来项目结项也就当遗留问题单了。

[caohuiboss]

插个眼，后续有人需要解决这个问题的可以暂时用这个方案目前我是vue3+vite

import { IDomEditor } from '@wangeditor/core'

const getNodeType = (node: any) => node.type

export const edgeRepair = (editor: IDomEditor) => {
  // 判断是否
  if (getNodeType(editor.getFragment()[0]) === 'video') {
    // 首行清除
    const children = editor.children
    if (children.length > 1) {
      const firstNode = children[0]
      const secondNode = children[1]
      if (getNodeType(firstNode) === 'paragraph' && getNodeType(secondNode) === 'video') {
        if (firstNode.children[0].text === '') {
          editor.children = children.slice(1)
        }
      }
    }
  }
}

在editorConfig['MENU_CONF'].insertVideo配置

editorConfig['MENU_CONF'].insertVideo = {
      onInsertedVideo: (video) => {
        nextTick(() => {
          edgeRepair(editorRef.value)
        })
      },
}

[caifu23]

const {  DomEditor,SlateTransforms } = wangEditor;
// fix: 插入和上传视频的前面会自动添加一个空行，无法删除
editorConfig['MENU_CONF'].insertVideo = {
    onInsertedVideo: (video) => {
        // 如果当前是空 p ，则删除该 p
        if (DomEditor.isSelectedEmptyParagraph(editor)) {//选区是否在一个空行
            SlateTransforms.removeNodes(editor, { mode: 'highest' })
        }
    },
}

[cycleccc]

已在 wangeditor-next 解决 https://github.com/cycleccc/wangEditor-next/issues/55

[caifu23]

已在 wangeditor-next 解决 cycleccc/wangEditor-next#55

好的，谢谢