Clipboard API

[TatuLund]

Describe your motivation

Requests related different clipboard actions are relatively common by our community. Currently Flow lacks easy API for this. It is however possible to implement clipboard actions using Element API and JavaScript using regular Browser API's.

Typical examples are like these

1. Copy text from clipboard -> https://cookbook.vaadin.com/copy-from-clipboard

2. Copy text to clipboard -> https://cookbook.vaadin.com/copy-to-clipboard

3. Paste image from clipboard -> https://gist.github.com/TatuLund/7a5d38f6bb89bb764eaf677e25364524

I assume these are the most common ones as code examples do exists for those due popular demand. Naturally there other analogous cases like copying image to clipboard, or instead text of image handle any common file type.

Describe the solution you'd like

Easy to use Clipboard API in Flow that can handle the most common use cases.

Describe alternatives you've considered

Implementing by Element API and JavaScript

[tepi]

First example "Copy text from clipboard" does not work on Firefox or Safari on macOS - seemingly nothing happens, a permission prompt is not produced. On Chrome a permission is asked for and once it's given, copying works.

If this can't be made to function on Safari/Firefox, we might not want to add it to Flow.

[mshabarov]

For readText() in particular, Safari says it supports it. Firefox doesn't (only in browser's extensions). See https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

[tepi]

Yes, noticed that as well, but I can't trigger the prompt in Safari (at least on localhost). I get this in the console:

> navigator.clipboard.readText();
< Promise = $2

result: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

code: 0

column: 29

line: 3

message: "The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission."

name: "NotAllowedError"

stack: "readText@[native code]↵global code@↵evaluateWithScopeExtension@[native code]↵@↵_wrapCall@"

Error Prototype

status: "rejected"

Promise Prototype

[mshabarov]

I got the same, Safari gives me

Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

and FireFox does nothing silently.

Probably that's only for Mac, need to test.

Anyway, I would propose to not implement this feature until navigator.clipboard browser API is supported and works in all Vaadin supported browsers without user interaction. Or at least until we realise what a workaround would be (e.g. how to avoid permission rejection).

[TatuLund]