Invalid HTML when creating list items with different heading sizes

[thdankert]

When creating lists and using a different heading size for each list item, the created HTML is invalid (wrong nesting of <ul> inside <h?> tags, nesting of <h?> tags, each list item in its own list).

When rendered in Mobile Safari, font sizes and line spacing are messed up too, although the latter is caused by the fixed line-height definition.

Steps to reproduce

• Created an unordered list
• Create item 1, set size H1
• Create item 2, set size H2
• Create item 3, set size H3

Expected result

Well-formed HTML is created, that is rendered as intended with respect to font size (H1 = largest, H3 = smallest) and line spacing (no overlapped drawing for list items).

Created HTML:

<div id="editor" contenteditable="true" placeholder="" class="" style="line-height: 28px;">
  <ul>
    <li><h1>Test with H1</h1></li>
    <li><h2>Test with H2</h2></li>
    <li><h3>Test with H3</h3></li>
  </ul>
</div>
<script type="text/javascript" src="rich_editor.js"></script>

Rendered:

Observed result

Created HTML:

<div id="editor" contenteditable="true" placeholder="" class="" style="line-height: 28px;">
<h1>
  <ul>
    <li>Test with H1</li>
  </ul>
  <h2>
    <ul>
      <li>Test with H2</li>
    </ul>
    <h3>
      <ul>
        <li>Test with H3</li>
      </ul>
    </h3>
  </h2>
</h1>
</div>
<script type="text/javascript" src="rich_editor.js"></script>

Rendered on iOS 11: