Update app.py

app.py

@@ -8,10 +8,6 @@ import shutil
 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")
@@ -198,11 +194,26 @@ latex_commands = {
     }
 }
 
-# Flatten all commands for autocomplete
-all_commands = []
+# Flatten commands and shortcuts dictionary for autocomplete
+flat_commands = {}
 for category, commands in latex_commands.items():
-    for cmd in commands:
-        all_commands.append(cmd)
+    for cmd, desc in commands.items():
+        cmd_parts = cmd.split("{")[0].strip()  # Get just the command part
+        flat_commands[cmd_parts] = {"full": cmd, "desc": desc, "category": category}
+
+# Add common math shortcuts
+math_shortcuts = {
+    "\\fr": "\\frac{}{}", 
+    "\\eq": "\\begin{equation}\n\n\\end{equation}",
+    "\\al": "\\begin{align}\n\n\\end{align}",
+    "\\it": "\\item ",
+    "\\bf": "\\textbf{}",
+    "\\sq": "\\sqrt{}",
+    "\\vec": "\\vec{}",
+    "\\int": "\\int_{}^{}",
+    "\\sum": "\\sum_{}^{}",
+    "\\lim": "\\lim_{\\to }"
+}
 
 # Default LaTeX template
 default_template = r"""\documentclass{article}
@@ -276,141 +287,7 @@ Your conclusion here.
 \end{document}
 """
 
-# 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
+# Add custom CSS with improved sidebar styling
 st.markdown("""
 <style>
     /* Editor styling */
@@ -420,6 +297,11 @@ 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 {
@@ -509,52 +391,49 @@ st.markdown("""
         background-color: #0069d9;
     }
     
-    /* PDF preview container */
-    .pdf-preview-container {
-        border: 1px solid #dee2e6;
-        border-radius: 5px;
-        padding: 15px;
+    /* Hint box styling */
+    .hint-box {
         background-color: #f8f9fa;
+        border: 1px solid #dee2e6;
+        border-radius: 4px;
+        padding: 10px;
+        margin-top: 5px;
     }
     
-    /* Hide Streamlit footer */
-    footer {display: none !important;}
-    #MainMenu {visibility: hidden;}
+    /* Shortcut span */
+    .shortcut-span {
+        background-color: #e9ecef;
+        padding: 2px 6px;
+        border-radius: 3px;
+        font-family: monospace;
+        margin-right: 10px;
+    }
+    
+    /* Shortcut tip */
+    .shortcut-tip {
+        font-style: italic;
+        color: #6c757d;
+        font-size: 0.85em;
+    }
 </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
-    
-    # Create a placeholder for the editor
-    placeholder = st.empty()
-    
-    # Display the Monaco editor
-    editor_html = create_monaco_editor()
-    component_value = placeholder.html(editor_html, height=520)
-    
-    # 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")
     
-    # 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.")
-    
     # 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
+    if 'last_word' not in st.session_state:
+        st.session_state.last_word = ""
+    
+    # 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.")
     
     # Create layout
     col1, col2 = st.columns([3, 2])
@@ -562,12 +441,60 @@ def main():
     with col1:
         st.subheader("LaTeX Editor")
         
-        # Use the Monaco editor component
-        latex_code = monaco_editor_component("monaco_editor", st.session_state.latex_code)
-        st.session_state.latex_code = latex_code
+        # Setup autocompletion hints
+        hint_container = st.empty()
         
-        # Create a small spacer
-        st.write("")
+        # Detect what's being typed for autocompletion
+        current_text = st.session_state.latex_code
+        if '\\' in current_text:
+            # Find the last command being typed
+            lines = current_text.split('\n')
+            for line in reversed(lines):
+                if '\\' in line:
+                    last_slash_pos = line.rfind('\\')
+                    command_start = line[last_slash_pos:]
+                    # Extract the command without arguments
+                    command_parts = command_start.split('{')[0].split(' ')[0].strip()
+                    if command_parts and command_parts != st.session_state.last_word:
+                        st.session_state.last_word = command_parts
+                        
+                        # Show hints for matching commands
+                        matching_commands = []
+                        
+                        # Check for shortcut matches
+                        shortcut_matches = []
+                        for shortcut, expansion in math_shortcuts.items():
+                            if shortcut.startswith(command_parts):
+                                shortcut_matches.append((shortcut, expansion))
+                        
+                        # Check for command matches
+                        command_matches = []
+                        for cmd, info in flat_commands.items():
+                            if cmd.startswith(command_parts):
+                                command_matches.append((cmd, info))
+                        
+                        # Combine shortcuts and commands
+                        matches = shortcut_matches + command_matches[:5]  # Limit to top 5 commands
+                        
+                        if matches:
+                            hint_html = '<div class="hint-box"><p><strong>Suggestions:</strong></p>'
+                            for match, info in matches:
+                                if isinstance(info, dict):
+                                    hint_html += f'<div><span class="shortcut-span">{match}</span> {info["desc"]}</div>'
+                                else:
+                                    hint_html += f'<div><span class="shortcut-span">{match}</span> expands to <code>{info}</code></div>'
+                            hint_html += '<p class="shortcut-tip">Use the sidebar to insert full commands</p></div>'
+                            hint_container.markdown(hint_html, unsafe_allow_html=True)
+                            break
+        
+        # LaTeX editor
+        latex_code = st.text_area(
+            "Edit your LaTeX document:",
+            value=st.session_state.latex_code,
+            height=500,
+            key="latex_editor"
+        )
+        st.session_state.latex_code = latex_code
         
         # Control buttons
         col1_1, col1_2, col1_3 = st.columns(3)
@@ -585,6 +512,12 @@ def main():
             if st.button("Clear Editor", use_container_width=True):
                 st.session_state.latex_code = ""
                 st.rerun()
+        
+        # Display available shortcuts
+        with st.expander("LaTeX Shortcuts"):
+            st.markdown("### Quick Shortcuts")
+            for shortcut, expansion in math_shortcuts.items():
+                st.markdown(f"<span class='shortcut-span'>{shortcut}</span> → <code>{expansion}</code>", unsafe_allow_html=True)
     
     with col2:
         st.subheader("PDF Output")