@meta-1/editor 0.0.28 → 1.0.0

package/src/components/tiptap-ui/move-node-button/move-node-button.tsx

@@ -0,0 +1,120 @@
+"use client"
+
+import { forwardRef, useCallback } from "react"
+
+// --- Lib ---
+import { parseShortcutKeys } from "../../../lib/tiptap-utils"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+
+// --- Tiptap UI ---
+import type { UseMoveNodeConfig } from "./"
+import { useMoveNode } from "./"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "../../tiptap-ui-primitive/button"
+import { Button } from "../../tiptap-ui-primitive/button"
+import { Badge } from "../../tiptap-ui-primitive/badge"
+
+export interface MoveNodeButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseMoveNodeConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function MoveNodeShortcutBadge({
+  shortcutKeys,
+}: {
+  shortcutKeys: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for moving a node up or down in a Tiptap editor.
+ */
+export const MoveNodeButton = forwardRef<
+  HTMLButtonElement,
+  MoveNodeButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      text,
+      direction,
+      hideWhenUnavailable = false,
+      onMoved,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      handleMoveNode,
+      canMoveNode,
+      label,
+      shortcutKeys,
+      Icon,
+    } = useMoveNode({
+      editor,
+      direction,
+      hideWhenUnavailable,
+      onMoved,
+    })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleMoveNode()
+      },
+      [handleMoveNode, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    const tooltip = direction === "up" ? "Move Up" : "Move Down"
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        role="button"
+        tabIndex={-1}
+        aria-label={label}
+        tooltip={tooltip}
+        disabled={!canMoveNode}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <MoveNodeShortcutBadge shortcutKeys={shortcutKeys} />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+MoveNodeButton.displayName = "MoveNodeButton"

package/src/components/tiptap-ui/move-node-button/use-move-node.ts

@@ -0,0 +1,207 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import { useHotkeys } from "react-hotkeys-hook"
+import { type Editor } from "@tiptap/react"
+import { TextSelection } from "@tiptap/pm/state"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+import { useIsBreakpoint } from "../../../hooks/use-is-breakpoint"
+
+// --- Utils ---
+import { getAnchorNodeAndPos } from "../../../lib/tiptap-advanced-utils"
+
+// --- Icons ---
+import { AlignTopIcon } from "../../tiptap-icons/align-top-icon"
+import { AlignBottomIcon } from "../../tiptap-icons/align-bottom-icon"
+
+export const MOVE_UP_SHORTCUT_KEY = "mod+shift+ArrowUp"
+export const MOVE_DOWN_SHORTCUT_KEY = "mod+shift+ArrowDown"
+
+/**
+ * Configuration for the move node functionality
+ */
+export interface UseMoveNodeConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Whether the button should hide when moving is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * The direction to move the node.
+   */
+  direction: "up" | "down"
+  /**
+   * Callback function called after a successful move.
+   */
+  onMoved?: (direction: "up" | "down") => void
+}
+
+/**
+ * Checks if a node can be moved in the specified direction
+ */
+export function canMoveNode(
+  editor: Editor | null,
+  direction: "up" | "down"
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  const nodeInfo = getAnchorNodeAndPos(editor)
+  if (!nodeInfo) return false
+
+  try {
+    const { pos } = nodeInfo
+    const $pos = editor.state.doc.resolve(pos)
+    const parent = $pos.parent
+    const index = $pos.index()
+
+    return direction === "up" ? index > 0 : index < parent.childCount - 1
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Moves a node in the editor
+ */
+export function moveNode(
+  editor: Editor | null,
+  direction: "up" | "down"
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  const nodeInfo = getAnchorNodeAndPos(editor)
+  if (!nodeInfo) return false
+
+  try {
+    const { pos, node } = nodeInfo
+    const tr = editor.state.tr
+    const $pos = tr.doc.resolve(pos)
+    const parent = $pos.parent
+    const index = $pos.index()
+
+    if (index < 0 || index >= parent.childCount) {
+      return false
+    }
+
+    if (direction === "up" && index > 0) {
+      const prevNode = parent.child(index - 1)
+      const prevSize = prevNode.nodeSize
+
+      const movedNode = node.type.create(node.attrs, node.content, node.marks)
+      tr.deleteRange(pos, pos + node.nodeSize)
+      const insertPos = pos - prevSize
+      tr.insert(insertPos, movedNode)
+      tr.setSelection(TextSelection.near(tr.doc.resolve(insertPos)))
+    } else if (direction === "down" && index < parent.childCount - 1) {
+      const nextNode = parent.child(index + 1)
+      const nextSize = nextNode.nodeSize
+
+      const movedNode = node.type.create(node.attrs, node.content, node.marks)
+      tr.deleteRange(pos, pos + node.nodeSize)
+      const insertPos = pos + nextSize
+      tr.insert(insertPos, movedNode)
+      tr.setSelection(TextSelection.near(tr.doc.resolve(insertPos)))
+    } else {
+      return false
+    }
+
+    editor.view.dispatch(tr)
+    return true
+  } catch (err) {
+    console.error("Error moving node:", err)
+    return false
+  }
+}
+
+/**
+ * Determines if the move button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  direction: "up" | "down"
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, direction, hideWhenUnavailable } = props
+
+  if (!editor || !editor.isEditable) return false
+
+  const hasNode = !!getAnchorNodeAndPos(editor)
+  const movable = canMoveNode(editor, direction)
+
+  return hideWhenUnavailable ? hasNode && movable : hasNode
+}
+
+/**
+ * Custom hook that provides move node functionality for Tiptap editor
+ */
+export function useMoveNode(config: UseMoveNodeConfig) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    direction,
+    onMoved,
+  } = config
+  const { editor } = useTiptapEditor(providedEditor)
+  const isMobile = useIsBreakpoint()
+
+  const [isVisible, setIsVisible] = useState(true)
+  const [canMoveNodeState, setCanMoveNodeState] = useState(false)
+
+  const handleMoveNode = useCallback(() => {
+    if (!canMoveNodeState) return false
+
+    const success = moveNode(editor, direction)
+    if (success) onMoved?.(direction)
+
+    return success
+  }, [editor, direction, onMoved, canMoveNodeState])
+
+  useEffect(() => {
+    if (!editor) return
+
+    const update = () => {
+      setIsVisible(shouldShowButton({ editor, direction, hideWhenUnavailable }))
+      setCanMoveNodeState(canMoveNode(editor, direction))
+    }
+
+    update()
+
+    editor.on("selectionUpdate", update)
+    return () => {
+      editor.off("selectionUpdate", update)
+    }
+  }, [editor, direction, hideWhenUnavailable])
+
+  const shortcutKeys =
+    direction === "up" ? MOVE_UP_SHORTCUT_KEY : MOVE_DOWN_SHORTCUT_KEY
+
+  useHotkeys(
+    shortcutKeys,
+    (event) => {
+      event.preventDefault()
+      handleMoveNode()
+    },
+    {
+      enabled: isVisible && canMoveNodeState,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    },
+    [handleMoveNode, isVisible, canMoveNodeState, isMobile]
+  )
+
+  const label = direction === "up" ? "Move Up" : "Move Down"
+  const Icon = direction === "up" ? AlignTopIcon : AlignBottomIcon
+
+  return {
+    isVisible,
+    handleMoveNode,
+    canMoveNode: canMoveNodeState,
+    label,
+    shortcutKeys,
+    Icon,
+  }
+}

