@meta-1/editor 0.0.29 → 1.0.0

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

@@ -0,0 +1,99 @@
+"use client"
+
+import { forwardRef, useCallback } from "react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../../../hooks/use-tiptap-editor"
+
+// --- Tiptap UI ---
+import type { UseTableHeaderRowColumnConfig } from "./"
+import { useTableHeaderRowColumn } from "./"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "../../../../tiptap-ui-primitive/button"
+import { Button } from "../../../../tiptap-ui-primitive/button"
+
+export interface TableHeaderRowColumnButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseTableHeaderRowColumnConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+}
+
+/**
+ * Button component for toggling table header row/column in a Tiptap editor.
+ * Only works for the first row (index 0) or first column (index 0).
+ *
+ * For custom button implementations, use the `useTableHeaderRowColumn` hook instead.
+ */
+export const TableHeaderRowColumnButton = forwardRef<
+  HTMLButtonElement,
+  TableHeaderRowColumnButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      index,
+      orientation,
+      hideWhenUnavailable = false,
+      onToggled,
+      text,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const { isVisible, handleToggle, label, canToggleHeader, Icon, isActive } =
+      useTableHeaderRowColumn({
+        editor,
+        index,
+        orientation,
+        hideWhenUnavailable,
+        onToggled,
+      })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleToggle()
+      },
+      [handleToggle, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        disabled={!canToggleHeader}
+        data-style="ghost"
+        data-active-state={isActive ? "on" : "off"}
+        data-disabled={!canToggleHeader}
+        role="button"
+        tabIndex={-1}
+        aria-label={label}
+        aria-pressed={isActive}
+        tooltip={label}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+TableHeaderRowColumnButton.displayName = "TableHeaderRowColumnButton"

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

@@ -0,0 +1,227 @@
+"use client";
+
+import { useCallback } from "react";
+import type { Transaction } from "@tiptap/pm/state";
+import { CellSelection, toggleHeader } 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, isValidPosition } from "../../../../../lib/tiptap-utils";
+import { TableHeaderColumnIcon } from "../../../../tiptap-icons/table-header-column-icon";
+// --- Icons ---
+import { TableHeaderRowIcon } from "../../../../tiptap-icons/table-header-row-icon";
+import type { Orientation } from "../../lib/tiptap-table-utils";
+import {
+  getIndexCoordinates,
+  getRowOrColumnCells,
+  getTableSelectionType,
+  selectCellsByCoords,
+} from "../../lib/tiptap-table-utils";
+
+export interface UseTableHeaderRowColumnConfig {
+  /**
+   * 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. Header functionality only applies to index 0.
+   * If omitted, will use the current selection.
+   */
+  index?: number;
+  /**
+   * Whether you're toggling header for a row or a column.
+   * If omitted, will use the current selection.
+   */
+  orientation?: Orientation;
+  /**
+   * The position of the table in the document.
+   * Used when there's no cell selection so we can target a specific table.
+   */
+  tablePos?: number;
+  /**
+   * Hide the button when header toggle isn't currently possible.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean;
+  /**
+   * Callback function called after a successful header toggle.
+   */
+  onToggled?: () => void;
+}
+
+const REQUIRED_EXTENSIONS = ["table"];
+
+export const tableHeaderRowColumnLabels: Record<Orientation, string> = {
+  row: "Header row",
+  column: "Header column",
+};
+
+export const tableHeaderRowColumnIcons = {
+  row: TableHeaderRowIcon,
+  column: TableHeaderColumnIcon,
+};
+
+/**
+ * Checks if a table header row/column toggle can be performed
+ * in the current editor state (or at tablePos when no selection).
+ */
+function canToggleHeader({
+  editor,
+  index,
+  orientation,
+  tablePos,
+}: {
+  editor: Editor | null;
+  index?: number;
+  orientation?: Orientation;
+  tablePos?: number;
+}): boolean {
+  if (!editor || !editor.isEditable || !isExtensionAvailable(editor, REQUIRED_EXTENSIONS)) {
+    return false;
+  }
+
+  const selectionType = getTableSelectionType(editor, index, orientation, tablePos);
+  if (!selectionType) return false;
+
+  return selectionType.index === 0;
+}
+
+/**
+ * Executes the header row/column toggle. If there is no cell selection,
+ * it will derive the target from (index, orientation) and the table at tablePos.
+ */
+function toggleTableHeader({
+  editor,
+  index,
+  orientation,
+  tablePos,
+}: {
+  editor: Editor | null;
+  index?: number;
+  orientation?: Orientation;
+  tablePos?: number;
+}): boolean {
+  if (!editor) return false;
+  if (!canToggleHeader({ editor, index, orientation, tablePos })) return false;
+
+  try {
+    const selectionType = getTableSelectionType(editor, index, orientation, tablePos);
+    if (!selectionType) return false;
+
+    const isRow = selectionType.orientation === "row";
+
+    if (editor.state.selection instanceof CellSelection) {
+      return isRow ? editor.commands.toggleHeaderRow() : editor.commands.toggleHeaderColumn();
+    }
+
+    if (!isValidPosition(tablePos)) return false;
+
+    const cellCoords = getIndexCoordinates({
+      editor,
+      index: selectionType.index,
+      orientation: selectionType.orientation,
+      tablePos,
+    });
+    if (!cellCoords) return false;
+
+    const stateWithCellSel = selectCellsByCoords(editor, tablePos, cellCoords, {
+      mode: "state",
+    });
+    if (!stateWithCellSel) return false;
+
+    const dispatch = (tr: Transaction) => editor.view.dispatch(tr);
+    return isRow ? toggleHeader("row")(stateWithCellSel, dispatch) : toggleHeader("column")(stateWithCellSel, dispatch);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Determines if the header toggle 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;
+
+  if (hideWhenUnavailable) {
+    return canToggleHeader({ editor, index, orientation, tablePos });
+  }
+
+  const selectionType = getTableSelectionType(editor, index, orientation);
+  return Boolean(selectionType);
+}
+
+/**
+ * Custom hook that provides **table header row/column toggle**
+ * functionality for the Tiptap editor. Supports `tablePos` when
+ * no cell is selected.
+ */
+export function useTableHeaderRowColumn(config: UseTableHeaderRowColumnConfig) {
+  const { editor: providedEditor, index, orientation, tablePos, hideWhenUnavailable = false, onToggled } = config;
+
+  const { editor } = useTiptapEditor(providedEditor);
+  const { t } = useTranslation();
+  const selectionType = getTableSelectionType(editor, index, orientation);
+
+  const isVisible = shouldShowButton({
+    editor,
+    index,
+    orientation,
+    hideWhenUnavailable,
+    tablePos,
+  });
+
+  const canPerformToggle = canToggleHeader({
+    editor,
+    index,
+    orientation,
+    tablePos,
+  });
+
+  let isActive = false;
+  if (editor?.state.selection instanceof CellSelection) {
+    isActive = editor?.isActive("tableHeader") || false;
+  } else {
+    const rowsOrCols = getRowOrColumnCells(editor, index, selectionType?.orientation, tablePos);
+
+    if (rowsOrCols) {
+      const secondIndex = rowsOrCols.cells.length > 1 ? 1 : 0;
+      isActive = rowsOrCols.cells[secondIndex]?.node?.type.name === "tableHeader" || false;
+    }
+  }
+
+  const handleToggle = useCallback(() => {
+    const success = toggleTableHeader({ editor, index, orientation, tablePos });
+    if (success) onToggled?.();
+    return success;
+  }, [editor, index, orientation, tablePos, onToggled]);
+
+  const label = t(tableHeaderRowColumnLabels[selectionType?.orientation || "row"]);
+  const Icon = tableHeaderRowColumnIcons[selectionType?.orientation || "row"];
+
+  return {
+    isVisible,
+    canToggleHeader: canPerformToggle,
+    handleToggle,
+    label,
+    Icon,
+    isActive,
+  };
+}

package/src/components/tiptap-node/table-node/ui/table-merge-split-cell-button/index.tsx

@@ -0,0 +1,2 @@
+export * from "./table-merge-split-cell-button"
+export * from "./use-table-merge-split-cell"

package/src/components/tiptap-node/table-node/ui/table-merge-split-cell-button/table-merge-split-cell-button.tsx

@@ -0,0 +1,125 @@
+"use client"
+
+import { forwardRef, useCallback } from "react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../../../hooks/use-tiptap-editor"
+
+// --- Tiptap UI ---
+import type { UseTableMergeSplitCellConfig } from "./"
+import { useTableMergeSplitCell } from "./"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "../../../../tiptap-ui-primitive/button"
+import { Button } from "../../../../tiptap-ui-primitive/button"
+
+export interface TableMergeSplitCellButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseTableMergeSplitCellConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+}
+
+/**
+ * Button component for merging or splitting table cells in a Tiptap editor.
+ *
+ * **Merge Cells**: When multiple cells are selected (using CellSelection),
+ * this button will merge them into a single cell.
+ *
+ * **Split Cell**: When a merged cell is selected, this button will split
+ * it back into individual cells.
+ *
+ * For custom button implementations, use the `useTableMergeSplitCell` hook instead.
+ *
+ * @example
+ * ```tsx
+ * // Merge cells button
+ * <TableMergeSplitCellButton
+ *   action="merge"
+ *   hideWhenUnavailable={true}
+ * />
+ *
+ * // Split cell button
+ * <TableMergeSplitCellButton
+ *   action="split"
+ *   text="Split Cell"
+ *   onExecuted={(action) => console.log(`${action} completed!`)}
+ * />
+ *
+ * // Custom styling
+ * <TableMergeSplitCellButton
+ *   action="merge"
+ *   className="my-custom-merge-button"
+ *   style={{ backgroundColor: 'blue' }}
+ * />
+ * ```
+ */
+export const TableMergeSplitCellButton = forwardRef<
+  HTMLButtonElement,
+  TableMergeSplitCellButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      action,
+      hideWhenUnavailable = false,
+      onExecuted,
+      text,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const { isVisible, handleExecute, label, canExecute, Icon } =
+      useTableMergeSplitCell({
+        editor,
+        action,
+        hideWhenUnavailable,
+        onExecuted,
+      })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleExecute()
+      },
+      [handleExecute, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        disabled={!canExecute}
+        data-style="ghost"
+        data-active-state="off"
+        data-disabled={!canExecute}
+        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>
+    )
+  }
+)
+
+TableMergeSplitCellButton.displayName = "TableMergeSplitCellButton"