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

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

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
Import from Markdown / JSON back into a Loro document

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

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
Edge cases: non-collapsed selection replaced before paste, ListItem wrapOrphan, paste into empty document

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()
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

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

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
E2E test suite covering structural editing, rich text marks, undo/redo, and clipboard round-trips

Loading…