@meta-1/editor 0.0.29 → 1.0.0

package/src/components/tiptap-ui/copy-anchor-link-button/use-copy-anchor-link.ts

@@ -0,0 +1,252 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { Node } from "@tiptap/pm/model";
+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";
+// --- Utils ---
+import { getAnchorNodeAndPos, getEditorExtension } from "../../../lib/tiptap-advanced-utils";
+// --- Icons ---
+import { LinkIcon } from "../../tiptap-icons/link-icon";
+
+export const COPY_ANCHOR_LINK_SHORTCUT_KEY = "mod+ctrl+l";
+
+/**
+ * Configuration for the copy anchor link functionality
+ */
+export interface UseCopyAnchorLinkConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null;
+  /**
+   * Whether the button should hide when no node ID is available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean;
+  /**
+   * Called when the copy operation finishes.
+   * Provides a boolean indicating whether a node ID was found.
+   */
+  onNodeIdNotFound?: (found: boolean) => void;
+  /**
+   * Called after the node ID is extracted.
+   * Provides the extracted node ID, or null if none found.
+   */
+  onExtractedNodeId?: (nodeId: string | null) => void;
+  /**
+   * Callback function called after a successful copy operation.
+   */
+  onCopied?: () => void;
+}
+
+/**
+ * Validates if editor is ready for operations
+ */
+function isEditorReady(editor: Editor | null): boolean {
+  return !!(editor && editor.isEditable);
+}
+
+/**
+ * Gets the attribute name for unique IDs from the editor extension
+ */
+function getAttributeName(editor: Editor): string {
+  const ext = getEditorExtension(editor, "uniqueID");
+  return ext?.options?.attributeName || "data-id";
+}
+
+/**
+ * Comprehensive node info retrieval with validation
+ */
+function getNodeWithId(editor: Editor | null): {
+  node: Node;
+  nodeId: string | null;
+  hasNodeId: boolean;
+} | null {
+  if (!isEditorReady(editor)) return null;
+
+  const nodeInfo = getAnchorNodeAndPos(editor!);
+  if (!nodeInfo) return null;
+
+  const attributeName = getAttributeName(editor!);
+  const nodeId = extractNodeId(nodeInfo.node, attributeName);
+
+  return {
+    node: nodeInfo.node,
+    nodeId,
+    hasNodeId: nodeId !== null,
+  };
+}
+
+/**
+ * Extracts the data-id from a node
+ */
+export function extractNodeId(node: Node | null, attributeName: string): string | null {
+  if (!node?.attrs?.[attributeName]) return null;
+
+  try {
+    return node.attrs[attributeName];
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Checks if a node has a data-id that can be copied
+ */
+export function canCopyAnchorLink(editor: Editor | null): boolean {
+  const nodeWithId = getNodeWithId(editor);
+  return nodeWithId?.hasNodeId ?? false;
+}
+
+/**
+ * Extracts and copies the node ID to clipboard with full URL like Notion
+ */
+export async function copyNodeId(
+  editor: Editor | null,
+  onExtractedNodeId?: (nodeId: string | null) => void,
+  onNodeIdNotFound?: (found: boolean) => void,
+): Promise<boolean> {
+  const nodeWithId = getNodeWithId(editor);
+
+  if (!nodeWithId) return false;
+
+  const { nodeId, hasNodeId } = nodeWithId;
+
+  onExtractedNodeId?.(nodeId);
+  onNodeIdNotFound?.(!hasNodeId);
+
+  if (!hasNodeId || !nodeId) return false;
+
+  try {
+    const currentUrl = new URL(window.location.href);
+
+    currentUrl.searchParams.set("source", "copy_link");
+    currentUrl.hash = nodeId;
+
+    await navigator.clipboard.writeText(currentUrl.toString());
+    return true;
+  } catch (err) {
+    console.error("Failed to copy node ID to clipboard:", err);
+    return false;
+  }
+}
+
+/**
+ * Determines if the copy anchor link button should be shown
+ */
+export function shouldShowButton(props: { editor: Editor | null; hideWhenUnavailable: boolean }): boolean {
+  const { editor, hideWhenUnavailable } = props;
+
+  if (!isEditorReady(editor)) return false;
+
+  const hasNode = !!getAnchorNodeAndPos(editor!);
+
+  if (!hideWhenUnavailable) return hasNode;
+
+  return canCopyAnchorLink(editor);
+}
+
+/**
+ * Custom hook that provides copy anchor link functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MyCopyAnchorLinkButton() {
+ *   const { isVisible, handleCopyAnchorLink } = useCopyAnchorLink()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleCopyAnchorLink}>Copy Link</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedCopyAnchorLinkButton() {
+ *   const { isVisible, handleCopyAnchorLink, label } = useCopyAnchorLink({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onCopied: () => console.log('Link copied!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleCopyAnchorLink}
+ *       aria-label={label}
+ *     >
+ *       Copy Anchor Link
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useCopyAnchorLink(config?: UseCopyAnchorLinkConfig) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onNodeIdNotFound,
+    onExtractedNodeId,
+    onCopied,
+  } = config || {};
+
+  const { t } = useTranslation();
+  const { editor } = useTiptapEditor(providedEditor);
+  const isMobile = useIsBreakpoint();
+  const [isVisible, setIsVisible] = useState<boolean>(true);
+  const canCopyAnchor = canCopyAnchorLink(editor);
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }));
+    };
+
+    handleSelectionUpdate();
+
+    editor.on("selectionUpdate", handleSelectionUpdate);
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable]);
+
+  const handleCopyAnchorLink = useCallback(async () => {
+    const success = await copyNodeId(editor, onExtractedNodeId, onNodeIdNotFound);
+
+    if (success) {
+      onCopied?.();
+    }
+
+    return success;
+  }, [editor, onExtractedNodeId, onNodeIdNotFound, onCopied]);
+
+  useHotkeys(
+    COPY_ANCHOR_LINK_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault();
+      handleCopyAnchorLink();
+    },
+    {
+      enabled: isVisible && canCopyAnchor,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    },
+  );
+
+  return {
+    isVisible,
+    handleCopyAnchorLink,
+    canCopyAnchorLink: canCopyAnchor,
+    label: t("复制锚点链接"),
+    shortcutKeys: COPY_ANCHOR_LINK_SHORTCUT_KEY,
+    Icon: LinkIcon,
+  };
+}

package/src/components/tiptap-ui/copy-anchor-link-button/use-scroll-to-hash.ts

@@ -0,0 +1,128 @@
+"use client"
+
+import { useCallback, useEffect } from "react"
+import { type Editor } from "@tiptap/react"
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+import { getEditorExtension } from "../../../lib/tiptap-advanced-utils"
+import { selectNodeAndHideFloating } from "../../../hooks/use-floating-toolbar-visibility"
+
+export interface UseScrollToHashConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Callback called when the target node is found.
+   * @param nodeId The ID of the found node
+   */
+  onTargetFound?: (nodeId: string) => void
+  /**
+   * Callback called when the target node is not found.
+   * @param hash The hash that was attempted to be scrolled to
+   */
+  onTargetNotFound?: (hash: string) => void
+}
+
+/**
+ * Hook to scroll to a specific hash in the Tiptap editor.
+ * It finds the node with the given ID and scrolls it into view.
+ *
+ * @param config Configuration for the scroll behavior
+ * @returns Function to scroll to a specific hash
+ */
+export function useScrollToHash(config: UseScrollToHashConfig = {}) {
+  const {
+    editor: providedEditor,
+    onTargetFound = () => {},
+    onTargetNotFound = () => {},
+  } = config
+
+  const { editor } = useTiptapEditor(providedEditor)
+
+  const scrollToNode = useCallback(
+    (id: string): boolean => {
+      if (!editor) return false
+
+      const attributeName =
+        getEditorExtension(editor, "uniqueID")?.options?.attributeName ??
+        "data-id"
+      let position: number | null = null
+
+      editor.state.doc.descendants((node, pos) => {
+        if (node.attrs?.[attributeName] === id) {
+          position = pos
+          return false
+        }
+        return true
+      })
+
+      if (position === null) return false
+
+      selectNodeAndHideFloating(editor, position)
+
+      setTimeout(() => {
+        const dom = editor.view.nodeDOM(position!) as HTMLElement | null
+
+        if (dom) {
+          dom.scrollIntoView({ behavior: "smooth", block: "center" })
+        }
+      }, 0)
+
+      return true
+    },
+    [editor]
+  )
+
+  const handleScroll = useCallback(
+    (delay = 0) => {
+      const hash = window.location.hash?.substring(1)
+      if (!hash) return
+
+      setTimeout(() => {
+        if (scrollToNode(hash)) {
+          onTargetFound(hash)
+        } else {
+          onTargetNotFound(hash)
+        }
+      }, delay)
+    },
+    [scrollToNode, onTargetFound, onTargetNotFound]
+  )
+
+  useEffect(() => {
+    if (!editor) return
+
+    // Handle collaboration sync or immediate scroll
+    const provider = editor.extensionManager.extensions.find(
+      (ext) => ext.name === "collaborationCaret"
+    )?.options?.provider
+
+    if (provider?.on) {
+      const syncHandler = () => handleScroll(500)
+      provider.on("synced", syncHandler)
+
+      return () => {
+        provider.off?.("synced", syncHandler)
+      }
+    } else {
+      handleScroll(500)
+    }
+  }, [editor, handleScroll])
+
+  useEffect(() => {
+    const immediateScroll = () => handleScroll()
+    const delayedScroll = () => handleScroll(500)
+
+    window.addEventListener("hashchange", immediateScroll)
+    window.addEventListener("pageshow", delayedScroll)
+    window.addEventListener("popstate", immediateScroll)
+
+    return () => {
+      window.removeEventListener("hashchange", immediateScroll)
+      window.removeEventListener("pageshow", delayedScroll)
+      window.removeEventListener("popstate", immediateScroll)
+    }
+  }, [handleScroll])
+
+  return { scrollToHash: scrollToNode }
+}

package/src/components/tiptap-ui/copy-to-clipboard-button/copy-to-clipboard-button.tsx

@@ -0,0 +1,116 @@
+"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 { UseCopyToClipboardConfig } from "./"
+import {
+  COPY_TO_CLIPBOARD_SHORTCUT_KEY,
+  useCopyToClipboard,
+} 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 CopyToClipboardButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseCopyToClipboardConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function CopyToClipboardShortcutBadge({
+  shortcutKeys = COPY_TO_CLIPBOARD_SHORTCUT_KEY,
+}: {
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for copying content to clipboard in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useCopyToClipboard` hook instead.
+ */
+export const CopyToClipboardButton = forwardRef<
+  HTMLButtonElement,
+  CopyToClipboardButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      text,
+      copyWithFormatting = true,
+      hideWhenUnavailable = false,
+      onCopied,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const { isVisible, handleCopyToClipboard, label, shortcutKeys, Icon } =
+      useCopyToClipboard({
+        editor,
+        copyWithFormatting,
+        hideWhenUnavailable,
+        onCopied,
+      })
+
+    const handleClick = useCallback(
+      async (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        await handleCopyToClipboard()
+      },
+      [handleCopyToClipboard, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        role="button"
+        tabIndex={-1}
+        aria-label={label}
+        tooltip="Copy to clipboard"
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <CopyToClipboardShortcutBadge shortcutKeys={shortcutKeys} />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+CopyToClipboardButton.displayName = "CopyToClipboardButton"

package/src/components/tiptap-ui/copy-to-clipboard-button/index.tsx

@@ -0,0 +1,2 @@
+export * from "./copy-to-clipboard-button"
+export * from "./use-copy-to-clipboard"