React Components

Understand the public React component exports for editing, rendering, document surfaces, and session safety.

React components

The React entrypoint gives host apps the surfaces needed for editing, rendering, document framing, and unsaved-change protection without bundling product-specific storage or routing.

`RichTextEditor` - controlled editing surface for title and content blocks.

`RichTextRenderer` - read-only renderer for saved block content.

`RichTextDocumentSurface` - shared document chrome for edit and preview contexts.

`EditorSessionProvider` - dirty-state tracking for one or more editor sessions.

`useEditorSession` and `useEditorExitGuard` - hooks for save/discard/stay flows.

`UnsavedChangesDialog` - a ready-made confirmation dialog for protected navigation.

import {
  EditorSessionProvider,
  RichTextDocumentSurface,
  RichTextEditor,
  RichTextRenderer,
  UnsavedChangesDialog,
} from '@bayonai/rich-text-editor/react';

Editor capabilities

Block types: paragraph, message, heading, quote, bullet, ordered, checkbox, toggle, code, divider, tool, and image.
Empty undesignated blocks expose the special insertion tool so users can choose what comes next.
Non-empty top-level blocks expose a compact handle for block actions.
Block handles support copy, cut, delete, close, and drag reordering with a visible drop target.
Bullet, ordered, checkbox, and toggle rows can hold nested children while flat content stays intentionally simple.
Checkbox rows can be created quickly and reordered individually while grouped copy/cut/delete stays predictable.
Image blocks include display metadata, alignment, upload progress, custom width, alt text, and URL fields owned by the host app.
Deleting the last block preserves one writable paragraph so users never fall into a dead document.
Optional browser-native transcription can insert final transcript text when the host enables it.
Session provider and unsaved-change dialog exports help products protect in-progress writing.