@shadow-garden/bapbong-editor

The framework-agnostic core of bapbong — the package a host app installs to get a canvas-rendered DOCX editor. It owns the whole render → edit loop (import → model → layout → paint → input/selection → export) and the per-page <canvas> stack behind one vanilla BapbongEditor class, with no UI chrome of its own. A host (the Angular apps/playground, a future React adapter, etc.) wires comment UI / toolbars around it.

• Scope: scope:app (may depend on every other package)
• Depends on: the bapbong packages (docx, layout-engine, measuring, painter-canvas, selection, input-bridge, contracts)

Usage

import { BapbongEditor } from '@shadow-garden/bapbong-editor';

// `stack` is the element the editor fills with one <canvas> per page; the
// optional `viewport` is the scroll container (defaults to .canvas-wrap).
const editor = new BapbongEditor(stackEl, { viewport: wrapEl });

editor.onChange(({ state, pageCount, docChanged }) => {
  // Mirror doc-derived UI: page count, comment threads (state.doc.attrs.comments),
  // selection. `docChanged` is false on selection-only cycles.
});
editor.onCaretPick((pos) => {
  // A pointerdown placed the caret at doc position `pos` (e.g. select the
  // comment whose range was clicked).
});

await editor.loadDocx(bytes);          // ArrayBuffer → render first frame
const out = await editor.exportDocx(); // Uint8Array, carries the source package
editor.focus();
editor.destroy();

Public API

| Member | Purpose | | --- | --- | | loadDocx(bytes) | Import a .docx, lay it out, paint; resolves with the page-chrome keys. | | exportDocx() | Serialize the edited doc back to .docx bytes (round-trips unmodelled parts). | | state / dispatch(tr) | Read the EditorState; apply a ProseMirror transaction. | | onChange(cb) / onCaretPick(cb) | Subscribe to render cycles / caret placement (each returns an unsubscribe). | | caretRect(pos) / pageToCanvas(pt) | Geometry helpers for anchoring host UI (comment bubbles/cards). | | setSelection(from, to?) / selectWordAt(pos) / scrollToPos(pos) | Move/scroll the selection. | | setSuppressedComments(ids) | Comment ids to paint with no tint (resolved, or all when hidden). | | focus() / destroy() | Focus the IME sink; tear down listeners + the hidden editor. |

Comment marks and threads ride on the editor's doc model (state.doc.attrs), so the host stays in sync purely through dispatch/state plus the geometry helpers — the editor itself is comment-UI agnostic.

Build / test

pnpm nx build @shadow-garden/bapbong-editor
pnpm nx test  @shadow-garden/bapbong-editor