Firefox中insertUnorderedList方法Bug：WYSIWYG编辑器列表插入问题

最近我在开发一款所见即所得（WYSIWYG）编辑器，当前正在实现无序列表插入的功能，用的是原生API document.execCommand('insertUnorderedList') 来完成。

我的实现代码 #

下面是功能的演示代码：

<style>
div[contenteditable] { 
  width: 500px; 
  height: 300px; 
  border: 1px solid black; 
}
</style>

<button onclick="document.execCommand('insertUnorderedList')">insert unordered list</button>
<div contenteditable="true" spellcheck="false">
  <p>First line</p>
  <p>Secound line</p>
  <p>Third line</p>
  <p>Fourth line...</p>
</div>

遇到的问题 #

这个功能在Chrome等主流浏览器里都能正常工作，但在Firefox浏览器中存在Bug——具体表现为无法按照预期将选中的段落转换为无序列表，或者生成的列表DOM结构和其他浏览器不一致，导致编辑器的表现出现差异。

内容的提问来源于stack exchange，提问作者Kacper G.