5

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.

Balasubramani M
  • 7,742
  • 2
  • 45
  • 47

1 Answers1

6

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>
Gareth Jones
  • 1,241
  • 4
  • 17
  • 38
  • 1
    Excellent. May I know from where you find this documentation? I am eager to know. – Balasubramani M Oct 21 '18 at 08:06
  • @BalasubramaniM Sorry for the late reply! I just found it by exploring the code, the repo, and the documentation of the other plugins :) – Gareth Jones Oct 23 '18 at 18:59
  • I think the docs @GarethJones mentioned, are these ones: https://github.com/draft-js-plugins/draft-js-plugins/blob/98ab509cba2322578d9979da825c6f6eff2c25d1/stories/inline-toolbar-custom-buttons/src/App.js 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? – JC Garcia Nov 19 '18 at 09:17
  • I must admit, the documentation is terrible and the general community support is not there also. I think I will give up with it. – David Thorn Jul 17 '22 at 18:36