Draft js decorator not working with plugins

draft js with its mention plugin

When I use CompositeDecorator with draft js plugins like mention, linkify, my decorator gets overridden and it doesn’t work.

const compositeDecorator = new CompositeDecorator([{
  strategy: hashtagStrategy,
  component: HashtagSpan
}]);
EditorState.createEmpty(compositeDecorator);

The above code doesn’t work. It behaves like your decorator doesn’t exist. This happens because draft js overrides your decorator in the onChange of your editor when you are also using plugins.

One workaround is this: We create our own bare bones plugin by just creating a hashtagDecorator object which will have decorators array with an object containing strategy and component just like above. (Because plugins are just objects which contain decorators array and some other features, which are not required here right now)

import createLinkifyPlugin from 'draft-js-linkify-plugin';
// It will act like a plugin now
const hashtagDecoratorPlugin = { 
  decorators: [
    {
      strategy: hashtagStrategy,
      component: HashtagSpan
    }
  ]
};
const plugins = [createLinkifyPlugin(), hashtagDecoratorPlugin] 
<Editor
    editorState={this.props.editorState}
    onChange={this.onChange}
    plugins={plugins}
    ref={element => {
      this.editor = element;
    }}
/>

In the above code we are creating hashtagDecorator which is our own plugin.