@meta-1/editor 0.0.29 → 1.0.1

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

@@ -0,0 +1,240 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { FloatingPortal } from "@floating-ui/react";
+import type { Node } from "@tiptap/pm/model";
+import { TableMap } from "@tiptap/pm/tables";
+import { type Editor } from "@tiptap/react";
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../../../hooks/use-tiptap-editor";
+import { cn } from "../../../../../lib/tiptap-utils";
+// --- Icons ---
+import { PlusSmallIcon } from "../../../../tiptap-icons/plus-small-icon";
+import { useTableHandleState } from "../../hooks/use-table-handle-state";
+// --- Lib ---
+import type { Orientation } from "../../lib/tiptap-table-utils";
+import {
+  countEmptyColumnsFromEnd,
+  countEmptyRowsFromEnd,
+  EMPTY_CELL_HEIGHT,
+  EMPTY_CELL_WIDTH,
+  marginRound,
+  runPreservingCursor,
+  selectLastCell,
+} from "../../lib/tiptap-table-utils";
+// --- Internal ---
+import { useTableExtendRowColumnButtonsPositioning } from "./use-table-extend-row-column";
+import "./table-extend-row-column-button.css";
+
+interface TableExtendRowColumnButtonProps {
+  editor?: Editor | null;
+  block: Node;
+  onMouseDown: () => void;
+  onMouseUp: () => void;
+  orientation: Orientation;
+  children?: React.ReactNode;
+}
+
+/**
+ * Simplified button component for extending/reducing table dimensions
+ */
+export const TableExtendRowColumnButton: React.FC<TableExtendRowColumnButtonProps> = ({
+  editor: providedEditor,
+  onMouseDown,
+  onMouseUp,
+  orientation,
+  children,
+}) => {
+  const { editor } = useTiptapEditor(providedEditor);
+  const state = useTableHandleState({ editor });
+  const isRowOrientation = orientation === "row";
+
+  const movedRef = useRef(false);
+  const [dragState, setDragState] = useState<{
+    startPos: number;
+    originalHeight: number;
+    originalWidth: number;
+  } | null>(null);
+
+  const startDrag = useCallback(
+    (ev: React.MouseEvent) => {
+      if (!state) return;
+
+      const dims = TableMap.get(state.block);
+      movedRef.current = false;
+
+      setDragState({
+        startPos: isRowOrientation ? ev.clientY : ev.clientX,
+        originalHeight: dims.height,
+        originalWidth: dims.width,
+      });
+
+      onMouseDown();
+      ev.preventDefault();
+    },
+    [state, isRowOrientation, onMouseDown],
+  );
+
+  const handleClick = useCallback(() => {
+    if (movedRef.current || !editor || !state) return;
+
+    runPreservingCursor(editor, () => {
+      selectLastCell(editor, state.block, state.blockPos, orientation);
+
+      if (isRowOrientation) {
+        editor.commands.addRowAfter();
+      } else {
+        editor.commands.addColumnAfter();
+      }
+    });
+  }, [editor, isRowOrientation, orientation, state]);
+
+  useEffect(() => {
+    if (!dragState || !editor || !state) return;
+
+    const handleMove = (ev: MouseEvent) => {
+      movedRef.current = true;
+
+      const currentPos = isRowOrientation ? ev.clientY : ev.clientX;
+      const diff = currentPos - dragState.startPos;
+      const cellSize = isRowOrientation ? EMPTY_CELL_HEIGHT : EMPTY_CELL_WIDTH;
+
+      const currentDims = TableMap.get(state.block);
+      const currentCount = isRowOrientation ? currentDims.height : currentDims.width;
+      const originalCount = isRowOrientation ? dragState.originalHeight : dragState.originalWidth;
+
+      const newCount = Math.max(1, originalCount + marginRound(diff / cellSize, 0.3));
+      const delta = newCount - currentCount;
+
+      if (delta === 0) return;
+
+      // Add rows/columns
+      if (delta > 0) {
+        runPreservingCursor(editor, () => {
+          selectLastCell(editor, state.block, state.blockPos, orientation);
+
+          for (let i = 0; i < delta; i++) {
+            if (isRowOrientation) {
+              editor.commands.addRowAfter();
+            } else {
+              editor.commands.addColumnAfter();
+            }
+          }
+        });
+      }
+      // Remove rows/columns - but only if they're empty
+      else {
+        runPreservingCursor(editor, () => {
+          const absDelta = Math.abs(delta);
+
+          const emptyCount = isRowOrientation
+            ? countEmptyRowsFromEnd(editor, state.blockPos)
+            : countEmptyColumnsFromEnd(editor, state.blockPos);
+
+          // Only remove up to the number of empty cells, and keep at least 1
+          const safeToRemove = Math.min(absDelta, emptyCount, currentCount - 1);
+
+          selectLastCell(editor, state.block, state.blockPos, orientation);
+
+          for (let i = 0; i < safeToRemove; i++) {
+            if (isRowOrientation) {
+              editor.commands.deleteRow();
+            } else {
+              editor.commands.deleteColumn();
+            }
+          }
+        });
+      }
+    };
+
+    const handleUp = () => {
+      setDragState(null);
+      onMouseUp();
+    };
+
+    window.addEventListener("mousemove", handleMove);
+    window.addEventListener("mouseup", handleUp);
+
+    return () => {
+      window.removeEventListener("mousemove", handleMove);
+      window.removeEventListener("mouseup", handleUp);
+    };
+  }, [dragState, editor, isRowOrientation, orientation, onMouseUp, state]);
+
+  if (!editor?.isEditable) return null;
+
+  return (
+    <button
+      aria-label={isRowOrientation ? "Add or remove rows" : "Add or remove columns"}
+      className={cn(
+        "tiptap-table-extend-row-column-button",
+        isRowOrientation ? "tiptap-table-row-end-add-remove" : "tiptap-table-column-end-add-remove",
+        dragState && "editing",
+      )}
+      onClick={handleClick}
+      onMouseDown={startDrag}
+      type="button"
+    >
+      {children ?? <PlusSmallIcon className="tiptap-button-icon" />}
+    </button>
+  );
+};
+
+export interface TableExtendRowColumnButtonsProps {
+  editor?: Editor | null;
+  onMouseDown?: () => void;
+  onMouseUp?: () => void;
+}
+
+export const TableExtendRowColumnButtons: React.FC<TableExtendRowColumnButtonsProps> = ({
+  editor: providedEditor,
+  onMouseDown,
+  onMouseUp,
+}) => {
+  const { editor } = useTiptapEditor(providedEditor);
+  const state = useTableHandleState({ editor });
+  const { columnButton, rowButton } = useTableExtendRowColumnButtonsPositioning(
+    state?.showAddOrRemoveColumnsButton ?? false,
+    state?.showAddOrRemoveRowsButton ?? false,
+    state?.referencePosTable ?? null,
+  );
+
+  const handleDown = useCallback(() => {
+    if (!editor) return;
+    editor.commands.freezeHandles();
+    onMouseDown?.();
+  }, [editor, onMouseDown]);
+
+  const handleUp = useCallback(() => {
+    if (!editor) return;
+    editor.commands.unfreezeHandles();
+    onMouseUp?.();
+  }, [editor, onMouseUp]);
+
+  if (!state) return null;
+
+  return (
+    <FloatingPortal root={state.widgetContainer}>
+      <div ref={rowButton.ref} style={rowButton.style}>
+        <TableExtendRowColumnButton
+          block={state.block}
+          editor={editor}
+          onMouseDown={handleDown}
+          onMouseUp={handleUp}
+          orientation="row"
+        />
+      </div>
+
+      <div ref={columnButton.ref} style={columnButton.style}>
+        <TableExtendRowColumnButton
+          block={state.block}
+          editor={editor}
+          onMouseDown={handleDown}
+          onMouseUp={handleUp}
+          orientation="column"
+        />
+      </div>
+    </FloatingPortal>
+  );
+};

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

