how to change confige react-mui-draft-wysiwyg?

Question

I use HTML editor material ui :

import MUIEditor, { MUIEditorState } from "react-mui-draft-wysiwyg";

 <MUIEditor
    editorState={formElement.editorState}
    onChange={formElement.onChange}
  />

I want to remove the font color button in the toolbar. When I go to the MUIEditor file at node-modules and I want to make some changes to that file but it does not seem to change even when I get a console I can not see the result. What should I do?

 .node_modules
        .react-mui-draft-wysiwyg
           .dist
             .index.js

Answer 1

It is rarely advisable to edit the contents of /node_modules -- instead react-mui-draft-wysiwyg provides direct a way to customize the toolbar configuration through the config prop, in your own React code.

In your case, to hide the font color button, you simply need to pass in the menu options that you would like to display. (ie. remove/comment out the toolbarControlTypes.fontColor option). For example:

    import MUIEditor, {
      MUIEditorState,
      toolbarControlTypes // Added toolbarControlTypes
    } from "react-mui-draft-wysiwyg";

...

    <MUIEditor
      editorState={editorState}
      onChange={onChange}
      config={{
        toolbar: {
          controls: [
            toolbarControlTypes.undo,
            toolbarControlTypes.redo,
            toolbarControlTypes.divider,
            toolbarControlTypes.bold,
            toolbarControlTypes.italic,
            toolbarControlTypes.underline,
            toolbarControlTypes.strikethrough,
            // Include all of the default toolbar options except for fontColor
            // toolbarControlTypes.fontColor,
            toolbarControlTypes.fontBackgroundColor,
            toolbarControlTypes.divider,
            toolbarControlTypes.linkAdd,
            toolbarControlTypes.linkRemove,
            toolbarControlTypes.image,
            toolbarControlTypes.divider,
            toolbarControlTypes.blockType,
            toolbarControlTypes.fontSize,
            toolbarControlTypes.fontFamily,
            toolbarControlTypes.textAlign,
            toolbarControlTypes.divider,
            toolbarControlTypes.unorderedList,
            toolbarControlTypes.orderedList
          ]
        }
      }}
    />

Documentation: Default Configuration Options

Working CodeSandbox: https://codesandbox.io/s/mui4-draft-wysiwyg-bre8e?file=/demo.js