Add option to hide link and block type dropdown (sstur#108)

* Add ability to hide block type dropdown and link buttons

* Update readme with toolbar config options

* Toolbar config: display groups

Author: zackify

README.md

@@ -69,6 +69,8 @@ render() {
   // Supported inline styles: https://github.com/facebook/draft-js/blob/master/docs/Advanced-Topics-Inline-Styles.md
   // Supported block types: https://github.com/facebook/draft-js/blob/master/docs/Advanced-Topics-Custom-Block-Render.md#draft-default-block-render-map
   const toolbarConfig = {
+    // Optionally specify the groups to display (displayed in the order listed).
+    display: ['INLINE_STYLE_BUTTONS', 'BLOCK_TYPE_DROPDOWN', 'LINK_BUTTONS', 'BLOCK_TYPE_BUTTONS', 'HISTORY_BUTTONS'],
     INLINE_STYLE_BUTTONS: [
       {label: 'Bold', style: 'BOLD', className: 'custom-css-class'},
       {label: 'Italic', style: 'ITALIC'},

src/lib/EditorToolbar.js

@@ -59,14 +59,33 @@ export default class EditorToolbar extends Component {
   }
 
   render() {
-    const {className, toolbarConfig} = this.props;
+    let {className, toolbarConfig} = this.props;
+    if (toolbarConfig == null) {
+      toolbarConfig = DefaultToolbarConfig;
+    }
+    let display = toolbarConfig.display || DefaultToolbarConfig.display;
+    let buttonsGroups = display.map((groupName) => {
+      switch (groupName) {
+        case 'INLINE_STYLE_BUTTONS': {
+          return this._renderInlineStyleButtons(toolbarConfig);
+        }
+        case 'BLOCK_TYPE_DROPDOWN': {
+          return this._renderBlockTypeButtons(toolbarConfig);
+        }
+        case 'LINK_BUTTONS': {
+          return this._renderLinkButtons();
+        }
+        case 'BLOCK_TYPE_BUTTONS': {
+          return this._renderBlockTypeDropdown(toolbarConfig);
+        }
+        case 'HISTORY_BUTTONS': {
+          return this._renderUndoRedo();
+        }
+      }
+    });
     return (
       <div className={cx(styles.root, className)}>
-        {this._renderInlineStyleButtons(toolbarConfig || DefaultToolbarConfig)}
-        {this._renderBlockTypeButtons(toolbarConfig || DefaultToolbarConfig)}
-        {this._renderLinkButtons()}
-        {this._renderBlockTypeDropdown(toolbarConfig || DefaultToolbarConfig)}
-        {this._renderUndoRedo()}
+        {buttonsGroups}
       </div>
     );
   }

src/lib/EditorToolbarConfig.js

@@ -8,7 +8,10 @@ export type StyleConfig = {
 
 export type StyleConfigList = Array<StyleConfig>;
 
+export type GroupName = 'INLINE_STYLE_BUTTONS' | 'BLOCK_TYPE_DROPDOWN' | 'LINK_BUTTONS' | 'BLOCK_TYPE_BUTTONS' | 'HISTORY_BUTTONS';
+
 export type ToolbarConfig = {
+  display: Array<GroupName>;
   INLINE_STYLE_BUTTONS: StyleConfigList;
   BLOCK_TYPE_DROPDOWN: StyleConfigList;
   BLOCK_TYPE_BUTTONS: StyleConfigList;
@@ -36,6 +39,7 @@ export const BLOCK_TYPE_BUTTONS: StyleConfigList = [
 ];
 
 let EditorToolbarConfig: ToolbarConfig = {
+  display: ['INLINE_STYLE_BUTTONS', 'BLOCK_TYPE_DROPDOWN', 'LINK_BUTTONS', 'BLOCK_TYPE_BUTTONS', 'HISTORY_BUTTONS'],
   INLINE_STYLE_BUTTONS,
   BLOCK_TYPE_DROPDOWN,
   BLOCK_TYPE_BUTTONS,