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

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;

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;
+    }
+}