Consistent Emoji display across all platforms, independent of the host system.
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.
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.
To use simply type : which will show an autocomplete with matching emojis.
npm install [email protected] --savenpm install [email protected] --save// 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, EmojiSelect } = 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.
// The EmojiSelect component also is internally connected to the editor. He add
// a button which allows open emoji select popup.
const MyEditor = ({ editorState, onChange }) => (
<div>
<Editor
editorState={editorState}
onChange={onChange}
plugins={[emojiPlugin]}
/>
<EmojiSuggestions />
<EmojiSelect />
</div>
);
export default MyEditor;
The plugin ships with a default styling available at this location in the installed package: node_modules/draft-js-emoji-plugin/lib/plugin.css
npm i style-loader css-loader --save-devmodule.exports = {
module: {
loaders: [
{
test: /plugin\.css$/,
loaders: [
'style', 'css',
],
},
],
},
};
import 'draft-js-emoji-plugin/lib/plugin.css'; // eslint-disable-line import/no-unresolved
Please help, by submiting a Pull Request to the documentation.
.emojiSelectPopoverToneSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
}falsepriorityList: {
':see_no_evil:': ["1f648"],
':raised_hands:': ["1f64c"],
':100:': ["1f4af"],
}selectGroups: [{
title: 'Society',
icon: '👥',
categories: ['people', 'food', 'travel'],
}, {
title: 'Objects & symbols',
icon: '❤️',
categories: ['objects', 'symbols'],
}]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, EmojiSelect } = 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>
<div className={editorStyles.editor} onClick={this.focus}>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={plugins}
ref={(element) => { this.editor = element; }}
/>
<EmojiSuggestions />
</div>
<div className={editorStyles.options}>
<EmojiSelect />
</div>
</div>
);
}
}
.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;
}
.options {
margin-bottom: 20px;
}