RichTextEditor

Lexical-powered rich text editor with four progressive toolbar variants. Web only — native apps should use a platform-specific editor.

When to use

Form fields requiring formatted text (job descriptions, notes, announcements).
Content authoring with headings, lists, links, and formatting.
Quick inline formatting for short fields (use minimal variant).
Read-only rich text display — toolbar is hidden automatically.

When NOT to use

For plain single-line text — use Input.
For plain multi-line text — use Textarea.
For markdown-only editing — use a dedicated markdown editor.

Import

import { RichTextEditor } from '@mihcm/ui/RichTextEditor';

Basic usage

<RichTextEditor
  placeholder="Write a description..."
  onChange={(editorState) => {
    const json = editorState.toJSON();
    // persist or send json to your backend
  }}
/>

Variants

Choose the simplest variant that fits your use case.

Variant	Toolbar features	Use case
`minimal`	Bold, Italic	Quick inline formatting for short fields
`default`	+ Underline, Strikethrough, Lists	Most form fields
`semi`	+ Undo/Redo, H1-H3, Code, Link, Indent/Outdent, Markdown shortcuts	Content authoring
`full`	+ Alignment (L/C/R/Justify), Table (3×3), Check list, Super/Subscript, Block quote, HR, Clear formatting	Full document editing

Props

Prop	Default	Description
`variant`	`"default"`	Controls which toolbar features are shown.
`placeholder`	`"Start typing..."`	Placeholder text for the editor.
`onChange`	—	Called with the Lexical EditorState on every change.
`readOnly`	`false`	Disables editing and hides the toolbar.
`minHeight`	`"150px"`	Minimum height of the editor area.

Composition

Use variant="minimal" for comments and notes — only bold, italic, links.
Use variant="default" for content editing — adds headings, lists, and block quotes.
readOnly renders the content without the toolbar — use for previewing saved content.
onChange fires on every keystroke with the Lexical EditorState. Debounce for auto-save.
Active toolbar buttons use aria-pressed="true" plus a filled semantic style so pressed and unpressed states are visually distinct in light and dark mode.

Textarea — plain multi-line text field (no formatting).
Input — single-line text field.
Form — integrate with form validation.