Estamos utilizando una nueva API de portapapeles para implementar la copia y pegado en todo el navegador/sistema operativo.
Tenemos un conjunto de componentes (supóngalo como un diagrama de flujo que tiene div conectado) y que se construye a partir de un json simple.
Nuestro objetivo es implementar Copiar y pegar. Tenemos un JsON subyacente en la mano, traté de guardar el archivo Json en el portapapeles.
Ahora empieza el verdadero problema:
1: Copiar y pegar es para todo el sistema operativo, entonces, ¿cómo puedo saber que el elemento actualmente copiado es json y eso es lo que necesitábamos para construir el flujo? Por ejemplo: un usuario puede copiar lo que quiera, pero solo quiero los datos que mi sistema puede analizar.
2: En general, cómo funcionan este tipo de aplicaciones, por ejemplo, en Slack, copié un mensaje de descuento formateado en mi portapapeles y lo pegué en un editor de texto, pero no veo ningún comando de descuento en el texto seleccionado, pero de alguna manera pegué lo mismo en Slack, recibí el mismo mensaje que copié anteriormente.
¿Alguien ha hecho Copiar/Pegar componentes? Cualquier ayuda es muy apreciada.
Aquí hay un ejemplo básico de cómo manipular el portapapeles. Lea sobre los eventos de pegar y copiar para obtener información más detallada. También puede intentar establecer un content-type diferente para los datos del portapapeles. Probablemente así es como Slack lo hace: establece una entrada del portapapeles en texto sin formato (sin formato de descuento) y otra en Markdown.
const input = document.getElementById("testInput"); input.addEventListener("copy", (e) => { console.log("copied!"); e.clipboardData.setData('text/plain', JSON.stringify({ test: "value" })); e.preventDefault(); }); input.addEventListener("paste", (e) => { console.log("pasted!"); //console.log(e); if (e.clipboardData.types[0] == "text/plain") { const txt = e.clipboardData.getData('text') try { const json = JSON.parse(txt); // TODO: validate that object has correct keys console.log(json); e.preventDefault(); // I added prevent default, since you probably want to have your own logic for rendering the clipboard content } catch (e) { console.error("text is not JSON parseable: " + txt); } } }); <input id="testInput"></input>