Create Clipboard.svelte

package-lock.json

@@ -23,7 +23,6 @@
         "postcss": "^8.4.19",
         "prettier-plugin-svelte": "^2.6.0",
         "svelte": "^3.44.0",
-        "svelte-clipboard": "^1.0.0",
         "svelte-infinite-loading": "^1.3.8",
         "svelte-simple-modal": "^1.3.1",
         "svelte-sitemap": "^2.6.0",
@@ -2215,12 +2214,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/svelte-clipboard": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/svelte-clipboard/-/svelte-clipboard-1.0.0.tgz",
-      "integrity": "sha512-md6HhnK2byql47mVEzMV2jor3BU465TVDqc0ExYq+pRvzdTn6V+gSDnA2WUDJPxuYUvIhzempPq05BfOMvnOPA==",
-      "dev": true
-    },
     "node_modules/svelte-hmr": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz",
@@ -3909,12 +3902,6 @@
       "integrity": "sha512-S+87/P0Ve67HxKkEV23iCdAh/SX1xiSfjF1HOglno/YTbSTW7RniICMCofWGdJJbdjw3S+0PfFb1JtGfTXE0oQ==",
       "dev": true
     },
-    "svelte-clipboard": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/svelte-clipboard/-/svelte-clipboard-1.0.0.tgz",
-      "integrity": "sha512-md6HhnK2byql47mVEzMV2jor3BU465TVDqc0ExYq+pRvzdTn6V+gSDnA2WUDJPxuYUvIhzempPq05BfOMvnOPA==",
-      "dev": true
-    },
     "svelte-hmr": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz",

package.json

@@ -22,7 +22,6 @@
     "postcss": "^8.4.19",
     "prettier-plugin-svelte": "^2.6.0",
     "svelte": "^3.44.0",
-    "svelte-clipboard": "^1.0.0",
     "svelte-infinite-loading": "^1.3.8",
     "svelte-simple-modal": "^1.3.1",
     "svelte-sitemap": "^2.6.0",

src/components/Clipboard.svelte

@@ -0,0 +1,35 @@
+<script>
+  import { onMount, tick, createEventDispatcher } from 'svelte'
+
+  const dispatch = createEventDispatcher()
+
+  export let text
+
+  let textarea
+
+  async function copy() {
+    textarea.select()
+    document.execCommand('Copy')
+    await tick()
+    textarea.blur()
+    dispatch('copy')
+  }
+</script>
+
+<slot {copy} />
+<textarea bind:this={textarea} value={text} aria-hidden="true" />
+
+<style>
+  textarea {
+    left: 0;
+    bottom: 0;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+    border: none;
+    display: block;
+    position: absolute;
+  }
+</style>

src/components/CopyToClipboard.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Clipboard from 'svelte-clipboard'
+  import Clipboard from '~/components/Clipboard.svelte'
 
   export let text
   let showTooltip = false

yarn.lock

@@ -863,11 +863,6 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-svelte-clipboard@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/svelte-clipboard/-/svelte-clipboard-1.0.0.tgz"
-  integrity sha512-md6HhnK2byql47mVEzMV2jor3BU465TVDqc0ExYq+pRvzdTn6V+gSDnA2WUDJPxuYUvIhzempPq05BfOMvnOPA==
-
 svelte-hmr@^0.15.3:
   version "0.15.3"
   resolved "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz"