Rich Text Editor

Formatted text input with a toolbar, powered by TipTap.

Introduction

Rich Text Editor is a formatted text field. Bridge owns the toolbar, tokens, and accessibility. The document engine is TipTap.

Sanitize HTML

Sanitize HTML before rendering it outside the editor. XSS prevention stays in the app.

Use Textarea when the value should stay plain text.

Use the framework selector in the site header to switch between React and Vue.

Note

Install @tiptap/core, @tiptap/pm, @tiptap/starter-kit, and

@tiptap/extension-placeholder

v3 next to @bridge-ui/vue.

Note

Install @tiptap/core, @tiptap/pm, @tiptap/starter-kit, and

@tiptap/extension-placeholder

v3 next to @bridge-ui/react.

Import

import { RichTextEditor } from "@bridge-ui/vue/Components/RichTextEditor";

import { RichTextEditor } from "@bridge-ui/react/Components/RichTextEditor";

Basic usage

Bind the document with value / onChange in React or v-model in Vue. The default format is "html".

tools chooses which actions appear. All of these are shown by default: blockquote, bold, bulletList, codeBlock, heading1, heading2, heading3, italic, link, orderedList, strike, and underline.

JSON document

Set format="json" when the value should be a JSON object (the ProseMirror JSON document) rather than an HTML string.

Read-only

readOnly hides the toolbar and disables editing. Prefer it over FormField readonly for this surface.

Accessibility

The label is associated with the editable surface through controlId.
description and errorMessage are linked with aria-describedby.
Toolbar actions are buttons. readOnly removes the toolbar and marks the surface read-only.
When error is true, the surface is marked invalid.

Anatomy

FormField (root)
├── Header — label, optional corner text, required indicator
├── Toolbar — tool buttons (hidden when readOnly)
├── Content — TipTap editable surface
└── Footer — description or error message

Textarea, TextField

API

Prop	Type	Default	Description
defaultValue	string \| RichTextJSON	—	Initial value when v-model is not bound.
v-model	string \| RichTextJSON	—	Document. A string when format="html", JSON otherwise.

Prop	Type	Default	Description
onChange	(value: RichTextValue) => void	—	Called when the document changes.
value	string \| RichTextJSON	—	Controlled document. A string when format="html", JSON otherwise.

RichTextEditor-specific

Prop	Type	Default	Description
classes	RichTextEditorClasses	—	FormField parts plus content, toolbar, and toolbarButton.
customProps	RichTextEditorCustomProps	—	Extra props for content, toolbar, and toolbarButton.
format	"html" \| "json"	"html"	Controlled value shape.
placeholder	string	—	Empty-state hint in the content area.
readOnly	boolean	false	View-only surface. Hides the toolbar.
slots	RichTextEditorSlots	—	FormField slots plus toolbar.
tools	RichTextTool[]	all default tools	Which toolbar actions to show.

Inherited from FormField

Prop	Type	Default	Description
color	FormFieldColor	"primary"	Color applied to the field control, toolbar, and link editor (URL field and Cancel / Apply).
controlId	string	—	Associates labels and helper text with the control. Auto-generated when omitted.
corner	string	—	Secondary label text at the inline end of the header row.
description	string	—	Helper text below the control. Hidden when error and an error message are set, unless showDescriptionOnError.
disabled	boolean	false	Whether the control is disabled.
end	string	—	Inline-end text inside the field (suffix).
endIcon	IconSource	—	Icon at the inline end.
error	boolean	false	Applies invalid styling. Hides description when an error message is shown, unless showDescriptionOnError.
errorIcon	IconSource	"alert"	Icon shown when invalid and showErrorIcon is enabled.
errorMessage	string	—	Error message below the control.
hideErrorMessage	boolean	false	Does not reserve the error row. That row is also omitted while a description is shown.
label	string	—	Primary label text above the control.
readonly	boolean	false	FormField read-only flag. Prefer readOnly for this surface.
required	boolean	false	Shows a red asterisk on the label.
rounded	FormFieldRounded	"md"	Border radius of the field control.
showDescriptionOnError	boolean	false	Keeps the description visible while the field is invalid.
showErrorIcon	boolean	true	Shows an error icon when invalid.
size	FormFieldSize	"md"	Typography and control sizing.
start	string	—	Inline-start text inside the field (prefix).
startIcon	IconSource	—	Icon at the inline start.
variant	FormFieldVariant	"outline"	Visual variant of the field shell.