@ckeditor/ckeditor5-emoji 0.0.1 → 44.2.0-alpha.0

package/dist/index.js

@@ -0,0 +1,1477 @@
+/**
+ * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+import { Plugin, Command, icons } from '@ckeditor/ckeditor5-core/dist/index.js';
+import { logWarning, FocusTracker, KeystrokeHandler, global, Collection } from '@ckeditor/ckeditor5-utils/dist/index.js';
+import { Typing } from '@ckeditor/ckeditor5-typing/dist/index.js';
+import Fuse from 'fuse.js';
+import { groupBy, escapeRegExp } from 'lodash-es';
+import { View, addKeyboardHandlingForGrid, ButtonView, FocusCycler, SearchTextView, createLabeledInputText, createDropdown, ViewModel, addListToDropdown, SearchInfoView, ContextualBalloon, Dialog, MenuBarMenuListItemButtonView, clickOutsideHandler } from '@ckeditor/ckeditor5-ui/dist/index.js';
+
+// An endpoint from which the emoji database will be downloaded during plugin initialization.
+// The `{version}` placeholder is replaced with the value from editor config.
+const EMOJI_DATABASE_URL = 'https://cdn.ckeditor.com/ckeditor5/data/emoji/{version}/en.json';
+const SKIN_TONE_MAP = {
+    0: 'default',
+    1: 'light',
+    2: 'medium-light',
+    3: 'medium',
+    4: 'medium-dark',
+    5: 'dark'
+};
+const BASELINE_EMOJI_WIDTH = 24;
+/**
+ * The emoji repository plugin.
+ *
+ * Loads the emoji database from URL during plugin initialization and provides utility methods to search it.
+ */ class EmojiRepository extends Plugin {
+    /**
+	 * Emoji database.
+	 */ _database;
+    /**
+	 * A promise resolved after downloading the emoji database.
+	 * The promise resolves with `true` when the database is successfully downloaded or `false` otherwise.
+	 */ _databasePromise;
+    /**
+	 * An instance of the [Fuse.js](https://www.fusejs.io/) library.
+	 */ _fuseSearch;
+    /**
+	 * @inheritDoc
+	 */ static get pluginName() {
+        return 'EmojiRepository';
+    }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        this.editor.config.define('emoji', {
+            version: 16,
+            skinTone: 'default'
+        });
+        this._database = [];
+        this._databasePromise = new Promise((resolve)=>{
+            this._databasePromiseResolveCallback = resolve;
+        });
+        this._fuseSearch = null;
+    }
+    /**
+	 * @inheritDoc
+	 */ async init() {
+        const emojiVersion = this.editor.config.get('emoji.version');
+        const emojiDatabaseUrl = EMOJI_DATABASE_URL.replace('{version}', `${emojiVersion}`);
+        const emojiDatabase = await loadEmojiDatabase(emojiDatabaseUrl);
+        // Skip the initialization if the emoji database download has failed.
+        // An empty database prevents the initialization of other dependent plugins, such as `EmojiMention` and `EmojiPicker`.
+        if (!emojiDatabase.length) {
+            return this._databasePromiseResolveCallback(false);
+        }
+        const container = createEmojiWidthTestingContainer();
+        // Store the emoji database after normalizing the raw data.
+        this._database = emojiDatabase.filter((item)=>isEmojiCategoryAllowed(item)).filter((item)=>EmojiRepository._isEmojiSupported(item, container)).map((item)=>normalizeEmojiSkinTone(item));
+        container.remove();
+        // Create instance of the Fuse.js library with configured weighted search keys and disabled fuzzy search.
+        this._fuseSearch = new Fuse(this._database, {
+            keys: [
+                {
+                    name: 'emoticon',
+                    weight: 5
+                },
+                {
+                    name: 'annotation',
+                    weight: 3
+                },
+                {
+                    name: 'tags',
+                    weight: 1
+                }
+            ],
+            minMatchCharLength: 2,
+            threshold: 0,
+            ignoreLocation: true
+        });
+        return this._databasePromiseResolveCallback(true);
+    }
+    /**
+	 * Returns an array of emoji entries that match the search query.
+	 * If the emoji database is not loaded, the [Fuse.js](https://www.fusejs.io/) instance is not created,
+	 * hence this method returns an empty array.
+	 *
+	 * @param searchQuery A search query to match emoji.
+	 * @returns An array of emoji entries that match the search query.
+	 */ getEmojiByQuery(searchQuery) {
+        if (!this._fuseSearch) {
+            return [];
+        }
+        const searchQueryTokens = searchQuery.split(/\s/).filter(Boolean);
+        // Perform the search only if there is at least two non-white characters next to each other.
+        const shouldSearch = searchQueryTokens.some((token)=>token.length >= 2);
+        if (!shouldSearch) {
+            return [];
+        }
+        return this._fuseSearch.search({
+            '$or': [
+                {
+                    emoticon: searchQuery
+                },
+                {
+                    '$and': searchQueryTokens.map((token)=>({
+                            annotation: token
+                        }))
+                },
+                {
+                    '$and': searchQueryTokens.map((token)=>({
+                            tags: token
+                        }))
+                }
+            ]
+        }).map((result)=>result.item);
+    }
+    /**
+	 * Groups all emojis by categories.
+	 * If the emoji database is not loaded, it returns an empty array.
+	 *
+	 * @returns An array of emoji entries grouped by categories.
+	 */ getEmojiCategories() {
+        if (!this._database.length) {
+            return [];
+        }
+        const { t } = this.editor.locale;
+        const categories = [
+            {
+                title: t('Smileys & Expressions'),
+                icon: '😀',
+                groupId: 0
+            },
+            {
+                title: t('Gestures & People'),
+                icon: '👋',
+                groupId: 1
+            },
+            {
+                title: t('Animals & Nature'),
+                icon: '🐻',
+                groupId: 3
+            },
+            {
+                title: t('Food & Drinks'),
+                icon: '🍎',
+                groupId: 4
+            },
+            {
+                title: t('Travel & Places'),
+                icon: '🚘',
+                groupId: 5
+            },
+            {
+                title: t('Activities'),
+                icon: '🏀',
+                groupId: 6
+            },
+            {
+                title: t('Objects'),
+                icon: '💡',
+                groupId: 7
+            },
+            {
+                title: t('Symbols'),
+                icon: '🟢',
+                groupId: 8
+            },
+            {
+                title: t('Flags'),
+                icon: '🏁',
+                groupId: 9
+            }
+        ];
+        const groups = groupBy(this._database, 'group');
+        return categories.map((category)=>{
+            return {
+                ...category,
+                items: groups[category.groupId]
+            };
+        });
+    }
+    /**
+	 * Returns an array of available skin tones.
+	 */ getSkinTones() {
+        const { t } = this.editor.locale;
+        return [
+            {
+                id: 'default',
+                icon: '👋',
+                tooltip: t('Default skin tone')
+            },
+            {
+                id: 'light',
+                icon: '👋🏻',
+                tooltip: t('Light skin tone')
+            },
+            {
+                id: 'medium-light',
+                icon: '👋🏼',
+                tooltip: t('Medium Light skin tone')
+            },
+            {
+                id: 'medium',
+                icon: '👋🏽',
+                tooltip: t('Medium skin tone')
+            },
+            {
+                id: 'medium-dark',
+                icon: '👋🏾',
+                tooltip: t('Medium Dark skin tone')
+            },
+            {
+                id: 'dark',
+                icon: '👋🏿',
+                tooltip: t('Dark skin tone')
+            }
+        ];
+    }
+    /**
+	 * Indicates whether the emoji database has been successfully downloaded and the plugin is operational.
+	 */ isReady() {
+        return this._databasePromise;
+    }
+    /**
+	 * A function used to check if the given emoji is supported in the operating system.
+	 *
+	 * Referenced for unit testing purposes.
+	 */ static _isEmojiSupported = isEmojiSupported;
+}
+/**
+ * Makes the HTTP request to download the emoji database.
+ */ async function loadEmojiDatabase(emojiDatabaseUrl) {
+    const result = await fetch(emojiDatabaseUrl).then((response)=>{
+        if (!response.ok) {
+            return [];
+        }
+        return response.json();
+    }).catch(()=>{
+        return [];
+    });
+    if (!result.length) {
+        /**
+		 * Unable to load the emoji database from CDN.
+		 *
+		 * TODO: It could be a problem of CKEditor 5 CDN, but also, Content Security Policy that disallow the request.
+		 * It would be good to explain what to do in such a case.
+		 *
+		 * @error emoji-database-load-failed
+		 */ logWarning('emoji-database-load-failed');
+    }
+    return result;
+}
+/**
+ * Creates a div for emoji width testing purposes.
+ */ function createEmojiWidthTestingContainer() {
+    const container = document.createElement('div');
+    container.setAttribute('aria-hidden', 'true');
+    container.style.position = 'absolute';
+    container.style.left = '-9999px';
+    container.style.whiteSpace = 'nowrap';
+    container.style.fontSize = BASELINE_EMOJI_WIDTH + 'px';
+    document.body.appendChild(container);
+    return container;
+}
+/**
+ * Returns the width of the provided node.
+ */ function getNodeWidth(container, node) {
+    const span = document.createElement('span');
+    span.textContent = node;
+    container.appendChild(span);
+    const nodeWidth = span.offsetWidth;
+    container.removeChild(span);
+    return nodeWidth;
+}
+/**
+ * Checks whether the emoji is supported in the operating system.
+ */ function isEmojiSupported(item, container) {
+    const emojiWidth = getNodeWidth(container, item.emoji);
+    // On Windows, some supported emoji are ~50% bigger than the baseline emoji, but what we really want to guard
+    // against are the ones that are 2x the size, because those are truly broken (person with red hair = person with
+    // floating red wig, black cat = cat with black square, polar bear = bear with snowflake, etc.)
+    // So here we set the threshold at 1.8 times the size of the baseline emoji.
+    return emojiWidth / 1.8 < BASELINE_EMOJI_WIDTH && emojiWidth >= BASELINE_EMOJI_WIDTH;
+}
+/**
+ * Adds default skin tone property to each emoji. If emoji defines other skin tones, they are added as well.
+ */ function normalizeEmojiSkinTone(item) {
+    const entry = {
+        ...item,
+        skins: {
+            default: item.emoji
+        }
+    };
+    if (item.skins) {
+        item.skins.forEach((skin)=>{
+            const skinTone = SKIN_TONE_MAP[skin.tone];
+            entry.skins[skinTone] = skin.emoji;
+        });
+    }
+    return entry;
+}
+/**
+ * Checks whether the emoji belongs to a group that is allowed.
+ */ function isEmojiCategoryAllowed(item) {
+    // Category group=2 contains skin tones only, which we do not want to render.
+    return item.group !== 2;
+}
+
+const EMOJI_MENTION_MARKER = ':';
+const EMOJI_SHOW_ALL_OPTION_ID = ':__EMOJI_SHOW_ALL:';
+const EMOJI_HINT_OPTION_ID = ':__EMOJI_HINT:';
+/**
+ * The emoji mention plugin.
+ *
+ * Introduces the autocomplete of emojis while typing.
+ */ class EmojiMention extends Plugin {
+    /**
+	 * Defines a number of displayed items in the auto complete dropdown.
+	 *
+	 * It includes the "Show all emoji..." option if the `EmojiPicker` plugin is loaded.
+	 */ _emojiDropdownLimit;
+    /**
+	 * Defines a skin tone that is set in the emoji config.
+	 */ _skinTone;
+    /**
+	 * @inheritDoc
+	 */ static get requires() {
+        return [
+            EmojiRepository,
+            Typing,
+            'Mention'
+        ];
+    }
+    /**
+	 * @inheritDoc
+	 */ static get pluginName() {
+        return 'EmojiMention';
+    }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        this.editor.config.define('emoji', {
+            dropdownLimit: 6
+        });
+        this._emojiDropdownLimit = editor.config.get('emoji.dropdownLimit');
+        this._skinTone = editor.config.get('emoji.skinTone');
+        const mentionFeedsConfigs = editor.config.get('mention.feeds');
+        const mergeFieldsPrefix = editor.config.get('mergeFields.prefix');
+        const markerAlreadyUsed = mentionFeedsConfigs.some((config)=>config.marker === EMOJI_MENTION_MARKER);
+        const isMarkerUsedByMergeFields = mergeFieldsPrefix ? mergeFieldsPrefix[0] === EMOJI_MENTION_MARKER : false;
+        if (markerAlreadyUsed || isMarkerUsedByMergeFields) {
+            /**
+			 * The `marker` in the `emoji` config is already used by other plugin configuration.
+			 *
+			 * @error emoji-config-marker-already-used
+			 * @param {string} marker Used marker.
+			 */ logWarning('emoji-config-marker-already-used', {
+                marker: EMOJI_MENTION_MARKER
+            });
+            return;
+        }
+        this._setupMentionConfiguration(mentionFeedsConfigs);
+    }
+    /**
+	 * @inheritDoc
+	 */ async init() {
+        const editor = this.editor;
+        this._emojiPickerPlugin = editor.plugins.has('EmojiPicker') ? editor.plugins.get('EmojiPicker') : null;
+        this._emojiRepositoryPlugin = editor.plugins.get('EmojiRepository');
+        // Skip overriding the `mention` command listener if the emoji repository is not ready.
+        if (!await this._emojiRepositoryPlugin.isReady()) {
+            return;
+        }
+        editor.once('ready', this._overrideMentionExecuteListener.bind(this));
+    }
+    /**
+	 * Initializes the configuration for emojis in the mention feature.
+	 */ _setupMentionConfiguration(mentionFeedsConfigs) {
+        const emojiMentionFeedConfig = {
+            marker: EMOJI_MENTION_MARKER,
+            dropdownLimit: this._emojiDropdownLimit,
+            itemRenderer: this._customItemRendererFactory(this.editor.t),
+            feed: this._queryEmojiCallbackFactory()
+        };
+        this.editor.config.set('mention.feeds', [
+            ...mentionFeedsConfigs,
+            emojiMentionFeedConfig
+        ]);
+    }
+    /**
+	 * Returns the `itemRenderer()` callback for mention config.
+	 */ _customItemRendererFactory(t) {
+        return (item)=>{
+            const itemElement = document.createElement('button');
+            itemElement.classList.add('ck');
+            itemElement.classList.add('ck-button');
+            itemElement.classList.add('ck-button_with-text');
+            itemElement.id = `mention-list-item-id${item.id.slice(0, -1)}`;
+            itemElement.type = 'button';
+            itemElement.tabIndex = -1;
+            const labelElement = document.createElement('span');
+            labelElement.classList.add('ck');
+            labelElement.classList.add('ck-button__label');
+            itemElement.appendChild(labelElement);
+            if (item.id === EMOJI_HINT_OPTION_ID) {
+                itemElement.classList.add('ck-list-item-button');
+                itemElement.classList.add('ck-disabled');
+                labelElement.textContent = t('Keep on typing to see the emoji.');
+            } else if (item.id === EMOJI_SHOW_ALL_OPTION_ID) {
+                labelElement.textContent = t('Show all emoji...');
+            } else {
+                labelElement.textContent = `${item.text} ${item.id}`;
+            }
+            return itemElement;
+        };
+    }
+    /**
+	 * Overrides the default mention execute listener to insert an emoji as plain text instead.
+	 */ _overrideMentionExecuteListener() {
+        const editor = this.editor;
+        editor.commands.get('mention').on('execute', (event, data)=>{
+            const eventData = data[0];
+            // Ignore non-emoji auto-complete actions.
+            if (eventData.marker !== EMOJI_MENTION_MARKER) {
+                return;
+            }
+            // Do not propagate the event.
+            event.stop();
+            // Do nothing when executing after selecting a hint message.
+            if (eventData.mention.id === EMOJI_HINT_OPTION_ID) {
+                return;
+            }
+            // Trigger the picker UI.
+            if (eventData.mention.id === EMOJI_SHOW_ALL_OPTION_ID) {
+                const text = [
+                    ...eventData.range.getItems()
+                ].filter((item)=>item.is('$textProxy')).map((item)=>item.data).reduce((result, text)=>result + text, '');
+                editor.model.change((writer)=>{
+                    editor.model.deleteContent(writer.createSelection(eventData.range));
+                });
+                const emojiPickerPlugin = this._emojiPickerPlugin;
+                emojiPickerPlugin.showUI(text.slice(1));
+                setTimeout(()=>{
+                    emojiPickerPlugin.emojiPickerView.focus();
+                });
+            } else {
+                editor.execute('insertText', {
+                    text: eventData.mention.text,
+                    range: eventData.range
+                });
+            }
+        }, {
+            priority: 'high'
+        });
+    }
+    /**
+	 * Returns the `feed()` callback for mention config.
+	 */ _queryEmojiCallbackFactory() {
+        return (searchQuery)=>{
+            // Do not show anything when a query starts with a space.
+            if (searchQuery.startsWith(' ')) {
+                return [];
+            }
+            const emojis = this._emojiRepositoryPlugin.getEmojiByQuery(searchQuery).map((emoji)=>{
+                let text = emoji.skins[this._skinTone] || emoji.skins.default;
+                if (this._emojiPickerPlugin) {
+                    text = emoji.skins[this._emojiPickerPlugin.skinTone] || emoji.skins.default;
+                }
+                return {
+                    id: `:${emoji.annotation}:`,
+                    text
+                };
+            });
+            if (!this._emojiPickerPlugin) {
+                return emojis.slice(0, this._emojiDropdownLimit);
+            }
+            const actionItem = {
+                id: searchQuery.length > 1 ? EMOJI_SHOW_ALL_OPTION_ID : EMOJI_HINT_OPTION_ID
+            };
+            return [
+                ...emojis.slice(0, this._emojiDropdownLimit - 1),
+                actionItem
+            ];
+        };
+    }
+}
+
+/**
+ * Command that shows the emoji user interface.
+ */ class EmojiCommand extends Command {
+    /**
+	 * Updates the command's {@link #isEnabled} based on the current selection.
+	 */ refresh() {
+        const editor = this.editor;
+        const model = editor.model;
+        const schema = model.schema;
+        const selection = model.document.selection;
+        this.isEnabled = schema.checkChild(selection.getFirstPosition(), '$text');
+    }
+    /**
+	 * Opens emoji user interface for the current document selection.
+	 *
+	 * @fires execute
+	 * @param [searchValue=''] A default query used to filer the grid when opening the UI.
+	 */ execute(searchValue = '') {
+        const emojiPickerPlugin = this.editor.plugins.get('EmojiPicker');
+        emojiPickerPlugin.showUI(searchValue);
+    }
+}
+
+/**
+ * A grid of emoji tiles. It allows browsing emojis and selecting them to be inserted into the content.
+ */ class EmojiGridView extends View {
+    /**
+	 * A collection of the child tile views. Each tile represents a particular emoji.
+	 */ tiles;
+    /**
+	 * Tracks information about the DOM focus in the grid.
+	 */ focusTracker;
+    /**
+	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	 */ keystrokes;
+    /**
+	 * An array containing all emojis grouped by their categories.
+	 */ emojiCategories;
+    /**
+	 * A collection of all already created tile views. Each tile represents a particular emoji.
+	 * The cached tiles collection is used for efficiency purposes to avoid re-creating a particular
+	 * tile again when the grid view has changed.
+	 */ cachedTiles;
+    /**
+	 * A callback used to filter grid items by a specified query.
+	 */ _getEmojiByQuery;
+    /**
+	 * @inheritDoc
+	 */ constructor(locale, { categoryName, emojiCategories, getEmojiByQuery, skinTone }){
+        super(locale);
+        this.set('isEmpty', true);
+        this.set('categoryName', categoryName);
+        this.set('skinTone', skinTone);
+        this.tiles = this.createCollection();
+        this.cachedTiles = this.createCollection();
+        this.focusTracker = new FocusTracker();
+        this.keystrokes = new KeystrokeHandler();
+        this._getEmojiByQuery = getEmojiByQuery;
+        this.emojiCategories = emojiCategories;
+        const bind = this.bindTemplate;
+        this.setTemplate({
+            tag: 'div',
+            children: [
+                {
+                    tag: 'div',
+                    attributes: {
+                        role: 'grid',
+                        class: [
+                            'ck',
+                            'ck-emoji__grid'
+                        ]
+                    },
+                    children: this.tiles
+                }
+            ],
+            attributes: {
+                role: 'tabpanel',
+                class: [
+                    'ck',
+                    'ck-emoji__tiles',
+                    // To avoid issues with focus cycling, ignore a grid when it's empty.
+                    bind.if('isEmpty', 'ck-hidden', (value)=>value)
+                ]
+            }
+        });
+        addKeyboardHandlingForGrid({
+            keystrokeHandler: this.keystrokes,
+            focusTracker: this.focusTracker,
+            gridItems: this.tiles,
+            numberOfColumns: ()=>global.window.getComputedStyle(this.element.firstChild) // Responsive `.ck-emoji-grid__tiles`.
+                .getPropertyValue('grid-template-columns').split(' ').length,
+            uiLanguageDirection: this.locale && this.locale.uiLanguageDirection
+        });
+    }
+    /**
+	 * @inheritDoc
+	 */ render() {
+        super.render();
+        this.keystrokes.listenTo(this.element);
+    }
+    /**
+	 * @inheritDoc
+	 */ destroy() {
+        super.destroy();
+        this.keystrokes.destroy();
+        this.focusTracker.destroy();
+    }
+    /**
+	 * Focuses the first focusable in {@link ~EmojiGridView#tiles} if available.
+	 */ focus() {
+        const firstTile = this.tiles.first;
+        if (firstTile) {
+            firstTile.focus();
+        }
+    }
+    /**
+	 * Filters the grid view by the given regular expression.
+	 *
+	 * It filters either by the pattern or an emoji category, but never both.
+	 *
+	 * @param pattern Expression to search or `null` when filter by category name.
+	 */ filter(pattern) {
+        const { matchingItems, allItems } = pattern ? this._getItemsByQuery(pattern.source) : this._getItemsByCategory();
+        this._updateGrid(matchingItems);
+        this.set('isEmpty', matchingItems.length === 0);
+        return {
+            resultsCount: matchingItems.length,
+            totalItemsCount: allItems.length
+        };
+    }
+    /**
+	 * Filters emojis to show based on the specified query phrase.
+	 *
+	 * @param query A query used to filter the grid.
+	 */ _getItemsByQuery(query) {
+        return {
+            matchingItems: this._getEmojiByQuery(query),
+            allItems: this.emojiCategories.flatMap((group)=>group.items)
+        };
+    }
+    /**
+	 * Returns emojis that belong to the specified category.
+	 */ _getItemsByCategory() {
+        const emojiCategory = this.emojiCategories.find((item)=>item.title === this.categoryName);
+        const { items } = emojiCategory;
+        return {
+            matchingItems: items,
+            allItems: items
+        };
+    }
+    /**
+	 * Updates the grid by removing the existing items and insert the new ones.
+	 *
+	 * @param items An array of items to insert.
+	 */ _updateGrid(items) {
+        // Clean-up.
+        [
+            ...this.tiles
+        ].forEach((item)=>{
+            this.focusTracker.remove(item);
+            this.tiles.remove(item);
+        });
+        items// Create tiles from matching results.
+        .map((item)=>{
+            const emoji = item.skins[this.skinTone] || item.skins.default;
+            return this.cachedTiles.get(emoji) || this._createTile(emoji, item.annotation);
+        })// Insert new elements.
+        .forEach((item)=>{
+            this.tiles.add(item);
+            this.focusTracker.add(item);
+        });
+    }
+    /**
+	 * Creates a new tile for the grid. Created tile is added to the {@link #cachedTiles} collection for further usage, if needed.
+	 *
+	 * @param emoji The emoji itself.
+	 * @param name The name of the emoji (e.g. "Smiling Face with Smiling Eyes").
+	 */ _createTile(emoji, name) {
+        const tile = new ButtonView(this.locale);
+        tile.viewUid = emoji;
+        tile.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-emoji__tile'
+                ]
+            }
+        });
+        tile.set({
+            label: emoji,
+            tooltip: name,
+            withText: true,
+            ariaLabel: name,
+            // To improve accessibility, disconnect a button and its label connection so that screen
+            // readers can read the `[aria-label]` attribute directly from the more descriptive button.
+            ariaLabelledBy: undefined
+        });
+        tile.on('execute', ()=>{
+            this.fire('execute', {
+                name,
+                emoji
+            });
+        });
+        this.cachedTiles.add(tile);
+        return tile;
+    }
+}
+
+/**
+ * A class representing the navigation part of the emoji UI.
+ * It is responsible allowing the user to select a particular emoji category.
+ */ class EmojiCategoriesView extends View {
+    /**
+	 * Tracks information about the DOM focus in the grid.
+	 */ focusTracker;
+    /**
+	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	 */ keystrokes;
+    /**
+	 * Helps cycling over focusable children in the input view.
+	 */ focusCycler;
+    /**
+	 * A collection of the categories buttons.
+	 */ buttonViews;
+    /**
+	 * @inheritDoc
+	 */ constructor(locale, { emojiCategories, categoryName }){
+        super(locale);
+        this.buttonViews = this.createCollection(emojiCategories.map((emojiCategory)=>this._createCategoryButton(emojiCategory)));
+        this.focusTracker = new FocusTracker();
+        this.keystrokes = new KeystrokeHandler();
+        this.focusCycler = new FocusCycler({
+            focusables: this.buttonViews,
+            focusTracker: this.focusTracker,
+            keystrokeHandler: this.keystrokes,
+            actions: {
+                focusPrevious: 'arrowleft',
+                focusNext: 'arrowright'
+            }
+        });
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-emoji__categories-list'
+                ],
+                role: 'tablist'
+            },
+            children: this.buttonViews
+        });
+        this.on('change:categoryName', (event, name, newValue, oldValue)=>{
+            const oldCategoryButton = this.buttonViews.find((button)=>button.tooltip === oldValue);
+            if (oldCategoryButton) {
+                oldCategoryButton.isOn = false;
+            }
+            const newCategoryButton = this.buttonViews.find((button)=>button.tooltip === newValue);
+            newCategoryButton.isOn = true;
+        });
+        this.set('categoryName', categoryName);
+    }
+    /**
+	 * @inheritDoc
+	 */ render() {
+        super.render();
+        this.buttonViews.forEach((buttonView)=>{
+            this.focusTracker.add(buttonView);
+        });
+        this.keystrokes.listenTo(this.element);
+    }
+    /**
+	 * @inheritDoc
+	 */ destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        this.keystrokes.destroy();
+        this.buttonViews.destroy();
+    }
+    /**
+	 * @inheritDoc
+	 */ focus() {
+        this.buttonViews.first.focus();
+    }
+    /**
+	 * Marks all categories buttons as enabled (clickable).
+	 */ enableCategories() {
+        this.buttonViews.forEach((buttonView)=>{
+            buttonView.isEnabled = true;
+        });
+    }
+    /**
+	 * Marks all categories buttons as disabled (non-clickable).
+	 */ disableCategories() {
+        this.buttonViews.forEach((buttonView)=>{
+            buttonView.set({
+                class: '',
+                isEnabled: false,
+                isOn: false
+            });
+        });
+    }
+    /**
+	 * Creates a button representing a category item.
+	 */ _createCategoryButton(emojiCategory) {
+        const buttonView = new ButtonView();
+        const bind = buttonView.bindTemplate;
+        // A `[role="tab"]` element requires also the `[aria-selected]` attribute with its state.
+        buttonView.extendTemplate({
+            attributes: {
+                'aria-selected': bind.to('isOn', (value)=>value.toString()),
+                class: [
+                    'ck-emoji__category-item'
+                ]
+            }
+        });
+        buttonView.set({
+            ariaLabel: emojiCategory.title,
+            label: emojiCategory.icon,
+            role: 'tab',
+            tooltip: emojiCategory.title,
+            withText: true,
+            // To improve accessibility, disconnect a button and its label connection so that screen
+            // readers can read the `[aria-label]` attribute directly from the more descriptive button.
+            ariaLabelledBy: undefined
+        });
+        buttonView.on('execute', ()=>{
+            this.categoryName = emojiCategory.title;
+        });
+        buttonView.on('change:isEnabled', ()=>{
+            if (buttonView.isEnabled && buttonView.tooltip === this.categoryName) {
+                buttonView.isOn = true;
+            }
+        });
+        return buttonView;
+    }
+}
+
+/**
+ * A view responsible for providing an input element that allows filtering emoji by the provided query.
+ */ class EmojiSearchView extends View {
+    /**
+	 * The find in text input view that stores the searched string.
+	 */ inputView;
+    /**
+	 * An instance of the `EmojiGridView`.
+	 */ gridView;
+    /**
+	 * @inheritDoc
+	 */ constructor(locale, { gridView, resultsView }){
+        super(locale);
+        this.gridView = gridView;
+        const t = locale.t;
+        this.inputView = new SearchTextView(this.locale, {
+            queryView: {
+                label: t('Find an emoji (min. 2 characters)'),
+                creator: createLabeledInputText
+            },
+            filteredView: this.gridView,
+            infoView: {
+                instance: resultsView
+            }
+        });
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-search'
+                ],
+                tabindex: '-1'
+            },
+            children: [
+                this.inputView.queryView
+            ]
+        });
+        // Pass through the `search` event to handle it by a parent view.
+        this.inputView.delegate('search').to(this);
+    }
+    /**
+	 * @inheritDoc
+	 */ destroy() {
+        super.destroy();
+        this.inputView.destroy();
+    }
+    /**
+	 * Searches the {@link #gridView} for the given query.
+	 *
+	 * @param query The search query string.
+	 */ search(query) {
+        const regExp = query ? new RegExp(escapeRegExp(query), 'ig') : null;
+        const filteringResults = this.gridView.filter(regExp);
+        this.inputView.fire('search', {
+            query,
+            ...filteringResults
+        });
+    }
+    /**
+	 * Allows defining the default value in the search text field.
+	 *
+	 * @param value The new value.
+	 */ setInputValue(value) {
+        if (!value) {
+            this.inputView.queryView.fieldView.reset();
+        } else {
+            this.inputView.queryView.fieldView.value = value;
+        }
+    }
+    /**
+	 * Returns an input provided by a user in the search text field.
+	 */ getInputValue() {
+        return this.inputView.queryView.fieldView.element.value;
+    }
+    /**
+	 * @inheritDoc
+	 */ focus() {
+        this.inputView.focus();
+    }
+}
+
+/**
+ * A view responsible for selecting a skin tone for an emoji.
+ */ class EmojiToneView extends View {
+    /**
+	 * A dropdown element for selecting an active skin tone.
+	 */ dropdownView;
+    /**
+	 * An array of available skin tones.
+	 */ _skinTones;
+    /**
+	 * @inheritDoc
+	 */ constructor(locale, { skinTone, skinTones }){
+        super(locale);
+        this.set('skinTone', skinTone);
+        this._skinTones = skinTones;
+        const t = locale.t;
+        const accessibleLabel = t('Select skin tone');
+        const dropdownView = createDropdown(locale);
+        const itemDefinitions = new Collection();
+        for (const { id, icon, tooltip } of this._skinTones){
+            const def = {
+                type: 'button',
+                model: new ViewModel({
+                    value: id,
+                    label: icon,
+                    ariaLabel: tooltip,
+                    tooltip,
+                    tooltipPosition: 'e',
+                    role: 'menuitemradio',
+                    withText: true,
+                    // To improve accessibility, disconnect a button and its label connection so that screen
+                    // readers can read the `[aria-label]` attribute directly from the more descriptive button.
+                    ariaLabelledBy: undefined
+                })
+            };
+            def.model.bind('isOn').to(this, 'skinTone', (value)=>value === id);
+            itemDefinitions.add(def);
+        }
+        addListToDropdown(dropdownView, itemDefinitions, {
+            ariaLabel: accessibleLabel,
+            role: 'menu'
+        });
+        dropdownView.buttonView.set({
+            label: this._getSkinTone().icon,
+            ariaLabel: accessibleLabel,
+            ariaLabelledBy: undefined,
+            isOn: false,
+            withText: true,
+            tooltip: accessibleLabel
+        });
+        this.dropdownView = dropdownView;
+        // Execute command when an item from the dropdown is selected.
+        this.listenTo(dropdownView, 'execute', (evt)=>{
+            this.skinTone = evt.source.value;
+        });
+        dropdownView.buttonView.bind('label').to(this, 'skinTone', ()=>{
+            return this._getSkinTone().icon;
+        });
+        dropdownView.buttonView.bind('ariaLabel').to(this, 'skinTone', ()=>{
+            // Render a current state, but also what the dropdown does.
+            return `${this._getSkinTone().tooltip}, ${accessibleLabel}`;
+        });
+        this.setTemplate({
+            tag: 'div',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-emoji__skin-tone'
+                ]
+            },
+            children: [
+                dropdownView
+            ]
+        });
+    }
+    /**
+	 * @inheritDoc
+	 */ focus() {
+        this.dropdownView.buttonView.focus();
+    }
+    /**
+	 * Helper method for receiving an object describing the active skin tone.
+	 */ _getSkinTone() {
+        return this._skinTones.find((tone)=>tone.id === this.skinTone);
+    }
+}
+
+/**
+ * A view that glues pieces of the emoji panel together.
+ */ class EmojiPickerView extends View {
+    /**
+	 * A collection of the focusable children of the view.
+	 */ items;
+    /**
+	 * Tracks information about the DOM focus in the view.
+	 */ focusTracker;
+    /**
+	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	 */ keystrokes;
+    /**
+	 * Helps cycling over focusable {@link #items} in the view.
+	 */ focusCycler;
+    /**
+	 * An instance of the `EmojiSearchView`.
+	 */ searchView;
+    /**
+	 * An instance of the `EmojiToneView`.
+	 */ toneView;
+    /**
+	 * An instance of the `EmojiCategoriesView`.
+	 */ categoriesView;
+    /**
+	 * An instance of the `EmojiGridView`.
+	 */ gridView;
+    /**
+	 * An instance of the `EmojiGridView`.
+	 */ infoView;
+    /**
+	 * @inheritDoc
+	 */ constructor(locale, { emojiCategories, getEmojiByQuery, skinTone, skinTones }){
+        super(locale);
+        const categoryName = emojiCategories[0].title;
+        this.gridView = new EmojiGridView(locale, {
+            categoryName,
+            emojiCategories,
+            getEmojiByQuery,
+            skinTone
+        });
+        this.infoView = new SearchInfoView();
+        this.searchView = new EmojiSearchView(locale, {
+            gridView: this.gridView,
+            resultsView: this.infoView
+        });
+        this.categoriesView = new EmojiCategoriesView(locale, {
+            emojiCategories,
+            categoryName
+        });
+        this.toneView = new EmojiToneView(locale, {
+            skinTone,
+            skinTones
+        });
+        this.items = this.createCollection([
+            this.searchView,
+            this.toneView,
+            this.categoriesView,
+            this.gridView,
+            this.infoView
+        ]);
+        this.focusTracker = new FocusTracker();
+        this.keystrokes = new KeystrokeHandler();
+        this.focusCycler = new FocusCycler({
+            focusables: this.items,
+            focusTracker: this.focusTracker,
+            keystrokeHandler: this.keystrokes,
+            actions: {
+                focusPrevious: 'shift + tab',
+                focusNext: 'tab'
+            }
+        });
+        this.setTemplate({
+            tag: 'div',
+            children: [
+                {
+                    tag: 'div',
+                    children: [
+                        this.searchView,
+                        this.toneView
+                    ],
+                    attributes: {
+                        class: [
+                            'ck',
+                            'ck-emoji__search'
+                        ]
+                    }
+                },
+                this.categoriesView,
+                this.gridView,
+                {
+                    tag: 'div',
+                    children: [
+                        this.infoView
+                    ],
+                    attributes: {
+                        class: [
+                            'ck',
+                            'ck-search__results'
+                        ]
+                    }
+                }
+            ],
+            attributes: {
+                tabindex: '-1',
+                class: [
+                    'ck',
+                    'ck-emoji',
+                    'ck-search'
+                ]
+            }
+        });
+        this._setupEventListeners();
+    }
+    /**
+	 * @inheritDoc
+	 */ render() {
+        super.render();
+        this.focusTracker.add(this.searchView.element);
+        this.focusTracker.add(this.toneView.element);
+        this.focusTracker.add(this.categoriesView.element);
+        this.focusTracker.add(this.gridView.element);
+        this.focusTracker.add(this.infoView.element);
+        // Start listening for the keystrokes coming from #element.
+        this.keystrokes.listenTo(this.element);
+    }
+    /**
+	 * @inheritDoc
+	 */ destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        this.keystrokes.destroy();
+    }
+    /**
+	 * Focuses the search input.
+	 */ focus() {
+        this.searchView.focus();
+    }
+    /**
+	 * Initializes interactions between sub-views.
+	 */ _setupEventListeners() {
+        const t = this.locale.t;
+        // Disable the category switcher when filtering by a query.
+        this.searchView.on('search', (evt, data)=>{
+            if (data.query) {
+                this.categoriesView.disableCategories();
+            } else {
+                this.categoriesView.enableCategories();
+            }
+        });
+        // Show a user-friendly message depending on the search query.
+        this.searchView.on('search', (evt, data)=>{
+            if (data.query.length === 1) {
+                this.infoView.set({
+                    primaryText: t('Keep on typing to see the emoji.'),
+                    secondaryText: t('The query must contain at least two characters.'),
+                    isVisible: true
+                });
+            } else if (!data.resultsCount) {
+                this.infoView.set({
+                    primaryText: t('No emojis were found matching "%0".', data.query),
+                    secondaryText: t('Please try a different phrase or check the spelling.'),
+                    isVisible: true
+                });
+            } else {
+                this.infoView.set({
+                    isVisible: false
+                });
+            }
+        });
+        // Emit an update event to react to balloon dimensions changes.
+        this.searchView.on('search', ()=>{
+            this.fire('update');
+        });
+        // Update the grid of emojis when the selected category is changed.
+        this.categoriesView.on('change:categoryName', (ev, args, categoryName)=>{
+            this.gridView.categoryName = categoryName;
+            this.searchView.search('');
+        });
+        // Update the grid of emojis when the selected skin tone is changed.
+        // In such a case, the displayed emoji should use an updated skin tone value.
+        this.toneView.on('change:skinTone', (evt, propertyName, newValue)=>{
+            this.gridView.skinTone = newValue;
+            this.searchView.search(this.searchView.getInputValue());
+        });
+    }
+}
+
+const VISUAL_SELECTION_MARKER_NAME = 'emoji-picker';
+/**
+ * The emoji picker plugin.
+ *
+ * Introduces the `'emoji'` dropdown.
+ */ class EmojiPicker extends Plugin {
+    /**
+	 * @inheritDoc
+	 */ static get requires() {
+        return [
+            EmojiRepository,
+            ContextualBalloon,
+            Dialog,
+            Typing
+        ];
+    }
+    /**
+	 * @inheritDoc
+	 */ static get pluginName() {
+        return 'EmojiPicker';
+    }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+	 * @inheritDoc
+	 */ async init() {
+        const editor = this.editor;
+        this._balloonPlugin = editor.plugins.get('ContextualBalloon');
+        this._emojiRepositoryPlugin = editor.plugins.get('EmojiRepository');
+        // Skip registering a button in the toolbar and list item in the menu bar if the emoji repository is not ready.
+        if (!await this._emojiRepositoryPlugin.isReady()) {
+            return;
+        }
+        const command = new EmojiCommand(editor);
+        editor.commands.add('emoji', command);
+        editor.ui.componentFactory.add('emoji', ()=>{
+            const button = this._createButton(ButtonView, command);
+            button.set({
+                tooltip: true
+            });
+            return button;
+        });
+        editor.ui.componentFactory.add('menuBar:emoji', ()=>{
+            return this._createButton(MenuBarMenuListItemButtonView, command);
+        });
+        this._setupConversion();
+    }
+    /**
+	 * @inheritDoc
+	 */ destroy() {
+        super.destroy();
+        if (this.emojiPickerView) {
+            this.emojiPickerView.destroy();
+        }
+    }
+    /**
+	 * Represents an active skin tone. Its value depends on the emoji UI plugin.
+	 *
+	 * Before opening the UI for the first time, the returned value is read from the editor configuration.
+	 * Otherwise, it reflects the user's intention.
+	 */ get skinTone() {
+        if (!this.emojiPickerView) {
+            return this.editor.config.get('emoji.skinTone');
+        }
+        return this.emojiPickerView.gridView.skinTone;
+    }
+    /**
+	 * Displays the balloon with the emoji picker.
+	 *
+	 * @param [searchValue=''] A default query used to filer the grid when opening the UI.
+	 */ showUI(searchValue = '') {
+        // Show visual selection on a text when the contextual balloon is displayed.
+        // See #17654.
+        this._showFakeVisualSelection();
+        if (!this.emojiPickerView) {
+            this.emojiPickerView = this._createEmojiPickerView();
+        }
+        if (searchValue) {
+            this.emojiPickerView.searchView.setInputValue(searchValue);
+        }
+        this.emojiPickerView.searchView.search(searchValue);
+        if (!this._balloonPlugin.hasView(this.emojiPickerView)) {
+            this._balloonPlugin.add({
+                view: this.emojiPickerView,
+                position: this._getBalloonPositionData()
+            });
+        }
+        this.emojiPickerView.focus();
+    }
+    /**
+	 * Creates a button for toolbar and menu bar that will show the emoji dialog.
+	 */ _createButton(ViewClass, command) {
+        const buttonView = new ViewClass(this.editor.locale);
+        const t = this.editor.locale.t;
+        buttonView.bind('isEnabled').to(command, 'isEnabled');
+        buttonView.set({
+            label: t('Emoji'),
+            icon: icons.emoji,
+            isToggleable: true
+        });
+        buttonView.on('execute', ()=>{
+            this.showUI();
+        });
+        return buttonView;
+    }
+    /**
+	 * Creates an instance of the `EmojiPickerView` class that represents an emoji balloon.
+	 */ _createEmojiPickerView() {
+        const emojiPickerView = new EmojiPickerView(this.editor.locale, {
+            emojiCategories: this._emojiRepositoryPlugin.getEmojiCategories(),
+            skinTone: this.editor.config.get('emoji.skinTone'),
+            skinTones: this._emojiRepositoryPlugin.getSkinTones(),
+            getEmojiByQuery: (query)=>{
+                return this._emojiRepositoryPlugin.getEmojiByQuery(query);
+            }
+        });
+        // Insert an emoji on a tile click.
+        this.listenTo(emojiPickerView.gridView, 'execute', (evt, data)=>{
+            const editor = this.editor;
+            const textToInsert = data.emoji;
+            this._hideUI();
+            editor.execute('insertText', {
+                text: textToInsert
+            });
+        });
+        // Update the balloon position when layout is changed.
+        this.listenTo(emojiPickerView, 'update', ()=>{
+            if (this._balloonPlugin.visibleView === emojiPickerView) {
+                this._balloonPlugin.updatePosition();
+            }
+        });
+        // Close the panel on `Esc` key press when the **actions have focus**.
+        emojiPickerView.keystrokes.set('Esc', (data, cancel)=>{
+            this._hideUI();
+            cancel();
+        });
+        // Close the dialog when clicking outside of it.
+        clickOutsideHandler({
+            emitter: emojiPickerView,
+            contextElements: [
+                this._balloonPlugin.view.element
+            ],
+            callback: ()=>this._hideUI(),
+            activator: ()=>this._balloonPlugin.visibleView === emojiPickerView
+        });
+        return emojiPickerView;
+    }
+    /**
+	 * Hides the balloon with the emoji picker.
+	 */ _hideUI() {
+        this._balloonPlugin.remove(this.emojiPickerView);
+        this.emojiPickerView.searchView.setInputValue('');
+        this.editor.editing.view.focus();
+        this._hideFakeVisualSelection();
+    }
+    /**
+	 * Registers converters.
+	 */ _setupConversion() {
+        const editor = this.editor;
+        // Renders a fake visual selection marker on an expanded selection.
+        editor.conversion.for('editingDowncast').markerToHighlight({
+            model: VISUAL_SELECTION_MARKER_NAME,
+            view: {
+                classes: [
+                    'ck-fake-emoji-selection'
+                ]
+            }
+        });
+        // Renders a fake visual selection marker on a collapsed selection.
+        editor.conversion.for('editingDowncast').markerToElement({
+            model: VISUAL_SELECTION_MARKER_NAME,
+            view: (data, { writer })=>{
+                if (!data.markerRange.isCollapsed) {
+                    return null;
+                }
+                const markerElement = writer.createUIElement('span');
+                writer.addClass([
+                    'ck-fake-emoji-selection',
+                    'ck-fake-emoji-selection_collapsed'
+                ], markerElement);
+                return markerElement;
+            }
+        });
+    }
+    /**
+	 * Returns positioning options for the {@link #_balloonPlugin}. They control the way the balloon is attached
+	 * to the target element or selection.
+	 */ _getBalloonPositionData() {
+        const view = this.editor.editing.view;
+        const viewDocument = view.document;
+        // Set a target position by converting view selection range to DOM.
+        const target = ()=>view.domConverter.viewRangeToDom(viewDocument.selection.getFirstRange());
+        return {
+            target
+        };
+    }
+    /**
+	 * Displays a fake visual selection when the contextual balloon is displayed.
+	 *
+	 * This adds an 'emoji-picker' marker into the document that is rendered as a highlight on selected text fragment.
+	 */ _showFakeVisualSelection() {
+        const model = this.editor.model;
+        model.change((writer)=>{
+            const range = model.document.selection.getFirstRange();
+            if (model.markers.has(VISUAL_SELECTION_MARKER_NAME)) {
+                writer.updateMarker(VISUAL_SELECTION_MARKER_NAME, {
+                    range
+                });
+            } else {
+                if (range.start.isAtEnd) {
+                    const startPosition = range.start.getLastMatchingPosition(({ item })=>!model.schema.isContent(item), {
+                        boundaries: range
+                    });
+                    writer.addMarker(VISUAL_SELECTION_MARKER_NAME, {
+                        usingOperation: false,
+                        affectsData: false,
+                        range: writer.createRange(startPosition, range.end)
+                    });
+                } else {
+                    writer.addMarker(VISUAL_SELECTION_MARKER_NAME, {
+                        usingOperation: false,
+                        affectsData: false,
+                        range
+                    });
+                }
+            }
+        });
+    }
+    /**
+	 * Hides the fake visual selection.
+	 */ _hideFakeVisualSelection() {
+        const model = this.editor.model;
+        if (model.markers.has(VISUAL_SELECTION_MARKER_NAME)) {
+            model.change((writer)=>{
+                writer.removeMarker(VISUAL_SELECTION_MARKER_NAME);
+            });
+        }
+    }
+}
+
+/**
+ * The emoji plugin.
+ *
+ * This is a "glue" plugin which loads the following plugins:
+ *
+ * * {@link module:emoji/emojimention~EmojiMention},
+ * * {@link module:emoji/emojipicker~EmojiPicker},
+ */ class Emoji extends Plugin {
+    /**
+	 * @inheritDoc
+	 */ static get requires() {
+        return [
+            EmojiMention,
+            EmojiPicker
+        ];
+    }
+    /**
+	 * @inheritDoc
+	 */ static get pluginName() {
+        return 'Emoji';
+    }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
+}
+
+export { Emoji, EmojiCommand, EmojiMention, EmojiPicker, EmojiRepository };
+//# sourceMappingURL=index.js.map