@kopexa/extension-table 17.0.46 → 17.1.0

package/dist/chunk-VIBVRWS4.mjs

@@ -0,0 +1,197 @@
+"use client";
+import {
+  messages
+} from "./chunk-CN73TYHV.mjs";
+import {
+  getTable,
+  getTableSelectionType,
+  selectCellsByCoords,
+  updateSelectionAfterAction
+} from "./chunk-5B5XIL2G.mjs";
+
+// src/hooks/use-table-add-row-column.ts
+import { isExtensionAvailable, useTiptapEditor } from "@kopexa/editor-utils";
+import { useSafeIntl } from "@kopexa/i18n";
+import {
+  AddColLeftIcon,
+  AddColRightIcon,
+  AddRowBottomIcon,
+  AddRowTopIcon
+} from "@kopexa/icons";
+import {
+  addColumnAfter,
+  addColumnBefore,
+  addRowAfter,
+  addRowBefore,
+  CellSelection,
+  columnIsHeader,
+  rowIsHeader
+} from "@tiptap/pm/tables";
+import { useCallback } from "react";
+var REQUIRED_EXTENSIONS = ["table"];
+var addRowMessageKeys = {
+  above: messages.insert_row_above,
+  below: messages.insert_row_below
+};
+var addColumnMessageKeys = {
+  left: messages.insert_column_left,
+  right: messages.insert_column_right
+};
+function safeColumnIsHeader(map, node, index) {
+  try {
+    return columnIsHeader(map, node, index);
+  } catch {
+    return false;
+  }
+}
+function safeRowIsHeader(map, node, index) {
+  try {
+    return rowIsHeader(map, node, index);
+  } catch {
+    return false;
+  }
+}
+function canAddRowColumn({
+  editor,
+  index,
+  orientation,
+  tablePos,
+  side
+}) {
+  if (!editor || !editor.isEditable || !isExtensionAvailable(editor, REQUIRED_EXTENSIONS)) {
+    return false;
+  }
+  const table = getTable(editor, tablePos);
+  if (!table) return false;
+  const selectionType = getTableSelectionType(editor, index, orientation);
+  if (!selectionType) return false;
+  const { map, node } = table;
+  const selIndex = selectionType.index;
+  const selOrient = selectionType.orientation;
+  if (typeof selIndex !== "number" || selIndex < 0) return false;
+  if (selOrient === "column" && selIndex >= map.width) return false;
+  if (selOrient === "row" && selIndex >= map.height) return false;
+  if (side === "left" && selOrient === "column") {
+    if (safeColumnIsHeader(map, node, selIndex)) return false;
+  }
+  if (side === "above" && selOrient === "row") {
+    if (safeRowIsHeader(map, node, selIndex)) return false;
+  }
+  return true;
+}
+function calculateNewIndex(index, orientation, side) {
+  if (orientation === "row") {
+    return side === "above" ? index : index + 1;
+  } else {
+    return side === "left" ? index : index + 1;
+  }
+}
+function tableAddRowColumn({
+  editor,
+  index,
+  orientation,
+  side,
+  tablePos
+}) {
+  if (!canAddRowColumn({ editor, index, orientation, tablePos, side }) || !editor) {
+    return false;
+  }
+  const selectionType = getTableSelectionType(editor, index, orientation);
+  if (!selectionType) return false;
+  const { orientation: finalOrientation, index: finalIndex } = selectionType;
+  const isRow = finalOrientation === "row";
+  const dispatch = (tr) => editor.view.dispatch(tr);
+  const addOperation = isRow ? side === "above" ? addRowBefore : addRowAfter : side === "left" ? addColumnBefore : addColumnAfter;
+  try {
+    let success = false;
+    if (editor.state.selection instanceof CellSelection) {
+      success = addOperation(editor.state, dispatch);
+    } else {
+      const table = getTable(editor, tablePos);
+      if (!table) return false;
+      const cellCoords = finalOrientation === "row" ? { row: finalIndex, col: 0 } : { row: 0, col: finalIndex };
+      const cellState = selectCellsByCoords(editor, table.pos, [cellCoords], {
+        mode: "state"
+      });
+      if (!cellState) return false;
+      success = addOperation(cellState, dispatch);
+    }
+    if (success) {
+      const newIndex = calculateNewIndex(finalIndex, finalOrientation, side);
+      updateSelectionAfterAction(editor, finalOrientation, newIndex, tablePos);
+    }
+    return success;
+  } catch (error) {
+    console.error("Error adding row/column:", error);
+    return false;
+  }
+}
+function shouldShowButton({
+  editor,
+  index,
+  orientation,
+  tablePos,
+  side,
+  hideWhenUnavailable
+}) {
+  if (!editor || !editor.isEditable) return false;
+  if (!isExtensionAvailable(editor, REQUIRED_EXTENSIONS)) return false;
+  if (hideWhenUnavailable) {
+    return canAddRowColumn({ editor, index, orientation, tablePos, side });
+  }
+  const selectionType = getTableSelectionType(editor, index, orientation);
+  return Boolean(selectionType);
+}
+function useTableAddRowColumn(config) {
+  const {
+    editor: providedEditor,
+    index,
+    orientation,
+    side,
+    tablePos,
+    hideWhenUnavailable = false,
+    onAdded
+  } = config;
+  const { editor } = useTiptapEditor(providedEditor);
+  const intl = useSafeIntl();
+  const selectionType = getTableSelectionType(editor, index, orientation);
+  const isVisible = shouldShowButton({
+    editor,
+    index,
+    orientation,
+    tablePos,
+    side,
+    hideWhenUnavailable
+  });
+  const canPerformAdd = canAddRowColumn({
+    editor,
+    index,
+    orientation,
+    tablePos,
+    side
+  });
+  const handleAdd = useCallback(() => {
+    const success = tableAddRowColumn({
+      editor,
+      index,
+      orientation,
+      tablePos,
+      side
+    });
+    if (success) onAdded == null ? void 0 : onAdded();
+    return success;
+  }, [editor, index, orientation, tablePos, side, onAdded]);
+  const label = (selectionType == null ? void 0 : selectionType.orientation) === "row" ? intl.formatMessage(addRowMessageKeys[side]) : intl.formatMessage(addColumnMessageKeys[side]);
+  const Icon = (selectionType == null ? void 0 : selectionType.orientation) === "row" ? side === "above" ? AddRowTopIcon : AddRowBottomIcon : side === "left" ? AddColLeftIcon : AddColRightIcon;
+  return {
+    isVisible,
+    canAddRowColumn: canPerformAdd,
+    handleAdd,
+    label,
+    Icon
+  };
+}
+
+export {
+  useTableAddRowColumn
+};

