@ckeditor/ckeditor5-emoji 0.0.0-nightly-next-20250227.1 → 0.0.0-nightly-20250228.0

package/lang/contexts.json

@@ -20,6 +20,5 @@
 	"Medium Light skin tone": "Dropdown option label for using the \"Medium Light skin tone\" variant. Example emoji: 👋🏼.",
 	"Medium skin tone": "Dropdown option label for using the \"Medium skin tone\" variant. Example emoji: 👋🏽.",
 	"Medium Dark skin tone": "Dropdown option label for using the \"Medium Dark skin tone\" variant. Example emoji: 👋🏾.",
-	"Dark skin tone": "Dropdown option label for using the \"Dark skin tone\" variant. Example emoji: 👋🏿.",
-	"Emoji picker": "Header of the emoji picker balloon panel."
+	"Dark skin tone": "Dropdown option label for using the \"Dark skin tone\" variant. Example emoji: 👋🏿."
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-emoji",
-  "version": "0.0.0-nightly-next-20250227.1",
+  "version": "0.0.0-nightly-20250228.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-20250227.1",
-    "@ckeditor/ckeditor5-icons": "0.0.0-nightly-next-20250227.1",
-    "@ckeditor/ckeditor5-mention": "0.0.0-nightly-next-20250227.1",
-    "@ckeditor/ckeditor5-typing": "0.0.0-nightly-next-20250227.1",
-    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-next-20250227.1",
-    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-next-20250227.1",
-    "ckeditor5": "0.0.0-nightly-next-20250227.1",
+    "@ckeditor/ckeditor5-core": "0.0.0-nightly-20250228.0",
+    "@ckeditor/ckeditor5-mention": "0.0.0-nightly-20250228.0",
+    "@ckeditor/ckeditor5-typing": "0.0.0-nightly-20250228.0",
+    "@ckeditor/ckeditor5-ui": "0.0.0-nightly-20250228.0",
+    "@ckeditor/ckeditor5-utils": "0.0.0-nightly-20250228.0",
+    "ckeditor5": "0.0.0-nightly-20250228.0",
     "fuzzysort": "3.1.0",
-    "es-toolkit": "1.32.0"
+    "lodash-es": "4.17.21"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "SEE LICENSE IN LICENSE.md",

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.d.ts

@@ -10,7 +10,6 @@ import { Plugin } from 'ckeditor5/src/core.js';
 import { Typing } from 'ckeditor5/src/typing.js';
 import EmojiRepository from './emojirepository.js';
 import EmojiPickerView from './ui/emojipickerview.js';
-import EmojiPickerFormView from './ui/emojipickerformview.js';
 import type { SkinToneId } from './emojiconfig.js';
 import '../theme/emojipicker.css';
 /**
@@ -23,10 +22,6 @@ export default class EmojiPicker extends Plugin {
      * The actions view displayed inside the balloon.
      */
     emojiPickerView: EmojiPickerView | undefined;
-    /**
-     * The form view displayed inside the balloon.
-     */
-    emojiPickerFormView: EmojiPickerFormView | undefined;
     /**
      * The contextual balloon plugin instance.
      */
