Mentions - Doesn't popup when swapping EditorState

We have an app the shows a list of documents down the left side of the page and has an edit component on the right.

When the user selects a document we populate the editor with its contents.

We keep the EditorState for each document in our redux store. This all works great except for the fact that mentions only work for the first document that is selected.

After the user selects a second document the mention popup doesn’t appear. In the debugger I can see that register is never called in draft-js-mention-plugin/lib/index.js.

NOTE: if the user goes back and re-selects the first document the mentions work again.

Here is the meat of our component:

// Defines the plugin
const mentionPlugin = createMentionPlugin();
const { MentionSuggestions } = mentionPlugin;
const plugins = [mentionPlugin]; 

    onChange = (currentEditorState) => {
        // dispatches an action that updates the docuemnt's editorState in redxx
    };
    
    onAddMention = (data) => {
        ...
    };

    onSearchChange = ({ value }) => {
        ...
    };
  
  
  render () {
  	...
    <Editor
        editorState={this.props.document.editorState} // this comes from redux
        onChange={this.onChange}
        plugins={plugins}        
    />
    <MentionSuggestions
        onSearchChange={this.onSearchChange}
        suggestions={this.state.suggestions}
        onAddMention={this.onAddMention}
    />
    ...

Any suggestions on how to get this to work? I even tried storing separate instances of mentionPlugin for each instance of editorState in redux and doing something like the following in the render but it had the same result.

	// Each doc in redux has its own mention plugin that is instanciated something like:
	mentionPlugin  : createMentionPlugin()
	
	// Our component renders like:

  render () {
      ...
  
      const { MentionSuggestions } = this.props.document.mentionPlugin;
      
      return (
          <div className='editor' onClick={this.focus}>
              <Editor
                  editorState={this.props.document.editorState} // this comes from redux
                  onChange={this.onChange}
                  plugins={[this.props.document.mentionPlugin]}    // this comes from redux              
              />
              <MentionSuggestions
                  onSearchChange={this.onSearchChange}
                  suggestions={this.state.suggestions}
                  onAddMention={this.onAddMention}
              />
          </div>
      )

I’m obviously missing something here. Any help is greatly appreciated.

[igorlesnenko]

Any progress on this? Have the same issue. Difficult to use editor with things like formik, which are swapping the state e.g. on form reset

[chenyuejie]

Works fine by using EditorState.push to change the content of editor, but the editor’s old state(like redo, undo) is persist.

this.setState({ 
  editorState: EditorState.push(this.state.editorState, 
  ContentState.createFromText(newContent))
})

@iEchoic for multiple editors, you should create mentionPlugin for each instance.