@crystallize/design-system 1.7.0 → 1.8.0

package/dist/TableComponent-QINOO453.mjs

@@ -1,1377 +0,0 @@
-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
-};