Additional text after nested list is not correctly indented if I use 4 spaces

[wpyoga]

🐛 Bug Report

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io
• I have read the console error message carefully (if applicable)

Description

If I use 4 spaces to indent my list, then additional text after a nested list is not correctly indented. If I use 2 spaces, then it is indented correctly. If there is no nested list item, then the indentation is correct even if I use 4 spaces.

Have you read the Contributing Guidelines on issues?

Yes.

Steps to reproduce

1. Initialize a new docusaurus website

2. Modify docs/intro.md, add the following at the top:

   - list 1
       - list 1-1
   
       paragraph with wrong indentation
   
   - list 2
       - list 2-1
   
     paragraph with correct indentation
   
   
   - list 3
     - list 3-1
   
     paragraph with correct indentation
   
   - list 4
   
       paragraph with correct indentation
   

Expected behavior

If I use 4 spaces to indent the additional paragraph, it is indented correctly (same level as the top level list).

Actual behavior

The paragraph is indented at the same level as the nested list.

Your environment

• Public source code: https://github.com/wpyoga/docusaurus-nested-indent-problem
• Public site URL: (none)
• Docusaurus version used: 2.0.0-beta.6
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Google Chrome 94.0.4606.71 (Official Build) (64-bit)
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Linux Mint 20.2 (based on Ubuntu 20.04.2 LTS)

Reproducible demo

I cannot use https://new.docusaurus.io to create a reproducible demo, because the indentations are automatically converted to 2 spaces when I save.

Here is the repo I have set up to reproduce this bug: https://github.com/wpyoga/docusaurus-nested-indent-problem

[Josh-Cena]

The behavior is fully consistent with the CommonMark spec.

You should have tested on the MDX playground. At worst this is an MDX bug, not a Docusaurus one.

[wpyoga]

Ah, I see. That MDX playground gives this output:

[wpyoga]

There is a tutorial playground at commonmark: https://commonmark.org/help/tutorial/10-nestedLists.html

It gives this output:

And this is the generated HTML:

<h1>Hello, world!</h1>
<ul>
<li>
<p>list 1</p>
<ul>
<li>list 1-1</li>
</ul>
<p>paragraph with wrong indentation</p>
</li>
<li>
<p>list 2</p>
<ul>
<li>list 2-1</li>
</ul>
<p>paragraph with correct indentation</p>
</li>
<li>
<p>list 3</p>
<ul>
<li>list 3-1</li>
</ul>
<p>paragraph with correct indentation</p>
</li>
<li>
<p>list 4</p>
<p>paragraph with correct indentation</p>
</li>
</ul>

So, if I understand correctly: since the behaviour is not consistent with that of commonmark, this is then an MDX bug...?

[Josh-Cena]

Hah, could be related to #3018 then :D Actually, seems it's been fixed in the latest MDX version as well: https://mdxjs.com/playground/

So let's just hope that Docusaurus can upgrade its MDX version soon

[wpyoga]

You're right. On https://mdxjs.com/playground/, this is the output:

Sorry and thanks for the pointers. I'm not that well-versed and up-to-date on these issues :)

Shall we leave this issue open, or close it?

[Josh-Cena]

At least #5565 is closed in favor of #4029, but IDK

[lex111]

That's right, it's MDX v1 issue, and we can't fix it until to upgrade to MDX v2 which is currently not production-ready.

Closing in favor of #4029.