Arbitrary controls

Those extensions require a good understanding of the Draft.js API.

Draftail also has an API to add arbitrary controls in the toolbar, via the controls prop. This prop takes an array of React components, which will be given a getEditorState function and the onChange handler as props.

getEditorState can be used to retrieve and read the full Draft.js EditorState.
onChange can be called with a new EditorState.

The controls can import the Icon and ToolbarButton components from Draftail if necessary.

Examples

Controls can be used for a wide range of use cases:

Generating metrics based on the whole content of the editor
Applying one-off transformations to the editor (e.g. inserting content from third-party data sources, clear formatting).