JSPM

  • Created
  • Published
  • Downloads 4853
  • Score
    100M100P100Q125103F
  • License MIT

Emoji Plugin for DraftJS

Package Exports

  • draft-js-emoji-plugin
  • draft-js-emoji-plugin/lib/plugin.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (draft-js-emoji-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

DraftJS Emoji Plugin

This is a plugin for the draft-js-plugins-editor.

This plugin provides consistent Emoji display across all platforms, independent of the host system.

Usage

import createEmojiPlugin from 'draft-js-emoji-plugin';

const emojiPlugin = createEmojiPlugin();

Advanced Usage

const emojiPlugin = createEmojiPlugin({
  priorityList: {
    '🙈': ["1f648"],
    '🙌': ["1f64c"],
    '💯': ["1f4af"],
  }
});
// emojis in priorityList will show up after user typed ':'

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

Follow the below steps to import the css file by using Webpack's style-loader and css-loader.

  1. Install Webpack loaders: npm install style-loader css-loader --save-dev

  2. Add the below section to Webpack config (if your Webpack already has loaders array, simply add the below loader object({test:foo, loaders:bar[]}) as an item in the array).

    module: {
      loaders: [{
        test: /\.css$/,
        loaders: [
          'style-loader', 'css'
        ]
      }]
    }
  3. Add the below import line to your component to tell Webpack to inject style to your component.

    import 'draft-js-emoji-plugin/lib/plugin.css';
  4. Restart Webpack.