@ckeditor/ckeditor5-emoji 44.2.0-alpha.15 → 44.2.0-alpha.2

package/src/emojirepository.js

@@ -8,23 +8,25 @@
 import Fuse from 'fuse.js';
 import { groupBy } from 'lodash-es';
 import { Plugin } from 'ckeditor5/src/core.js';
-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.
+import { logWarning } from 'ckeditor5/src/utils.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 repository from URL during plugin initialization and provides utility methods to search it.
+ * Loads the emoji database from URL during plugin initialization and provides utility methods to search it.
  */
 class EmojiRepository extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [EmojiUtils];
-    }
     /**
      * @inheritDoc
      */
@@ -42,13 +44,13 @@ class EmojiRepository extends Plugin {
      */
     constructor(editor) {
         super(editor);
-        editor.config.define('emoji', {
+        this.editor.config.define('emoji', {
             version: 16,
             skinTone: 'default'
         });
-        this._version = editor.config.get('emoji.version');
-        this._repositoryPromise = new Promise(resolve => {
-            this._repositoryPromiseResolveCallback = resolve;
+        this._database = [];
+        this._databasePromise = new Promise(resolve => {
+            this._databasePromiseResolveCallback = resolve;
         });
         this._fuseSearch = null;
     }
@@ -56,18 +58,23 @@ class EmojiRepository extends Plugin {
      * @inheritDoc
      */
     async init() {
-        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 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);
         }
+        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(items, {
+        this._fuseSearch = new Fuse(this._database, {
             keys: [
                 { name: 'emoticon', weight: 5 },
                 { name: 'annotation', weight: 3 },
@@ -77,11 +84,11 @@ class EmojiRepository extends Plugin {
             threshold: 0,
             ignoreLocation: true
         });
-        return this._repositoryPromiseResolveCallback(true);
+        return this._databasePromiseResolveCallback(true);
     }
     /**
      * Returns an array of emoji entries that match the search query.
-     * If the emoji repository is not loaded, the [Fuse.js](https://www.fusejs.io/) instance is not created,
+     * If the emoji database 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.
@@ -115,13 +122,12 @@ class EmojiRepository extends Plugin {
     }
     /**
      * Groups all emojis by categories.
-     * If the emoji repository is not loaded, it returns an empty array.
+     * If the emoji database is not loaded, it returns an empty array.
      *
      * @returns An array of emoji entries grouped by categories.
      */
     getEmojiCategories() {
-        const repository = this._getItems();
-        if (!repository) {
+        if (!this._database.length) {
             return [];
         }
         const { t } = this.editor.locale;
@@ -136,7 +142,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(this._database, 'group');
         return categories.map(category => {
             return {
                 ...category,
@@ -159,69 +165,104 @@ class EmojiRepository extends Plugin {
         ];
     }
     /**
-     * Indicates whether the emoji repository has been successfully downloaded and the plugin is operational.
+     * Indicates whether the emoji database has been successfully downloaded and the plugin is operational.
      */
     isReady() {
-        return this._repositoryPromise;
+        return this._databasePromise;
     }
-    /**
-     * 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(() => {
+}
+/**
+ * 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) {
             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 result;
+        return response.json();
+    })
+        .catch(() => {
+        return [];
+    });
+    if (!result.length) {
+        /**
+         * Unable to load the emoji database 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-database-load-failed
+         */
+        logWarning('emoji-database-load-failed');
     }
-    /**
-     * 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 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;
 }
 /**
- * Versioned emoji repository.
+ * Checks whether the emoji belongs to a group that is allowed.
  */
-EmojiRepository._results = {};
-export default EmojiRepository;
+function isEmojiCategoryAllowed(item) {
+    // Category group=2 contains skin tones only, which we do not want to render.
+    return item.group !== 2;
+}

package/src/index.d.ts

@@ -9,7 +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';
 export type { EmojiConfig } from './emojiconfig.js';
 import './augmentation.js';

package/src/index.js

@@ -9,6 +9,5 @@ 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,7 +156,6 @@ 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/theme/emojigrid.css

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

package/src/emojiutils.d.ts

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

@@ -1,141 +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
- */
-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/utils/isemojisupported.d.ts

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

@@ -1,68 +0,0 @@
-/**
- * @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;
-    }
-}