draft-js-toolbars v0.0.1

draft-js-toolbars

Plugin that adds composable toolbars to your draft-js-plugins-editor. It contains 2 toolbars, one SideToolbar that follows the cursor on the side of the editor, and one InlineToolbar that follows the selection in the text. It actuallly follows the end of the selections (depending whether you navigate to the right or the left) as I find that more natural then how f.ex. the Facebook Notes app does it by centering the InlineToolbar. Now the InlineToolbar appears where the user is focussed.

Uasge is simple, you can take a look at the example for something working. But you basically wrap the plugin editor with the Toolbars component and tell it what buttons you want to load in which toolbar. There are a bunch of buttons available, but you can also easily create your own using the components in here. It should also adapt depending on whether you use an icon or text.

Import the needed components

import createToolbarsPlugin, {
    BoldButton, ItalicButton, UnderlineButton, LinkButton,

    StyleButton, ImageButton, MoreButton,

    H1Button, H2Button, H3Button, H4Button, H5Button, H6Button,
} from 'draft-js-toolbars';

Create the plugin

const ToolbarsPlugin = createToolbarsPlugin();

Define the different button lists, they need to be of Immutable.List()

const sideToolbarButtons = List([
  {
    button: MoreButton,
    buttons: List([])
  },
  {
    button: ImageButton
  },
  {
    button: StyleButton,
    buttons: List([
      {button: H1Button},
      {button: H2Button},
      {button: H3Button},
      {button: H4Button},
      {button: H5Button},  
      {button: H6Button}
    ])
  }
]);

const inlineToolbarButtons = List([
  {button: BoldButton},
  {button: ItalicButton},
  {button: UnderlineButton},
  {button: LinkButton}
]);

Get the Toolbars component form the plugin

const { Toolbars } = ToolbarsPlugin;

Wrap the plugin editor with the Toolbars component with the needed buttons props and assign the toolbarsPlugin to the plugin editor

<Toolbars
 inlineToolbarButtons={inlineToolbarButtons}
 sideToolbarButtons={sideToolbarButtons}>

<PluginEditor
 plugins={plugins}
 editorState={editorState}
 placeholder="Write your text here..."
 onChange={this.onChange} />

</Toolbars>