Custom Inline Toolbar in draft-js-plugins is not working

Question

Custom Inline Toolbar, as prescribed in their documentation is not working as expected. It keeps showing the default Inline Toolbar, even though custom buttons are added.

My code goes below.

import Editor from "draft-js-plugins-editor";
import createInlineToolbarPlugin from "draft-js-inline-toolbar-plugin";
import { ItalicButton, BoldButton, UnderlineButton } from "draft-js-buttons";
import "draft-js-inline-toolbar-plugin/lib/plugin.css";
import createLinkPlugin from "draft-js-anchor-plugin";

const linkPlugin = createLinkPlugin(); // Adding link button.

const inlineToolbarPlugin = createInlineToolbarPlugin(
    BoldButton,
    ItalicButton,
    UnderlineButton,
    linkPlugin.LinkButton
);

const { InlineToolbar } = inlineToolbarPlugin;

<Editor
    editorState={this.state.editorState}
    onChange={this.onChange}
    plugins={plugins}
    ref={element => {
        this.editor = element;
    }}
/>
<InlineToolbar />

Versions as follows.

• "react": "^16.4.1"
• draft-js-plugins-editor": "^2.1.1"

Thanks in advance.

Answer 1

Firstly, in the example they actually pass an object as the parameter, like so:

const inlineToolbarPlugin = createInlineToolbarPlugin({
  structure: [
    BoldButton,
    ItalicButton,
    UnderlineButton,
    CodeButton,
    Separator,
    HeadlinesButton,
    UnorderedListButton,
    OrderedListButton,
    BlockquoteButton,
    CodeBlockButton
  ]
});

However, since the time the documentation was written, the plugin API has changed to now take custom buttons as children, meaning that in order to add custom buttons, you should use the following code:

<InlineToolbar>
    {
        externalProps => (
            <>
                <ItalicButton {...externalProps} />
                <BoldButton {...externalProps} />
                <UnderlineButton {...externalProps} />
                <UnorderedListButton {...externalProps} />
                <HeadlineOneButton {...externalProps} />
                <HeadlineTwoButton {...externalProps} />
                <HeadlineThreeButton {...externalProps} />
                <OrderedListButton {...externalProps} />
            </>
        )
    }
</InlineToolbar>