mdx-editor / mdx-editor/editor
[BUG]
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 307
- Avg merge
- 14h 22m
- Merged PRs (30d)
- 5
Description
Title: codeBlockLanguages type is too restrictive, causing parsing errors for empty code blocks
Describe the bug
The TypeScript type definition for codeBlockLanguages in codeMirrorPlugin is overly restrictive. It only allows specific keys (js, ts, tsx, jsx, css) while at runtime MDXEditor supports arbitrary language names, including the empty string ('') for code blocks without a language.
When a code block with no language is used and the empty string key is missing, parsing fails with:
Parsing of the following markdown structure failed: {"type":"code","name":"N/A"}
Reproduction
codeMirrorPlugin({
codeBlockLanguages: {
js: 'JavaScript',
ts: 'TypeScript',
tsx: 'TypeScript (TSX)',
jsx: 'JavaScript (React)',
css: 'CSS',
},
});
Steps to reproduce the behavior:
Then add a markdown code block without a language:
``` print("Hello world") ```
To Reproduce
1.Start MDXEditor with the configuration above.
2.Paste or create a code block without specifying a language.
3.Toggle to Rich Text mode or render the markdown.
4.Observe the parsing error.
Expected behavior
Empty code blocks (no language) should parse successfully.
TypeScript type definition should allow arbitrary language names, including '' for unspecified languages.
Screenshots
Error message in editor:
Parsing of the following markdown structure failed: {"type":"code","name":"N/A"}
OS: Windows 11
Browser: Chrome 120
Additional context / Solution
Current type definition:
export declare const codeBlockLanguages$: NodeRef<{
js: string;
ts: string;
tsx: string;
jsx: string;
css: string;
}>;
Problem: This type does not allow '' (empty string) for code blocks without a language.
Solution: Change the type to allow arbitrary keys:
export declare const codeBlockLanguages$: NodeRef<Record<string, string>>;
Then include '' in the language map:
codeMirrorPlugin({
codeBlockLanguages: {
'': 'Unspecified',
text: 'Text',
js: 'JavaScript',
ts: 'TypeScript',
tsx: 'TypeScript (TSX)',
json: 'JSON',
css: 'CSS',
python: 'Python',
kotlin: 'Kotlin',
},
});
This fixes the parsing error for empty code blocks and makes the type flexible for any language.
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 at the codeMirrorPlugin entry point and the codeBlockLanguages$ type declaration shown in the issue. Reproduce the problem with a code block that has no language, then verify that arbitrary language keys, including an empty string, are accepted and the block parses without the reported error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100