[BUG] Numbered list with sub-list shows wrong numbers

[shaipetel]

If you want to ask for support or request features, sponsor the project and contact me over email.

• [x] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• [x] I have read the documentation and cannot find an answer.

Describe the bug If you have the following numbered list, with a sub list:

1. one
   1. sub 1
   2. sub 2
2. two
3. three

once you go to view source and back to rich text mode, or if you load the editor with this markdown as the current value - the numbered list after the sub list will be wrong, showing 3 instead of 2

Reproduction https://codesandbox.io/p/sandbox/mdx-editor-base-forked-vksdyj?file=%2Fsrc%2FApp.tsx

To Reproduce Steps to reproduce the behavior:

1. add the above markdown
2. switch to source and back to rich text
3. bullet 2 is now 3

Expected behavior After a sub-list, bullets should continue normal numbering

Screenshots On load, or after edit:

After switching to source and back:

Desktop (please complete the following information):

• OS: Windows
• Browser Edge

Additional context This happens every time after a nested sub list, the next number on the higher level will jump to the next.

[petyosi]

I can confirm that this is bug; the weird thing is that it works initially, as there is no difference in the HTML after the toggle. There's probably a CSS-only solution that puts content into the markers or uses before for that purpose.

[shaipetel]

Could you elaborate on the CSS only solution? I don't mind trying it.

[shaipetel]

I found the problem in the generated HTML. MDX produces this html:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li><!-- extra LI element, not needed -->
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

this is the correct html to nest list items:

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

MDX wrap the nested list inside a new LI element, instead of putting it inside the parent LI element

[natechenette]

Any update on this one?

[amymc]

I'm also facing this issue. Any workarounds?

[amymc]

I was able to target the marker in css and hide it

"& li:has(> ul)::marker": {
      color: "transparent",
 },