@meta-1/editor 0.0.29 → 1.0.0

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

@@ -0,0 +1,234 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { Fragment, Slice } from "@tiptap/pm/model";
+import type { Transaction } from "@tiptap/pm/state";
+import { TextSelection } 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 { ClipboardIcon } from "../../tiptap-icons/clipboard-icon";
+
+export const COPY_TO_CLIPBOARD_SHORTCUT_KEY = "mod+c";
+
+/**
+ * Configuration for the copy to clipboard functionality
+ */
+export interface UseCopyToClipboardConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null;
+  /**
+   * Whether to copy the text with formatting (default: true)
+   * When true, attempts to copy HTML format to clipboard
+   */
+  copyWithFormatting?: boolean;
+  /**
+   * Whether the button should hide when copying is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean;
+  /**
+   * Callback function called after a successful copy operation.
+   */
+  onCopied?: () => void;
+}
+
+/**
+ * Writes text and optional HTML content to the clipboard
+ * @param textContent The plain text content to write
+ * @param htmlContent Optional HTML content to write
+ * @returns Promise that resolves when the content is successfully written
+ */
+export async function writeToClipboard(textContent: string, htmlContent?: string): Promise<void> {
+  try {
+    if (htmlContent && navigator.clipboard && "write" in navigator.clipboard) {
+      const blob = new Blob([htmlContent], { type: "text/html" });
+      const clipboardItem = new ClipboardItem({ "text/html": blob });
+      await navigator.clipboard.write([clipboardItem]);
+    }
+  } catch {
+    await navigator.clipboard.writeText(textContent);
+  }
+}
+
+/**
+ * Checks if content can be copied in the current editor state
+ */
+export function canCopyContent(tr: Transaction): boolean {
+  const { selection } = tr;
+  const { empty } = selection;
+
+  if (empty) return false;
+
+  return true;
+}
+
+/**
+ * Checks if formatting can be reset for a node
+ */
+export function canCopyToClipboard(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false;
+
+  const tr = editor.state.tr;
+  return canCopyContent(tr);
+}
+
+/**
+ * Helper function to extract content from selection or document
+ */
+export function extractContent(
+  editor: Editor,
+  copyWithFormatting: boolean = true,
+): { textContent: string; htmlContent?: string } {
+  const { selection } = editor.state;
+  const { $anchor } = selection;
+
+  let content = selection.content();
+
+  if (selection.empty || selection instanceof TextSelection) {
+    const node = $anchor.node(1);
+
+    // We dont want to use node.content here because we dont want tiptap to split the node
+    // We want the whole node as a slice
+    content = new Slice(Fragment.from(node), 0, 0);
+  }
+
+  const textContent = content.content.textBetween(0, content.content.size, "\n");
+  const htmlContent = copyWithFormatting ? editor.view.serializeForClipboard(content).dom.innerHTML : undefined;
+
+  return { textContent, htmlContent };
+}
+
+/**
+ * Copies content to clipboard
+ */
+export async function copyToClipboard(editor: Editor | null, copyWithFormatting: boolean = true): Promise<boolean> {
+  if (!editor || !editor.isEditable) return false;
+
+  try {
+    const { textContent, htmlContent } = extractContent(editor, copyWithFormatting);
+
+    await writeToClipboard(textContent, htmlContent);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Determines if the copy to clipboard 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 (hideWhenUnavailable && !editor.isActive("code")) {
+    return canCopyToClipboard(editor);
+  }
+
+  return true;
+}
+
+/**
+ * Custom hook that provides copy to clipboard functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleCopyButton() {
+ *   const { isVisible, handleCopyToClipboard } = useCopyToClipboard()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleCopyToClipboard}>Copy</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedCopyButton() {
+ *   const { isVisible, handleCopyToClipboard, label } = useCopyToClipboard({
+ *     editor: myEditor,
+ *     copyWithFormatting: false,
+ *     hideWhenUnavailable: true,
+ *     onCopied: () => console.log('Content copied!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleCopyToClipboard}
+ *       aria-label={label}
+ *     >
+ *       Copy Content
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useCopyToClipboard(config?: UseCopyToClipboardConfig) {
+  const { editor: providedEditor, copyWithFormatting = true, hideWhenUnavailable = false, onCopied } = config || {};
+
+  const { t } = useTranslation();
+  const { editor } = useTiptapEditor(providedEditor);
+  const isMobile = useIsBreakpoint();
+  const [isVisible, setIsVisible] = useState<boolean>(true);
+  const canCopyToClipboardState = canCopyToClipboard(editor);
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }));
+    };
+
+    handleSelectionUpdate();
+
+    editor.on("selectionUpdate", handleSelectionUpdate);
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable]);
+
+  const handleCopyToClipboard = useCallback(async () => {
+    if (!editor) return false;
+
+    const success = await copyToClipboard(editor, copyWithFormatting);
+
+    if (success) {
+      onCopied?.();
+    }
+
+    return success;
+  }, [editor, copyWithFormatting, onCopied]);
+
+  useHotkeys(
+    COPY_TO_CLIPBOARD_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault(); // prevent native copy behavior
+      handleCopyToClipboard();
+    },
+    {
+      enabled: isVisible && canCopyToClipboardState,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    },
+  );
+
+  return {
+    isVisible,
+    handleCopyToClipboard,
+    canCopyToClipboard: canCopyToClipboardState,
+    label: t("复制到剪贴板"),
+    shortcutKeys: COPY_TO_CLIPBOARD_SHORTCUT_KEY,
+    Icon: ClipboardIcon,
+  };
+}

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

@@ -0,0 +1,98 @@
+"use client";
+
+import { forwardRef, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor";
+// --- Lib ---
+import { parseShortcutKeys } from "../../../lib/tiptap-utils";
+import { Badge } from "../../tiptap-ui-primitive/badge";
+// --- UI Primitives ---
+import type { ButtonProps } from "../../tiptap-ui-primitive/button";
+import { Button } from "../../tiptap-ui-primitive/button";
+// --- Tiptap UI ---
+import type { UseDeleteNodeConfig } from "./";
+import { DELETE_NODE_SHORTCUT_KEY, useDeleteNode } from "./";
+
+export interface DeleteNodeButtonProps extends Omit<ButtonProps, "type">, UseDeleteNodeConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string;
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean;
+}
+
+export function DeleteNodeShortcutBadge({ shortcutKeys = DELETE_NODE_SHORTCUT_KEY }: { shortcutKeys?: string }) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>;
+}
+
+/**
+ * Button component for deleting a node in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useDeleteNode` hook instead.
+ */
+export const DeleteNodeButton = forwardRef<HTMLButtonElement, DeleteNodeButtonProps>(
+  (
+    {
+      editor: providedEditor,
+      text,
+      hideWhenUnavailable = false,
+      onDeleted,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation();
+    const { editor } = useTiptapEditor(providedEditor);
+    const { isVisible, handleDeleteNode, label, shortcutKeys, Icon } = useDeleteNode({
+      editor,
+      hideWhenUnavailable,
+      onDeleted,
+    });
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        handleDeleteNode();
+      },
+      [handleDeleteNode, onClick],
+    );
+
+    if (!isVisible) {
+      return null;
+    }
+
+    return (
+      <Button
+        aria-label={label}
+        data-style="ghost"
+        onClick={handleClick}
+        role="button"
+        tabIndex={-1}
+        tooltip={t("Delete")}
+        type="button"
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && <DeleteNodeShortcutBadge shortcutKeys={shortcutKeys} />}
+          </>
+        )}
+      </Button>
+    );
+  },
+);
+
+DeleteNodeButton.displayName = "DeleteNodeButton";

