title: After adding span tag in contenteditable cursor move to end in IOS safari
body: <p>I have a feature where users can click on the tag and the same has been added to <code>contenteditable</code> div. this works fine but when I do it back and forth the cursor moves the end of the div.</p>
  
  <p>This is when user adds variable first time and cursor seems fine.</p>
  
  <p><a href="https://i.stack.imgur.com/NzI5y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NzI5y.png" alt="enter image description here"></a></p>
  
  <p>This is when user remove and add tag again</p>
  
  <p><a href="https://i.stack.imgur.com/N7I7P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N7I7P.png" alt="enter image description here"></a></p>
  
  <p>The tag has been added by the following code and this issue is happing in ios safari only.</p>
  
  <pre><code>insertTextAtCursor = (text, paste = false) =&gt; {
      const sel = window.getSelection();
      // Make sure we're focused on the compose element
      this.compose.focus(); // contenteditable div ref
  
      if (sel.getRangeAt &amp;&amp; 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);
      }
    }
  </code></pre>
  
  <p><strong>Edit</strong>
  The cursor becomes too big after adding <code>display: inline-block</code> property.</p>
  
  <p><a href="https://i.stack.imgur.com/dBNFt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dBNFt.png" alt="enter image description here"></a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="variable-message-input-message-fb39fc57-7909-47e2-9de8-042e70eee3ad" class="variable-message__compose" contenteditable="true" name="message" placeholder="" style="
  /* display: inline-block; */"&gt;&lt;span spellcheck="false" contenteditable="false" id="span-First Name" class="variable-message__variable"&gt;&lt;i&gt;{&lt;/i&gt;&lt;div&gt;First&lt;/div&gt;&lt;b&gt;_&lt;/b&gt;&lt;div&gt;Name&lt;/div&gt;&lt;i&gt;}&lt;/i&gt;&lt;span class="variable-message__close"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>background-color: #fcfcfc;
  border: 1px solid #e3e3e3;
  border-top-left-radius: .2rem;
  border-top-right-radius: .2rem;
  color: #404040;
  min-height: 4rem;
  padding: 1rem 1.2rem;
  </code></pre>