@ckeditor/ckeditor5-emoji 44.2.0-alpha.1 → 44.2.0-alpha.11

package/lang/translations/zh.po

@@ -13,88 +13,88 @@ msgstr ""
 
 msgctxt "Toolbar button tooltip for the Emoji feature."
 msgid "Emoji"
-msgstr ""
+msgstr "表情符號"
 
 msgctxt "Dropdown option label for opening an emoji picker offering more results to choose from."
 msgid "Show all emoji..."
-msgstr ""
+msgstr "顯示所有表情符號…"
 
 msgctxt "Label of an input field for filtering an emoji collection by the typed value."
 msgid "Find an emoji (min. 2 characters)"
-msgstr ""
+msgstr "尋找表情符號（最少 2 個字元）"
 
 msgctxt "The main text of the message shown to the user when no emoji are available for the search criteria."
 msgid "No emojis were found matching \"%0\"."
-msgstr ""
+msgstr "找不到與「%0」相符的表情符號。"
 
 msgctxt "The main text of the message shown to the user when the provided search query does not contain the required number of characters."
 msgid "Keep on typing to see the emoji."
-msgstr ""
+msgstr "繼續輸入以查看表情符號。"
 
 msgctxt "The secondary text of the message shown to the user to explain how many characters the search query must consist of."
 msgid "The query must contain at least two characters."
-msgstr ""
+msgstr "查詢條件至少須包含兩個字元。"
 
 msgctxt "Tooltip for filtering the displayed emoji by the \"Smileys & Expressions\" category."
 msgid "Smileys & Expressions"
-msgstr ""
+msgstr "笑臉與表情"
 
 msgctxt "Tooltip for filtering the displayed emoji by the \"Gestures & People\" category."
 msgid "Gestures & People"
-msgstr ""
+msgstr "手勢與人物"
 
 msgctxt "Tooltip for filtering the displayed emoji by the \"Animals & Nature\" category."
 msgid "Animals & Nature"
-msgstr ""
+msgstr "動物與自然"
 
 msgctxt "Tooltip for filtering the displayed emoji by the \"Food & Drinks\" category."
 msgid "Food & Drinks"
-msgstr ""
+msgstr "飲食"
 
 msgctxt "Tooltip for filtering the displayed emoji by the \"Travel & Places\" category."
 msgid "Travel & Places"
-msgstr ""
+msgstr "旅遊與景點"
 
 msgctxt "Tooltip for filtering the displayed emoji by the \"Activities\" category."
 msgid "Activities"
-msgstr ""
+msgstr "活動"
 
 msgctxt "Tooltip for filtering the displayed emoji by the \"Objects\" category."
 msgid "Objects"
-msgstr ""
+msgstr "物件"
 
 msgctxt "Tooltip for filtering the displayed emoji by the \"Symbols\" category."
 msgid "Symbols"
-msgstr ""
+msgstr "符號"
 
 msgctxt "Tooltip for filtering the displayed emoji by the \"Flags\" category."
 msgid "Flags"
-msgstr ""
+msgstr "旗幟"
 
 msgctxt "Default label for the emoji skin tone dropdown."
 msgid "Select skin tone"
-msgstr ""
+msgstr "選取膚色"
 
 msgctxt "Dropdown option label for using the \"Default skin tone\" variant. Example emoji: 👋."
 msgid "Default skin tone"
-msgstr ""
+msgstr "預設膚色"
 
 msgctxt "Dropdown option label for using the \"Light skin tone\" variant. Example emoji: 👋🏻."
 msgid "Light skin tone"
-msgstr ""
+msgstr "淺調膚色"
 
 msgctxt "Dropdown option label for using the \"Medium Light skin tone\" variant. Example emoji: 👋🏼."
 msgid "Medium Light skin tone"
-msgstr ""
+msgstr "中淺調膚色"
 
 msgctxt "Dropdown option label for using the \"Medium skin tone\" variant. Example emoji: 👋🏽."
 msgid "Medium skin tone"
-msgstr ""
+msgstr "中調膚色"
 
 msgctxt "Dropdown option label for using the \"Medium Dark skin tone\" variant. Example emoji: 👋🏾."
 msgid "Medium Dark skin tone"
-msgstr ""
+msgstr "中深調膚色"
 
 msgctxt "Dropdown option label for using the \"Dark skin tone\" variant. Example emoji: 👋🏿."
 msgid "Dark skin tone"
-msgstr ""
+msgstr "深調膚色"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-emoji",
-  "version": "44.2.0-alpha.1",
+  "version": "44.2.0-alpha.11",
   "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.1",
-    "@ckeditor/ckeditor5-mention": "44.2.0-alpha.1",
-    "@ckeditor/ckeditor5-typing": "44.2.0-alpha.1",
-    "@ckeditor/ckeditor5-ui": "44.2.0-alpha.1",
-    "@ckeditor/ckeditor5-utils": "44.2.0-alpha.1",
-    "ckeditor5": "44.2.0-alpha.1",
+    "@ckeditor/ckeditor5-core": "44.2.0-alpha.11",
+    "@ckeditor/ckeditor5-mention": "44.2.0-alpha.11",
+    "@ckeditor/ckeditor5-typing": "44.2.0-alpha.11",
+    "@ckeditor/ckeditor5-ui": "44.2.0-alpha.11",
+    "@ckeditor/ckeditor5-utils": "44.2.0-alpha.11",
+    "ckeditor5": "44.2.0-alpha.11",
     "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, EmojiCommand } from './index.js';
