@meta-1/editor 0.0.29 → 1.0.0

package/src/components/tiptap-node/table-node/ui/table-delete-row-column-button/use-table-delete-row-column.ts

@@ -0,0 +1,243 @@
+"use client";
+
+import { useCallback, useMemo } from "react";
+import type { Transaction } from "@tiptap/pm/state";
+import { CellSelection, deleteColumn, deleteRow } from "@tiptap/pm/tables";
+import type { Editor } from "@tiptap/react";
+import { useTranslation } from "react-i18next";
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../../../hooks/use-tiptap-editor";
+// --- Lib ---
+import { isExtensionAvailable } from "../../../../../lib/tiptap-utils";
+// --- Icons ---
+import { TrashIcon } from "../../../../tiptap-icons/trash-icon";
+import type { Orientation } from "../../lib/tiptap-table-utils";
+import { getTable, getTableSelectionType, selectCellsByCoords } from "../../lib/tiptap-table-utils";
+
+export interface UseTableDeleteRowColumnConfig {
+  /**
+   * The Tiptap editor instance. If omitted, the hook will use
+   * the context/editor from `useTiptapEditor`.
+   */
+  editor?: Editor | null;
+  /**
+   * The index of the row or column to delete.
+   */
+  index?: number;
+  /**
+   * Whether you're deleting a row or a column.
+   */
+  orientation?: Orientation;
+  /**
+   * The position of the table in the document.
+   */
+  tablePos?: number;
+  /**
+   * Hide the button when deletion isn't currently possible.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean;
+  /**
+   * Callback function called after a successful delete.
+   */
+  onDeleted?: () => void;
+}
+
+const REQUIRED_EXTENSIONS = ["table"];
+
+export const tableDeleteRowColumnLabels: Record<Orientation, string> = {
+  row: "Delete row",
+  column: "Delete column",
+};
+
+/**
+ * Checks if a table row/column delete can be performed
+ * in the current editor state.
+ */
+function canDeleteRowColumn({
+  editor,
+  index,
+  orientation,
+  tablePos,
+}: {
+  editor: Editor | null;
+  index?: number;
+  orientation?: Orientation;
+  tablePos?: number;
+}): boolean {
+  if (!editor || !editor.isEditable || !isExtensionAvailable(editor, REQUIRED_EXTENSIONS)) {
+    return false;
+  }
+
+  try {
+    const table = getTable(editor, tablePos);
+    if (!table) return false;
+
+    const selectionType = getTableSelectionType(editor, index, orientation);
+    if (!selectionType) return false;
+
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Executes the row/column deletion in the editor.
+ */
+function tableDeleteRowColumn({
+  editor,
+  index,
+  orientation,
+  tablePos,
+}: {
+  editor: Editor | null;
+  index?: number;
+  orientation?: Orientation;
+  tablePos?: number;
+}): boolean {
+  if (!canDeleteRowColumn({ editor, index, orientation, tablePos }) || !editor) {
+    return false;
+  }
+
+  try {
+    const selectionType = getTableSelectionType(editor, index, orientation);
+    if (!selectionType) return false;
+
+    const { orientation: finalOrientation, index: finalIndex } = selectionType;
+
+    const isRow = finalOrientation === "row";
+    const dispatch = (tr: Transaction) => editor.view.dispatch(tr);
+    const deleteOperation = isRow ? deleteRow : deleteColumn;
+
+    if (editor.state.selection instanceof CellSelection) {
+      return deleteOperation(editor.state, dispatch);
+    }
+
+    const table = getTable(editor, tablePos);
+    if (!table) return false;
+
+    const cellCoords = isRow ? { row: finalIndex, col: 0 } : { row: 0, col: finalIndex };
+
+    const cellState = selectCellsByCoords(editor, table.pos, [cellCoords], {
+      mode: "state",
+    });
+
+    if (!cellState) return false;
+
+    return deleteOperation(cellState, dispatch);
+  } catch (error) {
+    console.error(`Error deleting table row/column:`, error);
+    return false;
+  }
+}
+
+/**
+ * Determines if the delete button should be shown
+ * based on editor state and config.
+ */
+function shouldShowButton({
+  editor,
+  index,
+  orientation,
+  hideWhenUnavailable,
+  tablePos,
+}: {
+  editor: Editor | null;
+  index?: number;
+  orientation?: Orientation;
+  hideWhenUnavailable: boolean;
+  tablePos?: number;
+}): boolean {
+  if (!editor || !editor.isEditable) return false;
+  if (!isExtensionAvailable(editor, REQUIRED_EXTENSIONS)) return false;
+  return hideWhenUnavailable ? canDeleteRowColumn({ editor, index, orientation, tablePos }) : true;
+}
+
+/**
+ * Custom hook that provides **table row/column deletion**
+ * functionality for the Tiptap editor.
+ *
+ * @example
+ * ```tsx
+ * // Simple usage with default editor context
+ * function DeleteRowButton() {
+ *   const { isVisible, handleDelete } = useTableDeleteRowColumn({
+ *     index: 0,
+ *     orientation: "row",
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleDelete}>Delete Row</button>
+ * }
+ *
+ * // Advanced usage with custom editor instance
+ * function DeleteColumnButton({ editor }: { editor: Editor }) {
+ *   const { isVisible, handleDelete, label, canDeleteRowColumn, Icon } = useTableDeleteRowColumn({
+ *     editor,
+ *     index: 1,
+ *     orientation: "column",
+ *     hideWhenUnavailable: true,
+ *     onDeleted: () => console.log("Column deleted!"),
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <button
+ *       onClick={handleDelete}
+ *       aria-disabled={!canDeleteRowColumn}
+ *       aria-label={label}
+ *     >
+ *       <Icon /> Delete Column
+ *     </button>
+ *   )
+ * }
+ * ```
+ */
+export function useTableDeleteRowColumn(config: UseTableDeleteRowColumnConfig) {
+  const { editor: providedEditor, index, orientation, tablePos, hideWhenUnavailable = false, onDeleted } = config;
+
+  const { editor } = useTiptapEditor(providedEditor);
+  const { t } = useTranslation();
+  const selectionType = getTableSelectionType(editor, index, orientation);
+
+  const isVisible = shouldShowButton({
+    editor,
+    index,
+    orientation,
+    hideWhenUnavailable,
+  });
+
+  const canPerformDelete = canDeleteRowColumn({
+    editor,
+    index,
+    orientation,
+    tablePos,
+  });
+
+  const handleDelete = useCallback(() => {
+    const success = tableDeleteRowColumn({
+      editor,
+      index,
+      orientation,
+      tablePos,
+    });
+    if (success) onDeleted?.();
+    return success;
+  }, [editor, index, orientation, tablePos, onDeleted]);
+
+  const label = useMemo(() => {
+    return tableDeleteRowColumnLabels[selectionType?.orientation || "row"];
+  }, [selectionType]);
+
+  return {
+    isVisible,
+    canDeleteRowColumn: canPerformDelete,
+    handleDelete,
+    label: t(label),
+    Icon: TrashIcon,
+  };
+}

package/src/components/tiptap-node/table-node/ui/table-duplicate-row-column-button/index.tsx

@@ -0,0 +1,2 @@
+export * from "./table-duplicate-row-column-button"
+export * from "./use-table-duplicate-row-column"

package/src/components/tiptap-node/table-node/ui/table-duplicate-row-column-button/table-duplicate-row-column-button.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import { forwardRef, useCallback } from "react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../../../hooks/use-tiptap-editor"
+
+// --- Tiptap UI ---
+import type { UseTableDuplicateRowColumnConfig } from "./"
+import { useTableDuplicateRowColumn } from "./"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "../../../../tiptap-ui-primitive/button"
+import { Button } from "../../../../tiptap-ui-primitive/button"
+
+export interface TableDuplicateRowColumnButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseTableDuplicateRowColumnConfig {
+  text?: string
+}
+
+export const TableDuplicateRowColumnButton = forwardRef<
+  HTMLButtonElement,
+  TableDuplicateRowColumnButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      index,
+      orientation,
+      tablePos,
+      hideWhenUnavailable = false,
+      onDuplicated,
+      text,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const { isVisible, handleDuplicate, label, canDuplicateRowColumn, Icon } =
+      useTableDuplicateRowColumn({
+        editor,
+        index,
+        orientation,
+        tablePos,
+        hideWhenUnavailable,
+        onDuplicated,
+      })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleDuplicate()
+      },
+      [handleDuplicate, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        disabled={!canDuplicateRowColumn}
+        data-style="ghost"
+        data-active-state="off"
+        data-disabled={!canDuplicateRowColumn}
+        role="button"
+        tabIndex={-1}
+        aria-label={label}
+        aria-pressed={false}
+        tooltip={label}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+TableDuplicateRowColumnButton.displayName = "TableDuplicateRowColumnButton"

package/src/components/tiptap-node/table-node/ui/table-duplicate-row-column-button/use-table-duplicate-row-column.ts

@@ -0,0 +1,357 @@
+"use client";
+
+import { useCallback, useMemo } from "react";
+import { addColumnAfter, addRowAfter, CellSelection } from "@tiptap/pm/tables";
+import type { Editor } from "@tiptap/react";
+import { useTranslation } from "react-i18next";
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../../../hooks/use-tiptap-editor";
+// --- Lib ---
+import { isExtensionAvailable } from "../../../../../lib/tiptap-utils";
+// --- Icons ---
+import { CopyIcon } from "../../../../tiptap-icons/copy-icon";
+import type { Orientation } from "../../lib/tiptap-table-utils";
+import {
+  getIndexCoordinates,
+  getRowOrColumnCells,
+  getTable,
+  getTableSelectionType,
+  selectCellsByCoords,
+  updateSelectionAfterAction,
+} from "../../lib/tiptap-table-utils";
+
+export interface UseTableDuplicateRowColumnConfig {
+  /**
+   * The Tiptap editor instance. If omitted, the hook will use
+   * the context/editor from `useTiptapEditor`.
+   */
+  editor?: Editor | null;
+  /**
+   * The index of the row or column to duplicate.
+   */
+  index?: number;
+  /**
+   * Whether you're duplicating a row or a column.
+   */
+  orientation?: Orientation;
+  /**
+   * The position of the table in the document.
+   */
+  tablePos?: number;
+  /**
+   * Hide the button when duplication isn't currently possible.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean;
+  /**
+   * Callback function called after a successful duplication.
+   */
+  onDuplicated?: () => void;
+}
+
+const REQUIRED_EXTENSIONS = ["tableHandleExtension"];
+
+export const tableDuplicateRowColumnLabels: Record<Orientation, string> = {
+  row: "Duplicate row",
+  column: "Duplicate column",
+};
+
+/**
+ * Checks if a table row/column duplication can be performed
+ * in the current editor state.
+ */
+function canDuplicateRowColumn({
+  editor,
+  index,
+  orientation,
+  tablePos,
+}: {
+  editor: Editor | null;
+  index?: number;
+  orientation?: Orientation;
+  tablePos?: number;
+}): boolean {
+  if (!editor || !editor.isEditable || !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.mergedCells.length > 0) {
+      return false;
+    }
+
+    return cellData.cells.length > 0;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Duplicates a row by using addRowAfter and then replacing the content.
+ */
+function duplicateRow({ editor, index, tablePos }: { editor: Editor; index: number; tablePos?: number }): boolean {
+  try {
+    const originalRowCells = getRowOrColumnCells(editor, index, "row", tablePos);
+
+    if (originalRowCells.cells.length === 0) {
+      return false;
+    }
+
+    let addSuccess = false;
+    if (editor.state.selection instanceof CellSelection) {
+      addSuccess = editor.chain().focus().addRowAfter().run();
+    } else {
+      if (!tablePos) return false;
+      const sourceCoords = getIndexCoordinates({
+        editor,
+        index,
+        orientation: "row",
+        tablePos,
+      });
+      if (!sourceCoords) return false;
+
+      const state = selectCellsByCoords(editor, tablePos, sourceCoords, {
+        mode: "state",
+      });
+      addSuccess = addRowAfter(state, editor.view.dispatch);
+    }
+
+    if (!addSuccess) return false;
+
+    const newRowCells = getRowOrColumnCells(editor, index + 1, "row", tablePos);
+
+    if (newRowCells.cells.length === 0) {
+      return false;
+    }
+
+    const { state, view } = editor;
+    const tr = state.tr;
+
+    // Replace each cell in the new row with duplicated content
+    // Process in reverse order to maintain correct positions
+    const cellsToReplace = [...newRowCells.cells].reverse();
+    const originalCells = [...originalRowCells.cells].reverse();
+
+    cellsToReplace.forEach((newCell, reverseIndex) => {
+      const originalCell = originalCells[reverseIndex];
+      if (newCell.node && originalCell?.node) {
+        const duplicatedCell = newCell.node.type.create(
+          { ...originalCell.node.attrs },
+          originalCell.node.content,
+          originalCell.node.marks,
+        );
+
+        const cellEnd = newCell.pos + newCell.node.nodeSize;
+        tr.replaceWith(newCell.pos, cellEnd, duplicatedCell);
+      }
+    });
+
+    if (tr.docChanged) {
+      view.dispatch(tr);
+
+      updateSelectionAfterAction(editor, "row", index + 1, tablePos);
+
+      return true;
+    }
+
+    return false;
+  } catch (error) {
+    console.error("Error duplicating row:", error);
+    return false;
+  }
+}
+
+/**
+ * Duplicates a column by using addColumnAfter and then replacing the content.
+ */
+function duplicateColumn({ editor, index, tablePos }: { editor: Editor; index: number; tablePos?: number }): boolean {
+  try {
+    const originalColumnCells = getRowOrColumnCells(editor, index, "column", tablePos);
+    if (originalColumnCells.cells.length === 0) return false;
+
+    let addSuccess = false;
+    if (editor.state.selection instanceof CellSelection) {
+      addSuccess = editor.chain().focus().addColumnAfter().run();
+    } else {
+      if (!tablePos) return false;
+      const sourceCoords = getIndexCoordinates({
+        editor,
+        index,
+        orientation: "column",
+        tablePos,
+      });
+      if (!sourceCoords) return false;
+
+      const state = selectCellsByCoords(editor, tablePos, sourceCoords, {
+        mode: "state",
+      });
+      addSuccess = addColumnAfter(state, editor.view.dispatch);
+    }
+
+    if (!addSuccess) return false;
+
+    const newColumnCells = getRowOrColumnCells(editor, index + 1, "column", tablePos);
+
+    if (newColumnCells.cells.length === 0) {
+      return false;
+    }
+
+    const { state, view } = editor;
+    const tr = state.tr;
+
+    // Replace each cell in the new column with duplicated content
+    // Process in reverse order to maintain correct positions
+    const cellsToReplace = [...newColumnCells.cells].reverse();
+    const originalCells = [...originalColumnCells.cells].reverse();
+
+    cellsToReplace.forEach((newCell, reverseIndex) => {
+      const originalCell = originalCells[reverseIndex];
+      if (newCell.node && originalCell?.node) {
+        const duplicatedCell = newCell.node.type.create(
+          { ...originalCell.node.attrs },
+          originalCell.node.content,
+          originalCell.node.marks,
+        );
+
+        const cellEnd = newCell.pos + newCell.node.nodeSize;
+        tr.replaceWith(newCell.pos, cellEnd, duplicatedCell);
+      }
+    });
+
+    if (tr.docChanged) {
+      view.dispatch(tr);
+
+      updateSelectionAfterAction(editor, "column", index + 1, tablePos);
+
+      return true;
+    }
+
+    return false;
+  } catch (error) {
+    console.error("Error duplicating column:", error);
+    return false;
+  }
+}
+
+/**
+ * Executes the row/column duplication in the editor.
+ */
+function tableDuplicateRowColumn({
+  editor,
+  index,
+  orientation,
+  tablePos,
+}: {
+  editor: Editor | null;
+  index?: number;
+  orientation?: Orientation;
+  tablePos?: number;
+}): boolean {
+  if (!canDuplicateRowColumn({ editor, index, orientation, tablePos }) || !editor) {
+    return false;
+  }
+
+  const table = getTable(editor, tablePos);
+  if (!table) return false;
+
+  const selectionType = getTableSelectionType(editor, index, orientation, tablePos);
+  if (!selectionType) return false;
+
+  try {
+    if (selectionType.orientation === "row") {
+      return duplicateRow({
+        editor,
+        index: selectionType.index,
+        tablePos,
+      });
+    } else if (selectionType.orientation === "column") {
+      return duplicateColumn({
+        editor,
+        index: selectionType.index,
+        tablePos,
+      });
+    }
+
+    return false;
+  } catch (error) {
+    console.error("Error duplicating row/column:", error);
+    return false;
+  }
+}
+
+/**
+ * Determines if the duplicate button should be shown
+ * based on editor state and config.
+ */
+function shouldShowButton({
+  editor,
+  index,
+  orientation,
+  hideWhenUnavailable,
+}: {
+  editor: Editor | null;
+  index?: number;
+  orientation?: Orientation;
+  hideWhenUnavailable: boolean;
+}): boolean {
+  if (!editor || !editor.isEditable) return false;
+  if (!isExtensionAvailable(editor, REQUIRED_EXTENSIONS)) return false;
+  return hideWhenUnavailable ? canDuplicateRowColumn({ editor, index, orientation }) : true;
+}
+
+/**
+ * Custom hook that provides **table row/column duplication**
+ * functionality for the Tiptap editor.
+ */
+export function useTableDuplicateRowColumn(config: UseTableDuplicateRowColumnConfig) {
+  const { editor: providedEditor, index, orientation, tablePos, hideWhenUnavailable = false, onDuplicated } = config;
+
+  const { editor } = useTiptapEditor(providedEditor);
+  const { t } = useTranslation();
+  const selectionType = getTableSelectionType(editor, index, orientation);
+
+  const isVisible = shouldShowButton({
+    editor,
+    index,
+    orientation,
+    hideWhenUnavailable,
+  });
+
+  const canPerformDuplicate = canDuplicateRowColumn({
+    editor,
+    index,
+    tablePos,
+    orientation,
+  });
+
+  const handleDuplicate = useCallback(() => {
+    const success = tableDuplicateRowColumn({
+      editor,
+      index,
+      orientation,
+      tablePos,
+    });
+    if (success) onDuplicated?.();
+    return success;
+  }, [editor, index, orientation, tablePos, onDuplicated]);
+
+  const label = useMemo(() => {
+    return tableDuplicateRowColumnLabels[selectionType?.orientation || "row"];
+  }, [selectionType]);
+
+  const Icon = CopyIcon;
+
+  return {
+    isVisible,
+    canDuplicateRowColumn: canPerformDuplicate,
+    handleDuplicate,
+    label: t(label),
+    Icon,
+  };
+}

package/src/components/tiptap-node/table-node/ui/table-extend-row-column-button/index.tsx

@@ -0,0 +1,2 @@
+export * from "./table-extend-row-column-button"
+export * from "./use-table-extend-row-column"

package/src/components/tiptap-node/table-node/ui/table-extend-row-column-button/table-extend-row-column-button.css

@@ -0,0 +1,17 @@
+@import "tailwindcss";
+
+.tiptap-table-extend-row-column-button {
+  @apply border-0 flex items-center justify-center bg-gray-100 dark:bg-gray-800 rounded-lg;
+}
+
+.tiptap-table-extend-row-column-button .tiptap-button-icon {
+  @apply w-4 h-4 flex-shrink-0 text-gray-400 dark:text-gray-600;
+}
+
+.tiptap-table-extend-row-column-button.tiptap-table-row-end-add-remove {
+  @apply w-full h-3 cursor-row-resize;
+}
+
+.tiptap-table-extend-row-column-button.tiptap-table-column-end-add-remove {
+  @apply w-3 cursor-col-resize;
+}