@mdxeditor/editor 3.52.3 → 3.52.5

package/dist/index.d.ts

@@ -229,6 +229,12 @@ export declare const addNestedEditorChild$: NodeRef<default_2.ComponentType<{}>
  */
 export declare const addSyntaxExtension$: NodeRef< Extension | Extension[]>;
 
+/**
+ * Lets you add React components as children of table cell editors.
+ * @group Core
+ */
+export declare const addTableCellEditorChild$: NodeRef<default_2.ComponentType<{}> | default_2.ComponentType<{}>[]>;
+
 /**
  * Adds a markdown to string extension to be used when exporting markdown from the Lexical tree.
  * @group Markdown Processing
@@ -1147,6 +1153,12 @@ export declare interface EditorInFocus {
     editorRef: unknown;
 }
 
+/**
+ * Whether the currently active editor is inside a table cell.
+ * @group Core
+ */
+export declare const editorInTable$: NodeRef<boolean>;
+
 /**
  * A reference to a DOM element. used for the various popups, dialogs, and tooltips
  * @group Core
@@ -2883,7 +2895,7 @@ export declare const ShowSandpackInfo: () => JSX_2.Element | null;
  * A toolbar primitive that allows you to build an UI with multiple exclusive toggle groups, like the list type toggle.
  * @group Toolbar Primitives
  */
