Guide d'utilisation de l'API Clipboard avec Claude Code

Améliorer l’expérience utilisateur avec l’API Clipboard

Copier du code en un clic, coller du texte enrichi - l’API Clipboard améliore considérablement l’ergonomie des applications web. Avec Claude Code, vous pouvez rapidement construire une implémentation tenant compte de la compatibilité navigateur et de la sécurité.

Bouton de copie pour les blocs de code

> Ajoute un bouton de copie aux blocs de code.
> Affiche un retour « Copié » après le clic.

// 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) {
      // Solution de repli
      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 ? 'Copié' : 'Copier le code'}
    >
      {copied ? '✓ Copié' : 'Copier'}
    </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);
}

Copie de texte enrichi

// 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]);
}

// Exemple d'utilisation : copie de données tabulaires
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);
}

Lecture depuis le presse-papiers

// Traitement d'image lors du collage
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);
      }
    }
  }
}

// Vérification des permissions avec l'API Permissions
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;
  }
}

Fonction de copie d’URL de partage

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 ? 'Copié !' : 'Copier l\'URL'}
      </button>
    </div>
  );
}

Considérations de sécurité

// Collage avec traitement de nettoyage
function sanitizePastedContent(html: string): string {
  const div = document.createElement('div');
  div.innerHTML = html;
  
  // Suppression des balises script
  div.querySelectorAll('script, iframe, object, embed').forEach(el => el.remove());
  
  // Suppression des attributs de gestionnaires d'événements
  div.querySelectorAll('*').forEach(el => {
    Array.from(el.attributes)
      .filter(attr => attr.name.startsWith('on'))
      .forEach(attr => el.removeAttribute(attr.name));
  });
  
  return div.innerHTML;
}

Résumé

L’utilisation de l’API Clipboard permet d’améliorer considérablement l’UX avec la copie de blocs de code et les fonctions de partage. Avec Claude Code, vous pouvez réaliser une implémentation robuste incluant les solutions de repli et les mesures de sécurité. En combinant avec l’API Web Share, vous pouvez offrir des fonctionnalités de partage encore plus flexibles. N’oubliez pas de considérer l’aspect optimisation des performances. Pour les spécifications détaillées, consultez MDN Web Docs.