@kopexa/extension-table 17.0.46 → 17.1.0

package/dist/chunk-KIYFW7MP.mjs

@@ -0,0 +1,122 @@
+"use client";
+import {
+  messages
+} from "./chunk-CN73TYHV.mjs";
+
+// src/hooks/use-table-merge-split-cell.ts
+import { isExtensionAvailable, useTiptapEditor } from "@kopexa/editor-utils";
+import { useSafeIntl } from "@kopexa/i18n";
+import { TableCellMergeIcon, TableCellSplitIcon } from "@kopexa/icons";
+import { mergeCells, splitCell } from "@tiptap/pm/tables";
+import { useCallback } from "react";
+var REQUIRED_EXTENSIONS = ["table"];
+var mergeSplitMessageKeys = {
+  merge: messages.merge_cells,
+  split: messages.split_cell
+};
+var tableMergeSplitCellIcons = {
+  merge: TableCellMergeIcon,
+  split: TableCellSplitIcon
+};
+function canMergeCells(editor) {
+  if (!editor || !editor.isEditable || !isExtensionAvailable(editor, REQUIRED_EXTENSIONS)) {
+    return false;
+  }
+  try {
+    return mergeCells(editor.state, void 0);
+  } catch {
+    return false;
+  }
+}
+function canSplitCell(editor) {
+  if (!editor || !editor.isEditable || !isExtensionAvailable(editor, REQUIRED_EXTENSIONS)) {
+    return false;
+  }
+  try {
+    return splitCell(editor.state, void 0);
+  } catch {
+    return false;
+  }
+}
+function tableMergeCells(editor) {
+  if (!canMergeCells(editor) || !editor) return false;
+  try {
+    const { state, view } = editor;
+    return 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 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 shouldShowButton({
+  editor,
+  action,
+  hideWhenUnavailable
+}) {
+  if (!editor || !editor.isEditable) return false;
+  if (!isExtensionAvailable(editor, REQUIRED_EXTENSIONS)) 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 } = useTiptapEditor(providedEditor);
+  const intl = useSafeIntl();
+  const isVisible = shouldShowButton({
+    editor,
+    action,
+    hideWhenUnavailable
+  });
+  const canPerformAction = action === "merge" ? canMergeCells(editor) : canSplitCell(editor);
+  const handleExecute = 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]
+  };
+}
+
+export {
+  tableMergeSplitCellIcons,
+  useTableMergeSplitCell
+};

package/dist/chunk-KTRZVXJC.mjs

@@ -0,0 +1,306 @@
+"use client";
+import {
+  messages
+} from "./chunk-CN73TYHV.mjs";
+import {
+  getRowOrColumnCells,
+  getTable
+} from "./chunk-5B5XIL2G.mjs";
+
+// src/hooks/use-table-align-cell.ts
+import { isExtensionAvailable, useTiptapEditor } from "@kopexa/editor-utils";
+import { useSafeIntl } from "@kopexa/i18n";
+import {
+  AlignBottomIcon,
+  AlignCenterIcon,
+  AlignJustifyIcon,
+  AlignLeftIcon,
+  AlignMiddleIcon,
+  AlignRightIcon,
+  AlignTopIcon
+} from "@kopexa/icons";
+import { useCallback, useMemo } from "react";
+var REQUIRED_EXTENSIONS = ["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: AlignLeftIcon,
+    center: AlignCenterIcon,
+    right: AlignRightIcon,
+    justify: AlignJustifyIcon
+  },
+  vertical: {
+    top: AlignTopIcon,
+    middle: AlignMiddleIcon,
+    bottom: AlignBottomIcon
+  }
+};
+function canAlignCell(editor) {
+  if (!editor || !editor.isEditable || !isExtensionAvailable(editor, REQUIRED_EXTENSIONS)) {
+    return false;
+  }
+  try {
+    return editor.isActive("tableCell") || editor.isActive("tableHeader");
+  } catch {
+    return false;
+  }
+}
+function canAlignRowColumn({
+  editor,
+  index,
+  orientation
+}) {
+  if (!editor || !editor.isEditable || !isExtensionAvailable(editor, REQUIRED_EXTENSIONS)) {
+    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 shouldShowButton({
+  editor,
+  hideWhenUnavailable,
+  index,
+  orientation
+}) {
+  if (!editor || !editor.isEditable) return false;
+  if (!isExtensionAvailable(editor, REQUIRED_EXTENSIONS)) 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 } = useTiptapEditor(providedEditor);
+  const intl = useSafeIntl();
+  const isVisible = shouldShowButton({
+    editor,
+    hideWhenUnavailable,
+    index,
+    orientation
+  });
+  const canPerformAlign = useCallback(() => {
+    if (typeof index === "number" && orientation) {
+      return canAlignRowColumn({ editor, index, orientation });
+    }
+    return canAlignCell(editor);
+  }, [editor, index, orientation]);
+  const currentAlignmentValue = 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 = 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 = useMemo(() => {
+    if (alignmentType === "text") {
+      return intl.formatMessage(
+        textAlignmentMessageKeys[alignment]
+      );
+    }
+    return intl.formatMessage(
+      verticalAlignmentMessageKeys[alignment]
+    );
+  }, [intl, alignmentType, alignment]);
+  const Icon = 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
+  };
+}
+
+export {
+  tableAlignCellIcons,
+  useTableAlignCell
+};

