@mdxeditor/editor 0.10.1 → 0.11.0

package/dist/plugins/sandpack/index.js

@@ -0,0 +1,93 @@
+import React__default from "react";
+import { coreSystem } from "../core/index.js";
+import { codeBlockSystem } from "../codeblock/index.js";
+import { SandpackEditor } from "./SandpackEditor.js";
+import { system } from "../../gurx/realmFactory.js";
+import { realmPlugin } from "../../gurx/react.js";
+const defaultSnippetContent = `
+export default function App() {
+  return (
+    <div className="App">
+      <h1>Hello CodeSandbox</h1>
+      <h2>Start editing to see some magic happen!</h2>
+    </div>
+  );
+}
+`;
+const defaultSandpackConfig = {
+  defaultPreset: "react",
+  presets: [
+    {
+      name: "react",
+      meta: "live react",
+      label: "React",
+      sandpackTemplate: "react",
+      sandpackTheme: "light",
+      snippetFileName: "/App.js",
+      snippetLanguage: "jsx",
+      initialSnippetContent: defaultSnippetContent
+    }
+  ]
+};
+const sandpackSystem = system(
+  (r, [, { insertCodeBlock }]) => {
+    const sandpackConfig = r.node(defaultSandpackConfig);
+    const insertSandpack = r.node();
+    r.link(
+      r.pipe(
+        insertSandpack,
+        r.o.withLatestFrom(sandpackConfig),
+        r.o.map(([presetName, sandpackConfig2]) => {
+          const preset = presetName ? sandpackConfig2.presets.find((preset2) => preset2.name === presetName) : sandpackConfig2.presets.find((preset2) => preset2.name == sandpackConfig2.defaultPreset);
+          if (!preset) {
+            throw new Error(`No sandpack preset found with name ${presetName}`);
+          }
+          return {
+            code: preset.initialSnippetContent || "",
+            language: preset.snippetLanguage || "jsx",
+            meta: preset.meta
+          };
+        })
+      ),
+      insertCodeBlock
+    );
+    return {
+      insertSandpack,
+      sandpackConfig
+    };
+  },
+  [coreSystem, codeBlockSystem]
+);
+const [
+  /** @internal */
+  sandpackPlugin,
+  /** @internal */
+  sandpackPluginHooks
+] = realmPlugin({
+  id: "sandpack",
+  systemSpec: sandpackSystem,
+  applyParamsToSystem(r, params) {
+    r.pubKey("sandpackConfig", params.sandpackConfig);
+  },
+  init(r) {
+    r.pubKey("appendCodeBlockEditorDescriptor", {
+      match(_language, meta) {
+        return meta == null ? void 0 : meta.startsWith("live");
+      },
+      priority: 1,
+      Editor(props) {
+        const [config] = sandpackPluginHooks.useEmitterValues("sandpackConfig");
+        const preset = config.presets.find((preset2) => preset2.meta === props.meta);
+        if (!preset) {
+          throw new Error(`No sandpack preset found with ${props.meta}`);
+        }
+        return /* @__PURE__ */ React__default.createElement(SandpackEditor, { ...props, preset });
+      }
+    });
+  }
+});
+export {
+  sandpackPlugin,
+  sandpackPluginHooks,
+  sandpackSystem
+};

package/dist/plugins/sandpack/useCodeMirrorRef.d.ts

@@ -0,0 +1,4 @@
+import { CodeMirrorRef } from '@codesandbox/sandpack-react/dist/components/CodeEditor/CodeMirror';
+import React from 'react';
+import { VoidEmitter } from '../../utils/voidEmitter';
+export declare function useCodeMirrorRef(nodeKey: string, editorType: 'codeblock' | 'sandpack', language: string, focusEmitter: VoidEmitter): React.RefObject<CodeMirrorRef>;

package/dist/{useCodeMirrorRef-5356dfa5.js → plugins/sandpack/useCodeMirrorRef.js}

@@ -1,15 +1,20 @@
 import { $getNodeByKey, $createParagraphNode } from "lexical";
 import React__default from "react";
