React draft wysiwyg - Can't able to type text in editor after clearing editorState

Question

I'm trying to reset editor content after some action completed using react-draft-wysiwyg editor. All contents cleared by using clearEditorContent method from draftjs-utils. But after clearing contents I can't able to type nothing in editor. Added the code below. Please help to solve this problem.

import React, { Component } from 'react';
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import { clearEditorContent } from 'draftjs-utils'
import { Editor } from 'react-draft-wysiwyg';
import '../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';

export default class RTEditor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
    };
    this.setDomEditorRef = ref => this.domEditor = ref;
  }

  onEditorStateChange: Function = (editorState) => {
    this.setState({
      editorState,
    }, () => {
      this.props.sendResult(draftToHtml(convertToRaw(this.state.editorState.getCurrentContent())));
    });
  };

  componentWillReceiveProps(nextProps) {
    if(nextProps.reset) {
      this.reset();
    }
  }

  componentDidMount() {
    if(this.props.text) {
      const html = `${this.props.text}`;
      const contentBlock = htmlToDraft(html);
      if (contentBlock) {
        const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
        const editorState = EditorState.createWithContent(contentState);
        this.setState({ editorState, });
      }
    }

    this.domEditor.focusEditor();
  }

  reset = () => {
      let {editorState} = this.state;
      editorState = clearEditorContent(editorState);
      this.setState({ editorState });
  };

  render() {
    const { editorState } = this.state;
    return (
      <Editor
        ref={this.setDomEditorRef}
        editorState={editorState}
        wrapperClassName="rte-wrapper"
        editorClassName="rte-editor"
        onEditorStateChange={this.onEditorStateChange}
        toolbarCustomButtons={[this.props.UploadHandler]}
      />
    )
  }
}

My parent component code is below,

import React, { Component } from 'react'
import { addThreadPost } from '../../../api/thread-api'
import { isEmpty } from '../../../api/common-api'
import RTEditor from './Loadable'

export default class ThreadActivity extends Component {
    constructor(props) {
        super(props)
        this.state = {
            clearEditor: false,
            threadPost: ''
        }
    }

    setPost = (post) => {
        this.setState({ threadPost: post })
    }

    addThreadPost = () => {
        let postText = this.state.threadPost.replace(/<[^>]+>/g, '');
        if(!isEmpty(postText)) {
            addThreadPost(this.props.match.params.id_thread, this.state.threadPost, this.state.postAttachments).then(response => {
                this.setState({ 
                    clearEditor: true,
                    postAttachments: [],
                })
            });
        }
        else {
            alert("Please enter some text in box.");
        }
    }

    render() {
        return [
            <div className="commentbox-container">
                <div className="form-group">
                    <div className="form-control">
                        <RTEditor 
                            ref={node => { this.threadPost = node }} 
                            text={""} 
                            sendResult={this.setPost.bind(this)}
                            reset={this.state.clearEditor}
                        />
                        <button className="btn-add-post" onClick={this.addThreadPost}>Add Post</button>
                    </div>
                </div>
            </div>
        ]
    }
}

Answer 1

Your problem is probably that once you set ThreadActivity's state.clearEditor to true, you never set it back to false. So your this.reset() is getting called every time the component receives props. Which, incidentally, is going to be every time you try to type because you're invoking that this.props.sendResult.

The simplest fix is to make sure you change state.clearEditor back to false once the clearing is done.

Add to ThreadActivity.js:

constructor(props) {
  ...
  this.completeClear = this.completeClear.bind(this);
}

...

completeClear = () => {
  this.setState({clearEditor: false});
}

render() {
  ...
  <RTEditor
   ...
   completeClear={this.completeClear}
  />
  ...
}

And in RTEditor.js:

reset = () => {
    let {editorState} = this.state;
    editorState = clearEditorContent(editorState);
    this.setState({ editorState });
    this.props.completeClear();
};