title: Get caret index in contenteditable div including tags
body: <p>I have a <code>contentEditable</code> <em>div</em> in which I have multiple tags (<code>br</code>, <code>b</code>, <code>u</code>, <code>i</code>) and text. </p>
  
  <p>I need to get the caret index position relative to the div, including all the tags. </p>
  
  <h3>For example:</h3>
  
  <pre><code>&lt;div id="h" contenteditable="true"&gt;abc&lt;b&gt;def&lt;br&gt;ghi&lt;/b&gt;jkl&lt;/div&gt;
  </code></pre>
  
  <p>If the cursor is between <code>g</code> and <code>h</code>, I need the caret index position to be <code>14</code>.
  The problem is that the found methods that use a <a href="https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker" rel="nofollow noreferrer"><code>treeWalker</code></a> do not work in this case.
  The bold tag is not found... probably because it isn't closed.
  Also I have tried several methods but still no luck.</p>
  
  <p>I need it to work in <em>Firefox</em>.
  Thank you.</p>