Not displaying unsupported emoji in the emoji picker and mention plugin.

.circleci/template.yml

@@ -14,6 +14,12 @@ parameters:
     default: false
 
 commands:
+  install_newest_emoji:
+    steps:
+      - run:
+          name: Install newest emoji to enable emoji picker testing
+          command: |
+            sudo apt install fonts-noto-color-emoji
   halt_if_short_flow:
     steps:
       - run:

packages/ckeditor5-emoji/src/emojipicker.ts

@@ -32,6 +32,7 @@ import {
 import EmojiToneView, { type SkinToneId } from './ui/emojitoneview.js';
 
 const VISUAL_SELECTION_MARKER_NAME = 'emoji-picker';
+const BASELINE_EMOJI_WIDTH = 24;
 
 /**
  * The emoji picker plugin.
@@ -167,11 +168,19 @@ export default class EmojiPicker extends Plugin {
 		databaseId: number; title: string; exampleEmoji: string;
 	} ): Promise<EmojiGroup> {
 		const databaseGroup = await this._emojiDatabase.getEmojiByGroup( databaseId );
+		const container = this._createEmojiWidthTestingContainer();
 
-		return {
-			title,
-			exampleEmoji,
-			items: databaseGroup.map( item => {
+		const items = databaseGroup
+			.filter( item => {
+				const emojiWidth = this._getNodeWidth( container, item.unicode );
+
+				// 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 );
+			} )
+			.map( item => {
 				const name = item.annotation;
 				const emojis = [ item.unicode ];
 
@@ -182,7 +191,15 @@ export default class EmojiPicker extends Plugin {
 				this._emojis.set( name, emojis );
 
 				return { name, emojis };
-			} )
+			} );
+
+		// Clean up width testing container.
+		document.body.removeChild( container );
+
+		return {
+			title,
+			exampleEmoji,
+			items
 		};
 	}
 
@@ -432,6 +449,34 @@ export default class EmojiPicker extends Plugin {
 			} );
 		}
 	}
+
+	/**
+	 * Creates a div for emoji width testing purposes.
+	 */
+	private _createEmojiWidthTestingContainer(): HTMLDivElement {
+		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.
+	 */
+	private _getNodeWidth( container: HTMLDivElement, node: string ): number {
+		const span = document.createElement( 'span' );
+		span.textContent = node;
+		container.appendChild( span );
+		const nodeWidth = span.offsetWidth;
+		container.removeChild( span );
+
+		return nodeWidth;
+	}
 }
 
 export interface DropdownPanelContent {

scripts/ci/generate-circleci-configuration.mjs

@@ -140,6 +140,7 @@ const persistToWorkspace = fileName => ( {
 			machine: true,
 			steps: [
 				...bootstrapCommands(),
+				'install_newest_emoji',
 				prepareCodeCoverageDirectories(),
 				listBatchPackages( batch ),
 				...generateTestSteps( batch, {