-export declare const SingleChoiceToggleGroup: <T extends string>({ value, onChange, className, ggClassName, items }: {
+export declare const SingleChoiceToggleGroup: <T extends string>({ value, onChange, className, ggClassName, items, disabled }: {
     items: {
         title: string;
         value: T;
@@ -2893,6 +2905,7 @@ export declare const SingleChoiceToggleGroup: <T extends string>({ value, onChan
     value: T | "";
     ggClassName?: string;
     className?: string;
+    disabled?: boolean;
 }) => JSX_2.Element;
 
 /* Excluded from this release type: SingleToggleGroup */
@@ -2930,6 +2943,13 @@ export declare const switchFromPreviewToLinkEdit$: NodeRef<void>;
 
 export declare const syntaxExtensions$: NodeRef< Extension[]>;
 
+/**
+ * React Components registered to be rendered inside table cell editors. Use this instead of {@link addNestedEditorChild$} for components that should only appear in table cells.
+ * Plugins that should not be active in table cells (e.g. lists) should not register here.
+ * @group Core
+ */
+export declare const tableCellEditorChildren$: NodeRef<default_2.ComponentType<{}>[]>;
+
 /**
  * A Lexical node that represents a markdown table.
  * Use {@link "$createTableNode"} to construct one.

package/dist/index.js

@@ -4,7 +4,7 @@ import { MDXEditor } from "./MDXEditor.js";
 import { defaultSvgIcons } from "./defaultSvgIcons.js";
 import { MarkdownParseError, UnrecognizedMarkdownConstructError, importMarkdownToLexical, importMdastTreeToLexical } from "./importMarkdownToLexical.js";
 import { exportLexicalTreeToMdast, exportMarkdownFromLexical } from "./exportMarkdownFromLexical.js";
-import { Appender, NESTED_EDITOR_UPDATED_COMMAND, activeEditor$, activeEditorSubscriptions$, activePlugins$, addActivePlugin$, addBottomAreaChild$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, bottomAreaChildren$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, contentEditableRef$, contentEditableWrapperElement$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, directiveDescriptors$, editorInFocus$, editorRootElementRef$, editorWrapperElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, initialMarkdownNormalize$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, lexicalTheme$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, muteChange$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, spellCheck$, syntaxExtensions$, toMarkdownExtensions$, toMarkdownOptions$, topAreaChildren$, translation$, useTranslation, usedLexicalNodes$, viewMode$ } from "./plugins/core/index.js";
+import { Appender, NESTED_EDITOR_UPDATED_COMMAND, activeEditor$, activeEditorSubscriptions$, activePlugins$, addActivePlugin$, addBottomAreaChild$, addComposerChild$, addEditorWrapper$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addMdastExtension$, addNestedEditorChild$, addSyntaxExtension$, addTableCellEditorChild$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, bottomAreaChildren$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, contentEditableRef$, contentEditableWrapperElement$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, directiveDescriptors$, editorInFocus$, editorInTable$, editorRootElementRef$, editorWrapperElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, initialMarkdownNormalize$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, lexicalTheme$, markdown$, markdownErrorSignal$, markdownProcessingError$, markdownSourceEditorValue$, mdastExtensions$, muteChange$, nestedEditorChildren$, onBlur$, placeholder$, readOnly$, rootEditor$, rootEditorSubscriptions$, setMarkdown$, spellCheck$, syntaxExtensions$, tableCellEditorChildren$, toMarkdownExtensions$, toMarkdownOptions$, topAreaChildren$, translation$, useTranslation, usedLexicalNodes$, viewMode$ } from "./plugins/core/index.js";
 import { ALL_HEADING_LEVELS, allowedHeadingLevels$, headingsPlugin } from "./plugins/headings/index.js";
 import { insertThematicBreak$, thematicBreakPlugin } from "./plugins/thematic-break/index.js";
 import { applyListType$, currentListType$, listsPlugin } from "./plugins/lists/index.js";
@@ -179,6 +179,7 @@ export {
   addMdastExtension$,
   addNestedEditorChild$,
   addSyntaxExtension$,
+  addTableCellEditorChild$,
   addToMarkdownExtension$,
   addTopAreaChild$,
   admonitionLabelsMap,
@@ -230,6 +231,7 @@ export {
   disableImageSettingsButton$,
   editImageToolbarComponent$,
   editorInFocus$,
+  editorInTable$,
   editorRootElementRef$,
   editorSearchCursor$,
   editorSearchRanges$,
@@ -333,6 +335,7 @@ export {
   spellCheck$,
   switchFromPreviewToLinkEdit$,
   syntaxExtensions$,
+  tableCellEditorChildren$,
   tablePlugin,
   tap,
   thematicBreakPlugin,

package/dist/plugins/core/index.js

@@ -3,7 +3,7 @@ import { createEmptyHistoryState } from "@lexical/react/LexicalHistoryPlugin.js"
 import { $isHeadingNode } from "@lexical/rich-text";
 import { $setBlocksType } from "@lexical/selection";
 import { $findMatchingParent, $wrapNodeInElement, $insertNodeToNearestRoot } from "@lexical/utils";
-import { Cell, Signal, withLatestFrom, filter, useCellValue, scan, map } from "@mdxeditor/gurx";
+import { Cell, Signal, withLatestFrom, filter, map, useCellValue, scan } from "@mdxeditor/gurx";
 import { createCommand, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, $getRoot, $setSelection, $getSelection, $insertNodes, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, DecoratorNode, $createParagraphNode, FOCUS_COMMAND, BLUR_COMMAND, $isRangeSelection, createEditor, ParagraphNode, TextNode } from "lexical";
 import { gfmStrikethrough } from "micromark-extension-gfm-strikethrough";
 import { gfmStrikethroughToMarkdown, gfmStrikethroughFromMarkdown } from "mdast-util-gfm-strikethrough";
@@ -402,6 +402,20 @@ const editorWrappers$ = Cell([]);
 const addEditorWrapper$ = Appender(editorWrappers$);
 const nestedEditorChildren$ = Cell([]);
 const addNestedEditorChild$ = Appender(nestedEditorChildren$);
+const tableCellEditorChildren$ = Cell([]);
+const addTableCellEditorChild$ = Appender(tableCellEditorChildren$);
+const editorInTable$ = Cell(false, (r) => {
+  r.link(
+    r.pipe(
+      activeEditor$,
+      map((editor) => {
+        var _a, _b;
+        return ["td", "th"].includes(((_b = (_a = editor == null ? void 0 : editor.getRootElement()) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.nodeName.toLowerCase()) ?? "");
+      })
+    ),
+    editorInTable$
+  );
+});
 const historyState$ = Cell(createEmptyHistoryState());
 const currentBlockType$ = Cell("");
 const applyBlockType$ = Signal();
@@ -614,6 +628,7 @@ export {
   addMdastExtension$,
   addNestedEditorChild$,
   addSyntaxExtension$,
+  addTableCellEditorChild$,
   addToMarkdownExtension$,
   addTopAreaChild$,
   applyBlockType$,
@@ -634,6 +649,7 @@ export {
   currentSelection$,
   directiveDescriptors$,
   editorInFocus$,
+  editorInTable$,
   editorRootElementRef$,
   editorWrapperElementRef$,
   editorWrappers$,
@@ -664,6 +680,7 @@ export {
   setMarkdown$,
   spellCheck$,
   syntaxExtensions$,
+  tableCellEditorChildren$,
   toMarkdownExtensions$,
   toMarkdownOptions$,
   topAreaChildren$,

package/dist/plugins/image/ImageNode.js

@@ -10,7 +10,7 @@ import { ImageEditor } from "./ImageEditor.js";
 function convertImageElement(domNode) {
   if (domNode instanceof HTMLImageElement) {
     const { alt: altText, src, title, width, height } = domNode;
-    const node = $createImageNode({ altText, src, title, width, height });
+    const node = $createImageNode({ altText, src, title, width: width || void 0, height: height || void 0 });
     return { node };
   }
   return null;
@@ -80,10 +80,10 @@ class ImageNode extends DecoratorNode {
     if (this.__title) {
       element.setAttribute("title", this.__title);
     }
-    if (this.__width) {
+    if (this.__width !== "inherit" && this.__width) {
       element.setAttribute("width", this.__width.toString());
     }
-    if (this.__height) {
+    if (this.__height !== "inherit" && this.__height) {
       element.setAttribute("height", this.__height.toString());
     }
     return { element };
@@ -102,8 +102,8 @@ class ImageNode extends DecoratorNode {
     return {
       altText: this.getAltText(),
       title: this.getTitle(),
-      height: this.__height === "inherit" ? 0 : this.__height,
-      width: this.__width === "inherit" ? 0 : this.__width,
+      height: this.__height === "inherit" ? void 0 : this.__height,
+      width: this.__width === "inherit" ? void 0 : this.__width,
       src: this.getSrc(),
       rest: this.__rest,
       type: "image",

package/dist/plugins/image/MdastImageVisitor.js

@@ -32,8 +32,8 @@ const MdastHtmlImageVisitor = {
       src: src || "",
       altText,
       title,
-      width,
-      height
+      width: width || void 0,
+      height: height || void 0
     });
     if (lexicalParent.getType() === "root") {
       const paragraph = $createParagraphNode();

package/dist/plugins/link/index.js

@@ -6,7 +6,7 @@ import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
 import { LexicalAutoLinkPlugin } from "./AutoLinkPlugin.js";
 import { Cell } from "@mdxeditor/gurx";
 import { realmPlugin } from "../../RealmWithPlugins.js";
-import { addComposerChild$, addNestedEditorChild$, addExportVisitor$, addLexicalNode$, addImportVisitor$, addActivePlugin$ } from "../core/index.js";
+import { addComposerChild$, addTableCellEditorChild$, addNestedEditorChild$, addExportVisitor$, addLexicalNode$, addImportVisitor$, addActivePlugin$ } from "../core/index.js";
 const disableAutoLink$ = Cell(false);
 const linkPlugin = realmPlugin({
   init(realm, params) {
@@ -20,6 +20,7 @@ const linkPlugin = realmPlugin({
       [addExportVisitor$]: LexicalLinkVisitor,
       [disableAutoLink$]: disableAutoLink,
       [addNestedEditorChild$]: EditorChild,
+      [addTableCellEditorChild$]: EditorChild,
       [addComposerChild$]: EditorChild
     });
   }

package/dist/plugins/lists/index.js

@@ -62,6 +62,7 @@ const listsPlugin = realmPlugin({
       [addToMarkdownExtension$]: gfmTaskListItemToMarkdown(),
       [addComposerChild$]: [TabIndentationPlugin, ListPlugin, CheckListPlugin],
       [addNestedEditorChild$]: [TabIndentationPlugin, ListPlugin, CheckListPlugin]
+      // Note: intentionally not registered to addTableCellEditorChild$ — lists are not supported in table cells
     });
   }
 });

package/dist/plugins/markdown-shortcut/index.js

@@ -1,10 +1,10 @@
+import React__default from "react";
 import { BOLD_ITALIC_STAR, BOLD_ITALIC_UNDERSCORE, BOLD_STAR, BOLD_UNDERSCORE, INLINE_CODE, ITALIC_STAR, ITALIC_UNDERSCORE, QUOTE, LINK, ORDERED_LIST, UNORDERED_LIST, CHECK_LIST, CODE } from "@lexical/markdown";
 import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
 import { HeadingNode, $isHeadingNode, $createHeadingNode } from "@lexical/rich-text";
-import React__default from "react";
 import { realmPlugin } from "../../RealmWithPlugins.js";
 import { CodeBlockNode, $createCodeBlockNode } from "../codeblock/CodeBlockNode.js";
-import { activePlugins$, addNestedEditorChild$, addComposerChild$ } from "../core/index.js";
+import { activePlugins$, addTableCellEditorChild$, addNestedEditorChild$, addComposerChild$ } from "../core/index.js";
 import { allowedHeadingLevels$ } from "../headings/index.js";
 import { HorizontalRuleNode, $createHorizontalRuleNode, $isHorizontalRuleNode } from "@lexical/react/LexicalHorizontalRuleNode";
 const markdownShortcutPlugin = realmPlugin({
@@ -12,9 +12,11 @@ const markdownShortcutPlugin = realmPlugin({
     const pluginIds = realm.getValue(activePlugins$);
     const allowedHeadingLevels = pluginIds.includes("headings") ? realm.getValue(allowedHeadingLevels$) : [];
     const transformers = pickTransformersForActivePlugins(pluginIds, allowedHeadingLevels);
+    const tableCellTransformers = transformers.filter((t) => !LIST_TRANSFORMERS.has(t));
     realm.pubIn({
       [addComposerChild$]: () => /* @__PURE__ */ React__default.createElement(MarkdownShortcutPlugin, { transformers }),
-      [addNestedEditorChild$]: () => /* @__PURE__ */ React__default.createElement(MarkdownShortcutPlugin, { transformers })
+      [addNestedEditorChild$]: () => /* @__PURE__ */ React__default.createElement(MarkdownShortcutPlugin, { transformers }),
+      [addTableCellEditorChild$]: () => /* @__PURE__ */ React__default.createElement(MarkdownShortcutPlugin, { transformers: tableCellTransformers })
     });
   }
 });
