fix: clipboard doesn't work on safari #14
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I've solved the issue about clipboard on safari. Basically, we can't use the writeText and write functions in the following contexts:
So, for that reason it was necessary to create a method
getSvgContent
to fetch data. I based on this documentation: Webkit clipboard to create it.After that, it was able to copy svg's content on safari. However, there were troubles on Chrome because the function
write
not allow to copy strings. I ended up following this tutorial, as you can seeIt is necessary to use Blob if we want to copy a text. Finally, another issue was that ClipboardItem is not supported on Firefox, hence inside of catch block, there is a logic when a user try to copy svg's content on Firefox. You can see it like a fallback. See the compatibility.
Before PR
before.mov
After PR
after.mov
Tested on Safari(15.6) , Chrome(103.0), Microsoft Edge(104.0), Firefox(103.0.1) and Opera(89.0)
BTW, I didn't test on iOS and iPadOS