Custom decorators are overwritten when using the draft-js-plugins-editor

It seems that whatever custom decorators I’m using will get over-written when the draft-js-plugins-editor mounts in componentWillMount().

Below is the code I am using, which is supposed to turn the text red when it is detected that it begins with a # symbol. If I take out the plugins prop and use the official draft-js Editor component, it works as expected, but with the draft-js-plugins-editor, it does not run my decorators at all (I’ve tried putting a console log inside my hastagStrategy).

import React from 'react';
import {
  // Editor,
  EditorState,
  RichUtils,
  CompositeDecorator,
  convertToRaw,
} from 'draft-js';

import {hashtagStrategy, HashtagSpan} from './hashtag';

import Editor from 'draft-js-plugins-editor';
import createLinkifyPlugin from 'draft-js-linkify-plugin';
const linkifyPlugin = createLinkifyPlugin();
const plugins = [
  linkifyPlugin,
];

export default class App extends React.Component {
  constructor(props) {
    super(props);

    const decorator = new CompositeDecorator([
      {
        strategy: hashtagStrategy,
        component: HashtagSpan,
      }
    ]);

    this.state = {editorState: EditorState.createEmpty(decorator)};
    this.onChange = (editorState) => this.setState({editorState});
    this.handleKeyCommand = (command) => this._handleKeyCommand(command);
  }

  _handleKeyCommand(command) {
    const newState = RichUtils.handleKeyCommand(this.state.editorState, command);
    if (newState) {
      this.onChange(newState);
      return true;
    }
    return false;
  }

  _onBoldClick() {
    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'));
  }

  _logState() {
    const content = this.state.editorState.getCurrentContent();
    console.log(convertToRaw(content));
  }

  render() {
    const {editorState} = this.state;
    return (
      <div id="content">
        <h1>Draft Editor</h1>
        <button onClick={this._onBoldClick.bind(this)}>Bold</button>
        <div className="editor">
          <Editor
            editorState={editorState}
            onChange={this.onChange}
            handleKeyCommand={this.handleKeyCommand}
            plugins={plugins}
          />
        </div>
        <button onClick={this._logState.bind(this)}>Log State</button>
      </div>
    );
  }
}

Here’s the other file if you want to test it yourself:

import React from 'react';

export function hashtagStrategy(contentBlock, callback) {
  const text = contentBlock.getText();
  const regex = /\#[\w\u0590-\u05ff]+/g;
  let matchArr, start;
  while ((matchArr = regex.exec(text)) !== null) {
    start = matchArr.index;
    callback(start, start + matchArr[0].length);
  }
}

export const HashtagSpan = (props) => {
  return <span {...props} style={{color: 'red'}}>{props.children}</span>;
}

[nikgraf]

This was solved with release of the 1.0 version.

[nikgraf]

Hey @adrianmc, thanks for letting us know! That’s something we didn’t do in the first version.

I’m currently working on improving the editor to allow people passing in custom decorators. I keep you posted once we have finished this and cut a new release. For now I recommend to create your own plugin which allows you do provide a decorator as well.