@bloklabs/vue 1.1.1

package/src/createVueBlock.ts

@@ -0,0 +1,319 @@
+// src/vue/createVueBlock.ts
+import {
+  defineComponent,
+  h,
+  nextTick,
+  onMounted,
+  onUpdated,
+  ref,
+  shallowRef,
+  toRaw,
+  type Component,
+  type PropType,
+  type ShallowRef,
+  type VNodeChild,
+} from 'vue';
+
+import type { BlockAPI } from '@/types/api';
+import type {
+  BlockToolConstructorOptions,
+  BlockToolData,
+  ToolboxConfig,
+} from '@/types/tools';
+import { DATA_ATTR , deepEqual , mountChildBlocks } from '@bloklabs/core/adapters';
+import { fillDefaults, type PropSchema } from '@bloklabs/core/adapters';
+
+import {
+  BLOK_PORTAL_REGISTRY_CONFIG_KEY,
+  type BlockPortalRegistry,
+} from './block-portal-registry';
+
+export type { PropSchema, PropSchemaEntry } from '@bloklabs/core/adapters';
+
+/** Context handed to a Vue block's `setup` (the only data write path is `commit`). */
+export interface VueBlockRenderProps<Data> {
+  /** Reactive, FROZEN snapshot of the block data. Read `data.value`; never mutate. */
+  data: ShallowRef<Readonly<Data>>;
+  /** The ONLY data write path: merge a partial patch and sync once. */
+  commit: (patch: Partial<Data>) => void;
+  /** This block's per-block API (id, connection methods, dispatchChange…). */
+  block: BlockAPI;
+  /**
+   * Reactive read-only flag. Read `readOnly.value` in render to disable editing
+   * (e.g. drop `contenteditable`, hide controls). Toggled IN PLACE by core's
+   * read-only switch — the component reacts without a remount, so ephemeral state
+   * survives. Honor it: a block that ignores `readOnly` stays interactive when
+   * the editor is read-only (same contract as a vanilla tool's `setReadOnly`).
+   */
+  readOnly: Readonly<ShallowRef<boolean>>;
+  /** Engine-owned child slot — render `h(BlockChildren)` for a container block. */
+  BlockChildren: Component;
+}
+
+/** Spec for {@link createVueBlock}. Authored as a `.ts` render function (no SFC). */
+export interface CreateVueBlockSpec<Data = BlockToolData> {
+  /** Tool type name (registered key). */
+  type: string;
+  /** Optional toolbox entry. */
+  toolbox?: ToolboxConfig;
+  /** Declarative defaults that also define the exact `save()` key set. */
+  propSchema: PropSchema;
+  /** Returns a render function (the `defineComponent` + `setup`-returns-`h` shape). */
+  setup: (props: VueBlockRenderProps<Data>) => () => VNodeChild;
+  /** Optional lifecycle callbacks mapped from Blok's block hooks. */
+  onRendered?: (block: BlockAPI) => void;
+  onMoved?: (block: BlockAPI) => void;
+  onRemoved?: (block: BlockAPI) => void;
+}
+
+/**
+ * Author a first-party Vue block. Returns a `BlockToolConstructable` registered
+ * exactly like a vanilla tool (`tools: { type: { class: createVueBlock(...) } }`).
+ *
+ * The factory owns the host element (`data-blok-mutation-free`), a frozen
+ * defaults-filled data mirror, and a reactive `shallowRef` the component reads.
+ * It teleports the component into the host via the editor's shared portal
+ * registry (the TipTap `VueNodeViewRenderer` pattern), and bridges Blok's block
+ * lifecycle to Vue:
+ * - `render()` creates the host and registers the portal entry (returned sync).
+ * - `setData()` is async: it dedups, swaps the reactive snapshot, and `await`s
+ *   Vue's commit before resolving `true` — defeating core's default remount and
+ *   landing the update inside core's RAF-extended Yjs suppression window.
+ * - `save()` returns the complete frozen mirror (never the DOM, never partial).
+ * - `commit()` merges a patch and fires `dispatchChange` exactly once.
+ * - `removed()`/`destroy()` unregister the portal (deterministic unmount).
+ */
+export function createVueBlock<Data = BlockToolData>(
+  spec: CreateVueBlockSpec<Data>
+): (new (options: BlockToolConstructorOptions) => {
+  render(): HTMLElement;
+  save(): BlockToolData;
+  setData(newData: BlockToolData): Promise<boolean>;
+  setReadOnly(state: boolean): void;
+  rendered(): void;
+  moved(): void;
+  removed(): void;
+  destroy(): void;
+}) & {
+  readonly __isBlokVueBlock: true;
+  readonly toolbox: ToolboxConfig | undefined;
+  readonly isReadOnlySupported: boolean;
+} {
+  // One wrapped component definition per TYPE; each block instance gets its own
+  // context via the `ctx` prop, so Vue mounts a distinct instance per entry.
+  const WrappedComponent = defineComponent({
+    name: `VueBlock(${spec.type})`,
+    props: {
+      ctx: { type: Object as PropType<VueBlockRenderProps<Data>>, required: true },
+    },
+    setup(props) {
+      // props is shallow-reactive: `props.ctx` is the raw context object, so the
+      // `data` ref inside it is NOT unwrapped (no reactive ref-unwrap gotcha).
+      return spec.setup(props.ctx);
+    },
+  });
+
+  return class VueBlockTool {
+    /** Marker so `useBlok` can detect vue-block tools and inject the registry. */
+    public static readonly __isBlokVueBlock = true as const;
+
+    public static get toolbox(): ToolboxConfig | undefined {
+      return spec.toolbox;
+    }
+
+    /**
+     * Vue blocks support read-only mode: `setReadOnly` flips a reactive flag the
+     * component reads, so the block re-renders read-only IN PLACE. Without this
+     * flag core's ReadOnly module throws a critical error when read-only is
+     * enabled and a Vue block is present.
+     */
+    public static get isReadOnlySupported(): boolean {
+      return true;
+    }
+
+    private readonly blockApi: BlockAPI;
+    private readonly registry: BlockPortalRegistry | undefined;
+    private readonly pointerDrag: () => boolean;
+    private readonly dataRef: ShallowRef<Readonly<Data>>;
+    /** Reactive read-only flag handed to setup; flipped in place by setReadOnly. */
+    private readonly readOnlyRef: ShallowRef<boolean>;
+    private readonly childrenComponent: Component;
+    private mirror: Readonly<Data>;
+    /** Dedup baseline (Risk R3/R6): skip a redundant render of identical data. */
+    private lastRendered: Readonly<Data>;
+    private hostEl: HTMLElement | null = null;
+    /** Latest patch queued while a pointer drag suppresses dispatchChange. */
+    private pendingDispatch = false;
+
+    public constructor(options: BlockToolConstructorOptions) {
+      this.blockApi = options.block;
+
+      const config = (options.config ?? {}) as Record<string, unknown>;
+
+      this.registry = config[BLOK_PORTAL_REGISTRY_CONFIG_KEY] as BlockPortalRegistry | undefined;
+
+      // Read the LIVE pointer-drag flag so a mid-drag commit can be deferred
+      // (core silently drops a dispatchChange while a drag is active).
+      const api = options.api as unknown as { blocks?: { isPointerDragActive?: boolean } } | undefined;
+
+      this.pointerDrag = (): boolean => api?.blocks?.isPointerDragActive === true;
+
+      this.mirror = fillDefaults<Data>(spec.propSchema, toRaw(options.data ?? {}) as Record<string, unknown>);
+      this.lastRendered = this.mirror;
+      this.dataRef = shallowRef(this.mirror);
+      this.readOnlyRef = shallowRef(options.readOnly);
+
+      const blockApi = this.blockApi;
+
+      // Per-instance child slot: a childless ref'd div Blok owns; mountChildBlocks
+      // appends the real child holders imperatively (Vue never reconciles them).
+      this.childrenComponent = defineComponent({
+        name: `VueBlockChildren(${spec.type})`,
+        setup() {
+          const slot = ref<HTMLElement | null>(null);
+          const mountKids = (): void => {
+            if (slot.value !== null) {
+              mountChildBlocks(slot.value, blockApi.getChildren());
+            }
+          };
+
+          onMounted(mountKids);
+          onUpdated(mountKids);
+
+          return () => h('div', { ref: slot, [DATA_ATTR.nestedBlocks]: '' });
+        },
+      });
+    }
+
+    public render(): HTMLElement {
+      const host = document.createElement('div');
+
+      // The Blok-owned host: Vue reconciles the chrome teleported INTO it, but
+      // this attribute makes core's MutationObserver ignore those mutations, so
+      // Vue's reconciliation never registers as a user edit.
+      host.setAttribute('data-blok-mutation-free', 'true');
+      this.hostEl = host;
+
+      const ctx: VueBlockRenderProps<Data> = {
+        data: this.dataRef,
+        commit: this.commit,
+        block: this.blockApi,
+        readOnly: this.readOnlyRef,
+        BlockChildren: this.childrenComponent,
+      };
+
+      this.registry?.register(this.blockApi.id, {
+        hostEl: host,
+        component: WrappedComponent,
+        props: { ctx },
+      });
+
+      // Returned synchronously; Vue flushes the teleport on the next tick.
+      return host;
+    }
+
+    public rendered(): void {
+      spec.onRendered?.(this.blockApi);
+    }
+
+    public save(): BlockToolData {
+      // The complete, frozen, toRaw-clean mirror — never the DOM, never partial.
+      return this.mirror as BlockToolData;
+    }
+
+    public async setData(newData: BlockToolData): Promise<boolean> {
+      const next = fillDefaults<Data>(spec.propSchema, toRaw(newData ?? {}));
+
+      // Dedup (Risk R3): identical data → skip the render entirely, but still
+      // return true so core keeps the block in place (no remount).
+      if (deepEqual(next, this.lastRendered)) {
+        return true;
+      }
+
+      this.mirror = next;
+      this.lastRendered = next;
+      this.dataRef.value = next;
+
+      // Await Vue's commit. Core drives setData asynchronously inside its
+      // RAF-extended Yjs-suppression window, so awaiting nextTick lands the
+      // re-render before suppression lifts — without ever remounting.
+      await nextTick();
+
+      return true;
+    }
+
+    /**
+     * In-place read-only toggle. Flips the reactive flag the component reads via
+     * `ctx.readOnly`, so the block re-renders read-only WITHOUT a remount
+     * (ephemeral component state survives). A regular prototype method (not an
+     * arrow field) so core's `supportsInPlaceReadOnly` — which probes the
+     * constructable's PROTOTYPE for `setReadOnly` — selects the in-place path.
+     */
+    public setReadOnly(state: boolean): void {
+      this.readOnlyRef.value = state;
+    }
+
+    public moved(): void {
+      // No remount: Blok relocates the host element; the teleport follows it.
+      spec.onMoved?.(this.blockApi);
+    }
+
+    public removed(): void {
+      this.registry?.unregister(this.blockApi.id);
+      spec.onRemoved?.(this.blockApi);
+    }
+
+    public destroy(): void {
+      // Idempotent with removed(); unregister is safe when already absent.
+      this.registry?.unregister(this.blockApi.id);
+    }
+
+    /**
+     * The only data write path. Merges the patch into the frozen mirror, swaps
+     * the reactive snapshot, records the dedup baseline, and fires
+     * dispatchChange EXACTLY once — deferring it while a pointer drag is active
+     * (core would otherwise silently drop it).
+     */
+    private readonly commit = (patch: Partial<Data>): void => {
+      const next = fillDefaults<Data>(spec.propSchema, {
+        ...(this.mirror as Record<string, unknown>),
+        ...(patch as Record<string, unknown>),
+      });
+
+      this.mirror = next;
+      this.lastRendered = next;
+      this.dataRef.value = next;
+
+      this.flushDispatch();
+    };
+
+    /** Dispatch the change, or retry on the next frame if a drag is in progress. */
+    private flushDispatch(): void {
+      if (!this.pointerDrag()) {
+        this.pendingDispatch = false;
+        this.blockApi.dispatchChange();
+
+        return;
+      }
+
+      if (this.pendingDispatch) {
+        return;
+      }
+
+      this.pendingDispatch = true;
+
+      const retry = (): void => {
+        if (this.pointerDrag()) {
+          requestAnimationFrame(retry);
+
+          return;
+        }
+
+        this.pendingDispatch = false;
+        this.blockApi.dispatchChange();
+      };
+
+      requestAnimationFrame(retry);
+    }
+  };
+}

