mdx-editor / mdx-editor/editor
[BUG] Markdown property set to a string that includes a codeblock breaks functionality
Nobody has claimed this yet.
- 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:
- Import the following plugins and them as props
codeBlockPlugin,
markdownShortcutPlugin,
codeMirrorPlugin,
...
codeBlockPlugin({ defaultCodeBlockLanguage: "markdown" }),
codeMirrorPlugin({
codeBlockLanguages: {
markdown: "Markdown",
txt: "Plain Text",
},
}),
markdownShortcutPlugin(),
- Disable read-only mode
- 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
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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