initialValues doesn't work for react-draft-wysiwyg field (redux-form)

Question

I'm trying to use react-draft-wysiwyg editor inside redux-form everything works as should, but the only thing is initialValues doesn't appear to work for the editor field.

Here is my Form.js :

    <form onSubmit={this.props.handleSubmit(this.onSubmit)} autoComplete="off">
        <Field name="title" className="form-input" type="text" placeholder="Title" component={this.titleComponent} />
        <Field name="description" className="desc" type="text" placeholder="What is your article about ?" component={this.titleComponent} />
      <Field name="editor" type="text" component={EditorFieldComponent} />
      <button className="form-button" type="submit" value="Submit">{this.props.button}</button>
    </form>

Here is the EditorFieldComponent.js:

const EditorFieldComponent = (props) => {
      const { meta: {touched, error}, input } = props;    
      return(
        <EditorComponent
          onChange={input.onChange}
          value={input.value}
          touched={touched}
          error={error}
          input = {{...input}}
        />
      );

    }

And Here is the EditorComponent.js:

class EditorComponent extends React.Component {

      constructor(props) {
        super(props);
        this.state = {
          editorState: EditorState.createEmpty()
        };
        this.props.onChange(
          draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
        );
      }
  onEditorStateChange = (editorState) => {
    const { onChange, value } = this.props;

    const newValue = draftToHtml(convertToRaw(editorState.getCurrentContent()));

    if (value !== newValue) {
      onChange(newValue);
    }

    this.setState({
      editorState
    });
  };

  render(){

return(
    <React.Fragment>
      <Editor 
        editorState={this.state.editorState}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        editorStyle={{ height: "500px", border: "solid 0.1px rgba(0, 0, 0, 0.1)", padding: "10px"}}
        onEditorStateChange={this.onEditorStateChange}
        toolbar={{
          options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'link', 'embedded'/*, 'emoji'*/, 'image', 'remove', 'history'],
          inline: { inDropdown: true },
          list: { inDropdown: true },
          textAlign: { inDropdown: true },
          link: { inDropdown: true },
          history: { inDropdown: true }
        }}
      />
      {this.renderError()}
    </React.Fragment>
);}

Here is where i am trying to use initialValues:

  return(
    <div>
      <Form
       initialValues={{title: "some title", description: "some description", editor: "some text"}}
      />
    </div>
  );

Also I Should say that initialValues is working for the 'description' and 'title' Field and only the 'editor' Field has this problem.

Answer 1

So the problem seems to be inside EditorComponent constructor(), where the editorState is set to empty as default(or should I say at first). And that probably overwrites our initialValues for the Editor Field.

   constructor(props) {
     super(props);
     this.state = {
       editorState: EditorState.createEmpty()
    };

I didn't find a solution to solve this problem and finally use initialValues as intended, but I found an alternative to set default value for the Editor some string of HTML that we see fit. Here is a Link to that solution: https://github.com/jpuri/react-draft-wysiwyg/issues/357