package/dist/chunk-VQV757EG.mjs

@@ -0,0 +1,113 @@
+"use client";
+import {
+  useTableAlignCell
+} from "./chunk-KTRZVXJC.mjs";
+import {
+  messages
+} from "./chunk-CN73TYHV.mjs";
+
+// src/ui/table-alignment-menu.tsx
+import { DropdownMenu } from "@kopexa/dropdown-menu";
+import { useSafeIntl } from "@kopexa/i18n";
+import { AlignLeftIcon, CheckIcon } from "@kopexa/icons";
+import { cn } from "@kopexa/shared-utils";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TableAlignMenuItems = ({
+  index,
+  orientation
+}) => {
+  const textLeft = useTableAlignCell({
+    alignmentType: "text",
+    alignment: "left",
+    index,
+    orientation
+  });
+  const textCenter = useTableAlignCell({
+    alignmentType: "text",
+    alignment: "center",
+    index,
+    orientation
+  });
+  const textRight = useTableAlignCell({
+    alignmentType: "text",
+    alignment: "right",
+    index,
+    orientation
+  });
+  const verticalTop = useTableAlignCell({
+    alignmentType: "vertical",
+    alignment: "top",
+    index,
+    orientation
+  });
+  const verticalMiddle = useTableAlignCell({
+    alignmentType: "vertical",
+    alignment: "middle",
+    index,
+    orientation
+  });
+  const verticalBottom = useTableAlignCell({
+    alignmentType: "vertical",
+    alignment: "bottom",
+    index,
+    orientation
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(DropdownMenu.Group, { children: [
+      /* @__PURE__ */ jsx(AlignMenuItem, { align: textLeft }),
+      /* @__PURE__ */ jsx(AlignMenuItem, { align: textCenter }),
+      /* @__PURE__ */ jsx(AlignMenuItem, { align: textRight })
+    ] }),
+    /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+    /* @__PURE__ */ jsxs(DropdownMenu.Group, { children: [
+      /* @__PURE__ */ jsx(AlignMenuItem, { align: verticalTop }),
+      /* @__PURE__ */ jsx(AlignMenuItem, { align: verticalMiddle }),
+      /* @__PURE__ */ jsx(AlignMenuItem, { align: verticalBottom })
+    ] })
+  ] });
+};
+var TableAlignSubMenu = ({
+  index,
+  orientation
+}) => {
+  const probe = useTableAlignCell({
+    alignmentType: "text",
+    alignment: "left",
+    index,
+    orientation
+  });
+  const intl = useSafeIntl();
+  if (!probe.canAlignCell()) return null;
+  return /* @__PURE__ */ jsxs(DropdownMenu.Sub, { children: [
+    /* @__PURE__ */ jsxs(DropdownMenu.SubTrigger, { children: [
+      /* @__PURE__ */ jsx(AlignLeftIcon, {}),
+      /* @__PURE__ */ jsx("span", { children: intl.formatMessage(messages.alignment) })
+    ] }),
+    /* @__PURE__ */ jsx(DropdownMenu.SubContent, { children: /* @__PURE__ */ jsx(TableAlignMenuItems, { index, orientation }) })
+  ] });
+};
+var AlignMenuItem = ({
+  align
+}) => /* @__PURE__ */ jsxs(
+  DropdownMenu.Item,
+  {
+    disabled: !align.canAlignCell(),
+    onSelect: align.handleAlign,
+    children: [
+      /* @__PURE__ */ jsx(align.Icon, {}),
+      /* @__PURE__ */ jsx("span", { children: align.label }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn("ml-auto", align.isActive ? "opacity-100" : "opacity-0"),
+          children: /* @__PURE__ */ jsx(CheckIcon, {})
+        }
+      )
+    ]
+  }
+);
+
+export {
+  TableAlignMenuItems,
+  TableAlignSubMenu
+};

