Post Editor using Draft js plugins Editor

PostEditor.js

class PostEditor extends Component {
  constructor(props) {
    super(props);
    this.mentionPlugin = createMentionPlugin({
      entityMutability: "IMMUTABLE",
      mentionComponent: MentionComponent // since we want to remove the entire name at once.
    });
    this.state = {
      editorState: EditorState.createEmpty(),
      suggestions: this.props.mentions
    };
  }

  reset = () => {
    this.setState({
      editorState: EditorState.createEmpty()
    });
  };

  onChange = editorState => {
    this.setState({
      editorState
    });
  };

  onSearchChange = ({ value }) => {
    this.setState({
      suggestions: defaultSuggestionsFilter(value, this.props.mentions)
    });
  };

  keyBindingFn = e => {
    // retrun custom commands on keyPress if required
    return getDefaultKeyBinding(e);
  };

  toHtml = () => {
    const contentState = this.state.editorState.getCurrentContent();
    const options = {
      // eslint-disable-next-line consistent-return
      entityStyleFn: entity => {
        const entityType = entity.get("type").toLowerCase();
        if (entityType === "mention") {
          const data = entity.getData();
          return {
            element: "span",
            attributes: {
              "data-mention-id": _.get(data, "mention.id"),
              class: "mention_class"
            },
            style: {
              // Put styles here...
            }
          };
        }
      }
    };
    return stateToHTML(contentState, options);
  };

  handleKeyCommand = command => {
    // handle custom command here;

    const newState = RichUtils.handleKeyCommand(
      this.state.editorState,
      command
    );
    if (newState) {
      this.onChange(newState);
      return cmdState.handled;
    }
    return cmdState.notHandled;
  };

  render() {
    const { MentionSuggestions } = this.mentionPlugin;
    const plugins = [this.mentionPlugin];
    const { className, style, placeholder } = this.props;

    return (
      <div className={`editor ${className}`} style={style}>
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          plugins={plugins}
          keyBindingFn={this.keyBindingFn}
          handleKeyCommand={this.handleKeyCommand}
          placeholder={placeholder}
          ref={element => {
            this.editor = element;
          }}
        />

        <MentionSuggestions
          onSearchChange={this.onSearchChange}
          suggestions={this.state.suggestions}
          entryComponent={EntryComponent}
        />
      </div>
    );
  }
}

PostEditor.propTypes = {
  /**
   * mentions {array} - array of names for `@`mentions to work
   */
  mentions: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string,
      id: PropTypes.string
    })
  ),
  /**
   * className {string} - className applied to top most Wrapper
   */
  className: PropTypes.string,
  /**
   * style {object} - inline style to be applied to top most Wrapper
   */
  style: PropTypes.object,
  /**
   * placeholder {string} - placeholder to display when editor has no text
   */
  placeholder: PropTypes.string
};

PostEditor.defaultProps = {
  mentions: []
};