How to use draft-js-emoji-plugin - 10 common examples

import 'prismjs/themes/prism.css';
import 'prismjs/components/prism-python';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-css';
import 'prismjs/components/prism-sass';
import 'prismjs/components/prism-scss';

import './CortoEditor.scss';
import createInlineCodePlugin from './plugins/inlineCodePlugin';
import createMarkdownHeadersPlugin from './plugins/MarkDownHeaders';
import createCodeBlockPlugin from './plugins/CodeBlockPlugin';
import { createInlineBreakoutPlugin } from './plugins/inlineBreakoutPlugin';
import { createMarkDownListItemsPlugin } from './plugins/MarkdownListitems';

const emojiPlugin = createEmojiPlugin();
const inlineCodePlugin = createInlineCodePlugin();
const markdownHeader = createMarkdownHeadersPlugin();
const codeBlockPlugin = createCodeBlockPlugin();

const markdownLists = createMarkDownListItemsPlugin();
// loadLanguages(["javascript", "python"])
const prismPlugin = createPrismPlugin({
  // It's required to provide your own instance of Prism
  prism: Prism,
});

const inlineBreakoutPlugin = createInlineBreakoutPlugin();

const { EmojiSuggestions } = emojiPlugin;

export class CortoDraftEditor extends React.Component {

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

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({
  useNativeArt: true
});
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 CustomEmojiEditor extends Component {

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

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

if (props.isTopPopup) {
        return {
          top: settings.decoratorRect.y - 30 + 'px', // change this value (30) for manage the distance between cursor and bottom edge of popover
          transform: 'scale(1) translateY(-100%)'
        };
      }

      return {
        top: settings.decoratorRect.y + 'px',
        transform: 'scale(1)'
      };
    };

    this.linkPlugin = createLinkPlugin();
    this.toolbarPlugin = createToolbarPlugin();
    this.emojiPlugin = createEmojiPlugin({
      useNativeArt: true,
      selectButtonContent: ,
      positionSuggestions: settings => {
        return {
          left: settings.decoratorRect.x + 'px',
          boxShadow: '0 0 12px 0 rgba(0, 0, 0, 0.1)',
          transformOrigin: '1em 0%',
          position: 'fixed',
          transition: 'all 0.2s cubic-bezier(0.3, 1.2, 0.2, 1) 0s',
          ...options(settings)
        };
      }
    });
  }

import { useOnClickOutside } from '../../common/hooks';
import { theme } from '../../common/theme';
import { uploadPhoto } from '../../common/lib/api';

import InviteUserModal from '../modal/invite-user';
// import GiphyModal from '../modal/giphy';

import { generateImageUrl } from '../../common/utils';

const dropzoneRef = React.createRef();

const mentionPlugin = createMentionPlugin({
  mentionPrefix: '@',
});
const emojiPlugin = createEmojiPlugin();
const { MentionSuggestions } = mentionPlugin;
const { EmojiSuggestions, EmojiSelect } = emojiPlugin;
const plugins = [mentionPlugin, emojiPlugin];

let allUsernames = [];

const EmojiButton = () => (
  
    {({ hovered, bind }) => (
      
        
      
    )}
  
);

import React, { Component } from 'react'
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor'
import createEmojiPlugin from 'draft-js-emoji-plugin'

import 'draft-js-emoji-plugin/lib/plugin.css'
const emojiPlugin = createEmojiPlugin()

/*
import styles from './Emoji.css'
const emojiPlugin = createEmojiPlugin({ theme: styles })
*/

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)

constructor(props) {
    super(props);
    this.editor = React.createRef();
    this.focus = this.focus.bind(this);

    const emojiPlugin = createEmojiPlugin(emojiConfig);
    const { EmojiSelect } = emojiPlugin;
    this.plugins = [emojiPlugin];
    this.components = { EmojiSelect };
  }

import createBlockDndPlugin from 'draft-js-drag-n-drop-plugin';
import {
  HeadlineOneButton,
  HeadlineTwoButton,
  BlockquoteButton,
  CodeBlockButton,
  UnorderedListButton,
  OrderedListButton,
} from 'draft-js-buttons';
import { convertFromRaw, EditorState } from 'draft-js';
import styles from './styles.css';
import stickers from './stickers';
import mentions from './mentions';
import initialState from './initialState';

const emojiPlugin = createEmojiPlugin();
const hashtagPlugin = createHashtagPlugin();
const linkifyPlugin = createLinkifyPlugin();
const mentionPlugin = createMentionPlugin();
const undoPlugin = createUndoPlugin();
const stickerPlugin = createStickerPlugin({ stickers });
const inlineToolbarPlugin = createInlineToolbarPlugin();
const sideToolbarPlugin = createSideToolbarPlugin();
const focusPlugin = createFocusPlugin();
const blockDndPlugin = createBlockDndPlugin();
const alignmentPlugin = createAlignmentPlugin();
const decorator = composeDecorators(
  alignmentPlugin.decorator,
  focusPlugin.decorator,
  blockDndPlugin.decorator,
);
const imagePlugin = createImagePlugin({ decorator });

constructor(props) {
    super(props);

    const emojiPlugin = createEmojiPlugin();

    this.state = {
      emojiPlugin,
    };
  }