package/src/components/tiptap-ui/reset-all-formatting-button/index.tsx

@@ -0,0 +1,2 @@
+export * from "./reset-all-formatting-button"
+export * from "./use-reset-all-formatting"

package/src/components/tiptap-ui/reset-all-formatting-button/reset-all-formatting-button.tsx

@@ -0,0 +1,126 @@
+"use client"
+
+import { forwardRef, useCallback } from "react"
+
+// --- Lib ---
+import { parseShortcutKeys } from "../../../lib/tiptap-utils"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+
+// --- Tiptap UI ---
+import type { UseResetAllFormattingConfig } from "./"
+import {
+  RESET_ALL_FORMATTING_SHORTCUT_KEY,
+  useResetAllFormatting,
+} from "./"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "../../tiptap-ui-primitive/button"
+import { Button } from "../../tiptap-ui-primitive/button"
+import { Badge } from "../../tiptap-ui-primitive/badge"
+
+export interface ResetAllFormattingButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseResetAllFormattingConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function ResetAllFormattingShortcutBadge({
+  shortcutKeys = RESET_ALL_FORMATTING_SHORTCUT_KEY,
+}: {
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for resetting formatting of a node in a Tiptap editor.
+ * Removes all marks and converts non-paragraph nodes to paragraphs.
+ *
+ * For custom button implementations, use the `useResetAllFormatting` hook instead.
+ */
+export const ResetAllFormattingButton = forwardRef<
+  HTMLButtonElement,
+  ResetAllFormattingButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      text,
+      hideWhenUnavailable = false,
+      preserveMarks = ["inlineThread"],
+      onResetAllFormatting,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      canReset,
+      handleResetFormatting,
+      label,
+      shortcutKeys,
+      Icon,
+    } = useResetAllFormatting({
+      editor,
+      preserveMarks,
+      hideWhenUnavailable,
+      onResetAllFormatting,
+    })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleResetFormatting()
+      },
+      [handleResetFormatting, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        disabled={!canReset}
+        data-disabled={!canReset}
+        data-active-state="off"
+        role="button"
+        tabIndex={-1}
+        aria-label={label}
+        tooltip="Reset formatting"
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <ResetAllFormattingShortcutBadge shortcutKeys={shortcutKeys} />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+ResetAllFormattingButton.displayName = "ResetAllFormattingButton"

package/src/components/tiptap-ui/reset-all-formatting-button/use-reset-all-formatting.ts

@@ -0,0 +1,250 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { Transaction } from "@tiptap/pm/state";
+import { type Editor } from "@tiptap/react";
+import { useHotkeys } from "react-hotkeys-hook";
+import { useTranslation } from "react-i18next";
+
+import { useIsBreakpoint } from "../../../hooks/use-is-breakpoint";
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor";
+// --- Icons ---
+import { RotateCcwIcon } from "../../tiptap-icons/rotate-ccw-icon";
+
+export const RESET_ALL_FORMATTING_SHORTCUT_KEY = "mod+r";
+
+/**
+ * Configuration for the reset formatting functionality
+ */
+export interface UseResetAllFormattingConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null;
+  /**
+   * Whether the button should hide when resetting is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean;
+  /**
+   * Marks to preserve when resetting formatting.
+   */
+  preserveMarks?: string[];
+  /**
+   * Callback function called after formatting is successfully reset.
+   */
+  onResetAllFormatting?: () => void;
+}
+
+/**
+ * Removes all marks from the transaction except those specified in the skip array
+ * @param tr The Tiptap transaction to modify
+ * @param skip Array of mark names to skip when removing marks
+ * @returns The modified transaction with specified marks removed
+ */
+export function removeAllMarksExcept(tr: Transaction, skip: string[] = []) {
+  const { selection } = tr;
+  const { empty, ranges } = selection;
+
+  if (empty) return tr;
+
+  ranges.forEach((range) => {
+    const from = range.$from.pos;
+    const to = range.$to.pos;
+
+    tr.doc.nodesBetween(from, to, (node, pos) => {
+      if (!node.isInline) return true;
+
+      node.marks.forEach((mark) => {
+        if (!skip.includes(mark.type.name)) {
+          tr.removeMark(pos, pos + node.nodeSize, mark.type);
+        }
+      });
+
+      return true;
+    });
+  });
+
+  return tr;
+}
+
+/**
+ * Checks whether the current selection has marks that can be reset (removed)
+ * @param tr The Tiptap transaction to check
+ * @param skip Array of mark names to skip when checking for removable marks
+ * @returns True if there are marks that can be removed, false otherwise
+ */
+export function canResetMarks(tr: Transaction, skip: string[] = []): boolean {
+  const { selection } = tr;
+  const { empty, ranges } = selection;
+
+  if (empty) return false;
+
+  for (const range of ranges) {
+    const from = range.$from.pos;
+    const to = range.$to.pos;
+
+    let hasRemovableMarks = false;
+
+    tr.doc.nodesBetween(from, to, (node) => {
+      if (!node.isInline) return true;
+
+      for (const mark of node.marks) {
+        if (!skip.includes(mark.type.name)) {
+          hasRemovableMarks = true;
+          return false;
+        }
+      }
+
+      return true;
+    });
+
+    if (hasRemovableMarks) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Checks if formatting can be reset for a node
+ */
+export function canResetFormatting(editor: Editor | null, preserveMarks?: string[]): boolean {
+  if (!editor || !editor.isEditable) return false;
+
+  const tr = editor.state.tr;
+  return canResetMarks(tr, preserveMarks);
+}
+
+/**
+ * Resets formatting for a node or selection
+ */
+export function resetFormatting(editor: Editor | null, preserveMarks?: string[]): boolean {
+  if (!editor || !editor.isEditable) return false;
+
+  try {
+    const { view, state } = editor;
+    const { tr } = state;
+    const transaction = removeAllMarksExcept(tr, preserveMarks);
+
+    view.dispatch(transaction);
+    editor.commands.focus();
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Determines if the reset formatting button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null;
+  hideWhenUnavailable: boolean;
+  preserveMarks?: string[];
+}): boolean {
+  const { editor, hideWhenUnavailable, preserveMarks } = props;
+
+  if (!editor || !editor.isEditable) return false;
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canResetFormatting(editor, preserveMarks);
+  }
+
+  return true;
+}
+
+/**
+ * Custom hook that provides reset formatting functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleResetButton() {
+ *   const { isVisible, handleResetFormatting } = useResetAllFormatting()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleResetFormatting}>Reset</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedResetButton() {
+ *   const { isVisible, handleResetFormatting, label } = useResetAllFormatting({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onResetAllFormatting: () => console.log('Formatting reset!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleResetFormatting}
+ *       aria-label={label}
+ *     >
+ *       Reset Formatting
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useResetAllFormatting(config?: UseResetAllFormattingConfig) {
+  const { editor: providedEditor, preserveMarks, hideWhenUnavailable = false, onResetAllFormatting } = config || {};
+
+  const { editor } = useTiptapEditor(providedEditor);
+  const isMobile = useIsBreakpoint();
+  const [isVisible, setIsVisible] = useState<boolean>(true);
+  const canReset = canResetFormatting(editor, preserveMarks);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable, preserveMarks }));
+    };
+
+    handleSelectionUpdate();
+
+    editor.on("selectionUpdate", handleSelectionUpdate);
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable, preserveMarks]);
+
+  const handleResetFormatting = useCallback(() => {
+    if (!editor) return false;
+
+    const success = resetFormatting(editor, preserveMarks);
+    if (success) {
+      onResetAllFormatting?.();
+    }
+    return success;
+  }, [editor, onResetAllFormatting, preserveMarks]);
+
+  useHotkeys(
+    RESET_ALL_FORMATTING_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault(); // prevent browser default refresh
+      handleResetFormatting();
+    },
+    {
+      enabled: isVisible && canReset,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    },
+  );
+
+  return {
+    isVisible,
+    handleResetFormatting,
+    canReset,
+    label: t("重置格式"),
+    shortcutKeys: RESET_ALL_FORMATTING_SHORTCUT_KEY,
+    Icon: RotateCcwIcon,
+  };
+}

package/src/components/tiptap-ui/slash-command-trigger-button/index.tsx

@@ -0,0 +1,2 @@
+export * from "./slash-command-trigger-button"
+export * from "./use-slash-command-trigger"