@meta-1/editor 0.0.29 → 1.0.0

package/src/components/tiptap-ui/text-button/text-button.tsx

@@ -0,0 +1,117 @@
+"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 { UseTextConfig } from "./"
+import { TEXT_SHORTCUT_KEY, useText } 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 TextButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseTextConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function TextShortcutBadge({
+  shortcutKeys = TEXT_SHORTCUT_KEY,
+}: {
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for converting to text/paragraph in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useText` hook instead.
+ */
+export const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>(
+  (
+    {
+      editor: providedEditor,
+      text,
+      hideWhenUnavailable = false,
+      onToggled,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      canToggle,
+      isActive,
+      handleToggle,
+      label,
+      shortcutKeys,
+      Icon,
+    } = useText({
+      editor,
+      hideWhenUnavailable,
+      onToggled,
+    })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleToggle()
+      },
+      [handleToggle, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        data-active-state={isActive ? "on" : "off"}
+        role="button"
+        tabIndex={-1}
+        disabled={!canToggle}
+        data-disabled={!canToggle}
+        aria-label={label}
+        aria-pressed={isActive}
+        tooltip="Text"
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && <TextShortcutBadge shortcutKeys={shortcutKeys} />}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+TextButton.displayName = "TextButton"

package/src/components/tiptap-ui/text-button/use-text.ts

@@ -0,0 +1,264 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import { type Editor } from "@tiptap/react"
+import { useHotkeys } from "react-hotkeys-hook"
+import { NodeSelection, TextSelection } from "@tiptap/pm/state"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+import { useIsBreakpoint } from "../../../hooks/use-is-breakpoint"
+
+// --- Icons ---
+import { TypeIcon } from "../../tiptap-icons/type-icon"
+
+// --- Lib ---
+import {
+  findNodePosition,
+  isNodeInSchema,
+  isValidPosition,
+  selectionWithinConvertibleTypes,
+} from "../../../lib/tiptap-utils"
+
+export const TEXT_SHORTCUT_KEY = "mod+alt+0"
+
+/**
+ * Configuration for the text/paragraph functionality
+ */
+export interface UseTextConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Whether the button should hide when text conversion is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful conversion.
+   */
+  onToggled?: () => void
+}
+
+/**
+ * Returns whether we can toggle/turn the current selection into a paragraph.
+ * - When `turnInto === false`, it just checks the direct ability to set paragraph on the selection.
+ * - When `turnInto === true`, it additionally requires the selection to be within convertible types.
+ */
+export function canToggleText(
+  editor: Editor | null,
+  turnInto: boolean = true
+): boolean {
+  if (!editor) return false
+  if (!editor.schema.nodes.paragraph) return false
+
+  if (!turnInto) {
+    return editor.can().setNode("paragraph")
+  }
+
+  // Ensure selection is in nodes we're allowed to convert
+  if (
+    !selectionWithinConvertibleTypes(editor, [
+      "paragraph",
+      "heading",
+      "bulletList",
+      "orderedList",
+      "taskList",
+      "blockquote",
+      "codeBlock",
+    ])
+  )
+    return false
+
+  // Either we can set paragraph directly on the selection,
+  // or we can clear formatting/nodes to arrive at a paragraph.
+  return editor.can().setNode("paragraph") || editor.can().clearNodes()
+}
+
+/**
+ * Checks if paragraph is currently active
+ */
+export function isParagraphActive(editor: Editor | null): boolean {
+  if (!editor) return false
+  return editor.isActive("paragraph")
+}
+
+/**
+ * Converts the current selection or node to paragraph
+ */
+export function toggleParagraph(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canToggleText(editor)) return false
+
+  try {
+    const view = editor.view
+    let state = view.state
+    let tr = state.tr
+
+    // No selection, find the the cursor position
+    if (state.selection.empty || state.selection instanceof TextSelection) {
+      const pos = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1),
+      })?.pos
+      if (!isValidPosition(pos)) return false
+
+      tr = tr.setSelection(NodeSelection.create(state.doc, pos))
+      view.dispatch(tr)
+      state = view.state
+    }
+
+    const selection = state.selection
+    let chain = editor.chain().focus()
+
+    // Handle NodeSelection
+    if (selection instanceof NodeSelection) {
+      const firstChild = selection.node.firstChild?.firstChild
+      const lastChild = selection.node.lastChild?.lastChild
+
+      const from = firstChild
+        ? selection.from + firstChild.nodeSize
+        : selection.from + 1
+
+      const to = lastChild
+        ? selection.to - lastChild.nodeSize
+        : selection.to - 1
+
+      const resolvedFrom = state.doc.resolve(from)
+      const resolvedTo = state.doc.resolve(to)
+
+      chain = chain
+        .setTextSelection(TextSelection.between(resolvedFrom, resolvedTo))
+        .clearNodes()
+    }
+
+    if (!editor.isActive("paragraph")) {
+      chain.setNode("paragraph").run()
+    }
+
+    editor.chain().focus().selectTextblockEnd().run()
+
+    return true
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Determines if the text button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, hideWhenUnavailable } = props
+
+  if (!editor || !editor.isEditable) return false
+  if (!isNodeInSchema("paragraph", editor)) return false
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggleText(editor)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides text/paragraph functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleTextButton() {
+ *   const { isVisible, handleToggle, isActive } = useText()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleToggle}>Text</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedTextButton() {
+ *   const { isVisible, handleToggle, label, isActive } = useText({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onToggled: () => console.log('Text converted!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleToggle}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       Convert to Text
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useText(config?: UseTextConfig) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onToggled,
+  } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const isMobile = useIsBreakpoint()
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+  const canToggle = canToggleText(editor)
+  const isActive = isParagraphActive(editor)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable])
+
+  const handleToggle = useCallback(() => {
+    if (!editor) return false
+
+    const success = toggleParagraph(editor)
+    if (success) {
+      onToggled?.()
+    }
+    return success
+  }, [editor, onToggled])
+
+  useHotkeys(
+    TEXT_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault()
+      handleToggle()
+    },
+    {
+      enabled: isVisible && canToggle,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    }
+  )
+
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle,
+    label: "Text",
+    shortcutKeys: TEXT_SHORTCUT_KEY,
+    Icon: TypeIcon,
+  }
+}

package/src/components/tiptap-ui/turn-into-dropdown/index.tsx

@@ -0,0 +1,2 @@
+export * from "./turn-into-dropdown"
+export * from "./use-turn-into-dropdown"

package/src/components/tiptap-ui/turn-into-dropdown/turn-into-dropdown.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { forwardRef } from "react";
+import { useTranslation } from "react-i18next";
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor";
+// --- UI Primitives ---
+import type { ButtonProps } from "../../tiptap-ui-primitive/button";
+import { Button, ButtonGroup } from "../../tiptap-ui-primitive/button";
+import { Card, CardBody, CardGroupLabel, CardItemGroup } from "../../tiptap-ui-primitive/card";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../tiptap-ui-primitive/dropdown-menu";
+import { BlockquoteButton } from "../blockquote-button";
+import { CodeBlockButton } from "../code-block-button";
+import { HeadingButton } from "../heading-button";
+import { ListButton } from "../list-button";
+// --- Tiptap UI Components ---
+import { TextButton } from "../text-button";
+// --- Tiptap UI ---
+import type { UseTurnIntoDropdownConfig } from "./";
+import { getFilteredBlockTypeOptions, useTurnIntoDropdown } from "./";
+
+export interface TurnIntoDropdownContentProps {
+  blockTypes?: string[];
+  useCardLayout?: boolean;
+}
+
+export const TurnIntoDropdownContent: React.FC<TurnIntoDropdownContentProps> = ({
+  blockTypes,
+  useCardLayout = true,
+}) => {
+  const { t } = useTranslation();
+  const filteredOptions = getFilteredBlockTypeOptions(blockTypes);
+
+  const renderButtons = () => (
+    <ButtonGroup>
+      {filteredOptions.map((option, index) => renderBlockTypeButton(option, `${option.type}-${option.level ?? index}`))}
+    </ButtonGroup>
+  );
+
+  if (!useCardLayout) return renderButtons();
+
+  return (
+    <Card>
+      <CardBody>
+        <CardItemGroup>
+          <CardGroupLabel>{t("转换为")}</CardGroupLabel>
+          {renderButtons()}
+        </CardItemGroup>
+      </CardBody>
+    </Card>
+  );
+};
+
+function renderBlockTypeButton(option: ReturnType<typeof getFilteredBlockTypeOptions>[0], key: string) {
+  const { t } = useTranslation();
+  const label = t(option.label);
+  switch (option.type) {
+    case "paragraph":
+      return (
+        <DropdownMenuItem asChild key={key}>
+          <TextButton showTooltip={false} text={label} />
+        </DropdownMenuItem>
+      );
+
+    case "heading":
+      if (!option.level) {
+        return null;
+      }
+
+      return (
+        <DropdownMenuItem asChild key={key}>
+          <HeadingButton level={option.level || 1} showTooltip={false} text={label} />
+        </DropdownMenuItem>
+      );
+
+    case "bulletList":
+      return (
+        <DropdownMenuItem asChild key={key}>
+          <ListButton showTooltip={false} text={label} type="bulletList" />
+        </DropdownMenuItem>
+      );
+
+    case "orderedList":
+      return (
+        <DropdownMenuItem asChild key={key}>
+          <ListButton showTooltip={false} text={label} type="orderedList" />
+        </DropdownMenuItem>
+      );
+
+    case "taskList":
+      return (
+        <DropdownMenuItem asChild key={key}>
+          <ListButton showTooltip={false} text={label} type="taskList" />
+        </DropdownMenuItem>
+      );
+
+    case "blockquote":
+      return (
+        <DropdownMenuItem asChild key={key}>
+          <BlockquoteButton showTooltip={false} text={label} />
+        </DropdownMenuItem>
+      );
+
+    case "codeBlock":
+      return (
+        <DropdownMenuItem asChild key={key}>
+          <CodeBlockButton showTooltip={false} text={label} />
+        </DropdownMenuItem>
+      );
+
+    default:
+      return null;
+  }
+}
+
+export interface TurnIntoDropdownProps extends Omit<ButtonProps, "type">, UseTurnIntoDropdownConfig {
+  /**
+   * Whether to use card layout for the dropdown content
+   * @default true
+   */
+  useCardLayout?: boolean;
+}
+
+/**
+ * Dropdown component for transforming block types in a Tiptap editor.
+ * For custom dropdown implementations, use the `useTurnIntoDropdown` hook instead.
+ */
+export const TurnIntoDropdown = forwardRef<HTMLButtonElement, TurnIntoDropdownProps>(
+  (
+    {
+      editor: providedEditor,
+      hideWhenUnavailable = false,
+      blockTypes,
+      useCardLayout = true,
+      onOpenChange,
+      children,
+      ...buttonProps
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation();
+    const { editor } = useTiptapEditor(providedEditor);
+    const { isVisible, canToggle, isOpen, activeBlockType, handleOpenChange, label, Icon } = useTurnIntoDropdown({
+      editor,
+      hideWhenUnavailable,
+      blockTypes,
+      onOpenChange,
+    });
+
+    if (!isVisible) {
+      return null;
+    }
+
+    return (
+      <DropdownMenu onOpenChange={handleOpenChange} open={isOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            aria-label={label}
+            data-disabled={!canToggle}
+            data-style="ghost"
+            disabled={!canToggle}
+            role="button"
+            tabIndex={-1}
+            tooltip={t("转换为")}
+            type="button"
+            {...buttonProps}
+            ref={ref}
+          >
+            {children ?? (
+              <>
+                <span className="tiptap-button-text">{t(activeBlockType?.label || "Text")}</span>
+                <Icon className="tiptap-button-dropdown-small" />
+              </>
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent align="start">
+          <TurnIntoDropdownContent blockTypes={blockTypes} useCardLayout={useCardLayout} />
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  },
+);
+
+TurnIntoDropdown.displayName = "TurnIntoDropdown";