Guia de uso de la API de Clipboard con Claude Code

Mejorando la experiencia de usuario con la API de Clipboard

Copiar codigo con un solo clic, pegar texto enriquecido: la API de Clipboard mejora significativamente la usabilidad de las aplicaciones web. Con Claude Code, puedes construir rapidamente implementaciones que consideran la compatibilidad entre navegadores y la seguridad.

Boton de copiar para bloques de codigo

> Agrega un boton de copiar a los bloques de codigo.
> Muestra la retroalimentacion "Copiado" despues de hacer 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) {
      // 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 ? 'Copiado' : 'Copiar codigo'}
    >
      {copied ? '✓ Copiado' : 'Copiar'}
    </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);
}

Copia de texto enriquecido

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

// Ejemplo de uso: copiar datos de tabla
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);
}

Lectura desde el portapapeles

// Procesamiento de imagenes al pegar
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);
      }
    }
  }
}

// Verificacion de permisos con la API de 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;
  }
}

Funcion de copiar URL para compartir

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 ? 'Copiado!' : 'Copiar URL'}
      </button>
    </div>
  );
}

Consideraciones de seguridad

// Pegado con procesamiento de sanitizacion
function sanitizePastedContent(html: string): string {
  const div = document.createElement('div');
  div.innerHTML = html;
  
  // Eliminar etiquetas de script
  div.querySelectorAll('script, iframe, object, embed').forEach(el => el.remove());
  
  // Eliminar atributos de manejadores de eventos
  div.querySelectorAll('*').forEach(el => {
    Array.from(el.attributes)
      .filter(attr => attr.name.startsWith('on'))
      .forEach(attr => el.removeAttribute(attr.name));
  });
  
  return div.innerHTML;
}

Resumen

El uso de la API de Clipboard permite mejorar significativamente la UX de funciones como copiar bloques de codigo y compartir. Con Claude Code, puedes crear implementaciones robustas que incluyen procesamiento de fallback y medidas de seguridad. Combinandolo con la Web Share API, puedes ofrecer funciones de compartir aun mas flexibles. No olvides considerar tambien la optimizacion de rendimiento. Para mas detalles sobre la especificacion, consulta MDN Web Docs.