Quick Start

Install @bayonai/rich-text-editor and wire the controlled editor, renderer, stats, and sanitization helpers.

Quick start

The package is intentionally small at the host boundary: install it, keep your own state, sanitize the block value, and decide where persistence happens in your app.

npm install @bayonai/rich-text-editor

import { RichTextEditor, RichTextRenderer } from '@bayonai/rich-text-editor/react';
import {
  getWritingStats,
  sanitizeRichTextBlocks,
  type RichTextBlock,
} from '@bayonai/rich-text-editor';

const safeBlocks = sanitizeRichTextBlocks(contentBlocks);
const stats = getWritingStats(safeBlocks);

<RichTextEditor
  title={title}
  titleLabel="Title"
  bodyLabel="Body"
  contentBlocks={safeBlocks}
  onTitleChange={setTitle}
  onContentBlocksChange={setContentBlocks}
/>

<RichTextRenderer contentBlocks={safeBlocks} />