Paragraph break after sublist is rendered before sublist

[zackw]

Consider this test Markdown fragment...

* outline item 1
  + with sublist

* outline item 2
  + with sublist

Mistletoe 1.4.0 compiles this to the following HTML (manually indented for clarity):

<ul>
  <li>
    <p>outline item 1</p>
    <ul>
      <li>with sublist</li>
    </ul>
  </li>
  <li>
    <p>outline item 2</p>
    <ul>
      <li>with sublist</li>
    </ul>
  </li>
</ul>

Because the <p> for each top-level list item is closed before the associated nested list, browsers render this HTML fragment with a paragraph break before the nested list and not after the nested list, contrary to author intention.

Mistletoe should instead close each paragraph tag after the associated nested list, like this:

<ul>
  <li>
    <p>outline item 1
      <ul>
        <li>with sublist</li>
      </ul>
    <p>
  </li>
  <li>
    <p>outline item 2
      <ul>
        <li>with sublist</li>
      </ul>
    </p>
  </li>
</ul>

This will render as intended.

[pbodnar]

Hi @zackw, the thing you propose wouldn't be easy to do, because after parsing the markdown, paragraphs are tokens which hold just the plain text - they cannot contain things like lists.

OTOH, this is actually in line with how HTML works - see e.g. Ul can´t be child of p, but why?. Also, mistletoe seems to be compatible with how e.g. GitHub renders the HTML from markdown here.

What you probably want to achieve can be done by making the list not loose (no blank lines in it):

* outline item 1
  + with sublist
* outline item 2
  + with sublist

This renders as:

<ul>
  <li>
    outline item 1
    <ul>
      <li>with sublist</li>
    </ul>
  </li>
  <li>
    outline item 2
    <ul>
      <li>with sublist</li>
    </ul>
  </li>
</ul>