Javascript 在contenteditable中添加span标记后，将光标移动到IOS safari中的末尾

我有一个功能，用户可以点击标签，标签也被添加到

contenteditable

div中。这个功能很好，但当我来回点击标签时，光标会移动div的末尾

这是用户第一次添加变量时，光标看起来很好

这是用户再次删除和添加标记的时候

标签是由以下代码添加的，此问题仅在ios safari中发生

insertTextAtCursor = (text, paste = false) => {
    const sel = window.getSelection();
    // Make sure we're focused on the compose element
    this.compose.focus(); // contenteditable div ref

    if (sel.getRangeAt && sel.rangeCount) {
      const range = sel.getRangeAt(0);
      range.deleteContents();
      if (paste) {
        range.insertNode(document.createTextNode(text));
        range.selectNode(document.createTextNode(text));
      } else {
        range.insertNode(text);
        range.selectNode(text);
      }
      // calling deleteContents and replacing with HTML leaves behind an empty node, so here we clean discard it.
      const newRange = range.cloneRange();
      range.setEndBefore(text);
      newRange.setStartAfter(text);
      newRange.setEndAfter(text);
      sel.removeAllRanges();
      sel.addRange(newRange);
    }
  }

编辑 添加

display:inline block

属性后，光标变得太大

HTML

<div id="variable-message-input-message-fb39fc57-7909-47e2-9de8-042e70eee3ad" class="variable-message__compose" contenteditable="true" name="message" placeholder="" style="
/* display: inline-block; */"><span spellcheck="false" contenteditable="false" id="span-First Name" class="variable-message__variable"><i>{</i><div>First</div><b>_</b><div>Name</div><i>}</i><span class="variable-message__close"></span></span></div>

尝试将此添加到css下面

[contenteditable] {
    display: inline-block;
}

---

共享HTML代码请…这项工作，但光标变得太大。我上传了截图问题你能分享你的cssI吗？我的问题中添加了HTML/CSS

[contenteditable] {
    display: inline-block;
}