@ckeditor/ckeditor5-emoji 0.0.0-nightly-next-20250222.0 → 0.0.0-nightly-20250223.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-emoji",
-  "version": "0.0.0-nightly-next-20250222.0",
+  "version": "0.0.0-nightly-20250223.0",
   "description": "Emoji feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,15 +13,14 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "0.0.0-nightly-next-20250222.0",
-    "@ckeditor/ckeditor5-icons": "0.0.0-nightly-next-20250222.0",
-    "@ckeditor/ckeditor5-mention": "0.0.0-nightly-next-20250222.0",
-    "@ckeditor/ckeditor5-typing": "0.0.0-nightly-next-20250222.0",
-    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-next-20250222.0",
-    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-next-20250222.0",
-    "ckeditor5": "0.0.0-nightly-next-20250222.0",
-    "fuse.js": "7.0.0",
-    "es-toolkit": "1.32.0"
+    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20250223.0",
+    "@ckeditor/ckeditor5-mention": "0.0.0-nightly-20250223.0",
+    "@ckeditor/ckeditor5-typing": "0.0.0-nightly-20250223.0",
+    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-20250223.0",
+    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20250223.0",
+    "ckeditor5": "0.0.0-nightly-20250223.0",
+    "fuzzysort": "3.1.0",
+    "lodash-es": "4.17.21"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -42,6 +41,11 @@
     "ckeditor5-metadata.json",
     "CHANGELOG.md"
   ],
