range.surroundNode删除父节点的TextContent

Question

我试图创建一个像CKeditor这样的文本编辑器，所以我的第一个目标是获取选择并将标记添加到选择中。当我选择文本并单击一个按钮时，它将得到选择，然后将其与段落元素一起包围。它是第一次工作，但是当我再次尝试时，它会删除所有元素（因此是本例中创建的第一个段落元素），并用段落元素包围新选择。我尝试删除当前选择，然后添加插入一个新段落元素，并将所选文本作为innerText。

这是我的JavaScript。

var editable = document.querySelector("button");
var newNode = document.createElement("p");
newNode.textContent = "hey"

editable.addEventListener("click", function (event) {
    var selection = window.getSelection();
    var node_sel = selection.getRangeAt(0);
    console.log(selection.rangeCount);
    node_sel.surroundContents(newNode)
    //node_sel.insertNode(newNode);

})