@ckeditor/ckeditor5-emoji 44.2.0-alpha.16 → 44.2.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-emoji",
-  "version": "44.2.0-alpha.16",
+  "version": "44.2.0-alpha.3",
   "description": "Emoji feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,12 +13,12 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "44.2.0-alpha.16",
-    "@ckeditor/ckeditor5-mention": "44.2.0-alpha.16",
-    "@ckeditor/ckeditor5-typing": "44.2.0-alpha.16",
-    "@ckeditor/ckeditor5-ui": "44.2.0-alpha.16",
-    "@ckeditor/ckeditor5-utils": "44.2.0-alpha.16",
-    "ckeditor5": "44.2.0-alpha.16",
+    "@ckeditor/ckeditor5-core": "44.2.0-alpha.3",
+    "@ckeditor/ckeditor5-mention": "44.2.0-alpha.3",
+    "@ckeditor/ckeditor5-typing": "44.2.0-alpha.3",
+    "@ckeditor/ckeditor5-ui": "44.2.0-alpha.3",
+    "@ckeditor/ckeditor5-utils": "44.2.0-alpha.3",
+    "ckeditor5": "44.2.0-alpha.3",
     "fuse.js": "7.0.0",
     "lodash-es": "4.17.21"
   },

package/src/augmentation.d.ts

@@ -2,7 +2,7 @@
  * @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 type { Emoji, EmojiConfig, EmojiMention, EmojiPicker, EmojiRepository, EmojiUtils, EmojiCommand } from './index.js';
