Rich Text Editor Toolbar

Build a React rich-text editor component that exposes prebuilt formatting, list, and alignment controls from the dependency. The component should initialize with optional HTML content, render an always-visible toolbar, and emit updated HTML whenever edits are made.

Capabilities

Toolbar layout

• Renders a toolbar with grouped formatting, list, and alignment controls above the editable area when mounted. @test

Inline formatting

• Selecting text and toggling bold and italic controls updates the document so the chosen words render with both styles, and the change callback receives the updated HTML. @test

Lists

• Toggling list controls converts selected lines into a bullet list, then into a numbered list, with active state reflecting the current list type. @test

Alignment

• Alignment controls set a selected paragraph to centered alignment and back to left alignment, and the output HTML reflects the applied alignment. @test

Implementation

@generates

API

export interface ToolbarEditorProps {
  /**
   * Optional HTML string used to seed the editor content.
   */
  initialContent?: string;
  /**
   * Called with the latest HTML whenever the document changes.
   */
  onChange?: (html: string) => void;
  /**
   * When false, the editor renders in read-only mode while still showing toolbar state.
   */
  editable?: boolean;
}

/**
 * Rich-text editor with prebuilt toolbar controls for formatting, lists, and alignment.
 */
export function ToolbarEditor(props: ToolbarEditorProps): JSX.Element;

Dependencies { .dependencies }

@remirror/react { .dependency }

Provides the editor container, prebuilt toolbar components, and ready-made formatting/list/alignment controls.