package/src/holder-map.ts

@@ -0,0 +1,19 @@
+/**
+ * Module-level WeakMap associating editor instances with their detached holder
+ * divs. WeakMap ensures no memory leaks — when the editor is garbage collected,
+ * the holder reference is released. `useBlok` registers the holder at creation;
+ * `BlokContent` reads it to adopt the editor's DOM into its container.
+ */
+const holders = new WeakMap<WeakKey, HTMLDivElement>();
+
+export function setHolder(editor: WeakKey, holder: HTMLDivElement): void {
+  holders.set(editor, holder);
+}
+
+export function getHolder(editor: WeakKey): HTMLDivElement | undefined {
+  return holders.get(editor);
+}
+
+export function removeHolder(editor: WeakKey): void {
+  holders.delete(editor);
+}

package/src/index.ts

@@ -0,0 +1,22 @@
+export { useBlok } from './useBlok';
+export { useBlocks } from './useBlocks';
+export { BlokContent } from './BlokContent';
+export { BlokEditor } from './BlokEditor';
+export { provideBlok, useBlokDefaults, BLOK_DEFAULT_CONFIG } from './provide-blok';
+export { createVueBlock } from './createVueBlock';
+export type { UseBlokConfig, BlokContentProps } from './types';
+export type {
+  UseBlocksApi,
+  BlockNode,
+  CaretTarget,
+  InsertPosition,
+  InsertSpec,
+  TreeInsertSpec,
+  MoveTarget,
+} from './blocks-snapshot';
+export type {
+  CreateVueBlockSpec,
+  PropSchema,
+  PropSchemaEntry,
+  VueBlockRenderProps,
+} from './createVueBlock';

