@kopexa/extension-table 17.0.46 → 17.1.0

package/dist/chunk-2NBDRVYL.mjs

@@ -0,0 +1,428 @@
+"use client";
+import {
+  domCellAround,
+  getTable,
+  rectEq
+} from "./chunk-5B5XIL2G.mjs";
+import {
+  useResizeOverlay
+} from "./chunk-J4VOSZCZ.mjs";
+
+// src/ui/table-selection-overlay.tsx
+import { FloatingPortal, useFloating } from "@floating-ui/react";
+import { useTiptapEditor } from "@kopexa/editor-utils";
+import { CellSelection, cellAround } from "@tiptap/pm/tables";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CORNER_DETECTION_TOLERANCE = 5;
+var getCellAtCoordinates = (state, view, x, y) => {
+  var _a;
+  const pos = (_a = view.posAtCoords({ left: x, top: y })) == null ? void 0 : _a.pos;
+  if (pos == null) return null;
+  const $pos = state.doc.resolve(pos);
+  return cellAround($pos);
+};
+var getSelectionBoundingRect = (view, selection) => {
+  if (!(selection instanceof CellSelection)) return null;
+  const cells = [];
+  selection.forEachCell((_node, pos) => {
+    const dom = view.nodeDOM(pos);
+    if (dom) cells.push(dom);
+  });
+  if (cells.length === 0) return null;
+  const bounds = {
+    left: Infinity,
+    top: Infinity,
+    right: -Infinity,
+    bottom: -Infinity
+  };
+  cells.forEach((cell) => {
+    const rect = cell.getBoundingClientRect();
+    bounds.left = Math.min(bounds.left, rect.left);
+    bounds.top = Math.min(bounds.top, rect.top);
+    bounds.right = Math.max(bounds.right, rect.right);
+    bounds.bottom = Math.max(bounds.bottom, rect.bottom);
+  });
+  return new DOMRect(
+    bounds.left,
+    bounds.top,
+    bounds.right - bounds.left,
+    bounds.bottom - bounds.top
+  );
+};
+var getSingleCellBoundingRect = (view, cellPos) => {
+  const cellDom = view.nodeDOM(cellPos);
+  if (!cellDom) return null;
+  const rect = cellDom.getBoundingClientRect();
+  return new DOMRect(rect.left, rect.top, rect.width, rect.height);
+};
+var createVirtualReference = (rect) => ({
+  getBoundingClientRect: () => rect
+});
+var findCornerCells = (view, selection, selectionRect) => {
+  const corners = {
+    topLeft: null,
+    topRight: null,
+    bottomLeft: null,
+    bottomRight: null
+  };
+  const isNearEdge = (value1, value2) => Math.abs(value1 - value2) < CORNER_DETECTION_TOLERANCE;
+  selection.forEachCell((_node, pos) => {
+    const dom = view.nodeDOM(pos);
+    if (!dom) return;
+    const cellRect = dom.getBoundingClientRect();
+    if (isNearEdge(cellRect.left, selectionRect.left) && isNearEdge(cellRect.top, selectionRect.top)) {
+      corners.topLeft = pos;
+    }
+    if (isNearEdge(cellRect.right, selectionRect.right) && isNearEdge(cellRect.top, selectionRect.top)) {
+      corners.topRight = pos;
+    }
+    if (isNearEdge(cellRect.left, selectionRect.left) && isNearEdge(cellRect.bottom, selectionRect.bottom)) {
+      corners.bottomLeft = pos;
+    }
+    if (isNearEdge(cellRect.right, selectionRect.right) && isNearEdge(cellRect.bottom, selectionRect.bottom)) {
+      corners.bottomRight = pos;
+    }
+  });
+  return corners;
+};
+var getAnchorCellForHandle = (view, selection, selectionRect, handle) => {
+  if (!handle) return null;
+  const corners = findCornerCells(view, selection, selectionRect);
+  const anchorMap = {
+    tl: "bottomRight",
+    tr: "bottomLeft",
+    bl: "topRight",
+    br: "topLeft"
+  };
+  const anchorPos = corners[anchorMap[handle]];
+  return anchorPos ? { pos: anchorPos } : null;
+};
+var createHandleStyles = () => ({
+  position: "absolute",
+  width: 15,
+  height: 15,
+  borderRadius: "50%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: "transparent",
+  pointerEvents: "auto",
+  zIndex: 10
+});
+var createCornerHandleStyles = (position, isActiveHandle, isDisabled = false) => {
+  const baseStyles = createHandleStyles();
+  const positionStyles = {
+    tl: {
+      top: -7.5,
+      left: -7.5,
+      cursor: isDisabled ? "default" : "nwse-resize"
+    },
+    tr: {
+      top: -7.5,
+      right: -7.5,
+      cursor: isDisabled ? "default" : "nesw-resize"
+    },
+    bl: {
+      bottom: -7.5,
+      left: -7.5,
+      cursor: isDisabled ? "default" : "nesw-resize"
+    },
+    br: {
+      bottom: -7.5,
+      right: -7.5,
+      cursor: isDisabled ? "default" : "nwse-resize"
+    }
+  };
+  return {
+    ...baseStyles,
+    ...positionStyles[position],
+    opacity: isDisabled ? 0.3 : isActiveHandle ? 1 : 0.5,
+    pointerEvents: isDisabled ? "none" : "auto"
+  };
+};
+var TableSelectionOverlay = ({
+  editor: providedEditor,
+  cellMenu: CellMenu,
+  showResizeHandles = true,
+  onMenuOpenChange
+}) => {
+  const { editor } = useTiptapEditor(providedEditor);
+  const [isVisible, setIsVisible] = useState(true);
+  const [selectionRect, setSelectionRect] = useState(null);
+  const [activeHandle, setActiveHandle] = useState(null);
+  const [tableDom, setTableDom] = useState(null);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const anchorCellRef = useRef(null);
+  const activeHandleRef = useRef(null);
+  const containerRef = useRef(null);
+  const { refs, floatingStyles, update } = useFloating({
+    placement: "top-start"
+  });
+  useEffect(() => {
+    if (selectionRect) {
+      const virtualReference = createVirtualReference(selectionRect);
+      refs.setPositionReference(virtualReference);
+    }
+  }, [selectionRect, refs]);
+  const updateSelectionRect = useCallback(() => {
+    if (!editor) return;
+    const { selection } = editor.state;
+    if (selection instanceof CellSelection) {
+      const rect = getSelectionBoundingRect(editor.view, selection);
+      if (!rect) {
+        setIsVisible(false);
+        setSelectionRect((prev) => prev ? null : prev);
+        return;
+      }
+      setSelectionRect((prev) => rectEq(prev, rect) ? prev : rect);
+      setIsVisible(true);
+      return;
+    }
+    const { $anchor } = selection;
+    const cell = cellAround($anchor);
+    if (cell) {
+      const rect = getSingleCellBoundingRect(editor.view, cell.pos);
+      if (rect) {
+        setSelectionRect((prev) => rectEq(prev, rect) ? prev : rect);
+        setIsVisible(true);
+        return;
+      }
+    }
+    setIsVisible(false);
+    setSelectionRect((prev) => prev ? null : prev);
+  }, [editor]);
+  useResizeOverlay(editor, updateSelectionRect);
+  useEffect(() => {
+    if (update && selectionRect) {
+      update();
+    }
+  }, [update, selectionRect]);
+  const createResizeHandler = useCallback(
+    (handle) => (event) => {
+      if (!editor || !handle || !selectionRect || isMenuOpen || !showResizeHandles)
+        return;
+      event.preventDefault();
+      event.stopPropagation();
+      const { selection } = editor.state;
+      let cellSelection = null;
+      if (selection instanceof CellSelection) {
+        cellSelection = selection;
+      } else {
+        const { $anchor } = selection;
+        const cell = cellAround($anchor);
+        if (cell) {
+          try {
+            cellSelection = CellSelection.create(
+              editor.state.doc,
+              cell.pos,
+              cell.pos
+            );
+          } catch (error) {
+            console.warn(
+              "Could not create single cell selection for resize:",
+              error
+            );
+            return;
+          }
+        }
+      }
+      if (!cellSelection) return;
+      const anchorCell = getAnchorCellForHandle(
+        editor.view,
+        cellSelection,
+        selectionRect,
+        handle
+      );
+      if (!anchorCell) return;
+      setActiveHandle(handle);
+      activeHandleRef.current = handle;
+      anchorCellRef.current = anchorCell.pos;
+      const handleMouseMove = (mouseEvent) => {
+        if (!editor || anchorCellRef.current == null) return;
+        const target = domCellAround(mouseEvent.target);
+        if (!target || target.type !== "cell") return;
+        const targetCell = getCellAtCoordinates(
+          editor.state,
+          editor.view,
+          mouseEvent.clientX,
+          mouseEvent.clientY
+        );
+        if (!targetCell) return;
+        try {
+          const newSelection = CellSelection.create(
+            editor.state.doc,
+            anchorCellRef.current,
+            targetCell.pos
+          );
+          const transaction = editor.state.tr.setSelection(newSelection);
+          editor.view.dispatch(transaction);
+        } catch (error) {
+          console.debug("Invalid cell selection during resize:", error);
+        }
+      };
+      const handleMouseUp = () => {
+        setActiveHandle(null);
+        activeHandleRef.current = null;
+        anchorCellRef.current = null;
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    },
+    [editor, selectionRect, isMenuOpen, showResizeHandles]
+  );
+  const updateTableDom = useCallback(() => {
+    if (!editor) {
+      setTableDom(null);
+      return;
+    }
+    const table = getTable(editor);
+    if (!table) {
+      setTableDom(null);
+      return;
+    }
+    setTableDom((prev) => {
+      const currentDom = prev;
+      const newDom = editor.view.nodeDOM(table.pos);
+      return currentDom === newDom ? currentDom : newDom;
+    });
+  }, [editor]);
+  const handleMenuOpenChange = useCallback(
+    (isOpen) => {
+      setIsMenuOpen(isOpen);
+      onMenuOpenChange == null ? void 0 : onMenuOpenChange(isOpen);
+    },
+    [onMenuOpenChange]
+  );
+  useEffect(() => {
+    if (!editor) return;
+    const handleSelectionUpdate = () => {
+      updateSelectionRect();
+      updateTableDom();
+    };
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    updateSelectionRect();
+    updateTableDom();
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, updateSelectionRect, updateTableDom]);
+  useEffect(() => {
+    const c = tableDom == null ? void 0 : tableDom.querySelector(
+      ".table-selection-overlay-container"
+    );
+    containerRef.current = c != null ? c : null;
+  }, [tableDom]);
+  if (!isVisible || !selectionRect) {
+    return null;
+  }
+  if (!editor) return null;
+  const renderCellMenu = () => {
+    if (!CellMenu) return null;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        onMouseDown: (e) => e.stopPropagation(),
+        style: { pointerEvents: "auto" },
+        children: /* @__PURE__ */ jsx(CellMenu, { onOpenChange: handleMenuOpenChange, editor })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(FloatingPortal, { root: containerRef.current, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: refs.setFloating,
+      style: {
+        ...floatingStyles,
+        pointerEvents: "none",
+        zIndex: 10
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "tiptap-table-selection-overlay", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              width: selectionRect.width,
+              height: selectionRect.height,
+              zIndex: 2,
+              borderRadius: 2,
+              top: 0,
+              left: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              width: selectionRect.width,
+              height: selectionRect.height,
+              border: `2px solid var(--color-primary-400)`,
+              borderRadius: 2,
+              zIndex: 3,
+              top: 0,
+              left: 0
+            },
+            children: [
+              renderCellMenu(),
+              showResizeHandles && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: createCornerHandleStyles(
+                      "tl",
+                      !activeHandle || activeHandle === "tl",
+                      isMenuOpen
+                    ),
+                    onMouseDown: createResizeHandler("tl")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: createCornerHandleStyles(
+                      "tr",
+                      !activeHandle || activeHandle === "tr",
+                      isMenuOpen
+                    ),
+                    onMouseDown: createResizeHandler("tr")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: createCornerHandleStyles(
+                      "bl",
+                      !activeHandle || activeHandle === "bl",
+                      isMenuOpen
+                    ),
+                    onMouseDown: createResizeHandler("bl")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: createCornerHandleStyles(
+                      "br",
+                      !activeHandle || activeHandle === "br",
+                      isMenuOpen
+                    ),
+                    onMouseDown: createResizeHandler("br")
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] })
+    }
+  ) });
+};
+
+export {
+  TableSelectionOverlay
+};