Skip to Content
Core ConceptsToolbar System

Toolbar System

toolbarLayout prop

Pass an ordered array of plugin IDs to control which buttons appear and in what order:

<RichTextEditor
  plugins={plugins}
  toolbarLayout={['bold', 'italic', '|', 'heading', '|', 'undo', 'redo']}
/>
  • Items not listed are hidden
  • '|' inserts a visual separator
  • If toolbarLayout is empty ([]), all registered toolbar items appear in registration order

ToolbarItem interface

interface ToolbarItem {
  id: string                                  // must match plugin.name (or be unique)
  icon?: string                               // fallback text/emoji
  iconHtml?: string                           // raw SVG string (preferred)
  label?: string                              // text label shown next to icon
  tooltip?: string                            // hover tooltip
  command: Command                            // ProseMirror command
  isActive?: (state: EditorState) => boolean // active/highlighted state
  type?: 'button' | 'dropdown'               // dropdown renders submenu
  children?: ToolbarItem[]                   // submenu items (for dropdowns)
}
{
  id: 'heading',
  type: 'dropdown',
  icon: 'H',
  tooltip: 'Heading',
  command: () => false, // parent doesn't execute
  children: [
    { id: 'heading-1', label: 'H1', command: setHeading(schema, 1) },
    { id: 'heading-2', label: 'H2', command: setHeading(schema, 2) },
  ],
}

pluginOptions

Some plugins accept runtime options via the pluginOptions prop:

<RichTextEditor
  plugins={plugins}
  pluginOptions={{
    image: { uploadUrl: '/api/upload', maxSizeMb: 5 },
  }}
/>

Options are forwarded to getToolbarItems(schema, options) at render time.

Plugin SystemAlignment