example.js

import React from 'react';
import {
  convertFromRaw,
  EditorState,
} from 'draft-js';
import DraftJSPluginsEditor from 'draft-js-plugins-editor';
import createMentionPlugin from 'draft-js-mention-plugin';
import { fromJS } from 'immutable';
import forEach from 'lodash/forEach';

function createWithContent() {
  const initialState = {
    "entityMap": {
      "0": {
        "type": "mention",
        "mutability": "IMMUTABLE",
        "data": {
          "mention": {
            "link": "/user/17",
            "name": "Maxime Rota",
            "avatar": "http://1A922.http.par01.cdn.softlayer.net/preprod/line_operator.jpg"
          }
        }
      }
    },
    "blocks": [{
      "key": "en8l2",
      "depth": 0,
      "inlineStyleRanges": [],
      "type": "unstyled",
      "entityRanges": [{
        "key": 0,
        "length": 11,
        "offset": 0
      }],
      "text": "Maxime Rota "
    }]
  };
  // workaround for the following issue: https://github.com/draft-js-plugins/draft-js-plugins/issues/232#issuecomment-216664741
  forEach(initialState.entityMap, (val) => {
    val.data.mention = fromJS(val.data.mention);
  });
  console.log('workaround done');
  // end of workaround
  const contentState = convertFromRaw(initialState);
  return EditorState.createWithContent(contentState);
}

export default class Editor extends React.Component {
  static propTypes = {
    wrapperClass: React.PropTypes.string,
    // mention props
    enableMentions: React.PropTypes.bool,
    onSearchChange: React.PropTypes.func,
    suggestions: React.PropTypes.object,
  }
  static defaultProps = {
    enableMentions: true,
  }
  constructor(props) {
    super(props);
    this._plugins = [];
    this._components = {};
    if (props.enableMentions) {
      const mentionPlugin = createMentionPlugin({
        theme: mentionsStyles,
        positionSuggestions: this.positionSuggestions,
      });
      this._plugins.push(mentionPlugin);
      this._components.MentionSuggestions = mentionPlugin.MentionSuggestions;
    }
  }
  positionSuggestions = ({ decoratorRect, state, props }) => {
    const wrapperRect = this.refs.editorWrapper.getBoundingClientRect();
    const left = decoratorRect.left - wrapperRect.left;
    const top = decoratorRect.top - wrapperRect.top;

    let transform;
    let transition;

    if (state.isActive & props.suggestions.size > 0) {
      transform = 'scale(1)';
      transition = 'all 0.25s cubic-bezier(.3,1.2,.2,1)';
    } else if (state.isActive) {
      transform = 'scale(0)';
      transition = 'all 0.35s cubic-bezier(.3,1,.2,1)';
    }

    return {
      position: 'absolute',
      left: `${left}px`,
      top: `${top}px`,
      transform,
      transformOrigin: '1em 0%',
      transition,
    };
  }
  focus = () => {
    this._editor.focus();
  }
  render() {
    const { MentionSuggestions } = this._components;
    return (
      <div ref="editorWrapper" onClick={this.focus}>
        <DraftJSPluginsEditor
          onChange={() => null}
          plugins={this._plugins}
          ref={(c) => this._editor = c}
          editorState={createWithContent()}
          readOnly
        />
        {this.props.enableMentions && !this.props.readOnly &&
          <MentionSuggestions
            onSearchChange={this.props.onSearchChange}
            suggestions={this.props.suggestions}
          />
        }
      </div>
    );
  }
}