package/src/provide-blok.ts

@@ -0,0 +1,65 @@
+import { inject, provide, type InjectionKey } from 'vue';
+import type { UseBlokConfig } from './types';
+
+/**
+ * Injection key holding app-wide Blok defaults (shared tools registry, default
+ * theme, i18n). Merged UNDER per-instance config by `useBlok` (and therefore by
+ * `<BlokEditor>`, which wires `useBlok`).
+ */
+export const BLOK_DEFAULT_CONFIG: InjectionKey<Partial<UseBlokConfig>> = Symbol('BLOK_DEFAULT_CONFIG');
+
+/**
+ * Registers app-wide Blok defaults in the current component's provide scope
+ * (call inside a parent component's `setup`). Mirrors React's `BlokProvider` and
+ * Angular's `provideBlok`.
+ *
+ * @example
+ * ```ts
+ * setup() {
+ *   provideBlok({ theme: 'dark', tools: sharedTools });
+ * }
+ * ```
+ */
+export function provideBlok(defaults: Partial<UseBlokConfig>): void {
+  provide(BLOK_DEFAULT_CONFIG, defaults);
+}
+
+/**
+ * Reads the app-wide Blok defaults from the nearest `provideBlok` (or `{}`).
+ * Mirrors React's `useBlokDefaults`. Call inside `setup`.
+ */
+export function useBlokDefaults(): Partial<UseBlokConfig> {
+  return inject(BLOK_DEFAULT_CONFIG, {});
+}
+
+/**
+ * Merge app-wide `defaults` UNDER a per-instance `config`: a defined config value
+ * overrides the default, and the `tools` registry is merged across both layers
+ * (a shared registry composes with per-instance additions) rather than replaced.
+ * Returns the original `config` reference when there are no defaults, so the
+ * no-provider path stays identity-stable. Mirrors React's `mergeBlokDefaults`.
+ */
+export function mergeBlokDefaults(
+  defaults: Partial<UseBlokConfig>,
+  config: UseBlokConfig
+): UseBlokConfig {
+  if (Object.keys(defaults).length === 0) {
+    return config;
+  }
+
+  const merged: Record<string, unknown> = { ...defaults };
+
+  for (const key of Object.keys(config)) {
+    const value = (config as Record<string, unknown>)[key];
+
+    if (value !== undefined) {
+      merged[key] = value;
+    }
+  }
+
+  if (defaults.tools !== undefined || config.tools !== undefined) {
+    merged.tools = { ...defaults.tools, ...config.tools };
+  }
+
+  return merged as UseBlokConfig;
+}

