@mdxeditor/editor 3.52.5 → 3.53.1

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.
      */
@@ -1190,6 +1204,8 @@ export declare const editorWrapperElementRef$: NodeRef<default_2.RefObject<HTMLD
 
 /* Excluded from this release type: editorWrappers$ */
 
+/* Excluded from this release type: EMPTY_VALUE */
+
 export declare const EmptyTextNodeIndex: TextNodeIndex;
 
 /* Excluded from this release type: ExportLexicalTreeOptions */
@@ -2501,6 +2517,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 { EMPTY_VALUE, 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";
@@ -110,6 +110,7 @@ export {
   DialogButton,
   DiffSourceToggleWrapper,
   DirectiveNode,
+  EMPTY_VALUE,
   EmptyTextNodeIndex,
   FrontmatterNode,
   GenericDirectiveEditor,
@@ -305,6 +306,7 @@ export {
   muteChange$,
   nestedEditorChildren$,
   noop,
+  normalizeCodeBlockLanguages,
   onBlur$,
   onClickLinkCallback$,
   onReadOnlyClickLinkCallback$,

package/dist/plugins/codemirror/CodeMirrorEditor.js

@@ -10,11 +10,10 @@ import { indentWithTab } from "@codemirror/commands";
 import { basicLight } from "cm6-theme-basic-light";
 import { basicSetup } from "codemirror";
 import { $setSelection } from "lexical";
-import { codeMirrorExtensions$, codeMirrorAutoLoadLanguageSupport$, codeBlockLanguages$ } from "./index.js";
+import { codeMirrorExtensions$, codeMirrorAutoLoadLanguageSupport$, codeBlockLanguages$, EMPTY_VALUE } from "./index.js";
 import { useCodeMirrorRef } from "../sandpack/useCodeMirrorRef.js";
 import { Select } from "../toolbar/primitives/select.js";
 const COMMON_STATE_CONFIG_EXTENSIONS = [];
-const EMPTY_VALUE = "__EMPTY_VALUE__";
 const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
   const t = useTranslation();
   const { parentEditor, lexicalNode } = useCodeBlockEditorContext();
@@ -89,7 +88,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 +101,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,49 @@ 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"
-});
+const EMPTY_VALUE = "__EMPTY_VALUE__";
+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,33 +65,36 @@ 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 Object.hasOwn(normalized.keyMap, language ?? "") && !meta;
     },
     priority: 1,
     Editor: CodeMirrorEditor
   };
 }
 export {
+  EMPTY_VALUE,
   codeBlockLanguages$,
   codeMirrorAutoLoadLanguageSupport$,
   codeMirrorExtensions$,
   codeMirrorPlugin,
-  insertCodeMirror$
+  insertCodeMirror$,
+  normalizeCodeBlockLanguages
 };

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

@@ -2,10 +2,9 @@ import { useCellValues } from "@mdxeditor/gurx";
 import React__default from "react";
 import styles from "../../../styles/ui.module.css.js";
 import { $isCodeBlockNode } from "../../codeblock/CodeBlockNode.js";
-import { codeBlockLanguages$ } from "../../codemirror/index.js";
+import { codeBlockLanguages$, EMPTY_VALUE } from "../../codemirror/index.js";
 import { editorInFocus$, activeEditor$, useTranslation } from "../../core/index.js";
 import { Select } from "../primitives/select.js";
-const EMPTY_VALUE = "__EMPTY_VALUE__";
 const ChangeCodeMirrorLanguage = () => {
   const [editorInFocus, theEditor, codeBlockLanguages] = useCellValues(editorInFocus$, activeEditor$, codeBlockLanguages$);
   const codeBlockNode = $isCodeBlockNode(editorInFocus.rootNode) ? editorInFocus.rootNode : null;
@@ -13,7 +12,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 +33,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/dist/plugins/toolbar/primitives/select.js

@@ -38,7 +38,7 @@ const SelectContent = ({
       },
       position: "popper"
     },
-    /* @__PURE__ */ React__default.createElement(RadixSelect.Viewport, { "data-editor-dropdown": true }, children)
+    /* @__PURE__ */ React__default.createElement(RadixSelect.Viewport, { "data-editor-dropdown": true, style: { maxHeight: "var(--radix-select-content-available-height)" } }, children)
   ));
 };
 const SelectButtonTrigger = ({

package/package.json

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