@mdxeditor/editor 3.52.5 → 3.53.0

package/dist/index.d.ts

@@ -529,16 +529,24 @@ export declare interface CodeBlockEditorProps {
 }
 
 /**
- * The codemirror code block languages.
+ * A code block language entry with a name and optional aliases/extensions.
+ * Compatible with CodeMirror's `LanguageDescription` from `@codemirror/language-data`.
  * @group CodeMirror
  */
-export declare const codeBlockLanguages$: NodeRef<{
-    js: string;
-    ts: string;
-    tsx: string;
-    jsx: string;
-    css: string;
-}>;
+export declare interface CodeBlockLanguage {
+    /** Display name shown in the language select dropdown. */
+    name: string;
+    /** Alternative identifiers for this language (e.g. `["js"]` for JavaScript). */
+    alias?: readonly string[];
+    /** File extensions associated with this language (e.g. `["js", "mjs"]`). */
+    extensions?: readonly string[];
+}
+
+/**
+ * The normalized code block languages used by the CodeMirror editor.
+ * @group CodeMirror
+ */
+export declare const codeBlockLanguages$: NodeRef<NormalizedCodeBlockLanguages>;
 
 /**
  * A lexical node that represents a fenced code block. Use {@link "$createCodeBlockNode"} to construct one.
@@ -607,7 +615,13 @@ export declare const codeMirrorExtensions$: NodeRef<Extension_2[]>;
  * @group CodeMirror
  */
 export declare const codeMirrorPlugin: (params?: {
-    codeBlockLanguages: Record<string, string>;
+    /**
+     * The code block languages to display in the language select dropdown.
+     * Accepts either a `Record<string, string>` (key → label) for backwards compatibility,
+     * or an array of {@link CodeBlockLanguage} objects (compatible with CodeMirror's `LanguageDescription`
+     * from `@codemirror/language-data`), which supports aliases and file extensions.
+     */
+    codeBlockLanguages: Record<string, string> | CodeBlockLanguage[];
     /**
      * Optional, additional CodeMirror extensions to load in the diff/source mode.
      */
@@ -2501,6 +2515,26 @@ export declare interface NewImageDialogState {
  */
 export declare function noop(): void;
 
+/**
+ * Normalizes the `codeBlockLanguages` parameter into a canonical form.
+ * Accepts either a `Record<string, string>` (legacy) or a `CodeBlockLanguage[]` array.
+ */
+export declare function normalizeCodeBlockLanguages(input: Record<string, string> | CodeBlockLanguage[]): NormalizedCodeBlockLanguages;
+
+/**
+ * Internal normalized representation of code block languages.
+ * @group CodeMirror
+ */
+export declare interface NormalizedCodeBlockLanguages {
+    /** Items for the language select dropdown. */
+    items: {
+        value: string;
+        label: string;
+    }[];
+    /** Maps any known key (canonical, alias, extension) to the canonical key. */
+    keyMap: Record<string, string>;
+}
+
 /**
  * Emits when the editor loses focus
  * @group Core

package/dist/index.js

@@ -18,7 +18,7 @@ import { insertJsx$, isMdastJsxNode, jsxPlugin } from "./plugins/jsx/index.js";
 import { GenericJsxEditor } from "./jsx-editors/GenericJsxEditor.js";
 import { insertSandpack$, sandpackConfig$, sandpackPlugin } from "./plugins/sandpack/index.js";
 import { SandpackEditor } from "./plugins/sandpack/SandpackEditor.js";
-import { codeBlockLanguages$, codeMirrorAutoLoadLanguageSupport$, codeMirrorExtensions$, codeMirrorPlugin, insertCodeMirror$ } from "./plugins/codemirror/index.js";
+import { codeBlockLanguages$, codeMirrorAutoLoadLanguageSupport$, codeMirrorExtensions$, codeMirrorPlugin, insertCodeMirror$, normalizeCodeBlockLanguages } from "./plugins/codemirror/index.js";
 import { COMMON_STATE_CONFIG_EXTENSIONS, CodeMirrorEditor } from "./plugins/codemirror/CodeMirrorEditor.js";
 import { appendCodeBlockEditorDescriptor$, codeBlockPlugin, defaultCodeBlockLanguage$, insertCodeBlock$ } from "./plugins/codeblock/index.js";
 import { directivesPlugin, insertDirective$ } from "./plugins/directives/index.js";
@@ -305,6 +305,7 @@ export {
   muteChange$,
   nestedEditorChildren$,
   noop,
+  normalizeCodeBlockLanguages,
   onBlur$,
   onClickLinkCallback$,
   onReadOnlyClickLinkCallback$,

package/dist/plugins/codemirror/CodeMirrorEditor.js

@@ -89,7 +89,7 @@ const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
     Select,
     {
       disabled: readOnly,
-      value: language,
+      value: codeBlockLanguages.keyMap[language] ?? language,
       onChange: (language2) => {
         parentEditor.update(() => {
           lexicalNode.setLanguage(language2 === EMPTY_VALUE ? "" : language2);
@@ -102,7 +102,7 @@ const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
       },
       triggerTitle: t("codeBlock.selectLanguage", "Select code block language"),
       placeholder: t("codeBlock.inlineLanguage", "Language"),
-      items: Object.entries(codeBlockLanguages).map(([value, label]) => ({ value: value ? value : EMPTY_VALUE, label }))
+      items: codeBlockLanguages.items
     }
   ), /* @__PURE__ */ React__default.createElement(
     "button",

package/dist/plugins/codemirror/index.js

@@ -2,13 +2,48 @@ import { realmPlugin } from "../../RealmWithPlugins.js";
 import { Cell, Signal, map } from "@mdxeditor/gurx";
 import { insertCodeBlock$, appendCodeBlockEditorDescriptor$ } from "../codeblock/index.js";
 import { CodeMirrorEditor } from "./CodeMirrorEditor.js";
-const codeBlockLanguages$ = Cell({
-  js: "JavaScript",
-  ts: "TypeScript",
-  tsx: "TypeScript (React)",
-  jsx: "JavaScript (React)",
-  css: "CSS"
-});
+function normalizeCodeBlockLanguages(input) {
+  var _a;
+  const items = [];
+  const keyMap = {};
+  if (Array.isArray(input)) {
+    for (const lang of input) {
+      const canonical = ((_a = lang.alias) == null ? void 0 : _a[0]) ?? lang.name.toLowerCase();
+      items.push({ value: canonical, label: lang.name });
+      keyMap[canonical] = canonical;
+      if (lang.alias) {
+        for (const alias of lang.alias) {
+          keyMap[alias] = canonical;
+        }
+      }
+      if (lang.extensions) {
+        for (const ext of lang.extensions) {
+          keyMap[ext] = canonical;
+        }
+      }
+      keyMap[lang.name.toLowerCase()] = canonical;
+    }
+  } else {
+    const firstKeyByLabel = {};
+    for (const [key, label] of Object.entries(input)) {
+      if (!(label in firstKeyByLabel)) {
+        firstKeyByLabel[label] = key;
+        items.push({ value: key || "__EMPTY_VALUE__", label });
+      }
+      keyMap[key] = firstKeyByLabel[label] || "__EMPTY_VALUE__";
+    }
+  }
+  return { items, keyMap };
+}
+const codeBlockLanguages$ = Cell(
+  normalizeCodeBlockLanguages({
+    js: "JavaScript",
+    ts: "TypeScript",
+    tsx: "TypeScript (React)",
+    jsx: "JavaScript (React)",
+    css: "CSS"
+  })
+);
 const insertCodeMirror$ = Signal((r) => {
   r.link(
     r.pipe(
@@ -29,24 +64,25 @@ const codeMirrorAutoLoadLanguageSupport$ = Cell(true);
 const codeMirrorPlugin = realmPlugin({
   update(r, params) {
     r.pubIn({
-      [codeBlockLanguages$]: params == null ? void 0 : params.codeBlockLanguages,
+      [codeBlockLanguages$]: normalizeCodeBlockLanguages((params == null ? void 0 : params.codeBlockLanguages) ?? {}),
       [codeMirrorExtensions$]: (params == null ? void 0 : params.codeMirrorExtensions) ?? [],
       [codeMirrorAutoLoadLanguageSupport$]: (params == null ? void 0 : params.autoLoadLanguageSupport) ?? true
     });
   },
   init(r, params) {
+    const normalized = normalizeCodeBlockLanguages((params == null ? void 0 : params.codeBlockLanguages) ?? {});
     r.pubIn({
-      [codeBlockLanguages$]: params == null ? void 0 : params.codeBlockLanguages,
+      [codeBlockLanguages$]: normalized,
       [codeMirrorExtensions$]: (params == null ? void 0 : params.codeMirrorExtensions) ?? [],
-      [appendCodeBlockEditorDescriptor$]: buildCodeBlockDescriptor((params == null ? void 0 : params.codeBlockLanguages) ?? {}),
+      [appendCodeBlockEditorDescriptor$]: buildCodeBlockDescriptor(normalized),
       [codeMirrorAutoLoadLanguageSupport$]: (params == null ? void 0 : params.autoLoadLanguageSupport) ?? true
     });
   }
 });
-function buildCodeBlockDescriptor(codeBlockLanguages) {
+function buildCodeBlockDescriptor(normalized) {
   return {
     match(language, meta) {
-      return Object.hasOwn(codeBlockLanguages, language ?? "") && !meta;
+      return (language ?? "") in normalized.keyMap && !meta;
     },
     priority: 1,
     Editor: CodeMirrorEditor
@@ -57,5 +93,6 @@ export {
   codeMirrorAutoLoadLanguageSupport$,
   codeMirrorExtensions$,
   codeMirrorPlugin,
-  insertCodeMirror$
+  insertCodeMirror$,
+  normalizeCodeBlockLanguages
 };

package/dist/plugins/toolbar/components/ChangeCodeMirrorLanguage.js

@@ -13,7 +13,8 @@ const ChangeCodeMirrorLanguage = () => {
   if (!codeBlockNode) {
     return null;
   }
-  let currentLanguage = codeBlockNode.getLanguage();
+  const rawLanguage = codeBlockNode.getLanguage();
+  let currentLanguage = codeBlockLanguages.keyMap[rawLanguage] ?? rawLanguage;
   if (currentLanguage === "") {
     currentLanguage = EMPTY_VALUE;
   }
@@ -33,7 +34,7 @@ const ChangeCodeMirrorLanguage = () => {
       },
       triggerTitle: t("codeBlock.selectLanguage", "Select code block language"),
       placeholder: t("codeBlock.language", "Code block language"),
-      items: Object.entries(codeBlockLanguages).map(([value, label]) => ({ value: value ? value : EMPTY_VALUE, label }))
+      items: codeBlockLanguages.items
     }
   ));
 };

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "3.52.5",
+  "version": "3.53.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",