Update app.py

app.py

@@ -1,6 +1,7 @@
 import streamlit as st
 import markdown
 import os
+import re
 
 # Title of the app
 st.title("Markdown Viewer")
@@ -14,16 +15,104 @@ def handle_file_upload(uploaded_file):
         return uploaded_file.read().decode("utf-8")
     return None
 
+def generate_toc_with_links(markdown_text):
+    toc = []
+    for line in markdown_text.splitlines():
+        match = re.match(r'^(#{1,3})\s+(.*)', line)
+        if match:
+            level = len(match.group(1))
+            title = match.group(2).strip()
+            # Create a clean anchor ID - remove special chars and replace spaces with hyphens
+            anchor = re.sub(r'[^\w\s-]', '', title.lower())
+            anchor = re.sub(r'[\s-]+', '-', anchor).strip('-')
+            toc.append((level, title, anchor))
+    return toc
+
+def render_toc_with_links(toc):
+    if not toc:
+        return "<p>No headings found in document.</p>"
+    
+    toc_html = '<div class="toc">'
+    prev_level = 0
+    
+    for level, title, anchor in toc:
+        # Handle proper nesting of lists
+        if level > prev_level:
+            for _ in range(level - prev_level):
+                toc_html += "<ul>"
+        elif level < prev_level:
+            for _ in range(prev_level - level):
+                toc_html += "</ul>"
+        
+        indent = 20 * (level - 1)
+        toc_html += f'<li style="margin-left: {indent}px;"><a href="#{anchor}">{title}</a></li>'
+        prev_level = level
+    
+    # Close any remaining open lists
+    for _ in range(prev_level):
+        toc_html += "</ul>"
+    
+    toc_html += '</div>'
+    return toc_html
+
+def modify_html_with_anchors(html_content, toc_items):
+    """Add ID attributes to headers for anchor links"""
+    modified_html = html_content
+    for level, title, anchor in toc_items:
+        # Find the HTML heading and add an id attribute to it
+        heading_regex = f'<h{level}>({re.escape(title)})</h{level}>'
+        replacement = f'<h{level} id="{anchor}">\\1</h{level}>'
+        modified_html = re.sub(heading_regex, replacement, modified_html)
+    
+    return modified_html
+
+# Add CSS for TOC styling
+st.markdown("""
+<style>
+.toc {
+    background-color: #f8f9fa;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 15px;
+    margin-bottom: 20px;
+}
+.toc ul {
+    padding-left: 10px;
+    margin-bottom: 0;
+}
+.toc li {
+    list-style-type: none;
+    margin-bottom: 5px;
+}
+</style>
+""", unsafe_allow_html=True)
+
 with st.sidebar.expander("Markdown Input", expanded=True):
     markdown_input = st.text_area("Enter your markdown content here:", height=300)
     uploaded_file = st.file_uploader("Upload a Markdown file:", type="md")
+    
+    # Add a toggle for TOC display
+    show_toc = st.checkbox("Show Table of Contents", value=True)
 
 if uploaded_file:
     markdown_input = handle_file_upload(uploaded_file)
 
+# Main content area
 if markdown_input:
-    # Update to render code snippets correctly
+    # Generate and display TOC
+    toc_items = generate_toc_with_links(markdown_input)
+    
+    if show_toc and toc_items:
+        st.markdown("## Table of Contents", unsafe_allow_html=True)
+        toc_html = render_toc_with_links(toc_items)
+        st.markdown(toc_html, unsafe_allow_html=True)
+        st.markdown("---", unsafe_allow_html=True)
+
+    # Convert markdown to HTML and add anchor IDs
     html_content = markdown.markdown(markdown_input, extensions=['tables', 'fenced_code'])
-    st.markdown(html_content, unsafe_allow_html=True)
+    html_with_anchors = modify_html_with_anchors(html_content, toc_items)
+    
+    # Display the markdown content
+    st.markdown(html_with_anchors, unsafe_allow_html=True)
 else:
     st.info("Please upload a markdown file or enter content in the sidebar.")