@meta-1/editor 0.0.28 → 1.0.0

package/src/components/tiptap-ui/image-download-button/use-image-download.ts

@@ -0,0 +1,364 @@
+"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"
+
+// --- Lib ---
+import {
+  isExtensionAvailable,
+  isNodeTypeSelected,
+  sanitizeUrl,
+} from "../../../lib/tiptap-utils"
+
+// --- Icons ---
+import { ArrowDownToLineIcon } from "../../tiptap-icons/arrow-down-to-line-icon"
+
+export const IMAGE_DOWNLOAD_SHORTCUT_KEY = "mod+shift+d"
+
+/**
+ * Extracts file extension from URL or content type
+ */
+function getFileExtension(url: string, contentType?: string): string {
+  const urlMatch = url.match(/\.([a-zA-Z0-9]+)(?:\?|#|$)/)
+  if (urlMatch && urlMatch[1]) {
+    return `.${urlMatch[1].toLowerCase()}`
+  }
+
+  if (contentType) {
+    const mimeMap: Record<string, string> = {
+      "image/jpeg": ".jpg",
+      "image/jpg": ".jpg",
+      "image/png": ".png",
+      "image/gif": ".gif",
+      "image/webp": ".webp",
+      "image/svg+xml": ".svg",
+      "image/bmp": ".bmp",
+    }
+    return mimeMap[contentType.toLowerCase()] || ".jpg"
+  }
+
+  return ".jpg"
+}
+
+/**
+ * Configuration for the image download functionality
+ */
+export interface UseImageDownloadConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Whether the button should hide when download is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful image download.
+   */
+  onDownloaded?: (filename?: string) => void
+  /**
+   * Optional function to resolve file URLs before downloading.
+   * Useful for handling relative paths or custom URL schemes.
+   */
+  resolveFileUrl?: (url: string) => Promise<string>
+  /**
+   * Download behavior: 'download' forces download, 'open' opens in new tab, 'auto' tries download with fallback
+   * @default 'auto'
+   */
+  downloadMethod?: "download" | "open" | "auto"
+}
+
+/**
+ * Checks if image can be downloaded in the current editor state
+ */
+export function canDownloadImage(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!isExtensionAvailable(editor, ["image"])) return false
+
+  return isNodeTypeSelected(editor, ["image"])
+}
+
+/**
+ * Gets the currently selected image data
+ */
+export function getSelectedImageData(editor: Editor | null): {
+  src?: string
+  alt?: string
+  title?: string
+} | null {
+  if (!editor || !canDownloadImage(editor)) return null
+
+  const { selection } = editor.state
+
+  if (selection instanceof NodeSelection) {
+    const node = selection.node
+
+    if (node.type.name === "image") {
+      return {
+        src: node.attrs.src,
+        alt: node.attrs.alt,
+        title: node.attrs.title,
+      }
+    }
+  }
+
+  return null
+}
+
+/**
+ * Attempts to download image via fetch (handles CORS)
+ */
+async function tryFetchDownload(
+  url: string,
+  filename: string
+): Promise<boolean> {
+  try {
+    const response = await fetch(url)
+    if (!response.ok) return false
+
+    const blob = await response.blob()
+    const blobUrl = URL.createObjectURL(blob)
+
+    const hasExtension = /\.[a-zA-Z0-9]+$/.test(filename)
+    const finalFilename = hasExtension
+      ? filename
+      : filename +
+        getFileExtension(url, response.headers.get("content-type") || undefined)
+
+    const link = document.createElement("a")
+    link.href = blobUrl
+    link.download = finalFilename
+    link.style.display = "none"
+
+    document.body.appendChild(link)
+    link.click()
+    link.remove()
+    URL.revokeObjectURL(blobUrl)
+    return true
+  } catch (error) {
+    console.warn("Fetch download failed:", error)
+    return false
+  }
+}
+
+/**
+ * Downloads image via direct link (for same-origin or data URLs)
+ */
+function tryDirectDownload(url: string, filename: string): boolean {
+  try {
+    const hasExtension = /\.[a-zA-Z0-9]+$/.test(filename)
+    const finalFilename = hasExtension
+      ? filename
+      : filename + getFileExtension(url)
+
+    const link = document.createElement("a")
+    link.href = url
+    link.download = finalFilename
+    link.style.display = "none"
+
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+
+    return true
+  } catch (error) {
+    console.warn("Direct download failed:", error)
+    return false
+  }
+}
+
+/**
+ * Opens image in new tab
+ */
+function openInNewTab(url: string): boolean {
+  try {
+    window.open(url, "_blank")
+    return true
+  } catch (error) {
+    console.error("Failed to open image:", error)
+    return false
+  }
+}
+
+/**
+ * Downloads the currently selected image
+ */
+export async function downloadSelectedImage(
+  editor: Editor | null,
+  filename?: string,
+  resolveFileUrl?: (url: string) => Promise<string>,
+  downloadMethod: "download" | "open" | "auto" = "auto"
+): Promise<boolean> {
+  if (!editor || !canDownloadImage(editor)) return false
+
+  const imageData = getSelectedImageData(editor)
+  if (!imageData?.src) return false
+
+  try {
+    let resolvedUrl = imageData.src
+    if (resolveFileUrl) {
+      resolvedUrl = await resolveFileUrl(imageData.src)
+    }
+
+    const baseUrl = window.location.href
+    const sanitizedUrl = sanitizeUrl(resolvedUrl, baseUrl)
+
+    if (sanitizedUrl === "#") {
+      console.error("Invalid or unsafe URL after sanitization")
+      return false
+    }
+
+    const generatedFilename =
+      filename || imageData.alt || imageData.title || `image-${Date.now()}`
+
+    switch (downloadMethod) {
+      case "open":
+        return openInNewTab(sanitizedUrl)
+
+      case "download":
+        if (
+          sanitizedUrl.startsWith(window.location.origin) ||
+          sanitizedUrl.startsWith("data:")
+        ) {
+          return tryDirectDownload(sanitizedUrl, generatedFilename)
+        } else {
+          const success = await tryFetchDownload(
+            sanitizedUrl,
+            generatedFilename
+          )
+          return success || openInNewTab(sanitizedUrl)
+        }
+
+      case "auto":
+      default:
+        if (
+          sanitizedUrl.startsWith("data:") ||
+          sanitizedUrl.startsWith(window.location.origin)
+        ) {
+          return tryDirectDownload(sanitizedUrl, generatedFilename)
+        } else {
+          const fetchSuccess = await tryFetchDownload(
+            sanitizedUrl,
+            generatedFilename
+          )
+          if (fetchSuccess) return true
+
+          return openInNewTab(sanitizedUrl)
+        }
+    }
+  } catch (error) {
+    console.error("Failed to download image:", error)
+
+    try {
+      const baseUrl = window.location.href
+      const sanitizedUrl = sanitizeUrl(imageData.src, baseUrl)
+      if (sanitizedUrl !== "#") {
+        return openInNewTab(sanitizedUrl)
+      }
+    } catch {
+      // Silent fail
+    }
+
+    return false
+  }
+}
+
+/**
+ * Determines if the download button should be shown
+ */
+export function shouldShowDownloadButton(props: {
+  editor: Editor | null
+  hideWhenUnavailable: boolean
+}): boolean {
+  const { editor, hideWhenUnavailable } = props
+
+  if (!editor || !editor.isEditable) return false
+  if (!isExtensionAvailable(editor, ["image", "imageUpload"])) return false
+
+  if (hideWhenUnavailable) {
+    return canDownloadImage(editor)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides image download functionality for Tiptap editor
+ */
+export function useImageDownload(config?: UseImageDownloadConfig) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onDownloaded,
+    resolveFileUrl,
+    downloadMethod = "auto",
+  } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const isMobile = useIsBreakpoint()
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+  const canDownload = canDownloadImage(editor)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowDownloadButton({ editor, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable])
+
+  const handleDownload = useCallback(async () => {
+    if (!editor) return false
+
+    const imageData = getSelectedImageData(editor)
+    const filename = imageData?.alt || imageData?.title
+
+    const success = await downloadSelectedImage(
+      editor,
+      filename,
+      resolveFileUrl,
+      downloadMethod
+    )
+    if (success) {
+      onDownloaded?.(filename)
+    }
+    return success
+  }, [editor, onDownloaded, resolveFileUrl, downloadMethod])
+
+  useHotkeys(
+    IMAGE_DOWNLOAD_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault()
+      handleDownload()
+    },
+    {
+      enabled: isVisible && canDownload,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    }
+  )
+
+  return {
+    isVisible,
+    canDownload,
+    handleDownload,
+    label: "Download image",
+    shortcutKeys: IMAGE_DOWNLOAD_SHORTCUT_KEY,
+    Icon: ArrowDownToLineIcon,
+  }
+}

