Internal copy not working on macOS Safari

[Alyaron]

Thanks for the great project!
The readme describes the following known limitation:

Full clipboard support in the web app requires a browser supporting the Async Clipboard API w/ Images, namely Chrome 76+ at the time of writing.
In other browsers you can still copy with Ctrl+C, cut with Ctrl+X, and paste with Ctrl+V, but data copied from JS Paint can only be pasted into other instances of JS Paint. External images can be pasted in.

On Safari on macOS,

• Pasting an external image works as described,
• Copying selection (both Ctrl+C and the menu entry) displays the following error though:

Failed to copy to the clipboard
NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
write@[native code]
@https://jspaint.app/src/functions.js:2338:30
sanity_check_blob@https://jspaint.app/src/functions.js:3772:17
@https://jspaint.app/src/functions.js:2337:21

And indeed it doesn't copy anything, as the command Paste will paste whatever was in the clipboard before.

What I would have expected by reading the readme, is to still be able to copy internally to JS Paint, in order to paste to another part of the same image within JS Paint.

I saw other clipboard issues being reported, but not this one, would you be able to help me figure out if it's a bug, a limitation, or myself doing something wrong? Thanks again.

[1j01]

I believe what's happening here is JS Paint is only falling back if the browser doesn't report support for the Async Clipboard API, but Safari is reporting support even though it doesn't support copying images to the clipboard, only text. (That, or else the feature is disabled as some sort of security measure.)

It probably needs to use the fall back in the case that it gets an error, not just if the browser doesn't say it supports the API.

Relevant code:

jspaint/src/functions.js

Lines 2575 to 2597 in da99496

	if (!navigator.clipboard || !navigator.clipboard.write) {
	if (execCommandFallback) {
	return try_exec_command("copy");
	} else {
	show_error_message(`${localize("Error getting the Clipboard Data!")} ${recommendationForClipboardAccess}`);
	// show_error_message(`The Async Clipboard API is not supported by this browser. ${browserRecommendationForClipboardAccess}`);
	return;
	}
	}
	selection.canvas.toBlob(blob => {
	sanity_check_blob(blob, () => {
	navigator.clipboard.write([
	new ClipboardItem(Object.defineProperty({}, blob.type, {
	value: blob,
	enumerable: true,
	}))
	]).then(() => {
	window.console && console.log("Copied image to the clipboard.");
	}, error => {
	show_error_message("Failed to copy to the Clipboard.", error);
	});
	});
	});

Related issues:

• Copy/cut/paste don't work on my ipad. #241
• Consider implement copy and paste function with LocalStorage on systems which do not natively allow copy & paste #286