Architecture

Single ContentEditable Entire document in one root. Native selection, copy-paste, and consistent IME handling.

Svelte 5 Runes $state and $derived throughout. Only modified blocks re-render — no virtual DOM, no diffing.

Extension Registry Block types, serializers, actions, and paste interpreters registered declaratively.

Local-first via Loro-CRDT State lives in a Loro document. Offline editing and conflict-free sync out of the box.

Roadmap

Single contenteditable architecture with Loro-CRDT as the source of truth, full selection bridge, and structural editing primitives.

✓ LoroDoc + LoroTree initialization; recursive Svelte 5 rendering from tree roots
✓ Selection bridge: getDOMPoint() (model→DOM) and calculateOffset() (DOM→model) with NabuSelection
✓ beforeinput interception: LoroText mutations + DOM reconciliation without cursor loss
✓ Structural input: Enter (split via LoroTree create) and Backspace (merge via Block.consume)
✓ UndoManager: 100 steps, 1s merge interval, cursor position saved in onPush and restored in onPop
✓ Shared container spine (handleContainerBeforeInput) used by both Nabu and MegaBlock
✓ Event dispatch: dispatchEventToSelection routes to LCA block; BREAK/CONTINUE hook flow signals

Declarative extension API covering block registration, hooks, serializers, actions, paste interpreters, and Loro text style configuration.

✓ Extension class: hooks, serializers, actions, pasteInterpreters, loroTextStyles declared as plain objects
✓ Block class registry (type → Block subclass) and component registry (type → Svelte component)
✓ Type swap: updateChildren() re-instantiates a block when its Loro node type changes
✓ Action bus: nabu.exec(topic, data) wraps a private Pulse instance; extensions declare handlers via actions property
✓ Preset arrays (MinimalPreset, TextPreset, DocumentPreset, FullPreset) and factory functions (createFullEditor, createPersistedEditor, etc.)
✓ MegaBlock base class: updateChildren(), adoptChildren() for tree moves, serializeForClipboard() for recursive copy
✓ ListItem merge (Backspace): Block.consume() calls adoptChildren() to relocate sublists from victim to survivor adoptChildren if(false) guard is gone from the codebase; PROGRESS.md 2.9 still lists this as open — documentation lag, code appears correct.

IndexedDB auto-save via Loro snapshots, serializer extension pattern, and Markdown/JSON export.

Import from Markdown / JSON back into a Loro document
✓ IndexedDB auto-save: doc.subscribe() triggers a debounced (2s) snapshot write after every committed change
✓ createPersistedEditor({ docId }): loads snapshot on init, sets nabu.isNew, exposes saveNow() and clearPersistence()
✓ nabu.serialize('markdown'): TextBehavior.toMarkdown() + deltaToMarkdown() for inline marks
✓ nabu.serialize('json'): Slate-like { version, blocks[] } format via Extension.serializers
✓ Serializer extension pattern: Extension.serializers map; $derived(nabu.serialize(...)) reactive bindings work natively

Full clipboard pipeline: 3-format copy output, priority-sorted paste interpreter chain, and multi-block insertion algorithm.

Edge cases: non-collapsed selection replaced before paste, ListItem wrapOrphan, paste into empty document PROGRESS.md 3.5.9 — not yet implemented; Word HTML (MsoListParagraph) is a known unresolved limitation.
✓ copy/cut/paste events wired on contenteditable root; paste always calls preventDefault()
✓ pasteInterpreter chain on Extension: priority-sorted, format-keyed, returns PasteFragment | null
✓ handleCopy: serializes selection to application/x-nabu+json + text/plain (markdown) + text/html via BlockClass.toMarkdown/toHtml
✓ handleCut: atomic — handleCopy() + deleteSelectionContent() in a single Loro transaction
✓ NabuPasteExtension (priority 100): application/x-nabu+json round-trip preserving marks, block types, and nested lists
✓ HtmlPasteExtension (priority 50): decentralized htmlRules + fromHTML on each BlockClass; inline style marks (Google Docs); transparent container flattening
✓ MarkdownPasteExtension (priority 25, opt-in): markdownRules detect/consume pipeline; leftmost-match recursive inline parser

