Toolbar

Basic Usage

Toolbar buttons are automatically populated based on the provided extensions. However, you can prevent certain extensions from appearing in the toolbar.

Bold.configure({
  // This extension will not appear in the toolbar
  showInToolbar: false,
});

You can completely hide the toolbar by setting the hideToolbar prop to true.

<TiptapEditor hideToolbar extensions={extensions} />

While the default toolbar automatically displays buttons based on your extensions, you can completely customize the toolbar rendering with toolbar prop.

<TiptapEditor
  extensions={extensions}
  toolbar={{
    render: (
      toolbarRenderParams,
      toolbarItems,
      domElements,
      containerWrapper
    ) => {
      // Your custom toolbar rendering logic here
      return (
        <div className="my-custom-toolbar">
          {/* Custom toolbar implementation */}
        </div>
      );
    },
  }}
/>

Props

The render function

Prop	Type	Default	Required
`render`	`function`	No default value	No default value

Render Function Parameters

Parameters received by the custom render function.

Prop	Type	Default	Required
`toolbarRenderParams`	`ToolbarRenderParams`	No default value	No default value
`toolbarItems`	`ToolbarItem[]`	No default value	No default value
`domElements`	`React.JSX.Element[]`	No default value	No default value
`containerWrapper`	`function`	No default value	No default value

Parameters passed to the toolbar render function.

Prop	Type	Default	Required
`editor`	`interface`	No default value	`true`
`disabled`	`boolean`	No default value	No default value

Structure of each toolbar item.

Prop	Type	Default	Required
`button`	`ToolbarButtonProps`	No default value	`true`
`showDividerAfter`	`boolean`	No default value	No default value
`showDividerBefore`	`boolean`	No default value	No default value
`extensionType`	`string`	No default value	`true`
`extensionName`	`string`	No default value	`true`

Represents the configuration for a toolbar button.

Prop	Type	Default	Required
`toolbarComponent`	`React.ComponentType<any>`	No default value	`true`
`toolbarComponentProps`	`ToolbarButtonComponentProps`	No default value	No default value

Properties passed to a toolbar button component.

Prop	Type	Default	Required
`action`	`function`	No default value	No default value
`isActive`	`function`	No default value	No default value
`tooltip`	`string`	No default value	No default value
`shortcutKeys`	`string[]`	No default value	No default value
`disabled`	`boolean`	No default value	No default value
`[key: string]`	`any`	No default value	No default value

Feza

Toolbar

Basic Usage

Props

The render function

Render Function Parameters

On this page