@allbluecn/web-app 0.6.2 → 0.7.0

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

@@ -0,0 +1,259 @@
+import { getClientI18n } from '@/i18n/client'
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+
+import { useCallback } from "react"
+import type { Editor } from "@tiptap/react"
+
+// --Hooks ---
+import { useTiptapEditor } from "../../../../hooks/use-tiptap-editor.ts"
+
+// --Lib ---
+import { isExtensionAvailable } from "../../../../lib/utils.ts"
+import {
+  getTable,
+  RESIZE_MIN_WIDTH,
+} from "../../lib/tiptap-table-utils.ts"
+
+// --Icons ---
+import { MoveHorizontalIcon } from "../../../../icons/move-horizontal-icon.tsx"
+
+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: { type: { name: string }; attrs: Record<string, unknown> }, childPos: number) => {
+      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. getClientI18n().t('fit-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("表格已设为自适应宽度"),
+ *   })
+ *   return (
+ *     <button onClick={handleFitToWidth} disabled={!canFitToWidth}>
+ *       适应宽度
+ *     </button>
+ *   )
+ * }
+ */
+export function useTableFitToWidth(config: UseTableFitToWidthConfig = {}) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onWidthAdjusted,
+  } = config
+
+  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 = getClientI18n().t('fit-width')
+  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,19 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+export * from "./table-handle"
+export * from "./use-table-handle-positioning"

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

@@ -0,0 +1,179 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+
+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/index.ts"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../../hooks/use-tiptap-editor.ts"
+import { useTableHandlePositioning } from "./use-table-handle-positioning.ts"
+import { useTableHandleState } from "../../hooks/use-table-handle-state.ts"
+import { type Orientation } from "../../lib/tiptap-table-utils.ts"
+
+// --- Components ---
+import { TableHandleMenu } from "../table-handle-menu/index.tsx"
+
+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"