Setting new editor state breaks editor

I have this simple example that extends the example a little:

export default class SimpleEmojiEditor extends Component {
  state = {
    editorState: createEditorStateWithText('Test 1')
  };

  render() {
    return (
      <div>
        <div className='editor'>
          <Editor
            editorState={this.state.editorState}
            onChange={editorState => this.setState({ editorState })}
            plugins={[createEmojiPlugin()]}
          />
        </div>
        <button onClick={() => this.setState({ editorState: createEditorStateWithText('Test 2') })}>
          Click
        </button>
      </div>
    );
  }
}

The editor state starts with createEditorStateWithText('Test 1') when the component is mounted. I also have a button, that if I click it, it sets the editor state to createEditorStateWithText('Test 2'). After setting the editor state on the button click, I am no longer able to use emojis in the textarea, but don’t have any errors.

Is this expected, and is there another way I should be ‘updating’ the editor state with a custom value?

My use case is to update the editor’s value on componentDidUpdate from a prop change.

[zhouzi]

@superKalo DraftJS is built to face complex situations so updating an Editor’s content may not be as trivial as expected. Here is an out of context example of how it could look:

import React, { Component } from 'react';
import { ContentState, EditorState } from 'draft-js';

export default class SimpleEmojiEditor extends Component {
  state = {
    editorState: EditorState.createEmpty()
  };

  setEditorContent (text) {
    const contentState = ContentState.createFromText(text);
    const editorState = EditorState.push(this.state.editorState, contentState);
    this.setState({ editorState });  
  }

  render() {
    return (
      <div>
        <div className='editor'>
          <Editor
            editorState={this.state.editorState}
            onChange={editorState => this.setState({ editorState })}
            plugins={[createEmojiPlugin()]}
          />
        </div>
        <button onClick={() => this.setEditorContent('Test 2')}>
          Click
        </button>
      </div>
    );
  }
}

This is just an example and will not work as is but hopefully it gives you an overview of the steps you’ll have to go through. Have a look at DraftJS’ reference to learn about its internals: EditorState, ContentState.

[DerKobe]

I had a similar problem and the comments guided me to the solution. I wanted to update the editor from raw JSON which comes from an API. So this is what worked for me:

componentWillReceiveProps(newProps) {
  const newContentState = convertFromRaw(JSON.parse(newProps.text))
  const editorState = EditorState.push(this.state.editorState, newContentState)
  this.setState({editorState})
}

I think the gist of this is (like @nikgraf said): always use EditorState.pushand never set the state directly after its initialization.