浏览器复制/粘贴组件

Question

We are using new clipboard API to implement the browser/operating system wide copy paste.

We have a set of components (Assume it like a flow charts which have connected div) and that is build from a simple json.

Our goal is to implement Copy and paste. We have a underlying JsON in hand, i tried to save the Json file in clipboard.

Now the real problem starts:

1: Copy and Paste is operating system wide, so how can i know that, currently copied element is json and that is what we needed to build the flow. Eg: a user can copy whatever they want, but i only want the data which my system can parse.

2: How generally these type of applications works, for example, on Slack, i copied a formatted markdown message into my clipboard and i pasted the same into a text editor, but i don't see any markdown command on the selected text, but somehow i pasted the same thing in slack, i got the same message which i copied earlier.

Is anyone have done Copy/Paste of components, Any help highly appreciated.

Answer 1

Here's a basic example for how to do clipboard manipulation. Read up on paste and copy events for more detailed info. You could also try to set a different content-type for the clipboard data. This is probably how Slack does it: Set one clipboard entry in plain text (without markdown formatting) and one in 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>