Skip to content

Internal copy not working on macOS Safari #335

Open
@Alyaron

Description

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.

Activity

changed the title Copy not working on macOS Safari Internal copy not working on macOS Safari on Mar 19, 2024
1j01

1j01 commented on May 31, 2024

@1j01
Owner

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:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Internal copy not working on macOS Safari · Issue #335 · 1j01/jspaint