H1 toggle endlessly grows text if in <ol>/<ul>

[dvnrsn]

Chrome 75

Given

<ol><li>bla</li></ol>

Invoking formatBlock() and thus performCommandWithValue() with param "h1" results in expected:

<h1><ol><li>bla</li></ol></h1>

On second click, we'll fall (as expected) into

// useFormatBlockHook 'h1' = 'h1'
if (value === document.queryCommandValue('formatBlock')) {
  performCommandWithValue('div')

and on the resulting execution of document.execCommand('formatBlock', 'div') we get a div wrapped by h1:

<h1><div><ol><li>bla</li></ol></div></h1>

This behavior is unexpected to me especially given formatBlock's description: Adds an HTML block-level element around the line containing the current selection, replacing the block element containing the line if one exists.

Another click replaces the div with an h1:

<h1><h1><ol><li>bla</li></ol></h1></h1>

and <h1>s all the way down

Why is <ol> breaking formatBlock behavior? Is there a way to detect if current line is <ol>?

Interestingly, even though <ol> is indeed a block level element, it is not detected by document.queryCommandValue('formatBlock') (I get an empty string).

[dvnrsn]

Will this be a situation where we have to resort to browser checks and direct DOM manipulation? I hope not, but here is a PR that works for my chrome https://github.com/CanopyTax/bandicoot/pull/54/files. This is intended strictly for discussion and proof of concept.

[joeldenning]

I'll leave a comment on #54 for this

[dvnrsn]

Firefox

(Each line is a click to h1 with cursor on <li>)

<li><h1>awef</h1></li>
<li><div>awef</div></li>
<li><div><h1>awef</h1></div></li>
<li><div><h1>awef</h1></div></li>
<li><div><h1>awef</h1></div></li>

(it stops changing)

[dvnrsn]

Safari appears to mimic Chrome behavior

[dvnrsn]

wrote note in docs for this