@ckeditor/ckeditor5-emoji 0.0.0-nightly-next-20250217.0 → 0.0.1

package/dist/index.js

@@ -1,1478 +0,0 @@
-/**
- * @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 } 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 'es-toolkit/compat';
-import { View, addKeyboardHandlingForGrid, ButtonView, FocusCycler, SearchTextView, createLabeledInputText, createDropdown, ViewModel, addListToDropdown, SearchInfoView, ContextualBalloon, Dialog, MenuBarMenuListItemButtonView, clickOutsideHandler } from '@ckeditor/ckeditor5-ui/dist/index.js';
-import { IconEmoji } from '@ckeditor/ckeditor5-icons/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, (item)=>item.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: IconEmoji,
-            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