fix copy btn delay bug

sunwu51 · Jun 10, 2024 · b6c1544 · b6c1544
1 parent 7224585
commit b6c1544
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 16 deletions.
diff --git a/app/blog/[month]/[slug]/layout.jsx b/app/blog/[month]/[slug]/layout.jsx
@@ -0,0 +1,38 @@
+'use client'
+
+import { useEffect } from "react"
+
+export default function BlogLayout({ children }) {
+    useEffect(()=>{
+        // 注册复制代码的按钮功能
+        const btns = document.querySelectorAll('.copy-code-button')
+        const handleClick = (event) => {
+            const button = event.target;
+            const codeElement = button.closest('pre').querySelector('code');
+            if (codeElement) {
+              const codeContent = codeElement.textContent;
+              // 复制到剪贴板
+              navigator.clipboard.writeText(codeContent).then(() => {
+                button.innerText = 'Copied!';
+                setTimeout(() => { button.innerText = 'Copy'; }, 2000);
+              }).catch(err => {
+                console.error('Failed to copy code:', err);
+              });
+            }
+          };
+
+          btns.forEach(button => {
+            button.addEventListener('click', handleClick);
+          });
+
+          // 清理函数，组件卸载时移除事件监听器
+          return () => {
+            btns.forEach(button => {
+              button.removeEventListener('click', handleClick);
+            });
+          };
+    }, [])
+    return <>
+        {children}
+    </>
+}
diff --git a/app/components/Tabs.jsx b/app/components/Tabs.jsx
@@ -1,6 +1,7 @@
 'use client'
 import React, { useState } from "react";
 import './Tabs.css'
+import { cn } from "./cn";
 
 const useTabs = (initialTab, allTabs) => {
     const [currentIndex, setCurrentIndex] = useState(initialTab);
@@ -20,7 +21,7 @@ function Tabs({ children, ...props }) {
     const { currentIndex, currentItem, changeItem } = useTabs(0, children);
     return (
         <div className='tabs-container'>
-            <div className={'tabs-button-container ' + props.className} >
+            <div className={cn('tabs-button-container ',props.className)} >
                 {children.map((item, index) => (
                     <button
                         className={(index == currentIndex ? 'tabs-button-selected ' : "tabs-button ") + props.tabBtnClassName??""}
@@ -30,7 +31,7 @@ function Tabs({ children, ...props }) {
                 ))}
             </div>
             {children.map((item, index) => (
-                <div className={(index == currentIndex ? 'tabs-panel-selected ' : "tabs-panel ") + props.tabPanelClassName??""} key={index}>
+                <div className={cn((index == currentIndex ? 'tabs-panel-selected ' : "tabs-panel "), props.tabPanelClassName)} key={index}>
                     {item}
                 </div>
             ))}

diff --git a/rehypePlugins/rehype-code-copy-button.mjs b/rehypePlugins/rehype-code-copy-button.mjs
@@ -17,20 +17,6 @@ export default function rehypeCodeCopyButton() {
           }, 'Copy');
           node.properties.className = [...node.properties.className ?? [], 'pre-with-code'];
           node.children.push(button);
-          const scriptContent = `
-            document.getElementById("${btnid}").addEventListener('click', (e) => {
-              var btn = e.target;
-              var codeBlock = btn.closest('pre').querySelector('code').innerText;
-              navigator.clipboard.writeText(codeBlock).then(() => {
-                btn.innerText = 'Copied!';
-                setTimeout(() => { btn.innerText = 'Copy'; }, 2000);
-              }).catch(err => {
-                console.error('Failed to copy code:', err);
-              });
-            });`;
-          const src = "data:application/javascript;base64," + Buffer.from(scriptContent).toString('base64');
-          const script = h('script', { src: src });
-          node.children.push(script);
         }
       }
     });