package/dist/chunk-LUA32VH4.mjs

@@ -0,0 +1,35 @@
+"use client";
+import {
+  TableHandlePlugin,
+  tableHandlePluginKey
+} from "./chunk-3SWV7BGP.mjs";
+
+// src/extensions/table-handle.ts
+import { Extension } from "@tiptap/core";
+var TableHandleExtension = Extension.create({
+  name: "tableHandleExtension",
+  addCommands() {
+    return {
+      freezeHandles: () => ({ tr, dispatch }) => {
+        if (dispatch) tr.setMeta(tableHandlePluginKey, true);
+        return true;
+      },
+      unfreezeHandles: () => ({ tr, dispatch }) => {
+        if (dispatch) tr.setMeta(tableHandlePluginKey, false);
+        return true;
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    const { editor } = this;
+    return [
+      TableHandlePlugin(editor, (state) => {
+        this.editor.emit("tableHandleState", state);
+      })
+    ];
+  }
+});
+
+export {
+  TableHandleExtension
+};

package/dist/{chunk-2L3HZWWG.mjs → chunk-MB52MZQ4.mjs}

@@ -1,24 +1,23 @@
 "use client";
 import {
   TableCell
-} from "./chunk-DR2GZJH6.mjs";
+} from "./chunk-E7W2KRZG.mjs";
 import {
-  TableHeader
-} from "./chunk-POJFNXG7.mjs";
-import {
-  TableRow
-} from "./chunk-HWVA6DOK.mjs";
+  TableHandleExtension
+} from "./chunk-LUA32VH4.mjs";
 import {
   Table
-} from "./chunk-LPHCE6EI.mjs";
+} from "./chunk-IRJ6RAVQ.mjs";
 