@@ -43,6 +45,7 @@ const THEMATIC_BREAK = {
   },
   type: "element"
 };
+const LIST_TRANSFORMERS = /* @__PURE__ */ new Set([ORDERED_LIST, UNORDERED_LIST, CHECK_LIST]);
 function pickTransformersForActivePlugins(pluginIds, allowedHeadingLevels) {
   const transformers = [
     BOLD_ITALIC_STAR,

package/dist/plugins/table/TableEditor.js

@@ -15,7 +15,7 @@ import classNames from "classnames";
 import styles from "../../styles/ui.module.css.js";
 import { isPartOftheEditorUI } from "../../utils/isPartOftheEditorUI.js";
 import { uuidv4 } from "../../utils/uuid4.js";
-import { iconComponentFor$, readOnly$, useTranslation, editorRootElementRef$, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, directiveDescriptors$, codeBlockEditorDescriptors$, jsxIsAvailable$, rootEditor$, nestedEditorChildren$, NESTED_EDITOR_UPDATED_COMMAND } from "../core/index.js";
+import { iconComponentFor$, readOnly$, useTranslation, editorRootElementRef$, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, directiveDescriptors$, codeBlockEditorDescriptors$, jsxIsAvailable$, rootEditor$, tableCellEditorChildren$, NESTED_EDITOR_UPDATED_COMMAND } from "../core/index.js";
 import { useCellValues } from "@mdxeditor/gurx";
 const getCellType = (rowIndex) => {
   if (rowIndex === 0) {
@@ -217,7 +217,7 @@ const CellEditor = ({ focus, setActiveCell, parentEditor, lexicalTable, contents
     codeBlockEditorDescriptors,
     jsxIsAvailable,
     rootEditor,
-    nestedEditorChildren
+    tableCellEditorChildren
   ] = useCellValues(
     importVisitors$,
     exportVisitors$,
@@ -227,7 +227,7 @@ const CellEditor = ({ focus, setActiveCell, parentEditor, lexicalTable, contents
     codeBlockEditorDescriptors$,
     jsxIsAvailable$,
     rootEditor$,
-    nestedEditorChildren$
+    tableCellEditorChildren$
   );
   const [editor] = React__default.useState(() => {
     const editor2 = createEditor({
@@ -325,7 +325,7 @@ const CellEditor = ({ focus, setActiveCell, parentEditor, lexicalTable, contents
       editor.focus();
     }
   }, [focus, editor]);
-  return /* @__PURE__ */ React__default.createElement(LexicalNestedComposer, { initialEditor: editor }, /* @__PURE__ */ React__default.createElement(RichTextPlugin, { contentEditable: /* @__PURE__ */ React__default.createElement(ContentEditable, null), placeholder: /* @__PURE__ */ React__default.createElement("div", null), ErrorBoundary: LexicalErrorBoundary }), nestedEditorChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })), /* @__PURE__ */ React__default.createElement(HistoryPlugin, null));
+  return /* @__PURE__ */ React__default.createElement(LexicalNestedComposer, { initialEditor: editor }, /* @__PURE__ */ React__default.createElement(RichTextPlugin, { contentEditable: /* @__PURE__ */ React__default.createElement(ContentEditable, null), placeholder: /* @__PURE__ */ React__default.createElement("div", null), ErrorBoundary: LexicalErrorBoundary }), tableCellEditorChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })), /* @__PURE__ */ React__default.createElement(HistoryPlugin, null));
 };
 const ColumnEditor = ({
   parentEditor,

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

@@ -1,25 +1,13 @@
 import { ButtonWithTooltip } from "../primitives/toolbar.js";
 import React__default from "react";
 import { insertTable$ } from "../../table/index.js";
-import { useCellValue, usePublisher, Cell, map } from "@mdxeditor/gurx";
-import { iconComponentFor$, useTranslation, activeEditor$ } from "../../core/index.js";
-const disableInsertTableButton$ = Cell(false, (r) => {
-  r.link(
-    r.pipe(
-      activeEditor$,
-      map((editor) => {
-        var _a, _b;
-        return ["td", "th"].includes(((_b = (_a = editor == null ? void 0 : editor.getRootElement()) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.nodeName.toLowerCase()) ?? "");
-      })
-    ),
-    disableInsertTableButton$
-  );
-});
+import { useCellValue, usePublisher } from "@mdxeditor/gurx";
+import { iconComponentFor$, useTranslation, editorInTable$ } from "../../core/index.js";
 const InsertTable = () => {
   const iconComponentFor = useCellValue(iconComponentFor$);
   const insertTable = usePublisher(insertTable$);
   const t = useTranslation();
-  const isDisabled = useCellValue(disableInsertTableButton$);
+  const isDisabled = useCellValue(editorInTable$);
   return /* @__PURE__ */ React__default.createElement(
     ButtonWithTooltip,
     {

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

@@ -2,14 +2,14 @@ import React__default from "react";
 import { currentListType$, applyListType$ } from "../../lists/index.js";
 import { SingleChoiceToggleGroup } from "../primitives/toolbar.js";
 import { useCellValues, usePublisher } from "@mdxeditor/gurx";
-import { iconComponentFor$, useTranslation } from "../../core/index.js";
+import { iconComponentFor$, editorInTable$, useTranslation } from "../../core/index.js";
 const ICON_NAME_MAP = {
   bullet: "format_list_bulleted",
   number: "format_list_numbered",
   check: "format_list_checked"
 };
 const ListsToggle = ({ options = ["bullet", "number", "check"] }) => {
-  const [currentListType, iconComponentFor] = useCellValues(currentListType$, iconComponentFor$);
+  const [currentListType, iconComponentFor, inTable] = useCellValues(currentListType$, iconComponentFor$, editorInTable$);
   const applyListType = usePublisher(applyListType$);
   const t = useTranslation();
   const LIST_TITLE_MAP = {
@@ -22,7 +22,7 @@ const ListsToggle = ({ options = ["bullet", "number", "check"] }) => {
     title: LIST_TITLE_MAP[type],
     contents: iconComponentFor(ICON_NAME_MAP[type])
   }));
-  return /* @__PURE__ */ React__default.createElement(SingleChoiceToggleGroup, { value: currentListType || "", items, onChange: applyListType });
+  return /* @__PURE__ */ React__default.createElement(SingleChoiceToggleGroup, { value: currentListType || "", items, onChange: applyListType, disabled: inTable });
 };
 export {
   ListsToggle

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

@@ -71,7 +71,8 @@ const SingleChoiceToggleGroup = ({
   onChange,
   className,
   ggClassName,
-  items
+  items,
+  disabled
 }) => {
   const t = useTranslation();
   return /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.toolbarGroupOfGroups, ggClassName) }, /* @__PURE__ */ React__default.createElement(
@@ -82,6 +83,7 @@ const SingleChoiceToggleGroup = ({
       className: classNames(styles.toolbarToggleSingleGroup, className),
       onValueChange: onChange,
       value: value || "",
+      disabled,
       onFocus: (e) => {
         e.preventDefault();
       }

package/package.json

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