$ show TypeCellOS/BlockNote
BlockNote is a block-based rich text editor framework for React, built on ProseMirror and TipTap. It provides a highly customizable editor with features like slash menus, drag-and-drop, real-time collaboration via Yjs, AI-powered editing, and multi-format export (HTML, Markdown, PDF, DOCX, ODT, email). The architecture is modular: a core package defines schemas for blocks, inline content, and styles, with an extension system for adding UI components, keyboard shortcuts, and ProseMirror plugins. Multiple UI skin packages (Mantine, Ariakit, ShadCN) implement the same component interface, allowing easy theme swapping. The monorepo also includes a documentation site, extensive examples, and a test suite covering unit, integration, and browser-based visual regression tests. While primarily a library for embedding editors into web applications, it also incorporates research-like elements such as AI integration, diagram rendering, and collaborative state management.
The LLM identified 5 files worth highlighting for reuse:
Implements a visual drop cursor for drag-and-drop block insertion. Uses the BlockNote extension lifecycle (createExtension with mount, signal, dom) and exposes configurable options (width, color, exclude) plus a computeDropPosition hook for custom cursor behavior. Demonstrates clean separation of concerns and reusable extension pattern.
Generic exporter framework with typed mappings for blocks, inline content, and styles. Each export format (HTML, Markdown, PDF, etc.) defines its own mapping, enabling consistent conversion from the internal document model. The mappingFactory pattern allows composition and reuse across exporters.
A generic suggestion menu controller that handles keyboard navigation, filtering, and item selection. Supports both list and grid layouts, custom trigger characters, and dynamic item loading. Used for slash menus, emoji pickers, and mentions. The controller is decoupled from UI rendering, allowing skin-specific implementations.
Provides document versioning and suggestion (track changes) support using Yjs CRDT. Includes snapshot creation, diff computation, and merge operations. The extension integrates with the editor's collaboration layer and can be backed by different storage backends (localStorage, YHub). Demonstrates complex state management and CRDT-based collaboration patterns.
Builds AI request pipelines for LLM-powered editing. Supports streaming tool calls, multiple output formats (HTML, JSON, Markdown blocks), and custom transport layers. The StreamTool pattern abstracts tool definition, validation, and execution, making it reusable for different AI providers and use cases.