Safari share links aren't copied to clipboard

[maxwofford]

[maxwofford]

The share link (1) button should create a share link and add it to the user's clipboard. On safari it notifies the user that the link was added to their clipboard (2), but when pasting the share link doesn't come out (whatever was previously in the clipboard does).

[maxwofford]

Forgot to mention, this works in FF & Chrome. This is probably the related code: https://github.com/hackclub/game-lab/blob/0dcd140b1814897bd1d425f62ca8c4273999fcc7/dispatch.js#L7-L14

[maxwofford]

Now running into this on FF

[cjdenio]

Yeah, most browsers only let you copy to the clipboard as a direct result of user interaction.

Chrome lets you explicitly request permission via the Permissions API, but Firefox and Safari don't support it yet

[zachlatta]

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

[zachlatta]

So I've done a little research here, and it turns out the issue is that Safari has some security policies in place that prevent any clipboard commenting to happen unless a DOM event is in scope (so to ensure that a DOM event triggered the copy to clipboard).

I am not sure what the appropriate way of passing the DOM event to the copy function would be with the architecture of Game Lab. @leomcelroy / @cedric-h: this might be a good thing for one of you to handle.

I've tried using various 3rd party clipboard libraries and none of the ones I've tried work, so I'm pretty sure it's down to the DOM event thing.

It looks like this might be a very recent thing. There are some other repos with this issue popping up, notably https://github.com/apache/superset/issues/18154.

[maxwofford]

Copying doesn't work in any browser for me. Reopening

[maxwofford]

The diff for https://github.com/hackclub/gamelab/pull/67/files doesn't make sense to me– seems like something was mis-commited or something. If I'm reading it right it seems like it removes copy logic.

[faisalsayed10]

@maxwofford @leomcelroy this is my main commit - a7618a3 (#67) i think something has went wrong, and we've mis-commited something

[faisalsayed10]

also @leomcelroy this commit of yours kinda reverted my commit b50ee51 (#67)

[maxwofford]

Something that might help for fixing this issue: saves are deterministic. Even before we make a post request, we know the share link will be gamelab.hackclub.com/?id=MD5 where MD5 is the hash of the game state

CC'ing @cedric-h who can correct me if I said something wrong.

[isabellalacerda]

Copying also doesn't work in any browser for me. How can i fix this?

[maxwofford]

Can you share the URL that screenshot was taken at? It doesn't look like a part of the gamelab interface

[Peiprjs]

You can copy the URL from the console. Otherwise, it only copies some Javascript

[alhardwarehyde]

@grymmy can you reproduce this?

[alhardwarehyde]

Ignore my ask. This is an ongoing issue

[grymmy]

An update on this issue - while the editor still does not correctly copy to the clipboard on safari, it shows a high-quality error and feedback to the user when it files to copy to the clipboard. As a result, I believe this is quite low priority - but I've confirmed yes, still a present bug

[maxwofford]

I believe the filenaming is deterministic (ie. even before you save, we know your share link will be https://sprig.hackclub.com/share/XXXXX and XXXXX is a known value), so you can copy to clipboard immediately to fix this error.

EDIT: safari only lets access to the clipboard immediately in the context of an event– ie. a button click. They don’t allow it anywhere else (ie. the async context of a then after a fetch). The initial implementation of saving accounted for this by giving a deterministic share link so we could copy the link immediately instead of waiting for the fetch to finish. This may have changed since we launched. https://wolfgangrittner.dev/how-to-use-clipboard-api-in-safari/