draft-js-toolbars

Toolbars for draft-js-plugin-editor

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
draft-js-toolbars
0.0.16 years ago6 years agoMinified + gzip package size for draft-js-toolbars in KB

Readme

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>