useCopyToClipboard — Copia texto al portapapeles con retroalimentación de estado

import { useState, useCallback, useRef } from "react";
 
interface UseCopyToClipboardReturn {
  /** El texto copiado más recientemente, o null */
  copiedText: string | null;
  /** Si el texto fue copiado recientemente (se reinicia después del timeout) */
  isCopied: boolean;
  /** Copia el texto dado al portapapeles */
  copy: (text: string) => Promise<boolean>;
  /** Reinicia el estado copiado manualmente */
  reset: () => void;
}
 
function useCopyToClipboard(
  resetDelay: number = 2000
): UseCopyToClipboardReturn {
  const [copiedText, setCopiedText] = useState<string | null>(null);
  const [isCopied, setIsCopied] = useState(false);
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
  const reset = useCallback(() => {
    setCopiedText(null);
    setIsCopied(false);
    if (timerRef.current) {
      clearTimeout(timerRef.current);
      timerRef.current = null;
    }
  }, []);
 
  const copy = useCallback(
    async (text: string): Promise<boolean> => {
      // Intenta primero la API Clipboard moderna
      if (navigator?.clipboard?.writeText) {
        try {
          await navigator.clipboard.writeText(text);
          setCopiedText(text);
          setIsCopied(true);
 
          // Reinicio automático después del retraso
          if (timerRef.current) clearTimeout(timerRef.current);
          timerRef.current = setTimeout(() => {
            setIsCopied(false);
            timerRef.current = null;
          }, resetDelay);
 
          return true;
        } catch {
          // Falló la API Clipboard (p. ej., permisos denegados)
        }
      }
 
      // Alternativa: execCommand para navegadores más antiguos
      try {
        const textarea = document.createElement("textarea");
        textarea.value = text;
        textarea.style.position = "fixed";
        textarea.style.left = "-9999px";
        textarea.style.top = "-9999px";
        document.body.appendChild(textarea);
        textarea.focus();
        textarea.select();
 
        const success = document.execCommand("copy");
        document.body.removeChild(textarea);
 
        if (success) {
          setCopiedText(text);
          setIsCopied(true);
 
          if (timerRef.current) clearTimeout(timerRef.current);
          timerRef.current = setTimeout(() => {
            setIsCopied(false);
            timerRef.current = null;
          }, resetDelay);
        }
 
        return success;
      } catch {
        return false;
      }
    },
    [resetDelay]
  );
 
  return { copiedText, isCopied, copy, reset };
}

"use client";
 
function CodeBlock({ code }: { code: string }) {
  const { isCopied, copy } = useCopyToClipboard(3000);
 
  return (
    <div style={{ position: "relative", background: "#1e1e1e", padding: 16, borderRadius: 8 }}>
      <pre style={{ color: "#d4d4d4", margin: 0 }}>
        <code>{code}</code>
      </pre>
      <button
        onClick={() => copy(code)}
        style={{
          position: "absolute",
          top: 8,
          right: 8,
          padding: "4px 12px",
          background: isCopied ? "#22c55e" : "#3b82f6",
          color: "#fff",
          border: "none",
          borderRadius: 4,
          cursor: "pointer",
          transition: "background 0.2s",
        }}
      >
        {isCopied ? "¡Copiado!" : "Copiar"}
      </button>
    </div>
  );
}
 
function ShareLink({ url }: { url: string }) {
  const { isCopied, copy } = useCopyToClipboard();
 
  return (
    <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
      <input value={url} readOnly style={{ flex: 1, padding: 8 }} />
      <button onClick={() => copy(url)}>
        {isCopied ? "¡Enlace copiado!" : "Compartir"}
      </button>
    </div>
  );
}

const blob = new Blob([htmlString], { type: "text/html" });
const item = new ClipboardItem({ "text/html": blob });
await navigator.clipboard.write([item]);

const copyFromRef = async (ref: React.RefObject<HTMLElement>) => {
  const text = ref.current?.innerText ?? "";
  return copy(text);
};