@mdxeditor/editor 0.4.2 → 0.5.0

package/dist/TableEditor-0aedb943.js

@@ -0,0 +1,428 @@
+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 { $createParagraphNode, createEditor, KEY_TAB_COMMAND, COMMAND_PRIORITY_CRITICAL, KEY_ENTER_COMMAND, BLUR_COMMAND, $getRoot } from "lexical";
+import * as React from "react";
+import React__default, { useEffect } from "react";
+import { s as styles, u as useEmitterValues, t as theme, i as importMdastTreeToLexical, S as SharedHistoryPlugin, e as exportLexicalTreeToMdast } from "./index-11db5fbf.js";
+import { toHast } from "mdast-util-to-hast";
+import { raw } from "hast-util-raw";
+import { sanitize } from "hast-util-sanitize";
+import { toHtml } from "hast-util-to-html";
+import * as RadixPopover from "@radix-ui/react-popover";
+import classNames from "classnames";
+import * as RadixToolbar from "@radix-ui/react-toolbar";
+import "@lexical/react/LexicalComposer";
+import "@lexical/react/LexicalHorizontalRulePlugin";
+import "@lexical/react/LexicalLinkPlugin";
+import "@lexical/react/LexicalListPlugin";
+import "@lexical/react/LexicalTabIndentationPlugin";
+import "@lexical/code";
+import "@lexical/link";
+import "@lexical/list";
+import "@lexical/react/LexicalHorizontalRuleNode";
+import "@lexical/rich-text";
+import "mdast-util-directive";
+import "mdast-util-from-markdown";
+import "mdast-util-frontmatter";
+import "mdast-util-gfm-table";
+import "mdast-util-mdx";
+import "micromark-extension-directive";
+import "micromark-extension-frontmatter";
+import "micromark-extension-gfm-table";
+import "micromark-extension-mdxjs";
+import "@lexical/utils";
+import "@lexical/react/LexicalComposerContext";
+import "@lexical/selection";
+import "@lexical/react/LexicalHistoryPlugin";
+import "mdast-util-to-markdown";
+import "@radix-ui/react-tooltip";
+import "downshift";
+import "@lexical/markdown";
+import "@lexical/react/LexicalMarkdownShortcutPlugin";
+import "@codemirror/lang-markdown";
+import "@codesandbox/sandpack-react";
+import "react-diff-view";
+import "unidiff";
+import "@radix-ui/react-select";
+import "@radix-ui/react-dialog";
+const MarkdownAstRenderer = (props) => {
+  const root = { type: "root", children: props.mdastChildren };
+  const hast = raw(toHast(root, { allowDangerousHtml: true }));
+  const safeHast = sanitize(hast);
+  const html = toHtml(safeHast);
+  return /* @__PURE__ */ React__default.createElement("span", { dangerouslySetInnerHTML: { __html: html || " " } });
+};
+const SvgMoreHoriz = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 24, height: 24, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
+  maskType: "alpha"
+} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h24v24H0z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z" })));
+const MoreHorizIcon = SvgMoreHoriz;
+const SvgFormatAlignLeft = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
+  maskType: "alpha"
+} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h20v20H0z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M3 17v-1.5h14V17H3Zm0-3.125v-1.5h10v1.5H3Zm0-3.125v-1.5h14v1.5H3Zm0-3.125v-1.5h10v1.5H3ZM3 4.5V3h14v1.5H3Z" })));
+const AlignLeftIcon = SvgFormatAlignLeft;
+const SvgFormatAlignCenter = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
+  maskType: "alpha"
+} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h20v20H0z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M3 17v-1.5h14V17H3Zm3-3.125v-1.5h8v1.5H6ZM3 10.75v-1.5h14v1.5H3Zm3-3.125v-1.5h8v1.5H6ZM3 4.5V3h14v1.5H3Z" })));
+const AlignCenterIcon = SvgFormatAlignCenter;
+const SvgFormatAlignRight = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
+  maskType: "alpha"
+} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h20v20H0z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M3 17v-1.5h14V17H3Zm4-3.125v-1.5h10v1.5H7ZM3 10.75v-1.5h14v1.5H3Zm4-3.125v-1.5h10v1.5H7ZM3 4.5V3h14v1.5H3Z" })));
+const AlignRightIcon = SvgFormatAlignRight;
+const SvgInsertColLeft = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
+  maskType: "alpha"
+} }, /* @__PURE__ */ React.createElement("path", { d: "M0 20h20v20H0z", transform: "rotate(-90 0 20)" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M15.75 4.5H13v2.75h-1.5V4.5H8.75V3h2.75V.25H13V3h2.75v1.5ZM13 17H5V3h2.25v1.5H6.5v11h5V8.75H13V17Z" })));
+const InsertColLeftIcon = SvgInsertColLeft;
+const SvgInsertColRight = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
+  maskType: "alpha"
+} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h20v20H0z", transform: "matrix(0 -1 -1 0 20 20)" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M4.25 4.5H7v2.75h1.5V4.5h2.75V3H8.5V.25H7V3H4.25v1.5ZM7 17h8V3h-2.25v1.5h.75v11h-5V8.75H7V17Z" })));
+const InsertColRightIcon = SvgInsertColRight;
+const SvgDeleteSmall = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
+  maskType: "alpha"
+} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h20v20H0z" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M6.5 17a1.45 1.45 0 0 1-1.06-.44A1.445 1.445 0 0 1 5 15.5v-10H4V4h4V3h4v1h4v1.5h-1v9.991c0 .423-.147.78-.44 1.072A1.45 1.45 0 0 1 13.5 17h-7Zm7-11.5h-7v10h7v-10ZM8 14h1.5V7H8v7Zm2.5 0H12V7h-1.5v7Z" })));
+const DeleteSmallIcon = SvgDeleteSmall;
+const SvgInsertRowAbove = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
+  maskType: "alpha"
+} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h20v20H0z", transform: "matrix(-1 0 0 1 20 0)" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M4.5 16.75V14h2.75v-1.5H4.5V9.75H3v2.75H.25V14H3v2.75h1.5ZM17 14V6H3v2.25h1.5V7.5h11v5H8.75V14H17Z" })));
+const InsertRowAboveIcon = SvgInsertRowAbove;
+const SvgInsertRowBelow = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
+  maskType: "alpha"
+} }, /* @__PURE__ */ React.createElement("path", { d: "M20 20h20v20H20z", transform: "rotate(180 20 20)" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M4.5 3.25V6h2.75v1.5H4.5v2.75H3V7.5H.25V6H3V3.25h1.5ZM17 6v8H3v-2.25h1.5v.75h11v-5H8.75V6H17Z" })));
+const InsertRowBelowIcon = SvgInsertRowBelow;
+const SvgAddRow = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
+  maskType: "alpha"
+} }, /* @__PURE__ */ React.createElement("path", { d: "M20 20h20v20H20z", transform: "rotate(180 20 20)" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M10.5 3.25V6h2.75v1.5H10.5v2.75H9V7.5H6.25V6H9V3.25h1.5ZM17 6v8H3V6h2.5v1.5h-1v5h11v-5H14V6h3Z" })));
+const AddRowIcon = SvgAddRow;
+const SvgAddColumn = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "currentColor", viewBox: "0 0 20 20", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "a", width: 20, height: 20, x: 0, y: 0, maskUnits: "userSpaceOnUse", style: {
+  maskType: "alpha"
+} }, /* @__PURE__ */ React.createElement("path", { d: "M0 0h20v20H0z", transform: "matrix(0 -1 -1 0 20 20)" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "M3.25 10.5H6v2.75h1.5V10.5h2.75V9H7.5V6.25H6V9H3.25v1.5ZM6 17h8V3H6v2.5h1.5v-1h5v11h-5V14H6v3Z" })));
+const AddColumnIcon = SvgAddColumn;
+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]
+  );
+  useEffect(() => {
+    lexicalTable.focusEmitter.subscribe(setActiveCellWithBoundaries);
+  }, [lexicalTable, setActiveCellWithBoundaries]);
+  const addRowToBottom = React__default.useCallback(() => {
+    parentEditor.update(() => {
+      lexicalTable.addRowToBottom();
+      setActiveCell([0, lexicalTable.getRowCount()]);
+    });
+  }, [parentEditor, lexicalTable]);
+  const addColumnToRight = React__default.useCallback(() => {
+    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,
+      title: "Delete table",
+      onClick: () => {
+        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,
+          ...{ rowIndex, colIndex, lexicalTable, parentEditor, activeCellTuple: [activeCell, setActiveCellWithBoundaries] }
+        }
+      );
+    }), rowIndex === 0 && /* @__PURE__ */ React__default.createElement("th", { rowSpan: lexicalTable.getRowCount(), "data-tool-cell": true }, /* @__PURE__ */ React__default.createElement("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", { 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.activeCellTuple;
+  const isActive = 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]);
+      }
+    },
+    isActive ? /* @__PURE__ */ React__default.createElement(CellEditor, { ...props }) : /* @__PURE__ */ React__default.createElement(MarkdownAstRenderer, { mdastChildren: props.contents })
+  );
+};
+const CellEditor = ({ activeCellTuple, parentEditor, lexicalTable, contents, colIndex, rowIndex }) => {
+  const [markdownParseOptions, lexicalConvertOptions, jsxComponentDescriptors, lexicalNodes] = useEmitterValues(
+    "markdownParseOptions",
+    "lexicalConvertOptions",
+    "jsxComponentDescriptors",
+    "lexicalNodes"
+  );
+  const [editor] = React__default.useState(() => {
+    let disposed = false;
+    const editor2 = createEditor({
+      nodes: lexicalNodes,
+      theme
+    });
+    function saveAndDispose(nextCell) {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      editor2.getEditorState().read(() => {
+        const mdast = exportLexicalTreeToMdast({
+          root: $getRoot(),
+          jsxComponentDescriptors,
+          ...lexicalConvertOptions
+        });
+        parentEditor.update(() => {
+          lexicalTable.updateCellContents(colIndex, rowIndex, mdast.children[0].children);
+        });
+      });
+      activeCellTuple[1](nextCell);
+    }
+    editor2.registerCommand(
+      KEY_TAB_COMMAND,
+      (payload) => {
+        payload.preventDefault();
+        const nextCell = payload.shiftKey ? [colIndex - 1, rowIndex] : [colIndex + 1, rowIndex];
+        saveAndDispose(nextCell);
+        return true;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+    editor2.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];
+        saveAndDispose(nextCell);
+        return true;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+    editor2.registerCommand(
+      BLUR_COMMAND,
+      (payload) => {
+        const relatedTarget = payload.relatedTarget;
+        if ((relatedTarget == null ? void 0 : relatedTarget.dataset["editorDialog"]) !== void 0) {
+          return false;
+        }
+        saveAndDispose(null);
+        return true;
+      },
+      COMMAND_PRIORITY_CRITICAL
+    );
+    editor2.registerRootListener((element) => {
+      if (element) {
+        editor2.focus();
+      }
+    });
+    editor2.update(() => {
+      importMdastTreeToLexical({
+        root: $getRoot(),
+        mdastRoot: { type: "root", children: [{ type: "paragraph", children: contents }] },
+        visitors: markdownParseOptions.visitors
+      });
+    });
+    return editor2;
+  });
+  return /* @__PURE__ */ React__default.createElement(LexicalNestedComposer, { initialEditor: editor }, /* @__PURE__ */ React__default.createElement(RichTextPlugin, { contentEditable: /* @__PURE__ */ React__default.createElement(ContentEditable, { autoFocus: true }), placeholder: /* @__PURE__ */ React__default.createElement("div", null), ErrorBoundary: LexicalErrorBoundary }), /* @__PURE__ */ React__default.createElement(SharedHistoryPlugin, null));
+};
+const ColumnEditor = ({
+  parentEditor,
+  highlightedCoordinates,
+  align,
+  lexicalTable,
+  colIndex,
+  setActiveCellWithBoundaries
+}) => {
+  const [editorRootElementRef] = 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] = 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/TableEditor-d0c5800f.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@lexical/react/LexicalContentEditable"),t=require("@lexical/react/LexicalErrorBoundary"),l=require("@lexical/react/LexicalNestedComposer"),r=require("@lexical/react/LexicalRichTextPlugin"),a=require("lexical"),n=require("react"),i=require("./index-731c8e58.cjs"),o=require("mdast-util-to-hast"),c=require("hast-util-raw"),s=require("hast-util-sanitize"),m=require("hast-util-to-html"),u=require("@radix-ui/react-popover"),h=require("classnames"),d=require("@radix-ui/react-toolbar");function g(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const l in e)if("default"!==l){const r=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,r.get?r:{enumerable:!0,get:()=>e[l]})}return t.default=e,Object.freeze(t)}require("@lexical/react/LexicalComposer"),require("@lexical/react/LexicalHorizontalRulePlugin"),require("@lexical/react/LexicalLinkPlugin"),require("@lexical/react/LexicalListPlugin"),require("@lexical/react/LexicalTabIndentationPlugin"),require("@lexical/code"),require("@lexical/link"),require("@lexical/list"),require("@lexical/react/LexicalHorizontalRuleNode"),require("@lexical/rich-text"),require("mdast-util-directive"),require("mdast-util-from-markdown"),require("mdast-util-frontmatter"),require("mdast-util-gfm-table"),require("mdast-util-mdx"),require("micromark-extension-directive"),require("micromark-extension-frontmatter"),require("micromark-extension-gfm-table"),require("micromark-extension-mdxjs"),require("@lexical/utils"),require("@lexical/react/LexicalComposerContext"),require("@lexical/selection"),require("@lexical/react/LexicalHistoryPlugin"),require("mdast-util-to-markdown"),require("@radix-ui/react-tooltip"),require("downshift"),require("@lexical/markdown"),require("@lexical/react/LexicalMarkdownShortcutPlugin"),require("@codemirror/lang-markdown"),require("@codesandbox/sandpack-react"),require("react-diff-view"),require("unidiff"),require("@radix-ui/react-select"),require("@radix-ui/react-dialog");const E=g(n),v=g(u),p=g(d),x=e=>{const t={type:"root",children:e.mdastChildren},l=c.raw(o.toHast(t,{allowDangerousHtml:!0})),r=s.sanitize(l),a=m.toHtml(r);return n.createElement("span",{dangerouslySetInnerHTML:{__html:a||"&nbsp;"}})},w=e=>E.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24",...e},E.createElement("mask",{id:"a",width:24,height:24,x:0,y:0,maskUnits:"userSpaceOnUse",style:{maskType:"alpha"}},E.createElement("path",{d:"M0 0h24v24H0z"})),E.createElement("g",{mask:"url(#a)"},E.createElement("path",{d:"M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"}))),C=e=>E.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 0 20 20",...e},E.createElement("mask",{id:"a",width:20,height:20,x:0,y:0,maskUnits:"userSpaceOnUse",style:{maskType:"alpha"}},E.createElement("path",{d:"M0 0h20v20H0z"})),E.createElement("g",{mask:"url(#a)"},E.createElement("path",{d:"M3 17v-1.5h14V17H3Zm0-3.125v-1.5h10v1.5H3Zm0-3.125v-1.5h14v1.5H3Zm0-3.125v-1.5h10v1.5H3ZM3 4.5V3h14v1.5H3Z"}))),k=e=>E.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 0 20 20",...e},E.createElement("mask",{id:"a",width:20,height:20,x:0,y:0,maskUnits:"userSpaceOnUse",style:{maskType:"alpha"}},E.createElement("path",{d:"M0 0h20v20H0z"})),E.createElement("g",{mask:"url(#a)"},E.createElement("path",{d:"M3 17v-1.5h14V17H3Zm3-3.125v-1.5h8v1.5H6ZM3 10.75v-1.5h14v1.5H3Zm3-3.125v-1.5h8v1.5H6ZM3 4.5V3h14v1.5H3Z"}))),f=e=>E.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 0 20 20",...e},E.createElement("mask",{id:"a",width:20,height:20,x:0,y:0,maskUnits:"userSpaceOnUse",style:{maskType:"alpha"}},E.createElement("path",{d:"M0 0h20v20H0z"})),E.createElement("g",{mask:"url(#a)"},E.createElement("path",{d:"M3 17v-1.5h14V17H3Zm4-3.125v-1.5h10v1.5H7ZM3 10.75v-1.5h14v1.5H3Zm4-3.125v-1.5h10v1.5H7ZM3 4.5V3h14v1.5H3Z"}))),H=e=>E.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 0 20 20",...e},E.createElement("mask",{id:"a",width:20,height:20,x:0,y:0,maskUnits:"userSpaceOnUse",style:{maskType:"alpha"}},E.createElement("path",{d:"M0 20h20v20H0z",transform:"rotate(-90 0 20)"})),E.createElement("g",{mask:"url(#a)"},E.createElement("path",{d:"M15.75 4.5H13v2.75h-1.5V4.5H8.75V3h2.75V.25H13V3h2.75v1.5ZM13 17H5V3h2.25v1.5H6.5v11h5V8.75H13V17Z"}))),y=e=>E.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 0 20 20",...e},E.createElement("mask",{id:"a",width:20,height:20,x:0,y:0,maskUnits:"userSpaceOnUse",style:{maskType:"alpha"}},E.createElement("path",{d:"M0 0h20v20H0z",transform:"matrix(0 -1 -1 0 20 20)"})),E.createElement("g",{mask:"url(#a)"},E.createElement("path",{d:"M4.25 4.5H7v2.75h1.5V4.5h2.75V3H8.5V.25H7V3H4.25v1.5ZM7 17h8V3h-2.25v1.5h.75v11h-5V8.75H7V17Z"}))),b=e=>E.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 0 20 20",...e},E.createElement("mask",{id:"a",width:20,height:20,x:0,y:0,maskUnits:"userSpaceOnUse",style:{maskType:"alpha"}},E.createElement("path",{d:"M0 0h20v20H0z"})),E.createElement("g",{mask:"url(#a)"},E.createElement("path",{d:"M6.5 17a1.45 1.45 0 0 1-1.06-.44A1.445 1.445 0 0 1 5 15.5v-10H4V4h4V3h4v1h4v1.5h-1v9.991c0 .423-.147.78-.44 1.072A1.45 1.45 0 0 1 13.5 17h-7Zm7-11.5h-7v10h7v-10ZM8 14h1.5V7H8v7Zm2.5 0H12V7h-1.5v7Z"}))),T=e=>E.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 0 20 20",...e},E.createElement("mask",{id:"a",width:20,height:20,x:0,y:0,maskUnits:"userSpaceOnUse",style:{maskType:"alpha"}},E.createElement("path",{d:"M0 0h20v20H0z",transform:"matrix(-1 0 0 1 20 0)"})),E.createElement("g",{mask:"url(#a)"},E.createElement("path",{d:"M4.5 16.75V14h2.75v-1.5H4.5V9.75H3v2.75H.25V14H3v2.75h1.5ZM17 14V6H3v2.25h1.5V7.5h11v5H8.75V14H17Z"}))),M=e=>E.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 0 20 20",...e},E.createElement("mask",{id:"a",width:20,height:20,x:0,y:0,maskUnits:"userSpaceOnUse",style:{maskType:"alpha"}},E.createElement("path",{d:"M20 20h20v20H20z",transform:"rotate(180 20 20)"})),E.createElement("g",{mask:"url(#a)"},E.createElement("path",{d:"M4.5 3.25V6h2.75v1.5H4.5v2.75H3V7.5H.25V6H3V3.25h1.5ZM17 6v8H3v-2.25h1.5v.75h11v-5H8.75V6H17Z"}))),V=e=>E.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 0 20 20",...e},E.createElement("mask",{id:"a",width:20,height:20,x:0,y:0,maskUnits:"userSpaceOnUse",style:{maskType:"alpha"}},E.createElement("path",{d:"M20 20h20v20H20z",transform:"rotate(180 20 20)"})),E.createElement("g",{mask:"url(#a)"},E.createElement("path",{d:"M10.5 3.25V6h2.75v1.5H10.5v2.75H9V7.5H6.25V6H9V3.25h1.5ZM17 6v8H3V6h2.5v1.5h-1v5h11v-5H14V6h3Z"}))),q=e=>E.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"currentColor",viewBox:"0 0 20 20",...e},E.createElement("mask",{id:"a",width:20,height:20,x:0,y:0,maskUnits:"userSpaceOnUse",style:{maskType:"alpha"}},E.createElement("path",{d:"M0 0h20v20H0z",transform:"matrix(0 -1 -1 0 20 20)"})),E.createElement("g",{mask:"url(#a)"},E.createElement("path",{d:"M3.25 10.5H6v2.75h1.5V10.5h2.75V9H7.5V6.25H6V9H3.25v1.5ZM6 17h8V3H6v2.5h1.5v-1h5v11h-5V14H6v3Z"}))),A={center:i.styles.centeredCell,left:i.styles.leftAlignedCell,right:i.styles.rightAlignedCell},O=({align:e,...t})=>{const[l,r]=t.activeCellTuple,a=l&&l[0]===t.colIndex&&l[1]===t.rowIndex,i=A[e||"left"];return n.createElement("td",{className:i,"data-active":a,onClick:()=>{r([t.colIndex,t.rowIndex])}},a?n.createElement(R,{...t}):n.createElement(x,{mdastChildren:t.contents}))},R=({activeCellTuple:o,parentEditor:c,lexicalTable:s,contents:m,colIndex:u,rowIndex:h})=>{const[d,g,E,v]=i.useEmitterValues("markdownParseOptions","lexicalConvertOptions","jsxComponentDescriptors","lexicalNodes"),[p]=n.useState((()=>{let e=!1;const t=a.createEditor({nodes:v,theme:i.theme});function l(l){e||(e=!0,t.getEditorState().read((()=>{const e=i.exportLexicalTreeToMdast({root:a.$getRoot(),jsxComponentDescriptors:E,...g});c.update((()=>{s.updateCellContents(u,h,e.children[0].children)}))})),o[1](l))}return t.registerCommand(a.KEY_TAB_COMMAND,(e=>{e.preventDefault();return l(e.shiftKey?[u-1,h]:[u+1,h]),!0}),a.COMMAND_PRIORITY_CRITICAL),t.registerCommand(a.KEY_ENTER_COMMAND,(e=>{null==e||e.preventDefault();return l((null==e?void 0:e.shiftKey)?[u,h-1]:[u,h+1]),!0}),a.COMMAND_PRIORITY_CRITICAL),t.registerCommand(a.BLUR_COMMAND,(e=>{const t=e.relatedTarget;return void 0===(null==t?void 0:t.dataset.editorDialog)&&(l(null),!0)}),a.COMMAND_PRIORITY_CRITICAL),t.registerRootListener((e=>{e&&t.focus()})),t.update((()=>{i.importMdastTreeToLexical({root:a.$getRoot(),mdastRoot:{type:"root",children:[{type:"paragraph",children:m}]},visitors:d.visitors})})),t}));return n.createElement(l.LexicalNestedComposer,{initialEditor:p},n.createElement(r.RichTextPlugin,{contentEditable:n.createElement(e.ContentEditable,{autoFocus:!0}),placeholder:n.createElement("div",null),ErrorBoundary:t}),n.createElement(i.SharedHistoryPlugin,null))},N=({parentEditor:e,highlightedCoordinates:t,align:l,lexicalTable:r,colIndex:a,setActiveCellWithBoundaries:o})=>{const[c]=i.useEmitterValues("editorRootElementRef"),s=n.useCallback((t=>{e.update((()=>{r.insertColumnAt(t)})),o([t,0])}),[e,r,o]),m=n.useCallback((t=>{e.update((()=>{r.deleteColumnAt(t)}))}),[e,r]),u=n.useCallback(((t,l)=>{e.update((()=>{r.setColumnAlign(t,l)}))}),[e,r]);return n.createElement(v.Root,null,n.createElement(v.PopoverTrigger,{className:i.styles.tableColumnEditorTrigger,"data-active":t[0]===a+1,title:"Column menu"},n.createElement(w,null)),n.createElement(v.Portal,{container:null==c?void 0:c.current},n.createElement(v.PopoverContent,{className:h(i.styles.tableColumnEditorPopoverContent),onOpenAutoFocus:e=>e.preventDefault(),sideOffset:5,side:"top"},n.createElement(p.Root,{className:i.styles.tableColumnEditorToolbar},n.createElement(p.ToggleGroup,{className:i.styles.toggleGroupRoot,onValueChange:e=>{u(a,e)},value:l||"left",type:"single","aria-label":"Text alignment"},n.createElement(p.ToggleItem,{value:"left",title:"Align left"},n.createElement(C,null)),n.createElement(p.ToggleItem,{value:"center",title:"Align center"},n.createElement(k,null)),n.createElement(p.ToggleItem,{value:"right",title:"Align right"},n.createElement(f,null))),n.createElement(p.Separator,null),n.createElement(p.Button,{onClick:s.bind(null,a),title:"Insert a column to the left of this one"},n.createElement(H,null)),n.createElement(p.Button,{onClick:s.bind(null,a+1),title:"Insert a column to the right of this one"},n.createElement(y,null)),n.createElement(p.Button,{onClick:m.bind(null,a),title:"Delete this column"},n.createElement(b,null))))))},Z=({parentEditor:e,highlightedCoordinates:t,lexicalTable:l,rowIndex:r,setActiveCellWithBoundaries:a})=>{const[o]=i.useEmitterValues("editorRootElementRef"),c=n.useCallback((t=>{e.update((()=>{l.insertRowAt(t)})),a([0,t])}),[e,l,a]),s=n.useCallback((t=>{e.update((()=>{l.deleteRowAt(t)}))}),[e,l]);return n.createElement(v.Root,null,n.createElement(v.PopoverTrigger,{className:i.styles.tableColumnEditorTrigger,"data-active":t[1]===r},n.createElement(w,null)),n.createElement(v.Portal,{container:null==o?void 0:o.current},n.createElement(v.PopoverContent,{className:h(i.styles.tableColumnEditorPopoverContent),onOpenAutoFocus:e=>e.preventDefault(),sideOffset:5,side:"bottom"},n.createElement(p.Root,{className:i.styles.tableColumnEditorToolbar},n.createElement(p.Button,{onClick:c.bind(null,r),title:"Insert a row above this one"},n.createElement(T,null)),n.createElement(p.Button,{onClick:c.bind(null,r+1),title:"Insert a row below this one"},n.createElement(M,null)),n.createElement(p.Button,{onClick:s.bind(null,r),title:"Delete this row"},n.createElement(b,null))))))};exports.TableEditor=({mdastNode:e,parentEditor:t,lexicalTable:l})=>{const[r,o]=n.useState(null),c=n.useCallback((e=>{const r=l.getColCount();if(null===e)return void o(null);let[n,i]=e;return n>r-1&&(n=0,i++),n<0&&(n=r-1,i-=1),i>l.getRowCount()-1?(o(null),void t.update((()=>{if(l.getLatest().getNextSibling())l.getLatest().selectNext();else{const e=a.$createParagraphNode();l.insertAfter(e),e.select()}}))):i<0?(o(null),void t.update((()=>{l.getLatest().selectPrevious()}))):void o([n,i])}),[l,t]);n.useEffect((()=>{l.focusEmitter.subscribe(c)}),[l,c]);const s=n.useCallback((()=>{t.update((()=>{l.addRowToBottom(),o([0,l.getRowCount()])}))}),[t,l]),m=n.useCallback((()=>{t.update((()=>{l.addColumnToRight(),o([l.getColCount(),0])}))}),[t,l]),[u,h]=n.useState([-1,-1]),d=n.useCallback((e=>{let t=e.target;for(;t&&!["TH","TD"].includes(t.tagName);){if(t===e.currentTarget)return;t=t.parentElement}if(null===t)return;const l=t.parentElement,r="TFOOT"===l.parentElement.tagName?-1:Array.from(l.children).indexOf(t),a="TH"===t.tagName?-1:Array.from(l.parentElement.children).indexOf(l);h([r,a])}),[]);return n.createElement("table",{className:i.styles.tableEditor,onMouseOver:d,onMouseLeave:()=>h([-1,-1])},n.createElement("colgroup",null,n.createElement("col",null),Array.from({length:e.children[0].children.length},((t,l)=>{const r=(e.align||[])[l]||"left",a=A[r];return n.createElement("col",{key:l,className:a})})),n.createElement("col",null)),n.createElement("thead",null,n.createElement("tr",null,n.createElement("th",{className:i.styles.tableToolsColumn,"data-tool-cell":!0},n.createElement("button",{className:i.styles.iconButton,title:"Delete table",onClick:()=>{t.update((()=>{l.selectNext(),l.remove()}))}},n.createElement(b,null))),Array.from({length:e.children[0].children.length},((r,a)=>n.createElement("th",{key:a,"data-tool-cell":!0},n.createElement(N,{setActiveCellWithBoundaries:c,parentEditor:t,colIndex:a,highlightedCoordinates:u,lexicalTable:l,align:(e.align||[])[a]})))),n.createElement("th",{className:i.styles.tableToolsColumn}))),n.createElement("tbody",null,e.children.map(((a,o)=>n.createElement("tr",{key:o},n.createElement("td",{className:i.styles.toolCell,"data-tool-cell":!0},n.createElement(Z,{setActiveCellWithBoundaries:c,parentEditor:t,rowIndex:o,highlightedCoordinates:u,lexicalTable:l})),a.children.map(((a,i)=>{var s;return n.createElement(O,{align:null==(s=e.align)?void 0:s[i],key:i,contents:a.children,rowIndex:o,colIndex:i,lexicalTable:l,parentEditor:t,activeCellTuple:[r,c]})})),0===o&&n.createElement("th",{rowSpan:l.getRowCount(),"data-tool-cell":!0},n.createElement("button",{className:i.styles.addColumnButton,onClick:m},n.createElement(q,null))))))),n.createElement("tfoot",null,n.createElement("tr",null,n.createElement("th",null),n.createElement("th",{colSpan:l.getColCount()},n.createElement("button",{className:i.styles.addRowButton,onClick:s},n.createElement(V,null))),n.createElement("th",null))))};