Fix 'Copy Attribution' buttons on safari

[elharony]

As mentioned in #277 by @janeatcc that Copy Attribution buttons aren't working properly on Safari.
The problem was using the document.execCommand("copy") API and it isn't supported in Safari.

I tried to find a working solution for it, and I've attached a reference to it.

[brenoferreira]

I saw the post on Stack Overflow and this solution seems to have some issues on some versions of Safari, like a keyboard showing, and the created element being set on focus and distracting the user. I think it's better to use something like clipboard.js which already solves these problems.

[elharony]

Hi @brenoferreira ,

It's my first time to hear about clipboard.js, but I will read its docs and try to implement it. Can you give me a chance to do so? Thanks!

[kgodey]

Marked as in progress since @elharony is working on it.

[elharony]

Hi @brenoferreira ,

Here are my the latest updates about clipboard.js:

• We can't determine the type of copy we want. (i.e. text/html or text/plain). So, everything will be copied as Rich Text. Can't make it Plain or HTML as clipboard.js get triggered once we click on the Copy button, pointing to its target Image Attribution Paragraph, which means - We can't even hard-coded this part while using clipboard.js.
• Other developers already mentioned this problem here
• The clipboard.js author opened an issue about upgrading it to V3.0 since 23 Jan 2019 and it's not released yet.

It seems to be a trade-off here. What do you think? Should we stick with the current one that might have some problems with a few Safari Versions? Or use - almost - fully supported one, and lose a major feature of the page (HTML Code, Plain Text)?

Until I hear back from you, I will try to find a better alternative! 🔍

[brenoferreira]

This is fixed in #323
Thank you for your contribution

[elharony]

Thanks for your support & guidance, @brenoferreira ! 🙏