El portapapeles web y las distintas formas de almacenar datos

El portapapeles web y las formas de almacenar datos

• Uso de la API del portapapeles web

  • Cuando pegas en Google Docs algo copiado desde un sitio web, se conserva el formato, pero si lo pegas en VS Code, solo se pega el texto
  • El portapapeles almacena la información en múltiples representaciones asociadas a tipos MIME
  • La especificación del portapapeles de W3C exige compatibilidad con tres tipos de datos: text/plain, text/html, image/png

• Uso de la API asíncrona del portapapeles

  • Cómo leer una representación 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();
        // Procesar HTML...
      }
    }
    

  • Cómo escribir varias representaciones en el portapapeles:

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

• Otros tipos de datos

  • Si intentas escribir datos JSON en el portapapeles, ocurre un error:

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

  • El tipo application/json no está soportado

• Propiedad isTrusted

  • La propiedad isTrusted indica si un evento fue despachado por el user agent
  • Solo se puede escribir datos en el portapapeles desde eventos confiables

• API de eventos del portapapeles

  • En los eventos copy, cut, paste, se puede leer o escribir datos usando la propiedad clipboardData
  • Cómo escribir datos JSON en el portapapeles:

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

• Historia de clipboardData

  • La API asíncrona del portapapeles se agregó en 2017, pero clipboardData es una funcionalidad mucho más antigua
  • clipboardData se introdujo por primera vez en Internet Explorer 4 en 1997

• Scripts no confiables

  • Los scripts no confiables solo pueden escribir tipos de datos limitados en el portapapeles
  • Si se intenta escribir en el portapapeles desde un evento no confiable, la operación falla

• Crear un botón de copiar

  • Aplicaciones web como Google Docs usan document.execCommand("copy") para disparar un evento de copia confiable
  • Con este método, también se pueden escribir tipos de datos arbitrarios en el portapapeles desde un evento de clic

• Crear un botón de pegar

  • execCommand("paste") funciona de manera distinta según el navegador y el sistema operativo
  • Safari requiere confirmación del usuario, mientras que Chrome y Edge solo lo soportan en Windows

• Copiar y pegar en Figma

  • Figma usa una representación HTML para almacenar datos en el portapapeles
  • Guarda en el portapapeles datos codificados en base64 dentro de la representación HTML

• Formatos personalizados web (Pickling)

  • Está soportado en navegadores basados en Chromium desde 2022
  • Permite que las aplicaciones web escriban tipos de datos personalizados mediante la API asíncrona del portapapeles
  • Ejemplo:

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

Resumen de GN⁺

• Este artículo explora la API del portapapeles web y las formas de almacenar datos
• Explica las diferencias entre la API asíncrona del portapapeles y la API de eventos del portapapeles
• Analiza cómo implementan copiar/pegar Google Docs y Figma
• Se presenta la propuesta de formatos personalizados web (Pickling)
• Puede ser información útil para desarrolladores web y ayudar a entender las limitaciones de la API del portapapeles