package/dist/chunk-XRNQXADK.mjs

@@ -0,0 +1,149 @@
+"use client";
+import {
+  useTableMergeSplitCell
+} from "./chunk-KIYFW7MP.mjs";
+import {
+  TableAlignSubMenu
+} from "./chunk-VQV757EG.mjs";
+import {
+  useTableClearRowColumnContent
+} from "./chunk-4QSZXHZO.mjs";
+import {
+  messages
+} from "./chunk-CN73TYHV.mjs";
+
+// src/ui/table-cell-handle-menu.tsx
+import { DropdownMenu } from "@kopexa/dropdown-menu";
+import { useTiptapEditor } from "@kopexa/editor-utils";
+import { useSafeIntl } from "@kopexa/i18n";
+import { Grip4Icon } from "@kopexa/icons";
+import { cn } from "@kopexa/shared-utils";
+import { tableCellHandleMenu } from "@kopexa/theme";
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function useTableActions() {
+  const mergeCellAction = useTableMergeSplitCell({ action: "merge" });
+  const splitCellAction = useTableMergeSplitCell({ action: "split" });
+  const clearContentAction = useTableClearRowColumnContent({
+    resetAttrs: true
+  });
+  const mergeAction = {
+    icon: mergeCellAction.Icon,
+    label: mergeCellAction.label,
+    onClick: mergeCellAction.handleExecute,
+    isAvailable: mergeCellAction.canExecute
+  };
+  const splitAction = {
+    icon: splitCellAction.Icon,
+    label: splitCellAction.label,
+    onClick: splitCellAction.handleExecute,
+    isAvailable: splitCellAction.canExecute
+  };
+  const clearAction = {
+    icon: clearContentAction.Icon,
+    label: clearContentAction.label,
+    onClick: clearContentAction.handleClear,
+    isAvailable: clearContentAction.canClearRowColumnContent
+  };
+  return {
+    mergeAction,
+    splitAction,
+    clearAction
+  };
+}
+function useTableCellHandleMenu({ editor }) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const closeMenu = useCallback(() => {
+    setIsMenuOpen(false);
+    editor == null ? void 0 : editor.commands.unfreezeHandles();
+  }, [editor]);
+  const handleMenuToggle = useCallback(
+    (isOpen) => {
+      setIsMenuOpen(isOpen);
+      if (!editor) return;
+      if (isOpen) {
+        editor.commands.freezeHandles();
+      } else {
+        editor.commands.unfreezeHandles();
+      }
+    },
+    [editor]
+  );
+  return {
+    isMenuOpen,
+    handleMenuToggle,
+    closeMenu
+  };
+}
+var TableActionItem = ({ action }) => {
+  const {
+    icon: Icon,
+    label,
+    onClick,
+    isActive = false,
+    shortcutBadge
+  } = action;
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu.Item,
+    {
+      onClick,
+      "data-state": isActive ? "active" : "inactive",
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "tiptap-button-icon" }),
+        /* @__PURE__ */ jsx("span", { className: "tiptap-button-text", children: label }),
+        shortcutBadge
+      ]
+    }
+  );
+};
+var TableActionMenu = () => {
+  const { mergeAction, splitAction, clearAction } = useTableActions();
+  const hasMergeOrSplit = mergeAction.isAvailable || splitAction.isAvailable;
+  return /* @__PURE__ */ jsxs(DropdownMenu.Content, { children: [
+    hasMergeOrSplit && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(DropdownMenu.Group, { children: [
+        mergeAction.isAvailable && /* @__PURE__ */ jsx(TableActionItem, { action: mergeAction }),
+        splitAction.isAvailable && /* @__PURE__ */ jsx(TableActionItem, { action: splitAction })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenu.Separator, {})
+    ] }),
+    /* @__PURE__ */ jsx(TableAlignSubMenu, {}),
+    clearAction.isAvailable && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+      /* @__PURE__ */ jsx(DropdownMenu.Group, { children: /* @__PURE__ */ jsx(TableActionItem, { action: clearAction }) })
+    ] })
+  ] });
+};
+var TableCellHandleMenu = forwardRef(({ editor: providedEditor, onOpenChange, className, ...props }, ref) => {
+  const { editor } = useTiptapEditor(providedEditor);
+  const intl = useSafeIntl();
+  const { isMenuOpen, handleMenuToggle } = useTableCellHandleMenu({
+    editor
+  });
+  const styles = tableCellHandleMenu();
+  useEffect(() => {
+    onOpenChange == null ? void 0 : onOpenChange(isMenuOpen);
+  }, [isMenuOpen, onOpenChange]);
+  return /* @__PURE__ */ jsxs(DropdownMenu.Root, { open: isMenuOpen, onOpenChange: handleMenuToggle, children: [
+    /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        "data-open": isMenuOpen,
+        className: cn(styles.trigger(), className),
+        "aria-label": intl.formatMessage(messages.cell_options),
+        "aria-haspopup": "menu",
+        "aria-expanded": isMenuOpen,
+        ...props,
+        children: /* @__PURE__ */ jsx(Grip4Icon, { className: styles.icon() })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TableActionMenu, {})
+  ] });
+});
+TableCellHandleMenu.displayName = "TableCellHandleMenu";
+
+export {
+  TableActionMenu,
+  TableCellHandleMenu
+};

