mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

Remove clipboard-copy dependency from CodeSnippet, CopyButton (#726)

Browse source 
* chore(deps): remove clipboard-copy

* feat: add copy prop, use navigator.clipboard API

* docs: add clipboard-copy back to docsite for more browser support

* docs(component-api): use outbound link

* docs: add override/prevent copy examples
This commit is contained in:
Eric Liu 2021-07-05 12:12:28 -07:00 • committed by GitHub
commit 921c3e121a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 163 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

25
docs/src/pages/components/CodeSnippet.svx
View file

@ -1,5 +1,5 @@
<script>
import { CodeSnippet, InlineNotification, Link } from "carbon-components-svelte";
import { CodeSnippet } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
let code = `// helpers.js
@ -27,14 +27,31 @@ let comment = `
`
</script>
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">As of version 0.32, the CodeSnippet will copy the provided `code` text when clicking the copy button.</div>
</InlineNotification>
This component uses the native, asynchronous [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText) to copy text.
Please note that the `clipboard.writeText` API is not supported in [IE 11 nor Safari iOS version 13.3 or lower](https://caniuse.com/mdn-api_clipboard_writetext).
You can override the default copy functionality with your own copy text implementation. See [Overriding copy functionality](#overriding-copy-functionality).
### Default (single-line)
<CodeSnippet code="yarn add -D carbon-components-svelte" />
### Overriding copy functionality
To override the default copy behavior, pass a custom function to the `copy` prop.
In this example, we use the open source module [clipboard-copy](https://github.com/feross/clipboard-copy) to copy the text instead of the default Clipboard API.
<FileSource src="/framed/CodeSnippet/CodeSnippetOverride" />
### Preventing copy functionality
To prevent text from being copied entirely, pass a "noop" function to the `copy` prop.
<CodeSnippet code="yarn add -D carbon-components-svelte" copy={() => {}} />
### Inline
<CodeSnippet type="inline" code="rm -rf node_modules/" />