+import type { Emoji, EmojiConfig, EmojiMention, EmojiPicker, EmojiRepository, EmojiCommand } from './index.js';
 declare module '@ckeditor/ckeditor5-core' {
     interface EditorConfig {
         /**
@@ -17,7 +17,6 @@ declare module '@ckeditor/ckeditor5-core' {
         [EmojiMention.pluginName]: EmojiMention;
         [EmojiPicker.pluginName]: EmojiPicker;
         [EmojiRepository.pluginName]: EmojiRepository;
-        [EmojiUtils.pluginName]: EmojiUtils;
     }
     interface CommandsMap {
         emoji: EmojiCommand;

package/src/emojiconfig.d.ts

@@ -58,22 +58,6 @@ export interface EmojiConfig {
      * @default 'default'
      */
     skinTone?: SkinToneId;
-    /**
-     * The URL from which the emoji definitions should be loaded.
-     *
-     * ```ts
-     *	ClassicEditor
-     *		.create( editorElement, {
-     *			plugins: [ Emoji, ... ],
-     *			emoji: {
-     *				definitionsUrl: ''
-     *			}
-     *		} )
-     *		.then( ... )
-     *		.catch( ... );
-     * ```
-     */
-    definitionsUrl?: string;
     /**
      * The emoji database version.
      *
@@ -89,10 +73,8 @@ export interface EmojiConfig {
      *		.catch( ... );
      * ```
      *
-     * If the {@link module:emoji/emojiconfig~EmojiConfig#definitionsUrl `emoji.definitionsUrl`}
-     * option is provided, `version` is ignored as the defined URL takes precedence over the `version`.
+     * @default 16
      */
-    version?: EmojiVersion;
+    version?: 15 | 16;
 }
 export type SkinToneId = 'default' | 'light' | 'medium-light' | 'medium' | 'medium-dark' | 'dark';
-export type EmojiVersion = 15 | 16;

package/src/emojimention.d.ts

@@ -5,7 +5,6 @@
 import { Plugin, type Editor } from 'ckeditor5/src/core.js';
 import { Typing } from 'ckeditor5/src/typing.js';
 import EmojiRepository from './emojirepository.js';
-import type EmojiPicker from './emojipicker.js';
 /**
  * The emoji mention plugin.
  *
@@ -15,15 +14,11 @@ export default class EmojiMention extends Plugin {
     /**
      * An instance of the {@link module:emoji/emojipicker~EmojiPicker} plugin if it is loaded in the editor.
      */
-    emojiPickerPlugin: EmojiPicker | null;
+    private _emojiPickerPlugin;
     /**
      * An instance of the {@link module:emoji/emojirepository~EmojiRepository} plugin.
      */
-    emojiRepositoryPlugin: EmojiRepository;
-    /**
-     * A flag that informs if the {@link module:emoji/emojirepository~EmojiRepository} plugin is loaded correctly.
-     */
-    private _isEmojiRepositoryAvailable;
+    private _emojiRepositoryPlugin;
     /**
      * Defines a number of displayed items in the auto complete dropdown.
      *
@@ -50,16 +45,14 @@ export default class EmojiMention extends Plugin {
      * @inheritDoc
      */
     constructor(editor: 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.
-     */
-    private _setupMentionConfiguration;
     /**
      * @inheritDoc
      */
     init(): Promise<void>;
+    /**
+     * Initializes the configuration for emojis in the mention feature.
+     */
+    private _setupMentionConfiguration;
     /**
      * Returns the `itemRenderer()` callback for mention config.
      */

package/src/emojimention.js

@@ -46,21 +46,11 @@ export default class EmojiMention extends Plugin {
         });
         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.
              *
@@ -70,12 +60,26 @@ export default class EmojiMention extends Plugin {
             logWarning('emoji-config-marker-already-used', { marker: EMOJI_MENTION_MARKER });
             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),
@@ -83,19 +87,6 @@ export default class EmojiMention extends Plugin {
         };
         this.editor.config.set('mention.feeds', [...mentionFeedsConfigs, 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.
      */
@@ -152,7 +143,7 @@ export default class EmojiMention extends Plugin {
                 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();
@@ -176,26 +167,18 @@ export default class EmojiMention extends Plugin {
             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)
+            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 = {

package/src/emojipicker.d.ts

@@ -25,11 +25,11 @@ export default class EmojiPicker extends Plugin {
     /**
      * The contextual balloon plugin instance.
      */
-    balloonPlugin: ContextualBalloon;
+    _balloonPlugin: ContextualBalloon;
     /**
      * An instance of the {@link module:emoji/emojirepository~EmojiRepository} plugin.
      */
-    emojiRepositoryPlugin: EmojiRepository;
+    private _emojiRepositoryPlugin;
     /**
      * @inheritDoc
      */
@@ -80,7 +80,7 @@ export default class EmojiPicker extends Plugin {
      */
     private _setupConversion;
     /**
-     * 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.
      */
     private _getBalloonPositionData;

package/src/emojipicker.js

@@ -42,10 +42,10 @@ export default class EmojiPicker extends Plugin {
      */
     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);
@@ -99,8 +99,8 @@ export default class EmojiPicker extends Plugin {
             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()
             });
@@ -129,11 +129,11 @@ export default class EmojiPicker extends Plugin {
      */
     _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.
@@ -145,8 +145,8 @@ export default class EmojiPicker extends Plugin {
         });
         // 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**.
@@ -157,9 +157,9 @@ export default class EmojiPicker extends Plugin {
         // Close the dialog when clicking outside of it.
         clickOutsideHandler({
             emitter: emojiPickerView,
-            contextElements: [this.balloonPlugin.view.element],
+            contextElements: [this._balloonPlugin.view.element],
             callback: () => this._hideUI(),
-            activator: () => this.balloonPlugin.visibleView === emojiPickerView
+            activator: () => this._balloonPlugin.visibleView === emojiPickerView
         });
         return emojiPickerView;
     }
@@ -167,7 +167,7 @@ export default class EmojiPicker extends Plugin {
      * 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();
@@ -198,7 +198,7 @@ export default class EmojiPicker extends Plugin {
         });
     }
     /**
-     * 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() {

package/src/emojirepository.d.ts

@@ -2,36 +2,31 @@
  * @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 { type Editor, Plugin } from 'ckeditor5/src/core.js';
-import EmojiUtils from './emojiutils.js';
+import { Plugin, type Editor } from 'ckeditor5/src/core.js';
 import type { SkinToneId } from './emojiconfig.js';
 /**
  * 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.
  */
 export default class EmojiRepository extends Plugin {
     /**
-     * A callback to resolve the {@link #_repositoryPromise} to control the return value of this promise.
+     * Emoji database.
      */
-    private _repositoryPromiseResolveCallback;
+    private _database;
     /**
-     * An instance of the [Fuse.js](https://www.fusejs.io/) library.
+     * A promise resolved after downloading the emoji database.
+     * The promise resolves with `true` when the database is successfully downloaded or `false` otherwise.
      */
-    private _fuseSearch;
+    private _databasePromise;
     /**
-     * The resolved URL from which the emoji repository is downloaded.
+     * A callback to resolve the {@link #_databasePromise} to control the return value of this promise.
      */
-    private readonly _url;
+    private _databasePromiseResolveCallback;
     /**
-     * A promise resolved after downloading the emoji collection.
-     * The promise resolves with `true` when the repository is successfully downloaded or `false` otherwise.
-     */
-    private readonly _repositoryPromise;
-    /**
-     * @inheritDoc
+     * An instance of the [Fuse.js](https://www.fusejs.io/) library.
      */
-    static get requires(): readonly [typeof EmojiUtils];
+    private _fuseSearch;
     /**
      * @inheritDoc
      */
@@ -50,7 +45,7 @@ export default class EmojiRepository extends Plugin {
     init(): Promise<void>;
     /**
      * 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.
@@ -59,7 +54,7 @@ export default class EmojiRepository extends Plugin {
     getEmojiByQuery(searchQuery: string): Array<EmojiEntry>;
     /**
      * 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.
      */
@@ -69,40 +64,15 @@ export default class EmojiRepository extends Plugin {
      */
     getSkinTones(): Array<SkinTone>;
     /**
-     * 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(): Promise<boolean>;
     /**
-     * Returns the URL from which the emoji repository is downloaded. If the URL is not provided
-     * in the configuration, the default URL is used with the version from the configuration.
-     *
-     * If both the URL and version are provided, a warning is logged.
-     */
-    private _getUrl;
-    /**
-     * Warn users on self-hosted installations that this plugin uses a CDN to fetch the emoji repository.
-     */
-    private _warnAboutCdnUse;
-    /**
-     * Returns the emoji repository in a configured version if it is a non-empty array. Returns `null` otherwise.
-     */
-    private _getItems;
-    /**
-     * Loads the emoji repository. If the repository is already loaded, it returns the cached result.
-     * Otherwise, it fetches the repository from the URL and adds it to the cache.
-     */
-    private _loadAndCacheEmoji;
-    /**
-     * Normalizes the raw data fetched from CDN. By normalization, we meant:
+     * A function used to check if the given emoji is supported in the operating system.
      *
-     *  * Filter out unsupported emoji (these that will not render correctly),
-     *  * Prepare skin tone variants if an emoji defines them.
-     */
-    private _normalizeEmoji;
-    /**
-     * Versioned emoji repository.
+     * Referenced for unit testing purposes.
      */
-    private static _results;
+    private static _isEmojiSupported;
 }
 /**
  * Represents a single group of the emoji category, e.g., "Smileys & Expressions".