Text-LaTeX Editor

A modern rich text editor built with Next.js, Lexical, and KaTeX that supports LaTeX equation rendering and export.

Features

Rich Text Editing

• Block Formatting: Paragraphs, headings (H1-H6), quotes, code blocks
• Text Styling: Bold, italic, underline, strikethrough, subscript, superscript
• Lists: Bulleted, numbered, and checklists with nesting support
• Tables: Full table support with row/column management
• Links: Inline links with floating editor
• Images: Upload from file (stored as base64) or URL
• Horizontal Rules: Visual content separators

Mathematical Equations (LaTeX/KaTeX)

• Inline Equations: Embed formulas within text like $E = mc^2$
• Block Equations: Centered display equations for complex formulas
• Live Preview: See rendered output while editing
• Confirmation System: Confirm or cancel changes before saving

Export Options

• LaTeX Export: Full document with preamble, colors, fonts, tables, images
• JSON Export: Lexical editor state for backup/restore
• Configurable: Document class, font size, title, author, table of contents

Auto-Save

• LocalStorage Persistence: Content saved automatically with 1-second debounce
• Restore on Load: Previous session restored when reopening

Tech Stack

• Framework: Next.js 16 with Turbopack
• Editor: Lexical (Meta's extensible text editor)
• Math Rendering: KaTeX
• UI Components: shadcn/ui with Radix primitives
• Styling: Tailwind CSS v4

Getting Started

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000/editor-md to access the editor.

Project Structure

components/
├── blocks/editor-md/     # Main editor configuration
│   ├── editor.tsx        # LexicalComposer setup
│   ├── nodes.ts          # Registered node types
│   └── plugins.tsx       # Plugin composition
├── editor/
│   ├── nodes/            # Custom Lexical nodes
│   │   ├── equation-node.tsx
│   │   └── image-node.tsx
│   ├── plugins/          # Editor functionality
│   │   ├── equations-plugin.tsx
│   │   ├── images-plugin.tsx
│   │   ├── local-storage-plugin.tsx
│   │   └── toolbar/      # Toolbar plugins
│   ├── editor-ui/        # React components
│   │   ├── equation-component.tsx
│   │   └── image-component.tsx
│   └── utils/
│       └── latex-exporter.ts
└── ui/                   # shadcn/ui components

Usage

Insert Equation

1. Click the function icon (fx) in the toolbar
2. Choose "Inline Equation" or "Block Equation"
3. Edit the LaTeX code
4. Click ✓ to confirm or ✕ to cancel

Export to LaTeX

1. Click the export icon in the bottom toolbar
2. Select "LaTeX" tab
3. Configure document options
4. Click "Export LaTeX"

Keyboard Shortcuts

Action	Shortcut
Confirm inline equation	Enter
Confirm block equation	Ctrl+Enter
Cancel equation edit	Escape
Bold	Ctrl+B
Italic	Ctrl+I
Underline	Ctrl+U

License

MIT