React Editor Bootstrap Utility

Build a helper that wires up a rich-text manager and a DOM-backed editor view inside a React app. The helper should accept extension factories, create a manager and state from them, mount a view onto a provided element, relay JSON updates, and provide teardown for reuse.

Capabilities

Manager initialization

• When given extension factories plus optional starting content and format, it returns a configured manager and initial state; if no content is provided it uses an empty document. @test
• It rejects an empty extension list with a clear error. @test

View mounting

• Given a root element, it creates a view from the initial state and attaches it to that element; subsequent calls reuse the existing manager rather than recreating extensions. @test

Change forwarding

• Whenever the editor state changes, it invokes the optional callback with the latest document as JSON. @test

Cleanup

• Calling the teardown function destroys the mounted view and detaches event handlers so re-initializing on the same element works without duplicate listeners. @test

Implementation

@generates

API

export type ExtensionFactory = () => unknown;

export interface BootstrapOptions {
  extensions: ExtensionFactory[];
  initialContent?: string;
  contentFormat?: 'html' | 'json';
  rootElement: HTMLElement;
  onJsonChange?: (json: unknown) => void;
}

export interface BootstrapResult {
  manager: unknown;
  view: unknown;
  getState: () => unknown;
  destroy: () => void;
}

export function bootstrapReactEditor(options: BootstrapOptions): BootstrapResult;

Dependencies { .dependencies }

@remirror/react { .dependency }

Provides manager and view creation utilities for React-based editors.