@crystallize/design-system 1.4.0 → 1.4.1

package/dist/TableComponent-QINOO453.mjs

@@ -0,0 +1,1377 @@
+import {
+  $isTableNode,
+  CellContext,
+  IS_APPLE,
+  cellHTMLCache,
+  cellTextContentCache,
+  createRow,
+  createUID,
+  exportTableCellsToHTML,
+  extractRowsFromHTML
+} from "./chunk-VUXQZRSP.mjs";
+
+// src/rich-text-editor/nodes/TableComponent.tsx
+import {
+  $generateJSONFromSelectedNodes,
+  $generateNodesFromSerializedNodes,
+  $insertGeneratedNodes
+} from "@lexical/clipboard";
+import { $generateHtmlFromNodes, $generateNodesFromDOM } from "@lexical/html";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
+import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
+import { mergeRegister } from "@lexical/utils";
+import {
+  $addUpdateTag,
+  $createParagraphNode,
+  $createRangeSelection,
+  $getNodeByKey,
+  $getRoot,
+  $getSelection,
+  $isNodeSelection,
+  $isRangeSelection,
+  CLICK_COMMAND,
+  COMMAND_PRIORITY_LOW,
+  COPY_COMMAND,
+  createEditor,
+  CUT_COMMAND,
+  FORMAT_TEXT_COMMAND,
+  KEY_ARROW_DOWN_COMMAND,
+  KEY_ARROW_LEFT_COMMAND,
+  KEY_ARROW_RIGHT_COMMAND,
+  KEY_ARROW_UP_COMMAND,
+  KEY_BACKSPACE_COMMAND,
+  KEY_DELETE_COMMAND,
+  KEY_ENTER_COMMAND,
+  KEY_ESCAPE_COMMAND,
+  KEY_TAB_COMMAND,
+  PASTE_COMMAND
+} from "lexical";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var NO_CELLS = [];
+function $createSelectAll() {
+  const sel = $createRangeSelection();
+  sel.focus.set("root", $getRoot().getChildrenSize(), "element");
+  return sel;
+}
+function createEmptyParagraphHTML(theme) {
+  return `<p class="${theme.paragraph}"><br></p>`;
+}
+function focusCell(tableElem, id) {
+  const cellElem = tableElem.querySelector(`[data-id=${id}]`);
+  if (cellElem == null) {
+    return;
+  }
+  cellElem.focus();
+}
+function isStartingResize(target) {
+  return target.nodeType === 1 && target.hasAttribute("data-table-resize");
+}
+function generateHTMLFromJSON(editorStateJSON, cellEditor) {
+  const editorState = cellEditor.parseEditorState(editorStateJSON);
+  let html = cellHTMLCache.get(editorStateJSON);
+  if (html === void 0) {
+    html = editorState.read(() => $generateHtmlFromNodes(cellEditor, null));
+    const textContent = editorState.read(() => $getRoot().getTextContent());
+    cellHTMLCache.set(editorStateJSON, html);
+    cellTextContentCache.set(editorStateJSON, textContent);
+  }
+  return html;
+}
+function getCurrentDocument(editor) {
+  const rootElement = editor.getRootElement();
+  return rootElement !== null ? rootElement.ownerDocument : document;
+}
+function isCopy(keyCode, shiftKey, metaKey, ctrlKey) {
+  if (shiftKey) {
+    return false;
+  }
+  if (keyCode === 67) {
+    return IS_APPLE ? metaKey : ctrlKey;
+  }
+  return false;
+}
+function isCut(keyCode, shiftKey, metaKey, ctrlKey) {
+  if (shiftKey) {
+    return false;
+  }
+  if (keyCode === 88) {
+    return IS_APPLE ? metaKey : ctrlKey;
+  }
+  return false;
+}
+function isPaste(keyCode, shiftKey, metaKey, ctrlKey) {
+  if (shiftKey) {
+    return false;
+  }
+  if (keyCode === 86) {
+    return IS_APPLE ? metaKey : ctrlKey;
+  }
+  return false;
+}
+function getCellID(domElement) {
+  let node = domElement;
+  while (node !== null) {
+    const possibleID = node.getAttribute("data-id");
+    if (possibleID != null) {
+      return possibleID;
+    }
+    node = node.parentElement;
+  }
+  return null;
+}
+function getTableCellWidth(domElement) {
+  let node = domElement;
+  while (node !== null) {
+    if (node.nodeName === "TH" || node.nodeName === "TD") {
+      return node.getBoundingClientRect().width;
+    }
+    node = node.parentElement;
+  }
+  return 0;
+}
+function $updateCells(rows, ids, cellCoordMap, cellEditor, updateTableNode, fn) {
+  for (const id of ids) {
+    const cell = getCell(rows, id, cellCoordMap);
+    if (cell !== null && cellEditor !== null) {
+      const editorState = cellEditor.parseEditorState(cell.json);
+      cellEditor._headless = true;
+      cellEditor.setEditorState(editorState);
+      cellEditor.update(fn, { discrete: true });
+      cellEditor._headless = false;
+      const newJSON = JSON.stringify(cellEditor.getEditorState());
+      updateTableNode((tableNode) => {
+        const [x, y] = cellCoordMap.get(id);
+        $addUpdateTag("history-push");
+        tableNode.updateCellJSON(x, y, newJSON);
+      });
+    }
+  }
+}
+function isTargetOnPossibleUIControl(target) {
+  let node = target;
+  while (node !== null) {
+    const nodeName = node.nodeName;
+    if (nodeName === "BUTTON" || nodeName === "INPUT" || nodeName === "TEXTAREA") {
+      return true;
+    }
+    node = node.parentElement;
+  }
+  return false;
+}
+function getSelectedRect(startID, endID, cellCoordMap) {
+  const startCoords = cellCoordMap.get(startID);
+  const endCoords = cellCoordMap.get(endID);
+  if (startCoords === void 0 || endCoords === void 0) {
+    return null;
+  }
+  const startX = Math.min(startCoords[0], endCoords[0]);
+  const endX = Math.max(startCoords[0], endCoords[0]);
+  const startY = Math.min(startCoords[1], endCoords[1]);
+  const endY = Math.max(startCoords[1], endCoords[1]);
+  return {
+    endX,
+    endY,
+    startX,
+    startY
+  };
+}
+function getSelectedIDs(rows, startID, endID, cellCoordMap) {
+  const rect = getSelectedRect(startID, endID, cellCoordMap);
+  if (rect === null) {
+    return [];
+  }
+  const { startX, endY, endX, startY } = rect;
+  const ids = [];
+  for (let x = startX; x <= endX; x++) {
+    for (let y = startY; y <= endY; y++) {
+      ids.push(rows[y].cells[x].id);
+    }
+  }
+  return ids;
+}
+function extractCellsFromRows(rows, rect) {
+  const { startX, endY, endX, startY } = rect;
+  const newRows = [];
+  for (let y = startY; y <= endY; y++) {
+    const row = rows[y];
+    const newRow = createRow();
+    for (let x = startX; x <= endX; x++) {
+      const cellClone = { ...row.cells[x] };
+      cellClone.id = createUID();
+      newRow.cells.push(cellClone);
+    }
+    newRows.push(newRow);
+  }
+  return newRows;
+}
+function TableCellEditor({ cellEditor }) {
+  const { cellEditorConfig, cellEditorPlugins } = useContext(CellContext);
+  if (cellEditorPlugins === null || cellEditorConfig === null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(LexicalNestedComposer, {
+    initialEditor: cellEditor,
+    initialTheme: cellEditorConfig.theme,
+    initialNodes: cellEditorConfig.nodes,
+    skipCollabChecks: true,
+    children: cellEditorPlugins
+  });
+}
+function getCell(rows, cellID, cellCoordMap) {
+  const coords = cellCoordMap.get(cellID);
+  if (coords === void 0) {
+    return null;
+  }
+  const [x, y] = coords;
+  const row = rows[y];
+  return row.cells[x];
+}
+function TableActionMenu({
+  cell,
+  rows,
+  cellCoordMap,
+  menuElem,
+  updateCellsByID,
+  onClose,
+  updateTableNode,
+  setSortingOptions,
+  sortingOptions
+}) {
+  const dropDownRef = useRef(null);
+  useEffect(() => {
+    const dropdownElem = dropDownRef.current;
+    if (dropdownElem !== null) {
+      const rect = menuElem.getBoundingClientRect();
+      dropdownElem.style.top = `${rect.y}px`;
+      dropdownElem.style.left = `${rect.x}px`;
+    }
+  }, [menuElem]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      const dropdownElem = dropDownRef.current;
+      if (dropdownElem !== null && !dropdownElem.contains(event.target)) {
+        event.stopPropagation();
+      }
+    };
+    window.addEventListener("click", handleClickOutside);
+    return () => window.removeEventListener("click", handleClickOutside);
+  }, [onClose]);
+  const coords = cellCoordMap.get(cell.id);
+  if (coords === void 0) {
+    return null;
+  }
+  const [x, y] = coords;
+  return /* @__PURE__ */ jsxs("div", {
+    className: "dropdown",
+    ref: dropDownRef,
+    onPointerMove: (e) => {
+      e.stopPropagation();
+    },
+    onPointerDown: (e) => {
+      e.stopPropagation();
+    },
+    onPointerUp: (e) => {
+      e.stopPropagation();
+    },
+    onClick: (e) => {
+      e.stopPropagation();
+    },
+    children: [
+      /* @__PURE__ */ jsx("button", {
+        className: "item",
+        onClick: () => {
+          updateTableNode((tableNode) => {
+            $addUpdateTag("history-push");
+            tableNode.updateCellType(x, y, cell.type === "normal" ? "header" : "normal");
+          });
+          onClose();
+        },
+        children: /* @__PURE__ */ jsx("span", {
+          className: "text",
+          children: cell.type === "normal" ? "Make header" : "Remove header"
+        })
+      }),
+      /* @__PURE__ */ jsx("button", {
+        className: "item",
+        onClick: () => {
+          updateCellsByID([cell.id], () => {
+            const root = $getRoot();
+            root.clear();
+            root.append($createParagraphNode());
+          });
+          onClose();
+        },
+        children: /* @__PURE__ */ jsx("span", {
+          className: "text",
+          children: "Clear cell"
+        })
+      }),
+      /* @__PURE__ */ jsx("hr", {}),
+      cell.type === "header" && y === 0 && /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          sortingOptions !== null && sortingOptions.x === x && /* @__PURE__ */ jsx("button", {
+            className: "item",
+            onClick: () => {
+              setSortingOptions(null);
+              onClose();
+            },
+            children: /* @__PURE__ */ jsx("span", {
+              className: "text",
+              children: "Remove sorting"
+            })
+          }),
+          (sortingOptions === null || sortingOptions.x !== x || sortingOptions.type === "descending") && /* @__PURE__ */ jsx("button", {
+            className: "item",
+            onClick: () => {
+              setSortingOptions({ type: "ascending", x });
+              onClose();
+            },
+            children: /* @__PURE__ */ jsx("span", {
+              className: "text",
+              children: "Sort ascending"
+            })
+          }),
+          (sortingOptions === null || sortingOptions.x !== x || sortingOptions.type === "ascending") && /* @__PURE__ */ jsx("button", {
+            className: "item",
+            onClick: () => {
+              setSortingOptions({ type: "descending", x });
+              onClose();
+            },
+            children: /* @__PURE__ */ jsx("span", {
+              className: "text",
+              children: "Sort descending"
+            })
+          }),
+          /* @__PURE__ */ jsx("hr", {})
+        ]
+      }),
+      /* @__PURE__ */ jsx("button", {
+        className: "item",
+        onClick: () => {
+          updateTableNode((tableNode) => {
+            $addUpdateTag("history-push");
+            tableNode.insertRowAt(y);
+          });
+          onClose();
+        },
+        children: /* @__PURE__ */ jsx("span", {
+          className: "text",
+          children: "Insert row above"
+        })
+      }),
+      /* @__PURE__ */ jsx("button", {
+        className: "item",
+        onClick: () => {
+          updateTableNode((tableNode) => {
+            $addUpdateTag("history-push");
+            tableNode.insertRowAt(y + 1);
+          });
+          onClose();
+        },
+        children: /* @__PURE__ */ jsx("span", {
+          className: "text",
+          children: "Insert row below"
+        })
+      }),
+      /* @__PURE__ */ jsx("hr", {}),
+      /* @__PURE__ */ jsx("button", {
+        className: "item",
+        onClick: () => {
+          updateTableNode((tableNode) => {
+            $addUpdateTag("history-push");
+            tableNode.insertColumnAt(x);
+          });
+          onClose();
+        },
+        children: /* @__PURE__ */ jsx("span", {
+          className: "text",
+          children: "Insert column left"
+        })
+      }),
+      /* @__PURE__ */ jsx("button", {
+        className: "item",
+        onClick: () => {
+          updateTableNode((tableNode) => {
+            $addUpdateTag("history-push");
+            tableNode.insertColumnAt(x + 1);
+          });
+          onClose();
+        },
+        children: /* @__PURE__ */ jsx("span", {
+          className: "text",
+          children: "Insert column right"
+        })
+      }),
+      /* @__PURE__ */ jsx("hr", {}),
+      rows[0].cells.length !== 1 && /* @__PURE__ */ jsx("button", {
+        className: "item",
+        onClick: () => {
+          updateTableNode((tableNode) => {
+            $addUpdateTag("history-push");
+            tableNode.deleteColumnAt(x);
+          });
+          onClose();
+        },
+        children: /* @__PURE__ */ jsx("span", {
+          className: "text",
+          children: "Delete column"
+        })
+      }),
+      rows.length !== 1 && /* @__PURE__ */ jsx("button", {
+        className: "item",
+        onClick: () => {
+          updateTableNode((tableNode) => {
+            $addUpdateTag("history-push");
+            tableNode.deleteRowAt(y);
+          });
+          onClose();
+        },
+        children: /* @__PURE__ */ jsx("span", {
+          className: "text",
+          children: "Delete row"
+        })
+      }),
+      /* @__PURE__ */ jsx("button", {
+        className: "item",
+        onClick: () => {
+          updateTableNode((tableNode) => {
+            $addUpdateTag("history-push");
+            tableNode.selectNext();
+            tableNode.remove();
+          });
+          onClose();
+        },
+        children: /* @__PURE__ */ jsx("span", {
+          className: "text",
+          children: "Delete table"
+        })
+      })
+    ]
+  });
+}
+function TableCell({
+  cell,
+  cellCoordMap,
+  cellEditor,
+  isEditing,
+  isSelected,
+  isPrimarySelected,
+  theme,
+  updateCellsByID,
+  updateTableNode,
+  rows,
+  setSortingOptions,
+  sortingOptions
+}) {
+  const [showMenu, setShowMenu] = useState(false);
+  const menuRootRef = useRef(null);
+  const isHeader = cell.type !== "normal";
+  const editorStateJSON = cell.json;
+  const CellComponent = isHeader ? "th" : "td";
+  const cellWidth = cell.width;
+  const menuElem = menuRootRef.current;
+  const coords = cellCoordMap.get(cell.id);
+  const isSorted = sortingOptions !== null && coords !== void 0 && coords[0] === sortingOptions.x && coords[1] === 0;
+  useEffect(() => {
+    if (isEditing || !isPrimarySelected) {
+      setShowMenu(false);
+    }
+  }, [isEditing, isPrimarySelected]);
+  return /* @__PURE__ */ jsxs(CellComponent, {
+    className: `${theme.tableCell} ${isHeader ? theme.tableCellHeader : ""} ${isSelected ? theme.tableCellSelected : ""}`,
+    "data-id": cell.id,
+    tabIndex: -1,
+    style: { width: cellWidth !== null ? cellWidth : void 0 },
+    children: [
+      isPrimarySelected && /* @__PURE__ */ jsx("div", {
+        className: `${theme.tableCellPrimarySelected} ${isEditing ? theme.tableCellEditing : ""}`
+      }),
+      isPrimarySelected && isEditing ? /* @__PURE__ */ jsx(TableCellEditor, {
+        cellEditor
+      }) : /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            dangerouslySetInnerHTML: {
+              __html: editorStateJSON === "" ? createEmptyParagraphHTML(theme) : generateHTMLFromJSON(editorStateJSON, cellEditor)
+            }
+          }),
+          /* @__PURE__ */ jsx("div", {
+            className: theme.tableCellResizer,
+            "data-table-resize": "true"
+          })
+        ]
+      }),
+      isPrimarySelected && !isEditing && /* @__PURE__ */ jsx("div", {
+        className: theme.tableCellActionButtonContainer,
+        ref: menuRootRef,
+        children: /* @__PURE__ */ jsx("button", {
+          className: theme.tableCellActionButton,
+          onClick: (e) => {
+            setShowMenu(!showMenu);
+            e.stopPropagation();
+          },
+          children: /* @__PURE__ */ jsx("i", {
+            className: "chevron-down"
+          })
+        })
+      }),
+      showMenu && menuElem !== null && createPortal(
+        /* @__PURE__ */ jsx(TableActionMenu, {
+          cell,
+          menuElem,
+          updateCellsByID,
+          onClose: () => setShowMenu(false),
+          updateTableNode,
+          cellCoordMap,
+          rows,
+          setSortingOptions,
+          sortingOptions
+        }),
+        document.body
+      ),
+      isSorted && /* @__PURE__ */ jsx("div", {
+        className: theme.tableCellSortedIndicator
+      })
+    ]
+  });
+}
+function TableComponent({
+  nodeKey,
+  rows: rawRows,
+  theme
+}) {
+  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+  const resizeMeasureRef = useRef({
+    point: 0,
+    size: 0
+  });
+  const [sortingOptions, setSortingOptions] = useState(null);
+  const addRowsRef = useRef(null);
+  const lastCellIDRef = useRef(null);
+  const tableResizerRulerRef = useRef(null);
+  const { cellEditorConfig } = useContext(CellContext);
+  const [isEditing, setIsEditing] = useState(false);
+  const [showAddColumns, setShowAddColumns] = useState(false);
+  const [showAddRows, setShowAddRows] = useState(false);
+  const [editor] = useLexicalComposerContext();
+  const mouseDownRef = useRef(false);
+  const [resizingID, setResizingID] = useState(null);
+  const tableRef = useRef(null);
+  const cellCoordMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (let y = 0; y < rawRows.length; y++) {
+      const row = rawRows[y];
+      const cells = row.cells;
+      for (let x = 0; x < cells.length; x++) {
+        const cell = cells[x];
+        map.set(cell.id, [x, y]);
+      }
+    }
+    return map;
+  }, [rawRows]);
+  const rows = useMemo(() => {
+    if (sortingOptions === null) {
+      return rawRows;
+    }
+    const _rows = rawRows.slice(1);
+    _rows.sort((a, b) => {
+      const aCells = a.cells;
+      const bCells = b.cells;
+      const x = sortingOptions.x;
+      const aContent = cellTextContentCache.get(aCells[x].json) || "";
+      const bContent = cellTextContentCache.get(bCells[x].json) || "";
+      if (aContent === "" || bContent === "") {
+        return 1;
+      }
+      if (sortingOptions.type === "ascending") {
+        return aContent.localeCompare(bContent);
+      }
+      return bContent.localeCompare(aContent);
+    });
+    _rows.unshift(rawRows[0]);
+    return _rows;
+  }, [rawRows, sortingOptions]);
+  const [primarySelectedCellID, setPrimarySelectedCellID] = useState(null);
+  const cellEditor = useMemo(() => {
+    if (cellEditorConfig === null) {
+      return null;
+    }
+    const _cellEditor = createEditor({
+      namespace: cellEditorConfig.namespace,
+      nodes: cellEditorConfig.nodes,
+      onError: (error) => cellEditorConfig.onError(error, _cellEditor),
+      theme: cellEditorConfig.theme
+    });
+    return _cellEditor;
+  }, [cellEditorConfig]);
+  const [selectedCellIDs, setSelectedCellIDs] = useState([]);
+  const selectedCellSet = useMemo(() => new Set(selectedCellIDs), [selectedCellIDs]);
+  useEffect(() => {
+    const tableElem = tableRef.current;
+    if (isSelected && document.activeElement === document.body && tableElem !== null) {
+      tableElem.focus();
+    }
+  }, [isSelected]);
+  const updateTableNode = useCallback(
+    (fn) => {
+      editor.update(() => {
+        const tableNode = $getNodeByKey(nodeKey);
+        if ($isTableNode(tableNode)) {
+          fn(tableNode);
+        }
+      });
+    },
+    [editor, nodeKey]
+  );
+  const addColumns = () => {
+    updateTableNode((tableNode) => {
+      $addUpdateTag("history-push");
+      tableNode.addColumns(1);
+    });
+  };
+  const addRows = () => {
+    updateTableNode((tableNode) => {
+      $addUpdateTag("history-push");
+      tableNode.addRows(1);
+    });
+  };
+  const modifySelectedCells = useCallback(
+    (x, y, extend) => {
+      const id = rows[y].cells[x].id;
+      lastCellIDRef.current = id;
+      if (extend) {
+        const selectedIDs = getSelectedIDs(rows, primarySelectedCellID, id, cellCoordMap);
+        setSelectedCellIDs(selectedIDs);
+      } else {
+        setPrimarySelectedCellID(id);
+        setSelectedCellIDs(NO_CELLS);
+        focusCell(tableRef.current, id);
+      }
+    },
+    [cellCoordMap, primarySelectedCellID, rows]
+  );
+  const saveEditorToJSON = useCallback(() => {
+    if (cellEditor !== null && primarySelectedCellID !== null) {
+      const json = JSON.stringify(cellEditor.getEditorState());
+      updateTableNode((tableNode) => {
+        const coords = cellCoordMap.get(primarySelectedCellID);
+        if (coords === void 0) {
+          return;
+        }
+        $addUpdateTag("history-push");
+        const [x, y] = coords;
+        tableNode.updateCellJSON(x, y, json);
+      });
+    }
+  }, [cellCoordMap, cellEditor, primarySelectedCellID, updateTableNode]);
+  const selectTable = useCallback(() => {
+    setTimeout(() => {
+      const parentRootElement = editor.getRootElement();
+      if (parentRootElement !== null) {
+        parentRootElement.focus({ preventScroll: true });
+        window.getSelection()?.removeAllRanges();
+      }
+    }, 20);
+  }, [editor]);
+  useEffect(() => {
+    const tableElem = tableRef.current;
+    if (tableElem === null) {
+      return;
+    }
+    const doc = getCurrentDocument(editor);
+    const isAtEdgeOfTable = (event) => {
+      const x = event.clientX - tableRect.x;
+      const y = event.clientY - tableRect.y;
+      return x < 5 || y < 5;
+    };
+    const handlePointerDown = (event) => {
+      const possibleID = getCellID(event.target);
+      if (possibleID !== null && editor.isEditable() && tableElem.contains(event.target)) {
+        if (isAtEdgeOfTable(event)) {
+          setSelected(true);
+          setPrimarySelectedCellID(null);
+          selectTable();
+          return;
+        }
+        setSelected(false);
+        if (isStartingResize(event.target)) {
+          setResizingID(possibleID);
+          tableElem.style.userSelect = "none";
+          resizeMeasureRef.current = {
+            point: event.clientX,
+            size: getTableCellWidth(event.target)
+          };
+          return;
+        }
+        mouseDownRef.current = true;
+        if (primarySelectedCellID !== possibleID) {
+          if (isEditing) {
+            saveEditorToJSON();
+          }
+          setPrimarySelectedCellID(possibleID);
+          setIsEditing(false);
+          lastCellIDRef.current = possibleID;
+        } else {
+          lastCellIDRef.current = null;
+        }
+        setSelectedCellIDs(NO_CELLS);
+      } else if (primarySelectedCellID !== null && !isTargetOnPossibleUIControl(event.target)) {
+        setSelected(false);
+        mouseDownRef.current = false;
+        if (isEditing) {
+          saveEditorToJSON();
+        }
+        setPrimarySelectedCellID(null);
+        setSelectedCellIDs(NO_CELLS);
+        setIsEditing(false);
+        lastCellIDRef.current = null;
+      }
+    };
+    const tableRect = tableElem.getBoundingClientRect();
+    const handlePointerMove = (event) => {
+      if (resizingID !== null) {
+        const tableResizerRulerElem = tableResizerRulerRef.current;
+        if (tableResizerRulerElem !== null) {
+          const { size, point } = resizeMeasureRef.current;
+          const diff = event.clientX - point;
+          const newWidth = size + diff;
+          let x = event.clientX - tableRect.x;
+          if (x < 10) {
+            x = 10;
+          } else if (x > tableRect.width - 10) {
+            x = tableRect.width - 10;
+          } else if (newWidth < 20) {
+            x = point - size + 20 - tableRect.x;
+          }
+          tableResizerRulerElem.style.left = `${x}px`;
+        }
+        return;
+      }
+      if (!isEditing) {
+        const { clientX, clientY } = event;
+        const { width, x, y, height } = tableRect;
+        const isOnRightEdge = clientX > x + width * 0.9 && clientX < x + width + 40 && !mouseDownRef.current;
+        setShowAddColumns(isOnRightEdge);
+        const isOnBottomEdge = event.target === addRowsRef.current || clientY > y + height * 0.85 && clientY < y + height + 5 && !mouseDownRef.current;
+        setShowAddRows(isOnBottomEdge);
+      }
+      if (isEditing || !mouseDownRef.current || primarySelectedCellID === null) {
+        return;
+      }
+      const possibleID = getCellID(event.target);
+      if (possibleID !== null && possibleID !== lastCellIDRef.current) {
+        if (selectedCellIDs.length === 0) {
+          tableElem.style.userSelect = "none";
+        }
+        const selectedIDs = getSelectedIDs(rows, primarySelectedCellID, possibleID, cellCoordMap);
+        if (selectedIDs.length === 1) {
+          setSelectedCellIDs(NO_CELLS);
+        } else {
+          setSelectedCellIDs(selectedIDs);
+        }
+        lastCellIDRef.current = possibleID;
+      }
+    };
+    const handlePointerUp = (event) => {
+      if (resizingID !== null) {
+        const { size, point } = resizeMeasureRef.current;
+        const diff = event.clientX - point;
+        let newWidth = size + diff;
+        if (newWidth < 10) {
+          newWidth = 10;
+        }
+        updateTableNode((tableNode) => {
+          const [x] = cellCoordMap.get(resizingID);
+          $addUpdateTag("history-push");
+          tableNode.updateColumnWidth(x, newWidth);
+        });
+        setResizingID(null);
+      }
+      if (tableElem !== null && selectedCellIDs.length > 1 && mouseDownRef.current) {
+        tableElem.style.userSelect = "text";
+        window.getSelection()?.removeAllRanges();
+      }
+      mouseDownRef.current = false;
+    };
+    doc.addEventListener("pointerdown", handlePointerDown);
+    doc.addEventListener("pointermove", handlePointerMove);
+    doc.addEventListener("pointerup", handlePointerUp);
+    return () => {
+      doc.removeEventListener("pointerdown", handlePointerDown);
+      doc.removeEventListener("pointermove", handlePointerMove);
+      doc.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [
+    cellEditor,
+    editor,
+    isEditing,
+    rows,
+    saveEditorToJSON,
+    primarySelectedCellID,
+    selectedCellSet,
+    selectedCellIDs,
+    cellCoordMap,
+    resizingID,
+    updateTableNode,
+    setSelected,
+    selectTable
+  ]);
+  useEffect(() => {
+    if (!isEditing && primarySelectedCellID !== null) {
+      const doc = getCurrentDocument(editor);
+      const loadContentIntoCell = (cell) => {
+        if (cell !== null && cellEditor !== null) {
+          const editorStateJSON = cell.json;
+          const editorState = cellEditor.parseEditorState(editorStateJSON);
+          cellEditor.setEditorState(editorState);
+        }
+      };
+      const handleDblClick = (event) => {
+        const possibleID = getCellID(event.target);
+        if (possibleID === primarySelectedCellID && editor.isEditable()) {
+          const cell = getCell(rows, possibleID, cellCoordMap);
+          loadContentIntoCell(cell);
+          setIsEditing(true);
+          setSelectedCellIDs(NO_CELLS);
+        }
+      };
+      const handleKeyDown = (event) => {
+        const keyCode = event.keyCode;
+        if (keyCode === 16 || keyCode === 27 || keyCode === 9 || keyCode === 37 || keyCode === 38 || keyCode === 39 || keyCode === 40 || keyCode === 8 || keyCode === 46 || !editor.isEditable()) {
+          return;
+        }
+        if (keyCode === 13) {
+          event.preventDefault();
+        }
+        if (!isEditing && primarySelectedCellID !== null && editor.getEditorState().read(() => $getSelection() === null) && event.target.contentEditable !== "true") {
+          if (isCopy(keyCode, event.shiftKey, event.metaKey, event.ctrlKey)) {
+            editor.dispatchCommand(COPY_COMMAND, event);
+            return;
+          }
+          if (isCut(keyCode, event.shiftKey, event.metaKey, event.ctrlKey)) {
+            editor.dispatchCommand(CUT_COMMAND, event);
+            return;
+          }
+          if (isPaste(keyCode, event.shiftKey, event.metaKey, event.ctrlKey)) {
+            editor.dispatchCommand(PASTE_COMMAND, event);
+            return;
+          }
+        }
+        if (event.metaKey || event.ctrlKey || event.altKey) {
+          return;
+        }
+        const cell = getCell(rows, primarySelectedCellID, cellCoordMap);
+        loadContentIntoCell(cell);
+        setIsEditing(true);
+        setSelectedCellIDs(NO_CELLS);
+      };
+      doc.addEventListener("dblclick", handleDblClick);
+      doc.addEventListener("keydown", handleKeyDown);
+      return () => {
+        doc.removeEventListener("dblclick", handleDblClick);
+        doc.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [cellEditor, editor, isEditing, rows, primarySelectedCellID, cellCoordMap]);
+  const updateCellsByID = useCallback(
+    (ids, fn) => {
+      $updateCells(rows, ids, cellCoordMap, cellEditor, updateTableNode, fn);
+    },
+    [cellCoordMap, cellEditor, rows, updateTableNode]
+  );
+  const clearCellsCommand = useCallback(() => {
+    if (primarySelectedCellID !== null && !isEditing) {
+      updateCellsByID([primarySelectedCellID, ...selectedCellIDs], () => {
+        const root = $getRoot();
+        root.clear();
+        root.append($createParagraphNode());
+      });
+      return true;
+    } else if (isSelected) {
+      updateTableNode((tableNode) => {
+        $addUpdateTag("history-push");
+        tableNode.selectNext();
+        tableNode.remove();
+      });
+    }
+    return false;
+  }, [isEditing, isSelected, primarySelectedCellID, selectedCellIDs, updateCellsByID, updateTableNode]);
+  useEffect(() => {
+    const tableElem = tableRef.current;
+    if (tableElem === null) {
+      return;
+    }
+    const copyDataToClipboard = (event, htmlString, lexicalString, plainTextString) => {
+      const clipboardData = event instanceof KeyboardEvent ? null : event.clipboardData;
+      event.preventDefault();
+      if (clipboardData != null) {
+        clipboardData.setData("text/html", htmlString);
+        clipboardData.setData("text/plain", plainTextString);
+        clipboardData.setData("application/x-lexical-editor", lexicalString);
+      } else {
+        const clipboard = navigator.clipboard;
+        if (clipboard != null) {
+          const data = [
+            new ClipboardItem({
+              "text/html": new Blob([htmlString], {
+                type: "text/html"
+              })
+            })
+          ];
+          clipboard.write(data);
+        }
+      }
+    };
+    const getTypeFromObject = async (clipboardData, type) => {
+      try {
+        return clipboardData instanceof DataTransfer ? clipboardData.getData(type) : clipboardData instanceof ClipboardItem ? await (await clipboardData.getType(type)).text() : "";
+      } catch {
+        return "";
+      }
+    };
+    const pasteContent = async (event) => {
+      let clipboardData = (event instanceof InputEvent ? null : event.clipboardData) || null;
+      if (primarySelectedCellID !== null && cellEditor !== null) {
+        event.preventDefault();
+        if (clipboardData === null) {
+          try {
+            const items = await navigator.clipboard.read();
+            clipboardData = items[0];
+          } catch {
+          }
+        }
+        const lexicalString = clipboardData !== null ? await getTypeFromObject(clipboardData, "application/x-lexical-editor") : "";
+        if (lexicalString) {
+          try {
+            const payload = JSON.parse(lexicalString);
+            if (payload.namespace === editor._config.namespace && Array.isArray(payload.nodes)) {
+              $updateCells(rows, [primarySelectedCellID], cellCoordMap, cellEditor, updateTableNode, () => {
+                const root = $getRoot();
+                root.clear();
+                root.append($createParagraphNode());
+                root.selectEnd();
+                const nodes = $generateNodesFromSerializedNodes(payload.nodes);
+                const sel = $getSelection();
+                if ($isRangeSelection(sel)) {
+                  $insertGeneratedNodes(cellEditor, nodes, sel);
+                }
+              });
+              return;
+            }
+          } catch {
+          }
+        }
+        const htmlString = clipboardData !== null ? await getTypeFromObject(clipboardData, "text/html") : "";
+        if (htmlString) {
+          try {
+            const parser = new DOMParser();
+            const dom = parser.parseFromString(htmlString, "text/html");
+            const possibleTableElement = dom.querySelector("table");
+            if (possibleTableElement != null) {
+              const pasteRows = extractRowsFromHTML(possibleTableElement);
+              updateTableNode((tableNode) => {
+                const [x, y] = cellCoordMap.get(primarySelectedCellID);
+                $addUpdateTag("history-push");
+                tableNode.mergeRows(x, y, pasteRows);
+              });
+              return;
+            }
+            $updateCells(rows, [primarySelectedCellID], cellCoordMap, cellEditor, updateTableNode, () => {
+              const root = $getRoot();
+              root.clear();
+              root.append($createParagraphNode());
+              root.selectEnd();
+              const nodes = $generateNodesFromDOM(editor, dom);
+              const sel = $getSelection();
+              if ($isRangeSelection(sel)) {
+                $insertGeneratedNodes(cellEditor, nodes, sel);
+              }
+            });
+            return;
+          } catch {
+          }
+        }
+        const text = clipboardData !== null ? await getTypeFromObject(clipboardData, "text/plain") : "";
+        if (text != null) {
+          $updateCells(rows, [primarySelectedCellID], cellCoordMap, cellEditor, updateTableNode, () => {
+            const root = $getRoot();
+            root.clear();
+            root.selectEnd();
+            const sel = $getSelection();
+            if (sel !== null) {
+              sel.insertRawText(text);
+            }
+          });
+        }
+      }
+    };
+    const copyPrimaryCell = (event) => {
+      if (primarySelectedCellID !== null && cellEditor !== null) {
+        const cell = getCell(rows, primarySelectedCellID, cellCoordMap);
+        const json = cell.json;
+        const htmlString = cellHTMLCache.get(json) || null;
+        if (htmlString === null) {
+          return;
+        }
+        const editorState = cellEditor.parseEditorState(json);
+        const plainTextString = editorState.read(() => $getRoot().getTextContent());
+        const lexicalString = editorState.read(() => {
+          return JSON.stringify($generateJSONFromSelectedNodes(cellEditor, null));
+        });
+        copyDataToClipboard(event, htmlString, lexicalString, plainTextString);
+      }
+    };
+    const copyCellRange = (event) => {
+      const lastCellID = lastCellIDRef.current;
+      if (primarySelectedCellID !== null && cellEditor !== null && lastCellID !== null) {
+        const rect = getSelectedRect(primarySelectedCellID, lastCellID, cellCoordMap);
+        if (rect === null) {
+          return;
+        }
+        const dom = exportTableCellsToHTML(rows, rect);
+        const htmlString = dom.outerHTML;
+        const plainTextString = dom.outerText;
+        const tableNodeJSON = editor.getEditorState().read(() => {
+          const tableNode = $getNodeByKey(nodeKey);
+          return tableNode.exportJSON();
+        });
+        tableNodeJSON.rows = extractCellsFromRows(rows, rect);
+        const lexicalJSON = {
+          namespace: cellEditor._config.namespace,
+          nodes: [tableNodeJSON]
+        };
+        const lexicalString = JSON.stringify(lexicalJSON);
+        copyDataToClipboard(event, htmlString, lexicalString, plainTextString);
+      }
+    };
+    const handlePaste = (event, activeEditor) => {
+      const selection = $getSelection();
+      if (primarySelectedCellID !== null && !isEditing && selection === null && activeEditor === editor) {
+        pasteContent(event);
+        mouseDownRef.current = false;
+        setSelectedCellIDs(NO_CELLS);
+        return true;
+      }
+      return false;
+    };
+    const handleCopy = (event, activeEditor) => {
+      const selection = $getSelection();
+      if (primarySelectedCellID !== null && !isEditing && selection === null && activeEditor === editor) {
+        if (selectedCellIDs.length === 0) {
+          copyPrimaryCell(event);
+        } else {
+          copyCellRange(event);
+        }
+        return true;
+      }
+      return false;
+    };
+    return mergeRegister(
+      editor.registerCommand(
+        CLICK_COMMAND,
+        () => {
+          const selection = $getSelection();
+          if ($isNodeSelection(selection)) {
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(PASTE_COMMAND, handlePaste, COMMAND_PRIORITY_LOW),
+      editor.registerCommand(COPY_COMMAND, handleCopy, COMMAND_PRIORITY_LOW),
+      editor.registerCommand(
+        CUT_COMMAND,
+        (event, activeEditor) => {
+          if (handleCopy(event, activeEditor)) {
+            clearCellsCommand();
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(KEY_BACKSPACE_COMMAND, clearCellsCommand, COMMAND_PRIORITY_LOW),
+      editor.registerCommand(KEY_DELETE_COMMAND, clearCellsCommand, COMMAND_PRIORITY_LOW),
+      editor.registerCommand(
+        FORMAT_TEXT_COMMAND,
+        (payload) => {
+          if (primarySelectedCellID !== null && !isEditing) {
+            $updateCells(
+              rows,
+              [primarySelectedCellID, ...selectedCellIDs],
+              cellCoordMap,
+              cellEditor,
+              updateTableNode,
+              () => {
+                const sel = $createSelectAll();
+                sel.formatText(payload);
+              }
+            );
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_ENTER_COMMAND,
+        (event, targetEditor) => {
+          const selection = $getSelection();
+          if (primarySelectedCellID === null && !isEditing && $isNodeSelection(selection) && selection.has(nodeKey) && selection.getNodes().length === 1 && targetEditor === editor) {
+            const firstCellID = rows[0].cells[0].id;
+            setPrimarySelectedCellID(firstCellID);
+            focusCell(tableElem, firstCellID);
+            event.preventDefault();
+            event.stopPropagation();
+            clearSelection();
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_TAB_COMMAND,
+        (event) => {
+          const selection = $getSelection();
+          if (!isEditing && selection === null && primarySelectedCellID !== null) {
+            const isBackward = event.shiftKey;
+            const [x, y] = cellCoordMap.get(primarySelectedCellID);
+            event.preventDefault();
+            let nextX = null;
+            let nextY = null;
+            if (x === 0 && isBackward) {
+              if (y !== 0) {
+                nextY = y - 1;
+                nextX = rows[nextY].cells.length - 1;
+              }
+            } else if (x === rows[y].cells.length - 1 && !isBackward) {
+              if (y !== rows.length - 1) {
+                nextY = y + 1;
+                nextX = 0;
+              }
+            } else if (!isBackward) {
+              nextX = x + 1;
+              nextY = y;
+            } else {
+              nextX = x - 1;
+              nextY = y;
+            }
+            if (nextX !== null && nextY !== null) {
+              modifySelectedCells(nextX, nextY, false);
+              return true;
+            }
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_ARROW_UP_COMMAND,
+        (event, targetEditor) => {
+          const selection = $getSelection();
+          if (!isEditing && selection === null) {
+            const extend = event.shiftKey;
+            const cellID = extend ? lastCellIDRef.current || primarySelectedCellID : primarySelectedCellID;
+            if (cellID !== null) {
+              const [x, y] = cellCoordMap.get(cellID);
+              if (y !== 0) {
+                modifySelectedCells(x, y - 1, extend);
+                return true;
+              }
+            }
+          }
+          if (!$isRangeSelection(selection) || targetEditor !== cellEditor) {
+            return false;
+          }
+          if (selection.isCollapsed() && selection.anchor.getNode().getTopLevelElementOrThrow().getPreviousSibling() === null) {
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_ARROW_DOWN_COMMAND,
+        (event, targetEditor) => {
+          const selection = $getSelection();
+          if (!isEditing && selection === null) {
+            const extend = event.shiftKey;
+            const cellID = extend ? lastCellIDRef.current || primarySelectedCellID : primarySelectedCellID;
+            if (cellID !== null) {
+              const [x, y] = cellCoordMap.get(cellID);
+              if (y !== rows.length - 1) {
+                modifySelectedCells(x, y + 1, extend);
+                return true;
+              }
+            }
+          }
+          if (!$isRangeSelection(selection) || targetEditor !== cellEditor) {
+            return false;
+          }
+          if (selection.isCollapsed() && selection.anchor.getNode().getTopLevelElementOrThrow().getNextSibling() === null) {
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_ARROW_LEFT_COMMAND,
+        (event, targetEditor) => {
+          const selection = $getSelection();
+          if (!isEditing && selection === null) {
+            const extend = event.shiftKey;
+            const cellID = extend ? lastCellIDRef.current || primarySelectedCellID : primarySelectedCellID;
+            if (cellID !== null) {
+              const [x, y] = cellCoordMap.get(cellID);
+              if (x !== 0) {
+                modifySelectedCells(x - 1, y, extend);
+                return true;
+              }
+            }
+          }
+          if (!$isRangeSelection(selection) || targetEditor !== cellEditor) {
+            return false;
+          }
+          if (selection.isCollapsed() && selection.anchor.offset === 0) {
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_ARROW_RIGHT_COMMAND,
+        (event, targetEditor) => {
+          const selection = $getSelection();
+          if (!isEditing && selection === null) {
+            const extend = event.shiftKey;
+            const cellID = extend ? lastCellIDRef.current || primarySelectedCellID : primarySelectedCellID;
+            if (cellID !== null) {
+              const [x, y] = cellCoordMap.get(cellID);
+              if (x !== rows[y].cells.length - 1) {
+                modifySelectedCells(x + 1, y, extend);
+                return true;
+              }
+            }
+          }
+          if (!$isRangeSelection(selection) || targetEditor !== cellEditor) {
+            return false;
+          }
+          if (selection.isCollapsed()) {
+            const anchor = selection.anchor;
+            if (anchor.type === "text" && anchor.offset === anchor.getNode().getTextContentSize() || anchor.type === "element" && anchor.offset === anchor.getNode().getChildrenSize()) {
+              event.preventDefault();
+              return true;
+            }
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_ESCAPE_COMMAND,
+        (event, targetEditor) => {
+          const selection = $getSelection();
+          if (!isEditing && selection === null && targetEditor === editor) {
+            setSelected(true);
+            setPrimarySelectedCellID(null);
+            selectTable();
+            return true;
+          }
+          if (!$isRangeSelection(selection)) {
+            return false;
+          }
+          if (isEditing) {
+            saveEditorToJSON();
+            setIsEditing(false);
+            if (primarySelectedCellID !== null) {
+              setTimeout(() => {
+                focusCell(tableElem, primarySelectedCellID);
+              }, 20);
+            }
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      )
+    );
+  }, [
+    cellCoordMap,
+    cellEditor,
+    clearCellsCommand,
+    clearSelection,
+    editor,
+    isEditing,
+    modifySelectedCells,
+    nodeKey,
+    primarySelectedCellID,
+    rows,
+    saveEditorToJSON,
+    selectTable,
+    selectedCellIDs,
+    setSelected,
+    updateTableNode
+  ]);
+  if (cellEditor === null) {
+    return;
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    style: { position: "relative" },
+    children: [
+      /* @__PURE__ */ jsx("table", {
+        className: `${theme.table} ${isSelected ? theme.tableSelected : ""}`,
+        ref: tableRef,
+        tabIndex: -1,
+        children: /* @__PURE__ */ jsx("tbody", {
+          children: rows.map((row) => /* @__PURE__ */ jsx("tr", {
+            className: theme.tableRow,
+            children: row.cells.map((cell) => {
+              const { id } = cell;
+              return /* @__PURE__ */ jsx(TableCell, {
+                cell,
+                theme,
+                isSelected: selectedCellSet.has(id),
+                isPrimarySelected: primarySelectedCellID === id,
+                isEditing,
+                sortingOptions,
+                cellEditor,
+                updateCellsByID,
+                updateTableNode,
+                cellCoordMap,
+                rows,
+                setSortingOptions
+              }, id);
+            })
+          }, row.id))
+        })
+      }),
+      showAddColumns && /* @__PURE__ */ jsx("button", {
+        className: theme.tableAddColumns,
+        onClick: addColumns
+      }),
+      showAddRows && /* @__PURE__ */ jsx("button", {
+        className: theme.tableAddRows,
+        onClick: addRows,
+        ref: addRowsRef
+      }),
+      resizingID !== null && /* @__PURE__ */ jsx("div", {
+        className: theme.tableResizeRuler,
+        ref: tableResizerRulerRef
+      })
+    ]
+  });
+}
+export {
+  TableComponent as default
+};