@ckeditor/ckeditor5-emoji 44.2.0-alpha.15 → 44.2.0-alpha.2

package/dist/index.js

@@ -3,76 +3,16 @@
  * 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 { version, logWarning, FocusTracker, KeystrokeHandler, global, Collection } from '@ckeditor/ckeditor5-utils/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';
 
-/**
- * @license Copyright (c) 2023, Koala Interactive SAS
- * For licensing, see https://github.com/koala-interactive/is-emoji-supported/blob/master/LICENSE.md
- */ /**
- * @module emoji/utils/isemojisupported
- */ /**
- * Checks if the two pixels parts are the same using canvas.
- */ function isEmojiSupported(unicode) {
-    const ctx = getCanvas();
-    /* istanbul ignore next -- @preserve */ if (!ctx) {
-        return false;
-    }
-    const CANVAS_HEIGHT = 25;
-    const CANVAS_WIDTH = 20;
-    const textSize = Math.floor(CANVAS_HEIGHT / 2);
-    // Initialize canvas context.
-    ctx.font = textSize + 'px Arial, Sans-Serif';
-    ctx.textBaseline = 'top';
-    ctx.canvas.width = CANVAS_WIDTH * 2;
-    ctx.canvas.height = CANVAS_HEIGHT;
-    ctx.clearRect(0, 0, CANVAS_WIDTH * 2, CANVAS_HEIGHT);
-    // Draw in red on the left.
-    ctx.fillStyle = '#FF0000';
-    ctx.fillText(unicode, 0, 22);
-    // Draw in blue on right.
-    ctx.fillStyle = '#0000FF';
-    ctx.fillText(unicode, CANVAS_WIDTH, 22);
-    const a = ctx.getImageData(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT).data;
-    const count = a.length;
-    let i = 0;
-    // Search the first visible pixel.
-    for(; i < count && !a[i + 3]; i += 4);
-    // No visible pixel.
-    /* istanbul ignore next -- @preserve */ if (i >= count) {
-        return false;
-    }
-    // Emoji has immutable color, so we check the color of the emoji in two different colors.
-    // the result show be the same.
-    const x = CANVAS_WIDTH + i / 4 % CANVAS_WIDTH;
-    const y = Math.floor(i / 4 / CANVAS_WIDTH);
-    const b = ctx.getImageData(x, y, 1, 1).data;
-    if (a[i] !== b[0] || a[i + 2] !== b[2]) {
-        return false;
-    }
-    //Some emojis consist of different ones, so they will show multiple characters if they are not supported.
-    /* istanbul ignore next -- @preserve */ if (ctx.measureText(unicode).width >= CANVAS_WIDTH) {
-        return false;
-    }
-    // Supported.
-    return true;
-}
-function getCanvas() {
-    try {
-        return document.createElement('canvas').getContext('2d', {
-            willReadFrequently: true
-        });
-    } catch  {
-        /* istanbul ignore next -- @preserve */ return null;
-    }
-}
-
-/**
- * @module emoji/emojiutils
- */ const SKIN_TONE_MAP = {
+// 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',
@@ -80,141 +20,22 @@ function getCanvas() {
     4: 'medium-dark',
     5: 'dark'
 };
-/**
- * A map representing an emoji and its release version.
- * It's used to identify a user's minimal supported emoji level.
- */ const EMOJI_SUPPORT_LEVEL = {
-    '🫩': 16,
-    '🫨': 15.1 // Shaking head. Although the version of emoji is 15, it is used to detect versions 15 and 15.1.
-};
 const BASELINE_EMOJI_WIDTH = 24;
-/**
- * The Emoji utilities plugin.
- */ class EmojiUtils extends Plugin {
-    /**
-	 * @inheritDoc
-	 */ static get pluginName() {
-        return 'EmojiUtils';
-    }
-    /**
-	 * @inheritDoc
-	 */ static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-	 * Checks if the emoji is supported by verifying the emoji version supported by the system first.
-	 * Then checks if emoji contains a zero width joiner (ZWJ), and if yes, then checks if it is supported by the system.
-	 */ isEmojiSupported(item, emojiSupportedVersionByOs, container) {
-        const isEmojiVersionSupported = item.version <= emojiSupportedVersionByOs;
-        if (!isEmojiVersionSupported) {
-            return false;
-        }
-        if (!this.hasZwj(item.emoji)) {
-            return true;
-        }
-        return this.isEmojiZwjSupported(item, container);
-    }
-    /**
-	 * Checks the supported emoji version by the OS, by sampling some representatives from different emoji releases.
-	 */ getEmojiSupportedVersionByOs() {
-        return Object.entries(EMOJI_SUPPORT_LEVEL).reduce((currentVersion, [emoji, newVersion])=>{
-            if (newVersion > currentVersion && EmojiUtils._isEmojiSupported(emoji)) {
-                return newVersion;
-            }
-            return currentVersion;
-        }, 0);
-    }
-    /**
-	 * Check for ZWJ (zero width joiner) character.
-	 */ hasZwj(emoji) {
-        return emoji.includes('\u200d');
-    }
-    /**
-	 * Checks whether the emoji is supported in the operating system.
-	 */ isEmojiZwjSupported(item, container) {
-        const emojiWidth = this.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 < BASELINE_EMOJI_WIDTH * 1.8;
-    }
-    /**
-	 * Returns the width of the provided node.
-	 */ getNodeWidth(container, node) {
-        const span = document.createElement('span');
-        span.textContent = node;
-        container.appendChild(span);
-        const nodeWidth = span.offsetWidth;
-        container.removeChild(span);
-        return nodeWidth;
-    }
-    /**
-	 * Creates a div for emoji width testing purposes.
-	 */ 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';
-        return container;
-    }
-    /**
-	 * Adds default skin tone property to each emoji. If emoji defines other skin tones, they are added as well.
-	 */ 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.
-	 */ isEmojiCategoryAllowed(item) {
-        // Category group=2 contains skin tones only, which we do not want to render.
-        return item.group !== 2;
-    }
-    /**
-	 * A function used to determine if emoji is supported by detecting pixels.
-	 *
-	 * Referenced for unit testing purposes. Kept in a separate file because of licensing.
-	 */ static _isEmojiSupported = isEmojiSupported;
-}
-
-// An endpoint from which the emoji data 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';
 /**
  * The emoji repository plugin.
  *
- * Loads the emoji repository from URL during plugin initialization and provides utility methods to search it.
+ * Loads the emoji database from URL during plugin initialization and provides utility methods to search it.
  */ class EmojiRepository extends Plugin {
     /**
-	 * An instance of the [Fuse.js](https://www.fusejs.io/) library.
-	 */ _fuseSearch;
-    /**
-	 * The emoji version that is used to prepare the emoji repository.
-	 */ _version;
+	 * Emoji database.
+	 */ _database;
     /**
-	 * A promise resolved after downloading the emoji collection.
-	 * The promise resolves with `true` when the repository is successfully downloaded or `false` otherwise.
-	 */ _repositoryPromise;
+	 * A promise resolved after downloading the emoji database.
+	 * The promise resolves with `true` when the database is successfully downloaded or `false` otherwise.
+	 */ _databasePromise;
     /**
-	 * @inheritDoc
-	 */ static get requires() {
-        return [
-            EmojiUtils
-        ];
-    }
+	 * An instance of the [Fuse.js](https://www.fusejs.io/) library.
+	 */ _fuseSearch;
     /**
 	 * @inheritDoc
 	 */ static get pluginName() {
@@ -229,31 +50,33 @@ const EMOJI_DATABASE_URL = 'https://cdn.ckeditor.com/ckeditor5/data/emoji/{versi
 	 * @inheritDoc
 	 */ constructor(editor){
         super(editor);
-        editor.config.define('emoji', {
+        this.editor.config.define('emoji', {
             version: 16,
             skinTone: 'default'
         });
-        this._version = editor.config.get('emoji.version');
-        this._repositoryPromise = new Promise((resolve)=>{
-            this._repositoryPromiseResolveCallback = resolve;
+        this._database = [];
+        this._databasePromise = new Promise((resolve)=>{
+            this._databasePromiseResolveCallback = resolve;
         });
         this._fuseSearch = null;
     }
     /**
 	 * @inheritDoc
 	 */ async init() {
-        if (!(this._version in EmojiRepository._results)) {
-            const cdnResult = await this._loadItemsFromCdn();
-            EmojiRepository._results[this._version] = this._normalizeEmoji(cdnResult);
-        }
-        const items = this._getItems();
-        // Skip plugin initialization if the emoji repository is not available.
-        // The initialization of other dependent plugins, such as `EmojiMention` and `EmojiPicker`, is prevented as well.
-        if (!items) {
-            return this._repositoryPromiseResolveCallback(false);
+        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(items, {
+        this._fuseSearch = new Fuse(this._database, {
             keys: [
                 {
                     name: 'emoticon',
@@ -272,11 +95,11 @@ const EMOJI_DATABASE_URL = 'https://cdn.ckeditor.com/ckeditor5/data/emoji/{versi
             threshold: 0,
             ignoreLocation: true
         });
-        return this._repositoryPromiseResolveCallback(true);
+        return this._databasePromiseResolveCallback(true);
     }
     /**
 	 * Returns an array of emoji entries that match the search query.
-	 * If the emoji repository is not loaded, the [Fuse.js](https://www.fusejs.io/) instance is not created,
+	 * 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.
@@ -311,12 +134,11 @@ const EMOJI_DATABASE_URL = 'https://cdn.ckeditor.com/ckeditor5/data/emoji/{versi
     }
     /**
 	 * Groups all emojis by categories.
-	 * If the emoji repository is not loaded, it returns an empty array.
+	 * If the emoji database is not loaded, it returns an empty array.
 	 *
 	 * @returns An array of emoji entries grouped by categories.
 	 */ getEmojiCategories() {
-        const repository = this._getItems();
-        if (!repository) {
+        if (!this._database.length) {
             return [];
         }
         const { t } = this.editor.locale;
@@ -367,7 +189,7 @@ const EMOJI_DATABASE_URL = 'https://cdn.ckeditor.com/ckeditor5/data/emoji/{versi
                 groupId: 9
             }
         ];
-        const groups = groupBy(repository, 'group');
+        const groups = groupBy(this._database, 'group');
         return categories.map((category)=>{
             return {
                 ...category,
@@ -413,61 +235,94 @@ const EMOJI_DATABASE_URL = 'https://cdn.ckeditor.com/ckeditor5/data/emoji/{versi
         ];
     }
     /**
-	 * Indicates whether the emoji repository has been successfully downloaded and the plugin is operational.
+	 * Indicates whether the emoji database has been successfully downloaded and the plugin is operational.
 	 */ isReady() {
-        return this._repositoryPromise;
-    }
-    /**
-	 * Returns the emoji repository in a configured version if it is a non-empty array. Returns `null` otherwise.
-	 */ _getItems() {
-        const repository = EmojiRepository._results[this._version];
-        return repository && repository.length ? repository : null;
+        return this._databasePromise;
     }
     /**
-	 * Makes the HTTP request to download the emoji repository in a configured version.
-	 */ async _loadItemsFromCdn() {
-        const repositoryUrl = new URL(EMOJI_DATABASE_URL.replace('{version}', `${this._version}`));
-        repositoryUrl.searchParams.set('editorVersion', version);
-        const result = await fetch(repositoryUrl, {
-            cache: 'force-cache'
-        }).then((response)=>{
-            if (!response.ok) {
-                return [];
-            }
-            return response.json();
-        }).catch(()=>{
+	 * 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 [];
-        });
-        if (!result.length) {
-            /**
-			 * Unable to load the emoji repository from CDN.
-			 *
-			 * If the CDN works properly and there is no disruption of communication, please check your
-			 * {@glink getting-started/setup/csp Content Security Policy (CSP)} setting and make sure
-			 * the CDN connection is allowed by the editor.
-			 *
-			 * @error emoji-repository-load-failed
-			 */ logWarning('emoji-repository-load-failed');
         }
-        return result;
-    }
-    /**
-	 * Normalizes the raw data fetched from CDN. By normalization, we meant:
-	 *
-	 *  * Filter out unsupported emoji (these that will not render correctly),
-	 *  * Prepare skin tone variants if an emoji defines them.
-	 */ _normalizeEmoji(data) {
-        const emojiUtils = this.editor.plugins.get('EmojiUtils');
-        const emojiSupportedVersionByOs = emojiUtils.getEmojiSupportedVersionByOs();
-        const container = emojiUtils.createEmojiWidthTestingContainer();
-        document.body.appendChild(container);
-        const results = data.filter((item)=>emojiUtils.isEmojiCategoryAllowed(item)).filter((item)=>emojiUtils.isEmojiSupported(item, emojiSupportedVersionByOs, container)).map((item)=>emojiUtils.normalizeEmojiSkinTone(item));
-        container.remove();
-        return results;
+        return response.json();
+    }).catch(()=>{
+        return [];
+    });
+    if (!result.length) {
+        /**
+		 * Unable to load the emoji database from CDN.
+		 *
+		 * If the CDN works properly and there is no disruption of communication, please check your
+		 * {@glink getting-started/setup/csp Content Security Policy (CSP)} setting and make sure
+		 * the CDN connection is allowed by the editor.
+		 *
+		 * @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;
+        });
     }
-    /**
-	 * Versioned emoji repository.
-	 */ static _results = {};
+    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 = ':';
@@ -514,18 +369,11 @@ const EMOJI_HINT_OPTION_ID = ':__EMOJI_HINT:';
         });
         this._emojiDropdownLimit = editor.config.get('emoji.dropdownLimit');
         this._skinTone = editor.config.get('emoji.skinTone');
-        this._setupMentionConfiguration(editor);
-    }
-    /**
-	 * Initializes the configuration for emojis in the mention feature.
-	 * If the marker used by emoji mention is already registered, it displays a warning.
-	 * If emoji mention configuration is detected, it does not register it for a second time.
-	 */ _setupMentionConfiguration(editor) {
-        const mergeFieldsPrefix = editor.config.get('mergeFields.prefix');
         const mentionFeedsConfigs = editor.config.get('mention.feeds');
-        const isEmojiMarkerUsedByMergeFields = mergeFieldsPrefix ? mergeFieldsPrefix[0] === EMOJI_MENTION_MARKER : false;
-        const isEmojiMarkerUsedByMention = mentionFeedsConfigs.filter((config)=>!config._isEmojiMarker).some((config)=>config.marker === EMOJI_MENTION_MARKER);
-        if (isEmojiMarkerUsedByMention || isEmojiMarkerUsedByMergeFields) {
+        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.
 			 *
@@ -536,12 +384,24 @@ const EMOJI_HINT_OPTION_ID = ':__EMOJI_HINT:';
             });
             return;
         }
-        const isEmojiConfigDefined = mentionFeedsConfigs.some((config)=>config._isEmojiMarker);
-        if (isEmojiConfigDefined) {
+        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 = {
-            _isEmojiMarker: true,
             marker: EMOJI_MENTION_MARKER,
             dropdownLimit: this._emojiDropdownLimit,
             itemRenderer: this._customItemRendererFactory(this.editor.t),
@@ -552,18 +412,6 @@ const EMOJI_HINT_OPTION_ID = ':__EMOJI_HINT:';
             emojiMentionFeedConfig
         ]);
     }
-    /**
-	 * @inheritDoc
-	 */ async init() {
-        const editor = this.editor;
-        this.emojiPickerPlugin = editor.plugins.has('EmojiPicker') ? editor.plugins.get('EmojiPicker') : null;
-        this.emojiRepositoryPlugin = editor.plugins.get('EmojiRepository');
-        this._isEmojiRepositoryAvailable = await this.emojiRepositoryPlugin.isReady();
-        // Override the `mention` command listener if the emoji repository is ready.
-        if (this._isEmojiRepositoryAvailable) {
-            editor.once('ready', this._overrideMentionExecuteListener.bind(this));
-        }
-    }
     /**
 	 * Returns the `itemRenderer()` callback for mention config.
 	 */ _customItemRendererFactory(t) {
@@ -615,7 +463,7 @@ const EMOJI_HINT_OPTION_ID = ':__EMOJI_HINT:';
                 editor.model.change((writer)=>{
                     editor.model.deleteContent(writer.createSelection(eventData.range));
                 });
-                const emojiPickerPlugin = this.emojiPickerPlugin;
+                const emojiPickerPlugin = this._emojiPickerPlugin;
                 emojiPickerPlugin.showUI(text.slice(1));
                 setTimeout(()=>{
                     emojiPickerPlugin.emojiPickerView.focus();
@@ -638,25 +486,17 @@ const EMOJI_HINT_OPTION_ID = ':__EMOJI_HINT:';
             if (searchQuery.startsWith(' ')) {
                 return [];
             }
-            // Do not show anything when a query starts with a marker character.
-            if (searchQuery.startsWith(EMOJI_MENTION_MARKER)) {
-                return [];
-            }
-            // If the repository plugin is not available, return an empty feed to avoid confusion. See: #17842.
-            if (!this._isEmojiRepositoryAvailable) {
-                return [];
-            }
-            const emojis = this.emojiRepositoryPlugin.getEmojiByQuery(searchQuery).map((emoji)=>{
+            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;
+                if (this._emojiPickerPlugin) {
+                    text = emoji.skins[this._emojiPickerPlugin.skinTone] || emoji.skins.default;
                 }
                 return {
                     id: `:${emoji.annotation}:`,
                     text
                 };
             });
-            if (!this.emojiPickerPlugin) {
+            if (!this._emojiPickerPlugin) {
                 return emojis.slice(0, this._emojiDropdownLimit);
             }
             const actionItem = {
@@ -1348,7 +1188,6 @@ const EMOJI_HINT_OPTION_ID = ':__EMOJI_HINT:';
         // Emit an update event to react to balloon dimensions changes.
         this.searchView.on('search', ()=>{
             this.fire('update');
-            this.gridView.element.scrollTo(0, 0);
         });
         // Update the grid of emojis when the selected category is changed.
         this.categoriesView.on('change:categoryName', (ev, args, categoryName)=>{
@@ -1394,10 +1233,10 @@ const VISUAL_SELECTION_MARKER_NAME = 'emoji-picker';
 	 * @inheritDoc
 	 */ async init() {
         const editor = this.editor;
-        this.balloonPlugin = editor.plugins.get('ContextualBalloon');
-        this.emojiRepositoryPlugin = editor.plugins.get('EmojiRepository');
+        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()) {
+        if (!await this._emojiRepositoryPlugin.isReady()) {
             return;
         }
         const command = new EmojiCommand(editor);
@@ -1448,8 +1287,8 @@ const VISUAL_SELECTION_MARKER_NAME = 'emoji-picker';
             this.emojiPickerView.searchView.setInputValue(searchValue);
         }
         this.emojiPickerView.searchView.search(searchValue);
-        if (!this.balloonPlugin.hasView(this.emojiPickerView)) {
-            this.balloonPlugin.add({
+        if (!this._balloonPlugin.hasView(this.emojiPickerView)) {
+            this._balloonPlugin.add({
                 view: this.emojiPickerView,
                 position: this._getBalloonPositionData()
             });
@@ -1476,11 +1315,11 @@ const VISUAL_SELECTION_MARKER_NAME = 'emoji-picker';
 	 * Creates an instance of the `EmojiPickerView` class that represents an emoji balloon.
 	 */ _createEmojiPickerView() {
         const emojiPickerView = new EmojiPickerView(this.editor.locale, {
-            emojiCategories: this.emojiRepositoryPlugin.getEmojiCategories(),
+            emojiCategories: this._emojiRepositoryPlugin.getEmojiCategories(),
             skinTone: this.editor.config.get('emoji.skinTone'),
-            skinTones: this.emojiRepositoryPlugin.getSkinTones(),
+            skinTones: this._emojiRepositoryPlugin.getSkinTones(),
             getEmojiByQuery: (query)=>{
-                return this.emojiRepositoryPlugin.getEmojiByQuery(query);
+                return this._emojiRepositoryPlugin.getEmojiByQuery(query);
             }
         });
         // Insert an emoji on a tile click.
@@ -1494,8 +1333,8 @@ const VISUAL_SELECTION_MARKER_NAME = 'emoji-picker';
         });
         // Update the balloon position when layout is changed.
         this.listenTo(emojiPickerView, 'update', ()=>{
-            if (this.balloonPlugin.visibleView === emojiPickerView) {
-                this.balloonPlugin.updatePosition();
+            if (this._balloonPlugin.visibleView === emojiPickerView) {
+                this._balloonPlugin.updatePosition();
             }
         });
         // Close the panel on `Esc` key press when the **actions have focus**.
@@ -1507,17 +1346,17 @@ const VISUAL_SELECTION_MARKER_NAME = 'emoji-picker';
         clickOutsideHandler({
             emitter: emojiPickerView,
             contextElements: [
-                this.balloonPlugin.view.element
+                this._balloonPlugin.view.element
             ],
             callback: ()=>this._hideUI(),
-            activator: ()=>this.balloonPlugin.visibleView === emojiPickerView
+            activator: ()=>this._balloonPlugin.visibleView === emojiPickerView
         });
         return emojiPickerView;
     }
     /**
 	 * Hides the balloon with the emoji picker.
 	 */ _hideUI() {
-        this.balloonPlugin.remove(this.emojiPickerView);
+        this._balloonPlugin.remove(this.emojiPickerView);
         this.emojiPickerView.searchView.setInputValue('');
         this.editor.editing.view.focus();
         this._hideFakeVisualSelection();
@@ -1552,7 +1391,7 @@ const VISUAL_SELECTION_MARKER_NAME = 'emoji-picker';
         });
     }
     /**
-	 * Returns positioning options for the {@link #balloonPlugin}. They control the way the balloon is attached
+	 * 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;
@@ -1635,5 +1474,5 @@ const VISUAL_SELECTION_MARKER_NAME = 'emoji-picker';
     }
 }
 
-export { Emoji, EmojiCommand, EmojiMention, EmojiPicker, EmojiRepository, EmojiUtils };
+export { Emoji, EmojiCommand, EmojiMention, EmojiPicker, EmojiRepository };
 //# sourceMappingURL=index.js.map