Setting myState from the outside after component is mount will drop the decorators

say you have

<Editor editorState={this.props.myState} onChange={this.onChange} /> 

After the editor is mounting, if the parent component passes down a new state (through the myState props) to the Editor, the Editor will drop all the plugin decorators, since the decorators are set only during componentWillMount.

Let me know if the explanation is not clear, and I will create a minimal reproduction on jsbin or similar

[gnestor]

My temporary solution is to call componentWillMount() on my <Editor> instance because componentWillMount is where all of the decorators are resolved and merged into the editor state.

I’m calling the following in my container component’s componentWillReceiveProps so that I can update the editor state in response to next props:

this.setState({ editorState }, () => {
    this.editor.componentWillMount();
});

Assuming the following:

<Editor
  editorState={this.state.editorState}
  onChange={this.onChange}
  plugins={plugins}
  ref={element => {
    this.editor = element;
  }}
/>

https://github.com/draft-js-plugins/draft-js-plugins/pull/526 attempted to add a reloadDecorators method to the <Editor> component which accomplishes the end result. However, I think that this should just work for users for this library. Apparently, simply resolving the decorators and merging them into the editor state in componentWillMount is not enough. However, doing it in componentWillReceiveProps is probably too much and I’ve observed it doing strange things with the cursor.

My specific use case: I have a single page application that lists available docs and allows users to click on a doc to view/edit. When a user loads the app on a doc route, the decorators are all intact and the doc renders correctly. However, if the user loads the app on the docs route or navigates away from a doc route and back to another doc route (essentially, after the initial instance of the doc component in unmounted), many decorators are missing, such as linkify, link, mention, emoji, images, etc.

[izzappel]

@gnestor yes exactly

My temporary solution looks very similar:

	componentDidMount() {
		this.editor.componentWillMount();
	}

Unfortunately I have no other ideas to fix my problem.