question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Mentions - Doesn't popup when swapping EditorState

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:5
  • Comments:30 (12 by maintainers)

github_iconTop GitHub Comments

3reactions
igorlesnenkocommented, Aug 22, 2018

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

2reactions
chenyuejiecommented, Mar 4, 2017

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

draftjs - Draft.js Mention Plugin is not working after rendering ...
You should do the following: const [editorState, setEditorState] = React.useState(() => { const parsedData = JSON.parse(post.
Read more >
Bug List
CCombo: Text and List component are private, cannot extend accessible ... "No matches" key assist popup on Esc after switching to Emacs and...
Read more >
ASPxTextBox - The client-side TextChanged and ...
Since you are changing the editor state manually and the result of the operation is know to you, mentioned events are not raised....
Read more >
Producing Parameterized Pages and getting a JBO-35007 error ...
Maybe this does not apply to your specific situation, but there seems to be a ... On my first page I have a...
Read more >
z/OS V1R8.0 ISPF Edit and Edit Macros
F9=Swap. F10=Actions F12=Cancel. Figure 2. Pop-Up Selected from an Action Bar Pull-Down. 1 Menu Utilities Compilers Options Status Help.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found