@kopexa/extension-table 17.0.46 → 17.1.0

package/dist/chunk-62B2LU2Q.mjs

@@ -0,0 +1,603 @@
+"use client";
+import {
+  useTableMoveRowColumn
+} from "./chunk-G6GHC2WO.mjs";
+import {
+  useTableSortRowColumn
+} from "./chunk-6FHFDGJO.mjs";
+import {
+  useTableAddRowColumn
+} from "./chunk-VIBVRWS4.mjs";
+import {
+  useTableClearRowColumnContent
+} from "./chunk-4QSZXHZO.mjs";
+import {
+  useTableDeleteRowColumn
+} from "./chunk-ZVPJDJBO.mjs";
+import {
+  useTableDuplicateRowColumn
+} from "./chunk-CPDSPBS6.mjs";
+import {
+  useTableHeaderRowColumn
+} from "./chunk-CD62W5C3.mjs";
+import {
+  messages
+} from "./chunk-CN73TYHV.mjs";
+import {
+  dragEnd
+} from "./chunk-3SWV7BGP.mjs";
+import {
+  selectCellsByCoords
+} from "./chunk-5B5XIL2G.mjs";
+
+// src/ui/table-handle-menu.tsx
+import {
+  DropdownMenu
+} from "@kopexa/dropdown-menu";
+import { isValidPosition, useTiptapEditor } from "@kopexa/editor-utils";
+import { useSafeIntl } from "@kopexa/i18n";
+import { createContext } from "@kopexa/react-utils";
+import { cn } from "@kopexa/shared-utils";
+import { extensionTableHandleMenuContent } from "@kopexa/theme";
+import { TableMap } from "@tiptap/pm/tables";
+import { useCallback, useMemo, useState } from "react";
+
+// ../../utilities/icons/src/check.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var CheckIcon = (props) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Check Icon" }),
+        /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+      ]
+    }
+  );
+};
+
+// ../../utilities/icons/src/more-vertical-icon.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MoreVerticalIcon = ({ size = 24, ...props }) => {
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2("title", { children: "More Vertical Icon" }),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M10 5C10 3.89543 10.8954 3 12 3C13.1046 3 14 3.89543 14 5C14 6.10457 13.1046 7 12 7C10.8954 7 10 6.10457 10 5Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M10 19C10 17.8954 10.8954 17 12 17C13.1046 17 14 17.8954 14 19C14 20.1046 13.1046 21 12 21C10.8954 21 10 20.1046 10 19Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/ui/table-handle-menu.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var [TableHandleContextProvider, useTableHandleContext] = createContext({
+  strict: true
+});
+var TableHandleMenu = ({
+  editor: providedEditor,
+  orientation,
+  index,
+  tableNode,
+  tablePos,
+  onToggleOtherHandle,
+  onOpenChange,
+  dragStart
+}) => {
+  const { editor } = useTiptapEditor(providedEditor);
+  const contextValue = useMemo(
+    () => ({
+      editor,
+      orientation,
+      index,
+      tableNode,
+      tablePos
+    }),
+    [editor, orientation, index, tableNode, tablePos]
+  );
+  return /* @__PURE__ */ jsx3(TableHandleContextProvider, { value: contextValue, children: /* @__PURE__ */ jsx3(
+    TableHandleMenuContent,
+    {
+      onToggleOtherHandle,
+      onOpenChange,
+      dragStart
+    }
+  ) });
+};
+var ariaLabelMessageKeys = {
+  row: messages.row_actions,
+  column: messages.column_actions
+};
+var TableHandleMenuContent = ({
+  onToggleOtherHandle,
+  onOpenChange,
+  dragStart
+}) => {
+  const { editor, orientation } = useTableHandleContext();
+  const intl = useSafeIntl();
+  const {
+    isMenuOpen,
+    isDragging,
+    setIsDragging,
+    menuPlacement,
+    handleMenuToggle
+  } = useTableHandleMenu(onToggleOtherHandle, onOpenChange);
+  const ariaLabel = intl.formatMessage(ariaLabelMessageKeys[orientation]);
+  const styles = extensionTableHandleMenuContent();
+  const handleDragStart = useCallback(
+    (e) => {
+      setIsDragging(true);
+      dragStart == null ? void 0 : dragStart(e);
+    },
+    [dragStart, setIsDragging]
+  );
+  const handleDragEnd = useCallback(() => {
+    setIsDragging(false);
+    if (editor) dragEnd(editor);
+  }, [setIsDragging, editor]);
+  return /* @__PURE__ */ jsxs3(DropdownMenu.Root, { open: isMenuOpen, onOpenChange: handleMenuToggle, children: [
+    /* @__PURE__ */ jsx3(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        "data-dragging": isDragging ? "true" : "false",
+        "data-orientation": orientation,
+        "data-open": isMenuOpen ? "true" : "false",
+        className: styles.root(),
+        draggable: true,
+        "aria-label": ariaLabel,
+        "aria-haspopup": "menu",
+        "aria-expanded": isMenuOpen,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        children: /* @__PURE__ */ jsx3(
+          MoreVerticalIcon,
+          {
+            "data-orientation": orientation,
+            className: styles.icon()
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx3(DropdownMenu.Content, { side: menuPlacement, children: /* @__PURE__ */ jsx3(TableActionGroup, {}) })
+  ] });
+};
+var MENU_PLACEMENT_MAP = {
+  row: "top",
+  column: "bottom"
+};
+function useTableHandleMenu(onToggleOtherHandle, onOpenChange) {
+  const { editor, orientation, index, tableNode, tablePos } = useTableHandleContext();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const menuPlacement = useMemo(
+    () => MENU_PLACEMENT_MAP[orientation],
+    [orientation]
+  );
+  const selectRowOrColumn = useCallback(() => {
+    if (!editor || !tableNode || !isValidPosition(tablePos) || !isValidPosition(index))
+      return;
+    try {
+      const { width, height } = TableMap.get(tableNode);
+      const start = orientation === "row" ? { row: index, col: 0 } : { row: 0, col: index };
+      const end = orientation === "row" ? { row: index, col: width - 1 } : { row: height - 1, col: index };
+      selectCellsByCoords(editor, tablePos, [start, end], {
+        mode: "dispatch",
+        dispatch: editor.view.dispatch.bind(editor.view)
+      });
+    } catch (error) {
+      console.warn("Failed to select row/column:", error);
+    }
+  }, [editor, tableNode, tablePos, orientation, index]);
+  const handleMenuToggle = useCallback(
+    (isOpen) => {
+      if (!editor) return;
+      setIsMenuOpen(isOpen);
+      onOpenChange == null ? void 0 : onOpenChange(isOpen);
+      if (isOpen) {
+        editor.commands.freezeHandles();
+        selectRowOrColumn();
+        onToggleOtherHandle == null ? void 0 : onToggleOtherHandle(false);
+      } else {
+        editor.commands.unfreezeHandles();
+        onToggleOtherHandle == null ? void 0 : onToggleOtherHandle(true);
+      }
+    },
+    [editor, onOpenChange, onToggleOtherHandle, selectRowOrColumn]
+  );
+  const resetMenu = useCallback(() => {
+    if (!editor) return;
+    setIsMenuOpen(false);
+    onOpenChange == null ? void 0 : onOpenChange(false);
+    editor.commands.unfreezeHandles();
+    onToggleOtherHandle == null ? void 0 : onToggleOtherHandle(true);
+  }, [editor, onOpenChange, onToggleOtherHandle]);
+  return {
+    isMenuOpen,
+    isDragging,
+    setIsDragging,
+    menuPlacement,
+    handleMenuToggle,
+    resetMenu
+  };
+}
+var TableActionGroup = () => {
+  const { index } = useTableHandleContext();
+  const {
+    deleteAction,
+    duplicateAction,
+    clearContentAction,
+    headerAction,
+    addItems,
+    moveItems,
+    sortItems
+  } = useTableActionItems();
+  const hasActions = deleteAction.isVisible || duplicateAction.isVisible || clearContentAction.isVisible;
+  const hasAddItems = addItems.length > 0;
+  const hasMoveItems = moveItems.length > 0;
+  const hasSortItems = sortItems.length > 0;
+  const hasHeaderAction = headerAction.isVisible && index === 0;
+  if (!hasActions && !hasAddItems && !hasMoveItems && !hasSortItems && !hasHeaderAction) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    hasHeaderAction && /* @__PURE__ */ jsxs3(DropdownMenu.Group, { children: [
+      /* @__PURE__ */ jsx3(
+        TableActionItem,
+        {
+          icon: headerAction.Icon,
+          label: headerAction.label,
+          disabled: !headerAction.canToggleHeader,
+          isActive: headerAction.isActive,
+          onClick: headerAction.handleToggle
+        }
+      ),
+      /* @__PURE__ */ jsx3(DropdownMenu.Separator, {})
+    ] }),
+    hasMoveItems && /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsx3(DropdownMenu.Group, { children: moveItems.map((item, i) => /* @__PURE__ */ jsx3(TableActionItem, { ...item }, `move-${i.toString()}`)) }),
+      /* @__PURE__ */ jsx3(DropdownMenu.Separator, {})
+    ] }),
+    hasAddItems && /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsx3(DropdownMenu.Group, { children: addItems.map((item, i) => /* @__PURE__ */ jsx3(TableActionItem, { ...item }, `add-${i.toString()}`)) }),
+      /* @__PURE__ */ jsx3(DropdownMenu.Separator, {})
+    ] }),
+    hasSortItems && /* @__PURE__ */ jsxs3(Fragment, { children: [
+      /* @__PURE__ */ jsx3(DropdownMenu.Group, { children: sortItems.map((item, i) => /* @__PURE__ */ jsx3(TableActionItem, { ...item }, `sort-${i.toString()}`)) }),
+      /* @__PURE__ */ jsx3(DropdownMenu.Separator, {})
+    ] }),
+    hasActions && /* @__PURE__ */ jsxs3(DropdownMenu.Group, { children: [
+      duplicateAction.isVisible && /* @__PURE__ */ jsx3(
+        TableActionItem,
+        {
+          icon: duplicateAction.Icon,
+          label: duplicateAction.label,
+          disabled: !duplicateAction.canDuplicateRowColumn,
+          onClick: duplicateAction.handleDuplicate
+        }
+      ),
+      deleteAction.isVisible && /* @__PURE__ */ jsx3(
+        TableActionItem,
+        {
+          icon: deleteAction.Icon,
+          label: deleteAction.label,
+          disabled: !deleteAction.canDeleteRowColumn,
+          onClick: deleteAction.handleDelete
+        }
+      )
+    ] })
+  ] });
+};
+var TableActionItem = ({
+  icon: Icon,
+  label,
+  onClick,
+  disabled = false,
+  isActive = false,
+  shortcutBadge
+}) => /* @__PURE__ */ jsxs3(DropdownMenu.Item, { disabled, onSelect: onClick, children: [
+  /* @__PURE__ */ jsx3(Icon, {}),
+  /* @__PURE__ */ jsx3("span", { children: label }),
+  shortcutBadge,
+  /* @__PURE__ */ jsx3(
+    "span",
+    {
+      className: cn(
+        "ml-auto",
+        isActive && "opacity-100",
+        !isActive && "opacity-0"
+      ),
+      children: /* @__PURE__ */ jsx3(CheckIcon, {})
+    }
+  )
+] });
+function useTableActionItems() {
+  const { editor, index, orientation, tablePos } = useTableHandleContext();
+  const deleteAction = useTableDeleteRowColumn({
+    editor,
+    index,
+    orientation,
+    tablePos
+  });
+  const duplicateAction = useTableDuplicateRowColumn({
+    editor,
+    index,
+    orientation,
+    tablePos
+  });
+  const sortAscAction = useTableSortRowColumn({
+    editor,
+    tablePos,
+    index,
+    orientation,
+    direction: "asc",
+    hideWhenUnavailable: true
+  });
+  const sortDescAction = useTableSortRowColumn({
+    editor,
+    tablePos,
+    index,
+    orientation,
+    direction: "desc",
+    hideWhenUnavailable: true
+  });
+  const clearContentAction = useTableClearRowColumnContent({
+    editor,
+    index,
+    orientation,
+    tablePos,
+    resetAttrs: true,
+    hideWhenUnavailable: true
+  });
+  const headerAction = useTableHeaderRowColumn({
+    editor,
+    index,
+    orientation,
+    tablePos,
+    hideWhenUnavailable: true
+  });
+  const moveUpAction = useTableMoveRowColumn({
+    editor,
+    index,
+    tablePos,
+    orientation: "row",
+    direction: "up",
+    hideWhenUnavailable: true
+  });
+  const moveDownAction = useTableMoveRowColumn({
+    editor,
+    index,
+    tablePos,
+    orientation: "row",
+    direction: "down",
+    hideWhenUnavailable: true
+  });
+  const moveLeftAction = useTableMoveRowColumn({
+    editor,
+    index,
+    tablePos,
+    orientation: "column",
+    direction: "left",
+    hideWhenUnavailable: true
+  });
+  const moveRightAction = useTableMoveRowColumn({
+    editor,
+    index,
+    tablePos,
+    orientation: "column",
+    direction: "right",
+    hideWhenUnavailable: true
+  });
+  const addAbove = useTableAddRowColumn({
+    editor,
+    index,
+    tablePos,
+    orientation: "row",
+    side: "above",
+    hideWhenUnavailable: true
+  });
+  const addBelow = useTableAddRowColumn({
+    editor,
+    index,
+    tablePos,
+    orientation: "row",
+    side: "below",
+    hideWhenUnavailable: true
+  });
+  const addLeft = useTableAddRowColumn({
+    editor,
+    index,
+    tablePos,
+    orientation: "column",
+    side: "left",
+    hideWhenUnavailable: true
+  });
+  const addRight = useTableAddRowColumn({
+    editor,
+    index,
+    tablePos,
+    orientation: "column",
+    side: "right",
+    hideWhenUnavailable: true
+  });
+  const moveActions = useMemo(
+    () => ({
+      moveUp: moveUpAction,
+      moveDown: moveDownAction,
+      moveLeft: moveLeftAction,
+      moveRight: moveRightAction
+    }),
+    [moveUpAction, moveDownAction, moveLeftAction, moveRightAction]
+  );
+  const addActions = useMemo(
+    () => ({
+      addAbove,
+      addBelow,
+      addLeft,
+      addRight
+    }),
+    [addAbove, addBelow, addLeft, addRight]
+  );
+  const sortActions = useMemo(
+    () => ({
+      sortAsc: sortAscAction,
+      sortDesc: sortDescAction
+    }),
+    [sortAscAction, sortDescAction]
+  );
+  const getSortItems = useCallback(() => {
+    const items = [];
+    if (sortActions.sortAsc.isVisible) {
+      items.push({
+        icon: sortActions.sortAsc.Icon,
+        label: sortActions.sortAsc.label,
+        disabled: !sortActions.sortAsc.canSortRowColumn,
+        onClick: sortActions.sortAsc.handleSort
+      });
+    }
+    if (sortActions.sortDesc.isVisible) {
+      items.push({
+        icon: sortActions.sortDesc.Icon,
+        label: sortActions.sortDesc.label,
+        disabled: !sortActions.sortDesc.canSortRowColumn,
+        onClick: sortActions.sortDesc.handleSort
+      });
+    }
+    return items;
+  }, [sortActions]);
+  const getActionItems = useCallback(() => {
+    const items = [];
+    if (orientation === "row") {
+      if (addActions.addAbove.isVisible) {
+        items.push({
+          icon: addActions.addAbove.Icon,
+          label: addActions.addAbove.label,
+          disabled: !addActions.addAbove.canAddRowColumn,
+          onClick: addActions.addAbove.handleAdd
+        });
+      }
+      if (addActions.addBelow.isVisible) {
+        items.push({
+          icon: addActions.addBelow.Icon,
+          label: addActions.addBelow.label,
+          disabled: !addActions.addBelow.canAddRowColumn,
+          onClick: addActions.addBelow.handleAdd
+        });
+      }
+    } else {
+      if (addActions.addLeft.isVisible) {
+        items.push({
+          icon: addActions.addLeft.Icon,
+          label: addActions.addLeft.label,
+          disabled: !addActions.addLeft.canAddRowColumn,
+          onClick: addActions.addLeft.handleAdd
+        });
+      }
+      if (addActions.addRight.isVisible) {
+        items.push({
+          icon: addActions.addRight.Icon,
+          label: addActions.addRight.label,
+          disabled: !addActions.addRight.canAddRowColumn,
+          onClick: addActions.addRight.handleAdd
+        });
+      }
+    }
+    return items;
+  }, [orientation, addActions]);
+  const getMoveItems = useCallback(() => {
+    const items = [];
+    if (orientation === "row") {
+      if (moveActions.moveUp.isVisible) {
+        items.push({
+          icon: moveActions.moveUp.Icon,
+          label: moveActions.moveUp.label,
+          disabled: !moveActions.moveUp.canMoveRowColumn,
+          onClick: moveActions.moveUp.handleMove
+        });
+      }
+      if (moveActions.moveDown.isVisible) {
+        items.push({
+          icon: moveActions.moveDown.Icon,
+          label: moveActions.moveDown.label,
+          disabled: !moveActions.moveDown.canMoveRowColumn,
+          onClick: moveActions.moveDown.handleMove
+        });
+      }
+    } else {
+      if (moveActions.moveLeft.isVisible) {
+        items.push({
+          icon: moveActions.moveLeft.Icon,
+          label: moveActions.moveLeft.label,
+          disabled: !moveActions.moveLeft.canMoveRowColumn,
+          onClick: moveActions.moveLeft.handleMove
+        });
+      }
+      if (moveActions.moveRight.isVisible) {
+        items.push({
+          icon: moveActions.moveRight.Icon,
+          label: moveActions.moveRight.label,
+          disabled: !moveActions.moveRight.canMoveRowColumn,
+          onClick: moveActions.moveRight.handleMove
+        });
+      }
+    }
+    return items;
+  }, [orientation, moveActions]);
+  return {
+    deleteAction,
+    duplicateAction,
+    clearContentAction,
+    headerAction,
+    addItems: getActionItems(),
+    moveItems: getMoveItems(),
+    sortItems: getSortItems()
+  };
+}
+
+export {
+  TableHandleMenu,
+  TableActionGroup
+};