title: custom button in inline toolbar that calls custom function
body: <p>I want to combine the <a href="https://www.draft-js-plugins.com/plugin/inline-toolbar" rel="nofollow noreferrer">inline toolbar</a> with the example from <a href="https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/link/link.html" rel="nofollow noreferrer">draft.js</a> to insert a link into the editor.</p>
  <p>Thanks to the <a href="https://github.com/draft-js-plugins/draft-js-plugins/blob/master/FAQ.md#how-can-i-use-custom-decorators-with-the-plugin-editor" rel="nofollow noreferrer">draft.js plugin FAQ</a> I am able to add a decorator to the draft-js-plugin editor which inserts a link on a button click.</p>
  <p>Now I want to put this button inside the inline-toolbar from draft-js-plugins. That doesn't seem to work. This is what I've done so far:</p>
  <h2>Editor.jsx</h2>
  <pre class="lang-js prettyprint-override"><code>    ...
      const inlineToolbarPlugin = createInlineToolbarPlugin({
        theme: {buttonStyles, toolbarStyles},
        structure: [..., LinkButton]
      });
      const {InlineToolbar} = inlineToolbarPlugin;
      const plugins = [inlineToolbarPlugin];
  
      class RMSEditor extends Component {
        ...
      render() {
          return (
            &lt;div&gt;
              &lt;div className={editorStyles.editor}&gt;
                &lt;Editor
                  editorState={this.state.editorState}
                  onChange={this.onChange}
                  plugins={plugins}
                  decorators={this.decorator}
                  ref={(element) =&gt; {
                    this.editor = element;
                  }}
                  readOnly={this.state.readOnly}
                /&gt;
                &lt;InlineToolbar /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          );
      }
  </code></pre>
  <h2>LinkButton.jsx</h2>
  <pre class="lang-js prettyprint-override"><code>
      import classNames from &quot;classnames/bind&quot;;
      import React from &quot;react&quot;;
      import {Glyphicon} from &quot;react-bootstrap&quot;;
      import styles from &quot;./buttonStyles.less&quot;;
      
      const cx = classNames.bind(styles);
      
      const LinkButton = () =&gt; {
      
        return (
          &lt;div className={cx('buttonWrapper')} onClick={(e) =&gt; {
            console.log(&quot;Div&quot;, e);
          }}&gt;
            &lt;button className={cx('button')} onClick={(e) =&gt; {
              console.log(&quot;Button&quot;, e);
            }}&gt;&lt;Glyphicon glyph=&quot;link&quot;/&gt;&lt;/button&gt;
          &lt;/div&gt;
        )
      };
      
      export default LinkButton;
  </code></pre>
  <p>This way, I have managed to get a Button that shows up in the inline toolbar. But when I clicked on that button, nothing happens. I expacted that one of the <code>onClick</code> handlers will fire but that is not the case.</p>
  <h2>Full source code</h2>
  <p>Here you can find my full sourcecode as I don't want to put only the relevant parts directly under the questions. Please notice that the code will not work in the <code>run snipped</code> thingy as I have no clue how to get it to work there without setting up the hole wabpack thing.</p>
  <h3>MentionsEditor.jsx</h3>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {CompositeDecorator, EditorState, RichUtils} from "draft-js";
  import {BoldButton, CodeButton, ItalicButton, UnderlineButton, UnorderedListButton} from "draft-js-buttons";
  
  import createInlineToolbarPlugin from "draft-js-inline-toolbar-plugin";
  import {defaultSuggestionsFilter} from "draft-js-mention-plugin"; // eslint-disable-line import/no-unresolved
  import Editor from "draft-js-plugins-editor"; // eslint-disable-line import/no-unresolved
  import React, {Component, PropTypes} from "react";
  import {Button} from "react-bootstrap";
  import buttonStyles from "./buttonStyles";
  import editorStyles from "./editorStyles";
  import LinkButton from "./InsertLinkButton";
  import toolbarStyles from "./toolbarStyles";
  
  
  const inlineToolbarPlugin = createInlineToolbarPlugin({
    theme: {buttonStyles, toolbarStyles},
    structure: [BoldButton, ItalicButton, UnderlineButton, CodeButton, UnorderedListButton, LinkButton]
  });
  const {InlineToolbar} = inlineToolbarPlugin;
  const plugins = [inlineToolbarPlugin];
  
  class RMSEditor extends Component {
  
    constructor(props) {
      super(props);
    }
  
    decorator = [
      {
        strategy: function findLinkEntities(contentBlock, callback, contentState) {
          contentBlock.findEntityRanges(
            (character) =&gt; {
              const entityKey = character.getEntity();
              return (
                entityKey !== null &amp;&amp;
                contentState.getEntity(entityKey).getType() === 'LINK'
              );
            },
            callback
          );
        },
        component: function (props) {
          const {url} = props.contentState.getEntity(props.entityKey).getData();
          return (
            &lt;a href={url}&gt;
              {props.children}
            &lt;/a&gt;
          );
        }
      }
    ];
  
  
    state = {
      editorState: EditorState.createEmpty(),
    };
  
    onChange = (editorState) =&gt; {
      this.setState({
        editorState,
      });
    };
  
    editorLink = function (props) {
      const {url} = props.contentState.getEntity(props.entityKey).getData();
      return (
        &lt;a href={url} style={{color: "blue"}}&gt;
          {props.children}
        &lt;/a&gt;
      );
    };
  
    focus = () =&gt; {
      this.editor.focus();
    };
  
    insertLink = (e) =&gt; {
      e.preventDefault();
      const {editorState} = this.state;
      const contentState = editorState.getCurrentContent();
      const contentStateWithEntity = contentState.createEntity(
        'LINK',
        'MUTABLE',
        {url: "https://example.com"}
      );
      const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
      const newEditorState = EditorState.set(editorState, {currentContent: contentStateWithEntity});
  
      this.setState({
        editorState: RichUtils.toggleLink(
          newEditorState,
          newEditorState.getSelection(),
          entityKey
        )
      }, () =&gt; {
        setTimeout(() =&gt; {
          this.focus()
        }, 0);
      });
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;Button onClick={this.insertLink}&gt;insert URL&lt;/Button&gt;
          &lt;div className={editorStyles.editor}&gt;
            &lt;Editor
              editorState={this.state.editorState}
              onChange={this.onChange}
              plugins={plugins}
              decorators={this.decorator}
              ref={(element) =&gt; {
                this.editor = element;
              }}
              readOnly={this.state.readOnly}
            /&gt;
            &lt;InlineToolbar /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  RMSEditor.propTypes = {
    stakeholder: PropTypes.object.isRequired
  };
  
  export default RMSEditor;</code></pre>
  </div>
  </div>
  </p>
  <h3>LinkButton.jsx</h3>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import classNames from "classnames/bind";
  import React from "react";
  import {Glyphicon} from "react-bootstrap";
  import styles from "./buttonStyles.less";
  
  const cx = classNames.bind(styles);
  
  const LinkButton = () =&gt; {
  
    return (
      &lt;div className={cx('buttonWrapper')} onClick={(e) =&gt; {
        console.log("Div", e);
      }}&gt;
        &lt;button className={cx('button')} onClick={(e) =&gt; {
          console.log("Button", e);
        }}&gt;&lt;Glyphicon glyph="link"/&gt;&lt;/button&gt;
      &lt;/div&gt;
    )
  };
  
  export default LinkButton;</code></pre>
  </div>
  </div>
  </p>