@meta-1/editor 0.0.28 → 1.0.0

package/src/components/tiptap-ui/link-popover/link-popover.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import type { Editor } from "@tiptap/react";
+import { useTranslation } from "react-i18next";
+
+// --- Hooks ---
+import { useIsBreakpoint } from "../../../hooks/use-is-breakpoint";
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor";
+// --- Icons ---
+import { CornerDownLeftIcon } from "../../tiptap-icons/corner-down-left-icon";
+import { ExternalLinkIcon } from "../../tiptap-icons/external-link-icon";
+import { LinkIcon } from "../../tiptap-icons/link-icon";
+import { TrashIcon } from "../../tiptap-icons/trash-icon";
+// --- UI Primitives ---
+import type { ButtonProps } from "../../tiptap-ui-primitive/button";
+import { Button, ButtonGroup } from "../../tiptap-ui-primitive/button";
+import { Card, CardBody, CardItemGroup } from "../../tiptap-ui-primitive/card";
+import { Input, InputGroup } from "../../tiptap-ui-primitive/input";
+import { Popover, PopoverContent, PopoverTrigger } from "../../tiptap-ui-primitive/popover";
+import { Separator } from "../../tiptap-ui-primitive/separator";
+// --- Tiptap UI ---
+import type { UseLinkPopoverConfig } from "./";
+import { useLinkPopover } from "./";
+
+export interface LinkMainProps {
+  /**
+   * The URL to set for the link.
+   */
+  url: string;
+  /**
+   * Function to update the URL state.
+   */
+  setUrl: React.Dispatch<React.SetStateAction<string | null>>;
+  /**
+   * Function to set the link in the editor.
+   */
+  setLink: () => void;
+  /**
+   * Function to remove the link from the editor.
+   */
+  removeLink: () => void;
+  /**
+   * Function to open the link.
+   */
+  openLink: () => void;
+  /**
+   * Whether the link is currently active in the editor.
+   */
+  isActive: boolean;
+}
+
+export interface LinkPopoverProps extends Omit<ButtonProps, "type">, UseLinkPopoverConfig {
+  /**
+   * Callback for when the popover opens or closes.
+   */
+  onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * Whether to automatically open the popover when a link is active.
+   * @default true
+   */
+  autoOpenOnLinkActive?: boolean;
+}
+
+/**
+ * Link button component for triggering the link popover
+ */
+export const LinkButton = forwardRef<HTMLButtonElement, ButtonProps>(({ className, children, ...props }, ref) => {
+  const { t } = useTranslation();
+  return (
+    <Button
+      aria-label={t("链接")}
+      className={className}
+      data-style="ghost"
+      ref={ref}
+      role="button"
+      tabIndex={-1}
+      tooltip={t("链接")}
+      type="button"
+      {...props}
+    >
+      {children || <LinkIcon className="tiptap-button-icon" />}
+    </Button>
+  );
+});
+
+LinkButton.displayName = "LinkButton";
+
+/**
+ * Main content component for the link popover
+ */
+const LinkMain: React.FC<LinkMainProps> = ({ url, setUrl, setLink, removeLink, openLink, isActive }) => {
+  const isMobile = useIsBreakpoint();
+  const { t } = useTranslation();
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      setLink();
+    }
+  };
+
+  return (
+    <Card
+      style={{
+        ...(isMobile ? { boxShadow: "none", border: 0 } : {}),
+      }}
+    >
+      <CardBody
+        style={{
+          ...(isMobile ? { padding: 0 } : {}),
+        }}
+      >
+        <CardItemGroup orientation="horizontal">
+          <InputGroup>
+            <Input
+              autoCapitalize="off"
+              autoComplete="off"
+              autoCorrect="off"
+              autoFocus
+              onChange={(e) => setUrl(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={t("粘贴链接...")}
+              type="url"
+              value={url}
+            />
+          </InputGroup>
+
+          <ButtonGroup orientation="horizontal">
+            <Button data-style="ghost" disabled={!url && !isActive} onClick={setLink} title={t("应用链接")} type="button">
+              <CornerDownLeftIcon className="tiptap-button-icon" />
+            </Button>
+          </ButtonGroup>
+
+          <Separator />
+
+          <ButtonGroup orientation="horizontal">
+            <Button
+              data-style="ghost"
+              disabled={!url && !isActive}
+              onClick={openLink}
+              title={t("在新窗口打开")}
+              type="button"
+            >
+              <ExternalLinkIcon className="tiptap-button-icon" />
+            </Button>
+
+            <Button
+              data-style="ghost"
+              disabled={!url && !isActive}
+              onClick={removeLink}
+              title={t("删除链接")}
+              type="button"
+            >
+              <TrashIcon className="tiptap-button-icon" />
+            </Button>
+          </ButtonGroup>
+        </CardItemGroup>
+      </CardBody>
+    </Card>
+  );
+};
+
+/**
+ * Link content component for standalone use
+ */
+export const LinkContent: React.FC<{
+  editor?: Editor | null;
+}> = ({ editor }) => {
+  const linkPopover = useLinkPopover({
+    editor,
+  });
+
+  return <LinkMain {...linkPopover} />;
+};
+
+/**
+ * Link popover component for Tiptap editors.
+ *
+ * For custom popover implementations, use the `useLinkPopover` hook instead.
+ */
+export const LinkPopover = forwardRef<HTMLButtonElement, LinkPopoverProps>(
+  (
+    {
+      editor: providedEditor,
+      hideWhenUnavailable = false,
+      onSetLink,
+      onOpenChange,
+      autoOpenOnLinkActive = true,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref,
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor);
+    const [isOpen, setIsOpen] = useState(false);
+
+    const { isVisible, canSet, isActive, url, setUrl, setLink, removeLink, openLink, label, Icon } = useLinkPopover({
+      editor,
+      hideWhenUnavailable,
+      onSetLink,
+    });
+
+    const handleOnOpenChange = useCallback(
+      (nextIsOpen: boolean) => {
+        setIsOpen(nextIsOpen);
+        onOpenChange?.(nextIsOpen);
+      },
+      [onOpenChange],
+    );
+
+    const handleSetLink = useCallback(() => {
+      setLink();
+      setIsOpen(false);
+    }, [setLink]);
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        setIsOpen(!isOpen);
+      },
+      [onClick, isOpen],
+    );
+
+    useEffect(() => {
+      if (autoOpenOnLinkActive && isActive) {
+        setIsOpen(true);
+      }
+    }, [autoOpenOnLinkActive, isActive]);
+
+    if (!isVisible) {
+      return null;
+    }
+
+    return (
+      <Popover onOpenChange={handleOnOpenChange} open={isOpen}>
+        <PopoverTrigger asChild>
+          <LinkButton
+            aria-label={label}
+            aria-pressed={isActive}
+            data-active-state={isActive ? "on" : "off"}
+            data-disabled={!canSet}
+            disabled={!canSet}
+            onClick={handleClick}
+            {...buttonProps}
+            ref={ref}
+          >
+            {children ?? <Icon className="tiptap-button-icon" />}
+          </LinkButton>
+        </PopoverTrigger>
+
+        <PopoverContent>
+          <LinkMain
+            isActive={isActive}
+            openLink={openLink}
+            removeLink={removeLink}
+            setLink={handleSetLink}
+            setUrl={setUrl}
+            url={url}
+          />
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+
+LinkPopover.displayName = "LinkPopover";
+
+export default LinkPopover;

package/src/components/tiptap-ui/link-popover/use-link-popover.ts

@@ -0,0 +1,286 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import type { Editor } from "@tiptap/react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+
+// --- Icons ---
+import { LinkIcon } from "../../tiptap-icons/link-icon"
+
+// --- Lib ---
+import {
+  isMarkInSchema,
+  isNodeTypeSelected,
+  sanitizeUrl,
+} from "../../../lib/tiptap-utils"
+
+/**
+ * Configuration for the link popover functionality
+ */
+export interface UseLinkPopoverConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Whether to hide the link popover when not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called when the link is set.
+   */
+  onSetLink?: () => void
+}
+
+/**
+ * Configuration for the link handler functionality
+ */
+export interface LinkHandlerProps {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor: Editor | null
+  /**
+   * Callback function called when the link is set.
+   */
+  onSetLink?: () => void
+}
+
+/**
+ * Checks if a link can be set in the current editor state
+ */
+export function canSetLink(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+
+  // The third argument 'true' checks whether the current selection is inside an image caption, and prevents setting a link there
+  // If the selection is inside an image caption, we can't set a link
+  if (isNodeTypeSelected(editor, ["image"], true)) return false
+  return editor.can().setMark("link")
+}
+
+/**
+ * Checks if a link is currently active in the editor
+ */
+export function isLinkActive(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  return editor.isActive("link")
+}
+
+/**
+ * Determines if the link button should be shown
+ */
+export function shouldShowLinkButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, hideWhenUnavailable } = props
+
+  const linkInSchema = isMarkInSchema("link", editor)
+
+  if (!linkInSchema || !editor) {
+    return false
+  }
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canSetLink(editor)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook for handling link operations in a Tiptap editor
+ */
+export function useLinkHandler(props: LinkHandlerProps) {
+  const { editor, onSetLink } = props
+  const [url, setUrl] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!editor) return
+
+    // Get URL immediately on mount
+    const { href } = editor.getAttributes("link")
+
+    if (isLinkActive(editor) && url === null) {
+      setUrl(href || "")
+    }
+  }, [editor, url])
+
+  useEffect(() => {
+    if (!editor) return
+
+    const updateLinkState = () => {
+      const { href } = editor.getAttributes("link")
+      setUrl(href || "")
+    }
+
+    editor.on("selectionUpdate", updateLinkState)
+    return () => {
+      editor.off("selectionUpdate", updateLinkState)
+    }
+  }, [editor])
+
+  const setLink = useCallback(() => {
+    if (!url || !editor) return
+
+    const { selection } = editor.state
+    const isEmpty = selection.empty
+
+    let chain = editor.chain().focus()
+
+    chain = chain.extendMarkRange("link").setLink({ href: url })
+
+    if (isEmpty) {
+      chain = chain.insertContent({ type: "text", text: url })
+    }
+
+    chain.run()
+
+    setUrl(null)
+
+    onSetLink?.()
+  }, [editor, onSetLink, url])
+
+  const removeLink = useCallback(() => {
+    if (!editor) return
+    editor
+      .chain()
+      .focus()
+      .extendMarkRange("link")
+      .unsetLink()
+      .setMeta("preventAutolink", true)
+      .run()
+    setUrl("")
+  }, [editor])
+
+  const openLink = useCallback(
+    (target: string = "_blank", features: string = "noopener,noreferrer") => {
+      if (!url) return
+
+      const safeUrl = sanitizeUrl(url, window.location.href)
+      if (safeUrl !== "#") {
+        window.open(safeUrl, target, features)
+      }
+    },
+    [url]
+  )
+
+  return {
+    url: url || "",
+    setUrl,
+    setLink,
+    removeLink,
+    openLink,
+  }
+}
+
+/**
+ * Custom hook for link popover state management
+ */
+export function useLinkState(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+}) {
+  const { editor, hideWhenUnavailable = false } = props
+
+  const canSet = canSetLink(editor)
+  const isActive = isLinkActive(editor)
+
+  const [isVisible, setIsVisible] = useState(true)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(
+        shouldShowLinkButton({
+          editor,
+          hideWhenUnavailable,
+        })
+      )
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable])
+
+  return {
+    isVisible,
+    canSet,
+    isActive,
+  }
+}
+
+/**
+ * Main hook that provides link popover functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage
+ * function MyLinkButton() {
+ *   const { isVisible, canSet, isActive, Icon, label } = useLinkPopover()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button disabled={!canSet}>Link</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedLinkButton() {
+ *   const { isVisible, canSet, isActive, Icon, label } = useLinkPopover({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onSetLink: () => console.log('Link set!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       disabled={!canSet}
+ *       aria-label={label}
+ *       aria-pressed={isActive}
+ *     >
+ *       <Icon />
+ *       {label}
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useLinkPopover(config?: UseLinkPopoverConfig) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onSetLink,
+  } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+
+  const { isVisible, canSet, isActive } = useLinkState({
+    editor,
+    hideWhenUnavailable,
+  })
+
+  const linkHandler = useLinkHandler({
+    editor,
+    onSetLink,
+  })
+
+  return {
+    isVisible,
+    canSet,
+    isActive,
+    label: "Link",
+    Icon: LinkIcon,
+    ...linkHandler,
+  }
+}

package/src/components/tiptap-ui/list-button/index.tsx

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

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

@@ -0,0 +1,123 @@
+"use client"
+
+import { forwardRef, useCallback } from "react"
+
+// --- Lib ---
+import { parseShortcutKeys } from "../../../lib/tiptap-utils"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "../../tiptap-ui-primitive/button"
+import { Button } from "../../tiptap-ui-primitive/button"
+import { Badge } from "../../tiptap-ui-primitive/badge"
+
+// --- Tiptap UI ---
+import type { ListType, UseListConfig } from "./"
+import { LIST_SHORTCUT_KEYS, useList } from "./"
+
+export interface ListButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseListConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function ListShortcutBadge({
+  type,
+  shortcutKeys = LIST_SHORTCUT_KEYS[type],
+}: {
+  type: ListType
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for toggling lists in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useList` hook instead.
+ */
+export const ListButton = forwardRef<HTMLButtonElement, ListButtonProps>(
+  (
+    {
+      editor: providedEditor,
+      type,
+      text,
+      hideWhenUnavailable = false,
+      onToggled,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      canToggle,
+      isActive,
+      handleToggle,
+      label,
+      shortcutKeys,
+      Icon,
+    } = useList({
+      editor,
+      type,
+      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={label}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <ListShortcutBadge type={type} shortcutKeys={shortcutKeys} />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+ListButton.displayName = "ListButton"