Реализация Clipboard API на сайте

Реализация Clipboard API на сайте

Clipboard API — замена устаревшему document.execCommand('copy'). Асинхронный, permission-based, поддерживает не только текст, но и изображения, HTML, пользовательские форматы данных. Работает через navigator.clipboard и требует Secure Context.

Базовое использование

Копирование текста — самый частый сценарий:

async function copyToClipboard(text: string): Promise<void> {
  if (!navigator.clipboard) {
    // Fallback для HTTP-контекста или старых браузеров
    const textarea = document.createElement('textarea')
    textarea.value = text
    textarea.style.cssText = 'position:fixed;opacity:0;pointer-events:none'
    document.body.appendChild(textarea)
    textarea.select()
    document.execCommand('copy')
    document.body.removeChild(textarea)
    return
  }

  await navigator.clipboard.writeText(text)
}

async function readFromClipboard(): Promise<string> {
  return navigator.clipboard.readText()
}

Разрешения

Запись (writeText, write) не требует явного запроса разрешения — достаточно, что страница в фокусе и действие инициировано пользователем. Чтение (readText, read) запрашивает разрешение clipboard-read через Permissions API:

async function checkClipboardPermission(): Promise<PermissionState> {
  const result = await navigator.permissions.query({
    name: 'clipboard-read' as PermissionName,
  })
  return result.state // 'granted' | 'denied' | 'prompt'
}

Работа с изображениями

async function copyImageToClipboard(blob: Blob): Promise<void> {
  const item = new ClipboardItem({ [blob.type]: blob })
  await navigator.clipboard.write([item])
}

async function copyCanvasToClipboard(canvas: HTMLCanvasElement): Promise<void> {
  const blob = await new Promise<Blob>((resolve, reject) =>
    canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('Ошибка конвертации'))), 'image/png')
  )
  await copyImageToClipboard(blob)
}

Читать изображение из буфера:

async function pasteImage(): Promise<HTMLImageElement | null> {
  const items = await navigator.clipboard.read()
  for (const item of items) {
    const imageType = item.types.find((t) => t.startsWith('image/'))
    if (imageType) {
      const blob = await item.getType(imageType)
      const url = URL.createObjectURL(blob)
      const img = new Image()
      img.src = url
      img.onload = () => URL.revokeObjectURL(url)
      return img
    }
  }
  return null
}

React-хук с состоянием обратной связи

function useCopyToClipboard(resetDelay = 2000) {
  const [copied, setCopied] = useState(false)
  const timerRef = useRef<ReturnType<typeof setTimeout>>()

  const copy = useCallback(async (text: string) => {
    try {
      await copyToClipboard(text)
      setCopied(true)
      clearTimeout(timerRef.current)
      timerRef.current = setTimeout(() => setCopied(false), resetDelay)
    } catch {
      setCopied(false)
    }
  }, [resetDelay])

  useEffect(() => () => clearTimeout(timerRef.current), [])

  return { copy, copied }
}

// Компонент
function CopyButton({ text }: { text: string }) {
  const { copy, copied } = useCopyToClipboard()

  return (
    <button onClick={() => copy(text)}>
      {copied ? 'Скопировано!' : 'Копировать'}
    </button>
  )
}

Событие paste на уровне документа

Перехват вставки для drag-and-drop редакторов и загрузчиков изображений:

document.addEventListener('paste', async (event: ClipboardEvent) => {
  const items = event.clipboardData?.items ?? []

  for (const item of Array.from(items)) {
    if (item.type.startsWith('image/')) {
      event.preventDefault()
      const file = item.getAsFile()
      if (file) await handleImagePaste(file)
    }
  }
})

Что входит в работу

Реализация утилит копирования/вставки с fallback, React-хук useCopyToClipboard, поддержка текста и изображений, визуальная обратная связь (иконка, тост, tooltip). Дополнительно — интеграция с редактором или загрузчиком файлов при необходимости.

Срок: половина дня.