remarkjs / remark-rehype

plugin that turns markdown into HTML to support rehype
https://remark.js.org
MIT License
266 stars 18 forks source link

Allow disabling loose lists #36

Closed stevemk14ebr closed 6 months ago

stevemk14ebr commented 6 months ago

Initial checklist

Problem

With nested lists, the loose flag in listItem causes newlines at the start of line items that breaks proper list rendering. See

<ul>
<li><div style="border: 1px solid rgba(255, 255, 255, 0.15); display: inline-block; border-radius: 4px; width: fit-content;"><span class="markdown" style="list-style-position: outside; display: inline; font-family: monospace; text-decoration: none; white-space: pre-wrap;"><code>hxxps[:]//evil[.]com/</code></span></div>
<div style="border: 1px solid rgba(255, 255, 255, 0.15); display: inline-block; border-radius: 4px; width: fit-content;"><span class="markdown" style="list-style-position: outside; display: inline; font-family: monospace; text-decoration: none; white-space: pre-wrap;"><ul>
<li><code>uri</code>: <code>/update.bin</code>
<ul>
<li><code>domainname</code>: <code>evil[.]com</code></li>
<li><code>scheme</code>: <code>hxxps</code></li>
</ul>
</li>
</ul></span></div></li>
</ul>

vs loose list:

<ul>
<li>
<p><div style="border: 1px solid rgba(255, 255, 255, 0.15); display: inline-block; border-radius: 4px; width: fit-content;"><span class="markdown" style="list-style-position: outside; display: inline; font-family: monospace; text-decoration: none; white-space: pre-wrap;"><code>hxxps[:]//evil[.]com/</code></span></div></p>
<p><div style="border: 1px solid rgba(255, 255, 255, 0.15); display: inline-block; border-radius: 4px; width: fit-content;"><span class="markdown" style="list-style-position: outside; display: inline; font-family: monospace; text-decoration: none; white-space: pre-wrap;"><ul>
<li><code>uri</code>: <code>/update.bin</code>
<ul>
<li><code>domainname</code>: <code>evil[.]com</code></li>
<li><code>scheme</code>: <code>hxxps</code></li>
</ul>
</li>
</ul></span></div></p>
</li>
</ul>

The issue is specifically:

<ul>
<li>
<p>

The start of the

block is put on a newline after the li and this newline causes the bullet to be on the wrong line. In the first case it goes:

<ul>
<li><div...

Where the div is immediately after with no newline and this renders correctly.

image

The markdown here is:

## Connections

*   `hxxps[:]//evil[.]com/`

    *   `uri`: `/update.bin`
        *   `domainname`: `evil[.]com`
        *   `scheme`: `hxxps`

Compare this to a markdown without a space between the first bullet and the next ones. (Not a loose list). image With the markdown being:

## Connections

*   `hxxps[:]//evil[.]com/`\
    *   `uri`: `/update.bin`
        *   `domainname`: `evil[.]com`
        *   `scheme`: `hxxps`

So you can see how this is undesireable, the bullet should stay aligned to the correct row but it's not when loose lists are detected. Please allow an option to disable loose lists, I cannot have this newline character present at the start of the listItem.

Solution

Add an optional flag to disable loose lists

Alternatives

Change listItem to not place a newline before the listItem.

github-actions[bot] commented 6 months ago

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

stevemk14ebr commented 6 months ago

Sorry wrong repo, move: https://github.com/syntax-tree/mdast-util-to-hast/issues/73

github-actions[bot] commented 6 months ago

Hi team! Could you describe why this has been marked as external?

Thanks, — bb