<script>
  import { CodeSnippet } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";

  let code = `// helpers.js
  
export function multiply(a: number, b: number) {
  return a * b;
}

export function divide(a: number, b: number) {
  return a / b;
}

export function add(a: number, b: number) {
  return a + b;
}

export function subtract(a: number, b: number) {
  return a - b;
}`;

let comment = `
> \`carbon-components-svelte\` is a Svelte component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.

> A design system can facilitate frontend development and prototyping because it is encourages reuse, consistency, and extensibility.
`
</script>

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 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 no-op function to the `copy` prop.

<CodeSnippet code="yarn add -D carbon-components-svelte" copy={() => {}} />

### Inline

<CodeSnippet type="inline" code="rm -rf node_modules/" />

### Multi-line

<CodeSnippet type="multi" {code} />

### Custom copy feedback text

Use the `feedback` prop to override the default copy button feedback text.

<CodeSnippet type="multi" {code} feedback="Copied to clipboard" />

### Hidden copy button

<CodeSnippet type="multi" {code} hideCopyButton />

### Disabled

The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.

<CodeSnippet disabled code="yarn add -D carbon-components-svelte" />
<br />
<CodeSnippet disabled type="multi" code="{comment}" />

### Wrapped text

`wrapText` only applies to the `"multi"` type.

<CodeSnippet wrapText type="multi" code="{comment}" />

### Dynamic multi-line code

For dynamically updated code, you must use the `code` prop instead of the default slot.

<FileSource src="/framed/CodeSnippet/DynamicCodeSnippet" />

### Hidden multi-line code

There may be cases where your code snippet is hidden in the DOM. The logic to render the "Show more" button relies on the element's computed height. For hidden content, the button will not appear because the computed height is `0`.

The recommended workaround is to re-render the component. See the example below.

<FileSource src="/framed/CodeSnippet/HiddenCodeSnippet" />

### Skeleton

The default skeleton type is `"single"`.

<CodeSnippet skeleton />

### Skeleton (multi-line)

<CodeSnippet type="multi" skeleton />