From 8bf79bdeff09e4ae906bc8b09932c48a4d5223fb Mon Sep 17 00:00:00 2001
From: Carlos <cutillascarlos@gmail.com>
Date: Wed, 16 Oct 2024 21:48:49 +0200
Subject: [PATCH] remove id on copy button animation

---
 .../datadisplay/shiki_code_block.py           | 65 ++++++++++---------
 .../datadisplay/shiki_code_block.pyi          |  2 +-
 2 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/reflex/components/datadisplay/shiki_code_block.py b/reflex/components/datadisplay/shiki_code_block.py
index 71e603021..7c46d8f23 100644
--- a/reflex/components/datadisplay/shiki_code_block.py
+++ b/reflex/components/datadisplay/shiki_code_block.py
@@ -22,11 +22,10 @@ from reflex.vars.function import FunctionStringVar
 from reflex.vars.sequence import StringVar, string_replace_operation
 
 
-def copy_script(id: str, code: StringVar | str) -> Any:
-    """Copy script for the code block.
+def copy_script(code: StringVar | str) -> Any:
+    """Copy script for the code block and modify the child SVG element.
 
     Args:
-        id (str): The ID of the button element.
         code (str): The code to be copied.
 
     Returns:
@@ -34,33 +33,41 @@ def copy_script(id: str, code: StringVar | str) -> Any:
     """
     return call_script(
         f"""
-const button = document.getElementById('{id}');
-const icon = button.querySelector('svg');
-const originalPath = icon.innerHTML;
-const checkmarkPath = '<polyline points="20 6 9 17 4 12"></polyline>';
+// Event listener for the parent click
+document.addEventListener('click', function(event) {{
+    const parent = event.target.closest('div');  // Assumes the parent is a <div> or any container
+    if (parent) {{
+        const svgIcon = parent.querySelector('svg');  // Always targets the <svg> child element
+        const originalPath = svgIcon.innerHTML;
+        const checkmarkPath = '<polyline points="20 6 9 17 4 12"></polyline>';  // Checkmark SVG path
 
-function transition(element, scale, opacity) {{
-    element.style.transform = `scale(${{scale}})`;
-    element.style.opacity = opacity;
-}}
+        function transition(element, scale, opacity) {{
+            element.style.transform = `scale(${{scale}})`;
+            element.style.opacity = opacity;
+        }}
 
-navigator.clipboard.writeText(`{code}`).then(() => {{
-    transition(icon, 0, '0');
+        // Copy the code to clipboard
+        navigator.clipboard.writeText(`{code}`).then(() => {{
+            // Animate the SVG
+            transition(svgIcon, 0, '0');
 
-    setTimeout(() => {{
-        icon.innerHTML = checkmarkPath;
-        icon.setAttribute('viewBox', '0 0 24 24');
-        transition(icon, 1, '1');
-        setTimeout(() => {{
-            transition(icon, 0, '0');
             setTimeout(() => {{
-                icon.innerHTML = originalPath;
-                transition(icon, 1, '1');
+                svgIcon.innerHTML = checkmarkPath;  // Replace content with checkmark
+                svgIcon.setAttribute('viewBox', '0 0 24 24');  // Adjust viewBox if necessary
+                transition(svgIcon, 1, '1');
+
+                setTimeout(() => {{
+                    transition(svgIcon, 0, '0');
+                    setTimeout(() => {{
+                        svgIcon.innerHTML = originalPath;  // Restore original SVG content
+                        transition(svgIcon, 1, '1');
+                    }}, 125);
+                }}, 600);
             }}, 125);
-        }}, 600);
-    }}, 125);
-}}).catch(err => {{
-    console.error('Failed to copy text: ', err);
+        }}).catch(err => {{
+            console.error('Failed to copy text: ', err);
+        }});
+    }}
 }});
 """
     )
@@ -718,18 +725,12 @@ class ShikiHighLevelCodeBlock(ShikiCodeBlock):
 
         if can_copy:
             code = children[0]
-            button_id = (
-                f"copy-button-{hash(code)}"  # Generate a unique ID for each button
-            )
             copy_button = (  # type: ignore
                 copy_button
                 if copy_button is not None
                 else Button.create(
                     Icon.create(tag="copy", size=16, color=color("gray", 11)),
-                    id=button_id,
-                    on_click=copy_script(
-                        button_id, cls._strip_transformer_triggers(code)
-                    ),
+                    on_click=copy_script(cls._strip_transformer_triggers(code)),
                     style=Style(
                         {
                             "position": "absolute",
diff --git a/reflex/components/datadisplay/shiki_code_block.pyi b/reflex/components/datadisplay/shiki_code_block.pyi
index bee4906af..fda167e1a 100644
--- a/reflex/components/datadisplay/shiki_code_block.pyi
+++ b/reflex/components/datadisplay/shiki_code_block.pyi
@@ -13,7 +13,7 @@ from reflex.vars.base import Var
 from reflex.vars.function import FunctionStringVar
 from reflex.vars.sequence import StringVar
 
-def copy_script(id: str, code: StringVar | str) -> Any: ...
+def copy_script(code: StringVar | str) -> Any: ...
 
 SHIKIJS_TRANSFORMER_FNS = {
     "transformerNotationDiff",