@@ -0,0 +1,118 @@
+import type { Orientation } from "../../lib/tiptap-table-utils"
+import {
+  offset,
+  size,
+  useFloating,
+  useTransitionStyles,
+  type Placement,
+} from "@floating-ui/react"
+import { useEffect, useMemo, useCallback } from "react"
+
+interface TableExtendRowColumnButtonPositionResult {
+  isMounted: boolean
+  ref: (node: HTMLElement | null) => void
+  style: React.CSSProperties
+}
+
+interface TableExtendRowColumnButtonsPositioningResult {
+  rowButton: TableExtendRowColumnButtonPositionResult
+  columnButton: TableExtendRowColumnButtonPositionResult
+}
+
+const ORIENTATION_CONFIG = {
+  row: {
+    placement: "bottom" as Placement,
+    sizeProperty: "width",
+  },
+  column: {
+    placement: "right" as Placement,
+    sizeProperty: "height",
+  },
+} as const
+
+/**
+ * Custom hook for positioning extend buttons using Floating UI
+ */
+function useTableExtendRowColumnButtonPosition(
+  orientation: Orientation,
+  show: boolean,
+  referencePosTable: DOMRect | null
+): TableExtendRowColumnButtonPositionResult {
+  const config = ORIENTATION_CONFIG[orientation]
+
+  const { refs, update, context, floatingStyles } = useFloating({
+    open: show,
+    placement: config.placement,
+    middleware: [
+      offset(4),
+      size({
+        apply({ rects, elements }) {
+          const floating = elements.floating
+          if (!floating) return
+
+          // Apply size based on orientation
+          const sizeValue = `${rects.reference[config.sizeProperty]}px`
+          floating.style[config.sizeProperty] = sizeValue
+        },
+      }),
+    ],
+  })
+
+  const { isMounted, styles } = useTransitionStyles(context)
+
+  const createVirtualReference = useCallback(
+    (rect: DOMRect) => ({
+      getBoundingClientRect: () => rect,
+    }),
+    []
+  )
+
+  useEffect(() => {
+    if (!referencePosTable) return
+
+    refs.setReference(createVirtualReference(referencePosTable))
+    update()
+  }, [referencePosTable, refs, update, createVirtualReference])
+
+  return useMemo(
+    () => ({
+      isMounted,
+      ref: refs.setFloating,
+      style: {
+        display: "flex",
+        ...styles,
+        ...floatingStyles,
+      } as React.CSSProperties,
+    }),
+    [floatingStyles, isMounted, refs.setFloating, styles]
+  )
+}
+
+/**
+ * Hook for managing positioning of both row and column extend buttons
+ */
+export function useTableExtendRowColumnButtonsPositioning(
+  showAddOrRemoveColumnsButton: boolean,
+  showAddOrRemoveRowsButton: boolean,
+  referencePosTable: DOMRect | null
+): TableExtendRowColumnButtonsPositioningResult {
+  const rowButton = useTableExtendRowColumnButtonPosition(
+    "row",
+    showAddOrRemoveRowsButton,
+    referencePosTable
+  )
+
+  const columnButton = useTableExtendRowColumnButtonPosition(
+    "column",
+    showAddOrRemoveColumnsButton,
+    referencePosTable
+  )
+
+  return useMemo(
+    () => ({
+      rowButton,
+      columnButton,
+    }),
+    [rowButton, columnButton]
+  )
+}

