formatBlock command does not overwrite existing block on list item

Question

Please see http://jsfiddle.net/4aQtk/3/

I tried to change style of li via execcommand("formatBlock",...). It works well on normal paragraph nodes, but makes nodes on list items.

Firefox 27 : OK, style elements(p, h1, h2) wrapped just text in li element. (expected)

<ul>
    <li>
        <h1>text</h1>
    </li>
    <li>another text</li>
</ul>

Chrome 33 : Failed, formatBlock command brake down ul into several uls and wrap ul with style elements.

<h1>
    <ul>
        <li>
            text
        </li>
    </ul>
</h1>
<ul>
    <li>another text</li>
</ul>

How do I prevent creating nodes on them?

Answer 1

If you wrap the contents of the li into a div it works fine.

<ul>
    <li><div>list item 1</div></li>
    <li><div>list item 2</div></li>
    <li><div>list item 3</div></li>
</ul>

An h1 tag isn't a valid child for an unordered list so it kind of wraps it outside the parent ul and puts a new ul inside the h1-tags. Because a h1 just replaces the div there is no problem anymore.

I hope this helped.

Edit:

The fact that it works with the paragraphs is it that it just replaces the p-tags with h1's so the best way should be if the h1's were inside the paragraphs.

Answer 2

From https://developer.mozilla.org/en-US/docs/Web/API/document.execCommand

Adds an HTML block-style tag around the line containing the current selection, replacing the block element containing the line if one exists (in Firefox, BLOCKQUOTE is the exception - it will wrap any containing block element). Requires a tag-name string to be passed in as a value argument. Virtually all block style tags can be used (eg. "H1", "P", "DL", "BLOCKQUOTE"). (Internet Explorer supports only heading tags H1 - H6, ADDRESS, and PRE, which must also include the tag delimiters < >, such as "".)

The <li> element represents a list of items, therefor the formatBlock comand will wrap it the list with the Block elment (p, h1,...). Since this is not allowed for the li element, the list is split into multiple lists and the "list to format" is wrapped with the Block element.

Since your code triggers always on the li element, this is done again and again, because you are executing a formatingcomand, which is not intended to be used on this kind of element. @Steven Vanden Broucke posted a solution, how you can avoid this.

Since it is not exactly specified how this should be handled, I suggest doing that.

Edit: I created a bug report at chromium for this issue. ( https://code.google.com/p/chromium/issues/detail?id=372925&thanks=372925&ts=1400009358 )