+  "sideEffects": [
+    "*.css",
+    "build/**/*.js",
+    "dist/translations/*.umd.js"
+  ],
   "types": "src/index.d.ts",
   "exports": {
     ".": {

package/src/emojimention.js

@@ -18,16 +18,6 @@ const EMOJI_HINT_OPTION_ID = ':__EMOJI_HINT:';
  * Introduces the autocomplete of emojis while typing.
  */
 export default 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
      */

package/src/emojipicker.js

@@ -6,9 +6,8 @@
  * @module emoji/emojipicker
  */
 import { ButtonView, clickOutsideHandler, ContextualBalloon, Dialog, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
-import { Plugin } from 'ckeditor5/src/core.js';
+import { icons, Plugin } from 'ckeditor5/src/core.js';
 import { Typing } from 'ckeditor5/src/typing.js';
-import { IconEmoji } from 'ckeditor5/src/icons.js';
 import EmojiCommand from './emojicommand.js';
 import EmojiRepository from './emojirepository.js';
 import EmojiPickerView from './ui/emojipickerview.js';
@@ -117,7 +116,7 @@ export default class EmojiPicker extends Plugin {
         buttonView.bind('isEnabled').to(command, 'isEnabled');
         buttonView.set({
             label: t('Emoji'),
-            icon: IconEmoji,
+            icon: icons.emoji,
             isToggleable: true
         });
         buttonView.on('execute', () => {

package/src/emojirepository.d.ts

@@ -16,9 +16,9 @@ export default class EmojiRepository extends Plugin {
      */
     private _repositoryPromiseResolveCallback;
     /**
-     * An instance of the [Fuse.js](https://www.fusejs.io/) library.
+     * Emoji repository in a configured version.
      */
-    private _fuseSearch;
+    private _items;
     /**
      * The resolved URL from which the emoji repository is downloaded.
      */
@@ -50,8 +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 repository is not loaded, the [Fuse.js](https://www.fusejs.io/) instance is not created,
-     * hence this method returns an empty array.
+     * If the emoji repository is not loaded 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.

package/src/emojirepository.js

@@ -5,8 +5,8 @@
 /**
  * @module emoji/emojirepository
  */
-import Fuse from 'fuse.js';
-import { groupBy } from 'es-toolkit/compat';
+import fuzzysort from 'fuzzysort';
+import { groupBy } from 'lodash-es';
 import { Plugin } from 'ckeditor5/src/core.js';
 import { logWarning, version as editorVersion } from 'ckeditor5/src/utils.js';
 import EmojiUtils from './emojiutils.js';
@@ -20,19 +20,6 @@ const DEFAULT_EMOJI_VERSION = 16;
  * Loads the emoji repository 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 resolved URL from which the emoji repository is downloaded.
-     */
-    _url;
-    /**
-     * A promise resolved after downloading the emoji collection.
-     * The promise resolves with `true` when the repository is successfully downloaded or `false` otherwise.
-     */
-    _repositoryPromise;
     /**
      * @inheritDoc
      */
@@ -65,7 +52,7 @@ class EmojiRepository extends Plugin {
         this._repositoryPromise = new Promise(resolve => {
             this._repositoryPromiseResolveCallback = resolve;
         });
-        this._fuseSearch = null;
+        this._items = null;
     }
     /**
      * @inheritDoc
@@ -73,35 +60,21 @@ class EmojiRepository extends Plugin {
     async init() {
         this._warnAboutCdnUse();
         await this._loadAndCacheEmoji();
-        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) {
+        this._items = this._getItems();
+        if (!this._items) {
             return this._repositoryPromiseResolveCallback(false);
         }
-        // Create instance of the Fuse.js library with configured weighted search keys and disabled fuzzy search.
-        this._fuseSearch = new Fuse(items, {
-            keys: [
-                { name: 'emoticon', weight: 5 },
-                { name: 'annotation', weight: 3 },
-                { name: 'tags', weight: 1 }
-            ],
-            minMatchCharLength: 2,
-            threshold: 0,
-            ignoreLocation: true
-        });
         return this._repositoryPromiseResolveCallback(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,
-     * hence this method returns an empty array.
+     * If the emoji repository is not loaded 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) {
+        if (!this._items) {
             return [];
         }
         const searchQueryTokens = searchQuery.split(/\s/).filter(Boolean);
@@ -110,21 +83,25 @@ class EmojiRepository extends Plugin {
         if (!shouldSearch) {
             return [];
         }
-        return this._fuseSearch
-            .search({
-            '$or': [
-                {
-                    emoticon: searchQuery
-                },
-                {
-                    '$and': searchQueryTokens.map(token => ({ annotation: token }))
-                },
-                {
-                    '$and': searchQueryTokens.map(token => ({ tags: token }))
+        return fuzzysort
+            .go(searchQuery, this._items, {
+            threshold: 0.6,
+            keys: [
+                'emoticon',
+                'annotation',
+                (emojiEntry) => {
+                    // Instead of searching over all tags, let's use only those that matches the query.
+                    // It enables searching in tags with the space character in names.
+                    const searchQueryTokens = searchQuery.split(/\s/).filter(Boolean);
+                    const matchedTags = searchQueryTokens.flatMap(tok => {
+                        var _a;
+                        return (_a = emojiEntry.tags) === null || _a === void 0 ? void 0 : _a.filter(t => t.startsWith(tok));
+                    });
+                    return matchedTags.join();
                 }
             ]
         })
-            .map(result => result.item);
+            .map(result => result.obj);
     }
     /**
      * Groups all emojis by categories.
@@ -149,7 +126,7 @@ class EmojiRepository extends Plugin {
             { title: t('Symbols'), icon: '🟢', groupId: 8 },
             { title: t('Flags'), icon: '🏁', groupId: 9 }
         ];
-        const groups = groupBy(repository, item => item.group);
+        const groups = groupBy(repository, 'group');
         return categories.map(category => {
             return {
                 ...category,
@@ -295,9 +272,9 @@ class EmojiRepository extends Plugin {
         container.remove();
         return results;
     }
-    /**
-     * Versioned emoji repository.
-     */
-    static _results = {};
 }
+/**
+ * Versioned emoji repository.
+ */
+EmojiRepository._results = {};
 export default EmojiRepository;

package/src/emojiutils.js

@@ -131,11 +131,11 @@ class EmojiUtils extends Plugin {
         // 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;
 }
+/**
+ * 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.
+ */
+EmojiUtils._isEmojiSupported = isEmojiSupported;
 export default EmojiUtils;

package/src/ui/emojicategoriesview.js

@@ -13,22 +13,6 @@ import '../../theme/emojicategories.css';
  * It is responsible allowing the user to select a particular emoji category.
  */
 export default 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
      */

package/src/ui/emojigridview.js

@@ -12,32 +12,6 @@ import '../../theme/emojigrid.css';
  * A grid of emoji tiles. It allows browsing emojis and selecting them to be inserted into the content.
  */
 export default 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
      */

package/src/ui/emojipickerview.js

@@ -15,42 +15,6 @@ import EmojiToneView from './emojitoneview.js';
  * A view that glues pieces of the emoji panel together.
  */
 export default 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
      */

package/src/ui/emojisearchview.js

@@ -5,20 +5,12 @@
 /**
  * @module emoji/ui/emojisearchview
  */
-import { escapeRegExp } from 'es-toolkit/compat';
+import { escapeRegExp } from 'lodash-es';
 import { createLabeledInputText, SearchTextView, View } from 'ckeditor5/src/ui.js';
 /**
  * A view responsible for providing an input element that allows filtering emoji by the provided query.
  */
 export default class EmojiSearchView extends View {
-    /**
-     * The find in text input view that stores the searched string.
-     */
-    inputView;
-    /**
-     * An instance of the `EmojiGridView`.
-     */
-    gridView;
     /**
      * @inheritDoc
      */

package/src/ui/emojitoneview.js

@@ -12,14 +12,6 @@ import '../../theme/emojitone.css';
  * A view responsible for selecting a skin tone for an emoji.
  */
 export default class EmojiToneView extends View {
-    /**
-     * A dropdown element for selecting an active skin tone.
-     */
-    dropdownView;
-    /**
-     * An array of available skin tones.
-     */
-    _skinTones;
     /**
      * @inheritDoc
      */