Merge pull request #17800 from ckeditor/ck/17778-fix-skin-tone-config

Internal: Fixed skin tone in emoji mention to take the default value from emoji config.
ckeditor · Jan 23, 2025 · 7919ea0 · 7919ea0
2 parents 31969f6 + 9f6423c
commit 7919ea0
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 15 deletions.
diff --git a/packages/ckeditor5-emoji/src/emojidatabase.ts b/packages/ckeditor5-emoji/src/emojidatabase.ts
@@ -66,7 +66,8 @@ export default class EmojiDatabase extends Plugin {
 		super( editor );
 
 		this.editor.config.define( 'emoji', {
-			version: 16
+			version: 16,
+			skinTone: 'default'
 		} );
 
 		this._emojiDatabase = [];

diff --git a/packages/ckeditor5-emoji/src/emojimention.ts b/packages/ckeditor5-emoji/src/emojimention.ts
@@ -13,6 +13,7 @@ import type { MentionFeed, MentionFeedObjectItem } from '@ckeditor/ckeditor5-men
 
 import EmojiDatabase from './emojidatabase.js';
 import type EmojiPicker from './emojipicker.js';
+import type { SkinToneId } from './emojiconfig.js';
 
 const EMOJI_MENTION_MARKER = ':';
 const EMOJI_SHOW_ALL_OPTION_ID = ':__EMOJI_SHOW_ALL:';
@@ -41,6 +42,11 @@ export default class EmojiMention extends Plugin {
 	 */
 	private readonly _emojiDropdownLimit: number;
 
+	/**
+	 * Defines a skin tone that is set in the emoji config.
+	 */
+	private readonly _skinTone: SkinToneId;
+
 	/**
 	 * @inheritDoc
 	 */
@@ -73,6 +79,7 @@ export default class EmojiMention extends Plugin {
 		} );
 
 		this._emojiDropdownLimit = editor.config.get( 'emoji.dropdownLimit' )!;
+		this._skinTone = editor.config.get( 'emoji.skinTone' )!;
 
 		const mentionFeedsConfigs = editor.config.get( 'mention.feeds' )! as Array<MentionFeed>;
 		const mergeFieldsPrefix = editor.config.get( 'mergeFields.prefix' )! as string;
@@ -222,8 +229,7 @@ export default class EmojiMention extends Plugin {
 
 			const emojis: Array<MentionFeedObjectItem> = this._emojiDatabasePlugin.getEmojiBySearchQuery( searchQuery )
 				.map( emoji => {
-					// TODO: The configuration `emoji.skinTone` option is ignored here.
-					let text = emoji.skins.default;
+					let text = emoji.skins[ this._skinTone ] || emoji.skins.default;
 
 					if ( this._emojiPickerPlugin ) {
 						text = emoji.skins[ this._emojiPickerPlugin.skinTone ] || emoji.skins.default;

diff --git a/packages/ckeditor5-emoji/src/emojipicker.ts b/packages/ckeditor5-emoji/src/emojipicker.ts
@@ -9,7 +9,7 @@
 
 import { ButtonView, clickOutsideHandler, ContextualBalloon, Dialog, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
 import type { PositionOptions } from 'ckeditor5/src/utils.js';
-import { type Editor, icons, Plugin } from 'ckeditor5/src/core.js';
+import { icons, Plugin } from 'ckeditor5/src/core.js';
 
 import EmojiDatabase from './emojidatabase.js';
 import EmojiPickerView from './ui/emojipickerview.js';
@@ -62,17 +62,6 @@ export default class EmojiPicker extends Plugin {
 		return true;
 	}
 
-	/**
-	 * @inheritDoc
-	 */
-	constructor( editor: Editor ) {
-		super( editor );
-
-		this.editor.config.define( 'emoji', {
-			skinTone: 'default'
-		} );
-	}
-
 	/**
 	 * @inheritDoc
 	 */

diff --git a/packages/ckeditor5-emoji/tests/emojimention.js b/packages/ckeditor5-emoji/tests/emojimention.js
@@ -669,6 +669,85 @@ describe( 'EmojiMention', () => {
 				text: thumbUpItem.skins.default
 			} );
 		} );
+
+		it( 'should read default skin tone from config', async () => {
+			const editorElement = document.createElement( 'div' );
+			document.body.appendChild( editorElement );
+
+			const editor = await ClassicTestEditor.create( editorElement, {
+				plugins: [ EmojiMention, EmojiPicker, Paragraph, Essentials, Mention ],
+				substitutePlugins: [ EmojiDatabaseMock ],
+				emoji: {
+					skinTone: 'medium'
+				}
+			} );
+
+			const { getEmojiBySearchQuery } = editor.plugins.get( 'EmojiDatabase' );
+			const thumbUpItem = {
+				annotation: 'thumbs up',
+				emoji: '👍️',
+				skins: {
+					'default': '👍️',
+					'light': '👍🏻',
+					'medium-light': '👍🏼',
+					'medium': '👍🏽',
+					'medium-dark': '👍🏾',
+					'dark': '👍🏿'
+				}
+			};
+
+			getEmojiBySearchQuery.returns( [ thumbUpItem ] );
+
+			const queryEmoji = editor.plugins.get( 'EmojiMention' )._queryEmojiCallbackFactory();
+			const queryResult = queryEmoji( 'thumbs' );
+
+			expect( queryResult.length ).to.equal( 2 );
+
+			expect( queryResult[ 0 ] ).to.deep.equal( {
+				id: ':thumbs up:',
+				text: thumbUpItem.skins.medium
+			} );
+
+			await editor.destroy();
+			editorElement.remove();
+		} );
+
+		it( 'should use default skin tone if emoji does not have variants and skin tone is specified in config', async () => {
+			const editorElement = document.createElement( 'div' );
+			document.body.appendChild( editorElement );
+
+			const editor = await ClassicTestEditor.create( editorElement, {
+				plugins: [ EmojiMention, EmojiPicker, Paragraph, Essentials, Mention ],
+				substitutePlugins: [ EmojiDatabaseMock ],
+				emoji: {
+					skinTone: 'medium'
+				}
+			} );
+
+			const { getEmojiBySearchQuery } = editor.plugins.get( 'EmojiDatabase' );
+			const thumbUpItem = {
+				annotation: 'thumbs up',
+				emoji: '👍️',
+				skins: {
+					'default': '👍️'
+				}
+			};
+
+			getEmojiBySearchQuery.returns( [ thumbUpItem ] );
+
+			const queryEmoji = editor.plugins.get( 'EmojiMention' )._queryEmojiCallbackFactory();
+			const queryResult = queryEmoji( 'thumbs' );
+
+			expect( queryResult.length ).to.equal( 2 );
+
+			expect( queryResult[ 0 ] ).to.deep.equal( {
+				id: ':thumbs up:',
+				text: thumbUpItem.skins.default
+			} );
+
+			await editor.destroy();
+			editorElement.remove();
+		} );
 	} );
 
 	function simulateTyping( text ) {