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

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 int 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 isntead 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.

So to have a toolbar that has the following buttons-

H1	Q	UL	B	I	U	#

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',
    }];

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