@meta-1/editor 0.0.28 → 1.0.0

package/src/components/tiptap-ui/turn-into-dropdown/use-turn-into-dropdown.ts

@@ -0,0 +1,260 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { NodeSelection } from "@tiptap/pm/state";
+import type { Editor } from "@tiptap/react";
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor";
+// --- Icons ---
+import { ChevronDownIcon } from "../../tiptap-icons/chevron-down-icon";
+// --- Tiptap UI ---
+import type { Level } from "../heading-button";
+
+export const TURN_INTO_BLOCKS = [
+  "paragraph",
+  "heading",
+  "bulletList",
+  "orderedList",
+  "taskList",
+  "blockquote",
+  "codeBlock",
+];
+
+/**
+ * Configuration for the turn into dropdown functionality
+ */
+export interface UseTurnIntoDropdownConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null;
+  /**
+   * Whether the dropdown should hide when no options are available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean;
+  /**
+   * Which block types to show in the dropdown
+   * @default ["paragraph", "heading", "bulletList", "orderedList", "taskList", "blockquote", "codeBlock"]
+   */
+  blockTypes?: string[];
+  /**
+   * Callback function called when the dropdown state changes.
+   */
+  onOpenChange?: (isOpen: boolean) => void;
+}
+
+export const blockTypeOptions = [
+  {
+    type: "paragraph",
+    label: "正文",
+    isActive: (editor: Editor) =>
+      editor.isActive("paragraph") &&
+      !editor.isActive("heading") &&
+      !editor.isActive("bulletList") &&
+      !editor.isActive("orderedList") &&
+      !editor.isActive("taskList") &&
+      !editor.isActive("blockquote") &&
+      !editor.isActive("codeBlock"),
+  },
+  {
+    type: "heading",
+    label: "一级标题",
+    level: 1 as Level,
+    isActive: (editor: Editor) => editor.isActive("heading", { level: 1 }),
+  },
+  {
+    type: "heading",
+    label: "二级标题",
+    level: 2 as Level,
+    isActive: (editor: Editor) => editor.isActive("heading", { level: 2 }),
+  },
+  {
+    type: "heading",
+    label: "三级标题",
+    level: 3 as Level,
+    isActive: (editor: Editor) => editor.isActive("heading", { level: 3 }),
+  },
+  {
+    type: "bulletList",
+    label: "无序列表",
+    isActive: (editor: Editor) => editor.isActive("bulletList"),
+  },
+  {
+    type: "orderedList",
+    label: "有序列表",
+    isActive: (editor: Editor) => editor.isActive("orderedList"),
+  },
+  {
+    type: "taskList",
+    label: "任务列表",
+    isActive: (editor: Editor) => editor.isActive("taskList"),
+  },
+  {
+    type: "blockquote",
+    label: "引用",
+    isActive: (editor: Editor) => editor.isActive("blockquote"),
+  },
+  {
+    type: "codeBlock",
+    label: "代码块",
+    isActive: (editor: Editor) => editor.isActive("codeBlock"),
+  },
+];
+
+/**
+ * Checks if turn into functionality can be used in the current editor state
+ */
+export function canTurnInto(editor: Editor | null, allowedBlockTypes?: string[]): boolean {
+  if (!editor || !editor.isEditable) return false;
+
+  const blockTypes = allowedBlockTypes || TURN_INTO_BLOCKS;
+  const { selection } = editor.state;
+
+  if (selection instanceof NodeSelection) {
+    const nodeType = selection.node.type.name;
+    return blockTypes.includes(nodeType);
+  }
+
+  const { $anchor } = selection;
+  const nodeType = $anchor.parent.type.name;
+  return blockTypes.includes(nodeType);
+}
+
+/**
+ * Gets filtered block type options based on available types
+ */
+export function getFilteredBlockTypeOptions(blockTypes?: string[]) {
+  if (!blockTypes) return blockTypeOptions;
+
+  return blockTypeOptions.filter((option) => {
+    return blockTypes.includes(option.type);
+  });
+}
+
+/**
+ * Gets the currently active block type from the available options
+ */
+export function getActiveBlockType(editor: Editor | null, blockTypes?: string[]) {
+  if (!editor) return getFilteredBlockTypeOptions(blockTypes)[0];
+
+  const filteredOptions = getFilteredBlockTypeOptions(blockTypes);
+  const activeOption = filteredOptions.find((option) => option.isActive(editor));
+  return activeOption || filteredOptions[0];
+}
+
+/**
+ * Determines if the turn into dropdown should be visible
+ */
+export function shouldShowTurnInto(params: {
+  editor: Editor | null;
+  hideWhenUnavailable: boolean;
+  blockTypes?: string[];
+}): boolean {
+  const { editor, hideWhenUnavailable, blockTypes } = params;
+
+  if (!editor) {
+    return false;
+  }
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canTurnInto(editor, blockTypes);
+  }
+
+  return true;
+}
+
+/**
+ * Custom hook that provides turn into dropdown functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MyTurnIntoDropdown() {
+ *   const {
+ *     isVisible,
+ *     canToggle,
+ *     activeBlockType,
+ *     handleOpenChange,
+ *     label,
+ *     Icon,
+ *   } = useTurnIntoDropdown()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <DropdownMenu onOpenChange={handleOpenChange}>
+ *       // dropdown content
+ *     </DropdownMenu>
+ *   )
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedTurnIntoDropdown() {
+ *   const {
+ *     isVisible,
+ *     activeBlockType,
+ *   } = useTurnIntoDropdown({
+ *     editor: myEditor,
+ *     blockTypes: ["paragraph", "heading", "bulletList"],
+ *     hideWhenUnavailable: true,
+ *     onOpenChange: (isOpen) => console.log("Dropdown toggled", isOpen),
+ *   })
+ *
+ *   // component implementation
+ * }
+ * ```
+ */
+export function useTurnIntoDropdown(config?: UseTurnIntoDropdownConfig) {
+  const { editor: providedEditor, hideWhenUnavailable = false, blockTypes, onOpenChange } = config || {};
+
+  const { editor } = useTiptapEditor(providedEditor);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isVisible, setIsVisible] = useState(true);
+
+  const canToggle = canTurnInto(editor, blockTypes);
+  const activeBlockType = getActiveBlockType(editor, blockTypes);
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (!editor || !canToggle) return;
+      setIsOpen(open);
+      onOpenChange?.(open);
+    },
+    [canToggle, editor, onOpenChange],
+  );
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(
+        shouldShowTurnInto({
+          editor,
+          hideWhenUnavailable,
+          blockTypes,
+        }),
+      );
+    };
+
+    handleSelectionUpdate();
+    editor.on("selectionUpdate", handleSelectionUpdate);
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable, blockTypes]);
+
+  return {
+    isVisible,
+    canToggle,
+    isOpen,
+    setIsOpen,
+    activeBlockType,
+    handleOpenChange,
+    filteredOptions: getFilteredBlockTypeOptions(blockTypes),
+    label: `Turn into (current: ${activeBlockType?.label || "Text"})`,
+    Icon: ChevronDownIcon,
+  };
+}