package/dist/chunk-ZVPJDJBO.mjs

@@ -0,0 +1,134 @@
+"use client";
+import {
+  messages
+} from "./chunk-CN73TYHV.mjs";
+import {
+  getTable,
+  getTableSelectionType,
+  selectCellsByCoords
+} from "./chunk-5B5XIL2G.mjs";
+
+// src/hooks/use-table-delete-row-column.ts
+import { isExtensionAvailable, useTiptapEditor } from "@kopexa/editor-utils";
+import { useSafeIntl } from "@kopexa/i18n";
+import { TrashIcon } from "@kopexa/icons";
+import { CellSelection, deleteColumn, deleteRow } from "@tiptap/pm/tables";
+import { useCallback, useMemo } from "react";
+var REQUIRED_EXTENSIONS = ["table"];
+var deleteMessageKeys = {
+  row: messages.delete_row,
+  column: messages.delete_column
+};
+function canDeleteRowColumn({
+  editor,
+  index,
+  orientation,
+  tablePos
+}) {
+  if (!editor || !editor.isEditable || !isExtensionAvailable(editor, REQUIRED_EXTENSIONS)) {
+    return false;
+  }
+  try {
+    const table = getTable(editor, tablePos);
+    if (!table) return false;
+    const selectionType = getTableSelectionType(editor, index, orientation);
+    if (!selectionType) return false;
+    return true;
+  } catch {
+    return false;
+  }
+}
+function tableDeleteRowColumn({
+  editor,
+  index,
+  orientation,
+  tablePos
+}) {
+  if (!canDeleteRowColumn({ editor, index, orientation, tablePos }) || !editor) {
+    return false;
+  }
+  try {
+    const selectionType = getTableSelectionType(editor, index, orientation);
+    if (!selectionType) return false;
+    const { orientation: finalOrientation, index: finalIndex } = selectionType;
+    const isRow = finalOrientation === "row";
+    const dispatch = (tr) => editor.view.dispatch(tr);
+    const deleteOperation = isRow ? deleteRow : deleteColumn;
+    if (editor.state.selection instanceof CellSelection) {
+      return deleteOperation(editor.state, dispatch);
+    }
+    const table = getTable(editor, tablePos);
+    if (!table) return false;
+    const cellCoords = isRow ? { row: finalIndex, col: 0 } : { row: 0, col: finalIndex };
+    const cellState = selectCellsByCoords(editor, table.pos, [cellCoords], {
+      mode: "state"
+    });
+    if (!cellState) return false;
+    return deleteOperation(cellState, dispatch);
+  } catch (error) {
+    console.error(`Error deleting table row/column:`, error);
+    return false;
+  }
+}
+function shouldShowButton({
+  editor,
+  index,
+  orientation,
+  hideWhenUnavailable,
+  tablePos
+}) {
+  if (!editor || !editor.isEditable) return false;
+  if (!isExtensionAvailable(editor, REQUIRED_EXTENSIONS)) return false;
+  return hideWhenUnavailable ? canDeleteRowColumn({ editor, index, orientation, tablePos }) : true;
+}
+function useTableDeleteRowColumn(config) {
+  const {
+    editor: providedEditor,
+    index,
+    orientation,
+    tablePos,
+    hideWhenUnavailable = false,
+    onDeleted
+  } = config;
+  const { editor } = useTiptapEditor(providedEditor);
+  const intl = useSafeIntl();
+  const selectionType = getTableSelectionType(editor, index, orientation);
+  const isVisible = shouldShowButton({
+    editor,
+    index,
+    orientation,
+    hideWhenUnavailable
+  });
+  const canPerformDelete = canDeleteRowColumn({
+    editor,
+    index,
+    orientation,
+    tablePos
+  });
+  const handleDelete = useCallback(() => {
+    const success = tableDeleteRowColumn({
+      editor,
+      index,
+      orientation,
+      tablePos
+    });
+    if (success) onDeleted == null ? void 0 : onDeleted();
+    return success;
+  }, [editor, index, orientation, tablePos, onDeleted]);
+  const label = useMemo(() => {
+    return intl.formatMessage(
+      deleteMessageKeys[(selectionType == null ? void 0 : selectionType.orientation) || "row"]
+    );
+  }, [intl, selectionType]);
+  return {
+    isVisible,
+    canDeleteRowColumn: canPerformDelete,
+    handleDelete,
+    label,
+    Icon: TrashIcon
+  };
+}
+
+export {
+  useTableDeleteRowColumn
+};

package/dist/{kit.d.mts → extensions/kit.d.mts}

@@ -1,7 +1,5 @@
-import { TableOptions, TableHeaderOptions, TableRowOptions } from '@tiptap/extension-table';
+import { TableOptions, TableCellOptions, TableHeaderOptions, TableRowOptions } from '@tiptap/extension-table';
 import { Extension } from '@tiptap/react';
-import { TableCellOptions } from './table-cell.mjs';
-import '@tiptap/core';
 
 interface TableKitOptions {
     /**

package/dist/{kit.d.ts → extensions/kit.d.ts}

@@ -1,7 +1,5 @@
-import { TableOptions, TableHeaderOptions, TableRowOptions } from '@tiptap/extension-table';
+import { TableOptions, TableCellOptions, TableHeaderOptions, TableRowOptions } from '@tiptap/extension-table';
 import { Extension } from '@tiptap/react';
-import { TableCellOptions } from './table-cell.js';
-import '@tiptap/core';
 
 interface TableKitOptions {
     /**