package/src/components/tiptap-ui/image-upload-button/image-upload-button.tsx

@@ -0,0 +1,133 @@
+"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 { UseImageUploadConfig } from "./"
+import {
+  IMAGE_UPLOAD_SHORTCUT_KEY,
+  useImageUpload,
+} 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"
+
+type IconProps = React.SVGProps<SVGSVGElement>
+type IconComponent = ({ className, ...props }: IconProps) => React.ReactElement
+
+export interface ImageUploadButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseImageUploadConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+  /**
+   * Optional custom icon component to render instead of the default.
+   */
+  icon?: React.MemoExoticComponent<IconComponent> | React.FC<IconProps>
+}
+
+export function ImageShortcutBadge({
+  shortcutKeys = IMAGE_UPLOAD_SHORTCUT_KEY,
+}: {
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for uploading/inserting images in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useImage` hook instead.
+ */
+export const ImageUploadButton = forwardRef<
+  HTMLButtonElement,
+  ImageUploadButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      text,
+      hideWhenUnavailable = false,
+      onInserted,
+      showShortcut = false,
+      onClick,
+      icon: CustomIcon,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      canInsert,
+      handleImage,
+      label,
+      isActive,
+      shortcutKeys,
+      Icon,
+    } = useImageUpload({
+      editor,
+      hideWhenUnavailable,
+      onInserted,
+    })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleImage()
+      },
+      [handleImage, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    const RenderIcon = CustomIcon ?? Icon
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        data-active-state={isActive ? "on" : "off"}
+        role="button"
+        tabIndex={-1}
+        disabled={!canInsert}
+        data-disabled={!canInsert}
+        aria-label={label}
+        aria-pressed={isActive}
+        tooltip={label}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <RenderIcon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && <ImageShortcutBadge shortcutKeys={shortcutKeys} />}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+ImageUploadButton.displayName = "ImageUploadButton"

package/src/components/tiptap-ui/image-upload-button/index.tsx

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

package/src/components/tiptap-ui/image-upload-button/use-image-upload.ts

@@ -0,0 +1,192 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import { useHotkeys } from "react-hotkeys-hook"
+import { type Editor } from "@tiptap/react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+import { useIsBreakpoint } from "../../../hooks/use-is-breakpoint"
+
+// --- Lib ---
+import { isExtensionAvailable } from "../../../lib/tiptap-utils"
+
+// --- Icons ---
+import { ImagePlusIcon } from "../../tiptap-icons/image-plus-icon"
+
+export const IMAGE_UPLOAD_SHORTCUT_KEY = "mod+shift+i"
+
+/**
+ * Configuration for the image upload functionality
+ */
+export interface UseImageUploadConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Whether the button should hide when insertion is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean
+  /**
+   * Callback function called after a successful image insertion.
+   */
+  onInserted?: () => void
+}
+
+/**
+ * Checks if image can be inserted in the current editor state
+ */
+export function canInsertImage(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!isExtensionAvailable(editor, "imageUpload")) return false
+
+  return editor.can().insertContent({ type: "imageUpload" })
+}
+
+/**
+ * Checks if image is currently active
+ */
+export function isImageActive(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  return editor.isActive("imageUpload")
+}
+
+/**
+ * Inserts an image in the editor
+ */
+export function insertImage(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false
+  if (!canInsertImage(editor)) return false
+
+  try {
+    return editor
+      .chain()
+      .focus()
+      .insertContent({
+        type: "imageUpload",
+      })
+      .run()
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Determines if the image 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 (!isExtensionAvailable(editor, "imageUpload")) return false
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canInsertImage(editor)
+  }
+
+  return true
+}
+
+/**
+ * Custom hook that provides image functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleImageButton() {
+ *   const { isVisible, handleImage } = useImage()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleImage}>Add Image</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedImageButton() {
+ *   const { isVisible, handleImage, label, isActive } = useImage({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onInserted: () => console.log('Image inserted!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleImage}
+ *       aria-pressed={isActive}
+ *       aria-label={label}
+ *     >
+ *       Add Image
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useImageUpload(config?: UseImageUploadConfig) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onInserted,
+  } = config || {}
+
+  const { editor } = useTiptapEditor(providedEditor)
+  const isMobile = useIsBreakpoint()
+  const [isVisible, setIsVisible] = useState<boolean>(true)
+  const canInsert = canInsertImage(editor)
+  const isActive = isImageActive(editor)
+
+  useEffect(() => {
+    if (!editor) return
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }))
+    }
+
+    handleSelectionUpdate()
+
+    editor.on("selectionUpdate", handleSelectionUpdate)
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate)
+    }
+  }, [editor, hideWhenUnavailable])
+
+  const handleImage = useCallback(() => {
+    if (!editor) return false
+
+    const success = insertImage(editor)
+    if (success) {
+      onInserted?.()
+    }
+    return success
+  }, [editor, onInserted])
+
+  useHotkeys(
+    IMAGE_UPLOAD_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault()
+      handleImage()
+    },
+    {
+      enabled: isVisible && canInsert,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    }
+  )
+
+  return {
+    isVisible,
+    isActive,
+    handleImage,
+    canInsert,
+    label: "Add image",
+    shortcutKeys: IMAGE_UPLOAD_SHORTCUT_KEY,
+    Icon: ImagePlusIcon,
+  }
+}

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

@@ -0,0 +1,2 @@
+export * from "./link-popover"
+export * from "./use-link-popover"