@kopexa/extension-table 17.0.45 → 17.1.0

package/dist/ui/table-cell-handle-menu.js

@@ -0,0 +1,1317 @@
+"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/ui/table-cell-handle-menu.tsx
+var table_cell_handle_menu_exports = {};
+__export(table_cell_handle_menu_exports, {
+  TableActionMenu: () => TableActionMenu,
+  TableCellHandleMenu: () => TableCellHandleMenu
+});
+module.exports = __toCommonJS(table_cell_handle_menu_exports);
+var import_dropdown_menu2 = require("@kopexa/dropdown-menu");
+var import_editor_utils4 = require("@kopexa/editor-utils");
+var import_i18n6 = require("@kopexa/i18n");
+var import_icons5 = require("@kopexa/icons");
+var import_shared_utils3 = require("@kopexa/shared-utils");
+var import_theme = require("@kopexa/theme");
+var import_react4 = require("react");
+
+// src/hooks/use-table-clear-row-column-content.ts
+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");
+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;
+}
+function setCellAttr(nameOrAttrs, value) {
+  return (state, dispatch) => {
+    var _a;
+    if (!(0, import_tables.isInTable)(state)) return false;
+    const $cell = (0, import_tables.selectionCell)(state);
+    const attrs = typeof nameOrAttrs === "string" ? { [nameOrAttrs]: value } : nameOrAttrs;
+    if (dispatch) {
+      const tr = state.tr;
+      if (state.selection instanceof import_tables.CellSelection) {
+        state.selection.forEachCell((node, pos) => {
+          const needsUpdate = Object.entries(attrs).some(
+            ([name, val]) => node.attrs[name] !== val
+          );
+          if (needsUpdate) {
+            tr.setNodeMarkup(pos, null, {
+              ...node.attrs,
+              ...attrs
+            });
+          }
+        });
+      } else {
+        const needsUpdate = Object.entries(attrs).some(
+          ([name, val]) => {
+            var _a2;
+            return ((_a2 = $cell.nodeAfter) == null ? void 0 : _a2.attrs[name]) !== val;
+          }
+        );
+        if (needsUpdate) {
+          tr.setNodeMarkup($cell.pos, null, {
+            ...(_a = $cell.nodeAfter) == null ? void 0 : _a.attrs,
+            ...attrs
+          });
+        }
+      }
+      dispatch(tr);
+    }
+    return true;
+  };
+}
+
+// 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-clear-row-column-content.ts
+var REQUIRED_EXTENSIONS = ["table"];
+var clearMessageKeys = {
+  row: messages.clear_row_contents,
+  column: messages.clear_column_contents
+};
+var DEFAULT_CELL_ATTRS = {
+  backgroundColor: null,
+  nodeVerticalAlign: null,
+  nodeTextAlign: null
+};
+function canClearRowColumnContent({
+  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 selectionType = getTableSelectionType(
+      editor,
+      index,
+      orientation,
+      tablePos
+    );
+    if (selectionType) {
+      const cellData = getRowOrColumnCells(
+        editor,
+        selectionType.index,
+        selectionType.orientation,
+        tablePos
+      );
+      if (cellData.cells.length === 0) return false;
+      return cellData.cells.some(
+        (cellInfo) => cellInfo.node && !isCellEmpty(cellInfo.node)
+      );
+    } else {
+      const { selection } = editor.state;
+      if (selection instanceof import_tables2.CellSelection) {
+        let hasContent = false;
+        selection.forEachCell((cell2) => {
+          if (!isCellEmpty(cell2)) {
+            hasContent = true;
+          }
+        });
+        return hasContent;
+      }
+      const { $anchor } = selection;
+      const cell = (0, import_tables2.cellAround)($anchor);
+      if (!cell) return false;
+      const cellNode = editor.state.doc.nodeAt(cell.pos);
+      return cellNode ? !isCellEmpty(cellNode) : false;
+    }
+  } catch {
+    return false;
+  }
+}
+function clearSelectedCells(editor, resetAttrs = false) {
+  try {
+    const { state, view } = editor;
+    const { selection } = state;
+    if (selection instanceof import_tables2.CellSelection) {
+      if (resetAttrs) {
+        const attrSuccess = setCellAttr(DEFAULT_CELL_ATTRS)(
+          state,
+          view.dispatch
+        );
+        (0, import_tables2.deleteCellSelection)(editor.state, view.dispatch);
+        return attrSuccess;
+      }
+      (0, import_tables2.deleteCellSelection)(state, view.dispatch);
+      return true;
+    }
+    const { $anchor } = selection;
+    const cell = (0, import_tables2.cellAround)($anchor);
+    if (!cell) return false;
+    const cellNode = state.doc.nodeAt(cell.pos);
+    if (!cellNode) return false;
+    const from = cell.pos + 1;
+    const to = cell.pos + cellNode.nodeSize - 1;
+    if (from >= to) return false;
+    const tr = state.tr.delete(from, to);
+    if (resetAttrs) {
+      tr.setNodeMarkup(cell.pos, null, {
+        ...cellNode.attrs,
+        ...DEFAULT_CELL_ATTRS
+      });
+    }
+    view.dispatch(tr);
+    return true;
+  } catch (error) {
+    console.error("Error clearing selected cells:", error);
+    return false;
+  }
+}
+function clearRowColumnCells({
+  editor,
+  index,
+  orientation,
+  tablePos,
+  resetAttrs = false
+}) {
+  try {
+    const { state, view } = editor;
+    const tr = state.tr;
+    const cellData = getRowOrColumnCells(editor, index, orientation, tablePos);
+    if (cellData.cells.length === 0) {
+      return false;
+    }
+    const cellsToProcess = [...cellData.cells].reverse();
+    cellsToProcess.forEach((cellInfo) => {
+      if (cellInfo.node && !isCellEmpty(cellInfo.node)) {
+        const from = cellInfo.pos + 1;
+        const to = cellInfo.pos + cellInfo.node.nodeSize - 1;
+        if (from < to) {
+          tr.delete(from, to);
+        }
+        if (resetAttrs) {
+          tr.setNodeMarkup(cellInfo.pos, null, {
+            ...cellInfo.node.attrs,
+            ...DEFAULT_CELL_ATTRS
+          });
+        }
+      }
+    });
+    if (tr.docChanged) {
+      view.dispatch(tr);
+      return true;
+    }
+    return false;
+  } catch (error) {
+    console.error(`Error clearing ${orientation} content:`, error);
+    return false;
+  }
+}
+function tableClearRowColumnContent({
+  editor,
+  index,
+  orientation,
+  tablePos,
+  resetAttrs = false
+}) {
+  if (!canClearRowColumnContent({ editor, index, orientation, tablePos }) || !editor) {
+    return false;
+  }
+  try {
+    const selectionType = getTableSelectionType(
+      editor,
+      index,
+      orientation,
+      tablePos
+    );
+    if (selectionType) {
+      return clearRowColumnCells({
+        editor,
+        index: selectionType.index,
+        orientation: selectionType.orientation,
+        resetAttrs,
+        tablePos
+      });
+    } else {
+      return clearSelectedCells(editor, resetAttrs);
+    }
+  } catch (error) {
+    console.error("Error clearing table content:", error);
+    return false;
+  }
+}
+function shouldShowButton({
+  editor,
+  index,
+  orientation,
+  tablePos,
+  hideWhenUnavailable
+}) {
+  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
+  );
+  const { selection } = editor.state;
+  const isInTableCell = selection instanceof import_tables2.CellSelection || (0, import_tables2.cellAround)(selection.$anchor);
+  if (!selectionType && !isInTableCell) return false;
+  return hideWhenUnavailable ? canClearRowColumnContent({ editor, index, orientation, tablePos }) : true;
+}
+function useTableClearRowColumnContent(config = {}) {
+  const {
+    editor: providedEditor,
+    index,
+    orientation,
+    tablePos,
+    hideWhenUnavailable = false,
+    resetAttrs = false,
+    onCleared
+  } = config;
+  const { editor } = (0, import_editor_utils.useTiptapEditor)(providedEditor);
+  const intl = (0, import_i18n2.useSafeIntl)();
+  const selectionType = getTableSelectionType(
+    editor,
+    index,
+    orientation,
+    tablePos
+  );
+  const isVisible = shouldShowButton({
+    editor,
+    index,
+    orientation,
+    tablePos,
+    hideWhenUnavailable
+  });
+  const canPerformClear = canClearRowColumnContent({
+    editor,
+    index,
+    orientation,
+    tablePos
+  });
+  const handleClear = (0, import_react.useCallback)(() => {
+    const success = tableClearRowColumnContent({
+      editor,
+      index,
+      orientation,
+      tablePos,
+      resetAttrs
+    });
+    if (success) onCleared == null ? void 0 : onCleared();
+    return success;
+  }, [editor, index, orientation, tablePos, resetAttrs, onCleared]);
+  const label = (0, import_react.useMemo)(() => {
+    if (selectionType) {
+      return intl.formatMessage(clearMessageKeys[selectionType.orientation]);
+    }
+    return intl.formatMessage(messages.clear_contents);
+  }, [intl, selectionType]);
+  const Icon = import_icons.SquareXIcon;
+  return {
+    isVisible,
+    canClearRowColumnContent: canPerformClear,
+    handleClear,
+    label,
+    Icon
+  };
+}
+
+// src/hooks/use-table-merge-split-cell.ts
+var import_editor_utils2 = require("@kopexa/editor-utils");
+var import_i18n3 = require("@kopexa/i18n");
+var import_icons2 = require("@kopexa/icons");
+var import_tables3 = require("@tiptap/pm/tables");
+var import_react2 = require("react");
+var REQUIRED_EXTENSIONS2 = ["table"];
+var mergeSplitMessageKeys = {
+  merge: messages.merge_cells,
+  split: messages.split_cell
+};
+var tableMergeSplitCellIcons = {
+  merge: import_icons2.TableCellMergeIcon,
+  split: import_icons2.TableCellSplitIcon
+};
+function canMergeCells(editor) {
+  if (!editor || !editor.isEditable || !(0, import_editor_utils2.isExtensionAvailable)(editor, REQUIRED_EXTENSIONS2)) {
+    return false;
+  }
+  try {
+    return (0, import_tables3.mergeCells)(editor.state, void 0);
+  } catch {
+    return false;
+  }
+}
+function canSplitCell(editor) {
+  if (!editor || !editor.isEditable || !(0, import_editor_utils2.isExtensionAvailable)(editor, REQUIRED_EXTENSIONS2)) {
+    return false;
+  }
+  try {
+    return (0, import_tables3.splitCell)(editor.state, void 0);
+  } catch {
+    return false;
+  }
+}
+function tableMergeCells(editor) {
+  if (!canMergeCells(editor) || !editor) return false;
+  try {
+    const { state, view } = editor;
+    return (0, import_tables3.mergeCells)(state, view.dispatch.bind(view));
+  } catch (error) {
+    console.error("Error merging table cells:", error);
+    return false;
+  }
+}
+function tableSplitCell(editor) {
+  if (!canSplitCell(editor) || !editor) return false;
+  try {
+    const { state, view } = editor;
+    return (0, import_tables3.splitCell)(state, view.dispatch.bind(view));
+  } catch (error) {
+    console.error("Error splitting table cell:", error);
+    return false;
+  }
+}
+function tableMergeSplitCell({
+  editor,
+  action
+}) {
+  if (!editor) return false;
+  try {
+    return action === "merge" ? tableMergeCells(editor) : tableSplitCell(editor);
+  } catch (error) {
+    console.error(`Error ${action}ing table cell:`, error);
+    return false;
+  }
+}
+function shouldShowButton2({
+  editor,
+  action,
+  hideWhenUnavailable
+}) {
+  if (!editor || !editor.isEditable) return false;
+  if (!(0, import_editor_utils2.isExtensionAvailable)(editor, REQUIRED_EXTENSIONS2)) return false;
+  if (hideWhenUnavailable) {
+    return action === "merge" ? canMergeCells(editor) : canSplitCell(editor);
+  }
+  return true;
+}
+function useTableMergeSplitCell(config) {
+  const {
+    editor: providedEditor,
+    action,
+    hideWhenUnavailable = false,
+    onExecuted
+  } = config;
+  const { editor } = (0, import_editor_utils2.useTiptapEditor)(providedEditor);
+  const intl = (0, import_i18n3.useSafeIntl)();
+  const isVisible = shouldShowButton2({
+    editor,
+    action,
+    hideWhenUnavailable
+  });
+  const canPerformAction = action === "merge" ? canMergeCells(editor) : canSplitCell(editor);
+  const handleExecute = (0, import_react2.useCallback)(() => {
+    const success = tableMergeSplitCell({
+      editor,
+      action
+    });
+    if (success) {
+      onExecuted == null ? void 0 : onExecuted(action);
+    }
+    return success;
+  }, [editor, action, onExecuted]);
+  return {
+    isVisible,
+    canExecute: canPerformAction,
+    handleExecute,
+    label: intl.formatMessage(mergeSplitMessageKeys[action]),
+    Icon: tableMergeSplitCellIcons[action]
+  };
+}
+
+// src/ui/table-alignment-menu.tsx
+var import_dropdown_menu = require("@kopexa/dropdown-menu");
+var import_i18n5 = require("@kopexa/i18n");
+var import_icons4 = require("@kopexa/icons");
+var import_shared_utils2 = require("@kopexa/shared-utils");
+
+// src/hooks/use-table-align-cell.ts
+var import_editor_utils3 = require("@kopexa/editor-utils");
+var import_i18n4 = require("@kopexa/i18n");
+var import_icons3 = require("@kopexa/icons");
+var import_react3 = require("react");
+var REQUIRED_EXTENSIONS3 = ["table"];
+var textAlignmentMessageKeys = {
+  left: messages.align_left,
+  center: messages.align_center,
+  right: messages.align_right,
+  justify: messages.justify
+};
+var verticalAlignmentMessageKeys = {
+  top: messages.align_top,
+  middle: messages.align_middle,
+  bottom: messages.align_bottom
+};
+var tableAlignCellIcons = {
+  text: {
+    left: import_icons3.AlignLeftIcon,
+    center: import_icons3.AlignCenterIcon,
+    right: import_icons3.AlignRightIcon,
+    justify: import_icons3.AlignJustifyIcon
+  },
+  vertical: {
+    top: import_icons3.AlignTopIcon,
+    middle: import_icons3.AlignMiddleIcon,
+    bottom: import_icons3.AlignBottomIcon
+  }
+};
+function canAlignCell(editor) {
+  if (!editor || !editor.isEditable || !(0, import_editor_utils3.isExtensionAvailable)(editor, REQUIRED_EXTENSIONS3)) {
+    return false;
+  }
+  try {
+    return editor.isActive("tableCell") || editor.isActive("tableHeader");
+  } catch {
+    return false;
+  }
+}
+function canAlignRowColumn({
+  editor,
+  index,
+  orientation
+}) {
+  if (!editor || !editor.isEditable || !(0, import_editor_utils3.isExtensionAvailable)(editor, REQUIRED_EXTENSIONS3)) {
+    return false;
+  }
+  try {
+    const table = getTable(editor);
+    if (!table) return false;
+    const cellData = getRowOrColumnCells(editor, index, orientation);
+    if (cellData.cells.length === 0) return false;
+    return true;
+  } catch {
+    return false;
+  }
+}
+function getCurrentAlignment(editor, alignmentType) {
+  if (!canAlignCell(editor) || !editor) return null;
+  try {
+    const { selection } = editor.state;
+    const $anchor = selection.$anchor;
+    let cellNode = null;
+    for (let depth = $anchor.depth; depth >= 0; depth--) {
+      const node = $anchor.node(depth);
+      if (node.type.name === "tableCell" || node.type.name === "tableHeader") {
+        cellNode = node;
+        break;
+      }
+    }
+    if (!cellNode) return null;
+    const attrs = cellNode.attrs || {};
+    if (alignmentType === "text") {
+      return attrs.nodeTextAlign || "left";
+    } else {
+      return attrs.nodeVerticalAlign || "top";
+    }
+  } catch {
+    return null;
+  }
+}
+function getCurrentRowColumnAlignment(editor, alignmentType, index, orientation) {
+  if (!editor) return null;
+  try {
+    const cellData = getRowOrColumnCells(editor, index, orientation);
+    if (cellData.cells.length === 0) return null;
+    const firstCell = cellData.cells[0];
+    if (!(firstCell == null ? void 0 : firstCell.node)) return null;
+    const attrs = firstCell.node.attrs || {};
+    if (alignmentType === "text") {
+      return attrs.nodeTextAlign || "left";
+    } else {
+      return attrs.nodeVerticalAlign || "top";
+    }
+  } catch {
+    return null;
+  }
+}
+function setTableCellAlignment(editor, alignmentType, alignment) {
+  if (!canAlignCell(editor) || !editor) return false;
+  try {
+    if (alignmentType === "text") {
+      return editor.commands.setCellAttribute("nodeTextAlign", alignment);
+    } else {
+      return editor.commands.setCellAttribute("nodeVerticalAlign", alignment);
+    }
+  } catch (error) {
+    console.error("Error setting table cell alignment:", error);
+    return false;
+  }
+}
+function setRowColumnAlignment({
+  editor,
+  alignmentType,
+  alignment,
+  index,
+  orientation
+}) {
+  if (!canAlignRowColumn({ editor, index, orientation }) || !editor) {
+    return false;
+  }
+  try {
+    const { state, view } = editor;
+    const tr = state.tr;
+    const cellData = getRowOrColumnCells(editor, index, orientation);
+    if (cellData.cells.length === 0) {
+      return false;
+    }
+    const uniqueCells = /* @__PURE__ */ new Map();
+    cellData.cells.forEach((cellInfo) => {
+      if (cellInfo.node && cellInfo.pos !== void 0) {
+        uniqueCells.set(cellInfo.pos, cellInfo);
+      }
+    });
+    if (uniqueCells.size === 0) {
+      return false;
+    }
+    const cellsToProcess = Array.from(uniqueCells.values()).sort(
+      (a, b) => b.pos - a.pos
+    );
+    const attributeName = alignmentType === "text" ? "nodeTextAlign" : "nodeVerticalAlign";
+    cellsToProcess.forEach((cellInfo) => {
+      if (cellInfo.node && cellInfo.pos !== void 0) {
+        const cellType = cellInfo.node.type;
+        const newCellNode = cellType.create(
+          {
+            ...cellInfo.node.attrs,
+            [attributeName]: alignment
+          },
+          cellInfo.node.content,
+          cellInfo.node.marks
+        );
+        const cellEnd = cellInfo.pos + cellInfo.node.nodeSize;
+        tr.replaceWith(cellInfo.pos, cellEnd, newCellNode);
+      }
+    });
+    if (tr.docChanged) {
+      view.dispatch(tr);
+      return true;
+    }
+    return false;
+  } catch (error) {
+    console.error(`Error aligning table ${orientation}:`, error);
+    return false;
+  }
+}
+function tableAlignCell({
+  editor,
+  alignmentType,
+  alignment,
+  index,
+  orientation
+}) {
+  if (!editor) return false;
+  try {
+    if (typeof index === "number" && orientation) {
+      return setRowColumnAlignment({
+        editor,
+        alignmentType,
+        alignment,
+        index,
+        orientation
+      });
+    } else {
+      return setTableCellAlignment(editor, alignmentType, alignment);
+    }
+  } catch (error) {
+    console.error("Error aligning table cell:", error);
+    return false;
+  }
+}
+function shouldShowButton3({
+  editor,
+  hideWhenUnavailable,
+  index,
+  orientation
+}) {
+  if (!editor || !editor.isEditable) return false;
+  if (!(0, import_editor_utils3.isExtensionAvailable)(editor, REQUIRED_EXTENSIONS3)) return false;
+  if (hideWhenUnavailable) {
+    if (typeof index === "number" && orientation) {
+      return canAlignRowColumn({ editor, index, orientation });
+    }
+    return canAlignCell(editor);
+  }
+  return true;
+}
+function useTableAlignCell(config) {
+  const {
+    editor: providedEditor,
+    alignmentType,
+    alignment,
+    index,
+    orientation,
+    hideWhenUnavailable = false,
+    onAligned
+  } = config;
+  const { editor } = (0, import_editor_utils3.useTiptapEditor)(providedEditor);
+  const intl = (0, import_i18n4.useSafeIntl)();
+  const isVisible = shouldShowButton3({
+    editor,
+    hideWhenUnavailable,
+    index,
+    orientation
+  });
+  const canPerformAlign = (0, import_react3.useCallback)(() => {
+    if (typeof index === "number" && orientation) {
+      return canAlignRowColumn({ editor, index, orientation });
+    }
+    return canAlignCell(editor);
+  }, [editor, index, orientation]);
+  const currentAlignmentValue = (0, import_react3.useMemo)(() => {
+    if (typeof index === "number" && orientation) {
+      return getCurrentRowColumnAlignment(
+        editor,
+        alignmentType,
+        index,
+        orientation
+      );
+    }
+    return getCurrentAlignment(editor, alignmentType);
+  }, [editor, alignmentType, index, orientation]);
+  const isActive = currentAlignmentValue === alignment;
+  const handleAlign = (0, import_react3.useCallback)(() => {
+    const success = tableAlignCell({
+      editor,
+      alignmentType,
+      alignment,
+      index,
+      orientation
+    });
+    if (success) {
+      onAligned == null ? void 0 : onAligned(alignment);
+    }
+    return success;
+  }, [editor, alignmentType, alignment, index, orientation, onAligned]);
+  const label = (0, import_react3.useMemo)(() => {
+    if (alignmentType === "text") {
+      return intl.formatMessage(
+        textAlignmentMessageKeys[alignment]
+      );
+    }
+    return intl.formatMessage(
+      verticalAlignmentMessageKeys[alignment]
+    );
+  }, [intl, alignmentType, alignment]);
+  const Icon = (0, import_react3.useMemo)(() => {
+    if (alignmentType === "text") {
+      return tableAlignCellIcons.text[alignment];
+    } else {
+      return tableAlignCellIcons.vertical[alignment];
+    }
+  }, [alignmentType, alignment]);
+  return {
+    isVisible,
+    canAlignCell: canPerformAlign,
+    handleAlign,
+    label,
+    Icon,
+    isActive,
+    currentAlignment: currentAlignmentValue
+  };
+}
+
+// src/ui/table-alignment-menu.tsx
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_menu.DropdownMenu.Group, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlignMenuItem, { align: textLeft }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlignMenuItem, { align: textCenter }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlignMenuItem, { align: textRight })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.Separator, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_menu.DropdownMenu.Group, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlignMenuItem, { align: verticalTop }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlignMenuItem, { align: verticalMiddle }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlignMenuItem, { align: verticalBottom })
+    ] })
+  ] });
+};
+var TableAlignSubMenu = ({
+  index,
+  orientation
+}) => {
+  const probe = useTableAlignCell({
+    alignmentType: "text",
+    alignment: "left",
+    index,
+    orientation
+  });
+  const intl = (0, import_i18n5.useSafeIntl)();
+  if (!probe.canAlignCell()) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_menu.DropdownMenu.Sub, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown_menu.DropdownMenu.SubTrigger, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons4.AlignLeftIcon, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: intl.formatMessage(messages.alignment) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.DropdownMenu.SubContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableAlignMenuItems, { index, orientation }) })
+  ] });
+};
+var AlignMenuItem = ({
+  align
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  import_dropdown_menu.DropdownMenu.Item,
+  {
+    disabled: !align.canAlignCell(),
+    onSelect: align.handleAlign,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(align.Icon, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: align.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          className: (0, import_shared_utils2.cn)("ml-auto", align.isActive ? "opacity-100" : "opacity-0"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons4.CheckIcon, {})
+        }
+      )
+    ]
+  }
+);
+
+// src/ui/table-cell-handle-menu.tsx
+var import_jsx_runtime2 = require("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] = (0, import_react4.useState)(false);
+  const closeMenu = (0, import_react4.useCallback)(() => {
+    setIsMenuOpen(false);
+    editor == null ? void 0 : editor.commands.unfreezeHandles();
+  }, [editor]);
+  const handleMenuToggle = (0, import_react4.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__ */ (0, import_jsx_runtime2.jsxs)(
+    import_dropdown_menu2.DropdownMenu.Item,
+    {
+      onClick,
+      "data-state": isActive ? "active" : "inactive",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: "tiptap-button-icon" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "tiptap-button-text", children: label }),
+        shortcutBadge
+      ]
+    }
+  );
+};
+var TableActionMenu = () => {
+  const { mergeAction, splitAction, clearAction } = useTableActions();
+  const hasMergeOrSplit = mergeAction.isAvailable || splitAction.isAvailable;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_dropdown_menu2.DropdownMenu.Content, { children: [
+    hasMergeOrSplit && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_dropdown_menu2.DropdownMenu.Group, { children: [
+        mergeAction.isAvailable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableActionItem, { action: mergeAction }),
+        splitAction.isAvailable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableActionItem, { action: splitAction })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dropdown_menu2.DropdownMenu.Separator, {})
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableAlignSubMenu, {}),
+    clearAction.isAvailable && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dropdown_menu2.DropdownMenu.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dropdown_menu2.DropdownMenu.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableActionItem, { action: clearAction }) })
+    ] })
+  ] });
+};
+var TableCellHandleMenu = (0, import_react4.forwardRef)(({ editor: providedEditor, onOpenChange, className, ...props }, ref) => {
+  const { editor } = (0, import_editor_utils4.useTiptapEditor)(providedEditor);
+  const intl = (0, import_i18n6.useSafeIntl)();
+  const { isMenuOpen, handleMenuToggle } = useTableCellHandleMenu({
+    editor
+  });
+  const styles = (0, import_theme.tableCellHandleMenu)();
+  (0, import_react4.useEffect)(() => {
+    onOpenChange == null ? void 0 : onOpenChange(isMenuOpen);
+  }, [isMenuOpen, onOpenChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_dropdown_menu2.DropdownMenu.Root, { open: isMenuOpen, onOpenChange: handleMenuToggle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dropdown_menu2.DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        ref,
+        "data-open": isMenuOpen,
+        className: (0, import_shared_utils3.cn)(styles.trigger(), className),
+        "aria-label": intl.formatMessage(messages.cell_options),
+        "aria-haspopup": "menu",
+        "aria-expanded": isMenuOpen,
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_icons5.Grip4Icon, { className: styles.icon() })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TableActionMenu, {})
+  ] });
+});
+TableCellHandleMenu.displayName = "TableCellHandleMenu";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TableActionMenu,
+  TableCellHandleMenu
+});