package/src/components/tiptap-ui/undo-redo-button/index.tsx

@@ -0,0 +1,2 @@
+export * from "./undo-redo-button"
+export * from "./use-undo-redo"

package/src/components/tiptap-ui/undo-redo-button/undo-redo-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 {
+  UndoRedoAction,
+  UseUndoRedoConfig,
+} from "./"
+import {
+  UNDO_REDO_SHORTCUT_KEYS,
+  useUndoRedo,
+} 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 UndoRedoButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseUndoRedoConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function HistoryShortcutBadge({
+  action,
+  shortcutKeys = UNDO_REDO_SHORTCUT_KEYS[action],
+}: {
+  action: UndoRedoAction
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for triggering undo/redo actions in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useHistory` hook instead.
+ */
+export const UndoRedoButton = forwardRef<
+  HTMLButtonElement,
+  UndoRedoButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      action,
+      text,
+      hideWhenUnavailable = false,
+      onExecuted,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const { isVisible, handleAction, label, canExecute, Icon, shortcutKeys } =
+      useUndoRedo({
+        editor,
+        action,
+        hideWhenUnavailable,
+        onExecuted,
+      })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleAction()
+      },
+      [handleAction, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        disabled={!canExecute}
+        data-style="ghost"
+        data-disabled={!canExecute}
+        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>}
+            {showShortcut && (
+              <HistoryShortcutBadge
+                action={action}
+                shortcutKeys={shortcutKeys}
+              />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+UndoRedoButton.displayName = "UndoRedoButton"

package/src/components/tiptap-ui/undo-redo-button/use-undo-redo.ts

@@ -0,0 +1,184 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import { type Editor } from "@tiptap/react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+
+// --- Lib ---
+import { isNodeTypeSelected } from "../../../lib/tiptap-utils"
+
+// --- Icons ---
+import { Redo2Icon } from "../../tiptap-icons/redo2-icon"
+import { Undo2Icon } from "../../tiptap-icons/undo2-icon"
+
+export type UndoRedoAction = "undo" | "redo"
+
+/**
+ * Configuration for the history functionality
+ */
+export interface UseUndoRedoConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * The history action to perform (undo or redo).
+   */
+  action: UndoRedoAction
+  /**
+   * Whether the button should hide when action is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful action execution.
+   */
+  onExecuted?: () => void
+}
+
+export const UNDO_REDO_SHORTCUT_KEYS: Record<UndoRedoAction, string> = {
+  undo: "mod+z",
+  redo: "mod+shift+z",
+}
+
+export const historyActionLabels: Record<UndoRedoAction, string> = {
+  undo: "Undo",
+  redo: "Redo",
+}
+
+export const historyIcons = {
+  undo: Undo2Icon,
+  redo: Redo2Icon,
+}
+
+/**
+ * Checks if a history action can be executed
+ */
+export function canExecuteUndoRedoAction(
+  editor: Editor | null,
+  action: UndoRedoAction
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (isNodeTypeSelected(editor, ["image"])) return false
+
+  return action === "undo" ? editor.can().undo() : editor.can().redo()
+}
+
+/**
+ * Executes a history action on the editor
+ */
+export function executeUndoRedoAction(
+  editor: Editor | null,
+  action: UndoRedoAction
+): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canExecuteUndoRedoAction(editor, action)) return false
+
+  const chain = editor.chain().focus()
+  return action === "undo" ? chain.undo().run() : chain.redo().run()
+}
+
+/**
+ * Determines if the history button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+  action: UndoRedoAction
+}): boolean {
+  const { editor, hideWhenUnavailable, action } = props
+
+  if (!editor || !editor.isEditable) return false
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canExecuteUndoRedoAction(editor, action)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides history functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MySimpleUndoButton() {
+ *   const { isVisible, handleAction } = useHistory({ action: "undo" })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleAction}>Undo</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedRedoButton() {
+ *   const { isVisible, handleAction, label } = useHistory({
+ *     editor: myEditor,
+ *     action: "redo",
+ *     hideWhenUnavailable: true,
+ *     onExecuted: () => console.log('Action executed!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleAction}
+ *       aria-label={label}
+ *     >
+ *       Redo
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useUndoRedo(config: UseUndoRedoConfig) {
+  const {
+    editor: providedEditor,
+    action,
+    hideWhenUnavailable = false,
+    onExecuted,
+  } = config
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+  const canExecute = canExecuteUndoRedoAction(editor, action)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable, action }))
+    }
+
+    handleUpdate()
+
+    editor.on("transaction", handleUpdate)
+
+    return () => {
+      editor.off("transaction", handleUpdate)
+    }
+  }, [editor, hideWhenUnavailable, action])
+
+  const handleAction = useCallback(() => {
+    if (!editor) return false
+
+    const success = executeUndoRedoAction(editor, action)
+    if (success) {
+      onExecuted?.()
+    }
+    return success
+  }, [editor, action, onExecuted])
+
+  return {
+    isVisible,
+    handleAction,
+    canExecute,
+    label: historyActionLabels[action],
+    shortcutKeys: UNDO_REDO_SHORTCUT_KEYS[action],
+    Icon: historyIcons[action],
+  }
+}

package/src/components/tiptap-ui-primitive/avatar/avatar.css

@@ -0,0 +1,83 @@
+@import "tailwindcss";
+
+.tiptap-avatar {
+  @apply relative inline-flex items-center justify-center align-middle overflow-hidden select-none flex-shrink-0;
+}
+
+.tiptap-avatar[data-size="default"] {
+  @apply w-6 h-6;
+}
+
+.tiptap-avatar[data-size="default"] .tiptap-avatar-fallback {
+  @apply text-[0.5rem];
+}
+
+.tiptap-avatar[data-size="sm"] {
+  @apply w-5 h-5;
+}
+
+.tiptap-avatar[data-size="sm"] .tiptap-avatar-fallback {
+  @apply text-[0.4375rem];
+}
+
+.tiptap-avatar[data-size="lg"] {
+  @apply w-7 h-7;
+}
+
+.tiptap-avatar[data-size="lg"] .tiptap-avatar-fallback {
+  @apply text-[0.625rem];
+}
+
+.tiptap-avatar[data-size="xl"] {
+  @apply w-9 h-9;
+}
+
+.tiptap-avatar[data-size="xl"] .tiptap-avatar-fallback {
+  @apply text-xs;
+}
+
+.tiptap-avatar-item {
+  @apply relative w-full h-full flex items-center justify-center leading-none bg-gray-200 rounded-full;
+}
+
+.dark .tiptap-avatar-item {
+  @apply bg-gray-700;
+}
+
+.tiptap-avatar-image {
+  @apply w-full h-full object-cover rounded-full;
+}
+
+.tiptap-avatar-fallback {
+  @apply relative flex items-center justify-center w-full h-full text-gray-600 rounded-full font-semibold;
+}
+
+.dark .tiptap-avatar-fallback {
+  @apply text-gray-400;
+}
+
+.tiptap-avatar-bg {
+  @apply absolute inset-0 bg-gray-200 rounded-full;
+}
+
+.dark .tiptap-avatar-bg {
+  @apply bg-gray-700;
+}
+
+.tiptap-avatar-group {
+  @apply inline-flex items-center;
+}
+
+.tiptap-avatar-group .tiptap-avatar-image,
+.tiptap-avatar-group .tiptap-avatar-fallback {
+  @apply border-2 border-white;
+}
+
+.dark .tiptap-avatar-group .tiptap-avatar-image,
+.dark .tiptap-avatar-group .tiptap-avatar-fallback {
+  @apply border-gray-800;
+}
+
+.tiptap-avatar-group .tiptap-avatar:not(:first-child) {
+  @apply -ml-2;
+}