Skip to content

[BUG] #901

Description

@meysamzi

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions