React-quill: How can i integrate emoji in react-quill ?

[Gladiak]

Hi, i'm using the master version of react-quill but i can't figure out how to add emoji support...

using the info provided with quill-emoji module i've to setup my quill in the following way

const toolbarOptions = {
                        container: [
                            ['bold', 'italic', 'underline', 'strike'],
                            ['emoji'],   
                        ],
                        handlers: {'emoji': function() {}}
                        }
const quill = new Quill(editor, {
    // ...
    modules: {
        // ...
        toolbar: toolbarOptions,
        toolbar_emoji: true,
    }
});

How can i set up react-quill to achieve the same result ?

Thanks, thanks for your work

[Lionkka]

I tried it in many ways, but the following helped me.
I copied files from package to my project and pass Quill as a param

Editor.js

import ReactQuill,{ Quill } from 'react-quill';
import quillEmoji from './quill-emoji';
quillEmoji(Quill)

const Editor = ()=>{
    return <ReactQuill/>
}

quill-emoji>index.js

import './base.scss';
import shortNameEmoji from './module-emoji';
import toolbarEmoji from './module-toolbar-emoji';
import textAreaEmoji from './module-textarea-emoji';

export default function (Quill) {
  shortNameEmoji(Quill);
  toolbarEmoji(Quill);
  textAreaEmoji(Quill);
}

Then I wrapped them as a functions and pass Quill there
Example:

module-emoji.js

import Fuse from 'fuse.js';
import {emojiList} from './emojiList';

export default function (Quill) {
....
 Quill.register('modules/short_name_emoji', ShortNameEmoji);
  return ShortNameEmoji;
};

[simeon-petrov-5]

Hi,
I've tried a lot of variants and imports, but in the end I have no luck with implementing Quill Emoji into ReactQuill ..

I'm building the app in SPFX React project with Gulp.

My imports:
import 'react-quill/dist/quill.snow.css'; import 'quill-mention'; import ReactQuill, { Quill } from 'react-quill';

Currently this is my code for setting up Quill (also using mention extension) is:

`private quillSetup = (userList: any) => {
const atValues = [];
for (const user of userList) {
atValues.push({ id: user.id, value: user.name });
}
const hashValues = [
{ id: 3, value: 'Fredrik Sundqvist 2' },
{ id: 4, value: 'Patrik Sjölin 2' }
];

    this.modules = {
        toolbar: {
            container: [
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }, { 'size': ['small', false, 'large', 'huge'] }],
                ['bold', 'italic', 'underline', 'strike', 'blockquote', 'code-block'],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }, { 'script': 'sub' }, { 'script': 'super' }],
                [{ 'color': [] }, { 'background': [] }],
                ['link', 'image', 'video'],
                [{ 'font': [] }],
                [{ 'align': [] }],
                ['emoji'],
                ['clean']
            ],
            handlers: {
                'emoji': function () { }
            }
        },
        //toolbar_emoji: true,
        // short_name_emoji: true,
        // textarea_emoji: true,
        mention: {
            allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
            mentionDenotationChars: ["@", "#"],
            source: (searchTerm, renderList, mentionChar) => {
                let values;

                if (mentionChar === "@") {
                    values = atValues;
                } else {
                    values = hashValues;
                }

                if (searchTerm.length === 0) {
                    renderList(values, searchTerm);
                } else {
                    const matches = [];
                    for (let i = 0; i < values.length; i++)
                        if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) matches.push(values[i]);
                    renderList(matches, searchTerm);
                }
            },
        }
    };

}`

Where in render I have:
public render() { return ( <div className={css(styles.editor)}> <ReactQuill value={this.state.initialValue} onChange={this.handleEditorChange} modules={this.modules} /> </div> ); }

In the above answer from @Lionkka The imports

import quillEmoji from 'quill-emoji';
quillEmoji(Quill);

Are giving me an error and the whole app isn't loading. The same is present when I add

toolbar_emoji: true,
short_name_emoji: true,
textarea_emoji: true,

and the errors are:

[rajuashok]

Any update here? I'm trying to add emoji support to react-quill as well but, like the first author, it's not working. Here's my code:

