title: Adding <h1> around a selection
body: <p>I have a jsfiddle here - <a href="http://jsfiddle.net/88em6qq9/" rel="nofollow">http://jsfiddle.net/88em6qq9/</a> - where I'm trying to add <code>&lt;h1&gt;</code> tags around a selection of the entire line: "Here is some content and here too"</p>
  
  <p>Selecting the entire line and releasing the mouse button goes into the handler but rounding off the start and end end points with setStartBefore() and setEndAfter() gets me to different start and end containers, so the surround doesn't work.</p>
  
  <p>If I put "Here is some content" in its own <code>&lt;span&gt;</code> - see <a href="http://jsfiddle.net/88em6qq9/1/" rel="nofollow">http://jsfiddle.net/88em6qq9/1/</a> - then we round to the same container and the <code>h1</code> insert does work.  But I need a solution that puts <code>&lt;h1&gt;</code> tags around the selection whether the first phrase is in a span or not.</p>
  
  <p>Thanks for any help. </p>
  
  <pre><code>&lt;div id="container"&gt;
       &lt;div class="content" contenteditable="true"&gt;Here is some content&lt;span class="red"&gt; and here too&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>