title: javascript contentEditable - wrap cross-tag selections
body: <p>I'm experimenting a bit with <code>contentEditable</code> and encountered this issue: I have the following js snippet</p>
  
  <pre><code>var range = document.getSelection().getRangeAt(0);
  var newNode = document.createElement("span");
  newNode.className = "customStyle";
  range.surroundContents(newNode);
  </code></pre>
  
  <p>and this HTML fragment:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;the &lt;b&gt;only entry&lt;/b&gt; of the list&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;Some text here in paragraph&lt;/p&gt;
  </code></pre>
  
  <p>The js code allows to wrap the current selection with a <code>&lt;span&gt;</code> tag.</p>
  
  <p>It works perfectly when the selection includes whole HTML tags (e.g. selecting 'the only entry of') but not, of course, when the selection includes only one of their endings (e.g. selecting from 'entry' to 'Some', both included).</p>
  
  <p>Though I'm aware this problem is not trivial, I'm looking for suggestions about the best approach. Thanks in advance!</p>