How to use toolbarCustomButtons

[RiteshM]

i tried to use toolbarCustomButtons and developed a sample code for customization but getting error .here is the sample code https://github.com/RiteshM/CustomTBDemo .

can you please provide an example in which toolbarCustomButtons is used or reference any example.i didn't find any example in docs

[jpuri]

Hi @RiteshM,

You right, docs should have an example for this. I will add it soon. In the meantime may be this will help: https://github.com/jpuri/react-draft-wysiwyg/blob/master/js/playground/index.js#L124

Custom components get all props mentioned here: https://github.com/jpuri/react-draft-wysiwyg/blob/master/js/src/components/Editor/index.js#L425

In fact it can be very similar to any of controls here: https://github.com/jpuri/react-draft-wysiwyg/tree/master/js/src/components/Controls

[HengCC]

@jpuri how to use toolbarCustomButtons? i used like this:

import ProductPicker from './ProductPicker/ProductPicker';
.....
<Editor
          toolbarClassName={styles.toolbar}
          wrapperClassName={styles.wrapper}
          editorClassName={styles.editor}
          localization={{ locale: 'zh' }}
          toolbar={{
            colorPicker: { component: ColorPicker },
          }}
          toolbarCustomButtons={[ProductPicker]}
          {...props} />

but i got error . can you provide some example for this? thanks !

[jpuri]

Hi @HengCC ,

Please check this example: https://github.com/jpuri/react-draft-wysiwyg/tree/master/stories/CustomToolbar

[HengCC]

@jpuri thank you very much.

the correct writing is toolbarCustomButtons={[<ProductPicker />]} , and now it's working

[IlkhamGaysin]

@jpuri what if we have TypeScript so we explicitly set props inside functional component and don't set them when we pass it as toolbarCustomButtons

const SaveOption = ({ editorState, onChange }) => {
  const save = (): void => {
    const contentState = Modifier.replaceText(
      editorState.getCurrentContent(),
      editorState.getSelection(),
      '⭐',
      editorState.getCurrentInlineStyle(),
    );
    onChange(EditorState.push(editorState, contentState, 'insert-characters'));
  };

  return (
    <div onClick={save}>
      ⭐
    </div>
  );
}

<Editor toolbarCustomButtons={[<SaveOption />]} />

// ts-loader Error: 
Type '{}' is missing the following properties from type '{ editorState: any; onChange: any; }': editorState, onChange