React Draft.js toolbar plugin not showing - reactjs

Question

I've followed the docs on installing the inline and static toolbar plugins, but they seems to be nonexistent.
I'm using the Create React App CLI.
The component:
import React from 'react';
import {EditorState} from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
import createToolbarPlugin from 'draft-js-static-toolbar-plugin';
import 'draft-js/dist/Draft.css';
import 'draft-js-inline-toolbar-plugin/lib/plugin.css';
import 'draft-js-static-toolbar-plugin/lib/plugin.css';
const inlineToolbarPlugin = createInlineToolbarPlugin({
//I read somewhere that this plug-in needs this structure passed to it,
//but the example in the docs did not use it, and they are undefined anyway
// structure: [
// BoldButton,
// ItalicButton,
// UnderlineButton,
// CodeButton,
// Separator,
// ],
});
const toolbarPlugin = createToolbarPlugin();
class TextEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = (editorState) => this.setState({editorState});
}
render() {
return (
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={[inlineToolbarPlugin, toolbarPlugin]}
/>
);
}
}
export default TextEditor;
That component is then passed to another component that just renders the editor and does nothing else.
I must be missing something, or not giving the plugins what they need, I just don't know what. I'm guessing the code I have is insufficient to start adding plugins in the first place?

Answer 1

You can define custom buttons to perform the desired operations like below:
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={[inlineToolbarPlugin, toolbarPlugin]}
/>
<button onClick={this._onBoldClick.bind(this)}>Bold</button> //add button to make bold
And now you can write a code to make bold in _onBoldClick method as follows:
_onBoldClick() {
this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'));
}
You can take reference from the docs.

Answer 2

You need to import the buttons before you can create the toolbar
import {
ItalicButton,
BoldButton,
UnderlineButton,
CodeButton
} from "draft-js-buttons";
Also, you need to include the toolbar in your render function
const { Toolbar } = inlineToolbarPlugin;
render() {
return (
<div>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={[inlineToolbarPlugin, toolbarPlugin]}
/>
<Toolbar />
</div>
);