-// src/kit.ts
+// src/extensions/kit.ts
+import { TableHeader, TableRow } from "@tiptap/extension-table";
 import { Extension } from "@tiptap/react";
 var TableKit = Extension.create({
   name: "tableKit",
   addExtensions() {
     const extensions = [];
     if (this.options.table !== false) {
+      extensions.push(TableHandleExtension);
       extensions.push(Table.configure(this.options.table));
     }
     if (this.options.tableCell !== false) {

package/dist/chunk-PTX5UYV6.mjs

@@ -0,0 +1,10 @@
+"use client";
+
+// src/lib/constants.ts
+var EMPTY_CELL_WIDTH = 120;
+var RESIZE_MIN_WIDTH = 35;
+
+export {
+  EMPTY_CELL_WIDTH,
+  RESIZE_MIN_WIDTH
+};

package/dist/chunk-TEGO6KUS.mjs

@@ -0,0 +1,96 @@
+"use client";
+import {
+  TableHandleMenu
+} from "./chunk-62B2LU2Q.mjs";
+import {
+  useTableHandlePositioning
+} from "./chunk-GBTQVIN5.mjs";
+import {
+  useTableHandleState
+} from "./chunk-GDEXPEW5.mjs";
+import {
+  colDragStart,
+  rowDragStart
+} from "./chunk-3SWV7BGP.mjs";
+
+// src/ui/table-handle.tsx
+import { FloatingPortal } from "@floating-ui/react";
+import { useTiptapEditor } from "@kopexa/editor-utils";
+import { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TableHandle({
+  editor: providedEditor,
+  rowButton: CustomRowButton,
+  columnButton: CustomColumnButton
+}) {
+  const { editor } = useTiptapEditor(providedEditor);
+  const state = useTableHandleState({ editor });
+  const [isRowVisible, setIsRowVisible] = useState(true);
+  const [isColumnVisible, setIsColumnVisible] = useState(true);
+  const [menuOpen, setMenuOpen] = useState(null);
+  const draggingState = useMemo(() => {
+    if (!(state == null ? void 0 : state.draggingState)) return void 0;
+    return {
+      draggedCellOrientation: state.draggingState.draggedCellOrientation,
+      mousePos: state.draggingState.mousePos,
+      initialOffset: state.draggingState.initialOffset
+    };
+  }, [state == null ? void 0 : state.draggingState]);
+  const { rowHandle, colHandle } = useTableHandlePositioning(
+    (state == null ? void 0 : state.show) || false,
+    (state == null ? void 0 : state.referencePosCell) || null,
+    (state == null ? void 0 : state.referencePosTable) || null,
+    draggingState
+  );
+  const toggleRowVisibility = useCallback((visible) => {
+    setIsRowVisible(visible);
+  }, []);
+  const toggleColumnVisibility = useCallback((visible) => {
+    setIsColumnVisible(visible);
+  }, []);
+  const handleMenuOpenChange = useCallback(
+    (type, open) => {
+      setMenuOpen(open ? type : null);
+    },
+    []
+  );
+  if (!editor || !state) return null;
+  const hasValidRowIndex = typeof state.rowIndex === "number";
+  const hasValidColIndex = typeof state.colIndex === "number";
+  const shouldShowRow = isRowVisible && rowHandle.isMounted && hasValidRowIndex || menuOpen === "row";
+  const shouldShowColumn = isColumnVisible && colHandle.isMounted && hasValidColIndex || menuOpen === "column";
+  const RowButton = CustomRowButton || TableHandleMenu;
+  const ColumnButton = CustomColumnButton || TableHandleMenu;
+  return /* @__PURE__ */ jsxs(FloatingPortal, { root: state.widgetContainer, children: [
+    shouldShowRow && /* @__PURE__ */ jsx("div", { ref: rowHandle.ref, style: rowHandle.style, children: /* @__PURE__ */ jsx(
+      RowButton,
+      {
+        editor,
+        orientation: "row",
+        index: state.rowIndex,
+        tablePos: state.blockPos,
+        tableNode: state.block,
+        onToggleOtherHandle: toggleColumnVisibility,
+        dragStart: (e) => rowDragStart(editor, e),
+        onOpenChange: (open) => handleMenuOpenChange("row", open)
+      }
+    ) }),
+    shouldShowColumn && /* @__PURE__ */ jsx("div", { ref: colHandle.ref, style: colHandle.style, children: /* @__PURE__ */ jsx(
+      ColumnButton,
+      {
+        editor,
+        orientation: "column",
+        index: state.colIndex,
+        tablePos: state.blockPos,
+        tableNode: state.block,
+        onToggleOtherHandle: toggleRowVisibility,
+        dragStart: (e) => colDragStart(editor, e),
+        onOpenChange: (open) => handleMenuOpenChange("column", open)
+      }
+    ) })
+  ] });
+}
+
+export {
+  TableHandle
+};