Customising toolbars

By default, Draftail comes with many options for toolbars:

• A top static toolbar that contains all of the possible formatting, plus a few extra controls.
• A bottom static toolbar for meta information / less used controls.
• A floating toolbar for inline formatting.
• A command palette for commands.

Hiding individual toolbar items

With the default toolbar, items are directly derived from the formats (block, style, etc.) enabled in the editor. The buttons for specific items can be hidden by:

• Not defining a label, or icon for custom formats.
• For built-in formats, setting a label of null

Here is an example, using the default toolbar but with all heading styles hidden as individual buttons, and only present in the custom dropdown:

Disabling the toolbar

It is possible to hide the toolbar by passing null to topToolbar:

Customising toolbars

It’s also possible to provide your own custom component to topToolbar, bottomToolbar or commandToolbar, for example to have a UI that is more adapted to a given use case:

The editor comes with a number of predefined toolbars:

• FloatingToolbar (minimal height).
• BlockToolbar, intended for keyboard and first-time users.
• MetaToolbar, intended to display editor metadata at the bottom of the editor.
• InlineToolbar, which is user-configurable to display either a static or floating toolbar.
• CommandPalette, usable with the commandPalette rendering prop and the commands data prop.

It is also possible to reuse the ToolbarButton and Icon components from Draftail if necessary.

Toolbars with draft-js-plugins

For more advanced use cases, Draft.js plugins offers toolbars for Draft.js editors. Use bottomToolbar to render plugin-supplied controls after the editor.

This ordering avoids a historical initialization issue: affected plugins only set up their editor-state accessors when the editor renders. Controls rendered first can fail with store.getEditorState is not a function. Simply guarding against the missing method can leave the controls one update behind. The example below uses the documented workaround; whether it is required depends on your plugin version. See the plugin initialization discussion.

<DraftailEditor
  plugins={[inlineToolbarPlugin, sideToolbarPlugin]}
  topToolbar={null}
  bottomToolbar={(props) => (
    <>
      <SideToolbar {...props} />
      <InlineToolbar {...props} />
    </>
  )}
/>

Example