Merge pull request #35 from littlemoonstones/features

add copy function

package-lock.json

@@ -15,6 +15,7 @@
         "@types/marked": "^4.0.8",
         "bulma": "^0.9.4",
         "bulma-prefers-dark": "^0.1.0-beta.1",
+        "copy-to-clipboard": "^3.3.3",
         "postcss": "^8.4.21",
         "sass": "^1.58.3",
         "svelte": "^3.55.1",
@@ -627,6 +628,15 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "dev": true,
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1583,6 +1593,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==",
+      "dev": true
+    },
     "node_modules/tslib": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",

package.json

@@ -18,6 +18,7 @@
     "@types/marked": "^4.0.8",
     "bulma": "^0.9.4",
     "bulma-prefers-dark": "^0.1.0-beta.1",
+    "copy-to-clipboard": "^3.3.3",
     "postcss": "^8.4.21",
     "sass": "^1.58.3",
     "svelte": "^3.55.1",

src/lib/Code.svelte

@@ -7,6 +7,9 @@
   // Style depends on system theme
   const style = window.matchMedia("(prefers-color-scheme: dark)").matches ? githubDark : github;
 
+  // Copy function for the code block
+  import copy from "copy-to-clipboard";
+
   // Import all supported languages
   import {
     javascript,
@@ -68,10 +71,47 @@
     default:
       language = plaintext;
   }
+
+  // For copying code - reference: https://vyacheslavbasharov.com/blog/adding-click-to-copy-code-markdown-blog
+  const copyFunction = (event) => {
+    // Get the button the user clicked on
+    const clickedElement = event.target as HTMLButtonElement;
+
+    // Get the next element
+    const nextElement = clickedElement.nextElementSibling;
+
+    // Modify the appearance of the button
+    const originalButtonContent = clickedElement.innerHTML;
+    clickedElement.classList.add("is-success");
+    clickedElement.innerHTML = "Copied!";
+
+    // Retrieve the code in the code block
+    const codeBlock = (nextElement.querySelector("pre > code") as HTMLPreElement).innerText;
+    copy(codeBlock);
+
+    // Restored the button after copying the text in 1 second.
+    setTimeout(() => {
+      clickedElement.innerHTML = originalButtonContent;
+      clickedElement.classList.remove("is-success");
+      clickedElement.blur();
+    }, 1000);
+  };
 </script>
 
 <svelte:head>
   {@html style}
 </svelte:head>
 
-<Highlight code={text} {language} />
+<div class="code-block is-relative">
+  <button class="button is-light is-outlined is-small p-2" on:click={copyFunction}>Copy</button>
+  <Highlight code={text} {language} />
+</div>
+
+<style>
+  /* for copy button */
+  .code-block > button {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+</style>