Remove clipboard-copy dependency from CodeSnippet, CopyButton

[metonym]

Refs:
#669
#598
#595

The purpose of this PR is to remove the non-ESM package clipboard-copy – which is used by CodeSnippet and CopyButton to copy text – to prevent additional svelte.config.js configuration when using this library with SvelteKit. clipboard-copy was initially added in version 0.32.

Instead, CodeSnippet and CopyButton use the native, asynchronous Clipboard API to copy text. The functionality is exported as a prop so the user can override the behavior as needed.

Note: the clipboard.writeText API is not supported in IE 11 nor Safari iOS version 13.3 or lower. caniuse estimates that ~91% of global users use a browser compatible with the API.

Overriding default copy behavior

Override the default functionality through the copy prop.

<script>
  import copy from "clipboard-copy";
  import { CopyButton } from "carbon-components-svelte";
</script>

<CopyButton text="hello" copy={text => copy(text)} />

Preventing default copy behavior

Pass a "noop" empty function to prevent the component from copying text at all.

<script>
  import { CopyButton } from "carbon-components-svelte";
</script>

<CopyButton text="hello" copy={() => {}} />

---

Breaking Changes

• removes clipboard-copy from the list of direct dependencies

Todo:

• update docs to explain updated implementation
• add examples of overriding the default copy prop

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/carbon-svelte/carbon-components-svelte/FwGQvpGMinUAzG76Q97yxRosMCGK
✅ Preview: https://carbon-components-svelte-git-remove-clipbo-ec4034-carbon-svelte.vercel.app