@mdxeditor/editor 0.0.1 → 0.0.4-development

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/plugins/sandpack/useCodeMirrorRef.js

@@ -0,0 +1,96 @@
+import { $getNodeByKey, $createParagraphNode } from "lexical";
+import React__default from "react";
+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(() => {
+    setEditorInFocus({
+      editorType,
+      rootNode: lexicalNode
+    });
+  }, [editorType, lexicalNode, setEditorInFocus]);
+  const onKeyDownHandler = React__default.useCallback(
+    (e) => {
+      var _a, _b, _c, _d;
+      if (e.key === "ArrowDown") {
+        const state = (_b = (_a = codeMirrorRef == null ? void 0 : codeMirrorRef.current) == null ? void 0 : _a.getCodemirror()) == null ? void 0 : _b.state;
+        if (state) {
+          const docLength = state.doc.length;
+          const selectionEnd = state.selection.ranges[0].to;
+          if (docLength === selectionEnd) {
+            if (!atBottom.current) {
+              atBottom.current = true;
+            } else {
+              theEditor == null ? void 0 : theEditor.update(() => {
+                var _a2, _b2;
+                const node = $getNodeByKey(nodeKey);
+                const nextSibling = node.getNextSibling();
+                if (nextSibling) {
+                  (_b2 = (_a2 = codeMirrorRef == null ? void 0 : codeMirrorRef.current) == null ? void 0 : _a2.getCodemirror()) == null ? void 0 : _b2.contentDOM.blur();
+                  node.selectNext();
+                } else {
+                  node.insertAfter($createParagraphNode());
+                }
+              });
+              atBottom.current = false;
+            }
+          }
+        }
+      } else if (e.key === "ArrowUp") {
+        const state = (_d = (_c = codeMirrorRef == null ? void 0 : codeMirrorRef.current) == null ? void 0 : _c.getCodemirror()) == null ? void 0 : _d.state;
+        if (state) {
+          const selectionStart = state.selection.ranges[0].from;
+          if (selectionStart === 0) {
+            if (!atTop.current) {
+              atTop.current = true;
+            } else {
+              theEditor == null ? void 0 : theEditor.update(() => {
+                var _a2, _b2;
+                const node = $getNodeByKey(nodeKey);
+                const previousSibling = node.getPreviousSibling();
+                if (previousSibling) {
+                  (_b2 = (_a2 = codeMirrorRef == null ? void 0 : codeMirrorRef.current) == null ? void 0 : _a2.getCodemirror()) == null ? void 0 : _b2.contentDOM.blur();
+                  node.selectPrevious();
+                }
+              });
+              atTop.current = false;
+            }
+          }
+        }
+      } else if (e.key === "Enter") {
+        e.stopPropagation();
+      }
+    },
+    [theEditor, nodeKey]
+  );
+  React__default.useEffect(() => {
+    const codeMirror = codeMirrorRef.current;
+    setTimeout(() => {
+      var _a, _b, _c, _d;
+      (_b = (_a = codeMirror == null ? void 0 : codeMirror.getCodemirror()) == null ? void 0 : _a.contentDOM) == null ? void 0 : _b.addEventListener("focus", onFocusHandler);
+      (_d = (_c = codeMirror == null ? void 0 : codeMirror.getCodemirror()) == null ? void 0 : _c.contentDOM) == null ? void 0 : _d.addEventListener("keydown", onKeyDownHandler);
+    }, 100);
+    return () => {
+      var _a, _b;
+      (_a = codeMirror == null ? void 0 : codeMirror.getCodemirror()) == null ? void 0 : _a.contentDOM.removeEventListener("focus", onFocusHandler);
+      (_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
+};

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,388 @@
+import { ContentEditable } from "@lexical/react/LexicalContentEditable.js";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary.js";
+import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer.js";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin.js";
+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 { exportLexicalTreeToMdast } from "../../exportMarkdownFromLexical.js";
+import { importMdastTreeToLexical } from "../../importMarkdownToLexical.js";
+import { lexicalTheme } from "../../styles/lexicalTheme.js";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin.js";
+import { mergeRegister } from "@lexical/utils";
+import * as RadixToolbar from "@radix-ui/react-toolbar";
+import classNames from "classnames";
+import styles from "../../styles/ui.module.css.js";
+import { isPartOftheEditorUI } from "../../utils/isPartOftheEditorUI.js";
+import { uuidv4 } from "../../utils/uuid4.js";
+import { corePluginHooks } from "../core/index.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 [iconComponentFor, readOnly] = corePluginHooks.useEmitterValues("iconComponentFor", "readOnly");
+  const getCellKey = React__default.useMemo(() => {
+    const cellKeyMap = /* @__PURE__ */ new WeakMap();
+    return (cell) => {
+      if (!cellKeyMap.has(cell)) {
+        cellKeyMap.set(cell, uuidv4());
+      }
+      return cellKeyMap.get(cell);
+    };
+  }, []);
+  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)), readOnly || /* @__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();
+        });
+      }
+    },
+    iconComponentFor("delete_small")
+  )), 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 }, readOnly || /* @__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: getCellKey(mdastCell),
+          contents: mdastCell.children,
+          setActiveCell: setActiveCellWithBoundaries,
+          ...{
+            rowIndex,
+            colIndex,
+            lexicalTable,
+            parentEditor,
+            activeCell: readOnly ? [-1, -1] : activeCell
+          }
+        }
+      );
+    }), readOnly || 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 }, iconComponentFor("add_column"))));
+  })), readOnly || /* @__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 }, iconComponentFor("add_row"))), /* @__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 [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
+  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"
+    },
+    iconComponentFor("more_horiz")
+  ), /* @__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" }, iconComponentFor("format_align_left")),
+      /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { value: "center", title: "Align center" }, iconComponentFor("format_align_center")),
+      /* @__PURE__ */ React__default.createElement(RadixToolbar.ToggleItem, { value: "right", title: "Align right" }, iconComponentFor("format_align_right"))
+    ), /* @__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" }, iconComponentFor("insert_col_left")), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: insertColumnAt.bind(null, colIndex + 1), title: "Insert a column to the right of this one" }, iconComponentFor("insert_col_right")), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: deleteColumnAt.bind(null, colIndex), title: "Delete this column" }, iconComponentFor("delete_small"))),
+    /* @__PURE__ */ React__default.createElement(RadixPopover.Arrow, { className: styles.popoverArrow })
+  )));
+};
+const RowEditor = ({
+  parentEditor,
+  highlightedCoordinates,
+  lexicalTable,
+  rowIndex,
+  setActiveCellWithBoundaries
+}) => {
+  const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
+  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
+  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 }, iconComponentFor("more_horiz")), /* @__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" }, iconComponentFor("insert_row_above")), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: insertRowAt.bind(null, rowIndex + 1), title: "Insert a row below this one" }, iconComponentFor("insert_row_below")), /* @__PURE__ */ React__default.createElement(RadixToolbar.Button, { onClick: deleteRowAt.bind(null, rowIndex), title: "Delete this row" }, iconComponentFor("delete_small"))),
+    /* @__PURE__ */ React__default.createElement(RadixPopover.Arrow, { className: styles.popoverArrow })
+  )));
+};
+export {
+  TableEditor
+};