Rich Text Editor
A WYSIWYG editor that shows formatting as you write and saves HTML, plus Rich Text Content to show what was written.In a form field
Preview
Code
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/editornpm
npm install @advui/editorUsage
import { RichTextContent, RichTextEditor } from '@advui/editor'
<RichTextEditor aria-label="Report" value={html} onValueChange={setHtml} />
// Show saved text:
<RichTextContent>{html}</RichTextContent>Examples
Fewer tools, for comments
Preview
Code
Showing saved text
Preview
Code
Distribution plan
Register households with the village tract leader
Hand out hygiene kits at the monastery
Record every distribution in the 5W form
Keep paper lists digital records only.
API reference
RichTextEditor
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The text, as HTML. An empty document is an empty string. |
defaultValue | string | — | Starting `value` when uncontrolled. |
onValueChange | (value: string) => void | — | Called with the new `value` as the text changes. |
placeholder | string | — | Shown while empty. |
tools | RichTextTool[] | all ten | Toolbar buttons, in order: 'bold', 'italic', 'underline', 'strikethrough', 'heading', 'bulletList', 'orderedList', 'quote', 'link', 'code'. |
minHeight | number | SizeTokens | '32' | Height of the text before it grows. |
invalid | boolean | — | Error styling and `aria-invalid`. |
disabled | boolean | — | Not editable; the tools are disabled. |
aria-label | string | — | Names the editor when there is no visible label. A Field sets it for you. |
id | string | — | The text’s id. A Field sets it, and names the text with its label. |
aria-describedby | string | — | Ids of help or error text. A Field sets it for you. |
labels | Partial<RichTextEditorLabels> | — | Toolbar, tool and link field text, for translation. |
RichTextContent
Shows the HTML with the same styles as Markdown Content. Also takes View props.| Prop | Type | Default | Description |
|---|---|---|---|
children required | string | — | The HTML. |
headingOffset | number | 0 | Added to heading levels, for text shown under a deeper heading. |
Accessibility
- The text is a multi-line
textbox, named byaria-labelor a Field’s label (aria-labelledbyon web). - The toolbar is a WAI-ARIA
toolbarwith one tab stop; each tool is a toggle button that shows whether the selection has it (aria-pressedon web, a checked toggle button on iOS and Android), with its shortcut inaria-keyshortcutsand the tooltip. - After a tool is used, focus returns to the text. Link opens an address field under the toolbar; Enter applies it and Escape returns to the text.
- Tab leaves the text, also in lists: lists are not nested with Tab, so the keyboard never stays trapped.
- Rich Text Content draws the HTML as views with real headings and lists; scripts and styles in it never run, and links only follow
http(s)andmailtoaddresses.
| Key | Action |
|---|---|
| ⌘ / Ctrl + B, I, U | Bold, italic, underline. |
| ⌘ / Ctrl + Shift + S | Strikethrough. |
| ⌘ / Ctrl + E | Code. |
| ⌘ / Ctrl + K | Link: opens the address field. |
| ⌘ / Ctrl + Alt + 2 | Heading. |
| ⌘ / Ctrl + Shift + 8, 7 | Bulleted, numbered list. |
| ⌘ / Ctrl + Shift + B | Quote. |
| ⌘ / Ctrl + Z, Shift + Z | Undo, redo. |
| Tab | Toolbar, then the text. |
| Arrow keys | Move between tools in the toolbar. |
Responsive behavior
The toolbar wraps on narrow screens.
Platform notes
Web
TipTap edits the text in the page. Typing Markdown shortcuts (
## , - , **bold**) formats as you go. The value is HTML: show it with Rich Text Content, not as markup.iOS
TipTap runs in a WebView (TenTap, with
react-native-webview, which Expo Go includes), under the same toolbar; the WebView grows with the text. App fonts are not loaded in it, so it uses the system font. Not yet checked on a device.Android
Same as iOS. Not yet checked on a device.