title: JavaScript Range setStart not working on "Bold" Text
body: <p>I want to set cursor/caret position manually. This is working fine if contents are only text in a <code>contenteditable</code>. But if content contains text with bold, underline etc then the it is not working and it throws and error</p>
  <pre><code>Uncaught IndexSizeError: Failed to execute 'setStart' on 'Range': There is no child at offset 2.
  </code></pre>
  <p>in below sample if you enter &quot;0&quot; in Node number then the cursor moves. But if you enter &quot;1&quot; in Node number then it throws error. What's wrong in it to move cursor over bold text.</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>  button.onclick = () =&gt; {
      let range = new Range();
  
      range.setStart(p.childNodes[node.value], start.value);
    
      document.getSelection().removeAllRanges();
      document.getSelection().addRange(range);
    };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p id="p" contenteditable="true"&gt;This is &lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;
  
  Cursor Position &lt;input id="start" type="number" value="2"&gt;  Node number &lt;input id="node" type="number" value="0"&gt;
  &lt;button id="button"&gt;Mover Cursor&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>