mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
Remove clipboard-copy dependency from CodeSnippet, CopyButton (#726)
* 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
GitHub
parent
6ed4aaa86e
commit
921c3e121a
19 changed files with 163 additions and 68 deletions
|
|
@ -839,6 +839,16 @@
|
|||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "copy",
|
||||
"kind": "let",
|
||||
"description": "Override the default copy behavior of using the navigator.clipboard.writeText API to copy text",
|
||||
"type": "(code: string) => void",
|
||||
"value": "async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }",
|
||||
"isFunction": true,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "expanded",
|
||||
"kind": "let",
|
||||
|
|
@ -1911,6 +1921,16 @@
|
|||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "copy",
|
||||
"kind": "let",
|
||||
"description": "Override the default copy behavior of using the navigator.clipboard.writeText API to copy text",
|
||||
"type": "(text: string) => void",
|
||||
"value": "async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }",
|
||||
"isFunction": true,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
|
||||
import {
|
||||
Link,
|
||||
OutboundLink,
|
||||
StructuredList,
|
||||
StructuredListHead,
|
||||
StructuredListRow,
|
||||
|
|
@ -43,10 +44,9 @@
|
|||
|
||||
<p style="margin-bottom: var(--cds-layout-02)">
|
||||
Source code:
|
||||
<Link inline size="lg" href="{source}" target="_blank">
|
||||
<OutboundLink inline href="{source}">
|
||||
{component.filePath}
|
||||
<Launch16 />
|
||||
</Link>
|
||||
</OutboundLink>
|
||||
</p>
|
||||
|
||||
<h3 id="props">Props</h3>
|
||||
|
|
@ -94,14 +94,12 @@
|
|||
Carbon Svelte icon
|
||||
</TooltipDefinition>
|
||||
{:else if type.startsWith("HTML")}
|
||||
<Link
|
||||
<OutboundLink
|
||||
href="{mdn_api}{type}"
|
||||
target="_blank"
|
||||
style="white-space: nowrap"
|
||||
>
|
||||
{type}
|
||||
<Launch16 />
|
||||
</Link>
|
||||
</OutboundLink>
|
||||
{:else if type in typeMap}
|
||||
<code>{typeMap[type]}</code>
|
||||
{:else if type.startsWith("(")}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
<script>
|
||||
export let code = "";
|
||||
|
||||
import copy from "clipboard-copy";
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<CodeSnippet code="{code}" type="inline" />
|
||||
<CodeSnippet code="{code}" type="inline" copy="{(text) => copy(text)}" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
export let src = "";
|
||||
export let framed = false;
|
||||
|
||||
import copy from "clipboard-copy";
|
||||
import { CodeSnippet, Button } from "carbon-components-svelte";
|
||||
import Launch16 from "carbon-icons-svelte/lib/Launch16";
|
||||
import { url } from "@sveltech/routify";
|
||||
|
|
@ -40,7 +41,7 @@
|
|||
{/if}
|
||||
</div>
|
||||
<div class="code-override">
|
||||
<CodeSnippet type="multi" code="{codeRaw}">
|
||||
<CodeSnippet type="multi" code="{codeRaw}" copy="{(text) => copy(text)}">
|
||||
{@html code}
|
||||
</CodeSnippet>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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/" />
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
<script>
|
||||
import { CopyButton, InlineNotification, Link } from "carbon-components-svelte";
|
||||
import { CopyButton } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
|
||||
<div class="body-short-01">As of version 0.32, this component will copy the provided `code` text when clicking the 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
|
||||
|
||||
|
|
@ -13,4 +15,18 @@
|
|||
|
||||
### Custom feedback text
|
||||
|
||||
<CopyButton text="Carbon svelte" feedback="Copied to clipboard" />
|
||||
<CopyButton text="Carbon svelte" feedback="Copied to clipboard" />
|
||||
|
||||
### 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/CopyButton/CopyButtonOverride" />
|
||||
|
||||
### Preventing copy functionality
|
||||
|
||||
To prevent text from being copied entirely, pass a "noop" function to the `copy` prop.
|
||||
|
||||
<CopyButton text="This text should not be copied" copy={() => {}} />
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script>
|
||||
import copy from "clipboard-copy";
|
||||
import { CodeSnippet } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<CodeSnippet
|
||||
code="yarn add -D carbon-components-svelte"
|
||||
copy="{(text) => copy(text)}"
|
||||
/>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<script>
|
||||
import copy from "clipboard-copy";
|
||||
import { CopyButton } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<CopyButton text="Carbon svelte" copy="{(text) => copy(text)}" />
|
||||
Loading…
Add table
Add a link
Reference in a new issue