fix: markdown copy listener

app/(routes)/(main)/blog/[slug]/page.tsx

@@ -8,6 +8,7 @@ import Image from 'next/image';
 import { Badge } from '@/components/ui/badge';
 import Markdown from '@/components/markdown';
 import TableOfContents from '@/app/_components/_main/table-of-contents';
+import MarkdownCopyListener from '@/app/_components/_main/markdown-copy-listener';
 
 export async function generateMetadata({
   params,
@@ -80,6 +81,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
         )}
       </div>
       <Markdown markdown={postData.content} />
+      <MarkdownCopyListener />
       {headings.length > 0 && <TableOfContents headings={headings} />}
     </>
   );

app/_components/_main/markdown-copy-listener.tsx

@@ -0,0 +1,29 @@
+'use client'
+import { useEffect } from "react";
+
+export default function MarkdownCopyListener() {
+  useEffect(() => {
+    const copyBtns = document.querySelectorAll('button.copy-code-btn')
+    copyBtns.forEach((btn) => {
+      (btn as HTMLButtonElement).addEventListener('click', () => {
+        const codeBlockContent = btn.parentElement?.nextElementSibling?.textContent
+        if (codeBlockContent) {
+          navigator.clipboard.writeText(codeBlockContent).then(() => {
+            btn.textContent = 'Copied'
+            setTimeout(() => {
+              btn.textContent = 'Copy'
+            }, 2000)
+          })
+        }
+      })
+    })
+
+    return () => {
+      copyBtns.forEach((btn) => {
+        (btn as HTMLButtonElement).removeEventListener('click', () => { })
+      })
+    }
+  }, [])
+
+  return null
+}

components/markdown.tsx

@@ -43,7 +43,7 @@ const Markdown = ({ markdown }: { markdown: string }) => {
       </h${depth}>`;
     },
     code({ text, lang }) {
-      return `<pre><div class='flex items-center justify-between pb-3 text-xs'><span>${lang}</span><button onclick="navigator.clipboard.writeText(this.parentElement.nextElementSibling.textContent).then(() => { this.innerText = 'Copied'; setTimeout(() => { this.innerText = 'Copy' }, 2000); })">Copy</button></div><div class='flex-1 overflow-x-scroll'><code>${text}</code></div></pre>`;
+      return `<pre><div class='flex items-center justify-between pb-3 text-xs'><span>${lang}</span><button class='copy-code-btn'>Copy</button></div><div class='flex-1 overflow-x-scroll'><code>${text}</code></div></pre>`;
     },
     link(args) {
       const link = marked.Renderer.prototype.link.call(this, args);
@@ -81,7 +81,6 @@ const Markdown = ({ markdown }: { markdown: string }) => {
       dangerouslySetInnerHTML={{
         __html: DOMPurify.sanitize(marked.parse(markdown) as string, {
           USE_PROFILES: { html: true },
-          ADD_ATTR: ['onclick'],
         }),
       }}
     ></article>