Text Editor
Rich text editor with a formatting toolbar. Figma V8.0: Type (default / floating toolbar) × Size (sm / md), simple and advanced toolbars, hint text and scroll bar toggles.
import
{ TextEditor, TextEditorToolbar } from "@pepulux/ui"Type: Default — size sm
Simple toolbar: bold, italic, underline, text color, alignment and bullets.
1000 characters left
Type: Default — size md
md switches to the advanced toolbar: font and size dropdowns, link, image and AI generate.
1000 characters left
Type: Floating toolbar
The toolbar sits in a floating card above the editor.
1000 characters left
1000 characters left
Hint text and scroll bar
hintText shows the remaining characters; scrollBar toggles the slim scrollbar.
Controlled output
onChange returns the editor's HTML.
1000 characters left
<p>Hello <b>world</b></p>
Toolbar only — Simple and Advanced
TextEditorToolbar can be used on its own with your own editor.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "default" | "floating" | "default" | Figma Type — Default | Floating toolbar |
| size | "sm" | "md" | "sm" | Figma Size — sm (512px, 8px radius) | md (720px, 12px radius) |
| toolbarType | "simple" | "advanced" | — | Defaults to simple for sm and advanced for md |
| dropdowns | boolean | true | Figma Dropdowns — font family and size selects (advanced toolbar, default type) |
| hintText | boolean | true | Figma Hint text — shows "N characters left" |
| maxLength | number | 1000 | Maximum plain-text characters |
| scrollBar | boolean | true | Figma Scroll bar — slim scrollbar on the content area |
| defaultValue | string | — | Initial HTML content |
| onChange | (html: string) => void | — | Called with the HTML on every change |
| onGenerate | () => void | — | Called when the Generate (sparkles) button is clicked |
| onInsertImage | () => string | undefined | Promise<string | undefined> | — | Return an image URL for the Insert image button (falls back to a prompt) |
| placeholder | string | — | Accessible placeholder text |
| minHeight | number | — | Minimum height of the editable area in px |
TextEditorToolbar props
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "simple" | "advanced" | "simple" | Figma Type — Simple | Advanced |
| dropdowns | boolean | true | Figma Dropdowns — shows font and size selects (advanced only) |
| active | Partial<Record<TextEditorCommand, boolean>> | — | Buttons shown in the Current (pressed) state |
| color | string | "#171717" | Text color swatch |
| onCommand | (command, value?) => void | — | bold, italic, underline, bullets, align-left, align-center, link, image, color, generate |