@ckeditor/ckeditor5-emoji 46.0.0 → 46.0.1-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-emoji",
-  "version": "46.0.0",
+  "version": "46.0.1-alpha.0",
   "description": "Emoji feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,13 +13,13 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "46.0.0",
-    "@ckeditor/ckeditor5-icons": "46.0.0",
-    "@ckeditor/ckeditor5-mention": "46.0.0",
-    "@ckeditor/ckeditor5-typing": "46.0.0",
-    "@ckeditor/ckeditor5-ui": "46.0.0",
-    "@ckeditor/ckeditor5-utils": "46.0.0",
-    "ckeditor5": "46.0.0",
+    "@ckeditor/ckeditor5-core": "46.0.1-alpha.0",
+    "@ckeditor/ckeditor5-icons": "46.0.1-alpha.0",
+    "@ckeditor/ckeditor5-mention": "46.0.1-alpha.0",
+    "@ckeditor/ckeditor5-typing": "46.0.1-alpha.0",
+    "@ckeditor/ckeditor5-ui": "46.0.1-alpha.0",
+    "@ckeditor/ckeditor5-utils": "46.0.1-alpha.0",
+    "ckeditor5": "46.0.1-alpha.0",
     "fuzzysort": "3.1.0",
     "es-toolkit": "1.39.5"
   },

package/src/emojiutils.d.ts

@@ -8,6 +8,10 @@ import type { EmojiCdnResource, EmojiEntry } from './emojirepository.js';
  * The Emoji utilities plugin.
  */
 export declare class EmojiUtils extends Plugin {
+    /**
+     * Used for testing whether the environment supports the given emoji.
+     */
+    private _emojiCanvas;
     /**
      * @inheritDoc
      */
@@ -16,6 +20,10 @@ export declare class EmojiUtils extends Plugin {
      * @inheritDoc
      */
     static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
     /**
      * 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.
@@ -37,6 +45,12 @@ export declare class EmojiUtils extends Plugin {
      * Returns the width of the provided node.
      */
     getNodeWidth(container: HTMLDivElement, node: string): number;
+    /**
+     * Returns the width of the provided node.
+     *
+     * This is a faster alternative to `getNodeWidth` method, which works for great majority of emojis.
+     */
+    getNodeWidthUsingCanvas(container: HTMLDivElement, node: string): number;
     /**
      * Creates a div for emoji width testing purposes.
      */

package/src/emojiutils.js

@@ -40,6 +40,10 @@ const BASELINE_EMOJI_WIDTH = 24;
  * The Emoji utilities plugin.
  */
 class EmojiUtils extends Plugin {
+    /**
+     * Used for testing whether the environment supports the given emoji.
+     */
+    _emojiCanvas = null;
     /**
      * @inheritDoc
      */
@@ -52,6 +56,12 @@ class EmojiUtils extends Plugin {
     static get isOfficialPlugin() {
         return true;
     }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        this._emojiCanvas = document.createElement('canvas').getContext('2d');
+    }
     /**
      * 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.
@@ -87,12 +97,18 @@ class EmojiUtils extends Plugin {
      * 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;
+        const canvasWidth = this.getNodeWidthUsingCanvas(container, item.emoji);
+        // Checking emoji using canvas is much faster, so always try it first. Unfortunately canvas has worse emoji coverage.
+        if (canvasWidth < BASELINE_EMOJI_WIDTH * 1.8) {
+            return true;
+        }
+        const domWidth = this.getNodeWidth(container, item.emoji);
+        // Checking emoji using DOM is much slower, so use it as a fallback.
+        return domWidth < BASELINE_EMOJI_WIDTH * 1.8;
     }
     /**
      * Returns the width of the provided node.
@@ -105,6 +121,22 @@ class EmojiUtils extends Plugin {
         container.removeChild(span);
         return nodeWidth;
     }
+    /**
+     * Returns the width of the provided node.
+     *
+     * This is a faster alternative to `getNodeWidth` method, which works for great majority of emojis.
+     */
+    getNodeWidthUsingCanvas(container, node) {
+        const style = getComputedStyle(container);
+        this._emojiCanvas.font = [
+            style.fontStyle,
+            style.fontVariant,
+            style.fontWeight,
+            `${BASELINE_EMOJI_WIDTH}px`,
+            `"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", ${style.fontFamily}`
+        ].join(' ');
+        return Math.ceil(this._emojiCanvas.measureText(node).width);
+    }
     /**
      * Creates a div for emoji width testing purposes.
      */