RichTextEditor

molecules

Rich text editor for event descriptions. Replaces TinyMCE. TipTap/Lexical wrapper.

ARIA Role: textbox

Demo

Demo for RichTextEditor (molecules)

Rich text editor for event descriptions. Replaces TinyMCE. TipTap/Lexical wrapper.

Props

Prop	Type	Required	Default	Description
`value`	`string`	No	`—`	Editor content (HTML)
`onChange`	`(html: string) => void`	Yes	`—`	Content change handler
`disabled`	`boolean`	No	`false`	Disabled state
`placeholder`	`string`	No	`—`	Placeholder text
`toolbar`	`ToolbarOption[]`	No	`—`	Toolbar options

TypeScript Interface

interface RichTextEditorProps {
  value?: string;
  onChange: (html: string) => void;
  disabled?: boolean;
  placeholder?: string;
  toolbar?: ToolbarOption[];
}

Assertions (NASA Rule 5)

[aria]Editable area must have role='textbox' and aria-multiline='true'(WAI-ARIA APG)
[aria]Toolbar buttons must have aria-label(WCAG 1.1.1)
[keyboard]Tab navigates toolbar, Ctrl+B/I/U keyboard shortcuts work(WCAG 2.1.1)
[validation]Output HTML must be sanitized (DOMPurify or equivalent)(OWASP XSS)

Usage

Import

import { Richtexteditor } from '@epasslive/design-system'

Basic

<Richtexteditor />

With Variants

<Richtexteditor variant="primary" size="md" />