Add MathLive formula editor

package.json

@@ -28,6 +28,7 @@
     "firebase": "^11.1.0",
     "jszip": "^3.10.1",
     "lib0": "^0.2.117",
+    "mathlive": "^0.109.1",
     "nspell": "^2.1.5",
     "pdfjs-dist": "^4.9.155",
     "react": "^18.3.1",

src/components/MathLiveDialog.jsx

@@ -0,0 +1,79 @@
+import { useRef, useState, useEffect } from 'react';
+import 'mathlive';
+
+export default function MathLiveDialog({ onInsert, onClose }) {
+  const mathFieldRef = useRef(null);
+  const [mode, setMode] = useState('display');
+
+  useEffect(() => {
+    // Focus the math field when dialog opens
+    const mf = mathFieldRef.current;
+    if (mf) {
+      requestAnimationFrame(() => mf.focus());
+    }
+  }, []);
+
+  function handleInsert() {
+    const mf = mathFieldRef.current;
+    if (!mf) return;
+    const latex = mf.value;
+    if (!latex.trim()) return;
+
+    const wrapped = mode === 'display'
+      ? `\\[\n${latex}\n\\]`
+      : `$${latex}$`;
+    onInsert(wrapped);
+    onClose();
+  }
+
+  function handleKeyDown(e) {
+    if (e.key === 'Escape') onClose();
+    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) handleInsert();
+  }
+
+  return (
+    <div className="share-dialog-overlay" onClick={onClose} onKeyDown={handleKeyDown}>
+      <div className="mathlive-dialog" onClick={(e) => e.stopPropagation()}>
+        <button className="share-dialog-close" onClick={onClose}>&times;</button>
+        <h3>Formula Editor</h3>
+        <p className="mathlive-hint">
+          Type LaTeX or use the virtual keyboard to build your equation.
+          Press Ctrl+Enter to insert.
+        </p>
+        <math-field
+          ref={mathFieldRef}
+          class="mathlive-field"
+          virtual-keyboard-mode="manual"
+        />
+        <div className="mathlive-controls">
+          <div className="mathlive-mode-toggle">
+            <label>
+              <input
+                type="radio"
+                name="mathmode"
+                value="display"
+                checked={mode === 'display'}
+                onChange={() => setMode('display')}
+              />
+              Display math <code>\[...\]</code>
+            </label>
+            <label>
+              <input
+                type="radio"
+                name="mathmode"
+                value="inline"
+                checked={mode === 'inline'}
+                onChange={() => setMode('inline')}
+              />
+              Inline math <code>$...$</code>
+            </label>
+          </div>
+          <div className="mathlive-actions">
+            <button className="btn mathlive-btn-cancel" onClick={onClose}>Cancel</button>
+            <button className="btn mathlive-btn-insert" onClick={handleInsert}>Insert</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Toolbar.jsx

@@ -30,7 +30,7 @@ const NUMBERED_SNIPPET = `\\begin{enumerate}
   \\item
 \\end{enumerate}`;
 
-export default function Toolbar({ onInsert, onUndo, onRedo }) {
+export default function Toolbar({ onInsert, onUndo, onRedo, onFormulaEditor }) {
   const [figureOpen, setFigureOpen] = useState(false);
   const [tableOpen, setTableOpen] = useState(false);
 
@@ -67,6 +67,11 @@ export default function Toolbar({ onInsert, onUndo, onRedo }) {
       <button className="toolbar-btn" title="Inline math ($...$)" onClick={() => onInsert('$  $')}>
         $
       </button>
+      {onFormulaEditor && (
+        <button className="toolbar-btn toolbar-btn-formula" title="Visual formula editor" onClick={onFormulaEditor}>
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><text x="1" y="13" fontSize="14" fontFamily="serif" fontStyle="italic">f</text><text x="7" y="8" fontSize="8" fontFamily="serif">(x)</text></svg>
+        </button>
+      )}
       <span className="toolbar-sep" />
 
       {/* Figure dropdown */}

src/index.css

@@ -1798,6 +1798,97 @@ body {
   }
 }
 
+/* ===== MathLive Formula Dialog ===== */
+.mathlive-dialog {
+  background: #2a2a3d;
+  border-radius: 10px;
+  width: 600px;
+  max-width: 95vw;
+  padding: 24px;
+  position: relative;
+  color: #e0e0e0;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
+}
+.mathlive-dialog h3 {
+  margin: 0 0 4px;
+  font-size: 18px;
+  color: #fff;
+}
+.mathlive-hint {
+  font-size: 13px;
+  color: #888;
+  margin-bottom: 16px;
+}
+.mathlive-field {
+  display: block;
+  width: 100%;
+  min-height: 60px;
+  font-size: 22px;
+  background: #1e1e2e;
+  color: #fff;
+  border: 1px solid #3a3a50;
+  border-radius: 6px;
+  padding: 12px;
+  --selection-background-color: rgba(76, 175, 80, 0.3);
+}
+.mathlive-field:focus-within {
+  border-color: #4caf50;
+}
+.mathlive-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 16px;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.mathlive-mode-toggle {
+  display: flex;
+  gap: 16px;
+  font-size: 13px;
+  color: #bbb;
+}
+.mathlive-mode-toggle label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+}
+.mathlive-mode-toggle code {
+  font-size: 11px;
+  color: #888;
+}
+.mathlive-actions {
+  display: flex;
+  gap: 8px;
+}
+.mathlive-btn-cancel {
+  background: transparent;
+  color: #999;
+  border: 1px solid #555;
+  padding: 8px 20px;
+  border-radius: 4px;
+  font-size: 13px;
+  cursor: pointer;
+}
+.mathlive-btn-cancel:hover {
+  border-color: #888;
+  color: #ccc;
+}
+.mathlive-btn-insert {
+  background: #4caf50;
+  color: #fff;
+  border: none;
+  padding: 8px 20px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.mathlive-btn-insert:hover {
+  background: #43a047;
+}
+
 /* ===== Collaborator Avatars ===== */
 .collaborator-avatars {
   display: flex;

src/pages/ProjectEditor.jsx

@@ -21,6 +21,7 @@ import CompileLog from '../components/CompileLog.jsx';
 import FileTree from '../components/FileTree.jsx';
 import DocumentOutline from '../components/DocumentOutline.jsx';
 import ShareDialog from '../components/ShareDialog.jsx';
+import MathLiveDialog from '../components/MathLiveDialog.jsx';
 import CollaboratorAvatars from '../components/CollaboratorAvatars.jsx';
 import FilePreview from '../components/FilePreview.jsx';
 
@@ -40,6 +41,7 @@ export default function ProjectEditor() {
   const [titleValue, setTitleValue] = useState('');
   const [filesMenuOpen, setFilesMenuOpen] = useState(false);
   const [shareDialogOpen, setShareDialogOpen] = useState(false);
+  const [mathDialogOpen, setMathDialogOpen] = useState(false);
   const [comments, setComments] = useState([]);
 
   // Resizable pane state
@@ -755,6 +757,7 @@ export default function ProjectEditor() {
             onInsert={handleInsertSnippet}
             onUndo={() => editorUndoRedoRef.current?.undo()}
             onRedo={() => editorUndoRedoRef.current?.redo()}
+            onFormulaEditor={canEdit ? () => setMathDialogOpen(true) : undefined}
           />
           <CompileLog
             log={compileLog}
@@ -807,6 +810,14 @@ export default function ProjectEditor() {
           onClose={() => setShareDialogOpen(false)}
         />
       )}
+
+      {/* MathLive Formula Editor */}
+      {mathDialogOpen && (
+        <MathLiveDialog
+          onInsert={handleInsertSnippet}
+          onClose={() => setMathDialogOpen(false)}
+        />
+      )}
     </div>
   );
 }