Clipboard da web e diferentes formas de armazenar dados

Clipboard da web e formas de armazenar dados

• Uso da API de Clipboard da web

  • Ao colar em Google Docs o conteúdo copiado de um site, a formatação é preservada, mas ao colar no VS Code apenas o texto é inserido
  • O clipboard armazena informações em várias representações associadas a tipos MIME
  • A especificação de clipboard da W3C exige suporte a três tipos de dados: text/plain, text/html, image/png

• Uso da API assíncrona de Clipboard

  • Como ler uma representação específica:

    const items = await navigator.clipboard.read();
    for (const item of items) {
      if (item.types.includes("text/html")) {
        const blob = await item.getType("text/html");
        const html = await blob.text();
        // Processar HTML...
      }
    }
    

  • Como gravar várias representações no clipboard:

    const textBlob = new Blob(["Hello, world"], { type: "text/plain" });
    const htmlBlob = new Blob(["Hello, <em>world<em>"], { type: "text/html" });
    const clipboardItem = new ClipboardItem({ [textBlob.type]: textBlob, [htmlBlob.type]: htmlBlob });
    await navigator.clipboard.write([clipboardItem]);
    

• Outros tipos de dados

  • Ao tentar gravar dados JSON no clipboard, ocorre erro:

    const json = JSON.stringify({ message: "Hello" });
    const blob = new Blob([json], { type: "application/json" });
    const clipboardItem = new ClipboardItem({ [blob.type]: blob });
    await navigator.clipboard.write([clipboardItem]);
    

  • O tipo application/json não é suportado

• Propriedade isTrusted

  • A propriedade isTrusted indica se o evento foi disparado pelo user agent
  • Só é possível gravar dados no clipboard em eventos confiáveis

• API de eventos de clipboard

  • Nos eventos copy, cut, paste, é possível ler/gravar dados usando a propriedade clipboardData
  • Como gravar dados JSON no clipboard:

    document.addEventListener("copy", (e) => {
      e.preventDefault();
      const json = JSON.stringify({ message: "Hello" });
      e.clipboardData.setData("application/json", json);
    });
    

• Histórico de clipboardData

  • A API assíncrona de Clipboard foi adicionada em 2017, mas clipboardData é um recurso bem mais antigo
  • clipboardData foi introduzido pela primeira vez em 1997 no Internet Explorer 4

• Scripts não confiáveis

  • Scripts não confiáveis só podem gravar no clipboard tipos de dados limitados
  • Ao tentar gravar dados no clipboard em eventos não confiáveis, a operação falha

• Criando um botão de copiar

  • Aplicações web como Google Docs usam document.execCommand("copy") para disparar um evento de cópia confiável
  • Com esse método, também é possível gravar tipos de dados arbitrários no clipboard a partir de um evento de clique

• Criando um botão de colar

  • execCommand("paste") funciona de forma diferente dependendo do navegador e do sistema operacional
  • O Safari exige confirmação do usuário, enquanto Chrome e Edge só oferecem suporte no Windows

• Copiar e colar no Figma

  • O Figma usa representação HTML para armazenar dados no clipboard
  • Ele salva no clipboard dados codificados em base64 dentro da representação HTML

• Formatos personalizados da web (Pickling)

  • Suportado em navegadores baseados em Chromium desde 2022
  • Permite que aplicações web gravem tipos de dados personalizados por meio da API assíncrona de Clipboard
  • Exemplo:

    const json = JSON.stringify({ message: "Hello, world" });
    const jsonBlob = new Blob([json], { type: "application/json" });
    const clipboardItem = new ClipboardItem({ [`web ${jsonBlob.type}`]: jsonBlob });
    navigator.clipboard.write([clipboardItem]);
    

Resumo do GN⁺

• Este artigo explora a API de Clipboard da web e as formas de armazenar dados
• Explica as diferenças entre a API assíncrona de Clipboard e a API de eventos de clipboard
• Analisa como Google Docs e Figma implementam copiar/colar
• Apresenta a proposta de formatos personalizados da web (Pickling)
• Pode ajudar desenvolvedores web com informações úteis e a entender as limitações da API de Clipboard