@meta-1/editor 0.0.29 → 1.0.0

package/src/components/tiptap-node/table-node/ui/table-handle/table-handle.tsx

@@ -0,0 +1,163 @@
+"use client"
+
+import { useCallback, useMemo, useState } from "react"
+import type { Editor } from "@tiptap/react"
+import type { ComponentType } from "react"
+import { FloatingPortal } from "@floating-ui/react"
+import type { Node } from "@tiptap/pm/model"
+
+import {
+  colDragStart,
+  rowDragStart,
+} from "../../extensions/table-handle"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../../../hooks/use-tiptap-editor"
+import { useTableHandlePositioning } from "./use-table-handle-positioning"
+import { useTableHandleState } from "../../hooks/use-table-handle-state"
+import { type Orientation } from "../../lib/tiptap-table-utils"
+
+// --- Components ---
+import { TableHandleMenu } from "../table-handle-menu"
+
+export interface TableHandleButtonProps {
+  editor: Editor
+  orientation: Orientation
+  index?: number
+  tablePos?: number
+  tableNode?: Node
+  onToggleOtherHandle?: (visible: boolean) => void
+  onOpenChange?: (open: boolean) => void
+}
+
+export interface TableHandleRenderProps {
+  editor: Editor
+  state: ReturnType<typeof useTableHandleState>
+  rowHandle: ReturnType<typeof useTableHandlePositioning>["rowHandle"]
+  colHandle: ReturnType<typeof useTableHandlePositioning>["colHandle"]
+  toggleRowVisibility: (visible: boolean) => void
+  toggleColumnVisibility: (visible: boolean) => void
+}
+
+export interface TableHandleProps {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+
+  /**
+   * Custom component to render for row handles.
+   * If not provided, uses the default TableHandleMenu.
+   */
+  rowButton?: ComponentType<TableHandleButtonProps>
+
+  /**
+   * Custom component to render for column handles.
+   * If not provided, uses the default TableHandleMenu.
+   */
+  columnButton?: ComponentType<TableHandleButtonProps>
+}
+
+/**
+ * Main table handle component that manages the positioning and rendering
+ * of table row/column handles, extend buttons, and context menus.
+ *
+ * This component can be extended with custom row and column buttons,
+ * or completely customized using the render prop pattern.
+ */
+export function TableHandle({
+  editor: providedEditor,
+  rowButton: CustomRowButton,
+  columnButton: CustomColumnButton,
+}: TableHandleProps) {
+  const { editor } = useTiptapEditor(providedEditor)
+  const state = useTableHandleState({ editor })
+
+  const [isRowVisible, setIsRowVisible] = useState(true)
+  const [isColumnVisible, setIsColumnVisible] = useState(true)
+  const [menuOpen, setMenuOpen] = useState<null | "row" | "column">(null)
+
+  const draggingState = useMemo(() => {
+    if (!state?.draggingState) return undefined
+
+    return {
+      draggedCellOrientation: state.draggingState.draggedCellOrientation,
+      mousePos: state.draggingState.mousePos,
+      initialOffset: state.draggingState.initialOffset,
+    }
+  }, [state?.draggingState])
+
+  const { rowHandle, colHandle } = useTableHandlePositioning(
+    state?.show || false,
+    state?.referencePosCell || null,
+    state?.referencePosTable || null,
+    draggingState
+  )
+
+  const toggleRowVisibility = useCallback((visible: boolean) => {
+    setIsRowVisible(visible)
+  }, [])
+
+  const toggleColumnVisibility = useCallback((visible: boolean) => {
+    setIsColumnVisible(visible)
+  }, [])
+
+  const handleMenuOpenChange = useCallback(
+    (type: "row" | "column", open: boolean) => {
+      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 (
+    <FloatingPortal root={state.widgetContainer}>
+      {shouldShowRow && (
+        <div ref={rowHandle.ref} style={rowHandle.style}>
+          <RowButton
+            editor={editor}
+            orientation="row"
+            index={state.rowIndex}
+            tablePos={state.blockPos}
+            tableNode={state.block}
+            onToggleOtherHandle={toggleColumnVisibility}
+            dragStart={rowDragStart}
+            onOpenChange={(open) => handleMenuOpenChange("row", open)}
+          />
+        </div>
+      )}
+
+      {shouldShowColumn && (
+        <div ref={colHandle.ref} style={colHandle.style}>
+          <ColumnButton
+            editor={editor}
+            orientation="column"
+            index={state.colIndex}
+            tablePos={state.blockPos}
+            tableNode={state.block}
+            onToggleOtherHandle={toggleRowVisibility}
+            dragStart={colDragStart}
+            onOpenChange={(open) => handleMenuOpenChange("column", open)}
+          />
+        </div>
+      )}
+    </FloatingPortal>
+  )
+}
+
+TableHandle.displayName = "TableHandle"

package/src/components/tiptap-node/table-node/ui/table-handle/use-table-handle-positioning.ts

@@ -0,0 +1,255 @@
+import {
+  offset,
+  size,
+  useFloating,
+  useTransitionStyles,
+} from "@floating-ui/react"
+import { useEffect, useMemo } from "react"
+import { clamp } from "../../lib/tiptap-table-utils"
+
+type Orientation = "row" | "col" | "cell"
+
+type DraggingState = {
+  draggedCellOrientation: Exclude<Orientation, "cell">
+  mousePos: number
+  initialOffset?: number
+}
+
+/**
+ * Creates a DOMRect for row handle positioning
+ */
+function makeRowRect(
+  cell: DOMRect,
+  table: DOMRect,
+  dragging?: DraggingState
+): DOMRect {
+  if (dragging?.draggedCellOrientation === "row") {
+    // Apply the initial offset to maintain handle position
+    const adjustedY = dragging.mousePos + (dragging.initialOffset ?? 0)
+    const clampedY = clamp(adjustedY, table.y, table.bottom - cell.height)
+    return new DOMRect(table.x, clampedY, table.width, cell.height)
+  }
+  return new DOMRect(table.x, cell.y, table.width, cell.height)
+}
+
+/**
+ * Creates a DOMRect for column handle positioning
+ */
+function makeColRect(
+  cell: DOMRect,
+  table: DOMRect,
+  dragging?: DraggingState
+): DOMRect {
+  if (dragging?.draggedCellOrientation === "col") {
+    // Apply the initial offset to maintain handle position
+    const adjustedX = dragging.mousePos + (dragging.initialOffset ?? 0)
+    const clampedX = clamp(adjustedX, table.x, table.right - cell.width)
+    return new DOMRect(clampedX, table.y, cell.width, table.height)
+  }
+  return new DOMRect(cell.x, table.y, cell.width, table.height)
+}
+
+/**
+ * Creates a DOMRect for cell handle positioning
+ */
+function makeCellRect(cell: DOMRect): DOMRect {
+  return new DOMRect(cell.x, cell.y, cell.width, 0)
+}
+
+/**
+ * Gets the placement configuration for different handle orientations
+ */
+function getPlacement(orientation: Orientation) {
+  switch (orientation) {
+    case "row":
+      return "left" as const
+    case "col":
+      return "top" as const
+    case "cell":
+    default:
+      return "bottom-end" as const
+  }
+}
+
+/**
+ * Gets the offset configuration for different handle orientations
+ */
+function getOffset(orientation: Orientation) {
+  switch (orientation) {
+    case "row":
+      return 4
+    case "col":
+      return 4
+    case "cell":
+    default:
+      return { mainAxis: 1, crossAxis: -1 } as const
+  }
+}
+
+/**
+ * Factory function to create DOMRect based on orientation
+ */
+function rectFactory(
+  orientation: Orientation,
+  cell: DOMRect,
+  table: DOMRect,
+  dragging?: DraggingState
+): DOMRect {
+  switch (orientation) {
+    case "row":
+      return makeRowRect(cell, table, dragging)
+    case "col":
+      return makeColRect(cell, table, dragging)
+    case "cell":
+    default:
+      return makeCellRect(cell)
+  }
+}
+
+/**
+ * Hook for positioning individual table handles using Floating UI
+ */
+export function useTableHandlePosition(
+  orientation: Orientation,
+  show: boolean,
+  referencePosCell: DOMRect | null,
+  referencePosTable: DOMRect | null,
+  draggingState?: DraggingState
+): {
+  isMounted: boolean
+  ref: (node: HTMLElement | null) => void
+  style: React.CSSProperties
+} {
+  const placement = useMemo(() => getPlacement(orientation), [orientation])
+  const offsetValue = useMemo(() => getOffset(orientation), [orientation])
+
+  const { refs, update, context, floatingStyles } = useFloating({
+    open: show,
+    placement,
+    middleware: [
+      offset(offsetValue),
+      size({
+        apply({ rects, elements }) {
+          if (!elements.floating) return
+
+          const refWidth =
+            (orientation === "col"
+              ? (referencePosCell?.width ?? referencePosTable?.width)
+              : referencePosTable?.width) ?? rects.reference.width
+
+          const refHeight =
+            (orientation === "row"
+              ? (referencePosCell?.height ?? referencePosTable?.height)
+              : referencePosTable?.height) ?? rects.reference.height
+
+          // Set CSS custom properties for styling
+          elements.floating.style.setProperty(
+            "--table-handle-ref-width",
+            `${refWidth}px`
+          )
+          elements.floating.style.setProperty(
+            "--table-handle-ref-height",
+            `${refHeight}px`
+          )
+
+          // Set the main size dimension based on orientation
+          const mainSize = orientation === "row" ? refHeight : refWidth
+          elements.floating.style.setProperty(
+            "--table-handle-available-size",
+            `${mainSize}px`
+          )
+        },
+      }),
+    ],
+  })
+
+  const { isMounted, styles } = useTransitionStyles(context)
+
+  useEffect(() => {
+    update()
+  }, [
+    update,
+    show,
+    orientation,
+    referencePosCell,
+    referencePosTable,
+    draggingState,
+  ])
+
+  // Provide a virtual reference rect to Floating UI
+  useEffect(() => {
+    // Nothing to reference yet
+    if (!referencePosCell || !referencePosTable) return
+
+    // Ignore cell handle while dragging (matches original behavior)
+    if (draggingState && orientation === "cell") return
+
+    refs.setReference({
+      getBoundingClientRect: () =>
+        rectFactory(
+          orientation,
+          referencePosCell,
+          referencePosTable,
+          draggingState
+        ),
+    })
+  }, [refs, orientation, referencePosCell, referencePosTable, draggingState])
+
+  return useMemo(
+    () => ({
+      isMounted,
+      ref: refs.setFloating,
+      style: {
+        display: "flex",
+        ...styles,
+        ...floatingStyles,
+      },
+    }),
+    [isMounted, refs.setFloating, styles, floatingStyles]
+  )
+}
+
+/**
+ * Hook for managing positioning of all table handles (row, column, and cell)
+ *
+ * @param show - Whether handles should be shown
+ * @param referencePosCell - The bounding rect of the current cell
+ * @param referencePosTable - The bounding rect of the table
+ * @param draggingState - Current dragging state if any
+ * @returns Positioning data for all handle types
+ */
+export function useTableHandlePositioning(
+  show: boolean,
+  referencePosCell: DOMRect | null,
+  referencePosTable: DOMRect | null,
+  draggingState?: DraggingState
+) {
+  const rowHandle = useTableHandlePosition(
+    "row",
+    show,
+    referencePosCell,
+    referencePosTable,
+    draggingState
+  )
+
+  const colHandle = useTableHandlePosition(
+    "col",
+    show,
+    referencePosCell,
+    referencePosTable,
+    draggingState
+  )
+
+  const cellHandle = useTableHandlePosition(
+    "cell",
+    show,
+    referencePosCell,
+    referencePosTable,
+    draggingState
+  )
+
+  return useMemo(
+    () => ({ rowHandle, colHandle, cellHandle }),
+    [rowHandle, colHandle, cellHandle]
+  )
+}

package/src/components/tiptap-node/table-node/ui/table-handle-menu/index.tsx

@@ -0,0 +1 @@
+export * from "./table-handle-menu"

package/src/components/tiptap-node/table-node/ui/table-handle-menu/table-handle-menu.css

@@ -0,0 +1,39 @@
+@import "tailwindcss";
+
+.tiptap-table-handle-menu {
+  @apply border-0 flex items-center justify-center bg-gray-100 dark:bg-gray-800 rounded-lg cursor-grab;
+}
+
+.tiptap-table-handle-menu .tiptap-button-icon {
+  @apply w-4 h-4 flex-shrink-0;
+}
+
+.tiptap-table-handle-menu.menu-opened {
+  @apply bg-indigo-500;
+}
+
+.tiptap-table-handle-menu.menu-opened .tiptap-button-icon {
+  @apply text-white;
+}
+
+.tiptap-table-handle-menu.is-dragging {
+  @apply cursor-grabbing bg-indigo-500;
+}
+
+.tiptap-table-handle-menu.is-dragging .tiptap-button-icon {
+  @apply text-white;
+}
+
+.tiptap-table-handle-menu.row {
+  @apply w-3;
+  height: var(--table-handle-ref-height);
+}
+
+.tiptap-table-handle-menu.column {
+  @apply h-3;
+  width: var(--table-handle-ref-width);
+}
+
+.tiptap-table-handle-menu.column .tiptap-button-icon {
+  @apply rotate-90;
+}