How to use draft-js-mention-plugin - 10 common examples

// Creates an Instance. Passing in an Immutable.js List of mentions as an
// argument.
const mentions = fromJS([
  {
    name: 'Max Stoiber',
    link: 'https://twitter.com/mxstbr',
    avatar: 'https://pbs.twimg.com/profile_images/681114454029942784/PwhopfmU_400x400.jpg',
  },
  {
    name: 'Nik Graf',
    link: 'https://twitter.com/nikgraf',
    avatar: 'https://pbs.twimg.com/profile_images/535634005769457664/Ppl32NaN_400x400.jpeg',
  },
]);

const mentionPlugin = createMentionPlugin({ mentions });

// The Editor accepts an array of plugins. In this case, only the mentionPlugin
// is passed in, although it is possible to pass in multiple plugins.
const MyEditor = ({ editorState, onChange }) => (
  
);

export default MyEditor;

constructor(props) {
    super(props);

    // variable block
    this.mentionPlugin = createMentionPlugin({
      mentionTrigger: "{{",
      mentionComponent: mentionProps =>
        <span>
          {mentionProps.children}
        </span>
    });
    // formatter block
    this.mentionPluginFormatter = createMentionPlugin({
      mentionTrigger: "@",
      mentionComponent: mentionProps =&gt;
        <span>
          {mentionProps.children}
        </span>
    });
    // selector block
    this.mentionPluginSelector = createMentionPlugin({
      mentionTrigger: "[[",
      mentionComponent: mentionProps =&gt;
        <span>
          {mentionProps.children}
        </span>
    });

    let editorState = EditorState.createEmpty();

import createUndoPlugin from 'draft-js-undo-plugin'; // eslint-disable-line import/no-unresolved
import {
  // convertToRaw,
  // convertFromRaw,
  ContentState,
  EditorState,
} from 'draft-js';
import styles from './styles.css';
import stickers from './stickers';
import mentions from './mentions';
// import initialState from './initialState';

const emojiPlugin = createEmojiPlugin();
const hashtagPlugin = createHashtagPlugin();
const linkifyPlugin = createLinkifyPlugin();
const mentionPlugin = createMentionPlugin();
const undoPlugin = createUndoPlugin();
const stickerPlugin = createStickerPlugin({
  stickers,
});
const { MentionSuggestions } = mentionPlugin;
const { EmojiSuggestions } = emojiPlugin;
const { StickerSelect } = stickerPlugin;
const { UndoButton, RedoButton } = undoPlugin;

const plugins = [
  emojiPlugin,
  hashtagPlugin,
  stickerPlugin,
  linkifyPlugin,
  mentionPlugin,
  undoPlugin,

maxWidth: '440px',
    background: '#fff',
    borderRadius: '2px',
    boxShadow: '0px 4px 30px 0px rgba(220, 220, 220, 1)',
    cursor: 'pointer',
    paddingTop: '8px',
    paddingBottom: '8px',
    zIndex: '2',
    display: 'flex',
    flexDirection: 'column',
    boxSizing: 'border-box',
    transform: 'scale(0)'
  }
};

export const mentionPlugin = createMentionPlugin({
  // TODO(mime): theme migration
  //theme: styles,
});
const { MentionSuggestions } = mentionPlugin;

export default function Mentions({ mentions }) {
  const [suggestions, setSuggestions] = useState(normalizedData() || []);

  function normalizedData() {
    if (!mentions) {
      return [];
    }

    return mentions.map(mention => {
      return {
        name: mention.name || mention.username,

onSearchChange = ({ value }) => {
    if (this.props.mentionSearchAsync !== undefined) {
      /* async */
      this.props.mentionSearchAsync(value)
      .then((data) => { this.setState({suggestions: fromJS(data.suggestions)}) })
    } else {
      /* static list of users */
      this.setState({
        suggestions: defaultSuggestionsFilter(value, this.props.mentions),
      })
    }
  }

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

this.onSearchChangeFormatter = ({value}) => {
      this.setState({
        suggestionsFormatter: defaultSuggestionsFilter(value, suggestionsFormatter)
      });
    };
    // selectors

import merge from 'lodash/merge';
import draftJsMentionPlugin from 'draft-js-mention-plugin';
import getTypeByTrigger from 'draft-js-mention-plugin/lib/utils/getTypeByTrigger';
import createPositionSuggestions from '../helpers/createPositionSuggestions';
import Mention from './components/Mention';

export const mentionTrigger = '@';
export const entityType = getTypeByTrigger(mentionTrigger);
export const mentionEntityType = entityType; // alias
export const entityMutability = 'IMMUTABLE';
export const mentionRegExp = '[\\-\\w\u4e00-\u9eff\u3040-\u309F\u30A0-\u30FF\uAC00-\uD7A3\u3130-\u318F]*';

export const defaultConfig = {
  mentionTrigger,
  entityMutability,
  positionSuggestions: createPositionSuggestions(
    'bottom',
    ({ state, props }) => state.isActive && props.suggestions.length > 0
  ),
  mentionRegExp,
  mentionComponent: Mention
};

const createMentionPlugin = config => {

);
};

const extractEntries = mention => {
  const entries = mention._root.entries;
  const keys = _.map(entries, entry => entry[0]);
  const values = _.map(entries, entry => entry[1]);

  return _.object(keys, values);
};

const mentionPlugin = createMentionPlugin({
  mentionPrefix: '@',
});

const { MentionSuggestions } = mentionPlugin;
const plugins = [mentionPlugin];

export default class Editor extends Component {
  constructor(props) {
    super(props);

    this.state = {
      editorState: EditorState.createEmpty(),
      collectedMentions: [],
      suggestions: this.props.mentions,
    };

this.toggleInlineStyle = this.toggleInlineStyle.bind(this)
    this.onClickOutside = this.onClickOutside.bind(this)
    this.onPost = this.onPost.bind(this)
    this.cancelEdit = this.cancelEdit.bind(this)
    this.clearState = this.clearState.bind(this)
    this.getEditorState = this.getEditorState.bind(this)
    this.setEditorState = this.setEditorState.bind(this)
    this.setUploadState = this.setUploadState.bind(this)
    this.onSearchChange = this.onSearchChange.bind(this)
    this.onAddMention = this.onAddMention.bind(this)
    this.openFileUpload = this.openFileUpload.bind(this)
    this.processUploadedFiles = this.processUploadedFiles.bind(this)
    this.getDownloadAttachmentFilename = this.getDownloadAttachmentFilename.bind(this)
    this.removeRawFile = this.removeRawFile.bind(this)
    this.removeFile = this.removeFile.bind(this)
    this.mentionPlugin = createMentionPlugin({ mentionPrefix: '@' })
    this.plugins = plugins.slice(0)
    this.plugins.push(this.mentionPlugin)
  }