Update app.py

app.py

@@ -3,8 +3,13 @@ from markdown import markdown
 from bs4 import BeautifulSoup
 import streamlit.components.v1 as components
 
-# Set page config (without theme parameter)
-st.set_page_config(page_title="Markdown Converter", layout="wide", initial_sidebar_state="expanded", page_icon="📝")
+# Set page config
+st.set_page_config(
+    page_title="Markdown Converter", 
+    layout="wide", 
+    initial_sidebar_state="expanded", 
+    page_icon="📝"
+)
 
 def md_to_text(md_text):
     html = markdown(md_text)
@@ -13,26 +18,25 @@ def md_to_text(md_text):
 
 def copy_button(text_to_copy, button_id):
     # Creating a safer version of the text for JavaScript
-    # This avoids the backslash issue in f-strings
     escaped_text = text_to_copy.replace('"', '\\"').replace('\n', '\\n').replace('\r', '\\r')
     
-    html_code = """
+    html_code = f"""
     <script>
-    function copyText""" + button_id + """() {
-        const text = \"""" + escaped_text + """\";
-        navigator.clipboard.writeText(text).then(function() {
+    function copyText{button_id}() {{
+        const text = "{escaped_text}";
+        navigator.clipboard.writeText(text).then(function() {{
             console.log('Text copied to clipboard');
-            document.getElementById('copy-button-""" + button_id + """').innerHTML = 'Copied!';
-            setTimeout(function() {
-                document.getElementById('copy-button-""" + button_id + """').innerHTML = 'Copy';
-            }, 2000);
-        })
-        .catch(function(err) {
+            document.getElementById('copy-button-{button_id}').innerHTML = 'Copied!';
+            setTimeout(function() {{
+                document.getElementById('copy-button-{button_id}').innerHTML = 'Copy';
+            }}, 2000);
+        }})
+        .catch(function(err) {{
             console.error('Failed to copy text: ', err);
-        });
-    }
+        }});
+    }}
     </script>
-    <button id="copy-button-""" + button_id + """" onclick="copyText""" + button_id + """()" 
+    <button id="copy-button-{button_id}" onclick="copyText{button_id}()" 
             style="background-color: #4CAF50; color: white; border: none; 
                    padding: 5px 10px; text-align: center; text-decoration: none; 
                    display: inline-block; font-size: 14px; margin: 4px 2px; 
@@ -50,8 +54,11 @@ st.write("Paste your Markdown content below and convert it to plain text!")
 col1, col2 = st.columns(2)
 
 with col1:
-    md_input = st.text_area("Markdown Input", height=300, 
-                          placeholder="Paste your Markdown here...")
+    md_input = st.text_area(
+        "Markdown Input", 
+        height=300, 
+        placeholder="Paste your Markdown here..."
+    )
 
 # Convert button
 if st.button("Convert"):
@@ -61,22 +68,24 @@ if st.button("Convert"):
 # Display results
 with col2:
     if 'converted_text' in st.session_state:
-        # Removed the "Plain Text Output" label
-        st.text_area("", 
-                    value=st.session_state.converted_text, 
-                    height=300,
-                    key="output_area")
+        st.text_area(
+            "", 
+            value=st.session_state.converted_text, 
+            height=300,
+            key="output_area"
+        )
         
         # Add copy button
         if st.session_state.converted_text:
             copy_button(st.session_state.converted_text, "output")
 
-# Optional: Add preview toggle with copy button
+# Preview section with proper copy functionality
 with st.expander("Preview Original Markdown"):
     if md_input:
         st.markdown(md_input, unsafe_allow_html=True)
-        # Add copy button for the preview
-        copy_button(md_input, "preview")
+        # Convert to plain text for the copy button
+        preview_plain_text = md_to_text(md_input)
+        copy_button(preview_plain_text, "preview")
     else:
         st.write("No Markdown to preview")
 
@@ -86,7 +95,8 @@ st.sidebar.markdown("""
 1. Paste your Markdown in the left panel
 2. Click 'Convert' 
 3. Use the 'Copy' button in the right panel
-4. Toggle the preview to see original formatting and copy if needed
+4. Toggle the preview to see original formatting
+5. The preview's copy button copies the plain text version
 """)
 
 # Apply light theme using CSS