Moved skin tone config from EmojiPicker to EmojiDatabase and extr…

…acted reading config to variable.
ckeditor · Jan 22, 2025 · 9f6423c · 9f6423c
1 parent 4033ee1
commit 9f6423c
Show file tree

Hide file tree

Showing 4 changed files with 12 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,7 +229,7 @@ export default class EmojiMention extends Plugin {
 
 			const emojis: Array<MentionFeedObjectItem> = this._emojiDatabasePlugin.getEmojiBySearchQuery( searchQuery )
 				.map( emoji => {
-					let text = emoji.skins[ this.editor.config.get( 'emoji.skinTone' ) || '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
@@ -712,7 +712,7 @@ describe( 'EmojiMention', () => {
 			editorElement.remove();
 		} );
 
-		it( 'should use default skin tone if emoji does not have variants and skin tone is specified in condfig', async () => {
+		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 );