@kopexa/extension-table 17.0.45 → 17.1.0

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

@@ -0,0 +1,623 @@
+"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-sort-row-column.ts
+var use_table_sort_row_column_exports = {};
+__export(use_table_sort_row_column_exports, {
+  tableSortRowColumnIcons: () => tableSortRowColumnIcons,
+  useTableSortRowColumn: () => useTableSortRowColumn
+});
+module.exports = __toCommonJS(use_table_sort_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_react = require("react");
+
+// src/lib/table-utils.ts
+var import_shared_utils = require("@kopexa/shared-utils");
+var import_tables = require("@tiptap/pm/tables");
+var EMPTY_CELLS_RESULT = { cells: [], mergedCells: [] };
+function collectCells(editor, orientation, index, tablePos) {
+  if (!editor) return EMPTY_CELLS_RESULT;
+  const { state } = editor;
+  const table = getTable(editor, tablePos);
+  if (!table) return EMPTY_CELLS_RESULT;
+  const tableStart = table.start;
+  const tableNode = table.node;
+  const map = table.map;
+  const resolvedIndex = resolveOrientationIndex(
+    state,
+    table,
+    orientation,
+    index
+  );
+  if (resolvedIndex === null) return EMPTY_CELLS_RESULT;
+  const maxIndex = orientation === "row" ? map.height : map.width;
+  if (resolvedIndex < 0 || resolvedIndex >= maxIndex) {
+    return EMPTY_CELLS_RESULT;
+  }
+  const cells = [];
+  const mergedCells = [];
+  const seenMerged = /* @__PURE__ */ new Set();
+  const iterationCount = orientation === "row" ? map.width : map.height;
+  for (let i = 0; i < iterationCount; i++) {
+    const row = orientation === "row" ? resolvedIndex : i;
+    const col = orientation === "row" ? i : resolvedIndex;
+    const cellIndex = row * map.width + col;
+    const mapCell = map.map[cellIndex];
+    if (mapCell === void 0) continue;
+    const cellPos = tableStart + mapCell;
+    const cellNode = tableNode.nodeAt(mapCell);
+    if (!cellNode) continue;
+    const cell = createCellInfo(row, col, cellPos, cellNode);
+    if (isCellMerged(cellNode)) {
+      if (!seenMerged.has(cellPos)) {
+        mergedCells.push(cell);
+        seenMerged.add(cellPos);
+      }
+    }
+    cells.push(cell);
+  }
+  return { cells, mergedCells };
+}
+function isCellMerged(node) {
+  var _a, _b;
+  if (!node) return false;
+  const colspan = (_a = node.attrs.colspan) != null ? _a : 1;
+  const rowspan = (_b = node.attrs.rowspan) != null ? _b : 1;
+  return colspan > 1 || rowspan > 1;
+}
+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 createCellInfo(row, column, cellPos, cellNode) {
+  return {
+    row,
+    column,
+    pos: cellPos,
+    node: cellNode,
+    start: cellPos + 1,
+    depth: cellNode ? cellNode.content.size : 0
+  };
+}
+function resolveOrientationIndex(state, table, orientation, providedIndex) {
+  var _a;
+  if (typeof providedIndex === "number") {
+    return providedIndex;
+  }
+  if (state.selection instanceof import_tables.CellSelection) {
+    const rect2 = (0, import_tables.selectedRect)(state);
+    return orientation === "row" ? rect2.top : rect2.left;
+  }
+  const $cell = (_a = (0, import_tables.cellAround)(state.selection.$anchor)) != null ? _a : (0, import_tables.selectionCell)(state);
+  if (!$cell) return null;
+  const rel = $cell.pos - table.start;
+  const rect = table.map.findCell(rel);
+  return orientation === "row" ? rect.top : rect.left;
+}
+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 getRowOrColumnCells(editor, index, orientation, tablePos) {
+  const emptyResult = {
+    cells: [],
+    mergedCells: [],
+    index: void 0,
+    orientation: void 0,
+    tablePos: void 0
+  };
+  if (!editor) {
+    return emptyResult;
+  }
+  if (typeof index !== "number" && !(editor.state.selection instanceof import_tables.CellSelection)) {
+    return emptyResult;
+  }
+  let finalIndex = index;
+  let finalOrientation = orientation;
+  if (typeof finalIndex !== "number" || !finalOrientation || !["row", "column"].includes(finalOrientation)) {
+    const selectionType = getTableSelectionType(editor);
+    if (!selectionType) return emptyResult;
+    finalIndex = selectionType.index;
+    finalOrientation = selectionType.orientation;
+  }
+  const result = collectCells(editor, finalOrientation, finalIndex, tablePos);
+  return { ...result, index: finalIndex, orientation: finalOrientation };
+}
+function isCellEmpty(cellNode) {
+  if (cellNode.childCount === 0) return true;
+  let isEmpty = true;
+  cellNode.descendants((n) => {
+    var _a;
+    if (n.isText && ((_a = n.text) == null ? void 0 : _a.trim())) {
+      isEmpty = false;
+      return false;
+    }
+    if (n.isLeaf && !n.isText) {
+      isEmpty = false;
+      return false;
+    }
+    return true;
+  });
+  return isEmpty;
+}
+
+// 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-sort-row-column.ts
+var REQUIRED_EXTENSIONS = ["tableHandleExtension"];
+var sortMessageKeys = {
+  row: {
+    asc: messages.sort_row_asc,
+    desc: messages.sort_row_desc
+  },
+  column: {
+    asc: messages.sort_column_asc,
+    desc: messages.sort_column_desc
+  }
+};
+var tableSortRowColumnIcons = {
+  asc: import_icons.ArrowDownAZIcon,
+  desc: import_icons.ArrowDownZAIcon
+};
+function isCellHeader(cellNode) {
+  var _a;
+  if (!cellNode) return false;
+  return cellNode.type.name === "tableHeader" || cellNode.type.name === "table_header" || ((_a = cellNode.attrs) == null ? void 0 : _a.header) === true;
+}
+function getCellSortText(cellNode) {
+  if (!cellNode) return "";
+  let text = "";
+  cellNode.descendants((node) => {
+    if (node.isText) {
+      text += node.text || "";
+    }
+    return true;
+  });
+  return text.trim().toLowerCase();
+}
+function canSortRowColumn({
+  editor,
+  index,
+  orientation,
+  tablePos
+}) {
+  if (!editor || !editor.isEditable || !(0, import_editor_utils.isExtensionAvailable)(editor, REQUIRED_EXTENSIONS)) {
+    return false;
+  }
+  try {
+    const table = getTable(editor, tablePos);
+    if (!table) return false;
+    const cellData = getRowOrColumnCells(editor, index, orientation, tablePos);
+    if (cellData.orientation === "row") {
+      if (table.map.width < 2) return false;
+    } else {
+      if (table.map.height < 2) return false;
+    }
+    if (cellData.mergedCells.length > 0) {
+      return false;
+    }
+    const hasContent = cellData.cells.some(
+      (cellInfo) => cellInfo.node && !isCellHeader(cellInfo.node) && !isCellEmpty(cellInfo.node)
+    );
+    if (!hasContent) {
+      return false;
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+function tableSortRowColumn({
+  editor,
+  index,
+  orientation,
+  direction,
+  tablePos
+}) {
+  if (!canSortRowColumn({ editor, index, orientation, tablePos }) || !editor)
+    return false;
+  try {
+    const { state, view } = editor;
+    const tr = state.tr;
+    const cellData = getRowOrColumnCells(editor, index, orientation, tablePos);
+    if (cellData.mergedCells.length > 0) {
+      console.warn(
+        `Cannot sort ${orientation} ${index}: contains merged cells`
+      );
+      return false;
+    }
+    if (cellData.cells.length < 2) {
+      return false;
+    }
+    const allItems = cellData.cells.map(
+      (cellInfo, originalIndex) => {
+        const isHeader = isCellHeader(cellInfo.node);
+        const isEmpty = cellInfo.node ? isCellEmpty(cellInfo.node) : true;
+        return {
+          sortText: getCellSortText(cellInfo.node),
+          originalNode: cellInfo.node,
+          cellInfo,
+          originalIndex,
+          isHeader,
+          isEmpty
+        };
+      }
+    );
+    const dataItems = allItems.filter((item) => !item.isHeader);
+    if (dataItems.length < 2) {
+      console.log("No sortable data cells found (excluding headers)");
+      return false;
+    }
+    dataItems.sort((a, b) => {
+      if (a.isEmpty && !b.isEmpty) return 1;
+      if (!a.isEmpty && b.isEmpty) return -1;
+      if (a.isEmpty && b.isEmpty) return 0;
+      const comparison = a.sortText.localeCompare(b.sortText, void 0, {
+        sensitivity: "base"
+      });
+      return direction === "asc" ? comparison : -comparison;
+    });
+    const newCellNodes = [];
+    let dataIndex = 0;
+    for (let i = 0; i < allItems.length; i++) {
+      const originalItem = allItems[i];
+      const targetCell = cellData.cells[i];
+      if (!targetCell || !originalItem) continue;
+      let nodeToPlace = null;
+      if (originalItem.isHeader) {
+        nodeToPlace = originalItem.originalNode;
+      } else {
+        const sortedDataItem = dataItems[dataIndex];
+        nodeToPlace = (sortedDataItem == null ? void 0 : sortedDataItem.originalNode) || null;
+        dataIndex++;
+      }
+      if (nodeToPlace && targetCell.node) {
+        const cellType = targetCell.node.type;
+        const newCellNode = cellType.create(
+          nodeToPlace.attrs,
+          nodeToPlace.content,
+          nodeToPlace.marks
+        );
+        newCellNodes.push(newCellNode);
+      } else {
+        newCellNodes.push(targetCell.node);
+      }
+    }
+    const cellsToReplace = [...cellData.cells].reverse();
+    const newNodesToPlace = [...newCellNodes].reverse();
+    cellsToReplace.forEach((targetCell, reverseIndex) => {
+      const newNode = newNodesToPlace[reverseIndex];
+      if (newNode && targetCell.node) {
+        const cellEnd = targetCell.pos + targetCell.node.nodeSize;
+        tr.replaceWith(targetCell.pos, cellEnd, newNode);
+      }
+    });
+    if (tr.docChanged) {
+      view.dispatch(tr);
+      return true;
+    }
+    return false;
+  } catch (error) {
+    console.error(`Error sorting table ${orientation}:`, error);
+    return false;
+  }
+}
+function shouldShowButton({
+  editor,
+  index,
+  orientation,
+  hideWhenUnavailable,
+  tablePos
+}) {
+  if (!editor || !editor.isEditable) return false;
+  if (!(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,
+    tablePos
+  );
+  if (!selectionType) return false;
+  return hideWhenUnavailable ? canSortRowColumn({ editor, index, orientation, tablePos }) : true;
+}
+function useTableSortRowColumn(config = { direction: "asc" }) {
+  const {
+    editor: providedEditor,
+    index,
+    orientation,
+    tablePos,
+    direction,
+    hideWhenUnavailable = false,
+    onSorted
+  } = 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,
+    hideWhenUnavailable,
+    tablePos
+  });
+  const canPerformSort = canSortRowColumn({
+    editor,
+    index,
+    orientation,
+    tablePos
+  });
+  const handleSort = (0, import_react.useCallback)(() => {
+    const success = tableSortRowColumn({
+      editor,
+      index,
+      orientation,
+      direction,
+      tablePos
+    });
+    if (success) onSorted == null ? void 0 : onSorted();
+    return success;
+  }, [editor, index, orientation, direction, tablePos, onSorted]);
+  const label = (0, import_react.useMemo)(() => {
+    const orient = (selectionType == null ? void 0 : selectionType.orientation) || "row";
+    return intl.formatMessage(sortMessageKeys[orient][direction]);
+  }, [intl, selectionType, direction]);
+  const Icon = (0, import_react.useMemo)(() => {
+    return tableSortRowColumnIcons[direction] || import_icons.ArrowDownAZIcon;
+  }, [direction]);
+  return {
+    isVisible,
+    canSortRowColumn: canPerformSort,
+    handleSort,
+    label,
+    Icon
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  tableSortRowColumnIcons,
+  useTableSortRowColumn
+});

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

@@ -0,0 +1,13 @@
+"use client";
+"use client";
+import {
+  tableSortRowColumnIcons,
+  useTableSortRowColumn
+} from "../chunk-6FHFDGJO.mjs";
+import "../chunk-CN73TYHV.mjs";
+import "../chunk-5B5XIL2G.mjs";
+import "../chunk-WKV76XOR.mjs";
+export {
+  tableSortRowColumnIcons,
+  useTableSortRowColumn
+};

package/dist/index.d.mts

@@ -1,8 +1,21 @@
-export { TableKit, TableKitOptions } from './kit.mjs';
-export { Table } from './table/table.mjs';
-export { TableCell, TableCellOptions } from './table-cell.mjs';
-export { TableHeader } from './table-header.mjs';
-export { TableRow } from './table-row.mjs';
+export { TableKit, TableKitOptions } from './extensions/kit.mjs';
+export { Table } from './extensions/table.mjs';
+export { TableCell } from './extensions/table-cell.mjs';
+export { messages as tableMessages } from './messages.mjs';
+export { TableAlignMenuItems, TableAlignSubMenu } from './ui/table-alignment-menu.mjs';
+export { TableCellHandleMenu } from './ui/table-cell-handle-menu.mjs';
+export { TableHandle } from './ui/table-handle.mjs';
+export { TableSelectionOverlay } from './ui/table-selection-overlay.mjs';
 import '@tiptap/extension-table';
 import '@tiptap/react';
 import '@tiptap/core';
+import '@tiptap/extension-table/cell';
+import 'react/jsx-runtime';
+import './lib/table-utils.mjs';
+import '@tiptap/pm/model';
+import '@tiptap/pm/state';
+import '@tiptap/pm/tables';
+import 'react';
+import './hooks/use-table-handle-positioning.mjs';
+import './hooks/use-table-handle-state.mjs';
+import './extensions/table-handle-plugin.mjs';

package/dist/index.d.ts

@@ -1,8 +1,21 @@
-export { TableKit, TableKitOptions } from './kit.js';
-export { Table } from './table/table.js';
-export { TableCell, TableCellOptions } from './table-cell.js';
-export { TableHeader } from './table-header.js';
-export { TableRow } from './table-row.js';
+export { TableKit, TableKitOptions } from './extensions/kit.js';
+export { Table } from './extensions/table.js';
+export { TableCell } from './extensions/table-cell.js';
+export { messages as tableMessages } from './messages.js';
+export { TableAlignMenuItems, TableAlignSubMenu } from './ui/table-alignment-menu.js';
+export { TableCellHandleMenu } from './ui/table-cell-handle-menu.js';
+export { TableHandle } from './ui/table-handle.js';
+export { TableSelectionOverlay } from './ui/table-selection-overlay.js';
 import '@tiptap/extension-table';
 import '@tiptap/react';
 import '@tiptap/core';
+import '@tiptap/extension-table/cell';
+import 'react/jsx-runtime';
+import './lib/table-utils.js';
+import '@tiptap/pm/model';
+import '@tiptap/pm/state';
+import '@tiptap/pm/tables';
+import 'react';
+import './hooks/use-table-handle-positioning.js';
+import './hooks/use-table-handle-state.js';
+import './extensions/table-handle-plugin.js';