From 913f2c64d597386b45a61175e922df2d52b895ff Mon Sep 17 00:00:00 2001
From: otoyo <hiroki.t.1988@gmail.com>
Date: Mon, 27 Feb 2023 18:00:20 +0900
Subject: [PATCH 1/2] Support code copy button

---
 components/notion-blocks/code.tsx | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/components/notion-blocks/code.tsx b/components/notion-blocks/code.tsx
index a8fc58cd..5b96e9d8 100644
--- a/components/notion-blocks/code.tsx
+++ b/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}>

From a9635365fc4777ae73b8b4108e20fdc0090f3899 Mon Sep 17 00:00:00 2001
From: otoyo <hiroki.t.1988@gmail.com>
Date: Mon, 27 Feb 2023 18:00:37 +0900
Subject: [PATCH 2/2] Style copy button

---
 styles/notion-block.module.css | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/styles/notion-block.module.css b/styles/notion-block.module.css
index c221cbd7..e6437d55 100644
--- a/styles/notion-block.module.css
+++ b/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 {