diff --git a/package-lock.json b/package-lock.json index ebd9c1c..957f8dc 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 39e5663..753baec 100644 --- a/package.json +++ b/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", diff --git a/src/app.scss b/src/app.scss index b3f53d4..6c06683 100644 --- a/src/app.scss +++ b/src/app.scss @@ -83,4 +83,4 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t @import "/node_modules/bulma-prefers-dark/build/bulma-prefers-dark.sass"; .modal-card-body { // remove this once https: //github.com/jloh/bulma-prefers-dark/pull/90 is merged and released background-color: $background-dark; -} \ No newline at end of file +} diff --git a/src/lib/Code.svelte b/src/lib/Code.svelte index cddd000..067be2b 100644 --- a/src/lib/Code.svelte +++ b/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); + }; {@html style} - +
+ + +
+ +