Phoundry UI

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

PropTypeDefaultDescription
value requiredstring-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 booleanfalseDisable editing.
minHeight string'120px'Minimum editor height.
maxHeight string'400px'Maximum editor height before scrolling.
class string-Additional CSS classes.

ToolbarAction Values

PropTypeDefaultDescription
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.