EditorToolbar Reference

EditorToolbar Reference

EditorToolbar is the React Native toolbar component for a layout outside RichTextEditor. For the integrated native keyboard toolbar or inline placement, configure RichTextEditor instead. See Toolbar Setup for the recommended wiring.

EditorToolbarProps

Prop	Status	Behavior
activeState: ReadonlyActiveState	Required	Current marks, nodes, commands, allowed marks, and insertable nodes.
historyState: HistoryState	Required	Current canUndo and canRedo values.
onToggleBold, onToggleItalic, onToggleUnderline, onToggleStrike	Required	Fallback handlers for their four standard mark buttons.
onUndo, onRedo	Required	History handlers.
onToggleBulletList, onToggleBlockquote, onToggleOrderedList	Optional	Fallback handlers for the matching standard items.
onIndentList, onOutdentList	Optional	Fallback list-indent handlers.
onInsertHorizontalRule, onInsertLineBreak	Optional	Fallback node-insertion handlers.
onToggleMark(mark)	Optional	Generic mark handler. It takes precedence over the standard mark fallbacks.
onToggleListType(listType)	Optional	Generic list handler. It takes precedence over list fallbacks.
onToggleHeading(level)	Optional	Required for heading items to be actionable.
onInsertNodeType(nodeType)	Optional	Generic node handler. It takes precedence over standard node fallbacks.
onRunCommand(command)	Optional	Generic command handler. It takes precedence over command fallbacks.
onToolbarAction(key)	Optional	Handler for application action items.
onRequestLink, onRequestImage	Optional	Handlers needed for first-class link and image items.
toolbarItems	Optional; DEFAULT_EDITOR_TOOLBAR_ITEMS	Ordered controls to display.
theme	Optional	EditorToolbarTheme chrome overrides.
showTopBorder	Optional; theme value, otherwise true	Controls the standalone toolbar's top separator.
preserveEditorFocus	Optional; true	Publishes toolbar/menu frames so an associated editor can preserve focus during interaction. Set false only for unrelated or fully app-managed focus.

Buttons are omitted if they have no resolvable handler. A resolved button can still be disabled by activeState: marks need allowedMarks, nodes need insertableNodes, structural controls need commands, and history controls need historyState.

Item union

EditorToolbarItem is a leaf item, a group, or a separator. A leaf and a group can set placement to start, scroll, or end; omitted means scroll. Separators can also set placement and an optional key.

EditorToolbarLeafItem variant	Required fields	Effect
mark	mark, label, icon	Toggle an arbitrary schema mark.
link	label, icon	Opens onRequestLink and reflects the link mark state.
image	label, icon	Opens onRequestImage when image insertion is allowed.
heading	level, label, icon	Toggle h1 through h6.
blockquote	label, icon	Toggle blockquote.
list	listType, label, icon	Toggle a snake_case or legacy camelCase bullet/ordered list.
command	command, label, icon	Run indentList, outdentList, undo, or redo.
node	nodeType, label, icon	Insert a schema node.
action	key, label, icon	Invoke application onToolbarAction. Optional isActive and isDisabled control presentation.

Every leaf may also have key, placement, and buttonStyle. EditorToolbarGroupChildItem is exactly EditorToolbarLeafItem: groups cannot nest groups or separators.

EditorToolbarGroupItem has type group, a required key, label, icon, items, and optional presentation, placement, and buttonStyle for the group button.

EditorToolbarGroupPresentation	Behavior
expand	Default. Pressing the group expands its action-resolvable child buttons into the toolbar.
menu	Opens a menu containing its action-resolvable child buttons.

The group is active if any child is active or it is open; it is disabled only when every child is disabled. A child placement overrides the group placement when an expand group renders that child.

On iOS, menu groups use a vertical menu anchored to the group button. Pressing the same group closes it, while pressing another group switches menus.

Built-in values and default items

Export	Values
EditorToolbarListType	bullet_list, ordered_list, bulletList, orderedList
EditorToolbarHeadingLevel	1, 2, 3, 4, 5, 6
EditorToolbarCommand	indentList, outdentList, undo, redo
DEFAULT_EDITOR_TOOLBAR_ITEMS	bold, italic, underline, strike, blockquote; separator; bullet_list, ordered_list, indentList, outdentList, hard_break, horizontal_rule; separator; undo, redo

DEFAULT_EDITOR_TOOLBAR_ITEMS is readonly, targets defaultSchema's snake_case node names, and contains no link, image, or heading items. The camelCase list union values remain available with tiptapCompatibleSchema; custom node items always use the exact schema node name.

Per-button style

EditorToolbarButtonStyle can be set on every leaf and group. Its fields override EditorToolbarTheme for that button on the standalone React toolbar and native iOS/Android keyboard toolbars.

Field	State / use
iconSize	Icon size in layout units.
color	Idle icon color.
backgroundColor	Idle fill.
activeColor	Active icon color.
disabledColor	Disabled icon color.
activeBackgroundColor	Active fill.
disabledBackgroundColor	Disabled fill.
borderRadius	Button corner radius.

Omitted per-button fields fall back independently to theme, then to the platform or React toolbar defaults. If no disabled background is supplied, a disabled active button retains its active fill and a disabled idle button retains its idle fill; the disabled icon color still applies.

Icons

EditorToolbarIcon is serializable so it can cross to the native keyboard toolbar.

Variant	Shape	Behavior
default	type: default; id: EditorToolbarDefaultIconId	Package-supplied cross-platform icon.
glyph	type: glyph; text: string	Literal glyph fallback.
platform	type: platform; ios?, android?, fallbackText?	iOS uses EditorToolbarSFSymbolIcon (type sfSymbol; name); Android uses EditorToolbarMaterialIcon (type material; name); fallbackText is used when no matching mapping resolves.

EditorToolbarDefaultIconId values are bold, italic, underline, strike, link, image, h1, h2, h3, h4, h5, h6, blockquote, bulletList, orderedList, indentList, outdentList, lineBreak, horizontalRule, undo, and redo.

Native editor integration

For RichTextEditor, use toolbarItems plus its request callbacks. keyboard placement renders the native toolbar on iOS and Android; inline placement uses this React component. The inline editor supplies preserveEditorFocus false because it owns the focus-frame relationship itself.

Related pages

• Toolbar Setup
• RichTextEditor Reference
• EditorTheme Reference
• Links and Images