Mentions Not Triggering with Second Instance of Plugin

Use-case/Problem

I am using the CustomMentionsEditor defined here https://www.draft-js-plugins.com/plugin/mention. My site has an instance of the CustomMentionsEditor which loads when the site loads, allowing users to post new comments and mention other users. However, the same CustomMentionsEditor is loaded again later when someone presses “Reply” on somebody else’s comment. This second CustomMentionsEditor does not trigger the MentionsSuggestions. I am also using the StaticToolbar plugin, and this works fine in both editors. I’ve followed suggestions about updating the EditorState using

EditorState.push(this.state.editorState, ContentState.createFromText(''))

however, this doesn’t fix the issue. I’ve also looked at the FAQ which says you must define separate instances of the plugin if you want to reuse them in the same component, however this is not my use case as I am only using one instance of the plugin in the component, it’s just that the component itself has two instances on the site.

[Rykuno]

I found a solution for this issue. Basically for each editor rendered you must make a new instance of the plugins.

 const [{ plugins, InlineToolbar, CustomCounter }] = useState(() => {
    const inlineToolbarPlugin = createInlineToolbarPlugin();
    const counterPlugin = createCounterPlugin();

    const { CustomCounter } = counterPlugin;
    const { InlineToolbar } = inlineToolbarPlugin;

    const plugins = [inlineToolbarPlugin, counterPlugin];
    return {
      plugins,
      InlineToolbar,
      CustomCounter
    };
  });

Refer to this issue https://github.com/draft-js-plugins/draft-js-plugins/issues/1244

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.