@ckeditor/ckeditor5-emoji 44.3.0 → 45.0.0-alpha.0

package/src/emojimention.js

@@ -18,6 +18,16 @@ 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,6 +10,7 @@ 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';
 /**
@@ -22,6 +23,10 @@ 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.
      */
@@ -71,6 +76,10 @@ 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,11 +6,13 @@
  * @module emoji/emojipicker
  */
 import { ButtonView, clickOutsideHandler, ContextualBalloon, Dialog, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
-import { icons, Plugin } from 'ckeditor5/src/core.js';
+import { 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';
 /**
@@ -99,10 +101,16 @@ export default class EmojiPicker extends Plugin {
             this.emojiPickerView.searchView.setInputValue(searchValue);
         }
         this.emojiPickerView.searchView.search(searchValue);
-        if (!this.balloonPlugin.hasView(this.emojiPickerView)) {
+        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;
             this.balloonPlugin.add({
-                view: this.emojiPickerView,
-                position: this._getBalloonPositionData()
+                view: this.emojiPickerFormView,
+                position: this._getBalloonPositionData(),
+                balloonClassName: 'ck-emoji-picker-balloon'
             });
         }
         this.emojiPickerView.focus();
@@ -116,7 +124,7 @@ export default class EmojiPicker extends Plugin {
         buttonView.bind('isEnabled').to(command, 'isEnabled');
         buttonView.set({
             label: t('Emoji'),
-            icon: icons.emoji,
+            icon: IconEmoji,
             isToggleable: true
         });
         buttonView.on('execute', () => {
@@ -143,31 +151,43 @@ 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(emojiPickerView, 'update', () => {
-            if (this.balloonPlugin.visibleView === emojiPickerView) {
+        this.listenTo(this.emojiPickerView, 'update', () => {
+            if (this.balloonPlugin.visibleView === emojiPickerFormView) {
                 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**.
-        emojiPickerView.keystrokes.set('Esc', (data, cancel) => {
+        emojiPickerFormView.keystrokes.set('Esc', (data, cancel) => {
             this._hideUI();
             cancel();
         });
         // Close the dialog when clicking outside of it.
         clickOutsideHandler({
-            emitter: emojiPickerView,
+            emitter: emojiPickerFormView,
             contextElements: [this.balloonPlugin.view.element],
             callback: () => this._hideUI(),
-            activator: () => this.balloonPlugin.visibleView === emojiPickerView
+            activator: () => this.balloonPlugin.visibleView === emojiPickerFormView
         });
-        return emojiPickerView;
+        return emojiPickerFormView;
     }
     /**
      * Hides the balloon with the emoji picker.
      */
     _hideUI() {
-        this.balloonPlugin.remove(this.emojiPickerView);
+        this.balloonPlugin.remove(this.emojiPickerFormView);
         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 'lodash-es';
+import { groupBy } from 'es-toolkit/compat';
 import { Plugin } from 'ckeditor5/src/core.js';
 import { logWarning, version as editorVersion } from 'ckeditor5/src/utils.js';
 import EmojiUtils from './emojiutils.js';
@@ -20,6 +20,19 @@ 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
      */
@@ -104,8 +117,7 @@ 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 => {
-                        var _a;
-                        return (_a = emojiEntry.tags) === null || _a === void 0 ? void 0 : _a.filter(t => t.startsWith(tok));
+                        return emojiEntry.tags?.filter(t => t.startsWith(tok));
                     });
                     return matchedTags.join();
                 }
@@ -136,7 +148,7 @@ class EmojiRepository extends Plugin {
             { title: t('Symbols'), icon: '🔵', groupId: 8 },
             { title: t('Flags'), icon: '🏁', groupId: 9 }
         ];
-        const groups = groupBy(repository, 'group');
+        const groups = groupBy(repository, item => item.group);
         return categories.map(category => {
             return {
                 ...category,
@@ -278,11 +290,11 @@ class EmojiRepository extends Plugin {
         container.remove();
         return results;
     }
+    /**
+     * Versioned emoji repository.
+     */
+    static _results = {};
 }
-/**
- * Versioned emoji repository.
- */
-EmojiRepository._results = {};
 export default EmojiRepository;
 /**
  * Unable to load the emoji repository from the URL.

package/src/emojiutils.js

@@ -142,11 +142,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,6 +13,22 @@ 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,6 +12,32 @@ 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/emojipickerformview.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @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

@@ -0,0 +1,146 @@
+/**
+ * @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/src/ui/emojipickerview.js

@@ -15,6 +15,42 @@ 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,12 +5,20 @@
 /**
  * @module emoji/ui/emojisearchview
  */
-import { escapeRegExp } from 'lodash-es';
+import { escapeRegExp } from 'es-toolkit/compat';
 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,6 +12,14 @@ 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,6 +13,10 @@
 	padding-bottom: var(--ck-spacing-medium);
 	justify-content: space-between;
 	align-items: center;
+
+	& > .ck.ck-search {
+		flex: 1;
+	}
 }
 
 /*
@@ -30,3 +34,7 @@
 	margin-right: -1px;
 	outline: solid 1px hsla(0, 0%, 100%, .5);
 }
+
+div.ck.ck-balloon-panel.ck-emoji-picker-balloon {
+	z-index: calc( var( --ck-z-dialog ) + 1 );
+}

package/theme/emojipickerform.css

@@ -0,0 +1,17 @@
+/*
+ * 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.ck-dropdown .ck-dropdown__button:not(:focus) {
+		border-color: transparent;
+	}
+}