Emoji-mart integration with DraftJS

This plugin for draft-js-editor

Demo

Package includes its TypeScript Definitions

Install

npm install -S draft-js-emoji-mart-plugin

Install peer dependencies

npm install -S emoji-mart draft-js

Usage

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;

Checkout stories/CustomEditor.tsx for detailed example.

Configuration Parameters

| Name | Required | Default | Description | | ---- | -------- | ------- | ----------- | | data | true | undefined | Dataset from emoji-mart. Used for bind picker and replace emoji in editor. | | set | true | undefined | Addtional param to Dataset, used by emoji-mart. | | sheetSize | false | 32 | Sheet size wich pass to Emoji component from emoji-mart. | | emojiSize | false | sheetSize / 2 | Size wich pass to Emoji component from emoji-mart. By default sheetSize / 2. | | onChange | false | undefined | Call then DraftJS recieve new state. |

Additional plugin feature

Emoji component

Plugin provide Emoji component, wich could replace native utf-8 emoji by NimbleEmoji component from emoji-mart.

// 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;

Emoji RegExp

Useful to find native emoji in string. Could be used with Emoji component provided by plugin for replace emoji in plane text.

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>
);

Older versions

Last version with supports draft-js 0.10 and draft-js-plugins-editor 2.x

There is no changes on plugin usage

npm install -S [email protected]

Development

Run development env

npm run watch # for build ts on change
npm run storybook # run sandbox with base example

Local build

npm run lint
npm run build # build ts by babel and generate typings

Active maintenance with care and ❤️.

Feel free to send a PR.