划分一个内联节点，并在两者之间插入一个块级节点

Question

我需要划分一个内联节点，并在两者之间插入一个块级节点。

下面用FrameLayout表示光标位置。假设我从这里开始：

|

我需要一个可以将其转换为此的函数：

<div contenteditable>
    <p>Here is the first <span class="something">sentence. |This</span> is the second sentence.</p>
</div>

这是我要开始使用的功能：

<div contenteditable>
    <p>Here is the first <span class="something">sentence. </span></p>
    <blockquote></blockquote>
    <p><span class="something">This</span> is the second sentence.</p>
</div>

但是此功能会给我这个不正确的结果：

function insertBlockElement(elem) {
    let sel = window.getSelection();
    let range = sel.getRangeAt(0).cloneRange();
    range.insertNode(elem); // assume sel.isCollapsed is `true`
    sel.removeAllRanges();
}

我需要关闭<div contenteditable> <p>Here is the first <span class="something">sentence. <blockquote></blockquote> This</span> is the second sentence.</p> </div> 和<span>，然后在块级元素之后重新打开。

假设唯一的内联元素是<p>和<span>。

这与this question类似，但似乎已过时，并且与我的问题稍有不同。