Quill Emoji-Mart Picker

Module Extension for quill that introduces emoji-mart.

Installation

(Requires quill: ^2.0.2)

Install via npm / yarn / pnpm:

npm install @rytrox/quill-emoji-mart
yarn add @rytrox/quill-emoji-mart
pnpm install @rytrox/quill-emoji-mart

Usage

Implementation in ngx-quill:

export const appConfig: ApplicationConfig = {
    providers: [
        provideQuillConfig({
            modules: {
                // Enables the Emoji-Module
                emoji: true,
                toolbar: [
                    ...
                    ['emoji']
                ]
            },
            // Custom Emoji-Module reference
            customModules: [
                {
                    implementation: EmojiModule,
                    path: 'modules/emoji',
                }
            ]
        })
    ]
};

or when you use modules:

QuillConfigModule.forRoot({
    modules: {
        emoji: true,
        toolbar: [
            ...
                ['emoji']
        ]
    },
    customModules: [
        {
            implementation: EmojiModule,
            path: 'modules/emoji'
        }
    ]
})

Customization

Instead of emoji: true, you can customize the Mart-Picker:

provideQuillConfig({
    modules: {
        emoji: {
            // Which Emojis do you support? See https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props
            // Default: @emoji-mart/data Data-Set
            data: emojiData,
            // Internationalization. See https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props
            // Default: @emoji-mart/data Data-Set
            i18n: emojiI18nData,
            // Used categories inside the picker: "frequent", "people", "nature", "foods", "activity", "places", "objects", "symbols", "flags"
            // Default: all elements
            categories: ['frequent', 'people'], 
            // Custom emojis, see https://github.com/missive/emoji-mart?tab=readme-ov-file#options--props
            // Default: []
            custom: customEmojis,
            // Should the focus switch to search bar after dialog opens?
            // Default: false
            autoFocus: true,
            // Which Emojis should be used for the different categories?
            // Default: @emoji-mart/data Data-Set
            categoryIcons: {
                frequent: {
                    src: 'https://example.com/image.png'
                },
                people: {
                    svg: '<svg>...</svg>'
                }
            },
            // Whether the picker should calculate perLine dynamically based on the width of <em-emoji-picker>
            // Default: false
            dynamicWidth: true,
            // An array of color that affects the hover background color
            // Default: []
            emojiButtonColors: ['#ababab', 'rgba(0, 0, 12, 0.12)'],
            // The radius of the emoji buttons
            // Default: "100%"
            emojiButtonRadius: '10px',
            // The size of the emoji buttons in px
            // Default: 36
            emojiButtonSize: 40,
            // The size of the emojis (inside the buttons) in px
            // Default: 24
            emojiSize: 30,
            // The version of the emoji data to use (<= 14)
            // Default: 14
            emojiVersion: 13.1,
            // Emoji-IDs that should not be included
            // Default: []
            exceptEmojis: [
                'cry'
            ],
            // The type of icons to use for the picker. outline with light theme and solid with dark theme: "auto", "outline", "solid"
            // Default: 'auto'
            icons: 'outline',
            // The locale to use for the picker: "en", "ar", "be", "cs", "de", "es", "fa", "fi", "fr", "hi", "it", "ja", "ko", "nl", "pl", "pt", "ru", "sa", "tr", "uk", "vi", "zh"
            // Default: "en"
            locale: 'de',
            // The maximum number of frequent rows to show. 0 will disable frequent category
            // Default: 4
            maxFrequentRows: 2,
            // The position of the navigation bar: "top", "bottom", "none"
            // Default "top"
            navPosition: 'bottom',
            // Whether to show country flags or not. If not provided, this is handled automatically (Windows doesn’t support country flags)
            // Default: true if it's on Windows, otherwise false
            noCountryFlags: false,
            // The id of the emoji to use for the no results emoji
            // Default: "cry"
            noResultsEmoji: 'cry',
            // The number of emojis to show per line
            // Default: 9
            perLine: 7,
            // The id of the emoji to use for the preview when not hovering any emoji. point_up when preview position is bottom and point_down when preview position is top.
            // Default: "point_up"
            previewEmoji: 'point_down',
            // The position of the preview: "top", "bottom", "none",
            // Default: "bottom"
            previewPosition: 'top',
            // The position of the search input: "sticky", "static", "none"
            // Default: "sticky"
            searchPosition: 'static',
            // The set of emojis to use for the picker. "native" being the most performant, others rely on spritesheets: "native", "apple", "facebook", "google", "twitter"
            // Default: "native",
            set: 'google',
            // The emojis skin tone: 1, 2, 3, 4, 5, 6
            // Default: 1
            skin: 2,
            // The position of the skin tone selector: "preview", "search", "none"
            // Default: "preview"
            skinTonePosition: 'search',
            // The picker theme: "light", "dark", "auto"
            // Default: "light"
            theme: "dark"
        },
        ...
    },
    ...
})