How to make a contenteditable of only lists?

Question

I'm trying to create a contenteditable editor where everything is a list. However if I simply give a ul tag contenteditable="true", the top list item can be deleted. How do I make it so that every new line is a list, and the top line li cannot be deleted. Thanks

Here's what I've got :

<ul style="height: 300px;" contenteditable="true">
    <li>Type text here. Try deleting this list item.</li>
</ul>

Answer 1

The most trivial way of solving your problem would be insert an empty non-editable <span> into the first <li> element.

This is also not absolutely fool-proof, but will protect the first <li> element against most edit attempts.

<ul contenteditable="true">
    <li><span contenteditable="false"></span>Type text here. Try deleting this list item.</li>
    <li>editable!</li>
</ul>