@@ -76,10 +71,6 @@ export default class EmojiPicker extends Plugin {
      * Creates an instance of the `EmojiPickerView` class that represents an emoji balloon.
      */
     private _createEmojiPickerView;
-    /**
-     * Creates an instance of the `EmojiPickerFormView` class that represents a balloon with the emoji picker.
-     */
-    private _createEmojiPickerFormView;
     /**
      * Hides the balloon with the emoji picker.
      */

package/src/emojipicker.js

@@ -6,13 +6,11 @@
  * @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';
-import EmojiPickerFormView from './ui/emojipickerformview.js';
 import '../theme/emojipicker.css';
 const VISUAL_SELECTION_MARKER_NAME = 'emoji-picker';
 /**
@@ -101,14 +99,9 @@ export default class EmojiPicker extends Plugin {
             this.emojiPickerView.searchView.setInputValue(searchValue);
         }
         this.emojiPickerView.searchView.search(searchValue);
-        if (!this.emojiPickerFormView) {
-            this.emojiPickerFormView = this._createEmojiPickerFormView();
-        }
-        if (!this.balloonPlugin.hasView(this.emojiPickerFormView)) {
-            // Show back button if there is another balloon view visible.
-            this.emojiPickerFormView.backButtonView.isVisible = !!this.balloonPlugin.visibleView;
+        if (!this.balloonPlugin.hasView(this.emojiPickerView)) {
             this.balloonPlugin.add({
-                view: this.emojiPickerFormView,
+                view: this.emojiPickerView,
                 position: this._getBalloonPositionData()
             });
         }
@@ -123,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', () => {
@@ -150,43 +143,31 @@ export default class EmojiPicker extends Plugin {
             this._hideUI();
             editor.execute('insertText', { text: textToInsert });
         });
-        return emojiPickerView;
-    }
-    /**
-     * Creates an instance of the `EmojiPickerFormView` class that represents a balloon with the emoji picker.
-     */
-    _createEmojiPickerFormView() {
-        const emojiPickerFormView = new EmojiPickerFormView(this.editor.locale);
-        emojiPickerFormView.children.add(this.emojiPickerView);
         // Update the balloon position when layout is changed.
-        this.listenTo(this.emojiPickerView, 'update', () => {
-            if (this.balloonPlugin.visibleView === emojiPickerFormView) {
+        this.listenTo(emojiPickerView, 'update', () => {
+            if (this.balloonPlugin.visibleView === emojiPickerView) {
                 this.balloonPlugin.updatePosition();
             }
         });
-        // Close the dialog when the back button is clicked.
-        this.listenTo(emojiPickerFormView, 'cancel', () => {
-            this._hideUI();
-        });
         // Close the panel on `Esc` key press when the **actions have focus**.
-        emojiPickerFormView.keystrokes.set('Esc', (data, cancel) => {
+        emojiPickerView.keystrokes.set('Esc', (data, cancel) => {
             this._hideUI();
             cancel();
         });
         // Close the dialog when clicking outside of it.
         clickOutsideHandler({
-            emitter: emojiPickerFormView,
+            emitter: emojiPickerView,
             contextElements: [this.balloonPlugin.view.element],
             callback: () => this._hideUI(),
-            activator: () => this.balloonPlugin.visibleView === emojiPickerFormView
+            activator: () => this.balloonPlugin.visibleView === emojiPickerView
         });
-        return emojiPickerFormView;
+        return emojiPickerView;
     }
     /**
      * Hides the balloon with the emoji picker.
      */
     _hideUI() {
-        this.balloonPlugin.remove(this.emojiPickerFormView);
+        this.balloonPlugin.remove(this.emojiPickerView);
         this.emojiPickerView.searchView.setInputValue('');
         this.editor.editing.view.focus();
         this._hideFakeVisualSelection();

package/src/emojirepository.js

@@ -6,7 +6,7 @@
  * @module emoji/emojirepository
  */
 import fuzzysort from 'fuzzysort';
-import { groupBy } from 'es-toolkit/compat';
+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 {
-    /**
-     * Emoji repository in a configured version.
-     */
-    _items;
-    /**
-     * 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
      */
@@ -107,7 +94,8 @@ class EmojiRepository extends Plugin {
                     // It enables searching in tags with the space character in names.
                     const searchQueryTokens = searchQuery.split(/\s/).filter(Boolean);
                     const matchedTags = searchQueryTokens.flatMap(tok => {
-                        return emojiEntry.tags?.filter(t => t.startsWith(tok));
+                        var _a;
+                        return (_a = emojiEntry.tags) === null || _a === void 0 ? void 0 : _a.filter(t => t.startsWith(tok));
                     });
                     return matchedTags.join();
                 }
@@ -138,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,
@@ -216,11 +204,13 @@ class EmojiRepository extends Plugin {
             return;
         }
         /**
-         * By default, the Emoji plugin fetches the emoji repository from CKEditor 5 CDN. To avoid this,
-         * you can use the {@link module:emoji/emojiconfig~EmojiConfig#definitionsUrl `emoji.definitionsUrl`}
+         * It was detected that your installation uses a commercial license key,
+         * and the default {@glink features/emoji#emoji-source CKEditor CDN for Emoji plugin data}.
+         *
+         * To avoid this, you can use the {@link module:emoji/emojiconfig~EmojiConfig#definitionsUrl `emoji.definitionsUrl`}
          * configuration option to provide a URL to your own emoji repository.
          *
-         * If you only want to suppress this warning, set this configuration option to `cdn`.
+         * If you want to suppress this warning, while using the default CDN, set this configuration option to `cdn`.
          *
          * @error emoji-repository-cdn-use
          */
@@ -284,9 +274,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
      */

package/theme/emojipicker.css

@@ -13,10 +13,6 @@
 	padding-bottom: var(--ck-spacing-medium);
 	justify-content: space-between;
 	align-items: center;
-
-	& > .ck.ck-search {
-		flex: 1;
-	}
 }
 
 /*

package/src/ui/emojipickerformview.d.ts

@@ -1,78 +0,0 @@
-/**
- * @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
- */
-/**
- * @module emoji/ui/emojipickerformview
- */
-import { ButtonView, View, ViewCollection } from 'ckeditor5/src/ui.js';
-import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
-import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
-import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
-import '../../theme/emojipickerform.css';
-/**
- * The emoji picker form view.
- */
-export default class EmojiPickerFormView extends View {
-    /**
-     * The Back button view displayed in the header.
-     */
-    backButtonView: ButtonView;
-    /**
-     * Tracks information about DOM focus in the form.
-     */
-    readonly focusTracker: FocusTracker;
-    /**
-     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    readonly keystrokes: KeystrokeHandler;
-    /**
-     * A collection of child views.
-     */
-    readonly children: ViewCollection;
-    /**
-     * A collection of views that can be focused in the form.
-     */
-    private readonly _focusables;
-    /**
-     * Helps cycling over {@link #_focusables} in the form.
-     */
-    private readonly _focusCycler;
-    /**
-     * Creates an instance of the {@link module:emoji/ui/emojipickerformview~EmojiPickerFormView} class.
-     *
-     * Also see {@link #render}.
-     *
-     * @param locale The localization services instance.
-     */
-    constructor(locale: Locale);
-    /**
-     * @inheritDoc
-     */
-    render(): void;
-    /**
-     * @inheritDoc
-     */
-    destroy(): void;
-    /**
-     * Focuses the fist {@link #_focusables} in the form.
-     */
-    focus(): void;
-    /**
-     * Creates a back button view that cancels the form.
-     */
-    private _createBackButton;
-    /**
-     * Creates a header view for the form.
-     */
-    private _createHeaderView;
-}
-/**
- * Fired when the form view is canceled, for example with a click on {@link ~EmojiPickerFormView#backButtonView}.
- *
- * @eventName ~EmojiPickerFormView#cancel
- */
-export type EmojiPickerFormViewCancelEvent = {
-    name: 'cancel';
-    args: [];
-};

package/src/ui/emojipickerformview.js

@@ -1,146 +0,0 @@
-/**
- * @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
- */
-/**
- * @module emoji/ui/emojipickerformview
- */
-import { ButtonView, FocusCycler, FormHeaderView, View, ViewCollection, isFocusable, isViewWithFocusCycler } from 'ckeditor5/src/ui.js';
-import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
-import { IconPreviousArrow } from 'ckeditor5/src/icons.js';
-// See: https://github.com/ckeditor/ckeditor5/issues/8833
-// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
-import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
-// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
-import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
-import '../../theme/emojipickerform.css';
-/**
- * The emoji picker form view.
- */
-export default class EmojiPickerFormView extends View {
-    /**
-     * The Back button view displayed in the header.
-     */
-    backButtonView;
-    /**
-     * Tracks information about DOM focus in the form.
-     */
-    focusTracker = new FocusTracker();
-    /**
-     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-     */
-    keystrokes = new KeystrokeHandler();
-    /**
-     * A collection of child views.
-     */
-    children;
-    /**
-     * A collection of views that can be focused in the form.
-     */
-    _focusables = new ViewCollection();
-    /**
-     * Helps cycling over {@link #_focusables} in the form.
-     */
-    _focusCycler;
-    /**
-     * Creates an instance of the {@link module:emoji/ui/emojipickerformview~EmojiPickerFormView} class.
-     *
-     * Also see {@link #render}.
-     *
-     * @param locale The localization services instance.
-     */
-    constructor(locale) {
-        super(locale);
-        this.backButtonView = this._createBackButton();
-        this.children = this.createCollection([
-            this._createHeaderView()
-        ]);
-        this._focusCycler = new FocusCycler({
-            focusables: this._focusables,
-            focusTracker: this.focusTracker,
-            keystrokeHandler: this.keystrokes,
-            actions: {
-                // Navigate form fields backward using the Shift + Tab keystroke.
-                focusPrevious: 'shift + tab',
-                // Navigate form fields forwards using the Tab key.
-                focusNext: 'tab'
-            }
-        });
-        this.setTemplate({
-            tag: 'div',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-form',
-                    'ck-emoji-picker-form',
-                    'ck-responsive-form'
-                ],
-                // https://github.com/ckeditor/ckeditor5-link/issues/90
-                tabindex: '-1'
-            },
-            children: this.children
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        const childViews = [
-            ...this.children.filter(isFocusable),
-            this.backButtonView
-        ];
-        childViews.forEach(v => {
-            // Register the view as focusable.
-            this._focusables.add(v);
-            // Register the view in the focus tracker.
-            this.focusTracker.add(v.element);
-            // Register the view in the focus cycler to avoid nested focus cycles traps.
-            if (isViewWithFocusCycler(v)) {
-                this._focusCycler.chain(v.focusCycler);
-            }
-        });
-        // Start listening for the keystrokes coming from #element.
-        this.keystrokes.listenTo(this.element);
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
-    /**
-     * Focuses the fist {@link #_focusables} in the form.
-     */
-    focus() {
-        this._focusCycler.focusFirst();
-    }
-    /**
-     * Creates a back button view that cancels the form.
-     */
-    _createBackButton() {
-        const t = this.locale.t;
-        const backButton = new ButtonView(this.locale);
-        backButton.set({
-            class: 'ck-button-back',
-            label: t('Back'),
-            icon: IconPreviousArrow,
-            tooltip: true
-        });
-        backButton.delegate('execute').to(this, 'cancel');
-        return backButton;
-    }
-    /**
-     * Creates a header view for the form.
-     */
-    _createHeaderView() {
-        const t = this.locale.t;
-        const header = new FormHeaderView(this.locale, {
-            label: t('Emoji picker')
-        });
-        header.children.add(this.backButtonView, 0);
-        return header;
-    }
-}

package/theme/emojipickerform.css

@@ -1,17 +0,0 @@
-/*
- * 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
- */
-
-.ck.ck-form.ck-emoji-picker-form {
-	padding-bottom: 0;
-
-	/*
-	 * `.ck-form` overrides styling of all dropdowns by adding border around them.
-	 * The border is not needed in the emoji picker form so try to remove it keeping
-	 * specificity high enough to override the form styling.
-	 */
-	& .ck-dropdown .ck-dropdown__button:not(:focus) {
-		border-color: transparent;
-	}
-}