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

i got same problem like unable to load initial value from api response. i think because editor is loading before we got response. so i just added one simple condition like this so that when description is available ( i am storing it in state after getting api response ) then only editor will component will be loaded. its working fine from my side.

imported editor component:

{description && (
    <>
        <div className="editor">
             <DraftEditor onDataChange={handleDescription} value={description} />
        </div>
    </>
 )}

my editor component:

import React, { useState } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import { EditorState, ContentState, convertToRaw, convertFromHTML } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

const DraftEditor = (props) => {
const contentDataState = 
ContentState.createFromBlockArray(convertFromHTML(`${props.value}`));
const editorDataState = EditorState.createWithContent(contentDataState);

const [editorState, setEditorState] = useState(editorDataState);

const onEditorStateChange = (editorStateData) => {
    setEditorState(editorStateData);
    let data = draftToHtml(convertToRaw(editorStateData.getCurrentContent()));
    props.onDataChange(data);
};

return (
    <React.Fragment>
        <Editor
            editorState={editorState}
            onEditorStateChange={onEditorStateChange}
            wrapperClassName="wrapperClassName"
            editorClassName="editorClassName"
            toolbarClassName="toolbar-class"
            toolbar={{
                options: ['inline', 'list', 'textAlign'],
                inline: {
                    options: ['bold', 'italic', 'underline'],
                },
                list: {
                    options: ['unordered', 'ordered', 'indent', 'outdent'],
                },
                textAlign: {
                    options: ['left', 'center', 'right'],
                },
            }}
        />
    </React.Fragment>
);
};

export default DraftEditor;

Answer 2

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