Skip to content

Task list checkbox rendered outside the <p> in loose nested lists, inconsistently within the same list #4045

Description

@Snowball-V

Marked version

18.0.9 (browser, UMD build). Not present in 15.0.12.

Describe the bug

In a loose task list that contains a nested list, the checkbox is sometimes emitted outside the paragraph :

<li><input type="checkbox"> <p>Text</p>

instead of inside it :

<li><p><input type="checkbox"> Text</p>

Since <p> is a block element, the checkbox ends up alone on its own line and the label drops below it.

What makes me think this is a bug rather than a deliberate change :

**it is inconsistent within a single list. ** In the sample below, three of the four task items get the checkbox outside the paragraph, and one gets it inside, for identical Markdown structure.

To Reproduce

* [ ] Prepare the project

  * [ ] Install dependencies
  * [x] Update Marked
  * [ ] Check the rendering
* [x] Run the tests

  * [x] Test lists
  * [ ] Test tables

    * [ ] Test nested cases

Output on 18.0.9 :

<ul>
<li><input disabled="" type="checkbox"> <p>Prepare the project</p>
<ul>
<li><input disabled="" type="checkbox"> Install dependencies</li>
<li><input checked="" disabled="" type="checkbox"> Update Marked</li>
<li><input disabled="" type="checkbox"> Check the rendering</li>
</ul>
</li>
<li><p><input checked="" disabled="" type="checkbox"> Run the tests</p>
<ul>
<li><input checked="" disabled="" type="checkbox"> <p>Test lists</p>
</li>
<li><input disabled="" type="checkbox"> <p>Test tables</p>
<ul>
<li><input disabled="" type="checkbox"> Test nested cases</li>
</ul>
</li>
</ul>
</li>
</ul>

Run the tests is the odd one out : same structure as the others, but its checkbox stays inside the <p>.

Same input on 15.0.12, for comparison

<ul>
<li><p><input disabled="" type="checkbox"> 
Prepare the project</p>
<ul>
<li><input disabled="" type="checkbox"> Install dependencies</li>
<li><input checked="" disabled="" type="checkbox"> Update Marked</li>
<li><input disabled="" type="checkbox"> Check the rendering</li>
</ul>
</li>
<li><p><input checked="" disabled="" type="checkbox"> 
Run the tests</p>
<ul>
<li><p><input checked="" disabled="" type="checkbox"> 
Test lists</p>
</li>
<li><p><input disabled="" type="checkbox"> 
Test tables</p>
<ul>
<li><input disabled="" type="checkbox"> Test nested cases</li>
</ul>
</li>
</ul>
</li>
</ul>

15.0.12 always keeps the checkbox inside the <p>, so it renders on one line. The stray newline after the <input> collapses to whitespace and makes no visual difference.

Expected behavior

The checkbox stays inside the paragraph, as in 15.0.12, and the placement is at least consistent across items of the same list.

Note

I bisected by testing every version from 13.0.0 to 18.0.9 on https://marked.js.org/demo/ (the version dropdown makes this easy).

Output is identical to 15.0.12 all the way through 16.X, then changes starting exactly at 17.0.0, and stays the same from 17.0.0 through 18.0.9.

So the regression was introduced in 17.0.0, though I haven’t looked at the commits to say which change is responsible : the checkbox-token/loose-list-paragraph changes mentioned in the 17.0.0 release notes look like the right area, but that’s a guess.

I ran the same corpus (~30 list variations) through both versions and this is the only case where the rendered output differs visually.
Everything else was whitespace-only changes in the source.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions