Merge pull request #175 from otoyo/code-copy-button

Code copy button

Author: otoyo

components/notion-blocks/code.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import React, { useState } from 'react';
 import Prism from 'prismjs'
 import 'prismjs/components/prism-css'
 import 'prismjs/components/prism-diff'
@@ -21,22 +22,36 @@ import styles from '../../styles/notion-block.module.css'
 
 
 const Code = ({ block }) => {
+  const [state, setState] = useState(false)
   const code = block.Code.RichTexts.map((richText: RichText) => richText.Text.Content).join('')
   const language = block.Code.Language.toLowerCase()
   const grammer = Prism.languages[language.toLowerCase()] || Prism.languages.javascript
 
+  const handleClick = (ev) => {
+    navigator.clipboard
+      .writeText(ev.target.getAttribute('data-code'))
+      .then(() => {
+        setState(true)
+      })
+  }
+
   return (
     <div className={styles.code}>
       {language === 'mermaid' ? (
         <Mermaid id={`mermaid-${block.Id}`} definition={code} />
       ) : (
-        <pre>
-          <code
-            dangerouslySetInnerHTML={{
-              __html: Prism.highlight(code, grammer, language),
-            }}
-          />
-        </pre>
+        <div>
+          <div>
+            <button data-code={code} onClick={handleClick}>{state ? 'Copied!' : 'Copy'}</button>
+          </div>
+          <pre>
+            <code
+              dangerouslySetInnerHTML={{
+                __html: Prism.highlight(code, grammer, language),
+              }}
+            />
+          </pre>
+        </div>
       )}
       {block.Code.Caption.length > 0 && block.Code.Caption[0].Text.Content ? (
         <div className={styles.caption}>

styles/notion-block.module.css

@@ -22,19 +22,36 @@
   display: block;
   width: 100%;
 }
+.code > div:first-child {
+  background: rgb(247, 246, 243);
+  border-radius: var(--radius);
+}
+.code > div div {
+  display: flex;
+  justify-content: flex-end;
+}
+.code button {
+  display: block;
+  width: 4rem;
+  border: 0;
+  border-radius: var(--radius);
+  background-color: rgba(227, 226, 224, 0.5);
+  color: var(--fg);
+  line-height: 1.2rem;
+  cursor: pointer;
+}
 .code pre {
   display: block;
   overflow: auto;
-  padding: 2rem;
-  background: rgb(247, 246, 243);
+  padding: 0.8rem 2rem 2rem;
   font-size: 0.9rem;
   line-height: 1.2rem;
-  border-radius: var(--radius);
 }
 .code pre code {
   color: var(--fg);
   padding: 0;
   background: rgb(247, 246, 243) !important;
+  border-radius: 0;
 }
 
 .callout {