fix: clipboard doesn't work on safari

[xavimondev]

I've solved the issue about clipboard on safari. Basically, we can't use the writeText and write functions in the following contexts:

1. Trying to copy a string as a result of a promise.
2. If we use await and then the functions mentioned above, it will throw an exception because Apple doesn't allow this. Check this answer on stackoverflow.

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 see

async function copy() {
  const image = await fetch('kitten.png').then(response => response.blob());
  const text = new Blob(['Cute sleeping kitten'], {type: 'text/plain'});
  const item = new ClipboardItem({
    'text/plain': text,
    'image/png': image
  });
  await navigator.clipboard.write([item]);
}

It 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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
svgl	✅ Ready (Inspect)	Visit Preview	Aug 7, 2022 at 5:20AM (UTC)

[pheralb]

🚀🚀🚀

[pheralb]

🚀 Muchas gracias 🚀