@meta-1/editor 0.0.29 → 1.0.0

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

@@ -0,0 +1,444 @@
+"use client";
+
+import { useCallback, useMemo } from "react";
+import type { Node } from "@tiptap/pm/model";
+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 { ArrowDownAZIcon } from "../../../../tiptap-icons/arrow-down-a-z-icon";
+import { ArrowDownZAIcon } from "../../../../tiptap-icons/arrow-down-z-a-icon";
+import type { Orientation } from "../../lib/tiptap-table-utils";
+import {
+  type CellInfo,
+  getRowOrColumnCells,
+  getTable,
+  getTableSelectionType,
+  isCellEmpty,
+} from "../../lib/tiptap-table-utils";
+
+export type SortDirection = "asc" | "desc";
+
+export interface UseTableSortRowColumnConfig {
+  /**
+   * 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 sort.
+   * If omitted, will use the current selection.
+   */
+  index?: number;
+  /**
+   * Whether you're sorting a row or a column.
+   * If omitted, will use the current selection.
+   */
+  orientation?: Orientation;
+  /**
+   * The position of the table in the document.
+   */
+  tablePos?: number;
+  /**
+   * The sort direction (ascending or descending).
+   */
+  direction: SortDirection;
+  /**
+   * Hide the button when sorting isn't currently possible.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean;
+  /**
+   * Callback function called after a successful sort.
+   */
+  onSorted?: () => void;
+}
+
+const REQUIRED_EXTENSIONS = ["tableHandleExtension"];
+
+export const tableSortRowColumnLabels: Record<Orientation, Record<SortDirection, string>> = {
+  row: {
+    asc: "Sort row A-Z",
+    desc: "Sort row Z-A",
+  },
+  column: {
+    asc: "Sort column A-Z",
+    desc: "Sort column Z-A",
+  },
+};
+
+export const tableSortRowColumnIcons = {
+  asc: ArrowDownAZIcon,
+  desc: ArrowDownZAIcon,
+};
+
+/**
+ * Check if a specific cell is a header cell
+ */
+function isCellHeader(cellNode: Node | null): boolean {
+  if (!cellNode) return false;
+
+  return (
+    cellNode.type.name === "tableHeader" || cellNode.type.name === "table_header" || cellNode.attrs?.header === true
+  );
+}
+
+/**
+ * Extract text content from a cell node for sorting comparison
+ */
+function getCellSortText(cellNode: Node | null): string {
+  if (!cellNode) return "";
+
+  let text = "";
+  cellNode.descendants((node) => {
+    if (node.isText) {
+      text += node.text || "";
+    }
+    return true;
+  });
+
+  return text.trim().toLowerCase();
+}
+
+/**
+ * Create a sortable item with all necessary data for restoration
+ */
+interface SortableCell {
+  sortText: string;
+  originalNode: Node | null;
+  cellInfo: CellInfo;
+  originalIndex: number;
+  isHeader: boolean;
+  isEmpty: boolean;
+}
+
+/**
+ * Checks if a table row/column sort can be performed
+ * in the current editor state.
+ */
+function canSortRowColumn({
+  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.orientation === "row") {
+      // Need at least 2 items to sort
+      if (table.map.width < 2) return false;
+    } else {
+      if (table.map.height < 2) return false;
+    }
+
+    if (cellData.mergedCells.length > 0) {
+      return false;
+    }
+
+    // Check if there's actual content to sort (excluding headers)
+    const hasContent = cellData.cells.some(
+      (cellInfo) => cellInfo.node && !isCellHeader(cellInfo.node) && !isCellEmpty(cellInfo.node),
+    );
+
+    if (!hasContent) {
+      return false;
+    }
+
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Executes the row/column sort in the editor while preserving marks and attributes.
+ * Header cells are excluded from sorting and remain in their original positions.
+ * Empty cells are always sorted to the end.
+ */
+function tableSortRowColumn({
+  editor,
+  index,
+  orientation,
+  direction,
+  tablePos,
+}: {
+  editor: Editor | null;
+  index?: number;
+  orientation?: Orientation;
+  direction: SortDirection;
+  tablePos?: number;
+}): boolean {
+  if (!canSortRowColumn({ editor, index, orientation, tablePos }) || !editor) return false;
+
+  try {
+    const { state, view } = editor;
+    const tr = state.tr;
+
+    const cellData = getRowOrColumnCells(editor, index, orientation, tablePos);
+
+    if (cellData.mergedCells.length > 0) {
+      console.warn(`Cannot sort ${orientation} ${index}: contains merged cells`);
+      return false;
+    }
+
+    if (cellData.cells.length < 2) {
+      return false;
+    }
+
+    // Create sortable items, marking headers, data cells, and empty cells
+    const allItems: SortableCell[] = cellData.cells.map((cellInfo, originalIndex) => {
+      const isHeader = isCellHeader(cellInfo.node);
+      const isEmpty = cellInfo.node ? isCellEmpty(cellInfo.node) : true;
+      return {
+        sortText: getCellSortText(cellInfo.node),
+        originalNode: cellInfo.node,
+        cellInfo,
+        originalIndex,
+        isHeader,
+        isEmpty,
+      };
+    });
+
+    const dataItems = allItems.filter((item) => !item.isHeader);
+
+    if (dataItems.length < 2) {
+      console.log("No sortable data cells found (excluding headers)");
+      return false;
+    }
+
+    // Sort data items with special handling for empty cells
+    dataItems.sort((a, b) => {
+      if (a.isEmpty && !b.isEmpty) return 1;
+      if (!a.isEmpty && b.isEmpty) return -1;
+      if (a.isEmpty && b.isEmpty) return 0;
+
+      // For non-empty cells, sort normally
+      const comparison = a.sortText.localeCompare(b.sortText, undefined, {
+        sensitivity: "base",
+      });
+      return direction === "asc" ? comparison : -comparison;
+    });
+
+    const newCellNodes: Node[] = [];
+    let dataIndex = 0;
+
+    for (let i = 0; i < allItems.length; i++) {
+      const originalItem = allItems[i];
+      const targetCell = cellData.cells[i];
+
+      if (!targetCell || !originalItem) continue;
+
+      let nodeToPlace: Node | null = null;
+
+      if (originalItem.isHeader) {
+        // Keep header in its original position
+        nodeToPlace = originalItem.originalNode;
+      } else {
+        // Use the next sorted data cell
+        const sortedDataItem = dataItems[dataIndex];
+        nodeToPlace = sortedDataItem?.originalNode || null;
+        dataIndex++;
+      }
+
+      if (nodeToPlace && targetCell.node) {
+        const cellType = targetCell.node.type;
+        const newCellNode = cellType.create(nodeToPlace.attrs, nodeToPlace.content, nodeToPlace.marks);
+        newCellNodes.push(newCellNode);
+      } else {
+        newCellNodes.push(targetCell.node!);
+      }
+    }
+
+    // Replace each cell with the new cell (headers preserved, data sorted)
+    // We need to go in reverse order to maintain correct positions
+    const cellsToReplace = [...cellData.cells].reverse();
+    const newNodesToPlace = [...newCellNodes].reverse();
+
+    cellsToReplace.forEach((targetCell, reverseIndex) => {
+      const newNode = newNodesToPlace[reverseIndex];
+      if (newNode && targetCell.node) {
+        // Replace the entire cell node
+        const cellEnd = targetCell.pos + targetCell.node.nodeSize;
+        tr.replaceWith(targetCell.pos, cellEnd, newNode);
+      }
+    });
+
+    if (tr.docChanged) {
+      view.dispatch(tr);
+      return true;
+    }
+
+    return false;
+  } catch (error) {
+    console.error(`Error sorting table ${orientation}:`, error);
+    return false;
+  }
+}
+
+/**
+ * Determines if the sort 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 | undefined;
+}): boolean {
+  if (!editor || !editor.isEditable) return false;
+  if (!isExtensionAvailable(editor, REQUIRED_EXTENSIONS)) return false;
+
+  const table = getTable(editor, tablePos);
+  if (!table) return false;
+
+  const selectionType = getTableSelectionType(editor, index, orientation, tablePos);
+  if (!selectionType) return false;
+
+  return hideWhenUnavailable ? canSortRowColumn({ editor, index, orientation, tablePos }) : true;
+}
+
+/**
+ * Custom hook that provides **table row/column sorting**
+ * functionality for the Tiptap editor.
+ *
+ * **Header Handling:** Header cells are automatically detected and excluded
+ * from sorting. During a sort operation, header cells remain in their original
+ * positions while only data cells are rearranged. Headers are identified by
+ * node type (`tableHeader`) or attributes (`header: true`).
+ *
+ * **Empty Cell Handling:** Empty cells are always sorted to the end,
+ * regardless of sort direction (A-Z or Z-A).
+ *
+ * @example
+ * ```tsx
+ * // Sort currently selected row/column (smart mode)
+ * function SortButton() {
+ *   const { isVisible, handleSort } = useTableSortRowColumn({ direction: "asc" })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleSort}>Sort A-Z</button>
+ * }
+ *
+ * // Sort specific row, headers will be preserved
+ * function SortRowButton({ rowIndex }: { rowIndex: number }) {
+ *   const { isVisible, handleSort, label, canSortRowColumn } = useTableSortRowColumn({
+ *     index: rowIndex,
+ *     orientation: "row",
+ *     direction: "asc",
+ *     hideWhenUnavailable: true,
+ *     onSorted: () => console.log("Row sorted! Headers stayed in place."),
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <button
+ *       onClick={handleSort}
+ *       disabled={!canSortRowColumn}
+ *       aria-label={label}
+ *     >
+ *       {label}
+ *     </button>
+ *   )
+ * }
+ *
+ * // Sort with callback to handle the result
+ * function SmartSortButton() {
+ *   const { isVisible, handleSort, label } = useTableSortRowColumn({
+ *     direction: "desc",
+ *     hideWhenUnavailable: true,
+ *     onSorted: () => {
+ *       console.log("Sort completed! Headers were automatically preserved.")
+ *     }
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleSort}>{label}</button>
+ * }
+ * ```
+ */
+export function useTableSortRowColumn(config: UseTableSortRowColumnConfig = { direction: "asc" }) {
+  const {
+    editor: providedEditor,
+    index,
+    orientation,
+    tablePos,
+    direction,
+    hideWhenUnavailable = false,
+    onSorted,
+  } = config;
+
+  const { editor } = useTiptapEditor(providedEditor);
+  const { t } = useTranslation();
+  const selectionType = getTableSelectionType(editor, index, orientation);
+
+  const isVisible = shouldShowButton({
+    editor,
+    index,
+    orientation,
+    hideWhenUnavailable,
+    tablePos,
+  });
+
+  const canPerformSort = canSortRowColumn({
+    editor,
+    index,
+    orientation,
+    tablePos,
+  });
+
+  const handleSort = useCallback(() => {
+    const success = tableSortRowColumn({
+      editor,
+      index,
+      orientation,
+      direction,
+      tablePos,
+    });
+    if (success) onSorted?.();
+    return success;
+  }, [editor, index, orientation, direction, tablePos, onSorted]);
+
+  const label = useMemo(() => {
+    const orientationLabels = tableSortRowColumnLabels[selectionType?.orientation || "row"];
+    return orientationLabels[direction] || `Sort ${selectionType?.orientation} ${direction}`;
+  }, [selectionType, direction]);
+
+  const Icon = useMemo(() => {
+    return tableSortRowColumnIcons[direction] || ArrowDownAZIcon;
+  }, [direction]);
+
+  return {
+    isVisible,
+    canSortRowColumn: canPerformSort,
+    handleSort,
+    label: t(label),
+    Icon,
+  };
+}

package/src/components/tiptap-node/table-node/ui/table-trigger-button/index.tsx

@@ -0,0 +1,3 @@
+export * from "./table-grid-selector"
+export * from "./table-trigger-button"
+export * from "./use-table-trigger"

package/src/components/tiptap-node/table-node/ui/table-trigger-button/table-grid-selector.css

@@ -0,0 +1,39 @@
+@import "tailwindcss";
+
+/* Grid container */
+.tiptap-table-grid {
+  @apply grid gap-1 p-1;
+  grid-template-columns: repeat(var(--table-columns), 1rem);
+}
+
+/* Grid cell */
+.tiptap-button[data-size="small"].tiptap-table-grid-cell {
+  @apply w-4 h-4 min-w-4 p-0 border border-gray-200 dark:border-gray-700 rounded-sm bg-gray-50 dark:bg-gray-800 cursor-pointer transition-all duration-150;
+}
+
+.tiptap-button[data-size="small"].tiptap-table-grid-cell.selected {
+  @apply bg-indigo-50 dark:bg-indigo-900 border-indigo-500;
+}
+
+/* Size indicator */
+.tiptap-table-size-indicator {
+  @apply flex items-center justify-center gap-1 w-full mt-1;
+}
+
+.tiptap-table-size-indicator-item {
+  @apply flex flex-1 items-center justify-center gap-3 min-h-8 p-2 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-black;
+}
+
+.tiptap-table-size-indicator-item .tiptap-table-column-icon,
+.tiptap-table-size-indicator-item .tiptap-table-row-icon {
+  @apply w-4 h-4 text-gray-400 dark:text-gray-600;
+}
+
+.tiptap-table-size-indicator-text {
+  @apply text-sm font-normal text-center;
+  width: 1.781rem;
+}
+
+.tiptap-table-size-indicator-delimiter {
+  @apply flex-shrink-0 text-xs font-medium text-gray-500 dark:text-gray-600;
+}

package/src/components/tiptap-node/table-node/ui/table-trigger-button/table-grid-selector.tsx

@@ -0,0 +1,219 @@
+"use client"
+
+import { forwardRef, useMemo, useCallback } from "react"
+
+// --- UI Primitives ---
+import { Button } from "../../../../tiptap-ui-primitive/button"
+
+// --- Lib ---
+import { cn } from "../../../../../lib/tiptap-utils"
+
+// --- Icons ---
+import { TableColumnIcon } from "../../../../tiptap-icons/table-column-icon"
+import { TableRowIcon } from "../../../../tiptap-icons/table-row-icon"
+
+import "./table-grid-selector.css"
+
+// --- Types ---
+export interface CellCoordinates {
+  row: number
+  col: number
+}
+
+export interface TableGridSelectorProps {
+  /**
+   * Initial number of rows to display in the grid
+   * @default 8
+   */
+  maxRows?: number
+  /**
+   * Initial number of columns to display in the grid
+   * @default 8
+   */
+  maxCols?: number
+  /**
+   * Currently hovered cell coordinates
+   */
+  hoveredCell: CellCoordinates | null
+  /**
+   * Callback when a cell is hovered
+   */
+  onCellHover: (row: number, col: number) => void
+  /**
+   * Callback when a cell is clicked
+   */
+  onCellClick: (row: number, col: number) => void
+  /**
+   * Callback when mouse leaves the grid
+   */
+  onMouseLeave?: () => void
+  /**
+   * Whether the grid cells should be disabled
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * Additional class name for the container
+   */
+  className?: string
+  /**
+   * Whether to show the size indicator
+   * @default true
+   */
+  showSizeIndicator?: boolean
+}
+
+interface GridCellProps {
+  row: number
+  col: number
+  isSelected: boolean
+  disabled: boolean
+  onMouseEnter: () => void
+  onClick: () => void
+}
+
+const isCellSelected = (
+  cell: CellCoordinates,
+  hoveredCell: CellCoordinates | null
+): boolean => {
+  if (!hoveredCell) return false
+  return cell.row <= hoveredCell.row && cell.col <= hoveredCell.col
+}
+
+const generateGridCells = (rows: number, cols: number): CellCoordinates[] => {
+  const totalCells = rows * cols
+  return Array.from({ length: totalCells }, (_, index) => ({
+    row: Math.floor(index / cols),
+    col: index % cols,
+  }))
+}
+
+const GridCell = ({
+  row,
+  col,
+  isSelected,
+  disabled,
+  onMouseEnter,
+  onClick,
+}: GridCellProps) => (
+  <Button
+    data-size="small"
+    type="button"
+    className={cn("tiptap-table-grid-cell", isSelected && "selected")}
+    disabled={disabled}
+    onMouseEnter={onMouseEnter}
+    onClick={onClick}
+    aria-label={`Select ${row + 1}x${col + 1} table`}
+  />
+)
+
+const SizeIndicator = ({
+  hoveredCell,
+}: {
+  hoveredCell: CellCoordinates | null
+}) => {
+  const columns = hoveredCell ? hoveredCell.col + 1 : 1
+  const rows = hoveredCell ? hoveredCell.row + 1 : 1
+
+  return (
+    <div className="tiptap-table-size-indicator">
+      <div className="tiptap-table-size-indicator-item">
+        <TableColumnIcon className="tiptap-table-column-icon" />
+        <span className="tiptap-table-size-indicator-text">{columns}</span>
+      </div>
+      <span className="tiptap-table-size-indicator-delimiter">x</span>
+      <div className="tiptap-table-size-indicator-item">
+        <TableRowIcon className="tiptap-table-row-icon" />
+        <span className="tiptap-table-size-indicator-text">{rows}</span>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Reusable table grid selector component for selecting table dimensions.
+ *
+ * @example
+ * ```tsx
+ * const [hoveredCell, setHoveredCell] = useState<CellCoordinates | null>(null)
+ *
+ * <TableGridSelector
+ *   maxRows={8}
+ *   maxCols={8}
+ *   hoveredCell={hoveredCell}
+ *   onCellHover={(row, col) => setHoveredCell({ row, col })}
+ *   onCellClick={(row, col) => insertTable(row + 1, col + 1)}
+ *   onMouseLeave={() => setHoveredCell(null)}
+ * />
+ * ```
+ */
+export const TableGridSelector = forwardRef<
+  HTMLDivElement,
+  TableGridSelectorProps
+>(
+  (
+    {
+      maxRows = 8,
+      maxCols = 8,
+      hoveredCell,
+      onCellHover,
+      onCellClick,
+      onMouseLeave,
+      disabled = false,
+      className,
+      showSizeIndicator = true,
+    },
+    ref
+  ) => {
+    const gridCells = useMemo(
+      () => generateGridCells(maxRows, maxCols),
+      [maxRows, maxCols]
+    )
+
+    const gridStyle = useMemo(
+      () =>
+        ({
+          "--tt-table-columns": maxCols,
+          "--tt-table-rows": maxRows,
+        }) as React.CSSProperties,
+      [maxCols, maxRows]
+    )
+
+    const handleCellHover = useCallback(
+      (row: number, col: number) => () => onCellHover(row, col),
+      [onCellHover]
+    )
+
+    const handleCellClick = useCallback(
+      (row: number, col: number) => () => onCellClick(row, col),
+      [onCellClick]
+    )
+
+    return (
+      <>
+        <div
+          ref={ref}
+          className={cn("tiptap-table-grid", className)}
+          onMouseLeave={onMouseLeave}
+          style={gridStyle}
+        >
+          {gridCells.map((cell, index) => (
+            <GridCell
+              key={index}
+              row={cell.row}
+              col={cell.col}
+              isSelected={isCellSelected(cell, hoveredCell)}
+              disabled={disabled}
+              onMouseEnter={handleCellHover(cell.row, cell.col)}
+              onClick={handleCellClick(cell.row, cell.col)}
+            />
+          ))}
+        </div>
+
+        {showSizeIndicator && <SizeIndicator hoveredCell={hoveredCell} />}
+      </>
+    )
+  }
+)
+
+TableGridSelector.displayName = "TableGridSelector"