RichTextEditor

Alpha

An accessible WYSIWYG rich text editor with a toolbar, keyboard shortcuts for formatting, and an extensible adapter system for plugging in editor frameworks.

Import

import { RichTextEditor } from "@compa11y/react";

Usage

Example.tsx

import { RichTextEditor } from "@compa11y/react";

function ArticleEditor({ adapter }) {
  return (
    <RichTextEditor adapter={adapter} placeholder="Start writing...">
      <RichTextEditor.Toolbar>
        <RichTextEditor.Bold />
        <RichTextEditor.Italic />
        <RichTextEditor.Underline />
        <RichTextEditor.Separator />
        <RichTextEditor.HeadingSelect />
        <RichTextEditor.Separator />
        <RichTextEditor.BulletedList />
        <RichTextEditor.NumberedList />
        <RichTextEditor.Separator />
        <RichTextEditor.Link />
        <RichTextEditor.Separator />
        <RichTextEditor.Undo />
        <RichTextEditor.Redo />
      </RichTextEditor.Toolbar>
      <RichTextEditor.Content />
      <RichTextEditor.CharacterCount max={5000} />
    </RichTextEditor>
  );
}

Features

role='toolbar' on the formatting bar with roving tabindex
aria-pressed on toggle format buttons (bold, italic, etc.)
Keyboard shortcuts: Ctrl+B (bold), Ctrl+I (italic), Ctrl+U (underline), etc.
Heading level selector
Link and image insertion dialogs
Character count with aria-live
Extensible adapter pattern for editor backends
Undo/redo with Ctrl+Z / Ctrl+Shift+Z

Props

RichTextEditor component props
Prop	Type	Default	Description
`value`	`RTEValue`	-	Controlled editor content
`onValueChange`	`(value: RTEValue) => void`	-	Called when content changes
`adapter`*	`RTEAdapter`	-	Editor framework adapter
`placeholder`	`string`	-	Placeholder text when empty
`readonly`	`boolean`	`false`	Makes the editor read-only
`disabled`	`boolean`	`false`	Disables the editor

Sub-components

RichTextEditor.Toolbar

RichTextEditor.Toolbar props
Prop	Type	Default	Description
`children`	`ReactNode`	-	Toolbar buttons

RichTextEditor.Content

RichTextEditor.Bold

RichTextEditor.Italic

RichTextEditor.Underline

RichTextEditor.HeadingSelect

RichTextEditor.BulletedList

RichTextEditor.NumberedList

RichTextEditor.Link

RichTextEditor.Undo

RichTextEditor.Redo

RichTextEditor.Separator

RichTextEditor.CharacterCount

RichTextEditor.CharacterCount props
Prop	Type	Default	Description
`max`	`number`	-	Maximum character count

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for RichTextEditor
Key	Action
`Ctrl+B / Cmd+B`	Toggle bold
`Ctrl+I / Cmd+I`	Toggle italic
`Ctrl+U / Cmd+U`	Toggle underline
`Ctrl+Z / Cmd+Z`	Undo
`Ctrl+Shift+Z / Cmd+Shift+Z`	Redo
`Tab (in toolbar)`	Move between toolbar groups
`ArrowLeft / ArrowRight`	Navigate toolbar buttons within a group