feat(example): Copy svg to clipboard

[miles-crighton]

Thanks a bunch for developing this super fun library. While using your repo's example app for a recent project of mine I needed to copy the drawn svg element into Sketch to build out a design.

I thought it'd be super handy to have a copy to clipboard button so that you can copy and paste directly into a design tool like Figma/Sketch. Check out a gif below.

I tried to make the feature code idiomatic of how you've been building it using your state library (a neat little rabbit hole of investigation) while making sure not to add any extra dependencies.

I wasn't sure precisely whether I could include the async util fn for clipboard copying to the createState object. First I tried simply putting it an action but the proxy to the data was revoked. I then tried using the asyncs example in the docs, but couldn't figure out how to directly invoke the async function using on event chains.

So, I settled on just dispatching the action after the async clipboard utility returned the appropriate message.

I also created a small accessible alert component for letting the user know the result of the copy request. It color adjusts appropriately for light and dark mode.

Hopefully this might be of interest for adding to the example, let me know. If not, thanks again for building these libraries. 👍

[steveruizok]

This is excellent! I've improved the copy function a bit so that it clips down to just the current viewBox (with some padding). Otherwise looks great, thank you!

[miles-crighton]

Neat changes, thanks for merging! 👍

[steveruizok]

Also, congrats for giving the state management a try—the docs are somewhat lacking, especially around async stuff. If you're still interested in seeing how it would be done, I'll bring it into the state machine so that we can call it from a keyboard shortcut, too.

[miles-crighton]

That'd be great, I was messing around with it for a little while so it'd be cool to see how you'd do it.