CodeMirror 6 LaTeX Visual Editor

Side-by-Side Demo

See how the new CodeMirror-based visual editor renders LaTeX with overlay widgets. The left editor shows raw LaTeX source, while the right shows the same content with visual overlays for sections, math, and commands.

CodeMirror (Source)

CodeMirror (Visual Overlays)

Integrated Dual Editor

Toggle between source and visual editing modes. Press Ctrl+E to switch modes. In visual mode, LaTeX elements are replaced with visual widgets. Press Ctrl+Shift+C to toggle command visibility. Click any math equation to edit it with MathLive.

New Architecture Features

Single Editor: Uses CodeMirror with visual overlays instead of dual editors
Perfect Sync: No synchronization needed - visual widgets correspond exactly to source positions
Interactive Math: Click math equations to edit with MathLive's interface
Visual Widgets: Sections, environments, tables, and commands rendered as visual overlays
Command Toggle: Show/hide LaTeX commands in visual mode (Ctrl+Shift+C)
Direct Editing: All changes update the source document directly
Better Performance: No document conversion overhead
Extensible: Easy to add new widget types for custom LaTeX constructs

Installation

npm install codemirror-latex-visual

Updated Usage

import { EditorState, EditorView } from '@codemirror/state';
import { DualLatexEditor, VisualCodeMirrorEditor } from 'codemirror-latex-visual';
import 'codemirror-latex-visual/dist/styles.css';

// Create your CodeMirror editor
const cmEditor = new EditorView({
  state: EditorState.create({
    doc: '\\section{Title}\nSome text with $x^2$ inline math.',
    extensions: [/* your extensions */]
  }),
  parent: document.getElementById('cm-container')
});

// Option 1: Dual editor with mode switching
const dualEditor = new DualLatexEditor(
  document.getElementById('editor-wrapper'),
  cmEditor,
  {
    initialMode: 'source',
    showCommands: false,
    onModeChange: (mode) => console.log('Switched to:', mode)
  }
);

// Option 2: Always-visual editor
const visualEditor = new VisualCodeMirrorEditor(cmEditor, {
  showCommands: false
});
visualEditor.setVisualMode(true);

Updated API Reference

DualLatexEditor

const dualEditor = new DualLatexEditor(container, cmEditor, options);

// Methods
dualEditor.setMode('visual');           // Switch to visual mode
dualEditor.setMode('source');           // Switch to source mode
dualEditor.toggleMode();                // Toggle between modes
dualEditor.toggleCommandVisibility();   // Toggle LaTeX command display
dualEditor.toggleToolbar();             // Toggle toolbar display
dualEditor.destroy();                   // Clean up resources

// Options
{
  initialMode: 'source' | 'visual',      // Default: 'source'
  onModeChange: (mode) => void,          // Mode change callback
  showCommands: boolean,                 // Show LaTeX commands in visual mode
  showToolbar: boolean,                  // Show formatting toolbar
  className: string                      // Additional CSS class
}

VisualCodeMirrorEditor

const visualEditor = new VisualCodeMirrorEditor(cmEditor, options);

// Methods
visualEditor.setVisualMode(true);       // Enable visual overlays
visualEditor.setVisualMode(false);      // Disable visual overlays
visualEditor.toggleMode();              // Toggle visual mode
visualEditor.destroy();                 // Clean up

// Options
{
  showCommands: boolean,                 // Show LaTeX commands
  onModeChange: (mode) => void          // Mode change callback
}