@mdxeditor/editor 4.2.1 → 4.2.2

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.2",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",