import Editor from 'draft-js-plugins-editor';
import createEmojiMartPlugin from 'draft-js-emoji-mart-plugin';
import data from 'emoji-mart/data/apple.json';

import 'emoji-mart/css/emoji-mart.css'

const emojiPlugin = createEmojiMartPlugin({
  data,
  set: 'apple'
});

// NimblePicker from emoji-mart binded with draftjs
const { Picker } = emojiPlugin;

const MyEditor = ({ editorState, onChange }) => (
  <div>
    <Editor
      editorState={editorState}
      onChange={onChange}
      plugins={[emojiPlugin]}
    />
    {/*
      Any props supported by emoji-mart NimblePicker.
      Feel free to style it and trigger for view.
    */}
    <Picker
      perLine={7}
      showPreview={false}
    />
  </div>
)

export default MyEditor;

// MyEditor.jsx
export const emojiPlugin = createEmojiMartPlugin({
  data,
  set: 'apple'
});

// Text.jsx
import { emojiPlugin } from './MyEditor.jsx';

const { Emoji } = emojiPlugin;

const TextViewer = ({ props }) => (
  <div>
    Useful text with emoji <Emoji decoratedText={'😈'} />
  </div>
);

export default TextViewer;

import { unicodeEmojiRegexp } from 'draft-js-emoji-mart-plugin/lib/constants';
import { emojiPlugin } from './MyEditor.jsx';

const { Emoji } = emojiPlugin;

// Not for production usage.
const parsedText = 'some string with 😈 '.split(unicodeEmojiRegexp).map(term => {
  if (term.match(unicodeEmojiRegexp)) {
    return <Emoji decoratedText={term} />
  }

  return term;
});

console.log(parsedText); // ['some string with', <Emoji decoratedText={'😈'}>]

// Render it by React
const MyEmojifiedText = () => (
  <div>{parsedText}</div>
);