Multiple plugins / multiple editors

I’m trying to render multiple Components/Editors onto the page, each with their own decorators and plugins. I followed the advice in the FAQ (https://github.com/draft-js-plugins/draft-js-plugins/blob/master/FAQ.md) but for some reason, the emoji plugin (or mentions, etc.) isn’t being applied to each Editor.

This is roughly what my code looks like:

import { Component, PropTypes } from 'react';

import 'draft-js/dist/Draft.css';

// Editor
import Editor from 'draft-js-plugins-editor';

// Emoji
import createEmojiPlugin from 'draft-js-emoji-plugin';
import 'draft-js-emoji-plugin/lib/plugin.css';

export default class Test extends Component {
  constructor(props) {
    super(props);

    const emojiPlugin = createEmojiPlugin();
    const { EmojiSuggestions } = emojiPlugin;

    this.editorPlugins = [
      mentionPlugin
    ];

    this.components = {
      EmojiSuggestions
    };
  }

  render() {
    const {
      onChange,
      editorState,
      readOnly
    } = this.props;

    const {
      EmojiSuggestions
    } = this.components;

    return (
      <div className={styles.editor}>
        <Editor
          editorState={editorState}
          onChange={onChange}
          plugins={this.editorPlugins}
          ref={(element) => { this.editor = element; }}
          readOnly={readOnly}
        />
        <EmojiSuggestions />
      </div>
    );
  }
}

Any help would be greatly appreciated! Thanks for putting these plugins together.

[NikolasStelmah]

For futher searchers: if you are getting editorState from this.props then your decorator get broken and plugin will not work. To fix this, you need to do smth like this in somewhere parent container to <Editor/> component where is defined your onChange function:

 onInputTextChanged(editorState) {
    if (editorState.getDecorator()) {
      this.setState({ decorator: editorState.getDecorator(), editorState });
    } else if (this.state.decorator) {
      const { decorator } = this.state;
      this.setState({
        editorState: EditorState.set(editorState, { decorator }),
      });
    } else this.setState({ editorState });
  }

Then u should pass editorState and onChange function as a props like u probably did.

Another situation is like in current issue above. You must be shure that you did it in your editor component constructor:

constructor(props) {
   super(props);
   const emojiPlugin = createEmojiPlugin();
   const { EmojiSelect } = emojiPlugin;
   his.plugins = [emojiPlugin];
   this.components = { EmojiSelect };
...

Plugin can by any whatever you are using and you must be shure, that you rendering right component from this.components

[stevewillard]

Yeah – I meant the emoji plugin. Something is definitely up with my code. In one part of my app, I can render multiple Editors, using code very similar to what you posted, and things work fine. In another area the decorators don’t seem to work.

The onChange updates an editorState value in a redux store, which then gets passed down to this component.

I’ll keep digging and post back here if I figure it out. Maybe it’ll help others who have the same issue.