Emoji

Consistent Emoji display across all platforms, independent of the host system.

Attribution to EmojiOne

The beautiful Emoji art used in this plugin is provided by the Emoji One project. Personal or non-commercial use of the emojis do not require attribution. For the rights to use our emojis still for free in commercial projects proper attribution in form of a link is required. More here: http://emojione.com/licensing.

Implementation

Emoji unicode characters are wrapped in a span, hidden, and displayed instead through a background image. This creates consistency across all platforms while maintaining natural copy/pasting functionality.

Usage

To use simply type : which will show an autocomplete with matching emojis.

Getting Started

npm install [email protected] --save
npm install [email protected] --save
gettingStarted.js
// It is important to import the Editor which accepts plugins.
import Editor from 'draft-js-plugins-editor'; // eslint-disable-line import/no-unresolved
import createEmojiPlugin from 'draft-js-emoji-plugin'; // eslint-disable-line import/no-unresolved
import React from 'react';

// Creates an Instance. At this step, a configuration object can be passed in
// as an argument.
const emojiPlugin = createEmojiPlugin();
const { EmojiSuggestions } = emojiPlugin;

// The Editor accepts an array of plugins. In this case, only the emojiPlugin is
// passed in, although it is possible to pass in multiple plugins.
// The EmojiSuggestions component is internally connected to the editor and will
// be updated & positioned once the user starts the autocompletion with a colon.
const MyEditor = ({ editorState, onChange }) => (
  <div>
    <Editor
      editorState={editorState}
      onChange={onChange}
      plugins={[emojiPlugin]}
    />
    <EmojiSuggestions />
  </div>
);

export default MyEditor;

Importing the default styles

The plugin ships with a default styling available at this location in the installed package:  node_modules/draft-js-emoji-plugin/lib/plugin.css

Webpack Usage

  • 1. Install Webpack loaders:  npm i style-loader css-loader --save-dev
  • 2. Add the below section to Webpack config (if your config already has a loaders array, simply add the below loader object to your existing list.
    module.exports = {
      module: {
        loaders: [
          {
            test: /plugin\.css$/,
            loaders: [
              'style', 'css',
            ],
          },
        ],
      },
    };
    
  • 3. Add the below import line to your component to tell Webpack to inject the style to your component.
    import 'draft-js-emoji-plugin/lib/plugin.css'; // eslint-disable-line import/no-unresolved
    
  • 4. Restart Webpack.

Browserify Usage

Please help, by submiting a Pull Request to the documentation.

Configuration Parameters

themeObject of CSS classes with the following keys.
emoji:CSS class for the emoji wrapper.
emojiSuggestions:CSS class for suggestions component.
emojiSuggestionsEntry:CSS class for an entry in the suggestions component.
emojiSuggestionsEntryFocused:CSS class for the focused entry in the suggestions component.
emojiSuggestionsEntryText:CSS class for an entry’s text in the suggestions component.
emojiSuggestionsEntryIcon:CSS class for an entry’s avatar image in the suggestions component.
positionSuggestionsThe function can be used to manipulate the position of the popover containing the suggestions. It receives one object as arguments containing the visible rectangle surrounding the decorated search string including the colon. In addition the object contains prevProps, prevState, state & props. An object should be returned which can contain all sorts of styles. The defined properties will be applied as inline-styles.
imagePathThe Emojis are displayed using SVGs. The full path is constructed of multiple parts like this: `${imagePath}${unicode}.${imageType}${cacheBustParam}`. The default imagePath is: '//cdn.jsdelivr.net/emojione/assets/svg/', but can be overwritten with this config.
imageTypeThe default imageType is: 'svg', but can be overwritten with this config.
allowImageCacheBy default ${cacheBustParam} is being changed with the new version. If you want to skip the cache busting, you can use this property. The default value of allowImageCache is: false
priorityListThese entries will be show first in the EmojiSuggestions dropdown after typing `:`. Must be an object which mus contain Emoji entries used by EmojiOne e.g.
priorityList: {
  ':see_no_evil:': ["1f648"],
  ':raised_hands:': ["1f64c"],
  ':100:': ["1f4af"],
}

EmojiSuggestions

The EmojiSuggestions component is part of the plugin and should placed somewhere in the JSX after the Editor. It takes the following props:
onSearchChangeA callback which is triggered whenever the search term changes. The first argument is an object which constains the search term in the property value.
onOpenA callback which is triggered whenever the suggestions popover opens.
onCloseA callback which is triggered whenever the suggestions popover closes.

Simple Emoji Example

SimpleEmojiEditor.js
import React, { Component } from 'react';
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor'; // eslint-disable-line import/no-unresolved
import createEmojiPlugin from 'draft-js-emoji-plugin'; // eslint-disable-line import/no-unresolved
import editorStyles from './editorStyles.css';

const emojiPlugin = createEmojiPlugin();
const { EmojiSuggestions } = emojiPlugin;
const plugins = [emojiPlugin];
const text = `Cool, we can have all sorts of Emojis here. 🙌
🌿☃️🎉🙈 aaaand maybe a few more here 🐲☀️🗻 Quite fun!`;

export default class SimpleEmojiEditor extends Component {

  state = {
    editorState: createEditorStateWithText(text),
  };

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

  focus = () => {
    this.editor.focus();
  };

  render() {
    return (
      <div className={editorStyles.editor} onClick={this.focus}>
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          plugins={plugins}
          ref={(element) => { this.editor = element; }}
        />
        <EmojiSuggestions />
      </div>
    );
  }
}
editorStyles.js
.editor {
  box-sizing: border-box;
  border: 1px solid #ddd;
  cursor: text;
  padding: 16px;
  border-radius: 2px;
  margin-bottom: 2em;
  box-shadow: inset 0px 1px 8px -3px #ABABAB;
  background: #fefefe;
}

.editor :global(.public-DraftEditor-content) {
  min-height: 140px;
}