-import { u as useEmitterValues, a as usePublisher } from "./index-1ab1a12e.js";
-function useCodeMirrorRef(nodeKey, editorType, language) {
-  const [activeEditor] = useEmitterValues("activeEditor");
-  const setActiveEditorType = usePublisher("activeEditorType");
+import { useCodeBlockEditorContext } from "../codeblock/CodeBlockNode.js";
+import { corePluginHooks } from "../core/index.js";
+function useCodeMirrorRef(nodeKey, editorType, language, focusEmitter) {
+  const [theEditor] = corePluginHooks.useEmitterValues("activeEditor");
+  const setEditorInFocus = corePluginHooks.usePublisher("editorInFocus");
   const codeMirrorRef = React__default.useRef(null);
+  const { lexicalNode } = useCodeBlockEditorContext();
   const atBottom = React__default.useRef(false);
   const atTop = React__default.useRef(false);
   const onFocusHandler = React__default.useCallback(() => {
-    setActiveEditorType({ type: editorType, nodeKey });
-  }, [nodeKey, setActiveEditorType, editorType]);
+    setEditorInFocus({
+      editorType,
+      rootNode: lexicalNode
+    });
+  }, [editorType, lexicalNode, setEditorInFocus]);
   const onKeyDownHandler = React__default.useCallback(
     (e) => {
       var _a, _b, _c, _d;
@@ -22,7 +27,7 @@ function useCodeMirrorRef(nodeKey, editorType, language) {
             if (!atBottom.current) {
               atBottom.current = true;
             } else {
-              activeEditor == null ? void 0 : activeEditor.update(() => {
+              theEditor == null ? void 0 : theEditor.update(() => {
                 var _a2, _b2;
                 const node = $getNodeByKey(nodeKey);
                 const nextSibling = node.getNextSibling();
@@ -45,7 +50,7 @@ function useCodeMirrorRef(nodeKey, editorType, language) {
             if (!atTop.current) {
               atTop.current = true;
             } else {
-              activeEditor == null ? void 0 : activeEditor.update(() => {
+              theEditor == null ? void 0 : theEditor.update(() => {
                 var _a2, _b2;
                 const node = $getNodeByKey(nodeKey);
                 const previousSibling = node.getPreviousSibling();
@@ -62,7 +67,7 @@ function useCodeMirrorRef(nodeKey, editorType, language) {
         e.stopPropagation();
       }
     },
-    [activeEditor, nodeKey]
+    [theEditor, nodeKey]
   );
   React__default.useEffect(() => {
     const codeMirror = codeMirrorRef.current;
@@ -77,8 +82,15 @@ function useCodeMirrorRef(nodeKey, editorType, language) {
       (_b = codeMirror == null ? void 0 : codeMirror.getCodemirror()) == null ? void 0 : _b.contentDOM.removeEventListener("keydown", onKeyDownHandler);
     };
   }, [codeMirrorRef, onFocusHandler, onKeyDownHandler, language]);
+  React__default.useEffect(() => {
+    focusEmitter.subscribe(() => {
+      var _a, _b;
+      (_b = (_a = codeMirrorRef == null ? void 0 : codeMirrorRef.current) == null ? void 0 : _a.getCodemirror()) == null ? void 0 : _b.focus();
+      onFocusHandler();
+    });
+  }, [focusEmitter, codeMirrorRef, nodeKey, onFocusHandler]);
   return codeMirrorRef;
 }
 export {
-  useCodeMirrorRef as u
+  useCodeMirrorRef
 };

package/dist/plugins/table/LexicalTableVisitor.d.ts

@@ -0,0 +1,4 @@
+import * as Mdast from 'mdast';
+import { TableNode } from './TableNode';
+import { LexicalExportVisitor } from '../../exportMarkdownFromLexical';
+export declare const LexicalTableVisitor: LexicalExportVisitor<TableNode, Mdast.Table>;

package/dist/plugins/table/LexicalTableVisitor.js

@@ -0,0 +1,10 @@
+import { $isTableNode } from "./TableNode.js";
+const LexicalTableVisitor = {
+  testLexicalNode: $isTableNode,
+  visitLexicalNode({ actions, mdastParent, lexicalNode }) {
+    actions.appendToParent(mdastParent, lexicalNode.getMdastNode());
+  }
+};
+export {
+  LexicalTableVisitor
+};

package/dist/plugins/table/MdastTableVisitor.d.ts

@@ -0,0 +1,3 @@
+import * as Mdast from 'mdast';
+import { MdastImportVisitor } from '../../importMarkdownToLexical';
+export declare const MdastTableVisitor: MdastImportVisitor<Mdast.Table>;

package/dist/plugins/table/MdastTableVisitor.js

@@ -0,0 +1,10 @@
+import { $createTableNode } from "./TableNode.js";
+const MdastTableVisitor = {
+  testNode: "table",
+  visitNode({ mdastNode, lexicalParent }) {
+    lexicalParent.append($createTableNode(mdastNode));
+  }
+};
+export {
+  MdastTableVisitor
+};

package/dist/plugins/table/TableEditor.d.ts

@@ -0,0 +1,21 @@
+import { LexicalEditor } from 'lexical';
+import * as Mdast from 'mdast';
+import React from 'react';
+import { TableNode } from './TableNode';
+export interface TableEditorProps {
+    parentEditor: LexicalEditor;
+    lexicalTable: TableNode;
+    mdastNode: Mdast.Table;
+}
+export declare const TableEditor: React.FC<TableEditorProps>;
+export interface CellProps {
+    parentEditor: LexicalEditor;
+    lexicalTable: TableNode;
+    contents: Mdast.PhrasingContent[];
+    colIndex: number;
+    rowIndex: number;
+    align?: Mdast.AlignType;
+    activeCell: [number, number] | null;
+    setActiveCell: (cell: [number, number] | null) => void;
+    focus: boolean;
+}

package/dist/plugins/table/TableEditor.js

@@ -0,0 +1,384 @@
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import * as RadixPopover from "@radix-ui/react-popover";
+import { $createParagraphNode, createEditor, $getRoot, KEY_TAB_COMMAND, COMMAND_PRIORITY_CRITICAL, FOCUS_COMMAND, COMMAND_PRIORITY_LOW, KEY_ENTER_COMMAND, BLUR_COMMAND } from "lexical";
+import React__default from "react";
+import { lexicalTheme } from "../../styles/lexicalTheme.js";
+import { exportLexicalTreeToMdast } from "../../exportMarkdownFromLexical.js";
+import { importMdastTreeToLexical } from "../../importMarkdownToLexical.js";
+import AddColumnIcon from "../../icons/add_column.svg.js";
+import AddRowIcon from "../../icons/add_row.svg.js";
+import DeleteSmallIcon from "../../icons/delete_small.svg.js";
+import AlignCenterIcon from "../../icons/format_align_center.svg.js";
+import AlignLeftIcon from "../../icons/format_align_left.svg.js";
+import AlignRightIcon from "../../icons/format_align_right.svg.js";
+import InsertColLeftIcon from "../../icons/insert_col_left.svg.js";
+import InsertColRightIcon from "../../icons/insert_col_right.svg.js";
+import InsertRowAboveIcon from "../../icons/insert_row_above.svg.js";
+import InsertRowBelowIcon from "../../icons/insert_row_below.svg.js";
+import MoreHorizIcon from "../../icons/more_horiz.svg.js";
+import * as RadixToolbar from "@radix-ui/react-toolbar";
+import classNames from "classnames";
+import styles from "../../styles/ui.module.css.js";
+import { corePluginHooks } from "../core/index.js";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { mergeRegister } from "@lexical/utils";
+import { isPartOftheEditorUI } from "../../utils/isPartOftheEditorUI.js";
+const AlignToTailwindClassMap = {
+  center: styles.centeredCell,
+  left: styles.leftAlignedCell,
+  right: styles.rightAlignedCell
+};
+const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
+  const [activeCell, setActiveCell] = React__default.useState(null);
+  const setActiveCellWithBoundaries = React__default.useCallback(
+    (cell) => {
+      const colCount = lexicalTable.getColCount();
+      if (cell === null) {
+        setActiveCell(null);
+        return;
+      }
+      let [colIndex, rowIndex] = cell;
+      if (colIndex > colCount - 1) {
+        colIndex = 0;
+        rowIndex++;
+      }
+      if (colIndex < 0) {
+        colIndex = colCount - 1;
+        rowIndex -= 1;
+      }
+      if (rowIndex > lexicalTable.getRowCount() - 1) {
+        setActiveCell(null);
+        parentEditor.update(() => {
+          const nextSibling = lexicalTable.getLatest().getNextSibling();
+          if (nextSibling) {
+            lexicalTable.getLatest().selectNext();
+          } else {
+            const newParagraph = $createParagraphNode();
+            lexicalTable.insertAfter(newParagraph);
+            newParagraph.select();
+          }
+        });
+        return;
+      }
+      if (rowIndex < 0) {
+        setActiveCell(null);
+        parentEditor.update(() => {
+          lexicalTable.getLatest().selectPrevious();
+        });
+        return;
+      }
+      setActiveCell([colIndex, rowIndex]);
+    },
+    [lexicalTable, parentEditor]
+  );
+  React__default.useEffect(() => {
+    lexicalTable.focusEmitter.subscribe(setActiveCellWithBoundaries);
+  }, [lexicalTable, setActiveCellWithBoundaries]);
+  const addRowToBottom = React__default.useCallback(
+    (e) => {
+      e.preventDefault();
+      parentEditor.update(() => {
+        lexicalTable.addRowToBottom();
+        setActiveCell([0, lexicalTable.getRowCount()]);
+      });
+    },
+    [parentEditor, lexicalTable]
+  );
+  const addColumnToRight = React__default.useCallback(
+    (e) => {
+      e.preventDefault();
+      parentEditor.update(() => {
+        lexicalTable.addColumnToRight();
+        setActiveCell([lexicalTable.getColCount(), 0]);
+      });
+    },
+    [parentEditor, lexicalTable]
+  );
+  const [highlightedCoordinates, setHighlightedCoordinates] = React__default.useState([-1, -1]);
+  const onTableMouseOver = React__default.useCallback((e) => {
+    let tableCell = e.target;
+    while (tableCell && !["TH", "TD"].includes(tableCell.tagName)) {
+      if (tableCell === e.currentTarget) {
+        return;
+      }
+      tableCell = tableCell.parentElement;
+    }
+    if (tableCell === null) {
+      return;
+    }
+    const tableRow = tableCell.parentElement;
+    const tableContainer = tableRow.parentElement;
+    const colIndex = tableContainer.tagName === "TFOOT" ? -1 : Array.from(tableRow.children).indexOf(tableCell);
+    const rowIndex = tableCell.tagName === "TH" ? -1 : Array.from(tableRow.parentElement.children).indexOf(tableRow);
+    setHighlightedCoordinates([colIndex, rowIndex]);
+  }, []);
+  return /* @__PURE__ */ React__default.createElement("table", { className: styles.tableEditor, onMouseOver: onTableMouseOver, onMouseLeave: () => setHighlightedCoordinates([-1, -1]) }, /* @__PURE__ */ React__default.createElement("colgroup", null, /* @__PURE__ */ React__default.createElement("col", null), Array.from({ length: mdastNode.children[0].children.length }, (_, colIndex) => {
+    const align = mdastNode.align || [];
+    const currentColumnAlign = align[colIndex] || "left";
+    const className = AlignToTailwindClassMap[currentColumnAlign];
+    return /* @__PURE__ */ React__default.createElement("col", { key: colIndex, className });
+  }), /* @__PURE__ */ React__default.createElement("col", null)), /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", { className: styles.tableToolsColumn, "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      className: styles.iconButton,
+      type: "button",
+      title: "Delete table",
+      onClick: (e) => {
+        e.preventDefault();
+        parentEditor.update(() => {
+          lexicalTable.selectNext();
+          lexicalTable.remove();
+        });
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(DeleteSmallIcon, null)
+  )), Array.from({ length: mdastNode.children[0].children.length }, (_, colIndex) => {
+    return /* @__PURE__ */ React__default.createElement("th", { key: colIndex, "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement(
+      ColumnEditor,
+      {
+        ...{
+          setActiveCellWithBoundaries,
+          parentEditor,
+          colIndex,
+          highlightedCoordinates,
+          lexicalTable,
+          align: (mdastNode.align || [])[colIndex]
+        }
+      }
+    ));
+  }), /* @__PURE__ */ React__default.createElement("th", { className: styles.tableToolsColumn }))), /* @__PURE__ */ React__default.createElement("tbody", null, mdastNode.children.map((row, rowIndex) => {
+    return /* @__PURE__ */ React__default.createElement("tr", { key: rowIndex }, /* @__PURE__ */ React__default.createElement("td", { className: styles.toolCell, "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement(RowEditor, { ...{ setActiveCellWithBoundaries, parentEditor, rowIndex, highlightedCoordinates, lexicalTable } })), row.children.map((mdastCell, colIndex) => {
+      var _a;
+      return /* @__PURE__ */ React__default.createElement(
+        Cell,
+        {
+          align: (_a = mdastNode.align) == null ? void 0 : _a[colIndex],
+          key: colIndex,
+          contents: mdastCell.children,
+          setActiveCell: setActiveCellWithBoundaries,
+          ...{
+            rowIndex,
+            colIndex,
+            lexicalTable,
+            parentEditor,
+            activeCell
+          }
+        }
+      );
+    }), 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 }, /* @__PURE__ */ React__default.createElement(AddColumnIcon, null))));
+  })), /* @__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 }, /* @__PURE__ */ React__default.createElement(AddRowIcon, null))), /* @__PURE__ */ React__default.createElement("th", null))));
+};
+const Cell = ({ align, ...props }) => {
+  const { activeCell, setActiveCell } = props;
+  const isActive = Boolean(activeCell && activeCell[0] === props.colIndex && activeCell[1] === props.rowIndex);
+  const className = AlignToTailwindClassMap[align || "left"];
+  return /* @__PURE__ */ React__default.createElement(
+    "td",
+    {
+      className,
+      "data-active": isActive,
+      onClick: () => {
+        setActiveCell([props.colIndex, props.rowIndex]);
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(CellEditor, { ...props, focus: isActive })
+  );
+};
+const CellEditor = ({ focus, setActiveCell, parentEditor, lexicalTable, contents, colIndex, rowIndex }) => {
+  const [importVisitors, exportVisitors, usedLexicalNodes, jsxComponentDescriptors, jsxIsAvailable, rootEditor] = corePluginHooks.useEmitterValues(
+    "importVisitors",
+    "exportVisitors",
+    "usedLexicalNodes",
+    "jsxComponentDescriptors",
+    "jsxIsAvailable",
+    "rootEditor"
+  );
+  const [editor] = React__default.useState(() => {
+    const editor2 = createEditor({
+      nodes: usedLexicalNodes,
+      theme: lexicalTheme
+    });
+    editor2.update(() => {
+      importMdastTreeToLexical({
+        root: $getRoot(),
+        mdastRoot: { type: "root", children: [{ type: "paragraph", children: contents }] },
+        visitors: importVisitors
+      });
+    });
+    return editor2;
+  });
+  const saveAndFocus = React__default.useCallback(
+    (nextCell) => {
+      editor.getEditorState().read(() => {
+        const mdast = exportLexicalTreeToMdast({
+          root: $getRoot(),
+          jsxComponentDescriptors,
+          visitors: exportVisitors,
+          jsxIsAvailable
+        });
+        parentEditor.update(() => {
+          lexicalTable.updateCellContents(colIndex, rowIndex, mdast.children[0].children);
+        });
+      });
+      setActiveCell(nextCell);
+    },
+    [colIndex, editor, exportVisitors, jsxComponentDescriptors, jsxIsAvailable, lexicalTable, parentEditor, rowIndex, setActiveCell]
+  );
+  React__default.useEffect(() => {
+    return mergeRegister(
+      editor.registerCommand(
+        KEY_TAB_COMMAND,
+        (payload) => {
+          payload.preventDefault();
+          const nextCell = payload.shiftKey ? [colIndex - 1, rowIndex] : [colIndex + 1, rowIndex];
+          saveAndFocus(nextCell);
+          return true;
+        },
+        COMMAND_PRIORITY_CRITICAL
+      ),
+      editor.registerCommand(
+        FOCUS_COMMAND,
+        () => {
+          setActiveCell([colIndex, rowIndex]);
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_ENTER_COMMAND,
+        (payload) => {
+          payload == null ? void 0 : payload.preventDefault();
+          const nextCell = (payload == null ? void 0 : payload.shiftKey) ? [colIndex, rowIndex - 1] : [colIndex, rowIndex + 1];
+          saveAndFocus(nextCell);
+          return true;
+        },
+        COMMAND_PRIORITY_CRITICAL
+      ),
+      editor.registerCommand(
+        BLUR_COMMAND,
+        (payload) => {
+          const relatedTarget = payload.relatedTarget;
+          if (isPartOftheEditorUI(relatedTarget, rootEditor.getRootElement())) {
+            return false;
+          }
+          saveAndFocus(null);
+          return true;
+        },
+        COMMAND_PRIORITY_CRITICAL
+      )
+    );
+  }, [colIndex, editor, rootEditor, rowIndex, saveAndFocus, setActiveCell]);
+  React__default.useEffect(() => {
+    focus && (editor == null ? void 0 : 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 }), /* @__PURE__ */ React__default.createElement(HistoryPlugin, null));
+};
+const ColumnEditor = ({
+  parentEditor,
+  highlightedCoordinates,
+  align,
+  lexicalTable,
+  colIndex,
+  setActiveCellWithBoundaries
+}) => {
+  const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
+  const insertColumnAt = React__default.useCallback(
+    (colIndex2) => {
+      parentEditor.update(() => {
+        lexicalTable.insertColumnAt(colIndex2);
+      });
+      setActiveCellWithBoundaries([colIndex2, 0]);
+    },
+    [parentEditor, lexicalTable, setActiveCellWithBoundaries]
+  );
+  const deleteColumnAt = React__default.useCallback(
+    (colIndex2) => {
+      parentEditor.update(() => {
+        lexicalTable.deleteColumnAt(colIndex2);
+      });
+    },
+    [parentEditor, lexicalTable]
+  );
+  const setColumnAlign = React__default.useCallback(
+    (colIndex2, align2) => {
+      parentEditor.update(() => {
+        lexicalTable.setColumnAlign(colIndex2, align2);
+      });
+    },
+    [parentEditor, lexicalTable]
+  );
+  return /* @__PURE__ */ React__default.createElement(RadixPopover.Root, null, /* @__PURE__ */ React__default.createElement(
+    RadixPopover.PopoverTrigger,
+    {
+      className: styles.tableColumnEditorTrigger,
+      "data-active": highlightedCoordinates[0] === colIndex + 1,
+      title: "Column menu"
+    },
+    /* @__PURE__ */ React__default.createElement(MoreHorizIcon, null)
+  ), /* @__PURE__ */ React__default.createElement(RadixPopover.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(
+    RadixPopover.PopoverContent,
+    {
+      className: classNames(styles.tableColumnEditorPopoverContent),
+      onOpenAutoFocus: (e) => e.preventDefault(),
+      sideOffset: 5,
+      side: "top"
+    },
+    /* @__PURE__ */ React__default.createElement(RadixToolbar.Root, { className: styles.tableColumnEditorToolbar }, /* @__PURE__ */ React__default.createElement(
+      RadixToolbar.ToggleGroup,
+      {
+        className: styles.toggleGroupRoot,
+        onValueChange: (value) => {
+          setColumnAlign(colIndex, value);
+        },
+        value: align || "left",
+        type: "single",
+        "aria-label": "Text alignment"
+      },
+      /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { value: "left", title: "Align left" }, /* @__PURE__ */ React__default.createElement(AlignLeftIcon, null)),
+      /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { value: "center", title: "Align center" }, /* @__PURE__ */ React__default.createElement(AlignCenterIcon, null)),
+      /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { value: "right", title: "Align right" }, /* @__PURE__ */ React__default.createElement(AlignRightIcon, null))
+    ), /* @__PURE__ */ React__default.createElement(RadixToolbar.Separator, null), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: insertColumnAt.bind(null, colIndex), title: "Insert a column to the left of this one" }, /* @__PURE__ */ React__default.createElement(InsertColLeftIcon, null)), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: insertColumnAt.bind(null, colIndex + 1), title: "Insert a column to the right of this one" }, /* @__PURE__ */ React__default.createElement(InsertColRightIcon, null)), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: deleteColumnAt.bind(null, colIndex), title: "Delete this column" }, /* @__PURE__ */ React__default.createElement(DeleteSmallIcon, null)))
+  )));
+};
+const RowEditor = ({
+  parentEditor,
+  highlightedCoordinates,
+  lexicalTable,
+  rowIndex,
+  setActiveCellWithBoundaries
+}) => {
+  const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
+  const insertRowAt = React__default.useCallback(
+    (rowIndex2) => {
+      parentEditor.update(() => {
+        lexicalTable.insertRowAt(rowIndex2);
+      });
+      setActiveCellWithBoundaries([0, rowIndex2]);
+    },
+    [parentEditor, lexicalTable, setActiveCellWithBoundaries]
+  );
+  const deleteRowAt = React__default.useCallback(
+    (rowIndex2) => {
+      parentEditor.update(() => {
+        lexicalTable.deleteRowAt(rowIndex2);
+      });
+    },
+    [parentEditor, lexicalTable]
+  );
+  return /* @__PURE__ */ React__default.createElement(RadixPopover.Root, null, /* @__PURE__ */ React__default.createElement(RadixPopover.PopoverTrigger, { className: styles.tableColumnEditorTrigger, "data-active": highlightedCoordinates[1] === rowIndex }, /* @__PURE__ */ React__default.createElement(MoreHorizIcon, null)), /* @__PURE__ */ React__default.createElement(RadixPopover.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(
+    RadixPopover.PopoverContent,
+    {
+      className: classNames(styles.tableColumnEditorPopoverContent),
+      onOpenAutoFocus: (e) => e.preventDefault(),
+      sideOffset: 5,
+      side: "bottom"
+    },
+    /* @__PURE__ */ React__default.createElement(RadixToolbar.Root, { className: styles.tableColumnEditorToolbar }, /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: insertRowAt.bind(null, rowIndex), title: "Insert a row above this one" }, /* @__PURE__ */ React__default.createElement(InsertRowAboveIcon, null)), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: insertRowAt.bind(null, rowIndex + 1), title: "Insert a row below this one" }, /* @__PURE__ */ React__default.createElement(InsertRowBelowIcon, null)), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: deleteRowAt.bind(null, rowIndex), title: "Delete this row" }, /* @__PURE__ */ React__default.createElement(DeleteSmallIcon, null)))
+  )));
+};
+export {
+  TableEditor
+};

