Customising the side buttons

Side buttons in medium-draft are referred to the buttons that appear when you click on the + button on the left of an empty line.

Editor of medium-draft accepts a prop called sideButtons that is an array with the following structure -

{
  title: 'Image',
  component: ImageButtonComponent,
}

• title - Used as key while rendering the array of sideButtons. Each object in the array should have a unique value for title.
• component - The corresponding React component to be rendered that will act as the button.

All the component in the array are rendered directly as part of the sidebar. So try to stick to just buttons/a/spans in the render function of your component. Take a look at the default image side button as an example.

Each component has access to the following functions as part of their props -

• getEditorState - Returns the current editorState
• setEditorState - Updates the editorState
• close - When the + button is clicked, side buttons toolbar enters into an opened state as all the buttons become visible. So you should call the close method to return the sidebar to normal closed state when you are done with your operation.

Disabling side buttons

You should pass an empty array as the value for the sideButtons prop to the Editor if you don't want this functionality.