mdx-editor / mdx-editor/editor

[BUG] Markdown property set to a string that includes a codeblock breaks functionality

Open
#787 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
3.7k
Forks
307
Avg merge
14h 22m
Merged PRs (30d)
5

Description

  • 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
Setting content to be a markdown string that includes a codeblock will break the functionality of the MDXEditor by not formatting any of the content and preventing the onChange function from being called,

To Reproduce
Steps to reproduce the behavior:

  1. Import the following plugins and them as props
  codeBlockPlugin,
  markdownShortcutPlugin,
  codeMirrorPlugin,

...

          codeBlockPlugin({ defaultCodeBlockLanguage: "markdown" }),
          codeMirrorPlugin({
            codeBlockLanguages: {
              markdown: "Markdown",
              txt: "Plain Text",
            },
          }),
          markdownShortcutPlugin(),
  1. Disable read-only mode
  2. Set the markdown to be the following line
        markdown={"```\nHello\n```\n\nHello"}

Expected behavior
The content editor should display a code block that has Hello inside and there should be a Hello outside of the codeblock underneath as well.

The onChange function is also no longer called when this is set.

Desktop (please complete the following information):

  • OS: Windows
  • Browser: FireFox and Electron

Screenshots

Image

Additional context
Attempting to set the markdown value to be as follows

        markdown="```\nHello\n```\n\nHello"

without the braces will not break the functionality of onChange however, the styling of the codeblock is incorrect and will show as inline codeblocks

Image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with codeBlockPlugin, codeMirrorPlugin, markdownShortcutPlugin, and the supplied markdown value in the MDXEditor. Trace the markdown parsing and editor initialization path, then verify that the code block and following paragraph render correctly and that onChange is called.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.