package/dist/plugins/table/TableNode.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+import { DecoratorNode, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import * as Mdast from 'mdast';
+/**
+ * A serialized representation of a {@link TableNode}.
+ */
+export type SerializedTableNode = Spread<{
+    mdastNode: Mdast.Table;
+}, SerializedLexicalNode>;
+type CoordinatesSubscription = (coords: [colIndex: number, rowIndex: number]) => void;
+/**
+ * A lexical node that represents a table, with features specific to the markdown tables.
+ * Use {@link "$createTableNode"} to construct one.
+ */
+export declare class TableNode extends DecoratorNode<JSX.Element> {
+    __mdastNode: Mdast.Table;
+    focusEmitter: {
+        publish: (coords: [colIndex: number, rowIndex: number]) => void;
+        subscribe: (cb: CoordinatesSubscription) => void;
+    };
+    static getType(): string;
+    static clone(node: TableNode): TableNode;
+    static importJSON(serializedNode: SerializedTableNode): TableNode;
+    exportJSON(): SerializedTableNode;
+    getMdastNode(): Mdast.Table;
+    getRowCount(): number;
+    getColCount(): number;
+    constructor(mdastNode?: Mdast.Table, key?: NodeKey);
+    createDOM(): HTMLElement;
+    updateDOM(): false;
+    updateCellContents(colIndex: number, rowIndex: number, children: Mdast.PhrasingContent[]): void;
+    insertColumnAt(colIndex: number): void;
+    deleteColumnAt(colIndex: number): void;
+    insertRowAt(y: number): void;
+    deleteRowAt(rowIndex: number): void;
+    addRowToBottom(): void;
+    addColumnToRight(): void;
+    setColumnAlign(colIndex: number, align: Mdast.AlignType): void;
+    decorate(parentEditor: LexicalEditor): JSX.Element;
+    select(coords?: [colIndex: number, rowIndex: number]): void;
+    isInline(): false;
+}
+/**
+ * Retruns true if the given node is a {@link TableNode}.
+ */
+export declare function $isTableNode(node: LexicalNode | null | undefined): node is TableNode;
+/**
+ * Creates a {@link TableNode}
+ * @param mdastNode - The mdast node to create the {@link TableNode} from.
+ */
+export declare function $createTableNode(mdastNode: Mdast.Table): TableNode;
+export {};