@ckeditor/ckeditor5-emoji 44.2.0-alpha.7 → 44.2.0-alpha.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-emoji",
-  "version": "44.2.0-alpha.7",
+  "version": "44.2.0-alpha.8",
   "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.7",
-    "@ckeditor/ckeditor5-mention": "44.2.0-alpha.7",
-    "@ckeditor/ckeditor5-typing": "44.2.0-alpha.7",
-    "@ckeditor/ckeditor5-ui": "44.2.0-alpha.7",
-    "@ckeditor/ckeditor5-utils": "44.2.0-alpha.7",
-    "ckeditor5": "44.2.0-alpha.7",
+    "@ckeditor/ckeditor5-core": "44.2.0-alpha.8",
+    "@ckeditor/ckeditor5-mention": "44.2.0-alpha.8",
+    "@ckeditor/ckeditor5-typing": "44.2.0-alpha.8",
+    "@ckeditor/ckeditor5-ui": "44.2.0-alpha.8",
+    "@ckeditor/ckeditor5-utils": "44.2.0-alpha.8",
+    "ckeditor5": "44.2.0-alpha.8",
     "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/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,11 @@ 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.
      */

package/src/emojimention.js

@@ -88,9 +88,9 @@ export default class EmojiMention extends Plugin {
      */
     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();
+        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));
@@ -152,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();
@@ -180,18 +180,18 @@ export default class EmojiMention extends Plugin {
             if (!this._isEmojiRepositoryAvailable) {
                 return [];
             }
-            const emojis = this._emojiRepositoryPlugin.getEmojiByQuery(searchQuery)
+            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,7 +2,8 @@
  * @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.
@@ -10,6 +11,14 @@ import type { SkinToneId } from './emojiconfig.js';
  * Loads the emoji database from URL during plugin initialization and provides utility methods to search it.
  */
 export default class EmojiRepository extends Plugin {
+    /**
+     * A callback to resolve the {@link #_databasePromise} to control the return value of this promise.
+     */
+    private _databasePromiseResolveCallback;
+    /**
+     * An instance of the [Fuse.js](https://www.fusejs.io/) library.
+     */
+    private _fuseSearch;
     /**
      * Emoji database.
      */
@@ -18,15 +27,11 @@ export default class EmojiRepository extends Plugin {
      * A promise resolved after downloading the emoji database.
      * The promise resolves with `true` when the database is successfully downloaded or `false` otherwise.
      */
-    private _databasePromise;
-    /**
-     * A callback to resolve the {@link #_databasePromise} to control the return value of this promise.
-     */
-    private _databasePromiseResolveCallback;
+    private readonly _databasePromise;
     /**
-     * An instance of the [Fuse.js](https://www.fusejs.io/) library.
+     * @inheritDoc
      */
-    private _fuseSearch;
+    static get requires(): readonly [typeof EmojiUtils];
     /**
      * @inheritDoc
      */
@@ -67,12 +72,6 @@ export default class EmojiRepository extends Plugin {
      * Indicates whether the emoji database 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.
-     *
-     * Referenced for unit testing purposes.
-     */
-    private static _isEmojiSupported;
 }
 /**
  * Represents a single group of the emoji category, e.g., "Smileys & Expressions".

package/src/emojirepository.js

@@ -9,24 +9,22 @@ import Fuse from 'fuse.js';
 import { groupBy } from 'lodash-es';
 import { Plugin } from 'ckeditor5/src/core.js';
 import { logWarning } from 'ckeditor5/src/utils.js';
+import EmojiUtils from './emojiutils.js';
 // An endpoint from which the emoji database will be downloaded during plugin initialization.
 // The `{version}` placeholder is replaced with the value from editor config.
 const EMOJI_DATABASE_URL = 'https://cdn.ckeditor.com/ckeditor5/data/emoji/{version}/en.json';
-const SKIN_TONE_MAP = {
-    0: 'default',
-    1: 'light',
-    2: 'medium-light',
-    3: 'medium',
-    4: 'medium-dark',
-    5: 'dark'
-};
-const BASELINE_EMOJI_WIDTH = 24;
 /**
  * The emoji repository plugin.
  *
  * Loads the emoji database from URL during plugin initialization and provides utility methods to search it.
  */
-class EmojiRepository extends Plugin {
+export default class EmojiRepository extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [EmojiUtils];
+    }
     /**
      * @inheritDoc
      */
@@ -58,20 +56,23 @@ class EmojiRepository extends Plugin {
      * @inheritDoc
      */
     async init() {
+        const emojiUtils = this.editor.plugins.get('EmojiUtils');
         const emojiVersion = this.editor.config.get('emoji.version');
         const emojiDatabaseUrl = EMOJI_DATABASE_URL.replace('{version}', `${emojiVersion}`);
         const emojiDatabase = await loadEmojiDatabase(emojiDatabaseUrl);
+        const emojiSupportedVersionByOs = emojiUtils.getEmojiSupportedVersionByOs();
         // Skip the initialization if the emoji database download has failed.
         // An empty database prevents the initialization of other dependent plugins, such as `EmojiMention` and `EmojiPicker`.
         if (!emojiDatabase.length) {
             return this._databasePromiseResolveCallback(false);
         }
-        const container = createEmojiWidthTestingContainer();
+        const container = emojiUtils.createEmojiWidthTestingContainer();
+        document.body.appendChild(container);
         // Store the emoji database after normalizing the raw data.
         this._database = emojiDatabase
-            .filter(item => isEmojiCategoryAllowed(item))
-            .filter(item => EmojiRepository._isEmojiSupported(item, container))
-            .map(item => normalizeEmojiSkinTone(item));
+            .filter(item => emojiUtils.isEmojiCategoryAllowed(item))
+            .filter(item => emojiUtils.isEmojiSupported(item, emojiSupportedVersionByOs, container))
+            .map(item => emojiUtils.normalizeEmojiSkinTone(item));
         container.remove();
         // Create instance of the Fuse.js library with configured weighted search keys and disabled fuzzy search.
         this._fuseSearch = new Fuse(this._database, {
@@ -171,13 +172,6 @@ class EmojiRepository extends Plugin {
         return this._databasePromise;
     }
 }
-/**
- * A function used to check if the given emoji is supported in the operating system.
- *
- * Referenced for unit testing purposes.
- */
-EmojiRepository._isEmojiSupported = isEmojiSupported;
-export default EmojiRepository;
 /**
  * Makes the HTTP request to download the emoji database.
  */
@@ -206,63 +200,3 @@ async function loadEmojiDatabase(emojiDatabaseUrl) {
     }
     return result;
 }
-/**
- * Creates a div for emoji width testing purposes.
- */
-function createEmojiWidthTestingContainer() {
-    const container = document.createElement('div');
-    container.setAttribute('aria-hidden', 'true');
-    container.style.position = 'absolute';
-    container.style.left = '-9999px';
-    container.style.whiteSpace = 'nowrap';
-    container.style.fontSize = BASELINE_EMOJI_WIDTH + 'px';
-    document.body.appendChild(container);
-    return container;
-}
-/**
- * Returns the width of the provided node.
- */
-function getNodeWidth(container, node) {
-    const span = document.createElement('span');
-    span.textContent = node;
-    container.appendChild(span);
-    const nodeWidth = span.offsetWidth;
-    container.removeChild(span);
-    return nodeWidth;
-}
-/**
- * Checks whether the emoji is supported in the operating system.
- */
-function isEmojiSupported(item, container) {
-    const emojiWidth = getNodeWidth(container, item.emoji);
-    // On Windows, some supported emoji are ~50% bigger than the baseline emoji, but what we really want to guard
-    // against are the ones that are 2x the size, because those are truly broken (person with red hair = person with
-    // floating red wig, black cat = cat with black square, polar bear = bear with snowflake, etc.)
-    // So here we set the threshold at 1.8 times the size of the baseline emoji.
-    return (emojiWidth / 1.8 < BASELINE_EMOJI_WIDTH) && (emojiWidth >= BASELINE_EMOJI_WIDTH);
-}
-/**
- * Adds default skin tone property to each emoji. If emoji defines other skin tones, they are added as well.
- */
-function normalizeEmojiSkinTone(item) {
-    const entry = {
-        ...item,
-        skins: {
-            default: item.emoji
-        }
-    };
-    if (item.skins) {
-        item.skins.forEach(skin => {
-            const skinTone = SKIN_TONE_MAP[skin.tone];
-            entry.skins[skinTone] = skin.emoji;
-        });
-    }
-    return entry;
-}
-/**
- * Checks whether the emoji belongs to a group that is allowed.
- */
-function isEmojiCategoryAllowed(item) {
-    // Category group=2 contains skin tones only, which we do not want to render.
-    return item.group !== 2;
-}

package/src/emojiutils.d.ts

@@ -0,0 +1,58 @@
+/**
+ * @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 } from 'ckeditor5/src/core.js';
+import type { EmojiCdnResource, EmojiEntry } from './emojirepository.js';
+/**
+ * The Emoji utilities plugin.
+ */
+export default class EmojiUtils extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "EmojiUtils";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * Checks if the emoji is supported by verifying the emoji version supported by the system first.
+     * Then checks if emoji contains a zero width joiner (ZWJ), and if yes, then checks if it is supported by the system.
+     */
+    isEmojiSupported(item: EmojiCdnResource, emojiSupportedVersionByOs: number, container: HTMLDivElement): boolean;
+    /**
+     * Checks the supported emoji version by the OS, by sampling some representatives from different emoji releases.
+     */
+    getEmojiSupportedVersionByOs(): number;
+    /**
+     * Check for ZWJ (zero width joiner) character.
+     */
+    hasZwj(emoji: string): boolean;
+    /**
+     * Checks whether the emoji is supported in the operating system.
+     */
+    isEmojiZwjSupported(item: EmojiCdnResource, container: HTMLDivElement): boolean;
+    /**
+     * Returns the width of the provided node.
+     */
+    getNodeWidth(container: HTMLDivElement, node: string): number;
+    /**
+     * Creates a div for emoji width testing purposes.
+     */
+    createEmojiWidthTestingContainer(): HTMLDivElement;
+    /**
+     * Adds default skin tone property to each emoji. If emoji defines other skin tones, they are added as well.
+     */
+    normalizeEmojiSkinTone(item: EmojiCdnResource): EmojiEntry;
+    /**
+     * Checks whether the emoji belongs to a group that is allowed.
+     */
+    isEmojiCategoryAllowed(item: EmojiCdnResource): boolean;
+    /**
+     * 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.
+     */
+    private static _isEmojiSupported;
+}

package/src/emojiutils.js

@@ -0,0 +1,141 @@
+/**
+ * @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 } from 'ckeditor5/src/core.js';
+import isEmojiSupported from './utils/isemojisupported.js';
+/**
+ * @module emoji/emojiutils
+ */
+const SKIN_TONE_MAP = {
+    0: 'default',
+    1: 'light',
+    2: 'medium-light',
+    3: 'medium',
+    4: 'medium-dark',
+    5: 'dark'
+};
+/**
+ * A map representing an emoji and its release version.
+ * It's used to identify a user's minimal supported emoji level.
+ */
+const EMOJI_SUPPORT_LEVEL = {
+    '🫩': 16,
+    '🫨': 15.1 // Shaking head. Although the version of emoji is 15, it is used to detect versions 15 and 15.1.
+};
+const BASELINE_EMOJI_WIDTH = 24;
+/**
+ * The Emoji utilities plugin.
+ */
+class EmojiUtils extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'EmojiUtils';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * Checks if the emoji is supported by verifying the emoji version supported by the system first.
+     * Then checks if emoji contains a zero width joiner (ZWJ), and if yes, then checks if it is supported by the system.
+     */
+    isEmojiSupported(item, emojiSupportedVersionByOs, container) {
+        const isEmojiVersionSupported = item.version <= emojiSupportedVersionByOs;
+        if (!isEmojiVersionSupported) {
+            return false;
+        }
+        if (!this.hasZwj(item.emoji)) {
+            return true;
+        }
+        return this.isEmojiZwjSupported(item, container);
+    }
+    /**
+     * Checks the supported emoji version by the OS, by sampling some representatives from different emoji releases.
+     */
+    getEmojiSupportedVersionByOs() {
+        return Object.entries(EMOJI_SUPPORT_LEVEL)
+            .reduce((currentVersion, [emoji, newVersion]) => {
+            if (newVersion > currentVersion && EmojiUtils._isEmojiSupported(emoji)) {
+                return newVersion;
+            }
+            return currentVersion;
+        }, 0);
+    }
+    /**
+     * Check for ZWJ (zero width joiner) character.
+     */
+    hasZwj(emoji) {
+        return emoji.includes('\u200d');
+    }
+    /**
+     * Checks whether the emoji is supported in the operating system.
+     */
+    isEmojiZwjSupported(item, container) {
+        const emojiWidth = this.getNodeWidth(container, item.emoji);
+        // On Windows, some supported emoji are ~50% bigger than the baseline emoji, but what we really want to guard
+        // against are the ones that are 2x the size, because those are truly broken (person with red hair = person with
+        // floating red wig, black cat = cat with black square, polar bear = bear with snowflake, etc.)
+        // So here we set the threshold at 1.8 times the size of the baseline emoji.
+        return emojiWidth < BASELINE_EMOJI_WIDTH * 1.8;
+    }
+    /**
+     * Returns the width of the provided node.
+     */
+    getNodeWidth(container, node) {
+        const span = document.createElement('span');
+        span.textContent = node;
+        container.appendChild(span);
+        const nodeWidth = span.offsetWidth;
+        container.removeChild(span);
+        return nodeWidth;
+    }
+    /**
+     * Creates a div for emoji width testing purposes.
+     */
+    createEmojiWidthTestingContainer() {
+        const container = document.createElement('div');
+        container.setAttribute('aria-hidden', 'true');
+        container.style.position = 'absolute';
+        container.style.left = '-9999px';
+        container.style.whiteSpace = 'nowrap';
+        container.style.fontSize = BASELINE_EMOJI_WIDTH + 'px';
+        return container;
+    }
+    /**
+     * Adds default skin tone property to each emoji. If emoji defines other skin tones, they are added as well.
+     */
+    normalizeEmojiSkinTone(item) {
+        const entry = {
+            ...item,
+            skins: {
+                default: item.emoji
+            }
+        };
+        if (item.skins) {
+            item.skins.forEach(skin => {
+                const skinTone = SKIN_TONE_MAP[skin.tone];
+                entry.skins[skinTone] = skin.emoji;
+            });
+        }
+        return entry;
+    }
+    /**
+     * Checks whether the emoji belongs to a group that is allowed.
+     */
+    isEmojiCategoryAllowed(item) {
+        // 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.
+ */
+EmojiUtils._isEmojiSupported = isEmojiSupported;
+export default EmojiUtils;

package/src/index.d.ts

@@ -9,6 +9,7 @@ export { default as Emoji } from './emoji.js';
 export { default as EmojiMention } from './emojimention.js';
 export { default as EmojiPicker } from './emojipicker.js';
 export { default as EmojiRepository } from './emojirepository.js';
+export { default as EmojiUtils } from './emojiutils.js';
 export { default as EmojiCommand } from './emojicommand.js';
 export type { EmojiConfig } from './emojiconfig.js';
 import './augmentation.js';

package/src/index.js

@@ -9,5 +9,6 @@ export { default as Emoji } from './emoji.js';
 export { default as EmojiMention } from './emojimention.js';
 export { default as EmojiPicker } from './emojipicker.js';
 export { default as EmojiRepository } from './emojirepository.js';
+export { default as EmojiUtils } from './emojiutils.js';
 export { default as EmojiCommand } from './emojicommand.js';
 import './augmentation.js';

package/src/utils/isemojisupported.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license Copyright (c) 2023, Koala Interactive SAS
+ * For licensing, see https://github.com/koala-interactive/is-emoji-supported/blob/master/LICENSE.md
+ */
+/**
+ * @module emoji/utils/isemojisupported
+ */
+/**
+ * Checks if the two pixels parts are the same using canvas.
+ */
+export default function isEmojiSupported(unicode: string): boolean;