当我将拖动的元素放入其中时，段落正在分裂

Question

我正在 WYSIWYG 组件（基于Medium-Editor ）上创建拖放 function ，工作得相当好，除了 firefox 似乎有一些问题。

该功能展示允许用户拖动一些“小部件”（基本上只是 div）并更改其位置，该机制基于使用原生 JS 拖放的 dataTransfer，然后，一旦用户准备好拖放到给定段落（因为周围有很多文本），小部件被添加到段落之后。

一个特别的问题仍然令人困惑：在删除时，对于 Firefox，段落在鼠标的 cursor 指向的地方分裂，因此从一个旧的和独特的段落元素创建两个新的段落元素。 在 Chrome 中，它工作得很好。 使用 After 方法，这应该是标称行为。

核心代码如下：

可拖动小部件：

// Drag event listener
widgetElement.addEventListener('dragstart', event => {
    // @ts-ignore
    document.dragSourceElement = widgetElement
    event.dataTransfer.effectAllowed = 'move'
    event.dataTransfer.dropEffect = 'move'
    event.dataTransfer.setData('text/html', widgetElement.outerHTML)
})

“目标”段落：

// Drop event listener
paragraphElement.addEventListener('drop', _ => {
    if (document.dragSourceElement && document.dragSourceElement !== paragraphElement) {
        if (this.detectBrowser() === 'chrome') {
            paragraphElement.after(document.dragSourceElement)
        }
        // Treat Firefox singularly since it interprets "move" in drag&drop as "copy" (For some reason) through the use of a isParagraph flag.
        if (this.detectBrowser() === 'firefox') {
            paragraphElement.after(document.dragSourceElement)

            // isParagraphe is true, remove the old dragged widget and create a new one on the drop position. isParagraph is set in an argument of a higher order method.
            if (isParagraphe) {
                document.dragSourceElement.remove()
            }
        }
    }

    return false
})

这是 chrome 上发生的事情的 gif 图像：

这是 firefox 上发生的事情的 GIF：

好的，那为什么有区别？ 在不同的浏览器上实现 Medium-editor 可能会有所不同，但我怀疑 Firefox 管理事件的方式不同。

什么是协调行为并确保我在 Firefox 中获得类似铬的行为的最干净的方法（除非必要，否则让我们尽量避免解析整个文本以重构段落 xD 的旧状态）。

谢谢。