feat(sidebar): ability to provide custom sidebar component (closes #85)

docs/overview.md

@@ -47,6 +47,52 @@ ReactDOM.render(
 );
 ```
 
+### Custom Sidebar
+
+You can provide your custom sidebar passing sidebarRendererFn prop
+
+```js
+import React from "react";
+import ReactDOM from "react-dom";
+import {MegadraftEditor, editorStateFromRaw} from "megadraft";
+import CustomSidebar from 'my/sidebar/path';
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {editorState: editorStateFromRaw(null)};
+    this.onChange = ::this.onChange;
+    this.getCustomSidebar = ::this.getCustomSidebar;
+  }
+
+  onChange(editorState) {
+    this.setState({editorState});
+  }
+  /**
+   * @param props.plugins Array of valid plugins
+   * @param props.editorState DraftJS editorState object
+   * @param props.onChange You must use this handler for change events
+   */
+  getCustomSidebar(props) {
+    return <CustomSidebar {...props} />
+  }
+  render() {
+    return (
+      <MegadraftEditor
+        editorState={this.state.editorState}
+        onChange={this.onChange}
+        sidebarRendererFn={this.getCustomSidebar}/>
+    )
+  }
+}
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('container')
+);
+
+```
+
 Then link the main css (dist/css/megadraft.css) on your page, you can use the Sass
 source on your build, if you wish.
 
@@ -61,3 +107,5 @@ source on your build, if you wish.
 - `plugins` List of plugins to be used by the editor
 - `editorState` DraftJS editor state
 - `onChange` Function fired on editor state changes
+- `sidebarRendererFn` (optional) it is called to render a custom sidebar. This method must
+return a valid React element.

src/components/MegadraftEditor.js

@@ -39,6 +39,7 @@ export default class MegadraftEditor extends Component {
     this.pluginsByType = this.getPluginsByType();
 
     this.keyBindings = this.props.keyBindings || [];
+
   }
 
   getValidPlugins() {
@@ -152,6 +153,14 @@ export default class MegadraftEditor extends Component {
     }
   }
 
+  renderSidebar(props) {
+    const { sidebarRendererFn } = this.props;
+    if(typeof sidebarRendererFn === "function") {
+      return sidebarRendererFn(props);
+    }
+    return <Sidebar {...props} />;
+  }
+
   render() {
     const {editorState, stripPastedStyles, spellCheck} = this.props;
     const plugins = this.plugins;
@@ -162,11 +171,11 @@ export default class MegadraftEditor extends Component {
           className="megadraft-editor"
           id="megadraft-editor"
           ref="editor">
-          <Sidebar
-            plugins={plugins}
-            editorState={editorState}
-            readOnly={this.state.readOnly}
-            onChange={this.onChange} />
+          {this.renderSidebar({
+            plugins,
+            editorState,
+            onChange: this.onChange
+          })}
           <Editor
             readOnly={this.state.readOnly}
             plugins={plugins}

tests/components/MegadraftEditor_test.js

@@ -204,4 +204,43 @@ describe("MegadraftEditor Component", () => {
       "Plugin: Missing `type` field. Details: "
     );
   });
+
+  it("renders default sidebar if sidebarRendererFn not provided", function() {
+    const sidebar = this.wrapper.find(Sidebar);
+    expect(sidebar).to.have.length(1);
+  });
+
+  it("calls sidebarRendererFn if it's provided", function() {
+    const renderCustomSidebar = sinon.spy();
+    mount(
+      <MegadraftEditor
+        editorState={this.editorState}
+        onChange={this.onChange}
+        sidebarRendererFn={renderCustomSidebar} />
+    );
+    expect(renderCustomSidebar.called).to.be.true;
+  });
+
+  it("renders custom sidebar if sidebarRendererFn is provided", function() {
+    class MyCustomSidebar extends React.Component {
+      render() {
+        return (
+          <div>
+            <span>My custom Sidebar</span>
+          </div>
+        );
+      }
+    }
+    const renderCustomSidebar = function(plugins, editorState) {
+      return <MyCustomSidebar plugins={plugins} editorState={editorState}/>;
+    };
+    const wrapper = mount(
+      <MegadraftEditor
+        editorState={this.editorState}
+        onChange={this.onChange}
+        sidebarRendererFn={renderCustomSidebar} />
+    );
+    const sidebar = wrapper.find(MyCustomSidebar);
+    expect(sidebar).to.have.length(1);
+  });
 });