Customising the Toolbar

The default toolbar of medium-draft comes with the following options for editing the text -

• Block

  • H3 (heading-three)
  • Q (Blockquote)
  • UL (unordered-list)
  • OL (Ordered List)
  • ✓ (Todo list item)

• Inline

  • B (Bold)
  • I (Italic)
  • U (Underline)
  • Hi (Highlight)

  • (Add link)

By design, everything else can be customised except the link button.

The Editor of medium-draft accepts 2 props for customising toolbar

1. blockButtons

   It accepts an array of objects with the following structure-

   {
     label: 'H3',
     style: 'header-three',
     icon: 'header',
     description: 'Heading 3',
   }

   • label is what is shown in the toolbar
   • style is the block type that the selected text block should convert to when that button is clicked
   • icon it is for future use with font-awesome when one can use fa icons in toolbar instead of text labels
   • description is what is shown as a tooltip when user hovers over the button in the toolbar

   Example array value can be seen here.

2. inlineButtons

   It also accepts an array of objects with the same structure as above. Only difference is the the value of style. The value of style should be inline styles supported by draft-js or which you have defined in customeStyleMap(if you are using those). Some of the values are BOLD, ITALIC, UNDERLINE, etc. medium-draft has an extra HIGHLIGHT style too.

   Example array value can be seen here.

   Note that due to difference in its behaviour, if there is a hyperlink option in the inlineButtons array, it will always appear at the last regardless of its order in that array.

So to have a toolbar that has the following buttons-

H1	Q	UL	B	I	U	S	#

You will have to use the following code -

import React from 'react';
import ReactDOM from 'react-dom';

import {
  Editor,
  createEditorState,
} from 'medium-draft';

class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.blockButtons = [{
      label: 'H1',
      style: 'header-one',
      icon: 'header',
      description: 'Heading 1',
    }, {
      label: 'Q',
      style: 'blockquote',
      icon: 'quote-right',
      description: 'Blockquote',
    }, {
      label: 'UL',
      style: 'unordered-list-item',
      icon: 'list-ul',
      description: 'Unordered List',
    }];

    this.inlineButtons = [{
      label: 'B',
      style: 'BOLD',
      icon: 'bold',
      description: 'Bold',
    }, {
      label: 'I',
      style: 'ITALIC',
      icon: 'italic',
      description: 'Italic',
    }, {
      label: 'U',
      style: 'UNDERLINE',
      icon: 'underline',
      description: 'Underline',
    }, {
      label: 'S',
      style: 'STRIKETHROUGH',
      icon: 'strikethrough',
      description: 'Strikethrough',
    }, {
      label: '#',
      style: 'hyperlink',
      icon: 'link',
      description: 'Add a link',
    }];

    this.state = {
      editorState: createEditorState(), // for empty content
    };

    /*
    this.state = {
      editorState: createEditorState(data), // if you have initial data
    };
    */

    this.onChange = (editorState) => {
      this.setState({ editorState });
    };
  }

  componentDidMount() {
    this.refs.editor.focus();
  }

  render() {
    const { editorState } = this.state;
    return (
      <Editor
        ref="editor"
        editorState={editorState}
        onChange={this.onChange}
        inlineButtons={this.inlineButtons}
        blockButtons={this.blockButtons}
      />
    );
  }
};

Disabling toolbar altogether.

If you do not want to show the toolbar in your editor, you can pass a disableToolbar prop to the Editor with a value of true to hide the toolbar.