package/src/registry-map.ts

@@ -0,0 +1,21 @@
+// src/vue/registry-map.ts
+import type { BlockPortalRegistry } from './block-portal-registry';
+
+/**
+ * Associates each live Blok instance with its portal registry, keyed by the RAW
+ * editor (mirrors the holder WeakMap). `useBlok` sets it at creation; `BlokContent`
+ * reads it to mount the shared `BlockPortalHost`. WeakMap → no leak on destroy.
+ */
+const registries = new WeakMap<WeakKey, BlockPortalRegistry>();
+
+export function setRegistry(editor: WeakKey, registry: BlockPortalRegistry): void {
+  registries.set(editor, registry);
+}
+
+export function getRegistry(editor: WeakKey): BlockPortalRegistry | undefined {
+  return registries.get(editor);
+}
+
+export function removeRegistry(editor: WeakKey): void {
+  registries.delete(editor);
+}

package/src/types.ts

@@ -0,0 +1,30 @@
+import type { BlokConfig, Blok, EditorWidth } from '@/types';
+
+/**
+ * Configuration for the `useBlok` composable and the `<BlokEditor>` component.
+ * Same as `BlokConfig` but without `holder` (managed by the adapter), plus a
+ * reactive `width` prop.
+ *
+ * Reactive props (sync after mount without recreation):
+ * - `readOnly` — calls `editor.readOnly.set(value)`
+ * - `autofocus` — calls `editor.focus()` when changed to true
+ * - `theme` — calls `editor.theme.set(value)`
+ * - `width` — calls `editor.width.set(value)`
+ * - `placeholder` — calls `editor.placeholder.set(value)`
+ * - `data` — re-renders via `editor.render(value)` when content changes
+ *   (deep-equal–deduped and serialized; seeds the initial content at creation)
+ *
+ * The `onSave` config (inherited from `BlokConfig`) is the controlled output
+ * half: it fires with the full serialized `OutputData` on every content change,
+ * so `data` + `onSave` (or `v-model:data`) form a controlled component.
+ */
+export interface UseBlokConfig extends Omit<BlokConfig, 'holder'> {
+  /** Editor content width mode. Synced reactively after mount via `editor.width.set()`. */
+  width?: EditorWidth;
+}
+
+/** Props for the `BlokContent` component. */
+export interface BlokContentProps {
+  /** The Blok editor instance returned by `useBlok`. Pass null before it is ready. */
+  editor: Blok | null;
+}

