Rich Text Editor

Beta FeatureThis feature is currently in beta, and needs to be imported from @servicetitan/anvil2/beta.While we hope to minimize breaking changes, they may occur due to feedback we receive or other improvements. These will always be documented in the changelog and communicated in Slack.Please reach out in the #ask-designsystem channel with any questions or feedback!

Implementation
RichTextEditor Props

Live Component Playground

Common Examples

Basic Usage

A minimal editor with the default toolbar — text formatting and alignment enabled, everything else off.

Error and Validation

Pass an error message string to error to display validation feedback below the editor.

Read-only

Pass disabled to prevent editing. The toolbar remains visible but all controls are disabled.

With Mentions

Enable allowMention and supply mentionOptions to support @mention typeahead. Use onMentionInputChange to filter options as the user types, and renderMentionHoverContent to show a custom hover card over inserted mentions.

With Media

Enable allowMedia with a required onImageUpload handler to support image uploads and YouTube embeds.

All Features

All toolbar sections enabled together: formatting, alignment, lists, checklist, code, blockquote, link, mentions, drag-and-drop, and media.

Controlled vs Uncontrolled

RichTextEditor supports both controlled and uncontrolled modes.

Uncontrolled — Pass defaultValue to set initial HTML content. The editor manages its own internal state.
Controlled — Pass value and onChange to manage content externally. onChange fires on every change with the serialized HTML string.

Use onJsonChange when you need access to TipTap’s JSON representation for more granular content handling.Each toolbar section is opt-in via a corresponding allow* prop. Text formatting and alignment are enabled by default; all other sections are disabled unless explicitly enabled.

Feature	Prop	Default
Text type, font size, bold, italic, underline, strikethrough	`allowTextFormat`	`true`
Left, center, right, justify alignment	`allowTextAlignment`	`true`
Ordered and unordered lists, indent controls	`allowLists`	`false`
Checklist (task list)	`allowChecklist`	`false`
Inline code	`allowCode`	`false`
Blockquote	`allowBlockquote`	`false`
Link insert and remove	`allowLink`	`false`
@mention typeahead	`allowMention`	`false`
Drag handle for block reordering	`allowDragDrop`	`false`
Image upload and YouTube embedding	`allowMedia`	`false`

Mentions

Enable @mention support with allowMention. Supply mentionOptions as an array of { id, label } objects and use onMentionInputChange to filter options dynamically as the user types.Customize the dropdown item appearance with renderMentionOption and the hover card shown over inserted mentions with renderMentionHoverContent.

Media

Enable image and YouTube embedding with allowMedia. When allowMedia is true, onImageUpload is required. The callback receives the selected File[] and an onComplete callback — invoke it with the resolved image URLs once upload finishes.

<RichTextEditor
  allowMedia
  onImageUpload={(files, onComplete) => {
    uploadFiles(files).then((urls) => onComplete(urls));
  }}
/>

Control accepted file types with allowedMimeTypes. When omitted, the editor defaults to common image formats.

import { RichTextEditor } from "@servicetitan/anvil2/beta";

<RichTextEditor label="Notes" />

`RichTextEditor` Props

The RichTextEditor accepts the following props. It also extends LayoutUtilProps for spacing and sizing utilities.

allowBlockquote

boolean

default:"false"

Enables the blockquote toolbar button.

allowChecklist

boolean

default:"false"

Enables the checklist (task list) toolbar button.

allowCode

boolean

default:"false"

Enables the inline code toolbar button.

allowDragDrop

boolean

default:"false"

Enables a drag handle for reordering content blocks.

allowedMimeTypes

`image/${string}`[]

MIME types accepted by the file picker and paste/drop handler when allowMedia is true. Defaults to common image formats when omitted.

allowLink

boolean

default:"false"

Enables the link insert and remove toolbar button.

allowMedia

boolean

default:"false"

Enables the Insert dropdown with Image and YouTube options. When true, onImageUpload is required.

allowMention

boolean

default:"false"

Enables the @mention toolbar button and typeahead dropdown. Requires mentionOptions to populate the dropdown.

allowTextAlignment

boolean

default:"true"

Enables the text alignment toolbar section: left, center, right, and justify.

allowTextFormat

boolean

default:"true"

Enables the text formatting toolbar section: text type dropdown, font size, bold, italic, underline, and strikethrough.

defaultValue

string

Initial content for uncontrolled mode. Accepts an HTML string (e.g., "Hello world") or a plain string, which the editor wraps in a  tag.

description

ReactNode

Description text displayed below the editor.

disabled

boolean

default:"false"

Disables the editor and all toolbar controls.

error

boolean | string | string[]

Error state. Pass true for error styling only, or a string or string array to display error messages below the editor.

hint

ReactNode

Hint text displayed below the editor.

string

HTML id applied to the editor’s contenteditable element.

label

ReactNode

Label for the editor field.

labelProps

FieldLabelProps

Additional props passed to the label element.

mentionOptions

RichTextEditorMentionOption[]

Options displayed in the @mention typeahead dropdown. Each option requires an id and label.

moreInfo

ReactNode

Additional info content rendered alongside the label, typically used for tooltips or help text.

onChange

(html: string) => void

Callback fired with the serialized HTML string on each content change.

onImageUpload

(files: File[], onComplete: (srcs: string[]) => void) => void

Required when allowMedia is true. Called when the user selects, pastes, or drops image files. Invoke onComplete with the resolved image URLs once upload finishes.

onJsonChange

(json: JSONContent) => void

Callback fired with the TipTap JSON representation on each content change.

onMentionInputChange

(query: string) => void

Fired when the user types after @. Use this to filter or async-load mentionOptions.

placeholder

string

Placeholder text shown when the editor is empty.

renderMentionHoverContent

(option: RichTextEditorMentionOption) => ReactNode

Custom render function for the hover card shown when hovering over an inserted @mention.

renderMentionOption

(option: RichTextEditorMentionOption) => ReactNode

Custom render function for each option row in the @mention typeahead dropdown.

required

boolean

Marks the field as required and adds a visual indicator to the label.

value

string

Controlled HTML content. Use with onChange to update the value on each change.

`RichTextEditorMentionOption` Type

A single option displayed in the @mention typeahead dropdown.

type RichTextEditorMentionOption = {
  id: string;
  label: string;
};

string

required

Unique identifier for the mention option, stored as an attribute on the inserted mention node.

label

string

required

Display name shown in the @mention dropdown and rendered inside the inserted mention node.

Anvil2 Web

Resources

Rich Text Editor – Code

Live Component Playground

Common Examples

Basic Usage

Error and Validation

Read-only

With Mentions

With Media

All Features

Controlled vs Uncontrolled

Mentions

Media

`RichTextEditor` Props

`RichTextEditorMentionOption` Type

Anvil2 Web

Resources

Documentation Index

​Live Component Playground

​Common Examples

​Basic Usage

​Error and Validation

​Read-only

​With Mentions

​With Media

​All Features

​Controlled vs Uncontrolled

​Toolbar Features

​Mentions

​Media

​RichTextEditor Props

​RichTextEditorMentionOption Type

Live Component Playground

Common Examples

Basic Usage

Error and Validation

Read-only

With Mentions

With Media

All Features

Controlled vs Uncontrolled

Toolbar Features

Mentions

Media

`RichTextEditor` Props

`RichTextEditorMentionOption` Type