mdx-editor / mdx-editor/editor

[BUG]

Open
#901 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.