Formatos personalizados da Web para a API Async Clipboard

Thomas Steiner

Até agora, a API Async Clipboard oferecia um conjunto limitado de Tipos MIME a serem copiados e colados na área de transferência do sistema, especificamente: text/plain. text/html e image/png. O navegador normalmente limpa isso para, por exemplo, remover Elementos script ou links javascript: de uma string HTML ou para evitar PNG bombas de descompressão.

Em alguns casos, no entanto, pode ser desejável oferecer suporte a conteúdo não limpo na área de transferência:

• Situações em que o aplicativo lida com a desinfecção.
• Situações em que é crucial que os dados copiados sejam idênticos aos colados.

Para esses casos, a API Async Clipboard agora oferece suporte a formatos personalizados da Web que permitem que os desenvolvedores gravem para a área de transferência.

Suporte ao navegador

A API Async Clipboard, com suporte a imagens, tem suporte no Chromium 76. Personalização da Web formatos para a API Async Clipboard são compatíveis com o Chromium para computador e dispositivos móveis a partir de versão 104.

Gravar formatos personalizados da Web na área de transferência

Gravar formatos personalizados da Web na área de transferência é quase idêntico a gravar formatos limpos, exceto pelo requisito para incluir a string "web " no início (incluindo o espaço à direita) do tipo MIME do blob.

// Fetch remote JPEG and GIF images and obtain their blob representations.
const [jpegBlob, gifBlob] = await Promise.all([
  fetch('image.jpg').then((response) => response.blob()),
  fetch('image.gif').then((response) => response.blob()),
]);

try {
  // Write the image data to the clipboard, prepending the blobs' actual
  // types (`"image/jpeg"` and "image/gif") with the string `"web "`, so
  // they become `"web image/jpeg"` and `"web image/gif"` respectively.
  // The code elegantly makes use of computed property names:
  // https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names.
  const clipboardItem = new ClipboardItem({
    [`web ${jpegBlob.type}`]: jpegBlob,
    [`web ${gifBlob.type}`]: gifBlob,
  });
  await navigator.clipboard.write([clipboardItem]);
} catch (err) {
  console.error(err.name, err.message);
}

Leitura de formatos personalizados da Web da área de transferência

Assim como na escrita, a leitura de formatos personalizados da Web na área de transferência é quase idêntica à lendo formatos limpos. A única diferença é que o app agora precisa procurar itens na área de transferência cujo tipo comece com "web ".

try {
  // Iterate over all clipboard items.
  const clipboardItems = await navigator.clipboard.read();
  for (const clipboardItem of clipboardItems) {
    for (const type of clipboardItem.types) {
      // Discard any types that are not web custom formats.
      if (!type.startsWith('web ')) {
        continue;
      }
      const blob = await clipboardItem.getType(type);
      // Sanitize the blob if you need to, then process it in your app.
    }
  }
} catch (err) {
  console.error(err.name, err.message);
}

Interoperabilidade com apps específicos da plataforma

Formatos personalizados da Web, como web image/jpeg, não são algo que o formato típico específico de plataforma os aplicativos entendam (já que esperariam image/jpeg). Com o tempo, os apps preocupados que adicionam suporte a esses formatos, como uma permissão, se os desenvolvedores considerarem que o uso da Web que os formatos personalizados sejam relevantes para os usuários. Na área de transferência do sistema operacional, os vários formatos estão presentes em vários formatos prontos para consumo, como pode ser visto Captura de tela para macOS abaixo.

Demonstração

Confira a demonstração abaixo confira o código-fonte para saber como a demonstração funciona.

Agradecimentos

Este artigo foi revisado por Joe Medley e François Beaufort. Imagem principal de Neon Tommy, usada sob um Licença CC BY-SA 2.0 (em inglês).