title: HTML contenteditable lists: The first list item acts weirdly?
body: <p>So I'm trying to do a pretty simple contenteditable list with HTML that looks like this:</p>
  
  <pre><code>&lt;article contenteditable="true"&gt;
  
  &lt;p&gt;Text in doc&lt;/p&gt;
  &lt;ol&gt;
  &lt;li&gt;&lt;p&gt;Text in first LI&lt;/p&gt;&lt;p&gt;Has another para&lt;/p&gt;
      &lt;ol&gt;
          &lt;li&gt;&lt;p&gt;Text in nested LI&lt;/p&gt;&lt;/li&gt;
          &lt;li&gt;&lt;p&gt;Text in nested LI2&lt;/p&gt;&lt;p&gt;And then some&lt;/p&gt;&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;p&gt;Text in second LI&lt;/p&gt;&lt;/li&gt;
  &lt;/ol&gt;
  
  &lt;/article&gt;
  </code></pre>
  
  <p>In Webkit based browsers if you have a play around with it you find that it works pretty reasonably, inserting paragraphs when you hit enter, deleting list items if you hit backspace on them and things like that.</p>
  
  <p>However if you try and delete the first item in the list (whilst there are still other things in the list), things get weird. You pretty much can't do it. And in fact what it does is move the text to the previous paragraph and leave you with an empty list item that you can no longer get to.</p>
  
  <p>Maybe this is a defect in Webkit, but Firefox works the same way... In any case, can anyone suggest a workaround? I was thinking if I had some javascript that detected if it was the first character of the list then it would at least stop some of the unintuitive behaviour but you can still highlight across the item and hit del and still have an unreachable 1.</p>
  
  <p>I have also tried making them divs and using the bleeding edge chrome, same behaviour.</p>
  
  <p>See <a href="http://jsfiddle.net/2Unmz/14/" rel="nofollow">http://jsfiddle.net/2Unmz/14/</a> though it does act differently there than it does in my browser directly. </p>