@ckeditor/ckeditor5-emoji 0.0.0-nightly-20250217.0 → 0.0.1

package/src/emojirepository.d.ts

@@ -1,169 +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 { type Editor, Plugin } from 'ckeditor5/src/core.js';
-import EmojiUtils from './emojiutils.js';
-import type { SkinToneId } from './emojiconfig.js';
-/**
- * The emoji repository plugin.
- *
- * Loads the emoji repository from URL during plugin initialization and provides utility methods to search it.
- */
-export default class EmojiRepository extends Plugin {
-    /**
-     * A callback to resolve the {@link #_repositoryPromise} to control the return value of this promise.
-     */
-    private _repositoryPromiseResolveCallback;
-    /**
-     * An instance of the [Fuse.js](https://www.fusejs.io/) library.
-     */
-    private _fuseSearch;
-    /**
-     * The resolved URL from which the emoji repository is downloaded.
-     */
-    private readonly _url;
-    /**
-     * A promise resolved after downloading the emoji collection.
-     * The promise resolves with `true` when the repository is successfully downloaded or `false` otherwise.
-     */
-    private readonly _repositoryPromise;
-    /**
-     * @inheritDoc
-     */
-    static get requires(): readonly [typeof EmojiUtils];
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "EmojiRepository";
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin(): true;
-    /**
-     * @inheritDoc
-     */
-    constructor(editor: Editor);
-    /**
-     * @inheritDoc
-     */
-    init(): Promise<void>;
-    /**
-     * 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,
-     * hence this method returns an empty array.
-     *
-     * @param searchQuery A search query to match emoji.
-     * @returns An array of emoji entries that match the search query.
-     */
-    getEmojiByQuery(searchQuery: string): Array<EmojiEntry>;
-    /**
-     * Groups all emojis by categories.
-     * If the emoji repository is not loaded, it returns an empty array.
-     *
-     * @returns An array of emoji entries grouped by categories.
-     */
-    getEmojiCategories(): Array<EmojiCategory>;
-    /**
-     * Returns an array of available skin tones.
-     */
-    getSkinTones(): Array<SkinTone>;
-    /**
-     * Indicates whether the emoji repository has been successfully downloaded and the plugin is operational.
-     */
-    isReady(): Promise<boolean>;
-    /**
-     * Returns the URL from which the emoji repository is downloaded. If the URL is not provided
-     * in the configuration, the default URL is used with the version from the configuration.
-     *
-     * If both the URL and version are provided, a warning is logged.
-     */
-    private _getUrl;
-    /**
-     * Warn users on self-hosted installations that this plugin uses a CDN to fetch the emoji repository.
-     */
-    private _warnAboutCdnUse;
-    /**
-     * Returns the emoji repository in a configured version if it is a non-empty array. Returns `null` otherwise.
-     */
-    private _getItems;
-    /**
-     * Loads the emoji repository. If the repository is already loaded, it returns the cached result.
-     * Otherwise, it fetches the repository from the URL and adds it to the cache.
-     */
-    private _loadAndCacheEmoji;
-    /**
-     * 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.
-     */
-    private _normalizeEmoji;
-    /**
-     * Versioned emoji repository.
-     */
-    private static _results;
-}
-/**
- * Represents a single group of the emoji category, e.g., "Smileys & Expressions".
- */
-export type EmojiCategory = {
-    /**
-     * A name of the category.
-     */
-    title: string;
-    /**
-     * An example emoji representing items belonging to the category.
-     */
-    icon: string;
-    /**
-     * Group id used to assign {@link #items}.
-     */
-    groupId: number;
-    /**
-     * An array of emojis.
-     */
-    items: Array<EmojiEntry>;
-};
-/**
- * Represents a single item fetched from the CDN.
- */
-export type EmojiCdnResource = {
-    annotation: string;
-    emoji: string;
-    group: number;
-    order: number;
-    version: number;
-    emoticon?: string;
-    shortcodes?: Array<string>;
-    skins?: Array<{
-        emoji: string;
-        tone: number;
-        version: number;
-    }>;
-    tags?: Array<string>;
-};
-/**
- * Represents a single emoji item used by the emoji feature.
- */
-export type EmojiEntry = Omit<EmojiCdnResource, 'skins'> & {
-    skins: EmojiMap;
-};
-/**
- * Represents mapping between a skin tone and its corresponding emoji.
- *
- * The `default` key is always present. Additional values are assigned only if an emoji supports skin tones.
- */
-export type EmojiMap = {
-    [K in Exclude<SkinToneId, 'default'>]?: string;
-} & {
-    default: string;
-};
-/**
- * Represents an emoji skin tone variant.
- */
-export type SkinTone = {
-    id: SkinToneId;
-    icon: string;
-    tooltip: string;
-};