toolbar = {
      container: [[
        ['bold', 'italic', 'underline'],
        ['emoji']
      ]],
      handlers: {'emoji': function() {}}
}
<ReactQuill
          id={this.props.id}
          modules={{
            toolbar,
            keyboard: { bindings: { tab: false } },
            "emoji-toolbar": true,
            "emoji-textarea": true,
            "emoji-shortname": true,
          }} />

I then get the following error:

Uncaught (in promise) TypeError: moduleClass is not a constructor
    at BubbleTheme.addModule (quill.js:8011)
    at BubbleTheme.addModule (quill.js:8943)
    at quill.js:8003
    at Array.forEach (<anonymous>)
    at BubbleTheme.init (quill.js:8001)
    at new Quill (quill.js:1499)
    at Object.createEditor (mixin.js:11)
    at Object.componentDidMount (component.js:144)
    at Object.chainedFunction [as componentDidMount] (factory.js:587)
    at commitLifeCycles (react-dom.development.js:18115)
    at commitAllLifeCycles (react-dom.development.js:19674)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at commitRoot (react-dom.development.js:19898)
    at react-dom.development.js:21446
    at Object.unstable_runWithPriority (scheduler.development.js:255)
    at completeRoot (react-dom.development.js:21445)
    at performWorkOnRoot (react-dom.development.js:21368)
    at performWork (react-dom.development.js:21273)
    at performSyncWork (react-dom.development.js:21247)
    at requestWork (react-dom.development.js:21102)
    at scheduleWork (react-dom.development.js:20915)
    at Object.enqueueSetState (react-dom.development.js:11596)
    at Connect.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:336)
    at Connect.onStateChange (connectAdvanced.js:245)
    at dispatch (redux.js:224)
    at middleware.js:13
    at redux-logger.js:458
    at index.js:11
    at dispatch (redux.js:594)
    at _callee8$ (EditorContainer.tsx:33)
    at tryCatch (runtime.js:62)
    at Generator.invoke [as _invoke] (runtime.js:288)
    at Generator.prototype.(anonymous function) [as next] (http://localhost:3001/static/js/1.chunk.js:2290:21)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)

[derekeeeeely]

like this:

import { Component } from 'react';
import ReactQuill, { Quill } from 'react-quill';
import quillEmoji from 'quill-emoji';
import 'react-quill/dist/quill.snow.css';

const { EmojiBlot, ShortNameEmoji, ToolbarEmoji, TextAreaEmoji } = quillEmoji;

Quill.register({
  'formats/emoji': EmojiBlot,
  'modules/emoji-shortname': ShortNameEmoji,
  'modules/emoji-toolbar': ToolbarEmoji,
  'modules/emoji-textarea': TextAreaEmoji
}, true);

export default class MyComponent extends Component {
  constructor(props: any) {
    super(props);
    this.state = {
      text: "",
    }
  }

  modules = {
    toolbar: [
      [{ 'font': [] }, { 'header': [] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote', 'code-block'],
      [{ 'color': [] }, { 'background': [] }],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
      [{ 'align': [] }],
      ['emoji'],
      ['link', 'image'],
      ['clean']
    ],
    'emoji-toolbar': true,
    "emoji-textarea": true,
    "emoji-shortname": true,
  }

  formats = ['font', 'header', 'bold', 'italic', 'underline', 'strike', 'blockquote', 'code-block', 'color', 'background', 'list', 'indent', 'align', 'link', 'image', 'clean', 'emoji']

  render() {
    return (
      <div className="text-editor">
        <ReactQuill
          theme="snow"
          modules={this.modules}
          formats={this.formats}
        />
      </div>
    );
  }
}

hope it works for u

[KiranVH]

Hi @derekeeeeely

The solution you provided working fine but I have little problem instead of a popup where it should display emoji's. It's displaying at the bottom of the editor. Any suggestions ??

Thanks in advance

[rafaellelis]

The final working solution is here: https://github.com/contentco/quill-emoji/issues/75#issuecomment-520791828

It was missing import the css:

import "quill-emoji/dist/quill-emoji.css";