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.

Multiple plugins / multiple editors

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
NikolasStelmahcommented, Dec 13, 2018

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

3reactions
stevewillardcommented, Nov 29, 2016

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Multiple draft-js-plugins editors on the same page don't work
Each editor get's its own plugins. You can solve this issue ether by creating different plugin for each editor instance and pass them...
Read more >
Multiple Plugin Editors - Audio Plugins - JUCE Forum
Hi, in one of tutorials is a notice: "There is only one plug-in processor whereas you can create multiple editors.
Read more >
Use multiple TinyMCE instances in a single page | Docs
This section is about adding multiple editor instances to a single page. This is a common use case when using TinyMCE's inline mode....
Read more >
Multiple Editor and Plugins Directory - Unity Answers
Well It's possible to have multiple editor folders even inside subfolders, However the plugin folder need to be at root level inside the ......
Read more >
12 Must-Have Multi-Author Management Plugins for WordPress
One of the most popular multi-author WordPress plugins, Co-Authors Plus provides you with everything needed to manage a multi-contributor blog ...
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