Can't set editorState in draft.js (it appears immutable but with no error)

Question

I've got content saved to a DB using convertToRaw that I'm trying to load back into a draft.js editor to enable a user to re-edit the content.

The draft.js editor is contained within a react-modal based component that is shown when the user clicks 'edit' on the piece of content. This is important because the Modal (and the Editor) are not re-instantiated, they're just shown and hidden.

The Editor is initiated once in the (ES6) class constructor simply using:

this.state = {editorState: EditorState.createEmpty()}

When the user clicks 'edit' I load the raw content from the the DB, then I've tried loading my raw content into the Editor using a number of variants of:

const contentState = convertFromRaw(rawContent)
const newEditorState = EditorState.push(this.state.editorState, contentState);
this.setState({editorState: newEditorState})

But while newEditorState clearly contains the correct content, this.setState({editorState: newEditorState}) seems to have no effect at all on the state of the component (or the Editor).

How am I meant to set new state for the Editor? Thanks!

UPDATE On further investigation, it is clearly just this.setState({editorState: newEditorState}) which is failing just for the Editor component.

I've tested it by setting a test state property and updating it successfully, while the editorState remains unchanged.

To test this fully, in my constructor I've initialised state with test values using:

this.state = { 
    editorState:EditorState.createWithContent(ContentState.createFromText('Hello')),
    testVal: 'Test Val 1'
}

Then I've written some test code to show how setState works for my test value but not for the draft.js editorState:

const newEditorState = EditorState.createWithContent(ContentState.createFromText('Goodbye'))
console.log('Before setState')
console.log('newEditorState: ' + newEditorState.getCurrentContent().getPlainText());
console.log('editorState: ' + this.state.editorState.getCurrentContent().getPlainText());
console.log('testVal: ' + this.state.testVal);

this.setState({editorState: newEditorState, testVal: 'Test Val 2'}, function(){
    console.log('After setState')
    console.log('editorState: ' + this.state.editorState.getCurrentContent().getPlainText());
    console.log('testVal: ' + this.state.testVal);
});

The console output looks like:

Before setState
    newEditorState: Goodbye
    editorState: Hello
    testVal: Test Val 1
After setState
    editorState: Hello
    testVal: Test Val 2

I can't see why the draft.js editorState isn't being updated when the testVal is?

Jiang YD · Accepted Answer · 2016-08-02 01:19:56Z

2

I did it with the following in my project

const blocks = convertFromRaw(props.rawBlocks);
editorState = EditorState.createWithContent(blocks, null);

answered Aug 2, 2016 at 1:19

Jiang YD

3,3091 gold badge17 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Danny S Over a year ago

Thanks @jiang-YD my problem seems to be in this.setState, it just doesn't appear to be updating the state at all.

Danny S · Accepted Answer · 2016-08-02 13:48:09Z

2

OK, I've found out what the problem was.

I was setting the focus to the Editor immediately after trying to call setState().

i.e. I was calling focus() on the Editor, by moving the focus() call to before I try to setState, it all worked. Clearly accepting focus has an effect on the editorState.

answered Aug 2, 2016 at 13:48

Danny S

4234 silver badges13 bronze badges

Collectives™ on Stack Overflow

Can't set editorState in draft.js (it appears immutable but with no error)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related