Rich Text Editor

Text editor: Markdown shortcuts, slash commands, mentions, links and images. Pro · Work and teams › Team and documents

Rich text editor with its own document model: toolbar, floating selection toolbar, Markdown shortcuts, "/" commands, @mentions, links, images with upload, undo history and sanitized paste. The value is JSON; convert it with toHTML, fromHTML, toMarkdown, fromMarkdown.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add rich-text-editor

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { RichTextEditor } from 'valyro-ui-pro';

Props

Prop	Type	Default
`value`	`RichTextDocument`		The document (controlled). Pass back what `onValueChange` gives you.
`defaultValue`	`RichTextDocument`		Initial `value` when uncontrolled.
`onValueChange`	`(value: RichTextDocument) => void`		Called with the new `value` when it changes.
`placeholder`	`string`		Hint shown in the first line while the document is empty.
`readOnly`	`boolean`	`false`	Renders the document without editing: no toolbars, menus or footer, and not a textbox for assistive tech.
`autoFocus`	`boolean`	`false`	Focus the text on mount (ignored when `readOnly`).
`toolbar`	`boolean`	`true`	Fixed formatting toolbar above the text (never in read-only mode). Default true.
`bubbleToolbar`	`boolean`	`true`	Floating toolbar over selected text. Default true.
`slashCommands`	`boolean`	`true`	"/" at the start of a word opens a filterable menu of block types. Default true.
`onMentionSearch`	`(query: string) => RichTextMentionSuggestion[] \| Promise<RichTextMentionSuggestion[]>`		Turns on @mentions: return the people matching the query (may be async).
`onImageUpload`	`(file: File) => Promise<string>`		Turns on image paste, drop and upload: store the file and resolve with its URL.
`onSubmit`	`(value: RichTextDocument) => void`		⌘↵ / Ctrl+Enter — e.g. to send a comment. Without it the shortcut ticks a to-do item.
`maxLength`	`number`		Character limit (mentions count by their label). Typing and pasting stop there.
`showCount`	`boolean`		Word and character count in the footer. Default: on when `maxLength` is set.
`variant`	`'outline' \| 'plain'`	`'outline'`	`outline` — a framed field; `plain` — no frame or padding, for read-only rendering or your own card.
`minHeight`	`number \| string`		Minimum height of the text area; numbers are px, strings any CSS length.
`maxHeight`	`number \| string`		The text scrolls inside the editor beyond this height.
`footer`	`ReactNode`		Content at the start of the footer, e.g. a Send button.
`editorRef`	`Ref<HTMLDivElement>`		The contenteditable element.
`locale`	`string`		BCP 47 locale for the counter; defaults to the ThemeProvider's.
`labels`	`Partial<RichTextEditorLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Team Members — Team members: roles, email invites, pending invitations, seat count
Org Chart — Org chart: zoomable, pannable tree with search and collapsible branches
Activity Feed — Activity feed
Calendar View — Event calendar
Scheduler — Scheduler: day, week, month and resource timeline, drag and drop, recurrence
Kanban Board — Task board
Gantt Chart — Gantt charts with dependencies and drag to reschedule
Booking Slots — Meeting booking: calendar, slots in the guest’s time zone, form and confirmation
CRM Pipeline — Deal pipeline: stages, amounts and probabilities, drag between stages
Approval Flow — Multi-stage approvals: sequential and parallel stages, decisions with reasons, history
Goal Tracker — OKRs: objectives and key results, statuses, confidence, check-ins with history
Onboarding Checklist — Onboarding checklist: progress, hints with CTAs, dismissal and celebration

Previous: Activity Feed · Next: Two Factor Setup · All Work and teams