@mdxeditor/editor 3.54.0 → 3.55.0

package/dist/index.d.ts

@@ -1353,6 +1353,18 @@ export declare interface GenericJsxEditorProps extends JsxEditorProps {
     PropertyEditor?: PropertyEditorType;
 }
 
+/**
+ * Resolves the current language to the select value and items used by CodeMirror language pickers.
+ * Unknown languages are added as a temporary item so the picker remains in sync with the code block value.
+ */
+export declare function getCodeBlockLanguageSelectData(normalized: NormalizedCodeBlockLanguages, language: string): {
+    value: string;
+    items: {
+        value: string;
+        label: string;
+    }[];
+};
+
 /**
  * Gets the selected node from the Lexical editor.
  * @group Utils

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 { EMPTY_VALUE, codeBlockLanguages$, codeMirrorAutoLoadLanguageSupport$, codeMirrorExtensions$, codeMirrorPlugin, insertCodeMirror$, normalizeCodeBlockLanguages } from "./plugins/codemirror/index.js";
+import { EMPTY_VALUE, codeBlockLanguages$, codeMirrorAutoLoadLanguageSupport$, codeMirrorExtensions$, codeMirrorPlugin, getCodeBlockLanguageSelectData, 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";
@@ -248,6 +248,7 @@ export {
   fromWithinEditorRead,
   frontmatterDialogOpen$,
   frontmatterPlugin,
+  getCodeBlockLanguageSelectData,
   getSelectedNode,
   getSelectionAsMarkdown,
   getSelectionRectangle,

package/dist/plugins/codeblock/MdastCodeVisitor.js

@@ -11,8 +11,8 @@ const MdastCodeVisitor = {
     actions.addAndStepInto(
       $createCodeBlockNode({
         code: mdastNode.value,
-        language: mdastNode.lang,
-        meta: mdastNode.meta
+        language: mdastNode.lang ?? "",
+        meta: mdastNode.meta ?? ""
       })
     );
   }

package/dist/plugins/codemirror/CodeMirrorEditor.js

@@ -10,7 +10,7 @@ import { indentWithTab } from "@codemirror/commands";
 import { basicLight } from "cm6-theme-basic-light";
 import { basicSetup } from "codemirror";
 import { $setSelection } from "lexical";
-import { codeMirrorExtensions$, codeMirrorAutoLoadLanguageSupport$, codeBlockLanguages$, EMPTY_VALUE } from "./index.js";
+import { codeMirrorExtensions$, codeMirrorAutoLoadLanguageSupport$, codeBlockLanguages$, getCodeBlockLanguageSelectData, EMPTY_VALUE } from "./index.js";
 import { useCodeMirrorRef } from "../sandpack/useCodeMirrorRef.js";
 import { Select } from "../toolbar/primitives/select.js";
 const COMMON_STATE_CONFIG_EXTENSIONS = [];
@@ -28,6 +28,10 @@ const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
   const { setCode } = useCodeBlockEditorContext();
   const editorViewRef = React__default.useRef(null);
   const elRef = React__default.useRef(null);
+  const { value: selectValue, items: selectItems } = React__default.useMemo(
+    () => getCodeBlockLanguageSelectData(codeBlockLanguages, language),
+    [codeBlockLanguages, language]
+  );
   const setCodeRef = React__default.useRef(setCode);
   setCodeRef.current = setCode;
   codeMirrorRef.current = {
@@ -94,7 +98,7 @@ const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
     Select,
     {
       disabled: readOnly,
-      value: codeBlockLanguages.keyMap[language] ?? language,
+      value: selectValue,
       onChange: (language2) => {
         parentEditor.update(() => {
           lexicalNode.setLanguage(language2 === EMPTY_VALUE ? "" : language2);
@@ -107,7 +111,7 @@ const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
       },
       triggerTitle: t("codeBlock.selectLanguage", "Select code block language"),
       placeholder: t("codeBlock.inlineLanguage", "Language"),
-      items: codeBlockLanguages.items
+      items: selectItems
     }
   ), /* @__PURE__ */ React__default.createElement(
     "button",

package/dist/plugins/codemirror/index.js

@@ -10,9 +10,10 @@ function normalizeCodeBlockLanguages(input) {
   const supportMap = {};
   if (Array.isArray(input)) {
     for (const lang of input) {
-      const canonical = ((_a = lang.alias) == null ? void 0 : _a[0]) ?? lang.name.toLowerCase();
+      const rawCanonical = ((_a = lang.alias) == null ? void 0 : _a[0]) ?? lang.name.toLowerCase();
+      const canonical = rawCanonical || EMPTY_VALUE;
       items.push({ value: canonical, label: lang.name });
-      keyMap[canonical] = canonical;
+      keyMap[rawCanonical] = canonical;
       if (lang.alias) {
         for (const alias of lang.alias) {
           keyMap[alias] = canonical;
@@ -40,6 +41,16 @@ function normalizeCodeBlockLanguages(input) {
   }
   return { items, keyMap, supportMap };
 }
+function getCodeBlockLanguageSelectData(normalized, language) {
+  const value = normalized.keyMap[language] ?? language;
+  if (!value || normalized.items.some((item) => item.value === value)) {
+    return { value, items: normalized.items };
+  }
+  return {
+    value,
+    items: [...normalized.items, { value, label: language }]
+  };
+}
 const codeBlockLanguages$ = Cell(
   normalizeCodeBlockLanguages({
     js: "JavaScript",
@@ -79,15 +90,15 @@ const codeMirrorPlugin = realmPlugin({
     r.pubIn({
       [codeBlockLanguages$]: normalized,
       [codeMirrorExtensions$]: (params == null ? void 0 : params.codeMirrorExtensions) ?? [],
-      [appendCodeBlockEditorDescriptor$]: buildCodeBlockDescriptor(normalized),
+      [appendCodeBlockEditorDescriptor$]: buildCodeBlockDescriptor(),
       [codeMirrorAutoLoadLanguageSupport$]: (params == null ? void 0 : params.autoLoadLanguageSupport) ?? true
     });
   }
 });
-function buildCodeBlockDescriptor(normalized) {
+function buildCodeBlockDescriptor(_normalized) {
   return {
-    match(language, meta) {
-      return Object.hasOwn(normalized.keyMap, language ?? "") && !meta;
+    match(_language, meta) {
+      return !meta;
     },
     priority: 1,
     Editor: CodeMirrorEditor
@@ -99,6 +110,7 @@ export {
   codeMirrorAutoLoadLanguageSupport$,
   codeMirrorExtensions$,
   codeMirrorPlugin,
+  getCodeBlockLanguageSelectData,
   insertCodeMirror$,
   normalizeCodeBlockLanguages
 };

package/dist/plugins/core/MdastHTMLNode.js

@@ -1,6 +1,6 @@
 const MDX_NODE_TYPES = ["mdxJsxTextElement", "mdxJsxFlowElement"];
 function isMdastHTMLNode(node) {
-  return MDX_NODE_TYPES.includes(node.type) && htmlTags.includes(node.name.toLowerCase());
+  return MDX_NODE_TYPES.includes(node.type) && htmlTags.includes(node.name);
 }
 const htmlTags = [
   "a",

package/dist/plugins/jsx/LexicalJsxVisitor.js

@@ -1,13 +1,13 @@
 import { $isLexicalJsxNode } from "./LexicalJsxNode.js";
 import { isMdastJsxNode } from "./index.js";
-import { htmlTags } from "../core/MdastHTMLNode.js";
+import { isHtmlTagName } from "./jsxTagName.js";
 const LexicalJsxVisitor = {
   testLexicalNode: $isLexicalJsxNode,
   visitLexicalNode({ actions, mdastParent, lexicalNode }) {
     function traverseNestedJsxNodes(node) {
       if ("children" in node && node.children instanceof Array) {
         node.children.forEach((child) => {
-          if (isMdastJsxNode(child) && !htmlTags.includes(child.name.toLowerCase())) {
+          if (isMdastJsxNode(child) && !isHtmlTagName(child.name)) {
             actions.registerReferredComponent(child.name);
           }
           traverseNestedJsxNodes(child);

package/dist/plugins/jsx/jsxTagName.js

@@ -0,0 +1,7 @@
+import { htmlTags } from "../core/MdastHTMLNode.js";
+function isHtmlTagName(name) {
+  return htmlTags.includes(name);
+}
+export {
+  isHtmlTagName
+};

package/dist/plugins/table/TableEditor.js

@@ -187,7 +187,7 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
         );
       }), readOnly || rowIndex === 0 && /* @__PURE__ */ React__default.createElement("th", { rowSpan: lexicalTable.getRowCount(), "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement("button", { type: "button", className: styles.addColumnButton, onClick: addColumnToRight }, iconComponentFor("add_column"))));
     })),
-    readOnly || /* @__PURE__ */ React__default.createElement("tfoot", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", null), /* @__PURE__ */ React__default.createElement("th", { colSpan: lexicalTable.getColCount() }, /* @__PURE__ */ React__default.createElement("button", { type: "button", className: styles.addRowButton, onClick: addRowToBottom }, iconComponentFor("add_row"))), /* @__PURE__ */ React__default.createElement("th", null)))
+    readOnly || /* @__PURE__ */ React__default.createElement("tfoot", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", null), /* @__PURE__ */ React__default.createElement("th", { colSpan: lexicalTable.getColCount(), "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement("button", { type: "button", className: styles.addRowButton, onClick: addRowToBottom }, iconComponentFor("add_row"))), /* @__PURE__ */ React__default.createElement("th", null)))
   );
 };
 const Cell = ({ align, ...props }) => {

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

@@ -2,7 +2,7 @@ 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$, EMPTY_VALUE } from "../../codemirror/index.js";
+import { codeBlockLanguages$, getCodeBlockLanguageSelectData, EMPTY_VALUE } from "../../codemirror/index.js";
 import { editorInFocus$, activeEditor$, useTranslation } from "../../core/index.js";
 import { Select } from "../primitives/select.js";
 const ChangeCodeMirrorLanguage = () => {
@@ -13,14 +13,11 @@ const ChangeCodeMirrorLanguage = () => {
     return null;
   }
   const rawLanguage = codeBlockNode.getLanguage();
-  let currentLanguage = codeBlockLanguages.keyMap[rawLanguage] ?? rawLanguage;
-  if (currentLanguage === "") {
-    currentLanguage = EMPTY_VALUE;
-  }
+  const { value: currentLanguage, items } = getCodeBlockLanguageSelectData(codeBlockLanguages, rawLanguage);
   return /* @__PURE__ */ React__default.createElement("div", { className: styles.selectWithLabel }, /* @__PURE__ */ React__default.createElement("label", null, t("codeBlock.language", "Code block language")), /* @__PURE__ */ React__default.createElement(
     Select,
     {
-      value: currentLanguage,
+      value: currentLanguage || EMPTY_VALUE,
       onChange: (language) => {
         theEditor == null ? void 0 : theEditor.update(() => {
           codeBlockNode.setLanguage(language === EMPTY_VALUE ? "" : language);
@@ -33,7 +30,7 @@ const ChangeCodeMirrorLanguage = () => {
       },
       triggerTitle: t("codeBlock.selectLanguage", "Select code block language"),
       placeholder: t("codeBlock.language", "Code block language"),
-      items: codeBlockLanguages.items
+      items
     }
   ));
 };

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

@@ -12,6 +12,7 @@ const InsertImage = React__default.forwardRef((_, forwardedRef) => {
   return /* @__PURE__ */ React__default.createElement(
     RadixToolbar.Button,
     {
+      "aria-label": t("toolbar.image", "Insert image"),
       className: styles.toolbarButton,
       ref: forwardedRef,
       disabled: readOnly,

package/dist/plugins/toolbar/primitives/DialogButton.js

@@ -3,7 +3,7 @@ import * as RadixToolbar from "@radix-ui/react-toolbar";
 import React__default from "react";
 import classNames from "classnames";
 import { useCombobox } from "downshift";
-import { editorRootElementRef$, readOnly$, iconComponentFor$ } from "../../core/index.js";
+import { editorRootElementRef$, readOnly$, iconComponentFor$, useTranslation } from "../../core/index.js";
 import styles from "../../../styles/ui.module.css.js";
 import { TooltipWrap } from "./TooltipWrap.js";
 import { useCellValues, useCellValue } from "@mdxeditor/gurx";
@@ -18,7 +18,7 @@ const DialogButton = React__default.forwardRef(({ autocompleteSuggestions = [],
     },
     [onSubmit]
   );
-  return /* @__PURE__ */ React__default.createElement(Dialog.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(Dialog.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { className: styles.toolbarButton, ref: forwardedRef, disabled: readOnly }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: tooltipTitle }, buttonContent))), /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.dialogContent }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(Dialog.Root, { open, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(Dialog.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { "aria-label": tooltipTitle, className: styles.toolbarButton, ref: forwardedRef, disabled: readOnly }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title: tooltipTitle }, buttonContent))), /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(Dialog.Content, { className: styles.dialogContent }, /* @__PURE__ */ React__default.createElement(
     DialogForm,
     {
       submitButtonTitle,
@@ -31,6 +31,7 @@ const DialogButton = React__default.forwardRef(({ autocompleteSuggestions = [],
 const DialogForm = ({ autocompleteSuggestions, onSubmitCallback, dialogInputPlaceholder, submitButtonTitle }) => {
   const [items, setItems] = React__default.useState(autocompleteSuggestions.slice(0, MAX_SUGGESTIONS));
   const iconComponentFor = useCellValue(iconComponentFor$);
+  const t = useTranslation();
   const enableAutoComplete = autocompleteSuggestions.length > 0;
   const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, selectedItem } = useCombobox({
     initialInputValue: "",
@@ -106,7 +107,7 @@ const DialogForm = ({ autocompleteSuggestions, onSubmitCallback, dialogInputPlac
       className: classNames(styles.actionButton, styles.primaryActionButton)
     },
     iconComponentFor("check")
-  ), /* @__PURE__ */ React__default.createElement(Dialog.Close, { className: styles.actionButton }, iconComponentFor("close")));
+  ), /* @__PURE__ */ React__default.createElement(Dialog.Close, { "aria-label": t("dialog.close", "Close dialog"), className: styles.actionButton }, iconComponentFor("close")));
 };
 export {
   DialogButton

package/dist/plugins/toolbar/primitives/select.js

@@ -47,7 +47,7 @@ const SelectButtonTrigger = ({
   className
 }) => {
   const [readOnly, iconComponentFor] = useCellValues(readOnly$, iconComponentFor$);
-  return /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, /* @__PURE__ */ React__default.createElement(RadixSelect.Trigger, { className: classNames(styles.toolbarButtonSelectTrigger, className), disabled: readOnly }, children, /* @__PURE__ */ React__default.createElement(RadixSelect.Icon, { className: styles.selectDropdownArrow }, iconComponentFor("arrow_drop_down"))));
+  return /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, /* @__PURE__ */ React__default.createElement(RadixSelect.Trigger, { "aria-label": title, className: classNames(styles.toolbarButtonSelectTrigger, className), disabled: readOnly }, children, /* @__PURE__ */ React__default.createElement(RadixSelect.Icon, { className: styles.selectDropdownArrow }, iconComponentFor("arrow_drop_down"))));
 };
 const Select = (props) => {
   return /* @__PURE__ */ React__default.createElement(RadixSelect.Root, { value: props.value || "", onValueChange: props.onChange, disabled: props.disabled }, /* @__PURE__ */ React__default.createElement(SelectTrigger, { title: props.triggerTitle, placeholder: props.placeholder }), /* @__PURE__ */ React__default.createElement(SelectContent, null, props.items.map((item, index) => {

package/dist/plugins/toolbar/primitives/toolbar.js

@@ -15,7 +15,7 @@ function decorateWithRef(Component, decoratedProps) {
 }
 function addTooltipToChildren(Component) {
   return ({ title, children, ...props }) => {
-    return /* @__PURE__ */ React__default.createElement(Component, { ...props }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, children));
+    return /* @__PURE__ */ React__default.createElement(Component, { "aria-label": title, ...props }, /* @__PURE__ */ React__default.createElement(TooltipWrap, { title }, children));
   };
 }
 const Root = ({ readOnly, children, className }) => {

package/package.json

@@ -11,17 +11,17 @@
     "*.css"
   ],
   "type": "module",
-  "version": "3.54.0",
+  "version": "3.55.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",
     "build:docs:api": "typedoc",
-    "start": "LADLE=true ladle dev",
-    "dev": "LADLE=true ladle dev",
+    "start": "ladle dev",
+    "dev": "ladle dev",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src --ext .ts,.tsx",
-    "test": "NODE_ENV=development vitest",
-    "test:once": "NODE_ENV=development vitest --run",
+    "test": "vitest",
+    "test:once": "vitest --run",
     "semantic-release": "semantic-release",
     "image-upload-backend": "node ./src/examples/file-backend.js",
     "export-icons": "node ./scripts/export-figma-icons.mjs"
@@ -105,7 +105,7 @@
     "@babel/plugin-transform-typescript": "^7.23.6",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@ladle/react": "^5.0.2",
+    "@ladle/react": "^5.1.1",
     "@ngneat/falso": "^6.4.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.1.6",