UX layer required for a usable public beta: toolbar, slash menu, drag handles, placeholders, and link support.

Floating mark toolbar: appears on non-collapsed selection, buttons call nabu.exec('mark:toggle') and read nabu.isMarkActive() Action bus and mark infrastructure are ready; only the Svelte UI component is missing.
Slash command menu (/): triggered on / keypress, lists registered block types, inserts via nabu.insert()
Drag handle overlay per block (independent of contenteditable); block reorder via LoroTree.move
Empty block placeholders (CSS ::before or overlay) with per-block-type hint text
Link mark: href attribute on LoroText, rendered as <a> in RichText.svelte, toggled via toolbar or keyboard
Inline markdown shortcuts while typing: **text** → bold, _text_ → italic, `text` → code

Official built-in block types beyond the writing core. The extension system already allows anyone to ship custom blocks — this milestone adds the curated set that ships with Nabu out of the box. Writing-focused blocks come first; Notion-like structural blocks follow once the architecture has been validated against non-textual content.

Blockquote: simple TextBehavior leaf with distinct styling; Markdown shortcut '> ' and serialization high
Divider (<hr>): first non-textual block — no TextBehavior, no beforeinput handling. Validates that the engine makes no assumption that all blocks have text. Inserted via slash menu or '---' shortcut. high
Code block: multi-line, monospace, Tab inserts spaces (not indent), no markdown shortcuts inside, optional language tag stored as Loro metadata. Serialized as fenced code block in Markdown. high
Callout: styled block with an icon/type indicator (info, warning, tip) stored as Loro metadata + TextBehavior content. Close to DialogueBlock in architecture. medium
Image: non-textual block with src/alt/caption stored as Loro metadata. First block requiring a file upload or URL input flow rather than keyboard input. medium
Toggle / Collapsible: MegaBlock with a focusable header (TextBehavior) and a collapsible body (children). Collapsed state stored as Loro metadata, not in the CRDT tree. medium
Table: 2D structure requiring a new abstraction beyond MegaBlock (rows × cells). Likely needs its own selection model and a dedicated ADR before implementation. low
Embed: iframe wrapper for external URLs (YouTube, Figma, etc.); URL stored as Loro metadata, rendered as sandboxed iframe with aspect-ratio container. low
✓ Paragraph: TextBehavior leaf, the default block type. LoroText container, full inline marks, split on Enter, merge on Backspace, getDOMPoint for cursor placement. high
✓ Heading (H1–H6): TextBehavior leaf with a level stored as Loro metadata. Shares split/merge/mark logic with Paragraph via TextBehavior. Level changeable via block:transform action. high
✓ List + ListItem: MegaBlock container holding ListItem children. Bullet and ordered variants. Arbitrary nesting via LoroTree parent-child. Tab/Shift-Tab indentation. Backspace merge with adoptChildren() to relocate sublists. high
✓ DialogueBlock: TextBehavior leaf styled for screenplay/chat dialogue. Architecturally identical to Paragraph with distinct rendering. Served as the proof-of-concept for custom block types. medium

Production-readiness: import pipeline, Word paste, remote sync foundation, and test coverage.

E2E test suite covering structural editing, rich text marks, undo/redo, and clipboard round-trips Playwright e2e suite (typing, marks, paste, structure, transforms, lists, undo, copy, dialogue, persistence, serialize, edge-cases) and Vitest unit tests added. Pass rate under active validation.
Import from Markdown and JSON: parse into Loro document, inverse of current serialize() pipeline
Word HTML paste parser: handle MsoListParagraph, <o:p> tags, and Word-specific list structures
DialogueBlock optional speaker field: Loro metadata on the node, serialized as 'Speaker — line'
Write ADR 012 formalizing the copy/paste architecture (interpréteurs, fragment, insertion algorithm)
SurrealDB remote sync: Loro CRDT snapshots/updates over WebSocket as a second persistence backend

Loading…