内容可编辑div与孩子 - 得到插入位置

Question

我已经看到很多关于插入位置的问题。他们中的大多数都很老。

我有一个带有子项的div，其内容可编辑设置为true。

  <div tabindex="-1" id="id0"  contenteditable="true" >
    <p class="circle"></p>
    <p class="corner"></p>
    text here
  </div>

  function getCaretPosition(element) {
    let element2 = $(element).get(0);
    let caretOffset = 0;

        let range = window.getSelection().getRangeAt(0);
        let preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element2);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        caretOffset = preCaretRange.toString().length;

    return caretOffset;
}

setInterval(function(){
console.log(getCaretPosition(document.getElementById("id0")));
},1000);

当我得到插入符号时，它似乎是偏移的，具体取决于div的子元素。怎么解决这个问题？我不想硬编码偏移量。

https://jsfiddle.net/nm9zjLma/2/