Update app.py

app.py

@@ -9,6 +9,9 @@ import io
 from PIL import Image
 import fitz  # PyMuPDF
 import re
+import json
+import time
+import components.html as html
 
 # Set page configuration
 st.set_page_config(page_title="LaTeX Editor & Compiler", page_icon="📝", layout="wide")
@@ -86,36 +89,6 @@ def render_pdf_preview(pdf_data):
         st.error(f"Error rendering PDF preview: {str(e)}")
         return None
 
-# Extract partial command from cursor position
-def get_current_command(text, cursor_pos):
-    if cursor_pos <= 0:
-        return ""
-    
-    # Look for the last backslash before cursor
-    start_pos = text[:cursor_pos].rfind("\\")
-    if start_pos == -1:
-        return ""
-    
-    # Extract the partial command (from \ to cursor)
-    partial_cmd = text[start_pos:cursor_pos]
-    return partial_cmd
-
-# Find matching commands for autocomplete
-def find_matching_commands(partial_cmd, all_commands):
-    if not partial_cmd.startswith("\\"):
-        return []
-    
-    partial_without_backslash = partial_cmd[1:].lower()
-    matches = []
-    
-    for cmd in all_commands:
-        cmd_without_backslash = cmd[1:].lower()
-        # Check if command contains the partial input (without \)
-        if cmd_without_backslash.startswith(partial_without_backslash):
-            matches.append(cmd)
-    
-    return matches
-
 # LaTeX package reference
 latex_packages = {
     "Document": {
@@ -225,10 +198,11 @@ latex_commands = {
     }
 }
 
-# Create a flat list of all LaTeX commands for autocomplete
-all_latex_commands = []
+# Flatten all commands for autocomplete
+all_commands = []
 for category, commands in latex_commands.items():
-    all_latex_commands.extend(list(commands.keys()))
+    for cmd in commands:
+        all_commands.append(cmd)
 
 # Default LaTeX template
 default_template = r"""\documentclass{article}
@@ -302,7 +276,141 @@ Your conclusion here.
 \end{document}
 """
 
-# Add custom CSS with improved sidebar styling
+# Create the Monaco Editor component with autocomplete
+def create_monaco_editor():
+    # Convert the LaTeX commands to a format usable by Monaco
+    monaco_suggestions = []
+    for category, commands in latex_commands.items():
+        for cmd, desc in commands.items():
+            # Format command for Monaco
+            cmd_text = cmd.replace("{...}", "").replace("...", "")
+            monaco_suggestions.append({
+                "label": cmd_text,
+                "kind": 14,  # Snippet
+                "insertText": cmd_text,
+                "detail": desc,
+                "documentation": f"Category: {category}"
+            })
+    
+    # JSON stringify the suggestions for passing to JavaScript
+    suggestions_json = json.dumps(monaco_suggestions)
+    
+    # Create the Monaco editor component with LaTeX syntax highlighting and autocomplete
+    monaco_editor = f"""
+    <div id="container" style="width:100%;height:500px;border:1px solid #ccc;"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs/loader.min.js"></script>
+    <script>
+        require.config({{ paths: {{ 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs' }}});
+        
+        // Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
+        // the default worker url location (used when creating WebWorkers). The problem here is that
+        // HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
+        // a web worker through a same-domain script
+        window.MonacoEnvironment = {{
+            getWorkerUrl: function(workerId, label) {{
+                return `data:text/javascript;charset=utf-8,
+                    self.MonacoEnvironment = {{
+                        baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/'
+                    }};
+                    importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs/base/worker/workerMain.js');`;
+            }}
+        }};
+        
+        require(['vs/editor/editor.main'], function() {{
+            // Define LaTeX language
+            monaco.languages.register({{ id: 'latex' }});
+            
+            // Define LaTeX syntax highlighting
+            monaco.languages.setMonarchTokensProvider('latex', {{
+                tokenizer: {{
+                    root: [
+                        [/\\\\[a-zA-Z]+/, 'keyword'],
+                        [/\\\\begin\\{{[^}}]*\\}}/, 'keyword'],
+                        [/\\\\end\\{{[^}}]*\\}}/, 'keyword'],
+                        [/\\$\\$.*?\\$\\$/, 'string'],
+                        [/\\$.*?\\$/, 'string'],
+                        [/%.*$/, 'comment'],
+                        [/\\{{/, 'delimiter.curly'],
+                        [/\\}}/, 'delimiter.curly'],
+                        [/\\[/, 'delimiter.square'],
+                        [/\\]/, 'delimiter.square']
+                    ]
+                }}
+            }});
+            
+            // Setup autocomplete provider for LaTeX
+            monaco.languages.registerCompletionItemProvider('latex', {{
+                provideCompletionItems: function(model, position) {{
+                    const textUntilPosition = model.getValueInRange({{
+                        startLineNumber: position.lineNumber,
+                        startColumn: 1,
+                        endLineNumber: position.lineNumber,
+                        endColumn: position.column
+                    }});
+                    
+                    // Check if we're typing a LaTeX command
+                    const match = textUntilPosition.match(/\\\\([a-zA-Z]*)$/);
+                    if (!match) return {{ suggestions: [] }};
+                    
+                    const word = match[1];
+                    const suggestions = {suggestions_json};
+                    
+                    // Filter suggestions based on what has been typed
+                    return {{
+                        suggestions: suggestions.filter(function(s) {{
+                            return s.label.substring(1).toLowerCase().indexOf(word.toLowerCase()) === 0;
+                        }})
+                    }};
+                }},
+                triggerCharacters: ['\\\\']
+            }});
+            
+            // Get the initial value from localStorage or use default
+            let initialValue = localStorage.getItem('latexEditorContent') || 
+                               {json.dumps(default_template)};
+            
+            // Create the editor
+            const editor = monaco.editor.create(document.getElementById('container'), {{
+                value: initialValue,
+                language: 'latex',
+                theme: 'vs',
+                automaticLayout: true,
+                minimap: {{ enabled: false }},
+                fontSize: 14,
+                fontFamily: "'Courier New', monospace",
+                lineNumbers: "on",
+                scrollBeyondLastLine: false,
+                tabSize: 2,
+                wordWrap: "on"
+            }});
+            
+            // Set up change handler to save content to localStorage
+            editor.onDidChangeModelContent(function() {{
+                const value = editor.getValue();
+                localStorage.setItem('latexEditorContent', value);
+                
+                // Send value back to Streamlit
+                if (window.Streamlit) {{
+                    window.Streamlit.setComponentValue(value);
+                }}
+            }});
+            
+            // Handle initialization from Streamlit
+            window.addEventListener('message', function(event) {{
+                if (event.data.type === 'streamlit:render') {{
+                    const args = event.data.args;
+                    if (args.value) {{
+                        editor.setValue(args.value);
+                    }}
+                }}
+            }});
+        }});
+    </script>
+    """
+    
+    return monaco_editor
+
+# Add custom CSS
 st.markdown("""
 <style>
     /* Editor styling */
@@ -312,11 +420,6 @@ st.markdown("""
         padding: 10px;
         background-color: #f8f9fa;
     }
-    .stTextArea textarea {
-        font-family: 'Courier New', Courier, monospace !important;
-        font-size: 14px !important;
-        line-height: 1.5 !important;
-    }
     
     /* Download button styling */
     .download-button {
@@ -414,62 +517,44 @@ st.markdown("""
         background-color: #f8f9fa;
     }
     
-    /* Autocomplete suggestions */
-    .autocomplete-container {
-        background-color: #f8f9fa;
-        border: 1px solid #dee2e6;
-        border-radius: 4px;
-        padding: 10px;
-        margin-top: 10px;
-        max-height: 200px;
-        overflow-y: auto;
-    }
+    /* Hide Streamlit footer */
+    footer {display: none !important;}
+    #MainMenu {visibility: hidden;}
+</style>
+""", unsafe_allow_html=True)
+
+# Create a component for the Monaco editor
+def monaco_editor_component(key, default_value=""):
+    if key not in st.session_state:
+        st.session_state[key] = default_value
     
-    .suggestion-item {
-        padding: 5px;
-        cursor: pointer;
-        border-radius: 3px;
-    }
+    # Create a placeholder for the editor
+    placeholder = st.empty()
     
-    .suggestion-item:hover {
-        background-color: #e9ecef;
-    }
+    # Display the Monaco editor
+    editor_html = create_monaco_editor()
+    component_value = placeholder.html(editor_html, height=520)
     
-    /* Preview toggle button */
-    .preview-button {
-        margin-top: 15px;
-        width: 100%;
-    }
-</style>
-""", unsafe_allow_html=True)
+    # Return the current value
+    if component_value is not None:
+        st.session_state[key] = component_value
+    
+    return st.session_state[key]
 
 # Main application
 def main():
     st.title("LaTeX Editor & PDF Compiler")
     
-    # Initialize session state variables
-    if 'latex_code' not in st.session_state:
-        st.session_state.latex_code = default_template
-    if 'cursor_pos' not in st.session_state:
-        st.session_state.cursor_pos = 0
-    if 'show_preview' not in st.session_state:
-        st.session_state.show_preview = False
-    
     # Display installation status
     if not is_pdflatex_installed():
         st.warning("⚠️ LaTeX is not installed correctly. The PDF compilation feature will not work.")
         st.info("For Hugging Face Spaces, make sure you have a packages.txt file with the necessary LaTeX packages.")
-        
-        # Show packages.txt content suggestion
-        with st.expander("Required packages.txt content"):
-            st.code("""texlive
-texlive-latex-base
-texlive-latex-extra
-texlive-fonts-recommended
-texlive-science
-python3-dev
-python3-pip
-poppler-utils""", language="text")
+    
+    # Initialize session state
+    if 'latex_code' not in st.session_state:
+        st.session_state.latex_code = default_template
+    if 'show_preview' not in st.session_state:
+        st.session_state.show_preview = False
     
     # Create layout
     col1, col2 = st.columns([3, 2])
@@ -477,50 +562,12 @@ poppler-utils""", language="text")
     with col1:
         st.subheader("LaTeX Editor")
         
-        # Detect current command for autocomplete
-        if 'last_input' in st.session_state:
-            current_command = get_current_command(st.session_state.latex_code, st.session_state.cursor_pos)
-            matching_commands = find_matching_commands(current_command, all_latex_commands)
-            
-            # Display autocomplete suggestions when typing a command
-            if current_command and matching_commands:
-                st.markdown("### Command Suggestions")
-                st.markdown('<div class="autocomplete-container">', unsafe_allow_html=True)
-                for cmd in matching_commands[:10]:  # Limit to 10 suggestions
-                    if st.button(cmd, key=f"suggest_{cmd}"):
-                        # Replace partial command with the full command
-                        text_before = st.session_state.latex_code[:st.session_state.cursor_pos - len(current_command)]
-                        text_after = st.session_state.latex_code[st.session_state.cursor_pos:]
-                        st.session_state.latex_code = text_before + cmd + text_after
-                        st.rerun()
-                st.markdown('</div>', unsafe_allow_html=True)
-        
-        # LaTeX editor
-        latex_code = st.text_area(
-            "Edit your LaTeX document:",
-            value=st.session_state.latex_code,
-            height=500,
-            key="latex_editor",
-            on_change=lambda: setattr(st.session_state, 'last_input', True)
-        )
+        # Use the Monaco editor component
+        latex_code = monaco_editor_component("monaco_editor", st.session_state.latex_code)
         st.session_state.latex_code = latex_code
         
-        # Get cursor position for autocomplete (using JS - note this is limited in Streamlit)
-        # This is a workaround since Streamlit doesn't directly expose cursor position
-        st.markdown("""
-        <script>
-        document.addEventListener('DOMContentLoaded', function() {
-            const textArea = document.querySelector('textarea');
-            if (textArea) {
-                textArea.addEventListener('keyup', function(e) {
-                    const cursorPos = this.selectionStart;
-                    // Would need a way to communicate this to Python
-                    console.log("Cursor position:", cursorPos);
-                });
-            }
-        });
-        </script>
-        """, unsafe_allow_html=True)
+        # Create a small spacer
+        st.write("")
         
         # Control buttons
         col1_1, col1_2, col1_3 = st.columns(3)
@@ -598,8 +645,8 @@ poppler-utils""", language="text")
     # LaTeX Reference Sidebar
     st.sidebar.title("LaTeX Reference")
     
-    # Command quick search
-    quick_search = st.sidebar.text_input("Type to find commands (e.g. 'fr' for '\\frac')")
+    # Command search
+    quick_search = st.sidebar.text_input("Find LaTeX Commands", "")
     
     if quick_search:
         # Find and display matching commands
@@ -618,42 +665,44 @@ poppler-utils""", language="text")
                     st.markdown(f"<div><span class='latex-command'>{cmd}</span> <small>{category}</small></div>", unsafe_allow_html=True)
                 with col2:
                     if st.button("Insert", key=f"quick_{cmd}"):