package/src/components/tiptap-ui/delete-node-button/index.tsx

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

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

@@ -0,0 +1,236 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import { useHotkeys } from "react-hotkeys-hook"
+import { type Editor } from "@tiptap/react"
+import { NodeSelection } from "@tiptap/pm/state"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+import { useIsBreakpoint } from "../../../hooks/use-is-breakpoint"
+
+// --- Icons ---
+import { TrashIcon } from "../../tiptap-icons/trash-icon"
+
+export const DELETE_NODE_SHORTCUT_KEY = "backspace"
+
+/**
+ * Configuration for the delete node functionality
+ */
+export interface UseDeleteNodeConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Whether the button should hide when node deletion is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful deletion.
+   */
+  onDeleted?: () => void
+}
+
+/**
+ * Checks if a node can be deleted based on the current selection
+ */
+export function canDeleteNode(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+
+  const { state } = editor
+  const { selection } = state
+
+  if (selection instanceof NodeSelection) {
+    return true
+  }
+
+  const $pos = selection.$anchor
+
+  for (let depth = $pos.depth; depth > 0; depth--) {
+    const node = $pos.node(depth)
+    const pos = $pos.before(depth)
+
+    // Check if we could delete the range from pos to pos + nodeSize
+    const tr = state.tr.delete(pos, pos + node.nodeSize)
+    if (tr.doc !== state.doc) {
+      return true
+    }
+  }
+
+  return false
+}
+
+/**
+ * Helper function to delete a node with fallback strategy
+ */
+export function deleteNodeAtPosition(
+  editor: Editor,
+  pos: number,
+  nodeSize: number
+): boolean {
+  const chain = editor.chain().focus()
+  const success = chain.deleteRange({ from: pos, to: pos + nodeSize }).run()
+
+  if (success) return true
+
+  // Fallback
+  return chain.setNodeSelection(pos).deleteSelection().run()
+}
+
+/**
+ * Deletes the selected node in the editor using current selection
+ */
+export function deleteNode(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+
+  try {
+    const { state } = editor
+    const { selection } = state
+
+    if (selection instanceof NodeSelection) {
+      const pos = selection.from
+      const selectedNode = selection.node
+
+      if (!selectedNode) return false
+
+      return deleteNodeAtPosition(editor, pos, selectedNode.nodeSize)
+    }
+
+    const $pos = selection.$from
+
+    for (let depth = $pos.depth; depth > 0; depth--) {
+      const node = selection.$from.node(depth)
+      const pos = selection.$from.before(depth)
+
+      if (
+        node &&
+        node.isBlock &&
+        node.type.name !== "tableRow" &&
+        node.type.name !== "tableHeader" &&
+        node.type.name !== "tableCell"
+      ) {
+        return deleteNodeAtPosition(editor, pos, node.nodeSize)
+      }
+    }
+
+    return false
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Determines if the delete node 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 (hideWhenUnavailable && !editor.isActive("code")) {
+    return canDeleteNode(editor)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides delete node functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleDeleteButton() {
+ *   const { isVisible, handleDeleteNode } = useDeleteNode()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleDeleteNode}>Delete</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedDeleteButton() {
+ *   const { isVisible, handleDeleteNode, label } = useDeleteNode({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onDeleted: () => console.log('Node deleted!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleDeleteNode}
+ *       aria-label={label}
+ *     >
+ *       Delete Node
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useDeleteNode(config?: UseDeleteNodeConfig) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onDeleted,
+  } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const isMobile = useIsBreakpoint()
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+  const canDeleteNodeState = canDeleteNode(editor)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable])
+
+  const handleDeleteNode = useCallback(() => {
+    if (!editor) return false
+
+    const success = deleteNode(editor)
+    if (success) {
+      onDeleted?.()
+    }
+    return success
+  }, [editor, onDeleted])
+
+  useHotkeys(
+    DELETE_NODE_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault()
+      handleDeleteNode()
+    },
+    {
+      enabled: isVisible && canDeleteNodeState,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    }
+  )
+
+  return {
+    isVisible,
+    handleDeleteNode,
+    canDeleteNode: canDeleteNodeState,
+    label: "Delete",
+    shortcutKeys: DELETE_NODE_SHORTCUT_KEY,
+    Icon: TrashIcon,
+  }
+}

package/src/components/tiptap-ui/drag-context-menu/drag-context-menu-types.ts

@@ -0,0 +1,28 @@
+import type { DragHandleProps } from "@tiptap/extension-drag-handle-react"
+import type { Node } from "@tiptap/pm/model"
+import type { Editor } from "@tiptap/react"
+
+export interface DragContextMenuProps
+  extends Omit<DragHandleProps, "editor" | "children"> {
+  editor?: Editor | null
+  withSlashCommandTrigger?: boolean
+  mobileBreakpoint?: number
+}
+
+export interface NodeChangeData {
+  node: Node | null
+  editor: Editor
+  pos: number
+}
+
+export interface MenuItemProps {
+  icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>
+  label: string
+  onClick: () => void
+  disabled?: boolean
+  isActive?: boolean
+  shortcutBadge?: React.ReactNode
+}
+export interface ColorMenuItemProps {
+  color: { value: string; label: string }
+}

package/src/components/tiptap-ui/drag-context-menu/drag-context-menu.css

@@ -0,0 +1,17 @@
+@import "tailwindcss";
+
+.drag-handle {
+  transition-property: top;
+  transition-duration: 200ms;
+  transition-timing-function: ease-out;
+}
+
+.drag-handle::before {
+  content: "";
+  position: absolute;
+  left: 100%;
+  top: 0;
+  width: var(--drag-handle-main-axis-offset, 16px);
+  height: 100%;
+  pointer-events: auto;
+}