Clipboard API in iFrame not allowed / execCommand deprecated though

[lukas-a-brand]

In the past, it was possible to enable clipboard functionality like copy/paste in field type plugins.

As execCommand seems to be deprecated nowadays, while the navigator.clipboard API would be usable in modern solutions.

As Field Type Plugins run in iframes, this would require the encapsulating iframes to have allowed options set for them to work.

---

Expected Behavior

Iframes allow the read/write access to the Clipboard API.

<iframe src="index.html" allow="clipboard-read; clipboard-write">
... 
</iframe>

So the following would work.

await navigator.clipboard.writeText('hello my dear copied thing')

(Optimally also in the development Sandbox ofc)

Current Behavior

As the iframe settings encapsulating the field type plugin currently do not allow that, any read or write access to the Clipboard API is blocked.

References

• https://developer.mozilla.org/en-US/docs/Web/API/Clipboard
• https://stackoverflow.com/a/65547902

[johannes-lindgren]

Hello @lukas-a-brand! We have an internal feature request for this that we are reviewing. There is a workaround:

• The users of plugins can still copy and paste with their keyboard. So there is a viable workaround.
• Not all browsers support the enture clipboard API—for example Firefox and Safari—which means that even if we do implement this feature, the plugin will still need to support keyboards for these browsers.

[lukas-a-brand]

Hey @johannes-lindgren!
Thanks for finally looking into it.

May I ask what you are basing the lack of support on?
The official Browser support overview seems to be there on every browser:
https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

The workaround you mentioned sadly does not satisfy at all for the usecase here as it copies the underlying settings object used in one plugin instance and lets it be imported into another component theme plugin instance to be imported.
Letting users copy this out of a text field per normal keyboard copy-paste is already UX that saddens me, but for importing, I would need to even create an extra input field and then read from that.

That is the whole sense on why the Clipboard API is existing I guess. (;

Is there anything that still stands against allowing field type plugins to use the Clipboard API?

[johannes-lindgren]

Hey @lukas-a-brand, you're absolutely right, I see that it's available since Firefox 127 (released 2024-06-11):

(Which makes me realize that we can do an improvement on the rich text editor for Firefox users)

Thank you for explaining, I understand your use case better now.

Is there anything that still stands against allowing field type plugins to use the Clipboard API?

Since it affects the permission policy, we're discussing it internally—let's see what comes out of it 🙂

[lukas-a-brand]

Heyhey @johannes-lindgren.

Awesome.

I'm happy it led to some additional improvement possibilities as well. (;

Hopefully, it works out - my Field Type Plugin has waited for almost a year now already to get some of the nice copy-paste + import functionality out of the door :D

[lukas-a-brand]

Hey, @johannes-lindgren
Do you maybe have some more info on the timing this would be implemented?
Thanks a lot.