From 39f48229312fc8df3cddbfd9b195d8845d9ebf94 Mon Sep 17 00:00:00 2001
From: the3ash <24548223+the3ash@users.noreply.github.com>
Date: Tue, 11 Nov 2025 20:21:16 +0800
Subject: [PATCH] refactor(plugins): improve copy code button DOM structure and
 event handling

---
 src/components/ui/CopyCode.astro | 34 +++++++++++++---
 src/plugins/rehype-copy-code.mjs | 66 +++++++++++++++++++++-----------
 2 files changed, 73 insertions(+), 27 deletions(-)

diff --git a/src/components/ui/CopyCode.astro b/src/components/ui/CopyCode.astro
index 5a79640..08ab9a7 100644
--- a/src/components/ui/CopyCode.astro
+++ b/src/components/ui/CopyCode.astro
@@ -26,7 +26,18 @@ import { themeConfig } from '@/config'
     const copyButtons = document.querySelectorAll('.copy-button')
 
     copyButtons.forEach((button) => {
-      const preElement = button.closest('.copy-code-block')
+      // Avoid initializing multiple times (important for SPA navigation)
+      if (button.dataset.copyInit) return
+      button.dataset.copyInit = '1'
+
+      // Find the closest pre element with the .copy-code-block class
+      let preElement = button.closest('.copy-code-block')
+      if (!preElement) {
+        const parent = button.parentElement
+        if (parent) {
+          preElement = parent.querySelector('.copy-code-block')
+        }
+      }
       if (!preElement) return
 
       const codeElement = preElement.querySelector('code')
@@ -39,12 +50,19 @@ import { themeConfig } from '@/config'
       button.style.opacity = '0'
       button.style.pointerEvents = 'none'
 
-      preElement.addEventListener('mouseenter', () => {
+      // Determine the container to attach hover events
+      let container = preElement
+      const parent = button.parentElement
+      if (parent && parent.classList.contains('copy-code-wrapper')) {
+        container = parent
+      }
+
+      container.addEventListener('mouseenter', () => {
         button.style.opacity = '1'
         button.style.pointerEvents = 'auto'
       })
 
-      preElement.addEventListener('mouseleave', () => {
+      container.addEventListener('mouseleave', () => {
         if (!button.hasAttribute('data-copying')) {
           button.style.opacity = '0'
           button.style.pointerEvents = 'none'
@@ -61,7 +79,7 @@ import { themeConfig } from '@/config'
           button.innerHTML = copiedIcon
 
           setTimeout(() => {
-            if (!preElement.matches(':hover')) {
+            if (!container.matches(':hover')) {
               button.style.opacity = '0'
               button.style.pointerEvents = 'none'
             }
@@ -101,7 +119,7 @@ import { themeConfig } from '@/config'
           button.innerHTML = copiedIcon
 
           setTimeout(() => {
-            if (!preElement.matches(':hover')) {
+            if (!container.matches(':hover')) {
               button.style.opacity = '0'
               button.style.pointerEvents = 'none'
             }
@@ -121,6 +139,12 @@ import { themeConfig } from '@/config'
 </script>
 
 <style is:inline>
+  /* Ensure the positioned ancestor is correct */
+  .copy-code-wrapper {
+    position: relative !important;
+  }
+
+  /* Keep for backward compatibility */
   .copy-code-block {
     position: relative !important;
   }
diff --git a/src/plugins/rehype-copy-code.mjs b/src/plugins/rehype-copy-code.mjs
index 9ed8129..79160ab 100644
--- a/src/plugins/rehype-copy-code.mjs
+++ b/src/plugins/rehype-copy-code.mjs
@@ -5,33 +5,55 @@ import { visit } from 'unist-util-visit'
  */
 export default function rehypeCopyCode() {
   return (tree) => {
-    visit(tree, 'element', (node) => {
-      if (node.tagName === 'pre') {
-        if (!node.children || node.children.length === 0) {
-          return
-        }
+    visit(tree, 'element', (node, index, parent) => {
+      // Only process pre elements
+      if (node.tagName !== 'pre') {
+        return
+      }
+
+      // Validate pre element has children
+      if (!node.children?.length) {
+        return
+      }
 
-        const codeElement = node.children.find((child) => child.tagName === 'code')
-        if (!codeElement) {
-          return
-        }
+      // Ensure code element exists
+      const hasCodeElement = node.children.some((child) => child.tagName === 'code')
+      if (!hasCodeElement) {
+        return
+      }
 
-        node.properties = node.properties || {}
-        node.properties.className = node.properties.className || []
+      // Mark the pre element with class for styling
+      node.properties = node.properties || {}
+      node.properties.className = node.properties.className || []
+      if (!node.properties.className.includes('copy-code-block')) {
         node.properties.className.push('copy-code-block')
+      }
+
+      // Create copy button
+      const copyButton = {
+        type: 'element',
+        tagName: 'button',
+        properties: {
+          className: ['copy-button'],
+          type: 'button',
+          'aria-label': 'Copy code to clipboard'
+        },
+        children: []
+      }
 
-        const copyButton = {
-          type: 'element',
-          tagName: 'button',
-          properties: {
-            className: ['copy-button'],
-            type: 'button',
-            'aria-label': 'Copy code'
-          },
-          children: []
-        }
+      // Wrap pre and button in a container for better layout control
+      const wrapper = {
+        type: 'element',
+        tagName: 'div',
+        properties: {
+          className: ['copy-code-wrapper']
+        },
+        children: [copyButton, node]
+      }
 
-        node.children.unshift(copyButton)
+      // Replace the pre element with the wrapper
+      if (parent && typeof index === 'number') {
+        parent.children[index] = wrapper
       }
     })
   }
-- 
2.51.2