+import type { Emoji, EmojiConfig, EmojiMention, EmojiPicker, EmojiRepository, EmojiUtils, EmojiCommand } from './index.js';
 declare module '@ckeditor/ckeditor5-core' {
     interface EditorConfig {
         /**
@@ -17,6 +17,7 @@ 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

@@ -75,6 +75,7 @@ export interface EmojiConfig {
      *
      * @default 16
      */
-    version?: 15 | 16;
+    version?: EmojiVersion;
 }
 export type SkinToneId = 'default' | 'light' | 'medium-light' | 'medium' | 'medium-dark' | 'dark';
+export type EmojiVersion = 15 | 16;

package/src/emojimention.d.ts

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

package/src/emojimention.js

@@ -46,11 +46,21 @@ export default class EmojiMention extends Plugin {
         });
         this._emojiDropdownLimit = editor.config.get('emoji.dropdownLimit');
         this._skinTone = editor.config.get('emoji.skinTone');
-        const mentionFeedsConfigs = editor.config.get('mention.feeds');
+        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 markerAlreadyUsed = mentionFeedsConfigs.some(config => config.marker === EMOJI_MENTION_MARKER);
-        const isMarkerUsedByMergeFields = mergeFieldsPrefix ? mergeFieldsPrefix[0] === EMOJI_MENTION_MARKER : false;
-        if (markerAlreadyUsed || isMarkerUsedByMergeFields) {
+        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) {
             /**
              * The `marker` in the `emoji` config is already used by other plugin configuration.
              *
@@ -60,26 +70,12 @@ export default class EmojiMention extends Plugin {
             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()) {
+        const isEmojiConfigDefined = mentionFeedsConfigs.some(config => config._isEmojiMarker);
+        if (isEmojiConfigDefined) {
             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),
@@ -87,6 +83,19 @@ 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.
      */
@@ -143,7 +152,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();
@@ -167,18 +176,26 @@ export default class EmojiMention extends Plugin {
             if (searchQuery.startsWith(' ')) {
                 return [];
             }
-            const emojis = this._emojiRepositoryPlugin.getEmojiByQuery(searchQuery)
+            // 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 => {
                 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.
      */
-    private _emojiRepositoryPlugin;
+    emojiRepositoryPlugin: EmojiRepository;
     /**
      * @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,31 +2,36 @@
  * @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, type Editor } from 'ckeditor5/src/core.js';
+import { type Editor, Plugin } from 'ckeditor5/src/core.js';
+import EmojiUtils from './emojiutils.js';
 import type { SkinToneId } from './emojiconfig.js';
 /**
  * The emoji repository plugin.
  *
- * Loads the emoji database from URL during plugin initialization and provides utility methods to search it.
+ * Loads the emoji repository from URL during plugin initialization and provides utility methods to search it.
  */
 export default class EmojiRepository extends Plugin {
     /**
-     * Emoji database.
+     * A callback to resolve the {@link #_repositoryPromise} to control the return value of this promise.
      */
-    private _database;
+    private _repositoryPromiseResolveCallback;
     /**
-     * A promise resolved after downloading the emoji database.
-     * The promise resolves with `true` when the database is successfully downloaded or `false` otherwise.
+     * An instance of the [Fuse.js](https://www.fusejs.io/) library.
      */
-    private _databasePromise;
+    private _fuseSearch;
     /**
-     * A callback to resolve the {@link #_databasePromise} to control the return value of this promise.
+     * The emoji version that is used to prepare the emoji repository.
      */
-    private _databasePromiseResolveCallback;
+    private readonly _version;
     /**
-     * An instance of the [Fuse.js](https://www.fusejs.io/) library.
+     * A promise resolved after downloading the emoji collection.
+     * The promise resolves with `true` when the repository is successfully downloaded or `false` otherwise.
      */
-    private _fuseSearch;
+    private readonly _repositoryPromise;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof EmojiUtils];
     /**
      * @inheritDoc
      */
@@ -45,7 +50,7 @@ export default class EmojiRepository extends Plugin {
     init(): Promise<void>;
     /**
      * 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,
+     * If the emoji repository 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.
@@ -54,7 +59,7 @@ export default class EmojiRepository extends Plugin {
     getEmojiByQuery(searchQuery: string): Array<EmojiEntry>;
     /**
      * Groups all emojis by categories.
-     * If the emoji database is not loaded, it returns an empty array.
+     * If the emoji repository is not loaded, it returns an empty array.
      *
      * @returns An array of emoji entries grouped by categories.
      */
@@ -64,15 +69,28 @@ export default class EmojiRepository extends Plugin {
      */
     getSkinTones(): Array<SkinTone>;
     /**
-     * Indicates whether the emoji database has been successfully downloaded and the plugin is operational.
+     * Indicates whether the emoji repository has been successfully downloaded and the plugin is operational.
      */
     isReady(): Promise<boolean>;
     /**
-     * A function used to check if the given emoji is supported in the operating system.
+     * Returns the emoji repository in a configured version if it is a non-empty array. Returns `null` otherwise.
+     */
+    private _getItems;
+    /**
+     * Makes the HTTP request to download the emoji repository in a configured version.
+     */
+    private _loadItemsFromCdn;
+    /**
+     * Normalizes the raw data fetched from CDN. By normalization, we meant:
      *
-     * Referenced for unit testing purposes.
+     *  * Filter out unsupported emoji (these that will not render correctly),
+     *  * Prepare skin tone variants if an emoji defines them.
+     */
+    private _normalizeEmoji;
+    /**
+     * Versioned emoji repository.
      */
-    private static _isEmojiSupported;
+    private static _results;
 }
 /**
  * Represents a single group of the emoji category, e.g., "Smileys & Expressions".