Multiple draftjs editors cannot be used on the same page using plugins

Multiple draftjs editors cannot be used on the same page using plugins. All interactions are sent to the last instance on the page.

Clone the repo, install dependencies and change line 77 in /stories/index.js

from

.add('CustomToolbarEditor', () => <CustomToolbarEditor />)

to

.add('CustomToolbarEditor', () => <div><CustomToolbarEditor /><CustomToolbarEditor /></div>)

Now run yarn storybook and open the correct example

Test functionality of both editors and you will see the controls misbehave and target the last editor.

A similar issue is https://github.com/draft-js-plugins/draft-js-plugins/issues/548

[MartinSeeler]

Thank you, I have converted it to something similar with useState. With this, each editor get’s its own plugins.

const CustomEditor = () => {
  const [editorState, setEditorState] = useState(() => EditorState.createEmpty());

  const [{ plugins, Toolbar }] = useState(() => {
    const toolbarPlugin = createToolbarPlugin();
    const { Toolbar } = toolbarPlugin;
    const plugins = [toolbarPlugin];
    return {
      plugins,
      Toolbar
    };
  });

  const editorRef = useRef(null);

  return (
    <div>
      <div
        className="editor"
        onClick={() => editorRef.current && editorRef.current.focus()}
      >
        <Editor
          editorState={editorState}
          onChange={(newEditorState: EditorState) => setEditorState(newEditorState)}
          plugins={plugins}
          ref={(editor: any) => (editorRef.current = editor)}
        />
        <Toolbar>
          {// may be use React.Fragment instead of div to improve perfomance after React 16
          (externalProps: any) => (
            <div>
              <BoldButton {...externalProps} />
              <ItalicButton {...externalProps} />
              <UnderlineButton {...externalProps} />
              <CodeButton {...externalProps} />
              <Separator {...externalProps} />
              <UnorderedListButton {...externalProps} />
              <OrderedListButton {...externalProps} />
            </div>
          )}
        </Toolbar>
      </div>
    </div>
  );
};

[MartinSeeler]

This is really an issue for me. Any suggestions or workarounds?