@ckeditor/ckeditor5-emoji 44.3.0-alpha.4 → 44.3.0-alpha.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-emoji",
-  "version": "44.3.0-alpha.4",
+  "version": "44.3.0-alpha.6",
   "description": "Emoji feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,12 +13,12 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "44.3.0-alpha.4",
-    "@ckeditor/ckeditor5-mention": "44.3.0-alpha.4",
-    "@ckeditor/ckeditor5-typing": "44.3.0-alpha.4",
-    "@ckeditor/ckeditor5-ui": "44.3.0-alpha.4",
-    "@ckeditor/ckeditor5-utils": "44.3.0-alpha.4",
-    "ckeditor5": "44.3.0-alpha.4",
+    "@ckeditor/ckeditor5-core": "44.3.0-alpha.6",
+    "@ckeditor/ckeditor5-mention": "44.3.0-alpha.6",
+    "@ckeditor/ckeditor5-typing": "44.3.0-alpha.6",
+    "@ckeditor/ckeditor5-ui": "44.3.0-alpha.6",
+    "@ckeditor/ckeditor5-utils": "44.3.0-alpha.6",
+    "ckeditor5": "44.3.0-alpha.6",
     "fuzzysort": "3.1.0",
     "lodash-es": "4.17.21"
   },

package/src/emojiconfig.d.ts

@@ -93,6 +93,17 @@ export interface EmojiConfig {
      * option is provided, `version` is ignored as the defined URL takes precedence over the `version`.
      */
     version?: EmojiVersion;
+    /**
+     * The availability of the emoji depends on the operating system. Different systems will have different Unicode support.
+     *
+     * By default, the feature tries to filter out emojis not supported by your operating system.
+     * This means that instead of previewing an emoji, the feature renders a black square.
+     *
+     * If you customize the {@glink features/emoji#emoji-availability-and-appearance emoji availability and appearance}, it is
+     * highly recommended to disable the filtering mechanism because it uses a font built into your system
+     * instead of the provided custom font.
+     */
+    useCustomFont?: boolean;
 }
 export type SkinToneId = 'default' | 'light' | 'medium-light' | 'medium' | 'medium-dark' | 'dark';
 export type EmojiVersion = 15 | 16;

package/src/emojirepository.d.ts

@@ -166,3 +166,12 @@ export type SkinTone = {
     icon: string;
     tooltip: string;
 };
+/**
+ * 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
+ */

package/src/emojirepository.js

@@ -46,7 +46,8 @@ class EmojiRepository extends Plugin {
         editor.config.define('emoji', {
             version: undefined,
             skinTone: 'default',
-            definitionsUrl: undefined
+            definitionsUrl: undefined,
+            useCustomFont: false
         });
         this._url = this._getUrl();
         this._repositoryPromise = new Promise(resolve => {
@@ -62,6 +63,15 @@ class EmojiRepository extends Plugin {
         await this._loadAndCacheEmoji();
         this._items = this._getItems();
         if (!this._items) {
+            /**
+             * Unable to identify the available emoji to display.
+             *
+             * See the {@glink features/emoji#troubleshooting troubleshooting} section in the {@glink features/emoji Emoji feature} guide
+             * for more details.
+             *
+             * @error emoji-repository-empty
+             */
+            logWarning('emoji-repository-empty');
             return this._repositoryPromiseResolveCallback(false);
         }
         return this._repositoryPromiseResolveCallback(true);
@@ -116,14 +126,14 @@ class EmojiRepository extends Plugin {
         }
         const { t } = this.editor.locale;
         const categories = [
-            { title: t('Smileys & Expressions'), icon: '😀', groupId: 0 },
+            { 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('Symbols'), icon: '🔵', groupId: 8 },
             { title: t('Flags'), icon: '🏁', groupId: 9 }
         ];
         const groups = groupBy(repository, 'group');
@@ -242,18 +252,6 @@ class EmojiRepository extends Plugin {
             .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);
     }
     /**
@@ -263,12 +261,18 @@ class EmojiRepository extends Plugin {
      *  * Prepare skin tone variants if an emoji defines them.
      */
     _normalizeEmoji(data) {
-        const emojiUtils = this.editor.plugins.get('EmojiUtils');
+        const editor = this.editor;
+        const useCustomFont = editor.config.get('emoji.useCustomFont');
+        const emojiUtils = editor.plugins.get('EmojiUtils');
+        const insertableEmoji = data.filter(item => emojiUtils.isEmojiCategoryAllowed(item));
+        // When using a custom font, the feature does not filter any emoji.
+        if (useCustomFont) {
+            return insertableEmoji.map(item => emojiUtils.normalizeEmojiSkinTone(item));
+        }
         const emojiSupportedVersionByOs = emojiUtils.getEmojiSupportedVersionByOs();
         const container = emojiUtils.createEmojiWidthTestingContainer();
         document.body.appendChild(container);
-        const results = data
-            .filter(item => emojiUtils.isEmojiCategoryAllowed(item))
+        const results = insertableEmoji
             .filter(item => emojiUtils.isEmojiSupported(item, emojiSupportedVersionByOs, container))
             .map(item => emojiUtils.normalizeEmojiSkinTone(item));
         container.remove();
@@ -280,3 +284,12 @@ class EmojiRepository extends Plugin {
  */
 EmojiRepository._results = {};
 export default EmojiRepository;
+/**
+ * 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
+ */

package/src/emojiutils.js

@@ -18,10 +18,22 @@ const SKIN_TONE_MAP = {
 /**
  * A map representing an emoji and its release version.
  * It's used to identify a user's minimal supported emoji level.
+ * We skip versions with older patches, such as 15.0 instead of 15.1 etc.
  */
 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.
+    '🫨': 15.1,
+    '🫠': 14,
+    '😶‍🌫️': 13.1,
+    '🧑‍💻': 12.1,
+    '🥰': 11,
+    '🤪': 5,
+    '⚕️': 4,
+    '🤣': 3,
+    '👋🏽': 2,
+    '😀': 1,
+    '😐': 0.7,
+    '😂': 0.6 // Face with Tears of Joy.
 };
 const BASELINE_EMOJI_WIDTH = 24;
 /**
@@ -58,13 +70,12 @@ class EmojiUtils extends Plugin {
      * 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;
+        for (const [emoji, emojiVersion] of Object.entries(EMOJI_SUPPORT_LEVEL)) {
+            if (EmojiUtils._isEmojiSupported(emoji)) {
+                return emojiVersion;
             }
-            return currentVersion;
-        }, 0);
+        }
+        return 0;
     }
     /**
      * Check for ZWJ (zero width joiner) character.