Recipe
Rich Text Editor
A block-based editor with slash commands, floating toolbar, and real-time collaboration primitives — built for content-heavy workflows.
/
Slash Commands
Type / to insert headings, code blocks, images, dividers, and custom blocks. Fully extensible command palette with fuzzy search.
⟡
Floating Toolbar
Selection-aware bubble menu for bold, italic, link, and inline code. Appears on text selection, disappears on blur — zero chrome when writing.
◈
Block Dragging
Drag handles on hover. Reorder paragraphs, images, and embeds with smooth animations. Nested list support with indentation controls.
⚡
Real-time Sync
CRDT-backed conflict resolution. Multiple cursors, presence avatars, and per-user selections. Offline edits merge on reconnect.
Architecture
01ProseMirror core — schema-driven document model with transactions and plugin system.
02TipTap extensions — prebuilt nodes for tables, task lists, mentions, and code highlighting.
03Yjs provider — WebSocket sync with awareness protocol for cursors and selections.
04Tailwind Typography — rendered output uses
prose classes for clean reading view.