Update app.py

app.py

@@ -13,7 +13,7 @@ import re
 
 # Set page configuration
 st.set_page_config(
-    page_title="Advanced LaTeX Editor",
+    page_title="Professional LaTeX Editor",
     page_icon="📝",
     layout="wide",
     initial_sidebar_state="collapsed"
@@ -109,7 +109,7 @@ def parse_latex_errors(output):
     
     return errors, warnings
 
-# Function to extract document structure - fixed to handle non-string input
+# Function to extract document structure
 def extract_document_structure(latex_code):
     structure = []
     
@@ -149,6 +149,48 @@ def extract_document_structure(latex_code):
     
     return structure
 
+# Function to analyze LaTeX packages
+def analyze_packages(latex_code):
+    if not isinstance(latex_code, str):
+        try:
+            latex_code = str(latex_code)
+        except:
+            return []
+    
+    # Find all package imports
+    package_pattern = r'\\usepackage(?:\[.*?\])?\{([^}]+)\}'
+    matches = re.finditer(package_pattern, latex_code)
+    
+    packages = []
+    for match in matches:
+        package_name = match.group(1)
+        packages.append(package_name)
+    
+    return packages
+
+# Function to find all environments in the document
+def find_environments(latex_code):
+    if not isinstance(latex_code, str):
+        try:
+            latex_code = str(latex_code)
+        except:
+            return []
+    
+    # Find all environments (begin-end pairs)
+    env_pattern = r'\\begin\{([^}]+)\}(.*?)\\end\{\1\}'
+    matches = re.finditer(env_pattern, latex_code, re.DOTALL)
+    
+    environments = []
+    for match in matches:
+        env_name = match.group(1)
+        environments.append({
+            'name': env_name,
+            'position': match.start(),
+            'content': match.group(2)
+        })
+    
+    return environments
+
 # Default LaTeX template
 default_template = r"""\documentclass{article}
 \usepackage[utf8]{inputenc}
@@ -158,7 +200,7 @@ default_template = r"""\documentclass{article}
 \usepackage{hyperref}
 \usepackage{xcolor}
 
-\title{Advanced \LaTeX{} Document}
+\title{Professional \LaTeX{} Document}
 \author{Your Name}
 \date{\today}
 
@@ -244,7 +286,7 @@ Your conclusion here.
 \end{document}
 """
 
-# Enhanced VSCode-like advanced styling
+# Enhanced VSCode-like advanced styling with syntax highlighting
 st.markdown("""
 <style>
     /* Base theming - VS Code inspired */
@@ -267,8 +309,8 @@ st.markdown("""
         background-color: #1177bb;
     }
     
-    /* VS Code-like editor */
-    .stTextArea textarea {
+    /* VS Code-like editor - with additional syntax highlighting */
+    .editor-area textarea {
         font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
         font-size: 14px !important;
         line-height: 1.5 !important;
@@ -279,6 +321,45 @@ st.markdown("""
         border: 1px solid #252526 !important;
     }
     
+    /* Add a special class for syntax highlighting in the preview */
+    .syntax-highlight {
+        background-color: #1e1e1e;
+        color: #d4d4d4;
+        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        font-size: 14px;
+        padding: 10px;
+        border-radius: 4px;
+        border: 1px solid #252526;
+        white-space: pre-wrap;
+        margin-top: 10px;
+        overflow-x: auto;
+    }
+    
+    /* Syntax highlighting for different LaTeX elements */
+    .syntax-highlight .command {
+        color: #569cd6; /* Blue for commands */
+    }
+    
+    .syntax-highlight .environment {
+        color: #4ec9b0; /* Teal for environments */
+    }
+    
+    .syntax-highlight .bracket {
+        color: #d4d4d4; /* White for brackets */
+    }
+    
+    .syntax-highlight .math {
+        color: #c586c0; /* Purple for math */
+    }
+    
+    .syntax-highlight .comment {
+        color: #6a9955; /* Green for comments */
+    }
+    
+    .syntax-highlight .package {
+        color: #dcdcaa; /* Yellow for package imports */
+    }
+    
     /* VS Code-like editor container */
     .editor-container {
         background-color: #1e1e1e;
@@ -553,61 +634,236 @@ st.markdown("""
     .info-value {
         text-align: right;
     }
+    
+    /* Packages panel */
+    .packages-panel {
+        background-color: #252526;
+        border: 1px solid #2d2d2d;
+        border-radius: 4px;
+        margin-top: 10px;
+        padding: 0;
+    }
+    
+    .packages-header {
+        background-color: #2d2d2d;
+        padding: 5px 10px;
+        font-weight: bold;
+        font-size: 13px;
+    }
+    
+    .package-item {
+        padding: 5px 10px;
+        border-bottom: 1px solid #2d2d2d;
+        display: flex;
+        align-items: center;
+    }
+    
+    .package-name {
+        color: #dcdcaa;
+        margin-right: 10px;
+        font-family: monospace;
+    }
+    
+    /* Environment analyzer */
+    .environments-panel {
+        background-color: #252526;
+        border: 1px solid #2d2d2d;
+        border-radius: 4px;
+        margin-top: 10px;
+        padding: 0;
+    }
+    
+    .environments-header {
+        background-color: #2d2d2d;
+        padding: 5px 10px;
+        font-weight: bold;
+        font-size: 13px;
+    }
+    
+    .environment-item {
+        padding: 5px 10px;
+        border-bottom: 1px solid #2d2d2d;
+    }
+    
+    .environment-name {
+        color: #4ec9b0;
+        font-family: monospace;
+        font-weight: bold;
+    }
+    
+    /* Syntax highlight code preview */
+    .code-preview {
+        background-color: #1e1e1e;
+        border: 1px solid #2d2d2d;
+        border-radius: 4px;
+        margin-top: 10px;
+        padding: 10px;
+        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        font-size: 14px;
+        line-height: 1.5;
+        overflow-x: auto;
+        white-space: pre-wrap;
+    }
+    
+    /* Custom select styling */
+    .stSelectbox [data-baseweb="select"] {
+        background-color: #3c3c3c;
+        border-color: #3c3c3c;
+    }
+    
+    .stSelectbox [data-baseweb="select"] > div {
+        color: #cccccc;
+    }
+    
+    /* Keyboard shortcuts display */
+    .shortcuts-container {
+        background-color: #252526;
+        border: 1px solid #2d2d2d;
+        border-radius: 4px;
+        margin-top: 10px;
+        padding: 10px;
+    }
+    
+    .shortcut-row {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 8px;
+        border-bottom: 1px solid #333;
+        padding-bottom: 8px;
+    }
+    
+    .shortcut-keys {
+        background-color: #3c3c3c;
+        padding: 2px 8px;
+        border-radius: 3px;
+        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        font-size: 12px;
+    }
+    
+    .shortcut-description {
+        color: #cccccc;
+        font-size: 13px;
+    }
 </style>
 """, unsafe_allow_html=True)
 
-# VS Code-style editor tabs
-def render_editor_tabs(active_tab="document.tex"):
-    tab_html = f"""
-    <div class="tab-bar">
-        <div class="tab active">
-            <span class="tab-icon">📄</span> {active_tab}
-        </div>
-    </div>
-    """
-    st.markdown(tab_html, unsafe_allow_html=True)
-
-# Build a VS Code-like toolbar
-def render_toolbar():
+# Function to create a functional VS Code-like toolbar
+def render_functional_toolbar():
     toolbar_html = """
     <div class="toolbar">
-        <button class="toolbar-button" title="Bold">
+        <button class="toolbar-button" title="Bold" onclick="insertAtCursor('\\\\textbf{', '}')">
             <strong>B</strong>
         </button>
-        <button class="toolbar-button" title="Italic">
+        <button class="toolbar-button" title="Italic" onclick="insertAtCursor('\\\\textit{', '}')">
             <em>I</em>
         </button>
-        <button class="toolbar-button" title="Math">
+        <button class="toolbar-button" title="Inline Math" onclick="insertAtCursor('$', '$')">
             ∑
         </button>
         <div class="toolbar-separator"></div>
-        <button class="toolbar-button" title="Section">
+        <button class="toolbar-button" title="Section" onclick="insertAtCursor('\\\\section{', '}')">
             §
         </button>
-        <button class="toolbar-button" title="Subsection">
+        <button class="toolbar-button" title="Subsection" onclick="insertAtCursor('\\\\subsection{', '}')">
             §§
         </button>
         <div class="toolbar-separator"></div>
-        <button class="toolbar-button" title="Itemize">
+        <button class="toolbar-button" title="Itemize" onclick="insertAtCursor('\\\\begin{itemize}\\n  \\\\item ', '\\n\\\\end{itemize}')">
             •
         </button>
-        <button class="toolbar-button" title="Enumerate">
+        <button class="toolbar-button" title="Enumerate" onclick="insertAtCursor('\\\\begin{enumerate}\\n  \\\\item ', '\\n\\\\end{enumerate}')">
             1.
         </button>
         <div class="toolbar-separator"></div>
-        <button class="toolbar-button" title="Equation">
+        <button class="toolbar-button" title="Equation" onclick="insertAtCursor('\\\\begin{equation}\\n  ', '\\n\\\\end{equation}')">
             =
         </button>
-        <button class="toolbar-button" title="Figure">
+        <button class="toolbar-button" title="Align" onclick="insertAtCursor('\\\\begin{align}\\n  ', '\\n\\\\end{align}')">
+            ≡
+        </button>
+        <button class="toolbar-button" title="Figure" onclick="insertAtCursor('\\\\begin{figure}[h]\\n  \\\\centering\\n  \\\\includegraphics[width=0.8\\\\textwidth]{', '}\\n  \\\\caption{Caption}\\n  \\\\label{fig:label}\\n\\\\end{figure}')">
             🖼
         </button>
-        <button class="toolbar-button" title="Table">
+        <button class="toolbar-button" title="Table" onclick="insertAtCursor('\\\\begin{table}[h]\\n  \\\\centering\\n  \\\\begin{tabular}{ccc}\\n    ', ' & B & C \\\\\\\\\\n    1 & 2 & 3 \\\\\\\\\\n  \\\\end{tabular}\\n  \\\\caption{Caption}\\n  \\\\label{tab:label}\\n\\\\end{table}')">
             ⊞
         </button>
+        <div class="toolbar-separator"></div>
+        <button class="toolbar-button" title="Fraction" onclick="insertAtCursor('\\\\frac{', '}{denominator}')">
+            ⅟
+        </button>
+        <button class="toolbar-button" title="Square Root" onclick="insertAtCursor('\\\\sqrt{', '}')">
+            √
+        </button>
+        <button class="toolbar-button" title="Add Package" onclick="insertAtCursor('\\\\usepackage{', '}')">
+            📦
+        </button>
     </div>
+    
+    <script>
+    function insertAtCursor(before, after) {
+        // Find the textarea element
+        var textarea = document.querySelector('textarea');
+        if (!textarea) return;
+        
+        // Get current cursor position
+        var startPos = textarea.selectionStart;
+        var endPos = textarea.selectionEnd;
+        
+        // Get text before and after selection
+        var textBefore = textarea.value.substring(0, startPos);
+        var textSelected = textarea.value.substring(startPos, endPos);
+        var textAfter = textarea.value.substring(endPos);
+        
+        // Insert the text
+        var newText;
+        if (textSelected) {
+            // If text is selected, wrap it with before and after
+            newText = textBefore + before + textSelected + after + textAfter;
+        } else {
+            // If no text is selected, just insert before and after
+            newText = textBefore + before + after + textAfter;
+            // Put cursor between before and after
+            var newCursorPos = startPos + before.length;
+        }
+        
+        // Update textarea value
+        textarea.value = newText;
+        
+        // Set selection range to position cursor appropriately
+        if (textSelected) {
+            // If text was selected, select the wrapped text
+            textarea.setSelectionRange(startPos, endPos + before.length + after.length);
+        } else {
+            // Otherwise position cursor between before and after
+            textarea.setSelectionRange(newCursorPos, newCursorPos);
+        }
+        
+        // Focus on textarea
+        textarea.focus();
+        
+        // Trigger an input event to update Streamlit
+        var event = new Event('input', { bubbles: true });
+        textarea.dispatchEvent(event);
+        
+        // Trigger change event to update Streamlit session state
+        var changeEvent = new Event('change', { bubbles: true });
+        textarea.dispatchEvent(changeEvent);
+    }
+    </script>
     """
     st.markdown(toolbar_html, unsafe_allow_html=True)
 
+# VS Code-style editor tabs
+def render_editor_tabs(active_tab="document.tex"):
+    tab_html = f"""
+    <div class="tab-bar">
+        <div class="tab active">
+            <span class="tab-icon">📄</span> {active_tab}
+        </div>
+    </div>
+    """
+    st.markdown(tab_html, unsafe_allow_html=True)
+
 # VS Code-style status bar
 def render_status_bar():
     status_html = """
@@ -619,6 +875,42 @@ def render_status_bar():
     """
     st.markdown(status_html, unsafe_allow_html=True)
 
+# Create syntax highlighting for the code preview
+def syntax_highlight_latex(latex_code):
+    if not isinstance(latex_code, str):
+        try:
+            latex_code = str(latex_code)
+        except:
+            return "<pre>Invalid code</pre>"
+    
+    # Replace special HTML characters
+    latex_code = latex_code.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
+    
+    # Highlight LaTeX commands (starting with \)
+    latex_code = re.sub(r'(\\[a-zA-Z]+)(\{|\[|\s|$)', r'<span class="command">\1</span>\2', latex_code)
+    
+    # Highlight environment tags
+    latex_code = re.sub(r'(\\begin\{[^}]+\}|\\end\{[^}]+\})', r'<span class="environment">\1</span>', latex_code)
+    
+    # Highlight math modes
+    latex_code = re.sub(r'(\$\$.*?\$\$|\$.*?\$)', r'<span class="math">\1</span>', latex_code)
+    
+    # Highlight comments
+    latex_code = re.sub(r'(%.*$)', r'<span class="comment">\1</span>', latex_code)
+    
+    # Highlight package imports
+    latex_code = re.sub(r'(\\usepackage(\[.*?\])?\{[^}]+\})', r'<span class="package">\1</span>', latex_code)
+    
+    # Highlight brackets
+    latex_code = re.sub(r'(\{|\}|\[|\])', r'<span class="bracket">\1</span>', latex_code)
+    
+    return f'<div class="syntax-highlight">{latex_code}</div>'
+
+# Function to display the code with syntax highlighting
+def display_code_with_syntax_highlighting(latex_code):
+    highlighted_code = syntax_highlight_latex(latex_code)
+    st.markdown(highlighted_code, unsafe_allow_html=True)
+
 # Render a document outline based on section hierarchy
 def render_document_outline(structure):
     if not structure:
@@ -702,6 +994,7 @@ def render_document_info(latex_code):
     
     # Count equations
     equation_count = len(re.findall(r'\\begin\{equation', latex_code))
+    align_count = len(re.findall(r'\\begin\{align', latex_code))
     
     # Count figures
     figure_count = len(re.findall(r'\\begin\{figure', latex_code))
@@ -709,6 +1002,13 @@ def render_document_info(latex_code):
     # Count tables
     table_count = len(re.findall(r'\\begin\{table', latex_code))
     
+    # Count custom command definitions
+    command_count = len(re.findall(r'\\newcommand', latex_code))
+    
+    # Count references
+    ref_count = len(re.findall(r'\\ref\{', latex_code))
+    cite_count = len(re.findall(r'\\cite\{', latex_code))
+    
     # Render the info panel
     st.markdown('<div class="document-info">', unsafe_allow_html=True)
     
@@ -718,8 +1018,12 @@ def render_document_info(latex_code):
         ("Character Count", char_count),
         ("Line Count", line_count),
         ("Equations", equation_count),
+        ("Align Environments", align_count),
         ("Figures", figure_count),
-        ("Tables", table_count)
+        ("Tables", table_count),
+        ("Custom Commands", command_count),
+        ("References", ref_count),
+        ("Citations", cite_count)
     ]
     
     for label, value in info_rows:
@@ -733,6 +1037,81 @@ def render_document_info(latex_code):
     
     st.markdown('</div>', unsafe_allow_html=True)
 
+# Display the packages used in the document
+def render_packages_panel(packages):
+    if not packages:
+        return
+    
+    st.markdown('<div class="packages-panel">', unsafe_allow_html=True)
+    st.markdown('<div class="packages-header">Imported Packages</div>', unsafe_allow_html=True)
+    
+    for package in packages:
+        st.markdown(
+            f'<div class="package-item">'
+            f'<span class="package-name">\\usepackage{{{package}}}</span>'
+            f'</div>',
+            unsafe_allow_html=True
+        )
+    
+    st.markdown('</div>', unsafe_allow_html=True)
+
+# Display environments in the document
+def render_environments_panel(environments):
+    if not environments:
+        return
+    
+    st.markdown('<div class="environments-panel">', unsafe_allow_html=True)
+    st.markdown('<div class="environments-header">Environments</div>', unsafe_allow_html=True)
+    
+    # Count environment types
+    env_counts = {}
+    for env in environments:
+        env_name = env['name']
+        if env_name in env_counts:
+            env_counts[env_name] += 1
+        else:
+            env_counts[env_name] = 1
+    
+    # Display counts
+    for env_name, count in env_counts.items():
+        st.markdown(
+            f'<div class="environment-item">'
+            f'<span class="environment-name">\\begin{{{env_name}}}</span> - {count} instances'
+            f'</div>',
+            unsafe_allow_html=True
+        )
+    
+    st.markdown('</div>', unsafe_allow_html=True)
+
+# Display keyboard shortcuts
+def render_keyboard_shortcuts():
+    st.markdown('<div class="shortcuts-container">', unsafe_allow_html=True)
+    st.markdown('<div style="font-weight:bold;margin-bottom:10px;">Keyboard Shortcuts</div>', unsafe_allow_html=True)
+    
+    shortcuts = [
+        ("Ctrl+B", "Insert bold text"),
+        ("Ctrl+I", "Insert italic text"),
+        ("Ctrl+M", "Insert inline math"),
+        ("Ctrl+E", "Insert equation"),
+        ("Ctrl+L", "Insert list"),
+        ("Ctrl+F", "Insert fraction"),
+        ("F5", "Compile document"),
+        ("Ctrl+S", "Save document"),
+        ("Ctrl+/", "Toggle comment"),
+        ("Tab", "Indent")
+    ]
+    
+    for key, description in shortcuts:
+        st.markdown(
+            f'<div class="shortcut-row">'
+            f'<span class="shortcut-keys">{key}</span>'
+            f'<span class="shortcut-description">{description}</span>'
+            f'</div>',
+            unsafe_allow_html=True
+        )
+    
+    st.markdown('</div>', unsafe_allow_html=True)
+
 # Main application
 def main():
     # Initialize session state
@@ -746,6 +1125,8 @@ def main():
         st.session_state.errors = []
     if 'warnings' not in st.session_state:
         st.session_state.warnings = []
+    if 'show_syntax_highlight' not in st.session_state:
+        st.session_state.show_syntax_highlight = False
     
     # Check installation status
     if not is_pdflatex_installed():
@@ -756,7 +1137,7 @@ def main():
     
     with col1:
         # Create tabs for main editing area with VS Code style
-        editor_tabs = st.tabs(["Editor", "Settings"])
+        editor_tabs = st.tabs(["Editor", "Preview", "Settings"])
         
         with editor_tabs[0]:
             # VS Code-like editor interface
@@ -765,10 +1146,11 @@ def main():
             # Tab bar
             render_editor_tabs()
             
-            # Toolbar
-            render_toolbar()
+            # Toolbar with functional buttons
+            render_functional_toolbar()
             
-            # Simple text area with VS Code styling
+            # Editor with VS Code styling
+            st.markdown('<div class="editor-area">', unsafe_allow_html=True)
             latex_code = st.text_area(
                 "",
                 value=st.session_state.latex_code,
@@ -776,6 +1158,7 @@ def main():
                 key="latex_editor",
                 label_visibility="collapsed"
             )
+            st.markdown('</div>', unsafe_allow_html=True)
             st.session_state.latex_code = latex_code
             
             # Status bar
@@ -804,6 +1187,14 @@ def main():
                 st.rerun()
         
         with editor_tabs[1]:
+            # Show syntax highlighted preview
+            st.markdown("<h3>Syntax Highlighted Preview</h3>", unsafe_allow_html=True)
+            st.markdown("<p>This shows your LaTeX code with syntax highlighting</p>", unsafe_allow_html=True)
+            
+            # Display code with syntax highlighting
+            display_code_with_syntax_highlighting(st.session_state.latex_code)
+        
+        with editor_tabs[2]:
             st.markdown("<h3>LaTeX Settings</h3>", unsafe_allow_html=True)
             
             st.markdown('<div class="control-panel">', unsafe_allow_html=True)
@@ -813,6 +1204,7 @@ def main():
                 st.checkbox("Auto-compile on save", value=False, key="auto_compile")
                 st.checkbox("Use pdflatex", value=True, key="use_pdflatex")
                 st.checkbox("Enable BibTeX", value=False, key="use_bibtex")
+                st.checkbox("Show line numbers", value=True, key="show_line_numbers")
             
             with col_b:
                 st.selectbox("Document Class", 
@@ -821,12 +1213,18 @@ def main():
                 st.selectbox("PDF Engine", 
                              ["pdflatex", "xelatex", "lualatex"], 
                              index=0, key="pdf_engine")
+                st.selectbox("Editor Theme",
+                            ["Dark", "Light", "High Contrast"],
+                            index=0, key="editor_theme")
             
             st.markdown('</div>', unsafe_allow_html=True)
+            
+            # Display keyboard shortcuts
+            render_keyboard_shortcuts()
     
     with col2:
         # Output tabs with VS Code style
-        output_tabs = st.tabs(["Output", "Outline", "Problems", "Info"])
+        output_tabs = st.tabs(["Output", "Outline", "Analysis", "Problems"])
         
         with output_tabs[0]:
             # PDF compilation and output
@@ -920,18 +1318,36 @@ def main():
                 structure = extract_document_structure(st.session_state.latex_code)
             else:
                 structure = []
-            render_document_outline(structure)
+            
+            if structure:
+                render_document_outline(structure)
+            else:
+                st.info("No document structure detected. Add sections using the toolbar.")
         
         with output_tabs[2]:
+            # Document analysis features
+            
+            # Document info
+            render_document_info(st.session_state.latex_code)
+            
+            # Package analysis
+            packages = analyze_packages(st.session_state.latex_code)
+            if packages:
+                render_packages_panel(packages)
+            else:
+                st.info("No packages detected. Add packages using \\usepackage{}.")
+            
+            # Environment analysis
+            environments = find_environments(st.session_state.latex_code)
+            if environments:
+                render_environments_panel(environments)
+        
+        with output_tabs[3]:
             # Problems panel (errors & warnings)
             if st.session_state.errors or st.session_state.warnings:
                 render_problems(st.session_state.errors, st.session_state.warnings)
             else:
-                st.info("No problems detected")
-        
-        with output_tabs[3]:
-            # Document information panel
-            render_document_info(st.session_state.latex_code)
+                st.info("No problems detected in the document.")
 
 if __name__ == "__main__":
     main()