How to customize the style for react-draft-wysiwyg?

Question

I am starting to use react-draft-wysiwyg and want to know if I can extend existing elements with styles and classes?

For example, there is a button B (bold) by default and I want to add some styles and classes to it, how can I do that?

My goal is to get something like this <p className = "test"> BOLD TEXT </ p> and as a result I will get bold text with the class

class EditorContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
    };
  }

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  render() {
    const { editorState } = this.state;
    return (
      <div className="editor">
        <Editor
          editorState={editorState}
          onEditorStateChange={this.onEditorStateChange}
          toolbar={{
            options: ["inline", "blockType", "fontSize"],
            inline: {
              inDropdown: false,
              className: "test",
              component: undefined,
              dropdownClassName: undefined,
              options: ["bold", "italic", "underline"],
              bold: { className: "test", style: { color: "red" } },
              italic: { className: undefined },
              underline: { className: undefined },
            },
          }}
        />

        <textarea
          disabled
          // value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
        />
      </div>
    );
  }
}

Example

Or maybe there is react-wysiwyg another library for this purpose

Answer 1

You should be able to apply style to block elements using the blockStyleFn prop. There's a good example in the docs: https://draftjs.org/docs/advanced-topics-block-styling#blockstylefn

Answer 2

use customBlockRenderFunc={myBlockStyleFn} in <Editor/> component instead of blockStyleFn={myBlockStyleFn}

Answer 3

<Editor editorStyle={{ border: "1px solid black" }} />