RichTextEditor Experimental

Contenteditable HTML editor with configurable toolbar, placeholder, and HTML output.

import { RichTextEditor } from 'phoundry-ui';

Full Toolbar

Start writing…

Show code

let content = $state('<p>Start editing here...</p>');

<RichTextEditor
  value={content}
  onchange={(html) => content = html}
  toolbar={[
    'bold', 'italic', 'underline', 'strikethrough', 'code',
    'heading', 'bulletList', 'numberedList', 'blockquote',
    'link', 'horizontalRule', 'clearFormatting',
  ]}
/>

Minimal Toolbar

Write a comment...

Show code

<RichTextEditor
  value={content}
  onchange={(html) => content = html}
  toolbar={['bold', 'italic', 'link']}
  placeholder="Write a comment..."
  minHeight="80px"
/>

Disabled

Toolbar actions no-op; the surface is not editable.

Start writing…

Show code

<RichTextEditor value={html} onchange={set} disabled />

Props

Prop	Type	Default	Description
value required	string	—	HTML content string.
onchange required	(html: string) => void	—	Called when content changes.
placeholder	string	'Start writing…'	Placeholder text when empty.
toolbar	ToolbarAction[]	—	Which toolbar buttons to show. Defaults to all actions.
disabled	boolean	false	Disable editing.
minHeight	string	'120px'	Minimum editor height.
maxHeight	string	'400px'	Maximum editor height before scrolling.
class	string	—	Additional CSS classes.

ToolbarAction Values

Prop	Type	Default	Description
bold	ToolbarAction	—	Bold text formatting.
italic	ToolbarAction	—	Italic text formatting.
underline	ToolbarAction	—	Underline text.
strikethrough	ToolbarAction	—	Strikethrough text.
code	ToolbarAction	—	Inline code formatting.
link	ToolbarAction	—	Insert or edit hyperlink.
heading	ToolbarAction	—	Toggle heading level.
bulletList	ToolbarAction	—	Unordered list.
numberedList	ToolbarAction	—	Ordered list.
blockquote	ToolbarAction	—	Block quote formatting.
horizontalRule	ToolbarAction	—	Insert horizontal rule.
clearFormatting	ToolbarAction	—	Remove all formatting from selection.

Usage tips

The value is raw HTML — sanitize it before persisting or rendering elsewhere to prevent XSS.
Use a minimal toolbar (['bold', 'italic', 'link']) for comment fields and short-form inputs.
Set maxHeight to constrain tall content — the editor scrolls internally.
The editor uses contenteditable — no external dependencies required.
Toolbar shortcut keys: ⌘/Ctrl+B/I/U for bold/italic/underline, ⌘/Ctrl+K for links, Tab inserts two spaces (does not move focus).
The heading action maps to an h3 via formatBlock — browser support for formatting commands varies slightly.