package/src/emojirepository.js

@@ -1,290 +0,0 @@
-/**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module emoji/emojirepository
- */
-import Fuse from 'fuse.js';
-import { groupBy } from 'lodash-es';
-import { Plugin } from 'ckeditor5/src/core.js';
-import { logWarning, version as editorVersion } from 'ckeditor5/src/utils.js';
-import EmojiUtils from './emojiutils.js';
-// 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 DEFAULT_EMOJI_DATABASE_URL = 'https://cdn.ckeditor.com/ckeditor5/data/emoji/{version}/en.json';
-const DEFAULT_EMOJI_VERSION = 16;
-/**
- * The emoji repository plugin.
- *
- * 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
-     */
-    static get pluginName() {
-        return 'EmojiRepository';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor);
-        editor.config.define('emoji', {
-            version: undefined,
-            skinTone: 'default',
-            definitionsUrl: undefined
-        });
-        this._url = this._getUrl();
-        this._repositoryPromise = new Promise(resolve => {
-            this._repositoryPromiseResolveCallback = resolve;
-        });
-        this._fuseSearch = null;
-    }
-    /**
-     * @inheritDoc
-     */
-    async init() {
-        this._warnAboutCdnUse();
-        await this._loadAndCacheEmoji();
-        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);
-        }
-        // Create instance of the Fuse.js library with configured weighted search keys and disabled fuzzy search.
-        this._fuseSearch = new Fuse(items, {
-            keys: [
-                { name: 'emoticon', weight: 5 },
-                { name: 'annotation', weight: 3 },
-                { name: 'tags', weight: 1 }
-            ],
-            minMatchCharLength: 2,
-            threshold: 0,
-            ignoreLocation: true
-        });
-        return this._repositoryPromiseResolveCallback(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,
-     * hence this method returns an empty array.
-     *
-     * @param searchQuery A search query to match emoji.
-     * @returns An array of emoji entries that match the search query.
-     */
-    getEmojiByQuery(searchQuery) {
-        if (!this._fuseSearch) {
-            return [];
-        }
-        const searchQueryTokens = searchQuery.split(/\s/).filter(Boolean);
-        // Perform the search only if there is at least two non-white characters next to each other.
-        const shouldSearch = searchQueryTokens.some(token => token.length >= 2);
-        if (!shouldSearch) {
-            return [];
-        }
-        return this._fuseSearch
-            .search({
-            '$or': [
-                {
-                    emoticon: searchQuery
-                },
-                {
-                    '$and': searchQueryTokens.map(token => ({ annotation: token }))
-                },
-                {
-                    '$and': searchQueryTokens.map(token => ({ tags: token }))
-                }
-            ]
-        })
-            .map(result => result.item);
-    }
-    /**
-     * Groups all emojis by categories.
-     * If the emoji repository is not loaded, it returns an empty array.
-     *
-     * @returns An array of emoji entries grouped by categories.
-     */
-    getEmojiCategories() {
-        const repository = this._getItems();
-        if (!repository) {
-            return [];
-        }
-        const { t } = this.editor.locale;
-        const categories = [
-            { title: t('Smileys & Expressions'), icon: '😀', groupId: 0 },
-            { title: t('Gestures & People'), icon: '👋', groupId: 1 },
-            { title: t('Animals & Nature'), icon: '🐻', groupId: 3 },
-            { title: t('Food & Drinks'), icon: '🍎', groupId: 4 },
-            { title: t('Travel & Places'), icon: '🚘', groupId: 5 },
-            { title: t('Activities'), icon: '🏀', groupId: 6 },
-            { title: t('Objects'), icon: '💡', groupId: 7 },
-            { title: t('Symbols'), icon: '🟢', groupId: 8 },
-            { title: t('Flags'), icon: '🏁', groupId: 9 }
-        ];
-        const groups = groupBy(repository, 'group');
-        return categories.map(category => {
-            return {
-                ...category,
-                items: groups[category.groupId]
-            };
-        });
-    }
-    /**
-     * Returns an array of available skin tones.
-     */
-    getSkinTones() {
-        const { t } = this.editor.locale;
-        return [
-            { id: 'default', icon: '👋', tooltip: t('Default skin tone') },
-            { id: 'light', icon: '👋🏻', tooltip: t('Light skin tone') },
-            { id: 'medium-light', icon: '👋🏼', tooltip: t('Medium Light skin tone') },
-            { id: 'medium', icon: '👋🏽', tooltip: t('Medium skin tone') },
-            { id: 'medium-dark', icon: '👋🏾', tooltip: t('Medium Dark skin tone') },
-            { id: 'dark', icon: '👋🏿', tooltip: t('Dark skin tone') }
-        ];
-    }
-    /**
-     * Indicates whether the emoji repository has been successfully downloaded and the plugin is operational.
-     */
-    isReady() {
-        return this._repositoryPromise;
-    }
-    /**
-     * Returns the URL from which the emoji repository is downloaded. If the URL is not provided
-     * in the configuration, the default URL is used with the version from the configuration.
-     *
-     * If both the URL and version are provided, a warning is logged.
-     */
-    _getUrl() {
-        const { definitionsUrl, version } = this.editor.config.get('emoji');
-        if (!definitionsUrl || definitionsUrl === 'cdn') {
-            // URL was not provided or is set to 'cdn', so we use the default CDN URL.
-            const urlVersion = version || DEFAULT_EMOJI_VERSION;
-            const url = new URL(DEFAULT_EMOJI_DATABASE_URL.replace('{version}', urlVersion.toString()));
-            url.searchParams.set('editorVersion', editorVersion);
-            return url;
-        }
-        if (version) {
-            /**
-             * Both {@link module:emoji/emojiconfig~EmojiConfig#definitionsUrl `emoji.definitionsUrl`} and
-             * {@link module:emoji/emojiconfig~EmojiConfig#version `emoji.version`} configuration options
-             * are set. Only the `emoji.definitionsUrl` option will be used.
-             *
-             * The `emoji.version` option will be ignored and should be removed from the configuration.
-             *
-             * @error emoji-repository-redundant-version
-             */
-            logWarning('emoji-repository-redundant-version');
-        }
-        return new URL(definitionsUrl);
-    }
-    /**
-     * Warn users on self-hosted installations that this plugin uses a CDN to fetch the emoji repository.
-     */
-    _warnAboutCdnUse() {
-        const editor = this.editor;
-        const config = editor.config.get('emoji');
-        const licenseKey = editor.config.get('licenseKey');
-        const distributionChannel = window[Symbol.for('cke distribution')];
-        if (licenseKey === 'GPL') {
-            // Don't warn GPL users.
-            return;
-        }
-        if (distributionChannel === 'cloud') {
-            // Don't warn cloud users, because they already use our CDN.
-            return;
-        }
-        if (config && config.definitionsUrl) {
-            // Don't warn users who have configured their own definitions URL.
-            return;
-        }
-        /**
-         * By default, the Emoji plugin fetches the emoji repository from CKEditor 5 CDN. To avoid this,
-         * you can use the {@link module:emoji/emojiconfig~EmojiConfig#definitionsUrl `emoji.definitionsUrl`}
-         * configuration option to provide a URL to your own emoji repository.
-         *
-         * If you only want to suppress this warning, set this configuration option to `cdn`.
-         *
-         * @error emoji-repository-cdn-use
-         */
-        logWarning('emoji-repository-cdn-use');
-    }
-    /**
-     * Returns the emoji repository in a configured version if it is a non-empty array. Returns `null` otherwise.
-     */
-    _getItems() {
-        const repository = EmojiRepository._results[this._url.href];
-        return repository && repository.length ? repository : null;
-    }
-    /**
-     * Loads the emoji repository. If the repository is already loaded, it returns the cached result.
-     * Otherwise, it fetches the repository from the URL and adds it to the cache.
-     */
-    async _loadAndCacheEmoji() {
-        if (EmojiRepository._results[this._url.href]) {
-            // The repository has already been downloaded.
-            return;
-        }
-        const result = await fetch(this._url, { cache: 'force-cache' })
-            .then(response => {
-            if (!response.ok) {
-                return [];
-            }
-            return response.json();
-        })
-            .catch(() => {
-            return [];
-        });
-        if (!result.length) {
-            /**
-             * Unable to load the emoji repository from the URL.
-             *
-             * If the URL 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 URL connection is allowed by the editor.
-             *
-             * @error emoji-repository-load-failed
-             */
-            logWarning('emoji-repository-load-failed');
-        }
-        EmojiRepository._results[this._url.href] = this._normalizeEmoji(result);
-    }
-    /**
-     * 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;
-    }
-}
-/**
- * Versioned emoji repository.
- */
-EmojiRepository._results = {};
-export default EmojiRepository;

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

@@ -1,15 +0,0 @@
-/**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module emoji
- */
-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

@@ -1,14 +0,0 @@
-/**
- * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module emoji
- */
-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';