Type de données clipboardData personnalisé pour tous les navigateurs

Question

Nous essayons de permettre à nos utilisateurs de copier-coller des données entre deux systèmes. D'une page web à une application Electron.

L'utilisateur clique sur un bouton, ce qui déclenche un événement de copie à l'aide de la fonction copier vers le tableau .

import copy from "copy-to-clipboard";

const copyHandler = (evt) => {
    evt.preventDefault();

    evt.clipboardData.setData("text/plain", url);
    evt.clipboardData.setData("mumbo/jumbo", JSON.stringify({
        foo: "bar"
    }));
}

document.addEventListener("copy", copyHandler);
copy();
document.removeEventListener("copy", copyHandler);

Dans l'application Electron, nous écoutons l'événement "coller" :

onPaste = (evt) => {
    if(evt.clipboardData.getData("mumbo/jumbo")) {
        // Handle custom data-type
    } else if(evt.clipboardData.getData("text/html")) {
        // Handle html
    } else {
        // Handle plain text
    }
}

Lorsque l'utilisateur utilise notre page web dans Chrome, tout fonctionne. Nous pouvons lire les données pour le type de données personnalisé. Mais lorsque l'utilisateur visite la page web dans Firefox evt.clipboardData.getData("mumbo/jumbo") renvoie un résultat indéfini. Les données que nous avons définies pour text/plain et text/html seront toujours disponibles.

Si nous collons les données dans Firefox evt.clipboardData.getData("mumbo/jumbo") renverra correctement les données que nous avons définies.

J'ai essayé de trouver des informations pour savoir si cela était censé fonctionner, mais je n'ai rien trouvé. Les types de données personnalisées clipboardData sont-ils pris en charge par les navigateurs, et je fais quelque chose de mal ? Ou bien cela n'a jamais fonctionné ?

Faire la même chose avec application/json ne fonctionne pas non plus entre Firefox et Electron. Les seuls types de données que nous avons réussi à faire fonctionner sont les suivants text/plain et text/html mais tous deux sont déjà utilisés à d'autres fins.

Answer 1

Finalement, j'ai passé en revue tous les types de données énumérés dans le document Projet de document de travail du W3C . À ce stade, je ne peux obtenir que text/plain et text/html pour fonctionner lors du copier-coller entre Firefox et Chrome.

J'ai fini par utiliser text/html pour transmettre les données :

const copyHandler = (evt) => {
    evt.preventDefault();

    evt.clipboardData.setData("text/plain", url);
    evt.clipboardData.setData("text/html", `<div id="${btoa("mumbo/jumbo")}" data-foo="${bar}"></div>`);
}

J'encode Base64 l'ID avec btoa() pour essayer de minimiser les conflits avec les colles HTML régulières.