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.
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.