fix: CodeCopy bug (a bit hackfully)

one-aalam · Dec 12, 2023 · 9c4db4c · 9c4db4c
1 parent 3355f53
commit 9c4db4c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/components/Code.astro b/src/components/Code.astro
@@ -1,7 +1,7 @@
 ---
 import CodeCopy from './CodeCopy.svelte'
 ---
-<CodeCopy client:visible/>
+<CodeCopy client:load/>
 <code class="astro-ink__code">
     <slot/>
 </code>
diff --git a/src/components/CodeCopy.svelte b/src/components/CodeCopy.svelte
@@ -1,17 +1,19 @@
 <script lang="ts">
     import { fade, blur } from "svelte/transition";
+    import { onMount } from "svelte";
     const COPIED_TIMEOUT = 2 * 1000
 
     export let stayCopied = COPIED_TIMEOUT
 
     let copied = false
     let selfElm: HTMLButtonElement;
+    let isCodeBlock = true;
 
     const copy = async () => {
         if(selfElm) {
             const preElm = selfElm.parentElement?.parentElement
             const codeElm = preElm?.querySelector('code')
-            if(codeElm) {
+            if(preElm?.tagName === 'PRE' && codeElm) {
                 await navigator.clipboard.writeText(codeElm.innerText);
                 copied = true
         
@@ -22,12 +24,22 @@
         }
         
     };
+
+    onMount(() => {
+        const preElm = selfElm.parentElement?.parentElement
+        if(preElm && preElm.tagName === 'PRE') {
+            isCodeBlock = true
+        } else {
+            isCodeBlock = false
+        }
+    })
 </script>
 <button 
     bind:this={selfElm} 
     on:click={copy} 
     class="absolute px-2 text-theme-primary dark:text-theme-dark-primary border-1 rounded-lg" 
     style="top: 6px; right: 8px;"
+    style:display={isCodeBlock ? 'inline-block' : 'none'}
     disabled={copied}
 >
     {#if copied}