Article about Custom Clipboard Formats for the Web

[Jermolene]

This article has some very interesting technical details about clipboard handling in web apps:

https://alexharri.com/blog/clipboard

Quote:

Figma's copy button writes two representations to the clipboard: text/plain and text/html. This was surprising to me at first. How would Figma represent their various layout and styling features in plain HTML?

But looking at the HTML, we see two empty span elements with data-metadata and data-buffer properties:

<meta charset="utf-8">
<div>
  <span data-metadata="<!--(figmeta)eyJma[...]9ifQo=(/figmeta)-->"></span>
  <span data-buffer="<!--(figma)ZmlnL[...]P/Ag==(/figma)-->"></span>
</div>
<span style="white-space:pre-wrap;">Text</span>

I think that the tl;dr is that we are probably better off for the moment sticking with the older clipboard APIs rather than switching to the new async clipboard API. We might also want to investigate an approach like Figma's which appears to give us a robust way to exchange arbitrary custom data structures.

[pmario]

I did read that one too, but was not sure if I should post it. -- Then I forgot about it.

I also found the figma-approach very interesting.

... We might also want to investigate an approach like Figma's which appears to give us a robust way to exchange arbitrary custom data structures.

I absolutely agree. That would be worth some experiments. It also looks like, that the data-* content is also cryptographically signed. eg: == at the end and the fileKey: .... in the JSON