draft-js-inline-toolbar-plugin_src_index.js

import decorateComponentWithProps from 'decorate-component-with-props';
import createStore from './utils/createStore';
import connectToStore from 'draft-js-editor-plugin';
import Toolbar from './components/Toolbar';
import ItalicButton from './components/ItalicButton';
import BoldButton from './components/BoldButton';
import CodeButton from './components/CodeButton';
import UnderlineButton from './components/UnderlineButton';
import HeaderOneButton from './components/HeaderOneButton';
import HeaderTwoButton from './components/HeaderTwoButton';
import HeaderThreeButton from './components/HeaderThreeButton';
import UnorderedListButton from './components/UnorderedListButton';
import OrderedListButton from './components/OrderedListButton';
import BlockquoteButton from './components/BlockquoteButton';
import CodeBlockButton from './components/CodeBlockButton';
import Separator from './components/Separator';

const createInlineToolbarPlugin = (config = {}) => {
  const {
    structure = [
      BoldButton,
      ItalicButton,
      UnderlineButton,
      CodeButton,
      // Separator,
      // HeaderOneButton,
      // HeaderTwoButton,
      // HeaderThreeButton,
      // UnorderedListButton,
      // OrderedListButton,
      // BlockquoteButton,
      // CodeBlockButton,
    ]
  } = config;

  const toolbarProps = {
    structure,
  };

  return {
    initialize: ({ getEditorState, setEditorState }) => {
      store.updateItem('getEditorState', getEditorState);
      store.updateItem('setEditorState', setEditorState);
    },
    // Re-Render the text-toolbar on selection change
    onChange: (editorState) => {
      const selection = editorState.getSelection();
      if (selection.getHasFocus() && !selection.isCollapsed()) {
        store.updateItem('isVisible', true);
      } else {
        store.updateItem('isVisible', false);
      }
      return editorState;
    },
    // get store from context && inject into component
    InlineToolbar: connectToStore(decorateComponentWithProps(Toolbar, toolbarProps)),
  };
};

export default createInlineToolbarPlugin;

export {
  ItalicButton,
  BoldButton,
  CodeButton,
  UnderlineButton,
  HeaderOneButton,
  HeaderTwoButton,
  HeaderThreeButton,
  UnorderedListButton,
  OrderedListButton,
  BlockquoteButton,
  CodeBlockButton,
  Separator,
};

SimpleInlineToolbarEditor.js

import React, { Component } from 'react';
import Editor, { createEditorStateWithText, PluginProvider } from 'draft-js-plugins-editor'; // eslint-disable-line import/no-unresolved
import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin'; // eslint-disable-line import/no-unresolved
import editorStyles from './editorStyles.css';

const inlineToolbarPlugin = createInlineToolbarPlugin();
const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [inlineToolbarPlugin];
const text = 'In this editor a toolbar shows up once you select part of the text …';

export default class SimpleInlineToolbarEditor extends Component {

  state = {
    editorState: createEditorStateWithText(text),
  };

  onChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  focus = () => {
    this.editor.focus();
  };

  render() {
    return (
      //creates the store && inject it into context
      <PluginProvider>
        <div className={editorStyles.editor} onClick={this.focus}>
          <Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
            plugins={plugins}
            ref={(element) => { this.editor = element; }}
          />
          <InlineToolbar />
        </div>
      </PluginProvider>
    );
  }
}