Update app.py

app.py

@@ -10,6 +10,7 @@ from PIL import Image
 import fitz  # PyMuPDF
 import time
 import re
+from streamlit_monaco import st_monaco
 
 # Set page configuration
 st.set_page_config(
@@ -191,6 +192,24 @@ def find_environments(latex_code):
     
     return environments
 
+# Define LaTeX code snippets for toolbar actions
+latex_snippets = {
+    "bold": "\\textbf{$0}",
+    "italic": "\\textit{$0}",
+    "math_inline": "$\n$0\n$",
+    "section": "\\section{$0}",
+    "subsection": "\\subsection{$0}",
+    "itemize": "\\begin{itemize}\n\t\\item $0\n\\end{itemize}",
+    "enumerate": "\\begin{enumerate}\n\t\\item $0\n\\end{enumerate}",
+    "equation": "\\begin{equation}\n\t$0\n\\end{equation}",
+    "align": "\\begin{align}\n\t$0\n\\end{align}",
+    "figure": "\\begin{figure}[h]\n\t\\centering\n\t\\includegraphics[width=0.8\\textwidth]{$0}\n\t\\caption{Caption}\n\t\\label{fig:label}\n\\end{figure}",
+    "table": "\\begin{table}[h]\n\t\\centering\n\t\\begin{tabular}{ccc}\n\t\t$0 & B & C \\\\\n\t\t1 & 2 & 3 \\\\\n\t\\end{tabular}\n\t\\caption{Caption}\n\t\\label{tab:label}\n\\end{table}",
+    "fraction": "\\frac{$0}{denominator}",
+    "sqrt": "\\sqrt{$0}",
+    "package": "\\usepackage{$0}"
+}
+
 # Default LaTeX template
 default_template = r"""\documentclass{article}
 \usepackage[utf8]{inputenc}
@@ -286,7 +305,7 @@ Your conclusion here.
 \end{document}
 """
 
-# Enhanced VSCode-like styling with inline syntax highlighting
+# Enhanced VSCode-like styling
 st.markdown("""
 <style>
     /* Base theming - VS Code inspired */
@@ -309,48 +328,6 @@ st.markdown("""
         background-color: #1177bb;
     }
     
-    /* Custom editor with built-in syntax highlighting */
-    #latex-editor-container {
-        position: relative;
-        width: 100%;
-        height: 600px;
-        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-        font-size: 14px;
-        line-height: 1.5;
-        background-color: #1e1e1e;
-        color: #d4d4d4;
-        border-radius: 4px;
-        border: 1px solid #252526;
-        padding: 10px;
-    }
-    
-    /* Default coloring for textarea */
-    .stTextArea textarea {
-        font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
-        font-size: 14px !important;
-        line-height: 1.5 !important;
-        background-color: #1e1e1e !important;
-        color: #d4d4d4 !important;
-        padding: 10px !important;
-        border-radius: 4px !important;
-        border: 1px solid #252526 !important;
-    }
-    
-    /* Highlight LaTeX specific elements */
-    .stTextArea textarea::selection {
-        background-color: #264f78;
-    }
-    
-    /* VS Code-like editor container */
-    .editor-container {
-        background-color: #1e1e1e;
-        border-radius: 4px;
-        border: 1px solid #2d2d2d;
-        margin-bottom: 1rem;
-        display: flex;
-        flex-direction: column;
-    }
-    
     /* Editor tab bar */
     .tab-bar {
         display: flex;
@@ -693,171 +670,15 @@ st.markdown("""
         margin-right: 10px;
     }
     
-    /* Inline syntax highlighting for LaTeX - applied via JavaScript */
-    #syntax-styles {
-        display: none;
+    /* Monaco editor container */
+    .monaco-editor-container {
+        border: 1px solid #2d2d2d;
+        border-radius: 4px;
+        overflow: hidden;
     }
 </style>
-
-<div id="syntax-styles">
-    <style>
-        .latex-command { color: #569cd6; }
-        .latex-environment { color: #4ec9b0; }
-        .latex-bracket { color: #d4d4d4; }
-        .latex-math { color: #c586c0; }
-        .latex-comment { color: #6a9955; }
-        .latex-package { color: #dcdcaa; }
-    </style>
-</div>
-
-<script>
-// Add inline syntax highlighting support for the editor
-document.addEventListener('DOMContentLoaded', function() {
-    // Function to apply syntax highlighting to the textarea
-    function applySyntaxHighlighting() {
-        const textarea = document.querySelector('textarea');
-        if (!textarea) return;
-        
-        // Find text matches and colorize them
-        const text = textarea.value;
-        
-        // Color LaTeX commands
-        textarea.style.color = '#d4d4d4'; // Default text color
-        
-        // Apply specific colors for different LaTeX constructs
-        // We can't do this directly in the textarea, but we indicate the presence of these elements
-        if (text.match(/\\usepackage/g)) {
-            const packageButtons = document.querySelectorAll('.toolbar-button[title="Add Package"]');
-            packageButtons.forEach(button => button.style.color = '#dcdcaa');
-        }
-        
-        if (text.match(/\\begin\{align\}/g)) {
-            const alignButtons = document.querySelectorAll('.toolbar-button[title="Align"]');
-            alignButtons.forEach(button => button.style.color = '#4ec9b0');
-        }
-        
-        if (text.match(/\\\w+/g)) {
-            // Commands are present
-        }
-        
-        if (text.match(/\$/g)) {
-            const mathButtons = document.querySelectorAll('.toolbar-button[title="Inline Math"]');
-            mathButtons.forEach(button => button.style.color = '#c586c0');
-        }
-    }
-    
-    // Set up an interval to periodically check and update highlighting
-    setInterval(applySyntaxHighlighting, 1000);
-});
-</script>
 """, unsafe_allow_html=True)
 
-# Function to create a functional VS Code-like toolbar
-def render_functional_toolbar():
-    toolbar_html = """
-    <div class="toolbar">
-        <button class="toolbar-button" title="Bold" onclick="insertAtCursor('\\\\textbf{', '}')">
-            <strong>B</strong>
-        </button>
-        <button class="toolbar-button" title="Italic" onclick="insertAtCursor('\\\\textit{', '}')">
-            <em>I</em>
-        </button>
-        <button class="toolbar-button" title="Inline Math" onclick="insertAtCursor('$', '$')">
-            ∑
-        </button>
-        <div class="toolbar-separator"></div>
-        <button class="toolbar-button" title="Section" onclick="insertAtCursor('\\\\section{', '}')">
-            §
-        </button>
-        <button class="toolbar-button" title="Subsection" onclick="insertAtCursor('\\\\subsection{', '}')">
-            §§
-        </button>
-        <div class="toolbar-separator"></div>
-        <button class="toolbar-button" title="Itemize" onclick="insertAtCursor('\\\\begin{itemize}\\n  \\\\item ', '\\n\\\\end{itemize}')">
-            •
-        </button>
-        <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" onclick="insertAtCursor('\\\\begin{equation}\\n  ', '\\n\\\\end{equation}')">
-            =
-        </button>
-        <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" 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"""
@@ -880,6 +701,26 @@ def render_status_bar():
     """
     st.markdown(status_html, unsafe_allow_html=True)
 
+# VS Code-style toolbar buttons
+def render_toolbar_buttons():
+    col1, col2, col3, col4, col5 = st.columns([1, 1, 1, 1, 5])
+    
+    with col1:
+        st.button("Bold", key="btn_bold", help="Insert bold text")
+        st.button("Italic", key="btn_italic", help="Insert italic text")
+        
+    with col2:
+        st.button("Section", key="btn_section", help="Insert section heading")
+        st.button("Subsection", key="btn_subsection", help="Insert subsection heading")
+        
+    with col3:
+        st.button("Itemize", key="btn_itemize", help="Insert bulleted list")
+        st.button("Enumerate", key="btn_enumerate", help="Insert numbered list")
+        
+    with col4:
+        st.button("Equation", key="btn_equation", help="Insert equation environment")
+        st.button("Table", key="btn_table", help="Insert table environment")
+
 # Render a document outline based on section hierarchy
 def render_document_outline(structure):
     if not structure:
@@ -1052,7 +893,7 @@ def render_environments_panel(environments):
     
     st.markdown('</div>', unsafe_allow_html=True)
 
-# Display a simple F5 keyboard shortcut reminder
+# Display a simple F5 shortcut reminder
 def render_f5_shortcut():
     st.markdown(
         '<div class="shortcut-item">'
@@ -1062,6 +903,120 @@ def render_f5_shortcut():
         unsafe_allow_html=True
     )
 
+# Define LaTeX language for Monaco editor
+def get_latex_language_definition():
+    return {
+        "defaultToken": "",
+        "tokenPostfix": ".tex",
+        "ignoreCase": True,
+        
+        "brackets": [
+            { "token": "delimiter.curly", "open": "{", "close": "}" },
+            { "token": "delimiter.square", "open": "[", "close": "]" },
+            { "token": "delimiter.parenthesis", "open": "(", "close": ")" }
+        ],
+        
+        "keywords": [
+            "documentclass", "usepackage", "begin", "end", "section", "subsection", 
+            "subsubsection", "chapter", "paragraph", "subparagraph", "part", "appendix",
+            "maketitle", "tableofcontents", "figure", "table", "equation", "align", 
+            "itemize", "enumerate", "description", "center", "verbatim", "minipage",
+            "textbf", "textit", "texttt", "textrm", "textsc", "textsf", "emph", "cite",
+            "ref", "label", "caption", "includegraphics", "input", "include", "hline",
+            "vspace", "hspace", "newpage", "clearpage", "pagebreak", "newcommand",
+            "renewcommand", "providecommand", "newenvironment", "renewenvironment",
+            "provideenvironment", "newtheorem", "footnote", "item", "multicolumn"
+        ],
+        
+        "operators": [
+            "&", "_", "^", "~", "'", "\"", "`"
+        ],
+        
+        "tokenizer": {
+            "root": [
+                [/\\([a-zA-Z]+)/, { 
+                  cases: { 
+                    "@keywords": { token: "keyword.$1" },
+                    "@default": "keyword" 
+                  }
+                }],
+                [/\{/, "delimiter.curly"],
+                [/\}/, "delimiter.curly"],
+                [/\[/, "delimiter.square"],
+                [/\]/, "delimiter.square"],
+                [/\(/, "delimiter.parenthesis"],
+                [/\)/, "delimiter.parenthesis"],
+                [/\$\$/, { token: "delimiter.dollar", next: "@math_block" }],
+                [/\$/, { token: "delimiter.dollar", next: "@math_inline" }],
+                [/%.*$/, "comment"],
+                [/[^\\{}\[\]$%&_\^~'"` ]+/, ""]
+            ],
+            
+            "math_block": [
+                [/\$\$/, { token: "delimiter.dollar", next: "@pop" }],
+                [/[^\\$]+/, "predefined.mathematical"],
+                [/\\[a-zA-Z]+/, "predefined.mathematical"],
+                [/[\\$]/, "predefined.mathematical"]
+            ],
+            
+            "math_inline": [
+                [/\$/, { token: "delimiter.dollar", next: "@pop" }],
+                [/[^\\$]+/, "predefined.mathematical"],
+                [/\\[a-zA-Z]+/, "predefined.mathematical"],
+                [/[\\$]/, "predefined.mathematical"]
+            ]
+        }
+    }
+
+# Define LaTeX autocompletion suggestions for Monaco editor
+def get_latex_completions():
+    return [
+        # Document structure
+        {"label": "\\documentclass", "kind": 14, "insertText": "\\documentclass{${1:article}}", "documentation": "Defines the document class"},
+        {"label": "\\usepackage", "kind": 14, "insertText": "\\usepackage{${1:package}}", "documentation": "Imports a package"},
+        {"label": "\\begin", "kind": 14, "insertText": "\\begin{${1:environment}}\n\t$0\n\\end{$1}", "documentation": "Creates an environment"},
+        {"label": "\\end", "kind": 14, "insertText": "\\end{${1:environment}}", "documentation": "Ends an environment"},
+        
+        # Sections
+        {"label": "\\section", "kind": 14, "insertText": "\\section{${1:title}}", "documentation": "Creates a section"},
+        {"label": "\\subsection", "kind": 14, "insertText": "\\subsection{${1:title}}", "documentation": "Creates a subsection"},
+        {"label": "\\subsubsection", "kind": 14, "insertText": "\\subsubsection{${1:title}}", "documentation": "Creates a subsubsection"},
+        
+        # Formatting
+        {"label": "\\textbf", "kind": 14, "insertText": "\\textbf{${1:text}}", "documentation": "Makes text bold"},
+        {"label": "\\textit", "kind": 14, "insertText": "\\textit{${1:text}}", "documentation": "Makes text italic"},
+        {"label": "\\underline", "kind": 14, "insertText": "\\underline{${1:text}}", "documentation": "Underlines text"},
+        {"label": "\\emph", "kind": 14, "insertText": "\\emph{${1:text}}", "documentation": "Emphasizes text"},
+        
+        # Math
+        {"label": "\\begin{equation}", "kind": 14, "insertText": "\\begin{equation}\n\t${1}\n\\end{equation}", "documentation": "Creates an equation environment"},
+        {"label": "\\begin{align}", "kind": 14, "insertText": "\\begin{align}\n\t${1}\n\\end{align}", "documentation": "Creates an align environment"},
+        {"label": "\\frac", "kind": 14, "insertText": "\\frac{${1:numerator}}{${2:denominator}}", "documentation": "Creates a fraction"},
+        {"label": "\\sqrt", "kind": 14, "insertText": "\\sqrt{${1:expression}}", "documentation": "Creates a square root"},
+        {"label": "\\sum", "kind": 14, "insertText": "\\sum_{${1:lower}}^{${2:upper}}", "documentation": "Creates a summation"},
+        {"label": "\\int", "kind": 14, "insertText": "\\int_{${1:lower}}^{${2:upper}}", "documentation": "Creates an integral"},
+        
+        # Lists
+        {"label": "\\begin{itemize}", "kind": 14, "insertText": "\\begin{itemize}\n\t\\item ${1}\n\\end{itemize}", "documentation": "Creates a bulleted list"},
+        {"label": "\\begin{enumerate}", "kind": 14, "insertText": "\\begin{enumerate}\n\t\\item ${1}\n\\end{enumerate}", "documentation": "Creates a numbered list"},
+        {"label": "\\item", "kind": 14, "insertText": "\\item ${1}", "documentation": "Creates a list item"},
+        
+        # Tables
+        {"label": "\\begin{table}", "kind": 14, "insertText": "\\begin{table}[${1:h}]\n\t\\centering\n\t\\begin{tabular}{${2:ccc}}\n\t\t${3}\n\t\\end{tabular}\n\t\\caption{${4:caption}}\n\t\\label{tab:${5:label}}\n\\end{table}", "documentation": "Creates a table environment"},
+        
+        # Figures
+        {"label": "\\begin{figure}", "kind": 14, "insertText": "\\begin{figure}[${1:h}]\n\t\\centering\n\t\\includegraphics[width=${2:0.8}\\textwidth]{${3:filename}}\n\t\\caption{${4:caption}}\n\t\\label{fig:${5:label}}\n\\end{figure}", "documentation": "Creates a figure environment"},
+        
+        # Common environments
+        {"label": "\\begin{center}", "kind": 14, "insertText": "\\begin{center}\n\t${1}\n\\end{center}", "documentation": "Creates centered text"},
+        {"label": "\\begin{verbatim}", "kind": 14, "insertText": "\\begin{verbatim}\n${1}\n\\end{verbatim}", "documentation": "Creates verbatim text"},
+        
+        # References
+        {"label": "\\label", "kind": 14, "insertText": "\\label{${1:label}}", "documentation": "Creates a label for cross-referencing"},
+        {"label": "\\ref", "kind": 14, "insertText": "\\ref{${1:label}}", "documentation": "References a label"},
+        {"label": "\\cite", "kind": 14, "insertText": "\\cite{${1:key}}", "documentation": "Cites a reference"}
+    ]
+
 # Main application
 def main():
     # Initialize session state
@@ -1094,20 +1049,74 @@ def main():
             # Tab bar
             render_editor_tabs()
             
-            # Toolbar with functional buttons
-            render_functional_toolbar()
+            # Toolbar buttons
+            render_toolbar_buttons()
+            
+            # Check for toolbar button clicks
+            button_clicked = False
+            snippet_to_insert = ""
             
-            # Editor with VS Code styling and syntax highlighting
-            st.markdown('<div id="syntax-highlighting-editor">', unsafe_allow_html=True)
-            latex_code = st.text_area(
-                "",
+            if st.session_state.get("btn_bold", False):
+                snippet_to_insert = latex_snippets["bold"]
+                button_clicked = True
+            elif st.session_state.get("btn_italic", False):
+                snippet_to_insert = latex_snippets["italic"]
+                button_clicked = True
+            elif st.session_state.get("btn_section", False):
+                snippet_to_insert = latex_snippets["section"]
+                button_clicked = True
+            elif st.session_state.get("btn_subsection", False):
+                snippet_to_insert = latex_snippets["subsection"]
+                button_clicked = True
+            elif st.session_state.get("btn_itemize", False):
+                snippet_to_insert = latex_snippets["itemize"]
+                button_clicked = True
+            elif st.session_state.get("btn_enumerate", False):
+                snippet_to_insert = latex_snippets["enumerate"]
+                button_clicked = True
+            elif st.session_state.get("btn_equation", False):
+                snippet_to_insert = latex_snippets["equation"]
+                button_clicked = True
+            elif st.session_state.get("btn_table", False):
+                snippet_to_insert = latex_snippets["table"]
+                button_clicked = True
+            
+            # Monaco Editor with LaTeX configuration
+            st.markdown('<div class="monaco-editor-container">', unsafe_allow_html=True)
+            
+            # Define LaTeX language configuration for Monaco
+            latex_language = get_latex_language_definition()
+            latex_completions = get_latex_completions()
+            
+            # Create Monaco editor component
+            latex_code = st_monaco(
                 value=st.session_state.latex_code,
                 height=500,
-                key="latex_editor",
-                label_visibility="collapsed"
+                language="latex",
+                theme="vs-dark",
+                options={
+                    "scrollBeyondLastLine": False,
+                    "minimap": {"enabled": True},
+                    "lineNumbers": "on",
+                    "tabSize": 2,
+                    "insertSpaces": True,
+                    "fontSize": 14,
+                    "wordWrap": "on",
+                    "automaticLayout": True,
+                    "suggestOnTriggerCharacters": True,
+                    "quickSuggestions": True,
+                    "snippetSuggestions": "inline",
+                    "folding": True,
+                    "bracketPairColorization.enabled": True,
+                    "renderWhitespace": "boundary"
+                },
+                key="monaco_editor"
             )
+            
             st.markdown('</div>', unsafe_allow_html=True)
-            st.session_state.latex_code = latex_code
+            
+            if latex_code is not None:
+                st.session_state.latex_code = latex_code
             
             # Status bar
             render_status_bar()