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.

Paella

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>

Indirection

Excellent. May I know from where you find this documentation? I am eager to know. – Paella

@BalasubramaniM Sorry for the late reply! I just found it by exploring the code, the repo, and the documentation of the other plugins :) – Indirection

I think the docs @GarethJones mentioned, are these ones: github.com/draft-js-plugins/draft-js-plugins/blob/… Altough, I have a lot of troubles to create customise it and style it at the same time, following the same exact stories. Anyone with the same problem? – Beanpole

I must admit, the documentation is terrible and the general community support is not there also. I think I will give up with it. – Organelle