Clipboard API-Nutzungsleitfaden mit Claude Code

Benutzererfahrung mit der Clipboard API verbessern

Mit einem Klick Code kopieren oder Rich Text einfügen - die Clipboard API verbessert die Benutzerfreundlichkeit von Webanwendungen erheblich. Mit Claude Code können Sie schnell eine Implementierung erstellen, die Browserkompatibilität und Sicherheit berücksichtigt.

Kopier-Button für Codeblöcke

> Füge einen Kopier-Button zu Codeblöcken hinzu.
> Zeige nach dem Klick ein "Kopiert"-Feedback an.

// components/CopyButton.tsx
import { useState, useCallback } from 'react';

interface CopyButtonProps {
  text: string;
}

export function CopyButton({ text }: CopyButtonProps) {
  const [copied, setCopied] = useState(false);

  const handleCopy = useCallback(async () => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      // Fallback
      fallbackCopy(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  }, [text]);

  return (
    <button
      onClick={handleCopy}
      className="absolute right-2 top-2 rounded bg-gray-700 px-2 py-1 text-xs text-white
        transition-colors hover:bg-gray-600"
      aria-label={copied ? 'Kopiert' : 'Code kopieren'}
    >
      {copied ? '✓ Kopiert' : 'Kopieren'}
    </button>
  );
}

function fallbackCopy(text: string): void {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  textarea.style.opacity = '0';
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}

Rich Text kopieren

// utils/clipboard.ts
export async function copyRichText(html: string, plainText: string): Promise<void> {
  if (!navigator.clipboard?.write) {
    fallbackCopy(plainText);
    return;
  }

  const htmlBlob = new Blob([html], { type: 'text/html' });
  const textBlob = new Blob([plainText], { type: 'text/plain' });

  const item = new ClipboardItem({
    'text/html': htmlBlob,
    'text/plain': textBlob,
  });

  await navigator.clipboard.write([item]);
}

// Verwendungsbeispiel: Tabellendaten kopieren
async function copyTableAsHtml(data: string[][]) {
  const html = `<table>${data.map(row =>
    `<tr>${row.map(cell => `<td>${cell}</td>`).join('')}</tr>`
  ).join('')}</table>`;
  
  const text = data.map(row => row.join('\t')).join('\n');
  await copyRichText(html, text);
}

Aus der Zwischenablage lesen

// Bildverarbeitung beim Einfügen
async function handlePaste(e: ClipboardEvent): Promise<void> {
  const items = e.clipboardData?.items;
  if (!items) return;

  for (const item of items) {
    if (item.type.startsWith('image/')) {
      e.preventDefault();
      const blob = item.getAsFile();
      if (blob) {
        const url = URL.createObjectURL(blob);
        insertImage(url);
      }
    }
  }
}

// Berechtigungsprüfung mit Permissions API
async function checkClipboardPermission(): Promise<boolean> {
  try {
    const result = await navigator.permissions.query({
      name: 'clipboard-read' as PermissionName,
    });
    return result.state === 'granted' || result.state === 'prompt';
  } catch {
    return false;
  }
}

URL-Kopierfunktion zum Teilen

function ShareUrl({ url, title }: { url: string; title: string }) {
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    await navigator.clipboard.writeText(url);
    setCopied(true);
    setTimeout(() => setCopied(false), 3000);
  };

  return (
    <div className="flex items-center gap-2 rounded-lg border p-3">
      <input
        type="text"
        value={url}
        readOnly
        className="flex-1 bg-transparent text-sm outline-none"
      />
      <button
        onClick={handleCopy}
        className="rounded bg-blue-600 px-3 py-1 text-sm text-white hover:bg-blue-700"
      >
        {copied ? 'Kopiert!' : 'URL kopieren'}
      </button>
    </div>
  );
}

Sicherheitsaspekte

// Einfügen mit Bereinigung
function sanitizePastedContent(html: string): string {
  const div = document.createElement('div');
  div.innerHTML = html;
  
  // Script-Tags entfernen
  div.querySelectorAll('script, iframe, object, embed').forEach(el => el.remove());
  
  // Event-Handler-Attribute entfernen
  div.querySelectorAll('*').forEach(el => {
    Array.from(el.attributes)
      .filter(attr => attr.name.startsWith('on'))
      .forEach(attr => el.removeAttribute(attr.name));
  });
  
  return div.innerHTML;
}

Zusammenfassung

Durch den Einsatz der Clipboard API können Sie die UX von Funktionen wie Code-Block-Kopieren und Teilen erheblich verbessern. Mit Claude Code ist eine robuste Implementierung einschließlich Fallback-Verarbeitung und Sicherheitsmaßnahmen möglich. In Kombination mit der Web Share API können Sie noch flexiblere Sharing-Funktionen anbieten. Vergessen Sie auch nicht die Performance-Optimierung. Die detaillierte Spezifikation finden Sie in den MDN Web Docs.