package/src/useBlocks.ts

@@ -0,0 +1,147 @@
+// src/vue/useBlocks.ts
+import {
+  shallowRef,
+  watch,
+  toValue,
+  toRaw,
+  onScopeDispose,
+  type MaybeRefOrGetter,
+} from 'vue';
+
+import type { Blok } from '@/types';
+import { createBlocksApiForEditor, EMPTY_API } from '@bloklabs/core/adapters';
+
+import type { UseBlocksApi } from './blocks-snapshot';
+
+const BLOCK_CHANGED_EVENT = 'block changed';
+
+/**
+ * Vue composable exposing an id/parentId-relative, reactive view of the block
+ * tree. Reads refresh whenever the editor emits `block changed`; mutators route
+ * through the editor-level `blocks` API (core's chokepoints), so undo/redo and
+ * Yjs sync are inherited rather than re-implemented.
+ *
+ * The block-tree logic itself is framework-agnostic and lives in the shared
+ * {@link createBlocksApiForEditor} core — the SAME implementation behind React's
+ * `useBlocks`, so the two adapters expose the identical 28-method surface and
+ * cannot drift. This composable supplies only Vue's reactivity wrapper:
+ *
+ * - A private `version` ref is bumped on every `block changed`. The shared API
+ *   is built with an `onRead` seam (`() => { void version.value }`) that every
+ *   read method calls, so reading `getChildren`/`getById`/… inside a `computed`
+ *   or template tracks `version` and re-runs on each structural mutation
+ *   (including programmatic nest/unnest, which core surfaces as a change).
+ * - The bound API is rebuilt when the editor IDENTITY changes (held in a
+ *   `shallowRef`), and the returned facade is stable across that swap.
+ *
+ * The editor is accepted as a value, ref, or getter (so the `shallowRef` that
+ * `useBlok` returns can be passed directly) and is `toRaw`-unwrapped before any
+ * read or core handoff, never letting a Vue reactive proxy reach core (Risk R0).
+ *
+ * Pre-ready: while the editor is null the bound API is the shared
+ * {@link EMPTY_API} — every mutator a no-op, reads empty/null — except
+ * `transact`/`transactWithoutCapture`, which still run their callback.
+ *
+ * @param editor - the Blok instance (or ref/getter of it), or null pre-ready
+ */
+export function useBlocks(editor: MaybeRefOrGetter<Blok | null>): UseBlocksApi {
+  // Bumped on every `block changed`; the shared API's read methods touch it
+  // (via the onRead seam below) so template/computed reads stay reactive.
+  const version = shallowRef(0);
+
+  const resolve = (): Blok | null => {
+    const ed = toValue(editor);
+
+    return ed === null ? null : toRaw(ed);
+  };
+
+  // The reactivity seam handed to the shared core: every read method calls it,
+  // so a read inside a Vue effect tracks `version` and re-runs on mutation.
+  const touch = (): void => {
+    void version.value;
+  };
+
+  // The API bound to the CURRENT editor. Rebuilt by the watch below when the
+  // editor identity changes; EMPTY_API while null. A shallowRef so swapping the
+  // bound API (on editor change) is itself a tracked reactive read.
+  const bound = shallowRef<UseBlocksApi>(EMPTY_API);
+
+  // Manage the `block changed` subscription, re-binding when the editor changes.
+  // Held in one object (no `let` reassignment) — the same pattern useBlok uses.
+  const sub: { editor: Blok | null; handler: (() => void) | null } = { editor: null, handler: null };
+
+  const unsubscribe = (): void => {
+    if (sub.editor !== null && sub.handler !== null) {
+      sub.editor.off(BLOCK_CHANGED_EVENT, sub.handler);
+    }
+    sub.editor = null;
+    sub.handler = null;
+  };
+
+  watch(
+    () => resolve(),
+    (ed) => {
+      unsubscribe();
+      // A changed editor identity is itself a reason to re-read.
+      version.value += 1;
+
+      if (ed === null) {
+        bound.value = EMPTY_API;
+
+        return;
+      }
+
+      const handler = (): void => {
+        version.value += 1;
+      };
+
+      ed.on(BLOCK_CHANGED_EVENT, handler);
+      sub.editor = ed;
+      sub.handler = handler;
+      bound.value = createBlocksApiForEditor(ed, touch);
+    },
+    { immediate: true }
+  );
+
+  onScopeDispose(unsubscribe);
+
+  // A stable facade whose methods delegate to the currently-bound API. Reading
+  // `bound.value` tracks the editor-identity swap; the shared reads track
+  // `version` via the onRead seam — so both kinds of change re-run a consumer's
+  // computed/template. Every key is listed EXPLICITLY (no spread) so a forgotten
+  // delegation is a COMPILE error against the UseBlocksApi return type rather
+  // than a silently-missing method.
+  return {
+    getById: (id) => bound.value.getById(id),
+    getChildren: (parentId) => bound.value.getChildren(parentId),
+    insert: (spec) => bound.value.insert(spec),
+    insertMany: (specs) => bound.value.insertMany(specs),
+    insertTree: (spec) => bound.value.insertTree(spec),
+    insertMarkdown: (markdown, options) => bound.value.insertMarkdown(markdown, options),
+    exportMarkdown: () => bound.value.exportMarkdown(),
+    move: (id, target) => bound.value.move(id, target),
+    nest: (id, parentId) => bound.value.nest(id, parentId),
+    unnest: (id) => bound.value.unnest(id),
+    remove: (id) => bound.value.remove(id),
+    update: (id, data, tunes) => bound.value.update(id, data, tunes),
+    convert: (id, newType, dataOverrides, options) => bound.value.convert(id, newType, dataOverrides, options),
+    transact: (fn) => bound.value.transact(fn),
+    transactWithoutCapture: (fn) => bound.value.transactWithoutCapture(fn),
+    getBlocksCount: () => bound.value.getBlocksCount(),
+    getCurrentBlockIndex: () => bound.value.getCurrentBlockIndex(),
+    getBlockByIndex: (index) => bound.value.getBlockByIndex(index),
+    getBlockByElement: (element) => bound.value.getBlockByElement(element),
+    getBlockData: (id) => bound.value.getBlockData(id),
+    getBlockIndex: (id) => bound.value.getBlockIndex(id),
+    composeBlockData: (toolName) => bound.value.composeBlockData(toolName),
+    renderFromHTML: (html) => bound.value.renderFromHTML(html),
+    insertOutputData: (blocks, options) => bound.value.insertOutputData(blocks, options),
+    splitBlock: (currentBlockId, currentBlockData, newBlockType, newBlockData, insertIndex) =>
+      bound.value.splitBlock(currentBlockId, currentBlockData, newBlockType, newBlockData, insertIndex),
+    insertInsideParent: (parentId, insertIndex, childData) =>
+      bound.value.insertInsideParent(parentId, insertIndex, childData),
+    render: (data) => bound.value.render(data),
+    clear: () => bound.value.clear(),
+    isSyncingFromYjs: () => bound.value.isSyncingFromYjs(),
+  };
+}