+                        # Update LaTeX code with the inserted command
                         st.session_state.latex_code += f"\n{cmd}"
                         st.rerun()
         else:
             st.sidebar.info("No matching commands found")
     
     # Regular categories
-    if not quick_search:
-        tab1, tab2 = st.sidebar.tabs(["Commands", "Packages"])
-        
-        with tab1:
-            for category, commands in latex_commands.items():
-                with st.expander(category, expanded=category=="Math"):
-                    st.markdown('<div class="command-list">', unsafe_allow_html=True)
-                    for cmd, desc in commands.items():
-                        col1, col2 = st.sidebar.columns([4, 1])
-                        with col1:
-                            st.markdown(f"<div><span class='latex-command'>{cmd}</span></div>", unsafe_allow_html=True)
-                        with col2:
-                            if st.button("Insert", key=f"btn_{cmd}"):
-                                st.session_state.latex_code += f"\n{cmd}"
-                                st.rerun()
-                    st.markdown('</div>', unsafe_allow_html=True)
-        
-        with tab2:
-            for category, packages in latex_packages.items():
-                with st.expander(category):
-                    st.markdown('<div class="command-list">', unsafe_allow_html=True)
-                    for pkg, desc in packages.items():
-                        col1, col2 = st.sidebar.columns([4, 1])
-                        with col1:
-                            st.markdown(f"<div><span class='latex-command'>{pkg}</span></div>", unsafe_allow_html=True)
-                        with col2:
-                            if st.button("Insert", key=f"btn_{pkg}"):
-                                st.session_state.latex_code += f"\n{pkg}"
-                                st.rerun()
-                    st.markdown('</div>', unsafe_allow_html=True)
+    tab1, tab2 = st.sidebar.tabs(["Commands", "Packages"])
+    
+    with tab1:
+        for category, commands in latex_commands.items():
+            with st.expander(category, expanded=category=="Math"):
+                st.markdown('<div class="command-list">', unsafe_allow_html=True)
+                for cmd, desc in commands.items():
+                    col1, col2 = st.sidebar.columns([4, 1])
+                    with col1:
+                        st.markdown(f"<div><span class='latex-command'>{cmd}</span></div>", unsafe_allow_html=True)
+                    with col2:
+                        if st.button("Insert", key=f"btn_{cmd}"):
+                            # Update LaTeX code with the inserted command
+                            st.session_state.latex_code += f"\n{cmd}"
+                            st.rerun()
+                st.markdown('</div>', unsafe_allow_html=True)
+    
+    with tab2:
+        for category, packages in latex_packages.items():
+            with st.expander(category):
+                st.markdown('<div class="command-list">', unsafe_allow_html=True)
+                for pkg, desc in packages.items():
+                    col1, col2 = st.sidebar.columns([4, 1])
+                    with col1:
+                        st.markdown(f"<div><span class='latex-command'>{pkg}</span></div>", unsafe_allow_html=True)
+                    with col2:
+                        if st.button("Insert", key=f"btn_{pkg}"):
+                            # Update LaTeX code with the inserted command
+                            st.session_state.latex_code += f"\n{pkg}"
+                            st.rerun()
+                st.markdown('</div>', unsafe_allow_html=True)
 
 if __name__ == "__main__":
     main()