Merge pull request #19 from nhanluongoe/site/copy-code-feature

docs: add copy button for code snippet
nhanluongoe · Feb 16, 2024 · b71e08d · b71e08d
2 parents e955f38 + 81af0ed
commit b71e08d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/site/components/code.tsx b/site/components/code.tsx
@@ -5,6 +5,8 @@ import Highlight, {
   Language,
   PrismTheme,
 } from 'prism-react-renderer';
+import copy from 'copy-to-clipboard';
+import toast from 'react-stacked-toast';
 
 const theme: PrismTheme = {
   plain: {
@@ -109,6 +111,11 @@ export const Code: React.FC<{
 }> = (props) => {
   const language = props.language || 'jsx';
 
+  const handleCopy = () => {
+    copy(props.snippet);
+    toast.success({ title: 'Copied to clipboard!' });
+  };
+
   return (
     <Highlight
       {...defaultProps}
@@ -121,10 +128,17 @@ export const Code: React.FC<{
           className={clsx(
             props.className,
             className,
-            'h-full w-full rounded-lg p-4 overflow-x-auto flex flex-col items justify-center'
+            'h-full w-full rounded-lg p-4 overflow-x-auto flex flex-col items justify-center relative'
           )}
           style={style}
         >
+          <button
+            className="absolute right-5 top-5 border border-gray-50 rounded-md px-2"
+            onClick={handleCopy}
+          >
+            Copy
+          </button>
+
           {tokens.map((line, i) => {
             if (tokens.length - 1 === i && line[0].empty) {
               return null;

diff --git a/site/package.json b/site/package.json
@@ -13,6 +13,7 @@
     "@types/prismjs": "^1.26.0",
     "@vercel/analytics": "^0.1.5",
     "clsx": "^1.1.1",
+    "copy-to-clipboard": "^3.3.3",
     "next": "^12.2.1",
     "next-seo": "^5.4.0",
     "postcss": "^8.4.14",

diff --git a/site/yarn.lock b/site/yarn.lock
@@ -1927,6 +1927,13 @@ convert-source-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
+copy-to-clipboard@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
+  integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.31.0, core-js-compat@^3.34.0:
   version "3.35.1"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.35.1.tgz#215247d7edb9e830efa4218ff719beb2803555e2"
@@ -4109,6 +4116,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==
+
 trim-lines@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-3.0.1.tgz#d802e332a07df861c48802c04321017b1bd87338"