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

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,33 @@ export default class EmojiPicker extends Plugin {
 			} );
 		}
 	}
+
+	/**
+	 * Creates a div for emoji width testing purposes.
+	 */
+	private _createEmojiWidthTestingContainer(): HTMLDivElement {
+		const container = document.createElement( 'div' );
+		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 {

packages/ckeditor5-emoji/tests/emojimention.js

@@ -288,11 +288,11 @@ describe( 'EmojiMention', () => {
 		} );
 
 		it( 'should query single emoji properly properly', () => {
-			return queryEmoji( 'flag_poland' ).then( queryResult => {
-				expect( queryResult ).to.deep.equal( [
-					{ id: 'emoji:flag_poland:', text: '🇵🇱' },
-					{ id: 'emoji:__SHOW_ALL_EMOJI__:', text: 'flag_poland' }
-				] );
+			return queryEmoji( 'toothbrush' ).then( queryResult => {
+				expect( queryResult[ 0 ].id ).to.equal( 'emoji:toothbrush:' );
+				expect( queryResult[ 0 ].text ).to.equal( '🪥' );
+				expect( queryResult[ 1 ].id ).to.equal( 'emoji:__SHOW_ALL_EMOJI__:' );
+				expect( queryResult[ 1 ].text ).to.equal( 'toothbrush' );
 			} );
 		} );
 
@@ -378,12 +378,12 @@ describe( 'EmojiMention', () => {
 		it( 'should return emojis with the default skin tone when the skin tone is selected but the emoji does not have variants', () => {
 			editor.plugins.get( EmojiPicker )._selectedSkinTone = 5;
 
-			return queryEmoji( 'flag_poland' ).then( queryResult => {
+			return queryEmoji( 'toothbrush' ).then( queryResult => {
 				expect( queryResult.length ).to.equal( 2 );
 
 				expect( queryResult[ 0 ] ).to.deep.equal( {
-					id: 'emoji:flag_poland:',
-					text: '🇵🇱'
+					id: 'emoji:toothbrush:',
+					text: '🪥'
 				} );
 				expect( queryResult[ 1 ].id ).to.equal( 'emoji:__SHOW_ALL_EMOJI__:' );
 			} );

packages/ckeditor5-emoji/tests/emojipicker.js

@@ -88,11 +88,11 @@ describe( 'EmojiPicker', () => {
 
 		clickEmojiToolbarButton();
 
-		const firstEmojiInGrid = document.querySelector( '.ck-emoji-grid__tiles > button' );
+		const firstEmojiInGrid = document.querySelector( '.ck-emoji-grid__tiles [title="slightly smiling face"]' );
 
 		firstEmojiInGrid.click();
 
-		expect( getModelData( editor.model ) ).to.equal( '<paragraph>😀[]</paragraph>' );
+		expect( getModelData( editor.model ) ).to.equal( '<paragraph>🙂[]</paragraph>' );
 	} );
 
 	it( 'should close the picker when clicking outside of it', async () => {