title: Newlines and contenteditable with nested non-editable tags
body: <p>I have an odd case for <code>contenteditable</code> elements within HTML.  We have a rich text editor that customers load pre-made templates(by us) into, and then can modify that template however they want (mostly).</p>
  
  <p>Parts of our templates have been marked to not be directly editable, but can still be removed, etc.  However, there seems to be an issue when one such element is the first element on a line (directly after a <code>&lt;br/&gt;</code> tag), and the user hits <code>DEL</code> on the line above.  Because its <code>contenteditable=false</code>, the browser seems to delete not the <code>&lt;br/&gt;</code> but the entire non-editable span.</p>
  
  <p>Sample HTML is like this</p>
  
  <pre><code>&lt;div contenteditable=true&gt;
      &lt;span&gt;blah blah blah&lt;/span&gt;&lt;br/&gt;
      &lt;span contenteditable="false"&gt;You cant edit this value directly&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If the user puts their cursor after the <code>blah blah blah</code>, and hits <code>DEL</code> the entire next content editable is deleted, rather than the line break.</p>
  
  <p>Is there any way, javascript or otherwise, to fix this behavior?</p>
  
  <p>Ive fooled around with attempting to detect the cursor position(using rangy), and inserting temporary spaces, etc, but I cant seem to get it to have the desired behavior, which is just that the non-editable tag gets brought up to the previous line.</p>
  
  <p>We have limited the use of the editor to Chrome only, so no need to worry about IE or FF.</p>
  
  <p><a href="http://jsfiddle.net/HgRsF/">jsfiddle of an example</a></p>