Design a Rich Text Editor (WYSIWYG, schema-driven) — Frontend System Design Interview Guide

Design a production-grade rich text editor (think Notion blocks, Medium, Linear, Confluence). It must support inline marks (bold/italic/link), block nodes (paragraph, heading, lists, code, image, embed), reliable selection across complex DOM, keyboard-first editing, paste/IME handling, undo/redo, plugin extensibility, and predictable performance on long documents.

Difficulty Note: Hard. The hard part is not the toolbar — it's the document model, selection mapping (DOM ↔ model), input/IME normalization, history under reordering, and a plugin system that doesn't fight the editor.

Key Challenges:

• Document model: tree-of-nodes with marks vs flat ranges
• Selection mapping between DOM offsets and model positions
• Input normalization (beforeinput, IME composition, paste sanitization)
• Undo/redo with grouping (transactions) and selection restoration
• Plugin/extension architecture without forking the editor
• Performance on 50k+ node documents (virtualization, decoration caching)
• Accessibility (semantics, ARIA, focus, screen reader narration)

Real-World Complexity:

Production editors live or die on edge cases — IME, contenteditable quirks across browsers, paste from Word/Google Docs, image uploads with placeholders, autocomplete/slash menus, and a history stack that survives schema migrations.