title: Allow moving out of a span at the end of a contenteditable
body: <p>I'm trying to write a basic text editor using <code>contenteditable</code>. In this MCVE, it only has one function, which is that selected text is given a red highlight.<sup>†</sup></p>
  
  <p>The code I'm using is here:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function createSpan() {
      let selection = document.getSelection();
      let range = selection.getRangeAt(0);
      let element = document.createElement("span");
      element.className = "inline-equation";
      range.surroundContents(element);
  
      let newRange = new Range();
      newRange.selectNodeContents(element);
      selection.removeAllRanges();
      selection.addRange(newRange);
  }
  
  $("button").click(createSpan)</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.inline-equation {
    background-color: red;
    display: inline-block;
  }
  
  #editor {
    width: 100%;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button&gt;
  Create Span
  &lt;/button&gt;
  &lt;div id="editor" contenteditable="true"&gt;
  This is a contenteditable area.
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm having trouble with the idea that the user may <em>move out</em> of the highlight area and continue typing in unformatted text. To experience this issue:</p>
  
  <ol>
  <li>Run the Stack Snippet above</li>
  <li>Select the text from somewhere in the middle til the end, then click <em>Create Span</em></li>
  <li>Type some new text at the end of the line</li>
  </ol>
  
  <p>This new text has the red highlight too, even if you attempt to move out of the inserted <code>span</code> by pressing the right arrow key.</p>
  
  <p>I'd still like to give the user the option to append new text which is formatted, but then also allow the user to navigate out of the <code>span</code> so that they may continue to type normal text.</p>
  
  <p>In other words, the <code>span</code> should act as a completely separate editable object which may be moved into or out of. This includes the ability to move out of the <code>span</code> even if it's at the end of the document, so that the user can continue typing in non-formatted text.</p>
  
  <p>The best example I am able to give of what I'd like is Microsoft Word's inline equations. Notice how, in the GIF below, the equation acts as a separate object, which I may navigate out of so that I can type normal text to the right of it. The is how I'd like my <code>span</code> to act.</p>
  
  <p><a href="https://i.stack.imgur.com/tWx91.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tWx91.gif" alt="https://i.imgur.com/QEcDhHi.gifv"></a></p>
  
  <p>I've tried replacing the <code>span</code> with a <code>div</code> with <code>inline-block</code> formatting to see if that affected the behaviour, but it didn't. How should I achieve the effect I'm looking for?</p>
  
  <hr>
  
  <p><sup>†</sup> In the actual use case, the 'highlight' actually denotes LaTeX-formatted mathematics which are rendered later. I'm writing what is essentially an editor for a proprietary markup language which supports inline LaTeX.</p>