Update app.py

app.py

@@ -126,29 +126,15 @@ def check_for_fragment(url):
     return '#:~:text=' in url
 
 def copy_to_clipboard_js(text, button_id):
-    """Generate JavaScript for copying text to clipboard using a textarea."""
-    # Encode the text as a JavaScript-safe string
-    escaped_text = json.dumps(text, ensure_ascii=False)[1:-1].replace('</', '<\\/')
+    """Generate JavaScript for copying text to clipboard with proper escaping."""
+    # Escape special characters for JavaScript string
+    escaped_text = json.dumps(text).strip('"').replace('</', '<\\/')  # Properly escape for JS
     return f"""
-    <div>
-        <textarea id="copy_text_{button_id}" style="display: none;">{escaped_text}</textarea>
-        <button onclick="copyToClipboard_{button_id}()" class="copy-button">Copy to Clipboard</button>
-        <span id="copy_status_{button_id}" style="margin-left: 10px; font-weight: bold;"></span>
-    </div>
     <script>
     function copyToClipboard_{button_id}() {{
-        console.log('Copy function triggered for {button_id}');
-        const textElement = document.getElementById('copy_text_{button_id}');
-        const textToCopy = textElement ? textElement.value : '';
-        if (!textToCopy) {{
-            console.error('No text to copy for {button_id}');
-            const statusElement = document.getElementById('copy_status_{button_id}');
-            if (statusElement) statusElement.innerHTML = 'No text to copy';
-            return;
-        }}
+        const textToCopy = `{escaped_text}`;
         if (navigator.clipboard) {{
             navigator.clipboard.writeText(textToCopy).then(function() {{
-                console.log('Text copied successfully for {button_id}: ' + textToCopy);
                 const statusElement = document.getElementById('copy_status_{button_id}');
                 if (statusElement) {{
                     statusElement.innerHTML = 'Copied!';
@@ -157,17 +143,22 @@ def copy_to_clipboard_js(text, button_id):
                     }}, 2000);
                 }}
             }}, function(err) {{
-                console.error('Copy failed for {button_id}: ', err);
                 const statusElement = document.getElementById('copy_status_{button_id}');
-                if (statusElement) statusElement.innerHTML = 'Copy failed';
+                if (statusElement) {{
+                    statusElement.innerHTML = 'Copy failed';
+                }}
+                console.error('Could not copy text: ', err);
             }});
         }} else {{
-            console.error('Clipboard API not supported');
             const statusElement = document.getElementById('copy_status_{button_id}');
-            if (statusElement) statusElement.innerHTML = 'Clipboard API not supported';
+            if (statusElement) {{
+                statusElement.innerHTML = 'Clipboard API not supported';
+            }}
         }}
     }}
     </script>
+    <button onclick="copyToClipboard_{button_id}()" class="copy-button">Copy to Clipboard</button>
+    <span id="copy_status_{button_id}" style="margin-left: 10px; font-weight: bold;"></span>
     """
 
 # --- Live Clock JavaScript ---
@@ -317,14 +308,22 @@ with tabs[0]:
             # HTML Citation - Start of Text
             with col_html1:
                 st.markdown("### Citation (Start of Text)")
-                components.html(f'<div class="rendered-citation">{citation_link_start}</div>', height=50)
-                components.html(copy_to_clipboard_js(citation_link_start, "html_start"), height=100)
+                html_citation_start = citation_link_start
+                
+                st.markdown('<div class="rendered-citation">', unsafe_allow_html=True)
+                st.markdown(html_citation_start, unsafe_allow_html=True)
+                st.markdown(copy_to_clipboard_js(html_citation_start.replace('`', '\\`'), "html_start"), unsafe_allow_html=True)
+                st.markdown('</div>', unsafe_allow_html=True)
 
             # HTML Citation - End of Text
             with col_html2:
                 st.markdown("### Citation (End of Text)")
-                components.html(f'<div class="rendered-citation">{citation_link_end}</div>', height=50)
-                components.html(copy_to_clipboard_js(citation_link_end, "html_end"), height=100)
+                html_citation_end = citation_link_end
+                
+                st.markdown('<div class="rendered-citation">', unsafe_allow_html=True)
+                st.markdown(html_citation_end, unsafe_allow_html=True)
+                st.markdown(copy_to_clipboard_js(html_citation_end.replace('`', '\\`'), "html_end"), unsafe_allow_html=True)
+                st.markdown('</div>', unsafe_allow_html=True)
 
             # Citation Hash Details
             st.markdown("### Citation Hash Details (for Verification)")