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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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