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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-emoji",
-  "version": "44.2.0-alpha.3",
+  "version": "44.2.0-alpha.4",
   "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.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",
+    "@ckeditor/ckeditor5-core": "44.2.0-alpha.4",
+    "@ckeditor/ckeditor5-mention": "44.2.0-alpha.4",
+    "@ckeditor/ckeditor5-typing": "44.2.0-alpha.4",
+    "@ckeditor/ckeditor5-ui": "44.2.0-alpha.4",
+    "@ckeditor/ckeditor5-utils": "44.2.0-alpha.4",
+    "ckeditor5": "44.2.0-alpha.4",
     "fuse.js": "7.0.0",
     "lodash-es": "4.17.21"
   },

package/src/emojimention.d.ts

@@ -19,6 +19,10 @@ export default class EmojiMention extends Plugin {
      * An instance of the {@link module:emoji/emojirepository~EmojiRepository} plugin.
      */
     private _emojiRepositoryPlugin;
+    /**
+     * 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 +49,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.
      */
@@ -167,6 +176,10 @@ export default class EmojiMention extends Plugin {
             if (searchQuery.startsWith(' ')) {
                 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;

package/src/ui/emojipickerview.js

@@ -156,6 +156,7 @@ export default class EmojiPickerView extends View {
         // 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) => {