editor icon indicating copy to clipboard operation
editor copied to clipboard

[BUG] Fenced multiline code blocks inside lists are broken after switching to CodeMirror back and forth: {"type":"code","name":"N/A"}

Open makcyd opened this issue 9 months ago • 3 comments

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

Describe the bug

When using fenced code blocks with tripple backtick inside a list item, switching back and forth to CodeMirror breaks the structure, resulting in an error:

Parsing of the following markdown structure failed: {"type":"code","name":"N/A"}.
You can fix the errors in source mode and switch to rich text mode when you are ready.

It's not the same as https://github.com/mdx-editor/editor/issues/370, because code block language is set, but indentation and change of structure breaks it.

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://mdxeditor.dev/editor/demo

  2. Switch to CodeMirror

  3. Replace the code content with the following Markdown:

    * List item one
        ```tsx
        line one
        line two
        ```
    * List item two
    
  4. Switch to MDX - for now everything is looking good

  5. Switch back to CodeMirror - it will show something like:

     * List item one```tsx
     line one
     line two
     ```
     * List item two
    

    Note, the line break and indentation before the fenced code block start got removed

  6. Now add anything else, e.g. another list item:

    * List item one```tsx
    line one
    line two
    ```
    * List item two
    * List item three
    
  7. Switch back to MDX and see the error:

Parsing of the following markdown structure failed: {"type":"code","name":"N/A"}.
You can fix the errors in source mode and switch to rich text mode when you are ready.

As a result, if you try to edit a markdown document like installation instructions with a step-by-step instructions (lists) with fenced code blocks inside those lists, you'd have to manually add the linebreak before the fence ``` and indent the line for each such code block after each edit, which is quite tiresome.

Expected behavior

  1. line break and indentation before the fenced block is not removed when switching back-and-forth to CodeMirror
  2. code blocks are not broken

Screenshots

Short video (0:20) with the reproducer:

https://www.youtube.com/watch?v=6PESBeDQC9c

makcyd avatar May 21 '24 07:05 makcyd