@kopexa/extension-table 17.0.46 → 17.1.1

package/dist/hooks/use-table-add-row-column.js

@@ -0,0 +1,551 @@
+"use client";
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/use-table-add-row-column.ts
+var use_table_add_row_column_exports = {};
+__export(use_table_add_row_column_exports, {
+  useTableAddRowColumn: () => useTableAddRowColumn
+});
+module.exports = __toCommonJS(use_table_add_row_column_exports);
+var import_editor_utils = require("@kopexa/editor-utils");
+var import_i18n2 = require("@kopexa/i18n");
+var import_icons = require("@kopexa/icons");
+var import_tables2 = require("@tiptap/pm/tables");
+var import_react = require("react");
+
+// src/lib/table-utils.ts
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_tables = require("@tiptap/pm/tables");
+function getTable(editor, tablePos) {
+  if (!editor) return null;
+  let table = null;
+  if (typeof tablePos === "number") {
+    const tableNode = editor.state.doc.nodeAt(tablePos);
+    if ((tableNode == null ? void 0 : tableNode.type.name) === "table") {
+      table = {
+        node: tableNode,
+        pos: tablePos,
+        start: tablePos + 1,
+        depth: editor.state.doc.resolve(tablePos).depth
+      };
+    }
+  }
+  if (!table) {
+    const { state } = editor;
+    const $from = state.doc.resolve(state.selection.from);
+    table = (0, import_tables.findTable)($from);
+  }
+  if (!table) return null;
+  const tableMap = import_tables.TableMap.get(table.node);
+  if (!tableMap) return null;
+  return { ...table, map: tableMap };
+}
+function selectCellsByCoords(editor, tablePos, coords, options = { mode: "state" }) {
+  if (!editor) return;
+  const table = getTable(editor, tablePos);
+  if (!table) return;
+  const { state } = editor;
+  const tableMap = table.map;
+  const cleanedCoords = coords.map((coord) => ({
+    row: (0, import_shared_utils.clamp)(coord.row, 0, tableMap.height - 1),
+    col: (0, import_shared_utils.clamp)(coord.col, 0, tableMap.width - 1)
+  })).filter((coord) => isWithinBounds(coord.row, coord.col, tableMap));
+  if (cleanedCoords.length === 0) {
+    return;
+  }
+  const allRows = cleanedCoords.map((coord) => coord.row);
+  const topRow = Math.min(...allRows);
+  const bottomRow = Math.max(...allRows);
+  const allCols = cleanedCoords.map((coord) => coord.col);
+  const leftCol = Math.min(...allCols);
+  const rightCol = Math.max(...allCols);
+  const getCellPositionFromMap = (row, col) => {
+    const cellOffset = tableMap.map[row * tableMap.width + col];
+    if (cellOffset === void 0) return null;
+    return tablePos + 1 + cellOffset;
+  };
+  const anchorPosition = getCellPositionFromMap(topRow, leftCol);
+  if (anchorPosition === null) return;
+  let headPosition = getCellPositionFromMap(bottomRow, rightCol);
+  if (headPosition === null) return;
+  if (headPosition === anchorPosition) {
+    let foundDifferentCell = false;
+    for (let row = bottomRow; row >= topRow && !foundDifferentCell; row--) {
+      for (let col = rightCol; col >= leftCol && !foundDifferentCell; col--) {
+        const candidatePosition = getCellPositionFromMap(row, col);
+        if (candidatePosition !== null && candidatePosition !== anchorPosition) {
+          headPosition = candidatePosition;
+          foundDifferentCell = true;
+        }
+      }
+    }
+  }
+  try {
+    const anchorRef = state.doc.resolve(anchorPosition);
+    const headRef = state.doc.resolve(headPosition);
+    const cellSelection = new import_tables.CellSelection(anchorRef, headRef);
+    const transaction = state.tr.setSelection(cellSelection);
+    return applySelectionWithMode(state, transaction, options);
+  } catch (error) {
+    console.error("Failed to create cell selection:", error);
+    return;
+  }
+}
+function isWithinBounds(row, col, map) {
+  return row >= 0 && row < map.height && col >= 0 && col < map.width;
+}
+function applySelectionWithMode(state, transaction, options) {
+  var _a;
+  const mode = (_a = options.mode) != null ? _a : "state";
+  switch (mode) {
+    case "dispatch": {
+      const dispatchOptions = options;
+      if (typeof dispatchOptions.dispatch === "function") {
+        dispatchOptions.dispatch(transaction);
+      }
+      return;
+    }
+    case "transaction":
+      return transaction;
+    default:
+      return state.apply(transaction);
+  }
+}
+function getTableSelectionType(editor, index, orientation, tablePos) {
+  if (typeof index === "number" && orientation) {
+    return { orientation, index };
+  }
+  if (!editor) return null;
+  const { state } = editor;
+  const table = getTable(editor, tablePos);
+  if (!table) return null;
+  if (state.selection instanceof import_tables.CellSelection) {
+    const rect = (0, import_tables.selectedRect)(state);
+    const map = import_tables.TableMap.get(table.node);
+    const width = rect.right - rect.left;
+    const height = rect.bottom - rect.top;
+    if (height === 1 && width === map.width) {
+      return { orientation: "row", index: rect.top };
+    }
+    if (width === 1 && height === map.height) {
+      return { orientation: "column", index: rect.left };
+    }
+    return null;
+  }
+  return null;
+}
+function updateSelectionAfterAction(editor, orientation, newIndex, tablePos) {
+  try {
+    const table = getTable(editor, tablePos);
+    if (!table) return;
+    const { state } = editor;
+    const { map } = table;
+    if (orientation === "row") {
+      if (newIndex >= 0 && newIndex < map.height) {
+        const startCol = 0;
+        const endCol = map.width - 1;
+        const startCellPos = table.start + map.positionAt(newIndex, startCol, table.node);
+        const endCellPos = table.start + map.positionAt(newIndex, endCol, table.node);
+        const $start = state.doc.resolve(startCellPos);
+        const $end = state.doc.resolve(endCellPos);
+        const newSelection = import_tables.CellSelection.create(
+          state.doc,
+          $start.pos,
+          $end.pos
+        );
+        const tr = state.tr.setSelection(newSelection);
+        editor.view.dispatch(tr);
+      }
+    } else if (orientation === "column") {
+      if (newIndex >= 0 && newIndex < map.width) {
+        const startRow = 0;
+        const endRow = map.height - 1;
+        const startCellPos = table.start + map.positionAt(startRow, newIndex, table.node);
+        const endCellPos = table.start + map.positionAt(endRow, newIndex, table.node);
+        const $start = state.doc.resolve(startCellPos);
+        const $end = state.doc.resolve(endCellPos);
+        const newSelection = import_tables.CellSelection.create(
+          state.doc,
+          $start.pos,
+          $end.pos
+        );
+        const tr = state.tr.setSelection(newSelection);
+        editor.view.dispatch(tr);
+      }
+    }
+  } catch (error) {
+    console.warn("Failed to update selection after move:", error);
+  }
+}
+
+// src/messages.ts
+var import_i18n = require("@kopexa/i18n");
+var messages = (0, import_i18n.defineMessages)({
+  // Row/Column actions (aria labels)
+  row_actions: {
+    id: "editor.table.row_actions",
+    defaultMessage: "Row actions",
+    description: "ARIA label for row actions menu button"
+  },
+  column_actions: {
+    id: "editor.table.column_actions",
+    defaultMessage: "Column actions",
+    description: "ARIA label for column actions menu button"
+  },
+  cell_options: {
+    id: "editor.table.cell_options",
+    defaultMessage: "Table cells option",
+    description: "ARIA label for cell options menu button"
+  },
+  // Alignment
+  alignment: {
+    id: "editor.table.alignment",
+    defaultMessage: "Alignment",
+    description: "Label for alignment submenu"
+  },
+  align_left: {
+    id: "editor.table.align_left",
+    defaultMessage: "Align left",
+    description: "Label for align left action"
+  },
+  align_center: {
+    id: "editor.table.align_center",
+    defaultMessage: "Align center",
+    description: "Label for align center action"
+  },
+  align_right: {
+    id: "editor.table.align_right",
+    defaultMessage: "Align right",
+    description: "Label for align right action"
+  },
+  justify: {
+    id: "editor.table.justify",
+    defaultMessage: "Justify",
+    description: "Label for justify action"
+  },
+  align_top: {
+    id: "editor.table.align_top",
+    defaultMessage: "Align top",
+    description: "Label for vertical align top action"
+  },
+  align_middle: {
+    id: "editor.table.align_middle",
+    defaultMessage: "Align middle",
+    description: "Label for vertical align middle action"
+  },
+  align_bottom: {
+    id: "editor.table.align_bottom",
+    defaultMessage: "Align bottom",
+    description: "Label for vertical align bottom action"
+  },
+  // Add row/column
+  insert_row_above: {
+    id: "editor.table.insert_row_above",
+    defaultMessage: "Insert row above",
+    description: "Label for insert row above action"
+  },
+  insert_row_below: {
+    id: "editor.table.insert_row_below",
+    defaultMessage: "Insert row below",
+    description: "Label for insert row below action"
+  },
+  insert_column_left: {
+    id: "editor.table.insert_column_left",
+    defaultMessage: "Insert column left",
+    description: "Label for insert column left action"
+  },
+  insert_column_right: {
+    id: "editor.table.insert_column_right",
+    defaultMessage: "Insert column right",
+    description: "Label for insert column right action"
+  },
+  // Delete row/column
+  delete_row: {
+    id: "editor.table.delete_row",
+    defaultMessage: "Delete row",
+    description: "Label for delete row action"
+  },
+  delete_column: {
+    id: "editor.table.delete_column",
+    defaultMessage: "Delete column",
+    description: "Label for delete column action"
+  },
+  // Move row/column
+  move_row_up: {
+    id: "editor.table.move_row_up",
+    defaultMessage: "Move row up",
+    description: "Label for move row up action"
+  },
+  move_row_down: {
+    id: "editor.table.move_row_down",
+    defaultMessage: "Move row down",
+    description: "Label for move row down action"
+  },
+  move_column_left: {
+    id: "editor.table.move_column_left",
+    defaultMessage: "Move column left",
+    description: "Label for move column left action"
+  },
+  move_column_right: {
+    id: "editor.table.move_column_right",
+    defaultMessage: "Move column right",
+    description: "Label for move column right action"
+  },
+  // Sort
+  sort_row_asc: {
+    id: "editor.table.sort_row_asc",
+    defaultMessage: "Sort row A-Z",
+    description: "Label for sort row ascending action"
+  },
+  sort_row_desc: {
+    id: "editor.table.sort_row_desc",
+    defaultMessage: "Sort row Z-A",
+    description: "Label for sort row descending action"
+  },
+  sort_column_asc: {
+    id: "editor.table.sort_column_asc",
+    defaultMessage: "Sort column A-Z",
+    description: "Label for sort column ascending action"
+  },
+  sort_column_desc: {
+    id: "editor.table.sort_column_desc",
+    defaultMessage: "Sort column Z-A",
+    description: "Label for sort column descending action"
+  },
+  // Duplicate
+  duplicate_row: {
+    id: "editor.table.duplicate_row",
+    defaultMessage: "Duplicate row",
+    description: "Label for duplicate row action"
+  },
+  duplicate_column: {
+    id: "editor.table.duplicate_column",
+    defaultMessage: "Duplicate column",
+    description: "Label for duplicate column action"
+  },
+  // Header
+  header_row: {
+    id: "editor.table.header_row",
+    defaultMessage: "Header row",
+    description: "Label for toggle header row action"
+  },
+  header_column: {
+    id: "editor.table.header_column",
+    defaultMessage: "Header column",
+    description: "Label for toggle header column action"
+  },
+  // Merge/Split
+  merge_cells: {
+    id: "editor.table.merge_cells",
+    defaultMessage: "Merge cells",
+    description: "Label for merge cells action"
+  },
+  split_cell: {
+    id: "editor.table.split_cell",
+    defaultMessage: "Split cell",
+    description: "Label for split cell action"
+  },
+  // Clear contents
+  clear_row_contents: {
+    id: "editor.table.clear_row_contents",
+    defaultMessage: "Clear row contents",
+    description: "Label for clear row contents action"
+  },
+  clear_column_contents: {
+    id: "editor.table.clear_column_contents",
+    defaultMessage: "Clear column contents",
+    description: "Label for clear column contents action"
+  },
+  clear_contents: {
+    id: "editor.table.clear_contents",
+    defaultMessage: "Clear contents",
+    description: "Label for clear contents action (generic)"
+  }
+});
+
+// src/hooks/use-table-add-row-column.ts
+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 (0, import_tables2.columnIsHeader)(map, node, index);
+  } catch {
+    return false;
+  }
+}
+function safeRowIsHeader(map, node, index) {
+  try {
+    return (0, import_tables2.rowIsHeader)(map, node, index);
+  } catch {
+    return false;
+  }
+}
+function canAddRowColumn({
+  editor,
+  index,
+  orientation,
+  tablePos,
+  side
+}) {
+  if (!editor || !editor.isEditable || !(0, import_editor_utils.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" ? import_tables2.addRowBefore : import_tables2.addRowAfter : side === "left" ? import_tables2.addColumnBefore : import_tables2.addColumnAfter;
+  try {
+    let success = false;
+    if (editor.state.selection instanceof import_tables2.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 (!(0, import_editor_utils.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 } = (0, import_editor_utils.useTiptapEditor)(providedEditor);
+  const intl = (0, import_i18n2.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 = (0, import_react.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" ? import_icons.AddRowTopIcon : import_icons.AddRowBottomIcon : side === "left" ? import_icons.AddColLeftIcon : import_icons.AddColRightIcon;
+  return {
+    isVisible,
+    canAddRowColumn: canPerformAdd,
+    handleAdd,
+    label,
+    Icon
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useTableAddRowColumn
+});

package/dist/hooks/use-table-add-row-column.mjs

@@ -0,0 +1,11 @@
+"use client";
+"use client";
+import {
+  useTableAddRowColumn
+} from "../chunk-VIBVRWS4.mjs";
+import "../chunk-CN73TYHV.mjs";
+import "../chunk-5B5XIL2G.mjs";
+import "../chunk-WKV76XOR.mjs";
+export {
+  useTableAddRowColumn
+};

package/dist/hooks/use-table-align-cell.d.mts

@@ -0,0 +1,148 @@
+import * as react from 'react';
+import { Editor } from '@tiptap/react';
+import { Orientation } from '../lib/table-utils.mjs';
+import '@tiptap/pm/model';
+import '@tiptap/pm/state';
+import '@tiptap/pm/tables';
+
+type TextAlignment = "left" | "center" | "right" | "justify";
+type VerticalAlignment = "top" | "middle" | "bottom";
+type AlignmentType = "text" | "vertical";
+interface UseTableAlignCellConfig {
+    /**
+     * The Tiptap editor instance. If omitted, the hook will use
+     * the context/editor from `useTiptapEditor`.
+     */
+    editor?: Editor | null;
+    /**
+     * The type of alignment to apply.
+     */
+    alignmentType: AlignmentType;
+    /**
+     * The alignment value to set.
+     */
+    alignment: TextAlignment | VerticalAlignment;
+    /**
+     * Optional index of the row or column to align.
+     * If provided along with orientation, aligns all cells in that row/column.
+     * If not provided, aligns the currently selected cell(s).
+     */
+    index?: number;
+    /**
+     * Optional orientation when using index.
+     * Determines whether to align a row or column.
+     */
+    orientation?: Orientation;
+    /**
+     * Hide the button when alignment isn't currently possible.
+     * @default false
+     */
+    hideWhenUnavailable?: boolean;
+    /**
+     * Callback function called after successful alignment change.
+     */
+    onAligned?: (alignment: TextAlignment | VerticalAlignment) => void;
+}
+declare const tableAlignCellIcons: {
+    text: Record<TextAlignment, React.ComponentType<{
+        className?: string;
+    }>>;
+    vertical: Record<VerticalAlignment, React.ComponentType<{
+        className?: string;
+    }>>;
+};
+/**
+ * Custom hook that provides **table cell alignment**
+ * functionality for the Tiptap editor.
+ *
+ * @example
+ * ```tsx
+ * // Simple text alignment button
+ * function AlignLeftButton() {
+ *   const { isVisible, handleAlign, canAlignCell, isActive, label, Icon } = useTableAlignCell({
+ *     alignmentType: "text",
+ *     alignment: "left",
+ *     hideWhenUnavailable: true,
+ *     onAligned: (alignment) => console.log(`Aligned to: ${alignment}`),
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <button
+ *       onClick={handleAlign}
+ *       disabled={!canAlignCell}
+ *       aria-pressed={isActive}
+ *       aria-label={label}
+ *     >
+ *       <Icon /> {label}
+ *     </button>
+ *   )
+ * }
+ *
+ * // Align entire row vertically
+ * function AlignRowTopButton({ rowIndex }: { rowIndex: number }) {
+ *   const { isVisible, handleAlign, label, Icon } = useTableAlignCell({
+ *     alignmentType: "vertical",
+ *     alignment: "top",
+ *     index: rowIndex,
+ *     orientation: "row",
+ *     hideWhenUnavailable: true,
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <button onClick={handleAlign} aria-label={label}>
+ *       <Icon /> {label}
+ *     </button>
+ *   )
+ * }
+ *
+ * // Alignment toolbar for selected cell
+ * function CellAlignmentToolbar() {
+ *   const alignments: TextAlignment[] = ["left", "center", "right", "justify"]
+ *
+ *   return (
+ *     <div role="toolbar" aria-label="Text alignment">
+ *       {alignments.map((alignment) => {
+ *         const { isVisible, handleAlign, canAlignCell, isActive, Icon } = useTableAlignCell({
+ *           alignmentType: "text",
+ *           alignment,
+ *           hideWhenUnavailable: true,
+ *         })
+ *
+ *         if (!isVisible) return null
+ *
+ *         return (
+ *           <button
+ *             key={alignment}
+ *             onClick={handleAlign}
+ *             disabled={!canAlignCell}
+ *             aria-pressed={isActive}
+ *             title={`Align ${alignment}`}
+ *           >
+ *             <Icon />
+ *           </button>
+ *         )
+ *       })}
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare function useTableAlignCell(config: UseTableAlignCellConfig): {
+    isVisible: boolean;
+    canAlignCell: () => boolean;
+    handleAlign: () => boolean;
+    label: string;
+    Icon: react.ComponentClass<{
+        className?: string;
+    }, any> | react.FunctionComponent<{
+        className?: string;
+    }>;
+    isActive: boolean;
+    currentAlignment: TextAlignment | VerticalAlignment | null;
+};
+
+export { type AlignmentType, type TextAlignment, type UseTableAlignCellConfig, type VerticalAlignment, tableAlignCellIcons, useTableAlignCell };