title: Cursor moves to end of the contenteditable div when character removed from div
body: <p>I am working on creating my own chat application in which I used content-editable <code>div</code> as chatbox.
  I am implementing mention feature where my mention is username wrapped in a span tag followed by a space(<code>&amp;nbsp;</code>) but my problem is when I remove space my cursor moves to the end of the div.</p>
  
  <p>with space </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-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div contenteditable=true&gt;&lt;span contenteditable='false'&gt;UserName&lt;/span&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>without space</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-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div contenteditable=true&gt;&lt;span contenteditable='false'&gt;UserName&lt;/span&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is how I implemented in code and also this bug happens only in chrome.</p>