Rich Text Editor

Design a rich text editor (WYSIWYG) with formatting, collaboration, and undo/redo.

R - Requirements

Key Questions:

• What features? (bold, italic, links, images, headings, lists)
• Real-time collaboration needed?
• Mobile support?
• Accessibility requirements?
• Undo/redo depth? (50, 100, unlimited)

Common Answers:

• Basic: Bold, italic, links, headings
• Advanced: Images, tables, code blocks, collaboration

A - Architecture

Editor Flow:

Editor Architecture:

Architecture Decisions:

• ContentEditable vs custom implementation (Slate, ProseMirror) - Custom gives more control
• Operational Transform (OT) or CRDT for collaboration - OT for Google Docs, CRDT for simpler cases
• Plugin architecture for extensibility - Allows features without modifying core

Relevant Content:

• Collaborative Editing - Real-time collaboration
• Plugin Architecture - Extensible system

D - Data Model

Document Model:

• Tree structure (nodes with children)
• Inline vs block elements
• Formatting as marks/attributes

State Management:

• Undo/redo stack (command pattern)
• Collaboration state (OT/CRDT operations)
• Cursor/selection position

Relevant Content:

• Undo/Redo Implementation - History management
• State Machines - Editor state

I - Interface

Features:

• Toolbar (formatting buttons)
• Formatting controls (bold, italic, etc.)
• Keyboard shortcuts (Cmd+B, Cmd+I)
• Cursor indicators (for collaboration)
• Selection highlighting

Accessibility:

• Keyboard navigation (all features)
• Screen reader support
• ARIA roles and labels
• Focus management

Relevant Content:

• Keyboard Shortcuts - Custom shortcuts
• Focus Management - SPA focus

O - Optimizations

Performance:

• Debounce auto-save (don't save on every keystroke)
• Lazy load plugins (load formatting tools on demand)
• Virtualize large documents (for very long content)
• Optimize rendering (only update changed nodes)

Real-Time:

• Throttle collaboration updates (don't send every keystroke)
• Conflict resolution (OT/CRDT handles conflicts)
• Connection resilience (handle disconnects)

Relevant Content:

• Code Splitting - Lazy load plugins
• WebSocket Management - Real-time connection
• Connection Resilience - Handle disconnects

Implementation Checklist

• Document model (tree structure)
• Formatting system (marks/attributes)
• Undo/redo stack
• Keyboard shortcuts
• Toolbar UI
• Auto-save (debounced)
• Real-time collaboration (if needed)
• Conflict resolution (OT/CRDT)
• Accessibility (keyboard, screen readers)
• Mobile support (touch events)

Common Pitfalls

❌ Saving on every keystroke → Too many requests
✅ Debounce auto-save (500ms-1s)

❌ No undo/redo → Users lose work
✅ Command pattern with history stack

❌ Poor collaboration → Conflicts, lost changes
✅ Use OT or CRDT for conflict resolution

❌ No keyboard shortcuts → Poor UX, accessibility
✅ Standard shortcuts (Cmd+B, Cmd+I, etc.)