@ckeditor/ckeditor5-emoji 44.2.0-alpha.1 → 44.2.0-alpha.10

package/src/emojirepository.js

@@ -8,25 +8,23 @@
 import Fuse from 'fuse.js';
 import { groupBy } from 'lodash-es';
 import { Plugin } from 'ckeditor5/src/core.js';
-import { logWarning } from 'ckeditor5/src/utils.js';
-// An endpoint from which the emoji database will be downloaded during plugin initialization.
+import { logWarning, version } from 'ckeditor5/src/utils.js';
+import EmojiUtils from './emojiutils.js';
+// An endpoint from which the emoji data 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.
+ * Loads the emoji repository from URL during plugin initialization and provides utility methods to search it.
  */
 class EmojiRepository extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [EmojiUtils];
+    }
     /**
      * @inheritDoc
      */
@@ -44,13 +42,13 @@ class EmojiRepository extends Plugin {
      */
     constructor(editor) {
         super(editor);
-        this.editor.config.define('emoji', {
+        editor.config.define('emoji', {
             version: 16,
             skinTone: 'default'
         });
-        this._database = [];
-        this._databasePromise = new Promise(resolve => {
-            this._databasePromiseResolveCallback = resolve;
+        this._version = editor.config.get('emoji.version');
+        this._repositoryPromise = new Promise(resolve => {
+            this._repositoryPromiseResolveCallback = resolve;
         });
         this._fuseSearch = null;
     }
@@ -58,23 +56,18 @@ class EmojiRepository extends Plugin {
      * @inheritDoc
      */
     async init() {
-        const emojiVersion = this.editor.config.get('emoji.version');
-        const emojiDatabaseUrl = EMOJI_DATABASE_URL.replace('{version}', `${emojiVersion}`);
-        const emojiDatabase = await loadEmojiDatabase(emojiDatabaseUrl);
-        // 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);
+        if (!(this._version in EmojiRepository._results)) {
+            const cdnResult = await this._loadItemsFromCdn();
+            EmojiRepository._results[this._version] = this._normalizeEmoji(cdnResult);
+        }
+        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) {
+            return this._repositoryPromiseResolveCallback(false);
         }
-        const container = createEmojiWidthTestingContainer();
-        // 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));
-        container.remove();
         // Create instance of the Fuse.js library with configured weighted search keys and disabled fuzzy search.
-        this._fuseSearch = new Fuse(this._database, {
+        this._fuseSearch = new Fuse(items, {
             keys: [
                 { name: 'emoticon', weight: 5 },
                 { name: 'annotation', weight: 3 },
@@ -84,11 +77,11 @@ class EmojiRepository extends Plugin {
             threshold: 0,
             ignoreLocation: true
         });
-        return this._databasePromiseResolveCallback(true);
+        return this._repositoryPromiseResolveCallback(true);
     }
     /**
      * Returns an array of emoji entries that match the search query.
-     * If the emoji database is not loaded, the [Fuse.js](https://www.fusejs.io/) instance is not created,
+     * 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.
      *
      * @param searchQuery A search query to match emoji.
@@ -122,12 +115,13 @@ class EmojiRepository extends Plugin {
     }
     /**
      * Groups all emojis by categories.
-     * If the emoji database is not loaded, it returns an empty array.
+     * If the emoji repository is not loaded, it returns an empty array.
      *
      * @returns An array of emoji entries grouped by categories.
      */
     getEmojiCategories() {
-        if (!this._database.length) {
+        const repository = this._getItems();
+        if (!repository) {
             return [];
         }
         const { t } = this.editor.locale;
@@ -142,7 +136,7 @@ class EmojiRepository extends Plugin {
             { title: t('Symbols'), icon: '🟢', groupId: 8 },
             { title: t('Flags'), icon: '🏁', groupId: 9 }
         ];
-        const groups = groupBy(this._database, 'group');
+        const groups = groupBy(repository, 'group');
         return categories.map(category => {
             return {
                 ...category,
@@ -165,103 +159,69 @@ class EmojiRepository extends Plugin {
         ];
     }
     /**
-     * Indicates whether the emoji database has been successfully downloaded and the plugin is operational.
+     * Indicates whether the emoji repository has been successfully downloaded and the plugin is operational.
      */
     isReady() {
-        return this._databasePromise;
+        return this._repositoryPromise;
     }
-}
-/**
- * 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.
- */
-async function loadEmojiDatabase(emojiDatabaseUrl) {
-    const result = await fetch(emojiDatabaseUrl)
-        .then(response => {
-        if (!response.ok) {
+    /**
+     * Returns the emoji repository in a configured version if it is a non-empty array. Returns `null` otherwise.
+     */
+    _getItems() {
+        const repository = EmojiRepository._results[this._version];
+        return repository && repository.length ? repository : null;
+    }
+    /**
+     * Makes the HTTP request to download the emoji repository in a configured version.
+     */
+    async _loadItemsFromCdn() {
+        const repositoryUrl = new URL(EMOJI_DATABASE_URL.replace('{version}', `${this._version}`));
+        repositoryUrl.searchParams.set('editorVersion', version);
+        const result = await fetch(repositoryUrl, { cache: 'force-cache' })
+            .then(response => {
+            if (!response.ok) {
+                return [];
+            }
+            return response.json();
+        })
+            .catch(() => {
             return [];
+        });
+        if (!result.length) {
+            /**
+             * Unable to load the emoji repository from CDN.
+             *
+             * If the CDN works properly and there is no disruption of communication, please check your
+             * {@glink getting-started/setup/csp Content Security Policy (CSP)} setting and make sure
+             * the CDN connection is allowed by the editor.
+             *
+             * @error emoji-repository-load-failed
+             */
+            logWarning('emoji-repository-load-failed');
         }
-        return response.json();
-    })
-        .catch(() => {
-        return [];
-    });
-    if (!result.length) {
-        /**
-         * Unable to load the emoji database from CDN.
-         *
-         * TODO: It could be a problem of CKEditor 5 CDN, but also, Content Security Policy that disallow the request.
-         * It would be good to explain what to do in such a case.
-         *
-         * @error emoji-database-load-failed
-         */
-        logWarning('emoji-database-load-failed');
+        return result;
     }
-    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;
-        });
+    /**
+     * Normalizes the raw data fetched from CDN. By normalization, we meant:
+     *
+     *  * Filter out unsupported emoji (these that will not render correctly),
+     *  * Prepare skin tone variants if an emoji defines them.
+     */
+    _normalizeEmoji(data) {
+        const emojiUtils = this.editor.plugins.get('EmojiUtils');
+        const emojiSupportedVersionByOs = emojiUtils.getEmojiSupportedVersionByOs();
+        const container = emojiUtils.createEmojiWidthTestingContainer();
+        document.body.appendChild(container);
+        const results = data
+            .filter(item => emojiUtils.isEmojiCategoryAllowed(item))
+            .filter(item => emojiUtils.isEmojiSupported(item, emojiSupportedVersionByOs, container))
+            .map(item => emojiUtils.normalizeEmojiSkinTone(item));
+        container.remove();
+        return results;
     }
-    return entry;
 }
 /**
- * Checks whether the emoji belongs to a group that is allowed.
+ * Versioned emoji repository.
  */
-function isEmojiCategoryAllowed(item) {
-    // Category group=2 contains skin tones only, which we do not want to render.
-    return item.group !== 2;
-}
+EmojiRepository._results = {};
+export default EmojiRepository;

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/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) => {

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;

package/src/utils/isemojisupported.js

@@ -0,0 +1,68 @@
+/**
+ * @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) {
+    const ctx = getCanvas();
+    /* istanbul ignore next -- @preserve */
+    if (!ctx) {
+        return false;
+    }
+    const CANVAS_HEIGHT = 25;
+    const CANVAS_WIDTH = 20;
+    const textSize = Math.floor(CANVAS_HEIGHT / 2);
+    // Initialize canvas context.
+    ctx.font = textSize + 'px Arial, Sans-Serif';
+    ctx.textBaseline = 'top';
+    ctx.canvas.width = CANVAS_WIDTH * 2;
+    ctx.canvas.height = CANVAS_HEIGHT;
+    ctx.clearRect(0, 0, CANVAS_WIDTH * 2, CANVAS_HEIGHT);
+    // Draw in red on the left.
+    ctx.fillStyle = '#FF0000';
+    ctx.fillText(unicode, 0, 22);
+    // Draw in blue on right.
+    ctx.fillStyle = '#0000FF';
+    ctx.fillText(unicode, CANVAS_WIDTH, 22);
+    const a = ctx.getImageData(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT).data;
+    const count = a.length;
+    let i = 0;
+    // Search the first visible pixel.
+    for (; i < count && !a[i + 3]; i += 4)
+        ;
+    // No visible pixel.
+    /* istanbul ignore next -- @preserve */
+    if (i >= count) {
+        return false;
+    }
+    // Emoji has immutable color, so we check the color of the emoji in two different colors.
+    // the result show be the same.
+    const x = CANVAS_WIDTH + ((i / 4) % CANVAS_WIDTH);
+    const y = Math.floor(i / 4 / CANVAS_WIDTH);
+    const b = ctx.getImageData(x, y, 1, 1).data;
+    if (a[i] !== b[0] || a[i + 2] !== b[2]) {
+        return false;
+    }
+    //Some emojis consist of different ones, so they will show multiple characters if they are not supported.
+    /* istanbul ignore next -- @preserve */
+    if (ctx.measureText(unicode).width >= CANVAS_WIDTH) {
+        return false;
+    }
+    // Supported.
+    return true;
+}
+;
+function getCanvas() {
+    try {
+        return document.createElement('canvas').getContext('2d', { willReadFrequently: true });
+    }
+    catch {
+        /* istanbul ignore next -- @preserve */
+        return null;
+    }
+}

package/theme/emojigrid.css

@@ -10,7 +10,7 @@
 .ck.ck-emoji {
 	& .ck.ck-emoji__tiles {
 		max-width: 100%;
-		max-height: 265px;
+		max-height: min(265px, 40vh);
 
 		overflow-y: auto;
 		overflow-x: hidden;