fix: make the copy button not move when scrolling

Vanilla-OS · Jul 23, 2024 · dda8bf1 · dda8bf1
1 parent 0a46017
commit dda8bf1
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
@@ -16,13 +16,8 @@
   background: #555;
 }
 
-pre {
-  @apply relative;
-}
-
-pre:hover button {
+.pre-div:hover button {
   @apply opacity-100;
-    background: #555;
 }
 
 

diff --git a/src/views/ArticleView.vue b/src/views/ArticleView.vue
@@ -395,17 +395,24 @@ export default defineComponent({
             window.print();
         },
         addCopyToClipboardToPres() {
-            const highlightBlocks = document.querySelectorAll("pre");
-            highlightBlocks.forEach((block) => {
+            const codeBlocks = document.querySelectorAll("pre");
+            codeBlocks.forEach((block) => {
+                const div = document.createElement("div");
+                div.className = "relative pre-div";
+
+                const pre = document.createElement("pre");
+                pre.textContent = block.textContent;
+                div.appendChild(pre);
+
                 const button = document.createElement("button");
                 const iconStyle = "p-0 m-0 text-lg leading-none";
                 button.className = "bg-blue-500 text-white p-[6px] rounded absolute right-2 top-2 opacity-0 transition-opacity size-fit flex items-center justify-center";
                 button.type = "button";
                 button.innerHTML = `<span class="material-icons ${iconStyle}">content_copy</span>`;
 
                 button.addEventListener("click", () => {
-                    if (block.textContent !== null) {
-                        navigator.clipboard.writeText(block.textContent);
+                    if (pre.textContent !== null) {
+                        navigator.clipboard.writeText(pre.textContent);
                     }
                     button.classList.add("bg-green-600");
                     button.innerHTML = `<span class="material-icons ${iconStyle}">done</span>`;
@@ -415,7 +422,8 @@ export default defineComponent({
                     }, 2000);
                 });
 
-                block.appendChild(button);
+                div.appendChild(button);
+                block.replaceWith(div);
             });
         },
     },