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

metonym · web-flow · commit 921c3e121a5c · 2021-07-05T12:12:28.000-07:00
* 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
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
diff --git a/docs/package.json b/docs/package.json
@@ -13,6 +13,7 @@
     "autoprefixer": "^10.2.3",
     "carbon-components": "10.38.0",
     "carbon-components-svelte": "../",
+    "clipboard-copy": "^4.0.1",
     "mdsvex": "^0.8.8",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.4",
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -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": [],
diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte
@@ -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("(")}
diff --git a/docs/src/components/InlineSnippet.svelte b/docs/src/components/InlineSnippet.svelte
@@ -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>
diff --git a/docs/src/components/Preview.svelte b/docs/src/components/Preview.svelte
@@ -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>
diff --git a/docs/src/pages/components/CodeSnippet.svx b/docs/src/pages/components/CodeSnippet.svx
@@ -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/" />
diff --git a/docs/src/pages/components/CopyButton.svx b/docs/src/pages/components/CopyButton.svx
@@ -1,16 +1,32 @@
 <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
 
 <CopyButton text="Carbon svelte" />
 
 ### 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={() => {}} />
diff --git a/docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte b/docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte
@@ -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)}"
+/>
diff --git a/docs/src/pages/framed/CopyButton/CopyButtonOverride.svelte b/docs/src/pages/framed/CopyButton/CopyButtonOverride.svelte
@@ -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)}" />
diff --git a/docs/yarn.lock b/docs/yarn.lock
@@ -837,10 +837,9 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
   integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
 
 carbon-components-svelte@../:
-  version "0.37.0"
+  version "0.38.2"
   dependencies:
     carbon-icons-svelte "^10.27.0"
-    clipboard-copy "3.2.0"
     flatpickr "4.6.9"
 
 carbon-components@10.38.0:
@@ -947,10 +946,10 @@ cli-spinners@^2.2.0:
   resolved "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.4.0.tgz#c6256db216b878cfba4720e719cec7cf72685d7f"
   integrity sha512-sJAofoarcm76ZGpuooaO0eDy8saEy+YoZBLjC4h8srt4jeBnkYeOgqxgsJQTpyt2LjI5PTfLJHSL+41Yu4fEJA==
 
-clipboard-copy@3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-3.2.0.tgz#3c5b8651d3512dcfad295d77a9eb09e7fac8d5fb"
-  integrity sha512-vooFaGFL6ulEP1liiaWFBmmfuPm3cY3y7T9eB83ZTnYc/oFeAKsq3NcDrOkBC8XaauEE8zHQwI7k0+JSYiVQSQ==
+clipboard-copy@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-4.0.1.tgz#326ef9726d4ffe72d9a82a7bbe19379de692017d"
+  integrity sha512-wOlqdqziE/NNTUJsfSgXmBMIrYmfd5V0HCGsR8uAKHcg+h9NENWINcfRjtWGU77wDHC8B8ijV4hMTGYbrKovng==
 
 clipboard@^2.0.0:
   version "2.0.6"
diff --git a/package.json b/package.json
@@ -24,7 +24,6 @@
   },
   "dependencies": {
     "carbon-icons-svelte": "^10.27.0",
-    "clipboard-copy": "3.2.0",
     "flatpickr": "4.6.9"
   },
   "devDependencies": {
diff --git a/src/CodeSnippet/CodeSnippet.svelte b/src/CodeSnippet/CodeSnippet.svelte
@@ -13,6 +13,18 @@
    */
   export let code = undefined;
 
+  /**
+   * Override the default copy behavior of using the navigator.clipboard.writeText API to copy text
+   * @type {(code: string) => void}
+   */
+  export let copy = async (code) => {
+    try {
+      await navigator.clipboard.writeText(code);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
   /** Set to `true` to expand a multi-line code snippet (type="multi") */
   export let expanded = false;
 
@@ -77,7 +89,6 @@
   export let ref = null;
 
   import { createEventDispatcher, tick } from "svelte";
-  import copy from "clipboard-copy";
   import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
   import Button from "../Button/Button.svelte";
   import Copy from "../Copy/Copy.svelte";
diff --git a/src/CopyButton/CopyButton.svelte b/src/CopyButton/CopyButton.svelte
@@ -10,9 +10,20 @@
    */
   export let text = undefined;
 
+  /**
+   * Override the default copy behavior of using the navigator.clipboard.writeText API to copy text
+   * @type {(text: string) => void}
+   */
+  export let copy = async (text) => {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
   import Copy from "../Copy/Copy.svelte";
   import Copy16 from "carbon-icons-svelte/lib/Copy16/Copy16.svelte";
-  import copy from "clipboard-copy";
   import { createEventDispatcher } from "svelte";
 
   const dispatch = createEventDispatcher();
diff --git a/tests/CodeSnippet.test.svelte b/tests/CodeSnippet.test.svelte
@@ -35,7 +35,9 @@ export function subtract(a: number, b: number) {
   hideCloseButton
 />
 
-<CodeSnippet>yarn add -D carbon-components-svelte</CodeSnippet>
+<CodeSnippet copy="{(text) => {}}"
+  >yarn add -D carbon-components-svelte</CodeSnippet
+>
 
 <CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>
 
diff --git a/tests/CopyButton.test.svelte b/tests/CopyButton.test.svelte
@@ -1,16 +1,11 @@
 <script lang="ts">
-  import { CopyButton, InlineNotification } from "../types";
+  import { CopyButton } from "../types";
 </script>
 
-<InlineNotification
-  svx-ignore
-  lowContrast
-  title="Note:"
-  subtitle="By design, the copy button does not copy text to the clipboard. You will need to write your own logic."
-  kind="info"
-  hideCloseButton
+<CopyButton
+  text="text"
+  on:click
+  on:copy
+  copy="{(text) => {}}"
+  feedback="Copied to clipboard"
 />
-
-<CopyButton on:click />
-
-<CopyButton on:click feedback="Copied to clipboard" />
diff --git a/types/CodeSnippet/CodeSnippet.d.ts b/types/CodeSnippet/CodeSnippet.d.ts
@@ -15,6 +15,12 @@ export interface CodeSnippetProps {
    */
   code?: string;
 
+  /**
+   * Override the default copy behavior of using the navigator.clipboard.writeText API to copy text
+   * @default async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }
+   */
+  copy?: (code: string) => void;
+
   /**
    * Set to `true` to expand a multi-line code snippet (type="multi")
    * @default false
diff --git a/types/CopyButton/CopyButton.d.ts b/types/CopyButton/CopyButton.d.ts
@@ -13,6 +13,12 @@ export interface CopyButtonProps extends CopyProps {
    * Specify the text to copy
    */
   text?: string;
+
+  /**
+   * Override the default copy behavior of using the navigator.clipboard.writeText API to copy text
+   * @default async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }
+   */
+  copy?: (text: string) => void;
 }
 
 export default class CopyButton extends SvelteComponentTyped<
diff --git a/yarn.lock b/yarn.lock
@@ -540,11 +540,6 @@ cli-truncate@^2.1.0:
     slice-ansi "^3.0.0"
     string-width "^4.2.0"
 
-clipboard-copy@3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-3.2.0.tgz#3c5b8651d3512dcfad295d77a9eb09e7fac8d5fb"
-  integrity sha512-vooFaGFL6ulEP1liiaWFBmmfuPm3cY3y7T9eB83ZTnYc/oFeAKsq3NcDrOkBC8XaauEE8zHQwI7k0+JSYiVQSQ==
-
 cliui@^7.0.2:
   version "7.0.4"
   resolved "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
