Mentions are not compatible with useEffect

Environment

normal set up, react hooks, following the docs exactly

• @draft-js-plugins/editor version: 4.1.
• plugin name and version: mention 5.1

Description

Reproducible Demo

Here’s an example that uses the mentions plugin - this will help get you started The link to the working example in the template is broken

If you need a working example, if you wouldn’t mind sharing a fixed version of the above link, it would save me a lot of time. Otherwise I think this is a known feature of mentions so I’m not sure if it’s necessary.

The following useEffect logic I am using overwrites the mention plugin is the following.

Each one overwrites the mention plugin. I feel like the incompatibility with useEffect should be a primary focus in the docs, or, even more ideally, the plugin should be compatible with this hook

useEffect(() => {
    if(props.focusOnMount){
      // timeout is required otherwise it overwrites the mentions plugin
     editor.current.focus()
    }
  }, [])

// this hook is used to update the editor state from realtime events 
useEffect(() => {
    let es = getEditorStateFromRaw(props.content))

    // timeout is required otherwise it overwrites the mentions plugin
   setEditorState(es)

  }, [props.content])

[fxOne]

Thanks for reporting the broken link. It looks like codesandbox removes templates after a while.

I will add a note to the FAQ page that if you create a new EditorState it will not have the decorators which are added by draft-js-plugins.

[fxOne]

I’ll reopen this issue as I want to add some notes to the FAQ to make the issue clear and provide some links to the solutions