Le presse-papiers web et les différentes façons de stocker les données

Le presse-papiers web et les modes de stockage des données

• Utilisation de l’API Web Clipboard

  • Quand on colle dans Google Docs un contenu copié depuis un site web, la mise en forme est conservée, alors que dans VS Code seul le texte est collé
  • Le presse-papiers stocke les informations sous plusieurs représentations associées à des types MIME
  • La spécification W3C du presse-papiers impose la prise en charge de trois types de données : text/plain, text/html, image/png

• Utilisation de l’API Clipboard asynchrone

  • Comment lire une représentation spécifique :

    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();
        // Traitement du HTML...
      }
    }
    

  • Comment écrire plusieurs représentations dans le presse-papiers :

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

• Autres types de données

  • Une erreur se produit si l’on essaie d’écrire des données JSON dans le presse-papiers :

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

  • Le type application/json n’est pas pris en charge

• Propriété isTrusted

  • La propriété isTrusted indique si l’événement a été dispatché par l’agent utilisateur
  • On ne peut écrire des données dans le presse-papiers qu’à partir d’événements de confiance

• API des événements du presse-papiers

  • Dans les événements copy, cut et paste, on peut lire/écrire des données via la propriété clipboardData
  • Comment écrire des données JSON dans le presse-papiers :

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

• Histoire de clipboardData

  • L’API Clipboard asynchrone a été ajoutée en 2017, mais clipboardData est une fonctionnalité bien plus ancienne
  • clipboardData a été introduit pour la première fois dans Internet Explorer 4 en 1997

• Scripts non fiables

  • Les scripts non fiables ne peuvent écrire dans le presse-papiers qu’un nombre limité de types de données
  • Une tentative d’écriture dans le presse-papiers depuis un événement non fiable échoue

• Créer un bouton de copie

  • Les applications web comme Google Docs déclenchent un événement de copie fiable avec document.execCommand("copy")
  • Cette méthode permet aussi d’écrire des types de données arbitraires dans le presse-papiers depuis un événement de clic

• Créer un bouton de collage

  • execCommand("paste") se comporte différemment selon le navigateur et le système d’exploitation
  • Safari demande une confirmation de l’utilisateur, tandis que Chrome et Edge ne le prennent en charge que sous Windows

• Copier-coller dans Figma

  • Figma utilise une représentation HTML pour stocker les données dans le presse-papiers
  • Les données sont enregistrées dans le presse-papiers en étant incluses sous forme encodée en base64 dans la représentation HTML

• Formats web personnalisés (Pickling)

  • Pris en charge dans les navigateurs basés sur Chromium depuis 2022
  • Permet aux applications web d’écrire des types de données personnalisés via l’API Clipboard asynchrone
  • Exemple :

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

Le récapitulatif de GN⁺

• Cet article explore l’API Web Clipboard et la manière dont les données y sont stockées
• Il explique les différences entre l’API Clipboard asynchrone et l’API des événements du presse-papiers
• Il analyse la manière dont Google Docs et Figma implémentent le copier-coller
• Il présente la proposition des formats web personnalisés (Pickling)
• Des informations utiles pour les développeurs web, qui aident à comprendre les limites de l’API Clipboard