@mdxeditor/editor 4.2.1 → 4.2.3

package/dist/importMarkdownToLexical.js

@@ -1,5 +1,6 @@
 import { fromMarkdown } from "mdast-util-from-markdown";
 import { toMarkdown } from "mdast-util-to-markdown";
+import { reconcileJsxKindMismatches } from "./plugins/jsx/reconcileJsxKind.js";
 function isParent(node) {
   return node.children instanceof Array;
 }
@@ -73,10 +74,30 @@ function importMarkdownToLexical({
   importMdastTreeToLexical({ root, mdastRoot, visitors, ...descriptors });
 }
 function importMdastTreeToLexical({ root, mdastRoot, visitors, ...descriptors }) {
+  visitors = visitors.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+  function findVisitor(mdastNode, skipVisitors = null) {
+    return visitors.find((visitor, index) => {
+      if (skipVisitors == null ? void 0 : skipVisitors.has(index)) {
+        return false;
+      }
+      if (typeof visitor.testNode === "string") {
+        return visitor.testNode === mdastNode.type;
+      }
+      return visitor.testNode(mdastNode, descriptors);
+    });
+  }
+  mdastRoot = reconcileJsxKindMismatches(
+    mdastRoot,
+    descriptors.jsxComponentDescriptors,
+    descriptors.jsxKindMismatchPolicy ?? "source",
+    (node) => {
+      var _a;
+      return ((_a = findVisitor(node)) == null ? void 0 : _a.jsxKindReconciliationOwner) === true;
+    }
+  );
   const formattingMap = /* @__PURE__ */ new WeakMap();
   const styleMap = /* @__PURE__ */ new WeakMap();
   const metaData = gatherMetadata(mdastRoot);
-  visitors = visitors.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
   function visitChildren(mdastNode, lexicalParent) {
     if (!isParent(mdastNode)) {
       throw new Error("Attempting to visit children of a non-parent");
@@ -86,15 +107,7 @@ function importMdastTreeToLexical({ root, mdastRoot, visitors, ...descriptors })
     });
   }
   function visit(mdastNode, lexicalParent, mdastParent, skipVisitors = null) {
-    const visitor = visitors.find((visitor2, index) => {
-      if (skipVisitors == null ? void 0 : skipVisitors.has(index)) {
-        return false;
-      }
-      if (typeof visitor2.testNode === "string") {
-        return visitor2.testNode === mdastNode.type;
-      }
-      return visitor2.testNode(mdastNode, descriptors);
-    });
+    const visitor = findVisitor(mdastNode, skipVisitors);
     if (!visitor) {
       try {
         throw new UnrecognizedMarkdownConstructError(`Unsupported markdown syntax: ${toMarkdown(mdastNode)}`);

package/dist/index.d.ts

@@ -904,6 +904,8 @@ export declare const defaultSvgIcons: {
  */
 export declare interface Descriptors {
     jsxComponentDescriptors: JsxComponentDescriptor[];
+    /** How parsed JSX node kinds are reconciled with their component descriptors. */
+    jsxKindMismatchPolicy?: JsxKindMismatchPolicy;
     directiveDescriptors: DirectiveDescriptor[];
     codeBlockEditorDescriptors: CodeBlockEditorDescriptor[];
     /**
@@ -1869,6 +1871,18 @@ export declare interface JsxEditorProps {
  */
 export declare const jsxIsAvailable$: NodeRef<boolean>;
 
+/**
+ * Controls how parsed JSX node kinds are reconciled with component descriptors.
+ * @group JSX
+ */
+export declare const jsxKindMismatchPolicy$: NodeRef<JsxKindMismatchPolicy>;
+
+/**
+ * Controls how parsed JSX node kinds are reconciled with component descriptors.
+ * @group JSX
+ */
+export declare type JsxKindMismatchPolicy = 'source' | 'normalize' | 'error';
+
 /**
  * a plugin that adds support for JSX elements (MDX).
  * @group JSX
@@ -1887,6 +1901,11 @@ export declare interface JsxPluginParams {
      * Whether or not to allow default React fragments <></> processing in MDX.
      */
     allowFragment?: boolean;
+    /**
+     * Controls whether the parsed JSX kind or the component descriptor is authoritative when they disagree.
+     * @defaultValue 'source'
+     */
+    kindMismatchPolicy?: JsxKindMismatchPolicy;
 }
 
 export declare type JsxProperties = Record<string, string | ExpressionValue>;
@@ -2252,6 +2271,7 @@ export declare interface MdastImportVisitor<UN extends Mdast.Nodes> {
      * Default 0, optional, sets the priority of the visitor. The higher the number, the earlier it will be called.
      */
     priority?: number;
+    /* Excluded from this release type: jsxKindReconciliationOwner */
 }
 
 /**

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$, addTableCellEditorChild$, addToMarkdownExtension$, addTopAreaChild$, applyBlockType$, applyFormat$, autoFocus$, bottomAreaChildren$, codeBlockEditorDescriptors$, composerChildren$, contentEditableClassName$, contentEditableRef$, contentEditableWrapperElement$, convertSelectionToNode$, corePlugin, createActiveEditorSubscription$, createRootEditorSubscription$, currentBlockType$, currentFormat$, currentSelection$, defaultCodeBlockLanguage$, 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 { 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$, defaultCodeBlockLanguage$, directiveDescriptors$, editorInFocus$, editorInTable$, editorRootElementRef$, editorWrapperElementRef$, editorWrappers$, exportVisitors$, historyState$, iconComponentFor$, importVisitors$, inFocus$, initialMarkdown$, initialMarkdownNormalize$, insertDecoratorNode$, insertMarkdown$, jsxComponentDescriptors$, jsxIsAvailable$, jsxKindMismatchPolicy$, 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";
@@ -280,6 +280,7 @@ export {
   joinProc,
   jsxComponentDescriptors$,
   jsxIsAvailable$,
+  jsxKindMismatchPolicy$,
   jsxPlugin,
   lexical,
   lexicalTheme,

package/dist/jsx-editors/GenericJsxEditor.js

@@ -66,7 +66,7 @@ const GenericJsxEditor = ({ mdastNode, descriptor, PropertyEditor }) => {
   return /* @__PURE__ */ React__default.createElement("div", { className: descriptor.kind === "text" ? styles.inlineEditor : styles.blockEditor }, shouldRenderComponentName ? /* @__PURE__ */ React__default.createElement("span", { className: styles.genericComponentName }, mdastNode.name ?? "Fragment") : null, descriptor.props.length > 0 ? /* @__PURE__ */ React__default.createElement(PropertyEditorComponent, { properties, title: mdastNode.name ?? "", onChange }) : null, descriptor.hasChildren ? /* @__PURE__ */ React__default.createElement(
     NestedLexicalEditor,
     {
-      block: descriptor.kind === "flow",
+      block: mdastNode.type === "mdxJsxFlowElement",
       getContent: (node) => node.children,
       getUpdatedMdastNode: (mdastNode2, children) => {
         return { ...mdastNode2, children };

package/dist/plugins/core/index.js

@@ -14,6 +14,7 @@ import { mdxJsx } from "micromark-extension-mdx-jsx";
 import { mdxMd } from "micromark-extension-mdx-md";
 import { exportMarkdownFromLexical } from "../../exportMarkdownFromLexical.js";
 import { importMarkdownToLexical, MarkdownParseError, UnrecognizedMarkdownConstructError } from "../../importMarkdownToLexical.js";
+import { JsxKindMismatchError } from "../jsx/reconcileJsxKind.js";
 import { noop } from "../../utils/fp.js";
 import { GenericHTMLNode } from "./GenericHTMLNode.js";
 import { $createGenericHTMLNode, $isGenericHTMLNode, TYPE_NAME } from "./GenericHTMLNode.js";
@@ -112,6 +113,7 @@ const toMarkdownExtensions$ = Cell([]);
 const toMarkdownOptions$ = Cell({});
 const jsxIsAvailable$ = Cell(false);
 const jsxComponentDescriptors$ = Cell([]);
+const jsxKindMismatchPolicy$ = Cell("source");
 const directiveDescriptors$ = Cell([]);
 const codeBlockEditorDescriptors$ = Cell([]);
 const defaultCodeBlockLanguage$ = Cell("");
@@ -376,13 +378,14 @@ function tryImportingMarkdown(r, node, markdownValue) {
       markdown: markdownValue,
       syntaxExtensions: r.getValue(syntaxExtensions$),
       jsxComponentDescriptors: r.getValue(jsxComponentDescriptors$),
+      jsxKindMismatchPolicy: r.getValue(jsxKindMismatchPolicy$),
       directiveDescriptors: r.getValue(directiveDescriptors$),
       codeBlockEditorDescriptors: r.getValue(codeBlockEditorDescriptors$),
       defaultCodeBlockLanguage: r.getValue(defaultCodeBlockLanguage$)
     });
     r.pub(markdownProcessingError$, null);
   } catch (e) {
-    if (e instanceof MarkdownParseError || e instanceof UnrecognizedMarkdownConstructError) {
+    if (e instanceof MarkdownParseError || e instanceof UnrecognizedMarkdownConstructError || e instanceof JsxKindMismatchError) {
       r.pubIn({
         [markdown$]: markdownValue,
         [markdownProcessingError$]: {
@@ -663,6 +666,7 @@ export {
   insertMarkdown$,
   jsxComponentDescriptors$,
   jsxIsAvailable$,
+  jsxKindMismatchPolicy$,
   lexicalTheme$,
   markdown$,
   markdownErrorSignal$,

package/dist/plugins/jsx/MdastMdxJsxElementVisitor.js

@@ -1,4 +1,3 @@
-import { $createParagraphNode } from "lexical";
 import { $createLexicalJsxNode } from "./LexicalJsxNode.js";
 const MdastMdxJsxElementVisitor = {
   testNode: (node, { jsxComponentDescriptors }) => {
@@ -8,20 +7,13 @@ const MdastMdxJsxElementVisitor = {
     }
     return false;
   },
-  visitNode({ lexicalParent, mdastNode, descriptors: { jsxComponentDescriptors }, metaData }) {
-    const descriptor = jsxComponentDescriptors.find((descriptor2) => descriptor2.name === mdastNode.name) ?? jsxComponentDescriptors.find((descriptor2) => descriptor2.name === "*");
-    if ((descriptor == null ? void 0 : descriptor.kind) === "text" && mdastNode.type === "mdxJsxFlowElement") {
-      const patchedNode = { ...mdastNode, type: "mdxJsxTextElement" };
-      const paragraph = $createParagraphNode();
-      paragraph.append($createLexicalJsxNode(patchedNode, mdastNode.name ? metaData.importDeclarations[mdastNode.name] : void 0));
-      lexicalParent.append(paragraph);
-    } else {
-      lexicalParent.append(
-        $createLexicalJsxNode(mdastNode, mdastNode.name ? metaData.importDeclarations[mdastNode.name] : void 0)
-      );
-    }
+  visitNode({ lexicalParent, mdastNode, metaData }) {
+    lexicalParent.append(
+      $createLexicalJsxNode(mdastNode, mdastNode.name ? metaData.importDeclarations[mdastNode.name] : void 0)
+    );
   },
-  priority: -200
+  priority: -200,
+  jsxKindReconciliationOwner: true
 };
 export {
   MdastMdxJsxElementVisitor

package/dist/plugins/jsx/index.js

@@ -1,6 +1,6 @@
 import { mdxToMarkdown, mdxFromMarkdown } from "mdast-util-mdx";
 import { mdxjs } from "micromark-extension-mdxjs";
-import { insertDecoratorNode$, jsxComponentDescriptors$, addToMarkdownExtension$, addExportVisitor$, addLexicalNode$, addImportVisitor$, addSyntaxExtension$, addMdastExtension$, jsxIsAvailable$ } from "../core/index.js";
+import { insertDecoratorNode$, jsxKindMismatchPolicy$, jsxComponentDescriptors$, addToMarkdownExtension$, addExportVisitor$, addLexicalNode$, addImportVisitor$, addSyntaxExtension$, addMdastExtension$, jsxIsAvailable$ } from "../core/index.js";
 import { $createLexicalJsxNode, LexicalJsxNode } from "./LexicalJsxNode.js";
 import { LexicalJsxVisitor } from "./LexicalJsxVisitor.js";
 import { MdastMdxJsEsmVisitor } from "./MdastMdxJsEsmVisitor.js";
@@ -83,11 +83,15 @@ const jsxPlugin = realmPlugin({
       [addLexicalNode$]: [LexicalJsxNode, LexicalMdxExpressionNode],
       [addExportVisitor$]: [LexicalJsxVisitor, LexicalMdxExpressionVisitor],
       [addToMarkdownExtension$]: mdxToMarkdown(),
-      [jsxComponentDescriptors$]: getDescriptors(params)
+      [jsxComponentDescriptors$]: getDescriptors(params),
+      [jsxKindMismatchPolicy$]: (params == null ? void 0 : params.kindMismatchPolicy) ?? "source"
     });
   },
   update(realm, params) {
-    realm.pub(jsxComponentDescriptors$, getDescriptors(params));
+    realm.pubIn({
+      [jsxComponentDescriptors$]: getDescriptors(params),
+      [jsxKindMismatchPolicy$]: (params == null ? void 0 : params.kindMismatchPolicy) ?? "source"
+    });
   }
 });
 export {

package/dist/plugins/jsx/reconcileJsxKind.js

@@ -0,0 +1,179 @@
+class JsxKindMismatchError extends Error {
+  constructor(node, descriptor, policy, reason) {
+    const name = node.name ?? "Fragment";
+    const parsedKind = node.type === "mdxJsxFlowElement" ? "flow" : "text";
+    const detail = reason ? ` ${reason}` : "";
+    super(
+      `JSX component "${name}" was parsed as ${parsedKind} but is declared as ${descriptor.kind} (kindMismatchPolicy: "${policy}").${detail}`
+    );
+    this.name = "JsxKindMismatchError";
+  }
+}
+const phrasingParentTypes = /* @__PURE__ */ new Set([
+  "paragraph",
+  "heading",
+  "emphasis",
+  "strong",
+  "delete",
+  "link",
+  "linkReference",
+  "tableCell",
+  "footnote",
+  "mdxJsxTextElement",
+  "textDirective",
+  "leafDirective"
+]);
+const flowParentTypes = /* @__PURE__ */ new Set(["root", "blockquote", "listItem", "footnoteDefinition", "mdxJsxFlowElement", "containerDirective"]);
+function isJsxNode(node) {
+  return node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement";
+}
+function findDescriptor(node, descriptors) {
+  return descriptors.find((descriptor) => descriptor.name === node.name) ?? descriptors.find((descriptor) => descriptor.name === "*");
+}
+function isMismatch(node, descriptor) {
+  return (node.type === "mdxJsxFlowElement" ? "flow" : "text") !== descriptor.kind;
+}
+function assertNoMismatches(node, descriptors, shouldReconcile) {
+  if (isJsxNode(node)) {
+    const descriptor = findDescriptor(node, descriptors);
+    if (descriptor && shouldReconcile(node) && isMismatch(node, descriptor)) {
+      throw new JsxKindMismatchError(node, descriptor, "error");
+    }
+  }
+  if ("children" in node) {
+    node.children.forEach((child) => {
+      assertNoMismatches(child, descriptors, shouldReconcile);
+    });
+  }
+}
+function normalizeTree(root, descriptors, shouldReconcile) {
+  const findOwnedDescriptor = (node) => shouldReconcile(node) ? findDescriptor(node, descriptors) : void 0;
+  function normalizeParent(node) {
+    const context = phrasingParentTypes.has(node.type) ? "phrasing" : flowParentTypes.has(node.type) ? "flow" : "structural";
+    if (context === "phrasing") {
+      node.children = node.children.flatMap((child) => normalizePhrasingChild(child, node.type));
+    } else if (context === "flow") {
+      node.children = node.children.flatMap((child) => normalizeFlowChild(child));
+    } else {
+      node.children = node.children.map((child) => normalizeStructuralChild(child, node.type));
+    }
+    return node;
+  }
+  function normalizeDescendants(node) {
+    if ("children" in node) {
+      normalizeParent(node);
+    }
+    return node;
+  }
+  function normalizeStructuralChild(node, parentType) {
+    if (isJsxNode(node)) {
+      const descriptor = findOwnedDescriptor(node);
+      if (descriptor && isMismatch(node, descriptor)) {
+        throw new JsxKindMismatchError(
+          node,
+          descriptor,
+          "normalize",
+          `The ${parentType} parent does not declare whether its children are flow or phrasing content.`
+        );
+      }
+    }
+    return normalizeDescendants(node);
+  }
+  function normalizePhrasingChild(node, parentType) {
+    if (!isJsxNode(node)) {
+      return [normalizeDescendants(node)];
+    }
+    const descriptor = findOwnedDescriptor(node);
+    if (!descriptor || !isMismatch(node, descriptor)) {
+      return [normalizeDescendants(node)];
+    }
+    if (node.type === "mdxJsxTextElement") {
+      throw new JsxKindMismatchError(
+        node,
+        descriptor,
+        "normalize",
+        `It cannot be lifted from ${parentType} without changing surrounding phrasing content.`
+      );
+    }
+    const textNode = convertFlowToText(node, descriptor);
+    return [normalizeDescendants(textNode)];
+  }
+  function normalizeParagraph(node) {
+    const flowMismatch = node.children.find((child) => {
+      if (child.type !== "mdxJsxTextElement") {
+        return false;
+      }
+      const descriptor2 = findOwnedDescriptor(child);
+      return (descriptor2 == null ? void 0 : descriptor2.kind) === "flow";
+    });
+    if (!flowMismatch) {
+      return [normalizeParent(node)];
+    }
+    const descriptor = findOwnedDescriptor(flowMismatch);
+    if (node.children.length !== 1) {
+      throw new JsxKindMismatchError(
+        flowMismatch,
+        descriptor,
+        "normalize",
+        "It has surrounding phrasing content, and normalization would need to split the paragraph."
+      );
+    }
+    const flowNode = {
+      ...flowMismatch,
+      type: "mdxJsxFlowElement",
+      children: flowMismatch.children.length === 0 ? [] : [{ type: "paragraph", children: flowMismatch.children }]
+    };
+    return [normalizeDescendants(flowNode)];
+  }
+  function normalizeFlowChild(node) {
+    if (node.type === "paragraph") {
+      return normalizeParagraph(node);
+    }
+    if (!isJsxNode(node)) {
+      return [normalizeDescendants(node)];
+    }
+    const descriptor = findOwnedDescriptor(node);
+    if (!descriptor || !isMismatch(node, descriptor)) {
+      return [normalizeDescendants(node)];
+    }
+    if (node.type === "mdxJsxTextElement") {
+      throw new JsxKindMismatchError(
+        node,
+        descriptor,
+        "normalize",
+        "A text JSX node can be normalized to flow only when it is the sole child of a paragraph."
+      );
+    }
+    const textNode = normalizeDescendants(convertFlowToText(node, descriptor));
+    return [{ type: "paragraph", children: [textNode] }];
+  }
+  function convertFlowToText(node, descriptor) {
+    if (node.children.length === 0) {
+      return { ...node, type: "mdxJsxTextElement", children: [] };
+    }
+    if (node.children.length !== 1 || node.children[0].type !== "paragraph") {
+      throw new JsxKindMismatchError(
+        node,
+        descriptor,
+        "normalize",
+        "Its block children cannot be represented as one phrasing-content sequence without data loss."
+      );
+    }
+    return { ...node, type: "mdxJsxTextElement", children: node.children[0].children };
+  }
+  return normalizeParent(root);
+}
+function reconcileJsxKindMismatches(root, descriptors, policy, shouldReconcile = () => true) {
+  if (policy === "source") {
+    return root;
+  }
+  if (policy === "error") {
+    assertNoMismatches(root, descriptors, shouldReconcile);
+    return root;
+  }
+  return normalizeTree(structuredClone(root), descriptors, shouldReconcile);
+}
+export {
+  JsxKindMismatchError,
+  reconcileJsxKindMismatches
+};

package/dist/plugins/table/TableEditor.js

@@ -3,10 +3,11 @@ import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { LexicalExtensionEditorComposer } from "@lexical/react/LexicalExtensionEditorComposer";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import * as RadixPopover from "@radix-ui/react-popover";
-import { $createParagraphNode, $getRoot, KEY_TAB_COMMAND, COMMAND_PRIORITY_CRITICAL, FOCUS_COMMAND, COMMAND_PRIORITY_LOW, KEY_ENTER_COMMAND, BLUR_COMMAND, COMMAND_PRIORITY_EDITOR } from "lexical";
+import { $createParagraphNode, $getNodeByKey, $getRoot, KEY_TAB_COMMAND, COMMAND_PRIORITY_CRITICAL, FOCUS_COMMAND, COMMAND_PRIORITY_LOW, KEY_ENTER_COMMAND, BLUR_COMMAND, COMMAND_PRIORITY_EDITOR } from "lexical";
 import React__default from "react";
 import { exportLexicalTreeToMdast } from "../../exportMarkdownFromLexical.js";
 import { importMdastTreeToLexical } from "../../importMarkdownToLexical.js";
+import { $isTableNode } from "./TableNode.js";
 import { mergeRegister } from "@lexical/utils";
 import * as RadixToolbar from "@radix-ui/react-toolbar";
 import classNames from "classnames";
@@ -27,7 +28,12 @@ const AlignToTailwindClassMap = {
   left: styles.leftAlignedCell,
   right: styles.rightAlignedCell
 };
+function $getTableNodeByKey(key) {
+  const node = $getNodeByKey(key);
+  return $isTableNode(node) ? node : null;
+}
 const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
+  const tableKey = lexicalTable.getKey();
   const [activeCell, setActiveCell] = React__default.useState(null);
   const [iconComponentFor, readOnly] = useCellValues(iconComponentFor$, readOnly$);
   const getCellKey = React__default.useMemo(() => {
@@ -55,12 +61,16 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
       if (rowIndex > lexicalTable.getRowCount() - 1) {
         setActiveCell(null);
         parentEditor.update(() => {
-          const nextSibling = lexicalTable.getLatest().getNextSibling();
+          const currentTable = $getTableNodeByKey(tableKey);
+          if (!currentTable) {
+            return;
+          }
+          const nextSibling = currentTable.getNextSibling();
           if (nextSibling) {
-            lexicalTable.getLatest().selectNext();
+            currentTable.selectNext();
           } else {
             const newParagraph = $createParagraphNode();
-            lexicalTable.insertAfter(newParagraph);
+            currentTable.insertAfter(newParagraph);
             newParagraph.select();
           }
         });
@@ -69,13 +79,14 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
       if (rowIndex < 0) {
         setActiveCell(null);
         parentEditor.update(() => {
-          lexicalTable.getLatest().selectPrevious();
+          var _a;
+          (_a = $getTableNodeByKey(tableKey)) == null ? void 0 : _a.selectPrevious();
         });
         return;
       }
       setActiveCell([colIndex, rowIndex]);
     },
-    [lexicalTable, parentEditor]
+    [lexicalTable, parentEditor, tableKey]
   );
   React__default.useEffect(() => {
     lexicalTable.focusEmitter.subscribe(setActiveCellWithBoundaries);
@@ -84,21 +95,29 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
     (e) => {
       e.preventDefault();
       parentEditor.update(() => {
-        lexicalTable.addRowToBottom();
-        setActiveCell([0, lexicalTable.getRowCount()]);
+        const currentTable = $getTableNodeByKey(tableKey);
+        if (!currentTable) {
+          return;
+        }
+        currentTable.addRowToBottom();
+        setActiveCell([0, currentTable.getRowCount()]);
       });
     },
-    [parentEditor, lexicalTable]
+    [parentEditor, tableKey]
   );
   const addColumnToRight = React__default.useCallback(
     (e) => {
       e.preventDefault();
       parentEditor.update(() => {
-        lexicalTable.addColumnToRight();
-        setActiveCell([lexicalTable.getColCount(), 0]);
+        const currentTable = $getTableNodeByKey(tableKey);
+        if (!currentTable) {
+          return;
+        }
+        currentTable.addColumnToRight();
+        setActiveCell([currentTable.getColCount(), 0]);
       });
     },
-    [parentEditor, lexicalTable]
+    [parentEditor, tableKey]
   );
   const [highlightedCoordinates, setHighlightedCoordinates] = React__default.useState([-1, -1]);
   const onTableMouseOver = React__default.useCallback((e) => {
@@ -157,8 +176,12 @@ const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
         onClick: (e) => {
           e.preventDefault();
           parentEditor.update(() => {
-            lexicalTable.selectNext();
-            lexicalTable.remove();
+            const currentTable = $getTableNodeByKey(tableKey);
+            if (!currentTable) {
+              return;
+            }
+            currentTable.selectNext();
+            currentTable.remove();
           });
         }
       },
@@ -207,6 +230,7 @@ const Cell = ({ align, ...props }) => {
   );
 };
 const CellEditor = ({ focus, setActiveCell, parentEditor, lexicalTable, contents, colIndex, rowIndex }) => {
+  const tableKey = lexicalTable.getKey();
   const [
     importVisitors,
     exportVisitors,
@@ -269,7 +293,11 @@ const CellEditor = ({ focus, setActiveCell, parentEditor, lexicalTable, contents
         });
         parentEditor.update(
           () => {
-            lexicalTable.updateCellContents(colIndex, rowIndex, mdast.children[0].children);
+            const currentTable = $getTableNodeByKey(tableKey);
+            if (!currentTable) {
+              return;
+            }
+            currentTable.updateCellContents(colIndex, rowIndex, mdast.children[0].children);
           },
           { discrete: true }
         );
@@ -277,7 +305,7 @@ const CellEditor = ({ focus, setActiveCell, parentEditor, lexicalTable, contents
       });
       setActiveCell(nextCell);
     },
-    [colIndex, editor, exportVisitors, jsxComponentDescriptors, jsxIsAvailable, lexicalTable, parentEditor, rowIndex, setActiveCell]
+    [colIndex, editor, exportVisitors, jsxComponentDescriptors, jsxIsAvailable, parentEditor, rowIndex, setActiveCell, tableKey]
   );
   React__default.useEffect(() => {
     if (!editor) {
@@ -352,31 +380,38 @@ const ColumnEditor = ({
   colIndex,
   setActiveCellWithBoundaries
 }) => {
+  const tableKey = lexicalTable.getKey();
   const [editorRootElementRef, iconComponentFor] = useCellValues(editorRootElementRef$, iconComponentFor$);
   const insertColumnAt = React__default.useCallback(
     (colIndex2) => {
       parentEditor.update(() => {
-        lexicalTable.insertColumnAt(colIndex2);
+        const currentTable = $getTableNodeByKey(tableKey);
+        if (!currentTable) {
+          return;
+        }
+        currentTable.insertColumnAt(colIndex2);
+        setActiveCellWithBoundaries([colIndex2, 0]);
       });
-      setActiveCellWithBoundaries([colIndex2, 0]);
     },
-    [parentEditor, lexicalTable, setActiveCellWithBoundaries]
+    [parentEditor, setActiveCellWithBoundaries, tableKey]
   );
   const deleteColumnAt = React__default.useCallback(
     (colIndex2) => {
       parentEditor.update(() => {
-        lexicalTable.deleteColumnAt(colIndex2);
+        var _a;
+        (_a = $getTableNodeByKey(tableKey)) == null ? void 0 : _a.deleteColumnAt(colIndex2);
       });
     },
-    [parentEditor, lexicalTable]
+    [parentEditor, tableKey]
   );
   const setColumnAlign = React__default.useCallback(
     (colIndex2, align2) => {
       parentEditor.update(() => {
-        lexicalTable.setColumnAlign(colIndex2, align2);
+        var _a;
+        (_a = $getTableNodeByKey(tableKey)) == null ? void 0 : _a.setColumnAlign(colIndex2, align2);
       });
     },
-    [parentEditor, lexicalTable]
+    [parentEditor, tableKey]
   );
   const t = useTranslation();
   return /* @__PURE__ */ React__default.createElement(RadixPopover.Root, null, /* @__PURE__ */ React__default.createElement(
@@ -436,23 +471,29 @@ const RowEditor = ({
   rowIndex,
   setActiveCellWithBoundaries
 }) => {
+  const tableKey = lexicalTable.getKey();
   const [editorRootElementRef, iconComponentFor] = useCellValues(editorRootElementRef$, iconComponentFor$);
   const insertRowAt = React__default.useCallback(
     (rowIndex2) => {
       parentEditor.update(() => {
-        lexicalTable.insertRowAt(rowIndex2);
+        const currentTable = $getTableNodeByKey(tableKey);
+        if (!currentTable) {
+          return;
+        }
+        currentTable.insertRowAt(rowIndex2);
+        setActiveCellWithBoundaries([0, rowIndex2]);
       });
-      setActiveCellWithBoundaries([0, rowIndex2]);
     },
-    [parentEditor, lexicalTable, setActiveCellWithBoundaries]
+    [parentEditor, setActiveCellWithBoundaries, tableKey]
   );
   const deleteRowAt = React__default.useCallback(
     (rowIndex2) => {
       parentEditor.update(() => {
-        lexicalTable.deleteRowAt(rowIndex2);
+        var _a;
+        (_a = $getTableNodeByKey(tableKey)) == null ? void 0 : _a.deleteRowAt(rowIndex2);
       });
     },
-    [parentEditor, lexicalTable]
+    [parentEditor, tableKey]
   );
   const t = useTranslation();
   return /* @__PURE__ */ React__default.createElement(RadixPopover.Root, null, /* @__PURE__ */ React__default.createElement(

package/package.json

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