@rytrox/quill-emoji-mart/fesm2022/rytrox-quill-emoji-mart.mjs

Module Extension for [quill](https://github.com/slab/quill) that introduces [emoji-mart](https://github.com/missive/emoji-mart).

import { Module } from 'quill';
import Toolbar from 'quill/modules/toolbar';
import data from '@emoji-mart/data';
import { Picker } from 'emoji-mart';

class EmojiModule extends Module {
    constructor(quill, options) {
        super(quill, {
            ...options,
            theme: 'light',
            data: data
        });
        const toolbar = this.quill.getModule('toolbar');
        if (toolbar instanceof Toolbar) {
            this.toolbar = toolbar;
            this.button = this.toolbar.container?.querySelector('button.ql-emoji') ?? undefined;
            if (this.button) {
                this.button.innerHTML = '<svg viewbox="0 0 18 18"><circle class="ql-fill" cx="7" cy="7" r="1"></circle><circle class="ql-fill" cx="11" cy="7" r="1"></circle><path class="ql-stroke" d="M7,10a2,2,0,0,0,4,0H7Z"></path><circle class="ql-stroke" cx="9" cy="9" r="6"></circle></svg>';
                this.button.addEventListener('click', () => {
                    if (this.picker) {
                        this.closeDialog();
                    }
                    else {
                        this.openDialog();
                    }
                });
            }
        }
    }
    openDialog() {
        if (!this.picker) {
            this.picker = new Picker({
                onEmojiSelect: (emoji) => this.selectEmoji(emoji),
                onClickOutside: (event) => this.onClickOutside(event),
                ...this.options,
            });
            document.body.appendChild(this.picker);
            const rect = this.button?.getBoundingClientRect();
            if (rect) {
                this.picker.style.top = `${rect.top + 25}px`;
                this.picker.style.left = `${rect.left}px`;
            }
            this.picker.style.boxShadow = '0 4px 4px 0 rgba(0, 0, 0, 0.25)';
            this.picker.style.position = 'absolute';
            this.picker.style.zIndex = '1';
        }
    }
    selectEmoji(emoji) {
        const emojiDelta = this.quill.insertText(this.quill.getSelection(true).index, emoji.native, 'user');
        this.closeDialog();
        // Set Input position after the emoji
        setTimeout(() => {
            this.quill.setSelection(this.quill.getSelection(true).index + emojiDelta.length());
        });
    }
    onClickOutside(event) {
        // Only close if the Click did not happen on the Emoji-Button inside the Toolbar when it exists!
        if (!this.button || !(this.button === event.target ||
            (event.target instanceof Element && this.button.contains(event.target)))) {
            this.closeDialog();
        }
    }
    closeDialog() {
        this.picker?.remove();
        this.picker = undefined;
    }
}

/*
 * Public API Surface of quill-emoji-mart
 */

/**
 * Generated bundle index. Do not edit.
 */

export { EmojiModule };
//# sourceMappingURL=rytrox-quill-emoji-mart.mjs.map