package/src/components/tiptap-node/table-node/ui/table-fit-to-width-button/index.tsx

@@ -0,0 +1,2 @@
+export * from "./table-fit-to-width-button"
+export * from "./use-table-fit-to-width"

package/src/components/tiptap-node/table-node/ui/table-fit-to-width-button/table-fit-to-width-button.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import { forwardRef, useCallback } from "react"
+
+// --- Hooks ---
+import { useTableFitToWidth } from "./use-table-fit-to-width"
+import type { UseTableFitToWidthConfig } from "./use-table-fit-to-width"
+import { useTiptapEditor } from "../../../../../hooks/use-tiptap-editor"
+
+// --- Primitives ---
+import type { ButtonProps } from "../../../../tiptap-ui-primitive/button"
+import { Button } from "../../../../tiptap-ui-primitive/button"
+
+export interface TableFitToWidthButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseTableFitToWidthConfig {
+  text?: string
+}
+
+/**
+ * Button component for fitting table to container width.
+ *
+ * This component provides a user interface for toggling table width between
+ * fixed column widths and container-fitting behavior. It integrates with the
+ * Tiptap table extension to modify table layout properties.
+ *
+ * @example
+ * ```tsx
+ * <TableFitToWidthButton
+ *   editor={editor}
+ *   onWidthAdjusted={() => console.log('Width changed')}
+ * />
+ * ```
+ */
+export const TableFitToWidthButton = forwardRef<
+  HTMLButtonElement,
+  TableFitToWidthButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      hideWhenUnavailable = false,
+      onWidthAdjusted,
+      text,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const { isVisible, canFitToWidth, label, Icon, handleFitToWidth } =
+      useTableFitToWidth({
+        editor,
+        hideWhenUnavailable,
+        onWidthAdjusted,
+      })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleFitToWidth()
+      },
+      [handleFitToWidth, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        disabled={!canFitToWidth}
+        data-style="ghost"
+        data-active-state="off"
+        data-disabled={!canFitToWidth}
+        role="button"
+        tabIndex={-1}
+        aria-label={label}
+        tooltip={label}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+TableFitToWidthButton.displayName = "TableFitToWidthButton"

package/src/components/tiptap-node/table-node/ui/table-fit-to-width-button/use-table-fit-to-width.ts

@@ -0,0 +1,223 @@
+"use client";
+
+import { useCallback } from "react";
+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 { MoveHorizontalIcon } from "../../../../tiptap-icons/move-horizontal-icon";
+import { getTable, RESIZE_MIN_WIDTH } from "../../lib/tiptap-table-utils";
+
+export interface UseTableFitToWidthConfig {
+  /**
+   * The Tiptap editor instance. If omitted, the hook will use
+   * the editor from `useTiptapEditor`.
+   */
+  editor?: Editor | null;
+  /**
+   * Hide the button when the action isn't currently possible.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean;
+  /**
+   * Called after the table width is successfully adjusted.
+   */
+  onWidthAdjusted?: () => void;
+}
+
+/**
+ * Required Tiptap extensions for this feature to work.
+ * - `table` to target the node and update attributes
+ * - `tableHandleExtension` (or your table controls) to ensure table tooling is enabled
+ */
+const REQUIRED_EXTENSIONS = ["table", "tableHandleExtension"];
+
+/**
+ * Returns whether a "fit to width" action can run in the current state.
+ * Checks: editor presence, editability, required extensions,
+ * and that the selection is somewhere inside a table.
+ */
+function canFitTableToWidth(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable || !isExtensionAvailable(editor, REQUIRED_EXTENSIONS)) {
+    return false;
+  }
+
+  try {
+    return editor.isActive("table") || editor.isActive("tableCell") || editor.isActive("tableHeader");
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Automatically adjusts table column widths to fit the editor's available width.
+ *
+ * This function finds the table containing the current selection and distributes
+ * the available editor width equally across all columns, accounting for padding
+ * and respecting any user-configured minimum cell width settings.
+ *
+ * @param editor - The ProseMirror editor instance, or null
+ * @returns true if the table width was successfully set, false otherwise
+ */
+function setTableAutoWidth(editor: Editor | null): boolean {
+  if (!canFitTableToWidth(editor) || !editor) return false;
+
+  try {
+    const table = getTable(editor);
+    if (!table) return false;
+
+    // Calculate the editor width available for the table
+    const editorElement = editor.view.dom as HTMLElement;
+    const style = getComputedStyle(editorElement);
+
+    const paddingLeft = parseFloat(style.paddingLeft) || 0;
+    const paddingRight = parseFloat(style.paddingRight) || 0;
+
+    const editorWidth = editorElement.clientWidth - paddingLeft - paddingRight;
+
+    const columnCount = table.map.width;
+    if (columnCount === 0) return false;
+
+    let colWidth = 0;
+    const availableWidth = editorWidth - columnCount - 8;
+    colWidth = Math.floor(availableWidth / columnCount);
+
+    // We are not using what what user set cellMinWidth
+    // Instead, we use a reasonable minimum width for usability.
+    const finalColWidth = Math.max(colWidth, RESIZE_MIN_WIDTH);
+
+    const tr = editor.state.tr;
+    table.node.descendants((child, childPos) => {
+      if (child.type.name === "tableCell" || child.type.name === "tableHeader") {
+        const absolutePos = table.start + childPos;
+        const colspan = child.attrs.colspan || 1;
+
+        const colwidthArray = Array(colspan).fill(finalColWidth);
+        tr.setNodeMarkup(absolutePos, undefined, {
+          ...child.attrs,
+          colwidth: colwidthArray,
+        });
+      }
+    });
+
+    if (tr.docChanged) {
+      editor.view.dispatch(tr);
+    }
+
+    return true;
+  } catch (error) {
+    console.error("Error setting table auto width:", error);
+    return false;
+  }
+}
+
+/**
+ * Executes the "fit to width" operation. Safely no-ops if unavailable.
+ * Returns `true` on success, `false` otherwise.
+ */
+function tableFitToWidth({ editor }: { editor: Editor | null }) {
+  if (!canFitTableToWidth(editor) || !editor) {
+    return false;
+  }
+
+  try {
+    return setTableAutoWidth(editor);
+  } catch (error) {
+    console.error("Error adjusting table width:", error);
+    return false;
+  }
+}
+
+/**
+ * Determines whether a UI control should be visible based on the editor
+ * state and `hideWhenUnavailable` setting.
+ */
+function shouldShowButton({
+  editor,
+  hideWhenUnavailable,
+}: {
+  editor: Editor | null;
+  hideWhenUnavailable: boolean;
+}): boolean {
+  if (!editor || !editor.isEditable) return false;
+  if (!isExtensionAvailable(editor, REQUIRED_EXTENSIONS)) return false;
+
+  return hideWhenUnavailable ? canFitTableToWidth(editor) : true;
+}
+
+/**
+ * React hook that provides a **Fit table to container width** action for Tiptap.
+ *
+ * What it does:
+ * - Sets the current table's `width` to `"100%"`
+ * - Clears cell-level `colwidth` so the table can expand fluidly
+ *
+ * Returned API:
+ * - `isVisible`: whether a button should be shown
+ * - `canFitToWidth`: whether the action can execute now
+ * - `handleFitToWidth()`: runs the action; returns `true` on success
+ * - `label`: UI label, e.g. "Fit to width"
+ * - `Icon`: a presentational icon component
+ *
+ * @example
+ * // Minimal button
+ * function FitToWidthButton() {
+ *   const { isVisible, canFitToWidth, handleFitToWidth, label, Icon } =
+ *     useTableFitToWidth({ hideWhenUnavailable: true })
+ *
+ *   if (!isVisible) return null
+ *   return (
+ *     <button onClick={handleFitToWidth} disabled={!canFitToWidth} aria-label={label}>
+ *       <Icon /> {label}
+ *     </button>
+ *   )
+ * }
+ *
+ * @example
+ * // Using a provided editor instance and a success callback
+ * function FitToWidthWithCallback({ editor }: { editor: Editor }) {
+ *   const { handleFitToWidth, canFitToWidth } = useTableFitToWidth({
+ *     editor,
+ *     hideWhenUnavailable: true,
+ *     onWidthAdjusted: () => console.log("Table set to auto width"),
+ *   })
+ *   return (
+ *     <button onClick={handleFitToWidth} disabled={!canFitToWidth}>
+ *       Fit to container
+ *     </button>
+ *   )
+ * }
+ */
+export function useTableFitToWidth(config: UseTableFitToWidthConfig = {}) {
+  const { editor: providedEditor, hideWhenUnavailable = false, onWidthAdjusted } = config;
+  const { t } = useTranslation();
+  const { editor } = useTiptapEditor(providedEditor);
+
+  const isVisible = shouldShowButton({
+    editor,
+    hideWhenUnavailable,
+  });
+
+  const canPerformAction = canFitTableToWidth(editor);
+
+  const handleFitToWidth = useCallback(() => {
+    const success = tableFitToWidth({ editor });
+    if (success) onWidthAdjusted?.();
+    return success;
+  }, [editor, onWidthAdjusted]);
+
+  const label = t("适应宽度");
+  const Icon = MoveHorizontalIcon;
+
+  return {
+    isVisible,
+    canFitToWidth: canPerformAction,
+    handleFitToWidth,
+    label,
+    Icon,
+  };
+}

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

@@ -0,0 +1,2 @@
+export * from "./table-handle"
+export * from "./use-table-handle-positioning"