Use an isHidden property

src/components/EditorWidgets/Markdown/MarkdownControl/Toolbar/Toolbar.js

@@ -27,7 +27,12 @@ export default class Toolbar extends React.Component {
     };
   }
 
-  getToolbarButtonsList() {
+  isHidden = button => {
+    const { buttons } = this.props;
+    return List.isList(buttons) ? !buttons.includes(button) : false;
+  }
+
+  render() {
     const {
       onMarkClick,
       onBlockClick,
@@ -35,35 +40,121 @@ export default class Toolbar extends React.Component {
       selectionHasMark,
       selectionHasBlock,
       selectionHasLink,
+      onToggleMode,
+      rawMode,
+      plugins,
+      onAddAsset,
+      getAsset,
       disabled,
-      buttons
+      onSubmit,
+      className,
     } = this.props;
 
-    const toolbarButtons = [
+    const { activePlugin } = this.state;
-      { type: 'bold', label: 'Bold', icon: 'bold', onClick: onMarkClick, isActive: selectionHasMark, disabled },
-      { type: 'italic', label: 'Italic', icon: 'italic', onClick: onMarkClick, isActive: selectionHasMark, disabled },
-      { type: 'code', label: 'Code', icon: 'code', onClick: onMarkClick, isActive: selectionHasMark, disabled },
-      { type: 'link', label: 'Link', icon: 'link', onClick: onLinkClick, isActive: selectionHasLink, disabled },
-      { type: 'heading-one', label: 'Header 1', icon: 'h1', onClick: onBlockClick, isActive: selectionHasBlock, disabled },
-      { type: 'heading-two', label: 'Header 2', icon: 'h2', onClick: onBlockClick, isActive: selectionHasBlock, disabled },
-      { type: 'quote', label: 'Quote', icon: 'quote', onClick: onBlockClick, isActive: selectionHasBlock, disabled },
-      { type: 'code', label: 'Code Block', icon: 'code-block', onClick: onBlockClick, isActive: selectionHasBlock, disabled },
-      { type: 'bulleted-list', label: 'Bulleted List', icon: 'list-bulleted', onClick: onBlockClick, isActive: selectionHasBlock, disabled },
-      { type: 'numbered-list', label: 'Numbered List', icon: 'list-numbered', onClick: onBlockClick, isActive: selectionHasBlock, disabled }
-    ];
 
-    return buttons === undefined ? toolbarButtons : toolbarButtons.filter(button => buttons.includes(button.type));
+    /**
-  }
+     * Because the toggle labels change font weight for active/inactive state,
-
+     * we need to set estimated widths for them to maintain position without
-  renderToolbarButton(button) {
+     * moving other inline items on font weight change.
-    const { type, label, icon, onClick, isActive, disabled } = button;
+     */
-    return <ToolbarButton key={label} type={type} label={label} icon={icon} onClick={onClick} isActive={isActive} disabled={disabled}/>;
+    const toggleOffLabel = 'Rich text';
-  }
+    const toggleOffLabelWidth = '62px';
-
+    const toggleOnLabel = 'Markdown';
-  renderToolbarDropdown() {
+    const toggleOnLabelWidth = '70px';
-    const { plugins, disabled, onSubmit } = this.props;
 
     return (
+      <div className={c(className, 'nc-toolbar-Toolbar')}>
+        <div>
+          <ToolbarButton
+            type="bold"
+            label="Bold"
+            icon="bold"
+            onClick={onMarkClick}
+            isActive={selectionHasMark}
+            isHidden={this.isHidden('bold')}
+            disabled={disabled}
+          />
+          <ToolbarButton
+            type="italic"
+            label="Italic"
+            icon="italic"
+            onClick={onMarkClick}
+            isActive={selectionHasMark}
+            isHidden={this.isHidden('italic')}
+            disabled={disabled}
+          />
+          <ToolbarButton
+            type="code"
+            label="Code"
+            icon="code"
+            onClick={onMarkClick}
+            isActive={selectionHasMark}
+            isHidden={this.isHidden('code')}
+            disabled={disabled}
+          />
+          <ToolbarButton
+            type="link"
+            label="Link"
+            icon="link"
+            onClick={onLinkClick}
+            isActive={selectionHasLink}
+            isHidden={this.isHidden('link')}
+            disabled={disabled}
+          />
+          <ToolbarButton
+            type="heading-one"
+            label="Header 1"
+            icon="h1"
+            onClick={onBlockClick}
+            isActive={selectionHasBlock}
+            isHidden={this.isHidden('heading-one')}
+            disabled={disabled}
+          />
+          <ToolbarButton
+            type="heading-two"
+            label="Header 2"
+            icon="h2"
+            onClick={onBlockClick}
+            isActive={selectionHasBlock}
+            isHidden={this.isHidden('heading-two')}
+            disabled={disabled}
+          />
+          <ToolbarButton
+            type="quote"
+            label="Quote"
+            icon="quote"
+            onClick={onBlockClick}
+            isActive={selectionHasBlock}
+            isHidden={this.isHidden('quote')}
+            disabled={disabled}
+          />
+          <ToolbarButton
+            type="code"
+            label="Code Block"
+            icon="code-block"
+            onClick={onBlockClick}
+            isActive={selectionHasBlock}
+            isHidden={this.isHidden('code-block')}
+            disabled={disabled}
+          />
+          <ToolbarButton
+            type="bulleted-list"
+            label="Bulleted List"
+            icon="list-bulleted"
+            onClick={onBlockClick}
+            isActive={selectionHasBlock}
+            isHidden={this.isHidden('bulleted-list')}
+            disabled={disabled}
+          />
+          <ToolbarButton
+            type="numbered-list"
+            label="Numbered List"
+            icon="list-numbered"
+            onClick={onBlockClick}
+            isActive={selectionHasBlock}
+            isHidden={this.isHidden('numbered-list')}
+            disabled={disabled}
+          />
           <div className="nc-toolbar-dropdown">
             <Dropdown
               dropdownTopOverlap="36px"
@@ -81,29 +172,7 @@ export default class Toolbar extends React.Component {
               ))}
             </Dropdown>
           </div>
-    );
+        </div>
-  }
-
-  renderToolbarToggle() {
-    const {
-      onToggleMode,
-      rawMode,
-      plugins,
-      disabled,
-      className
-    } = this.props;
-
-    /**
-     * Because the toggle labels change font weight for active/inactive state,
-     * we need to set estimated widths for them to maintain position without
-     * moving other inline items on font weight change.
-     */
-    const toggleOffLabel = 'Rich text';
-    const toggleOffLabelWidth = '62px';
-    const toggleOnLabel = 'Markdown';
-    const toggleOnLabelWidth = '70px';
-
-    return (
         <div className="nc-markdownWidget-toolbar-toggle">
           <span
             style={{ width: toggleOffLabelWidth }}
@@ -130,17 +199,6 @@ export default class Toolbar extends React.Component {
             {toggleOnLabel}
           </span>
         </div>
-    );
-  }
-
-  render() {
-    return (
-      <div className={c(this.props.className, 'nc-toolbar-Toolbar')}>
-        <div>
-          {this.getToolbarButtonsList().map((toolbarButton) => this.renderToolbarButton(toolbarButton))}
-          {this.renderToolbarDropdown()}
-        </div>
-        {this.renderToolbarToggle()}
       </div>
     );
   }

src/components/EditorWidgets/Markdown/MarkdownControl/Toolbar/ToolbarButton.js

@@ -3,9 +3,13 @@ import React from 'react';
 import c from 'classnames';
 import { Icon } from 'UI';
 
-const ToolbarButton = ({ type, label, icon, onClick, isActive, disabled }) => {
+const ToolbarButton = ({ type, label, icon, onClick, isActive, isHidden, disabled }) => {
   const active = isActive && type && isActive(type);
 
+  if (isHidden) {
+    return null;
+  }
+
   return (
     <button
       className={c('nc-toolbarButton-button', { ['nc-toolbarButton-active']: active })}

website/site/content/docs/widgets/markdown.md

@@ -14,7 +14,7 @@ The markdown widget provides a full fledged text editor - which is based on [sla
 - **Data type:** markdown
 - **Options:**
   - `default`: accepts markdown content
-  - `buttons`: a list of string representing the buttons to display ('bold', 'italic', 'code', 'link', 'heading-one', 'heading-two', 'quote', 'code', 'bulleted-list', 'numbered-list'). If this options is missing, all the buttons are display.
+  - `buttons`: a list of string representing the buttons to display ('bold', 'italic', 'code', 'link', 'heading-one', 'heading-two', 'quote', 'code-block', 'bulleted-list', 'numbered-list'). If this options is missing, all the buttons are display.
 - **Example:**
 
   ```yaml