Spaces:
Sleeping
Sleeping
File size: 3,647 Bytes
ca82dc9 a56bdae b1d5b05 ca82dc9 cfdc918 810b0ce a56bdae 810b0ce a56bdae 810b0ce a56bdae 810b0ce a56bdae 810b0ce a56bdae 810b0ce ca82dc9 a56bdae ca82dc9 a56bdae ca82dc9 cfdc918 ca82dc9 a56bdae ca82dc9 a56bdae ca82dc9 a56bdae cfdc918 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
import streamlit as st
from markdown import markdown
from bs4 import BeautifulSoup
import streamlit.components.v1 as components
# 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)
soup = BeautifulSoup(html, features='html.parser')
return soup.get_text()
def copy_button(text_to_copy, button_id):
# Creating a safer version of the text for JavaScript
escaped_text = text_to_copy.replace('"', '\\"').replace('\n', '\\n').replace('\r', '\\r')
html_code = f"""
<script>
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) {{
console.error('Failed to copy text: ', err);
}});
}}
</script>
<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;
cursor: pointer; border-radius: 4px;">
Copy
</button>
"""
components.html(html_code, height=50)
st.title("Markdown to Plain Text Converter")
st.write("Paste your Markdown content below and convert it to plain text!")
# Using columns for better layout
col1, col2 = st.columns(2)
with col1:
md_input = st.text_area(
"Markdown Input",
height=300,
placeholder="Paste your Markdown here..."
)
# Convert button
if st.button("Convert"):
converted_text = md_to_text(md_input)
st.session_state.converted_text = converted_text
# Display results
with col2:
if 'converted_text' in st.session_state:
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")
# Preview section with proper copy functionality
with st.expander("Preview Original Markdown"):
if md_input:
st.markdown(md_input, unsafe_allow_html=True)
# 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")
# How to run instructions
st.sidebar.markdown("""
**How to use:**
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
5. The preview's copy button copies the plain text version
""")
# Apply light theme using CSS
st.markdown("""
<style>
.stApp {
background-color: white;
color: #333333;
}
.stTextArea textarea {
background-color: #f9f9f9;
color: #333333;
}
.stButton button {
background-color: #4CAF50;
color: white;
}
.stExpander {
background-color: #f9f9f9;
}
.sidebar .sidebar-content {
background-color: #f0f0f0;
}
</style>
""", unsafe_allow_html=True) |