Eventos da Área de Transferência

// Adiciona atribuição ao copiar texto
function AttributedContent({ children }: { children: React.ReactNode }) {
  const handleCopy = (e: React.ClipboardEvent) => {
    const selection = window.getSelection()?.toString() ?? "";
    const attributed = `${selection}\n\n-- Fonte: mysite.com`;
    e.clipboardData.setData("text/plain", attributed);
    e.preventDefault(); // Necessário para usar dados personalizados da área de transferência
  };
 
  return <div onCopy={handleCopy}>{children}</div>;
}
 
// Sanitiza a entrada colada
function SanitizedInput() {
  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
    e.preventDefault();
    const text = e.clipboardData.getData("text/plain");
    const sanitized = text.replace(/[<>]/g, ""); // remove colchetes angulares
    document.execCommand("insertText", false, sanitized);
  };
 
  return <input onPaste={handlePaste} placeholder="Cole aqui (sanitizado)" />;
}

// components/CopyableCodeBlock.tsx
"use client";
 
import { useState, useRef } from "react";
 
export function CopyableCodeBlock({ code }: { code: string }) {
  const [copied, setCopied] = useState(false);
  const preRef = useRef<HTMLPreElement>(null);
 
  const handleCopyClick = async () => {
    try {
      await navigator.clipboard.writeText(code);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      // Fallback para contextos inseguros
      const textarea = document.createElement("textarea");
      textarea.value = code;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand("copy");
      document.body.removeChild(textarea);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  };
 
  return (
    <div className="relative group">
      <pre
        ref={preRef}
        className="bg-gray-900 text-gray-100 p-4 rounded overflow-x-auto"
      >
        <code>{code}</code>
      </pre>
      <button
        onClick={handleCopyClick}
        className="absolute top-2 right-2 px-2 py-1 text-xs bg-gray-700 text-white rounded opacity-0 group-hover:opacity-100 transition-opacity"
      >
        {copied ? "Copiado!" : "Copiar"}
      </button>
    </div>
  );
}

// components/PasteUploadArea.tsx
"use client";
 
import { useState } from "react";
 
type PastedFile = {
  name: string;
  type: string;
  size: number;
  preview: string;
};
 
export function PasteUploadArea() {
  const [files, setFiles] = useState<PastedFile[]>([]);
 
  const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
    const items = e.clipboardData.items;
    const newFiles: PastedFile[] = [];
 
    for (let i = 0; i < items.length; i++) {
      const item = items[i];
      if (item.kind === "file") {
        const file = item.getAsFile();
        if (!file) continue;
 
        const preview = URL.createObjectURL(file);
        newFiles.push({
          name: file.name || `pasted-${Date.now()}.${file.type.split("/")[1]}`,
          type: file.type,
          size: file.size,
          preview,
        });
      }
    }
 
    if (newFiles.length > 0) {
      e.preventDefault();
      setFiles((prev) => [...prev, ...newFiles]);
    }
  };
 
  return (
    <div
      onPaste={handlePaste}
      tabIndex={0}
      className="border-2 border-dashed border-gray-400 rounded p-8 text-center focus:border-blue-500 focus:outline-none"
    >
      <p className="text-gray-600 mb-4">
        Clique aqui e cole uma imagem (Ctrl+V / Cmd+V)
      </p>
      {files.length > 0 && (
        <div className="grid grid-cols-3 gap-4 mt-4">
          {files.map((f, i) => (
            <div key={i} className="border rounded p-2">
              {f.type.startsWith("image/") ? (
                <img
                  src={f.preview}
                  alt={f.name}
                  className="w-full h-32 object-cover rounded"
                />
              ) : (
                <p className="text-sm">{f.name}</p>
              )}
              <p className="text-xs text-gray-500 mt-1">
                {f.type} ({(f.size / 1024).toFixed(1)} KB)
              </p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function CopyButton({ text }: { text: string }) {
  const handleClick = async () => {
    await navigator.clipboard.writeText(text);
  };
 
  return <button onClick={handleClick}>Copiar</button>;
}

function ImagePasteHandler() {
  const handlePaste = (e: React.ClipboardEvent) => {
    const items = Array.from(e.clipboardData.items);
    const imageItem = items.find((item) => item.type.startsWith("image/"));
 
    if (!imageItem) return;
    e.preventDefault();
 
    const file = imageItem.getAsFile();
    if (!file) return;
 
    const reader = new FileReader();
    reader.onload = (event) => {
      const dataUrl = event.target?.result as string;
      // Use dataUrl para pré-visualização ou upload
    };
    reader.readAsDataURL(file);
  };
 
  return <div onPaste={handlePaste} tabIndex={0}>Cole uma imagem aqui</div>;
}

function RichCopyTable({ rows }: { rows: string[][] }) {
  const handleCopy = (e: React.ClipboardEvent) => {
    e.preventDefault();
 
    // Define as versões em texto puro e HTML
    const plainText = rows.map((row) => row.join("\t")).join("\n");
    const html = `<table>${rows
      .map((row) => `<tr>${row.map((c) => `<td>${c}</td>`).join("")}</tr>`)
      .join("")}</table>`;
 
    e.clipboardData.setData("text/plain", plainText);
    e.clipboardData.setData("text/html", html);
  };
 
  return (
    <table onCopy={handleCopy}>
      <tbody>
        {rows.map((row, i) => (
          <tr key={i}>
            {row.map((cell, j) => (
              <td key={j} className="border px-2 py-1">{cell}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function ConfirmEmailField() {
  return (
    <div>
      <label>Email</label>
      <input type="email" name="email" />
 
      <label>Confirmar Email</label>
      <input
        type="email"
        name="confirmEmail"
        onPaste={(e) => {
          e.preventDefault();
          // Opcionalmente, exiba uma dica: "Por favor, digite seu e-mail novamente"
        }}
      />
    </div>
  );
}

function ClipboardReader() {
  const [content, setContent] = useState("");
 
  const readClipboard = async () => {
    try {
      // Requer gesto do usuário e permissões
      const text = await navigator.clipboard.readText();
      setContent(text);
    } catch (err) {
      console.error("Falha ao ler a área de transferência:", err);
    }
  };
 
  return (
    <div>
      <button onClick={readClipboard}>Ler Área de Transferência</button>
      {content && <pre className="mt-2 p-2 bg-gray-100 rounded">{content}</pre>}
    </div>
  );
}

// O genérico ClipboardEvent especifica o elemento
const handleCopy = (e: React.ClipboardEvent<HTMLDivElement>) => {
  e.clipboardData; // DataTransfer (sempre disponível em eventos da área de transferência)
  e.currentTarget; // HTMLDivElement
};
 
// os métodos clipboardData são totalmente tipados
const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
  const text: string = e.clipboardData.getData("text/plain");
  const html: string = e.clipboardData.getData("text/html");
 
  // items é um DataTransferItemList
  const items: DataTransferItemList = e.clipboardData.items;
 
  // Iterando sobre os itens
  for (let i = 0; i < items.length; i++) {
    const item: DataTransferItem = items[i];
    item.kind; // "string" | "file"
    item.type; // string do tipo MIME
 
    if (item.kind === "file") {
      const file: File | null = item.getAsFile();
    }
  }
};
 
// Usando o tipo de manipulador abreviado
const onCut: React.ClipboardEventHandler<HTMLTextAreaElement> = (e) => {
  // e é React.ClipboardEvent<HTMLTextAreaElement>
};
 
// Tipos da API navigator.clipboard (embutidos em lib.dom.d.ts)
async function writeToClipboard(text: string): Promise<void> {
  await navigator.clipboard.writeText(text);
}
 
async function readFromClipboard(): Promise<string> {
  return navigator.clipboard.readText();
}