@nkzw/mdx-editor 0.1.0

package/dist/plugins/table/TableEditor.js

@@ -0,0 +1,527 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+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, COMMAND_PRIORITY_EDITOR } from "lexical";
+import React from "react";
+import { exportLexicalTreeToMdast } from "../../exportMarkdownFromLexical.js";
+import { importMdastTreeToLexical } from "../../importMarkdownToLexical.js";
+import { lexicalTheme } from "../../styles/lexicalTheme.js";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { mergeRegister } from "@lexical/utils";
+import * as RadixToolbar from "@radix-ui/react-toolbar";
+import classNames from "classnames";
+import { EditorIcon } from "../../EditorIcon.js";
+import styles from "../../styles/ui.module.css.js";
+import { isPartOftheEditorUI } from "../../utils/isPartOftheEditorUI.js";
+import { uuidv4 } from "../../utils/uuid4.js";
+import { readOnly$, useTranslation, editorRootElementRef$, importVisitors$, exportVisitors$, usedLexicalNodes$, jsxComponentDescriptors$, directiveDescriptors$, codeBlockEditorDescriptors$, defaultCodeBlockLanguage$, jsxIsAvailable$, rootEditor$, tableCellEditorChildren$, NESTED_EDITOR_UPDATED_COMMAND } from "../core/index.js";
+import { useCellValues } from "@mdxeditor/gurx";
+const getCellType = (rowIndex) => {
+  if (rowIndex === 0) {
+    return "th";
+  }
+  return "td";
+};
+const AlignToTailwindClassMap = {
+  center: styles.centeredCell,
+  left: styles.leftAlignedCell,
+  right: styles.rightAlignedCell
+};
+const TableEditor = ({ mdastNode, parentEditor, lexicalTable }) => {
+  const [activeCell, setActiveCell] = React.useState(null);
+  const [readOnly] = useCellValues(readOnly$);
+  const getCellKey = React.useMemo(() => {
+    return (cell) => {
+      cell.__cacheKey ??= uuidv4();
+      return cell.__cacheKey;
+    };
+  }, []);
+  const setActiveCellWithBoundaries = React.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.useEffect(() => {
+    lexicalTable.focusEmitter.subscribe(setActiveCellWithBoundaries);
+  }, [lexicalTable, setActiveCellWithBoundaries]);
+  const addRowToBottom = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      parentEditor.update(() => {
+        lexicalTable.addRowToBottom();
+        setActiveCell([0, lexicalTable.getRowCount()]);
+      });
+    },
+    [parentEditor, lexicalTable]
+  );
+  const addColumnToRight = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      parentEditor.update(() => {
+        lexicalTable.addColumnToRight();
+        setActiveCell([lexicalTable.getColCount(), 0]);
+      });
+    },
+    [parentEditor, lexicalTable]
+  );
+  const [highlightedCoordinates, setHighlightedCoordinates] = React.useState([-1, -1]);
+  const onTableMouseOver = React.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]);
+  }, []);
+  const t = useTranslation();
+  return /* @__PURE__ */ jsxs(
+    "table",
+    {
+      className: styles.tableEditor,
+      onMouseOver: onTableMouseOver,
+      onMouseLeave: () => {
+        setHighlightedCoordinates([-1, -1]);
+      },
+      children: [
+        /* @__PURE__ */ jsxs("colgroup", { children: [
+          readOnly ? null : /* @__PURE__ */ jsx("col", {}),
+          Array.from({ length: mdastNode.children[0].children.length }, (_, colIndex) => {
+            const align = mdastNode.align ?? [];
+            const currentColumnAlign = align[colIndex] ?? "left";
+            const className = AlignToTailwindClassMap[currentColumnAlign];
+            return /* @__PURE__ */ jsx("col", { className }, colIndex);
+          }),
+          readOnly ? null : /* @__PURE__ */ jsx("col", {})
+        ] }),
+        readOnly || /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", { className: styles.tableToolsColumn }),
+          Array.from({ length: mdastNode.children[0].children.length }, (_, colIndex) => {
+            return /* @__PURE__ */ jsx("th", { "data-tool-cell": true, children: /* @__PURE__ */ jsx(
+              ColumnEditor,
+              {
+                ...{
+                  setActiveCellWithBoundaries,
+                  parentEditor,
+                  colIndex,
+                  highlightedCoordinates,
+                  lexicalTable,
+                  align: (mdastNode.align ?? [])[colIndex]
+                }
+              }
+            ) }, colIndex);
+          }),
+          /* @__PURE__ */ jsx("th", { className: styles.tableToolsColumn, "data-tool-cell": true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: styles.iconButton,
+              type: "button",
+              title: t("table.deleteTable", "Delete table"),
+              onClick: (e) => {
+                e.preventDefault();
+                parentEditor.update(() => {
+                  lexicalTable.selectNext();
+                  lexicalTable.remove();
+                });
+              },
+              children: /* @__PURE__ */ jsx(EditorIcon, { name: "delete" })
+            }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: mdastNode.children.map((row, rowIndex) => {
+          const CellElement = getCellType(rowIndex);
+          return /* @__PURE__ */ jsxs("tr", { children: [
+            readOnly || /* @__PURE__ */ jsx(CellElement, { className: styles.toolCell, "data-tool-cell": true, children: /* @__PURE__ */ jsx(RowEditor, { ...{ setActiveCellWithBoundaries, parentEditor, rowIndex, highlightedCoordinates, lexicalTable } }) }),
+            row.children.map((mdastCell, colIndex) => {
+              return /* @__PURE__ */ jsx(
+                Cell,
+                {
+                  align: mdastNode.align?.[colIndex],
+                  contents: mdastCell.children,
+                  setActiveCell: setActiveCellWithBoundaries,
+                  ...{
+                    rowIndex,
+                    colIndex,
+                    lexicalTable,
+                    parentEditor,
+                    activeCell: readOnly ? [-1, -1] : activeCell
+                  }
+                },
+                getCellKey(mdastCell)
+              );
+            }),
+            readOnly || rowIndex === 0 && /* @__PURE__ */ jsx("th", { rowSpan: lexicalTable.getRowCount(), "data-tool-cell": true, children: /* @__PURE__ */ jsx("button", { type: "button", className: styles.addColumnButton, onClick: addColumnToRight, children: /* @__PURE__ */ jsx("span", { className: styles.tableAddButtonIcon, children: /* @__PURE__ */ jsx(EditorIcon, { name: "add-column" }) }) }) })
+          ] }, rowIndex);
+        }) }),
+        readOnly || /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ jsx("th", {}),
+          /* @__PURE__ */ jsx("th", { colSpan: lexicalTable.getColCount(), "data-tool-cell": true, children: /* @__PURE__ */ jsx("button", { type: "button", className: styles.addRowButton, onClick: addRowToBottom, children: /* @__PURE__ */ jsx("span", { className: styles.tableAddButtonIcon, children: /* @__PURE__ */ jsx(EditorIcon, { name: "add-row" }) }) }) }),
+          /* @__PURE__ */ jsx("th", {})
+        ] }) })
+      ]
+    }
+  );
+};
+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"];
+  const CellElement = getCellType(props.rowIndex);
+  return /* @__PURE__ */ jsx(
+    CellElement,
+    {
+      className,
+      "data-active": isActive,
+      onClick: () => {
+        setActiveCell([props.colIndex, props.rowIndex]);
+      },
+      children: /* @__PURE__ */ jsx(CellEditor, { ...props, focus: isActive })
+    }
+  );
+};
+const CellEditor = ({ focus, setActiveCell, parentEditor, lexicalTable, contents, colIndex, rowIndex }) => {
+  const [
+    importVisitors,
+    exportVisitors,
+    usedLexicalNodes,
+    jsxComponentDescriptors,
+    directiveDescriptors,
+    codeBlockEditorDescriptors,
+    defaultCodeBlockLanguage,
+    jsxIsAvailable,
+    rootEditor,
+    tableCellEditorChildren
+  ] = useCellValues(
+    importVisitors$,
+    exportVisitors$,
+    usedLexicalNodes$,
+    jsxComponentDescriptors$,
+    directiveDescriptors$,
+    codeBlockEditorDescriptors$,
+    defaultCodeBlockLanguage$,
+    jsxIsAvailable$,
+    rootEditor$,
+    tableCellEditorChildren$
+  );
+  const [editor] = React.useState(() => {
+    const editor2 = createEditor({
+      nodes: usedLexicalNodes,
+      theme: lexicalTheme,
+      namespace: "TableCellEditor"
+    });
+    editor2.update(() => {
+      importMdastTreeToLexical({
+        root: $getRoot(),
+        mdastRoot: { type: "root", children: [{ type: "paragraph", children: contents }] },
+        visitors: importVisitors,
+        jsxComponentDescriptors,
+        directiveDescriptors,
+        codeBlockEditorDescriptors,
+        defaultCodeBlockLanguage
+      });
+    });
+    return editor2;
+  });
+  const saveAndFocus = React.useCallback(
+    (nextCell) => {
+      editor.getEditorState().read(() => {
+        const mdast = exportLexicalTreeToMdast({
+          root: $getRoot(),
+          jsxComponentDescriptors,
+          visitors: exportVisitors,
+          jsxIsAvailable
+        });
+        parentEditor.update(
+          () => {
+            lexicalTable.updateCellContents(colIndex, rowIndex, mdast.children[0].children);
+          },
+          { discrete: true }
+        );
+        parentEditor.dispatchCommand(NESTED_EDITOR_UPDATED_COMMAND, void 0);
+      });
+      setActiveCell(nextCell);
+    },
+    [colIndex, editor, exportVisitors, jsxComponentDescriptors, jsxIsAvailable, lexicalTable, parentEditor, rowIndex, setActiveCell]
+  );
+  React.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?.preventDefault();
+          const nextCell = 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_EDITOR
+      ),
+      editor.registerCommand(
+        NESTED_EDITOR_UPDATED_COMMAND,
+        () => {
+          saveAndFocus(null);
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR
+      )
+    );
+  }, [colIndex, editor, rootEditor, rowIndex, saveAndFocus, setActiveCell]);
+  React.useEffect(() => {
+    if (focus) {
+      editor.focus();
+    }
+  }, [focus, editor]);
+  return /* @__PURE__ */ jsxs(LexicalNestedComposer, { initialEditor: editor, children: [
+    /* @__PURE__ */ jsx(RichTextPlugin, { contentEditable: /* @__PURE__ */ jsx(ContentEditable, {}), placeholder: /* @__PURE__ */ jsx("div", {}), ErrorBoundary: LexicalErrorBoundary }),
+    tableCellEditorChildren.map((Child, index) => /* @__PURE__ */ jsx(Child, {}, index)),
+    /* @__PURE__ */ jsx(HistoryPlugin, {})
+  ] });
+};
+const ColumnEditor = ({
+  parentEditor,
+  highlightedCoordinates,
+  align,
+  lexicalTable,
+  colIndex,
+  setActiveCellWithBoundaries
+}) => {
+  const [editorRootElementRef] = useCellValues(editorRootElementRef$);
+  const insertColumnAt = React.useCallback(
+    (colIndex2) => {
+      parentEditor.update(() => {
+        lexicalTable.insertColumnAt(colIndex2);
+      });
+      setActiveCellWithBoundaries([colIndex2, 0]);
+    },
+    [parentEditor, lexicalTable, setActiveCellWithBoundaries]
+  );
+  const deleteColumnAt = React.useCallback(
+    (colIndex2) => {
+      parentEditor.update(() => {
+        lexicalTable.deleteColumnAt(colIndex2);
+      });
+    },
+    [parentEditor, lexicalTable]
+  );
+  const setColumnAlign = React.useCallback(
+    (colIndex2, align2) => {
+      parentEditor.update(() => {
+        lexicalTable.setColumnAlign(colIndex2, align2);
+      });
+    },
+    [parentEditor, lexicalTable]
+  );
+  const t = useTranslation();
+  return /* @__PURE__ */ jsxs(RadixPopover.Root, { children: [
+    /* @__PURE__ */ jsx(
+      RadixPopover.PopoverTrigger,
+      {
+        className: styles.tableColumnEditorTrigger,
+        "data-active": highlightedCoordinates[0] === colIndex + 1,
+        title: t("table.columnMenu", "Column menu"),
+        children: /* @__PURE__ */ jsx(EditorIcon, { name: "more" })
+      }
+    ),
+    /* @__PURE__ */ jsx(RadixPopover.Portal, { container: editorRootElementRef?.current, children: /* @__PURE__ */ jsxs(
+      RadixPopover.PopoverContent,
+      {
+        className: classNames(styles.tableColumnEditorPopoverContent),
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+        },
+        sideOffset: 5,
+        side: "top",
+        children: [
+          /* @__PURE__ */ jsxs(RadixToolbar.Root, { className: styles.tableColumnEditorToolbar, children: [
+            /* @__PURE__ */ jsxs(
+              RadixToolbar.ToggleGroup,
+              {
+                className: styles.toggleGroupRoot,
+                onValueChange: (value) => {
+                  setColumnAlign(colIndex, value);
+                },
+                value: align ?? "left",
+                type: "single",
+                "aria-label": t("table.textAlignment", "Text alignment"),
+                children: [
+                  /* @__PURE__ */ jsx(RadixToolbar.ToggleItem, { value: "left", title: t("table.alignLeft", "Align left"), children: /* @__PURE__ */ jsx(EditorIcon, { name: "align-left" }) }),
+                  /* @__PURE__ */ jsx(RadixToolbar.ToggleItem, { value: "center", title: t("table.alignCenter", "Align center"), children: /* @__PURE__ */ jsx(EditorIcon, { name: "align-center" }) }),
+                  /* @__PURE__ */ jsx(RadixToolbar.ToggleItem, { value: "right", title: t("table.alignRight", "Align right"), children: /* @__PURE__ */ jsx(EditorIcon, { name: "align-right" }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(RadixToolbar.Separator, {}),
+            /* @__PURE__ */ jsx(
+              RadixToolbar.Button,
+              {
+                onClick: insertColumnAt.bind(null, colIndex),
+                title: t("table.insertColumnLeft", "Insert a column to the left of this one"),
+                children: /* @__PURE__ */ jsx(EditorIcon, { name: "insert-column-left" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              RadixToolbar.Button,
+              {
+                onClick: insertColumnAt.bind(null, colIndex + 1),
+                title: t("table.insertColumnRight", "Insert a column to the right of this one"),
+                children: /* @__PURE__ */ jsx(EditorIcon, { name: "insert-column-right" })
+              }
+            ),
+            /* @__PURE__ */ jsx(RadixToolbar.Button, { onClick: deleteColumnAt.bind(null, colIndex), title: t("table.deleteColumn", "Delete this column"), children: /* @__PURE__ */ jsx(EditorIcon, { name: "delete" }) })
+          ] }),
+          /* @__PURE__ */ jsx(RadixPopover.Arrow, { className: styles.popoverArrow })
+        ]
+      }
+    ) })
+  ] });
+};
+const RowEditor = ({
+  parentEditor,
+  highlightedCoordinates,
+  lexicalTable,
+  rowIndex,
+  setActiveCellWithBoundaries
+}) => {
+  const [editorRootElementRef] = useCellValues(editorRootElementRef$);
+  const insertRowAt = React.useCallback(
+    (rowIndex2) => {
+      parentEditor.update(() => {
+        lexicalTable.insertRowAt(rowIndex2);
+      });
+      setActiveCellWithBoundaries([0, rowIndex2]);
+    },
+    [parentEditor, lexicalTable, setActiveCellWithBoundaries]
+  );
+  const deleteRowAt = React.useCallback(
+    (rowIndex2) => {
+      parentEditor.update(() => {
+        lexicalTable.deleteRowAt(rowIndex2);
+      });
+    },
+    [parentEditor, lexicalTable]
+  );
+  const t = useTranslation();
+  return /* @__PURE__ */ jsxs(RadixPopover.Root, { children: [
+    /* @__PURE__ */ jsx(
+      RadixPopover.PopoverTrigger,
+      {
+        className: styles.tableColumnEditorTrigger,
+        "data-active": highlightedCoordinates[1] === rowIndex,
+        title: t("table.rowMenu", "Row menu"),
+        children: /* @__PURE__ */ jsx(EditorIcon, { name: "more" })
+      }
+    ),
+    /* @__PURE__ */ jsx(RadixPopover.Portal, { container: editorRootElementRef?.current, children: /* @__PURE__ */ jsxs(
+      RadixPopover.PopoverContent,
+      {
+        className: classNames(styles.tableColumnEditorPopoverContent),
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+        },
+        sideOffset: 5,
+        side: "bottom",
+        children: [
+          /* @__PURE__ */ jsxs(RadixToolbar.Root, { className: styles.tableColumnEditorToolbar, children: [
+            /* @__PURE__ */ jsx(
+              RadixToolbar.Button,
+              {
+                onClick: insertRowAt.bind(null, rowIndex),
+                title: t("table.insertRowAbove", "Insert a row above this one"),
+                children: /* @__PURE__ */ jsx(EditorIcon, { name: "insert-row-above" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              RadixToolbar.Button,
+              {
+                onClick: insertRowAt.bind(null, rowIndex + 1),
+                title: t("table.insertRowBelow", "Insert a row below this one"),
+                children: /* @__PURE__ */ jsx(EditorIcon, { name: "insert-row-below" })
+              }
+            ),
+            /* @__PURE__ */ jsx(RadixToolbar.Button, { onClick: deleteRowAt.bind(null, rowIndex), title: t("table.deleteRow", "Delete this row"), children: /* @__PURE__ */ jsx(EditorIcon, { name: "delete" }) })
+          ] }),
+          /* @__PURE__ */ jsx(RadixPopover.Arrow, { className: styles.popoverArrow })
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  TableEditor
+};