how to use it in react-quill? about quill-emoji HOT 3 OPEN

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

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

    modules = {
        toolbar: [
            ...
            ["emoji"],
            ["clean"],
        ],

        "emoji-toolbar": true,
        "emoji-textarea": false,
        "emoji-shortname": true,
}


    formats = ["header", "bold", "italic", "underline", "strike", "list", "indent", "align", "clean", "emoji"];

    render() {
        return (
                <ReactQuill
                    modules={this.modules}
                    formats={this.formats}

from quill-emoji.

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

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

    modules = {
        toolbar: [
            ...
            ["emoji"],
            ["clean"],
        ],

        "emoji-toolbar": true,
        "emoji-textarea": false,
        "emoji-shortname": true,
}


    formats = ["header", "bold", "italic", "underline", "strike", "list", "indent", "align", "clean", "emoji"];

    render() {
        return (
                <ReactQuill
                    modules={this.modules}
                    formats={this.formats}

would you be able to provide me the full code for emoji file. I am still unable to click and add emoji's from popup in toolbar but for text-area it is working fine

from quill-emoji.

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

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

    modules = {
        toolbar: [
            ...
            ["emoji"],
            ["clean"],
        ],

        "emoji-toolbar": true,
        "emoji-textarea": false,
        "emoji-shortname": true,
}


    formats = ["header", "bold", "italic", "underline", "strike", "list", "indent", "align", "clean", "emoji"];

    render() {
        return (
                <ReactQuill
                    modules={this.modules}
                    formats={this.formats}

would you be able to provide me the full code for emoji file. I am still unable to click and add emoji's from popup in toolbar but for text-area it is working fine

emoji-close-div is covering everything that make the popup close

from quill-emoji.