Add markdown editor toolbar customization

src/components/EditorWidgets/Markdown/MarkdownControl/RawEditor/index.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import React from 'react';
 import { Editor as Slate } from 'slate-react';
 import Plain from 'slate-plain-serializer';
@@ -50,12 +51,13 @@ export default class RawEditor extends React.Component {
   };
 
   render() {
-    const { className } = this.props;
+    const { className, field } = this.props;
     return (
       <div className="nc-rawEditor-rawWrapper">
         <div className="nc-visualEditor-editorControlBar">
           <Toolbar
             onToggleMode={this.handleToggleMode}
+            buttons={field.get('buttons')}
             className="nc-markdownWidget-toolbarRaw"
             disabled
             rawMode
@@ -77,4 +79,5 @@ RawEditor.propTypes = {
   onMode: PropTypes.func.isRequired,
   className: PropTypes.string.isRequired,
   value: PropTypes.string,
+  field: ImmutablePropTypes.map
 };

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

@@ -17,6 +17,7 @@ export default class Toolbar extends React.Component {
     getAsset: PropTypes.func,
     disabled: PropTypes.bool,
     className: PropTypes.string,
+    buttons: ImmutablePropTypes.list
   };
 
   constructor(props) {
@@ -26,6 +27,11 @@ export default class Toolbar extends React.Component {
     };
   }
 
+  isHidden = button => {
+    const { buttons } = this.props;
+    return List.isList(buttons) ? !buttons.includes(button) : false;
+  }
+
   render() {
     const {
       onMarkClick,
@@ -65,6 +71,7 @@ export default class Toolbar extends React.Component {
             icon="bold"
             onClick={onMarkClick}
             isActive={selectionHasMark}
+            isHidden={this.isHidden('bold')}
             disabled={disabled}
           />
           <ToolbarButton
@@ -73,6 +80,7 @@ export default class Toolbar extends React.Component {
             icon="italic"
             onClick={onMarkClick}
             isActive={selectionHasMark}
+            isHidden={this.isHidden('italic')}
             disabled={disabled}
           />
           <ToolbarButton
@@ -81,6 +89,7 @@ export default class Toolbar extends React.Component {
             icon="code"
             onClick={onMarkClick}
             isActive={selectionHasMark}
+            isHidden={this.isHidden('code')}
             disabled={disabled}
           />
           <ToolbarButton
@@ -89,6 +98,7 @@ export default class Toolbar extends React.Component {
             icon="link"
             onClick={onLinkClick}
             isActive={selectionHasLink}
+            isHidden={this.isHidden('link')}
             disabled={disabled}
           />
           <ToolbarButton
@@ -97,6 +107,7 @@ export default class Toolbar extends React.Component {
             icon="h1"
             onClick={onBlockClick}
             isActive={selectionHasBlock}
+            isHidden={this.isHidden('heading-one')}
             disabled={disabled}
           />
           <ToolbarButton
@@ -105,6 +116,7 @@ export default class Toolbar extends React.Component {
             icon="h2"
             onClick={onBlockClick}
             isActive={selectionHasBlock}
+            isHidden={this.isHidden('heading-two')}
             disabled={disabled}
           />
           <ToolbarButton
@@ -113,6 +125,7 @@ export default class Toolbar extends React.Component {
             icon="quote"
             onClick={onBlockClick}
             isActive={selectionHasBlock}
+            isHidden={this.isHidden('quote')}
             disabled={disabled}
           />
           <ToolbarButton
@@ -121,6 +134,7 @@ export default class Toolbar extends React.Component {
             icon="code-block"
             onClick={onBlockClick}
             isActive={selectionHasBlock}
+            isHidden={this.isHidden('code-block')}
             disabled={disabled}
           />
           <ToolbarButton
@@ -129,6 +143,7 @@ export default class Toolbar extends React.Component {
             icon="list-bulleted"
             onClick={onBlockClick}
             isActive={selectionHasBlock}
+            isHidden={this.isHidden('bulleted-list')}
             disabled={disabled}
           />
           <ToolbarButton
@@ -137,6 +152,7 @@ export default class Toolbar extends React.Component {
             icon="list-numbered"
             onClick={onBlockClick}
             isActive={selectionHasBlock}
+            isHidden={this.isHidden('numbered-list')}
             disabled={disabled}
           />
           <div className="nc-toolbar-dropdown">

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 })}

src/components/EditorWidgets/Markdown/MarkdownControl/VisualEditor/index.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import React, { Component } from 'react';
 import { get, isEmpty, debounce } from 'lodash';
 import { Map } from 'immutable';
@@ -33,6 +34,7 @@ export default class Editor extends Component {
     onMode: PropTypes.func.isRequired,
     className: PropTypes.string.isRequired,
     value: PropTypes.string,
+    field: ImmutablePropTypes.map
   };
 
   constructor(props) {
@@ -189,7 +191,7 @@ export default class Editor extends Component {
   }
 
   render() {
-    const { onAddAsset, getAsset, className } = this.props;
+    const { onAddAsset, getAsset, className, field } = this.props;
 
     return (
       <div className="nc-visualEditor-wrapper">
@@ -206,6 +208,7 @@ export default class Editor extends Component {
             onSubmit={this.handlePluginAdd}
             onAddAsset={onAddAsset}
             getAsset={getAsset}
+            buttons={field.get('buttons')}
           />
         </div>
         <Slate

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

@@ -45,6 +45,7 @@ export default class MarkdownControl extends React.Component {
       getAsset,
       value,
       classNameWrapper,
+      field
     } = this.props;
 
     const { mode } = this.state;
@@ -57,6 +58,7 @@ export default class MarkdownControl extends React.Component {
           getAsset={getAsset}
           className={classNameWrapper}
           value={value}
+          field={field}
         />
       </div>
     );
@@ -69,6 +71,7 @@ export default class MarkdownControl extends React.Component {
           getAsset={getAsset}
           className={classNameWrapper}
           value={value}
+          field={field}
         />
       </div>
     );

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

@@ -14,6 +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`: an array of strings representing the formatting buttons to display, all buttons shown by default. Buttons include: `bold`, `italic`, `code`, `link`, `heading-one`, `heading-two`, `quote`, `code-block`, `bulleted-list`, and `numbered-list`.
 - **Example:**
 
   ```yaml