Improved naming of methods and variables in the package.

packages/ckeditor5-emoji/src/emojidatabase.ts

@@ -92,7 +92,7 @@ export default class EmojiDatabase extends Plugin {
 
 		// Store the emoji database after normalizing the raw data.
 		this._emojiDatabase = emojiDatabase
-			.filter( item => isEmojiGroupAllowed( item ) )
+			.filter( item => isEmojiCategoryAllowed( item ) )
 			.filter( item => EmojiDatabase._isEmojiSupported( item, container ) )
 			.map( item => normalizeEmojiSkinTone( item ) );
 
@@ -118,7 +118,7 @@ export default class EmojiDatabase extends Plugin {
 	 * @param searchQuery A search query to match emoji.
 	 * @returns An array of emoji entries that match the search query.
 	 */
-	public getEmojiBySearchQuery( searchQuery: string ): Array<EmojiEntry> {
+	public getEmojiByQuery( searchQuery: string ): Array<EmojiEntry> {
 		if ( !this._fuseSearch ) {
 			return [];
 		}
@@ -155,7 +155,7 @@ export default class EmojiDatabase extends Plugin {
 	 *
 	 * @returns An array of emoji entries grouped by categories.
 	 */
-	public getEmojiGroups(): Array<EmojiCategory> {
+	public getEmojiCategories(): Array<EmojiCategory> {
 		const { t } = this.editor.locale;
 
 		const categories = [
@@ -311,7 +311,7 @@ function normalizeEmojiSkinTone( item: EmojiCdnResource ): EmojiEntry {
 /**
  * Checks whether the emoji belongs to a group that is allowed.
  */
-function isEmojiGroupAllowed( item: EmojiCdnResource ): boolean {
+function isEmojiCategoryAllowed( item: EmojiCdnResource ): boolean {
 	// Category group=2 contains skin tones only, which we do not want to render.
 	return item.group !== 2;
 }

packages/ckeditor5-emoji/src/emojimention.ts

@@ -227,7 +227,7 @@ export default class EmojiMention extends Plugin {
 				return [];
 			}
 
-			const emojis: Array<MentionFeedObjectItem> = this._emojiDatabasePlugin.getEmojiBySearchQuery( searchQuery )
+			const emojis: Array<MentionFeedObjectItem> = this._emojiDatabasePlugin.getEmojiByQuery( searchQuery )
 				.map( emoji => {
 					let text = emoji.skins[ this._skinTone ] || emoji.skins.default;
 

packages/ckeditor5-emoji/src/emojipicker.ts

@@ -28,19 +28,19 @@ const VISUAL_SELECTION_MARKER_NAME = 'emoji-picker';
  */
 export default class EmojiPicker extends Plugin {
 	/**
-	 * The contextual balloon plugin instance.
+	 * The actions view displayed inside the balloon.
 	 */
-	declare private _balloon: ContextualBalloon;
+	declare public emojiPickerView: EmojiPickerView | undefined;
 
 	/**
-	 * An instance of the {@link module:emoji/emojidatabase~EmojiDatabase} plugin.
+	 * The contextual balloon plugin instance.
 	 */
-	declare private _emojiDatabase: EmojiDatabase;
+	declare private _balloonPlugin: ContextualBalloon;
 
 	/**
-	 * The actions view displayed inside the balloon.
+	 * An instance of the {@link module:emoji/emojidatabase~EmojiDatabase} plugin.
 	 */
-	declare private _emojiPickerView: EmojiPickerView | undefined;
+	declare private _emojiDatabasePlugin: EmojiDatabase;
 
 	/**
 	 * @inheritDoc
@@ -69,8 +69,8 @@ export default class EmojiPicker extends Plugin {
 	public init(): void {
 		const editor = this.editor;
 
-		this._emojiDatabase = editor.plugins.get( 'EmojiDatabase' );
-		this._balloon = editor.plugins.get( 'ContextualBalloon' );
+		this._emojiDatabasePlugin = editor.plugins.get( 'EmojiDatabase' );
+		this._balloonPlugin = editor.plugins.get( 'ContextualBalloon' );
 	}
 
 	/**
@@ -80,14 +80,14 @@ export default class EmojiPicker extends Plugin {
 		const editor = this.editor;
 
 		// Skip registering a button in the toolbar and list item in the menu bar if the emoji database is not loaded.
-		if ( !this._emojiDatabase.isDatabaseLoaded() ) {
+		if ( !this._emojiDatabasePlugin.isDatabaseLoaded() ) {
 			return;
 		}
 
 		editor.commands.add( 'emoji', new EmojiCommand( editor ) );
 
 		editor.ui.componentFactory.add( 'emoji', () => {
-			const button = this._createUiComponent( ButtonView );
+			const button = this._createButton( ButtonView );
 
 			button.set( {
 				tooltip: true
@@ -97,7 +97,7 @@ export default class EmojiPicker extends Plugin {
 		} );
 
 		editor.ui.componentFactory.add( 'menuBar:emoji', () => {
-			return this._createUiComponent( MenuBarMenuListItemButtonView );
+			return this._createButton( MenuBarMenuListItemButtonView );
 		} );
 
 		this._setupConversion();
@@ -109,8 +109,8 @@ export default class EmojiPicker extends Plugin {
 	public override destroy(): void {
 		super.destroy();
 
-		if ( this._emojiPickerView ) {
-			this._emojiPickerView.destroy();
+		if ( this.emojiPickerView ) {
+			this.emojiPickerView.destroy();
 		}
 	}
 
@@ -121,11 +121,11 @@ export default class EmojiPicker extends Plugin {
 	 * Otherwise, it reflects the user's intention.
 	 */
 	public get skinTone(): SkinToneId {
-		if ( !this._emojiPickerView ) {
+		if ( !this.emojiPickerView ) {
 			return this.editor.config.get( 'emoji.skinTone' )!;
 		}
 
-		return this._emojiPickerView.gridView.skinTone;
+		return this.emojiPickerView.gridView.skinTone;
 	}
 
 	/**
@@ -134,34 +134,34 @@ export default class EmojiPicker extends Plugin {
 	 * @param [searchValue=''] A default query used to filer the grid when opening the UI.
 	 */
 	public showUI( searchValue: string = '' ): void {
-		if ( !this._emojiPickerView ) {
-			this._emojiPickerView = this._createEmojiPickerView();
+		if ( !this.emojiPickerView ) {
+			this.emojiPickerView = this._createEmojiPickerView();
 		}
 
 		if ( searchValue ) {
-			this._emojiPickerView.searchView.setInputValue( searchValue );
+			this.emojiPickerView.searchView.setInputValue( searchValue );
 		}
 
-		this._emojiPickerView.searchView.search( searchValue );
+		this.emojiPickerView.searchView.search( searchValue );
 
-		if ( !this._balloon.hasView( this._emojiPickerView ) ) {
-			this._balloon.add( {
-				view: this._emojiPickerView,
+		if ( !this._balloonPlugin.hasView( this.emojiPickerView ) ) {
+			this._balloonPlugin.add( {
+				view: this.emojiPickerView,
 				position: this._getBalloonPositionData()
 			} );
 
 			this._showFakeVisualSelection();
 		}
 
 		setTimeout( () => {
-			this._emojiPickerView!.focus();
+			this.emojiPickerView!.focus();
 		} );
 	}
 
 	/**
 	 * Creates a button for toolbar and menu bar that will show the emoji dialog.
 	 */
-	private _createUiComponent<T extends typeof ButtonView>( ViewClass: T ): InstanceType<T> {
+	private _createButton<T extends typeof ButtonView>( ViewClass: T ): InstanceType<T> {
 		const buttonView = new ViewClass( this.editor.locale ) as InstanceType<T>;
 		const t = this.editor.locale.t;
 
@@ -183,11 +183,11 @@ export default class EmojiPicker extends Plugin {
 	 */
 	private _createEmojiPickerView(): EmojiPickerView {
 		const emojiPickerView = new EmojiPickerView( this.editor.locale, {
-			emojiGroups: this._emojiDatabase.getEmojiGroups(),
+			emojiCategories: this._emojiDatabasePlugin.getEmojiCategories(),
 			skinTone: this.editor.config.get( 'emoji.skinTone' )!,
-			skinTones: this._emojiDatabase.getSkinTones(),
-			getEmojiBySearchQuery: ( query: string ) => {
-				return this._emojiDatabase.getEmojiBySearchQuery( query );
+			skinTones: this._emojiDatabasePlugin.getSkinTones(),
+			getEmojiByQuery: ( query: string ) => {
+				return this._emojiDatabasePlugin.getEmojiByQuery( query );
 			}
 		} );
 
@@ -206,8 +206,8 @@ export default class EmojiPicker extends Plugin {
 
 		// Update the balloon position when layout is changed.
 		this.listenTo<EmojiPickerViewUpdateEvent>( emojiPickerView, 'update', () => {
-			if ( this._balloon.visibleView === emojiPickerView ) {
-				this._balloon.updatePosition();
+			if ( this._balloonPlugin.visibleView === emojiPickerView ) {
+				this._balloonPlugin.updatePosition();
 			}
 		} );
 
@@ -220,9 +220,9 @@ export default class EmojiPicker extends Plugin {
 		// Close the dialog when clicking outside of it.
 		clickOutsideHandler( {
 			emitter: emojiPickerView,
-			contextElements: [ this._balloon.view.element! ],
+			contextElements: [ this._balloonPlugin.view.element! ],
 			callback: () => this._hideUI(),
-			activator: () => this._balloon.visibleView === emojiPickerView
+			activator: () => this._balloonPlugin.visibleView === emojiPickerView
 		} );
 
 		return emojiPickerView;
@@ -232,9 +232,9 @@ export default class EmojiPicker extends Plugin {
 	 * Hides the balloon with the emoji picker.
 	 */
 	private _hideUI(): void {
-		this._balloon.remove( this._emojiPickerView! );
+		this._balloonPlugin.remove( this.emojiPickerView! );
 
-		this._emojiPickerView!.searchView.setInputValue( '' );
+		this.emojiPickerView!.searchView.setInputValue( '' );
 
 		this.editor.editing.view.focus();
 		this._hideFakeVisualSelection();
@@ -275,7 +275,7 @@ export default class EmojiPicker extends Plugin {
 	}
 
 	/**
-	 * Returns positioning options for the {@link #_balloon}. They control the way the balloon is attached
+	 * Returns positioning options for the {@link #_balloonPlugin}. They control the way the balloon is attached
 	 * to the target element or selection.
 	 */
 	private _getBalloonPositionData(): Partial<PositionOptions> {

packages/ckeditor5-emoji/src/ui/emojicategoriesview.ts

@@ -46,11 +46,11 @@ export default class EmojiCategoriesView extends View {
 	/**
 	 * @inheritDoc
 	 */
-	constructor( locale: Locale, { emojiGroups, categoryName }: { emojiGroups: Array<EmojiCategory>; categoryName: string } ) {
+	constructor( locale: Locale, { emojiCategories, categoryName }: { emojiCategories: Array<EmojiCategory>; categoryName: string } ) {
 		super( locale );
 
 		this.buttonViews = this.createCollection(
-			emojiGroups.map( emojiGroup => this._createCategoryButton( emojiGroup ) )
+			emojiCategories.map( emojiCategory => this._createCategoryButton( emojiCategory ) )
 		);
 
 		this.focusTracker = new FocusTracker();
@@ -144,7 +144,7 @@ export default class EmojiCategoriesView extends View {
 	/**
 	 * Creates a button representing a category item.
 	 */
-	private _createCategoryButton( emojiGroup: EmojiCategory ): ButtonView {
+	private _createCategoryButton( emojiCategory: EmojiCategory ): ButtonView {
 		const buttonView = new ButtonView();
 		const bind = buttonView.bindTemplate;
 
@@ -159,18 +159,18 @@ export default class EmojiCategoriesView extends View {
 		} );
 
 		buttonView.set( {
-			ariaLabel: emojiGroup.title,
-			label: emojiGroup.icon,
+			ariaLabel: emojiCategory.title,
+			label: emojiCategory.icon,
 			role: 'tab',
-			tooltip: emojiGroup.title,
+			tooltip: emojiCategory.title,
 			withText: true,
 			// To improve accessibility, disconnect a button and its label connection so that screen
 			// readers can read the `[aria-label]` attribute directly from the more descriptive button.
 			ariaLabelledBy: undefined
 		} );
 
 		buttonView.on( 'execute', () => {
-			this.categoryName = emojiGroup.title;
+			this.categoryName = emojiCategory.title;
 		} );
 
 		buttonView.on<ObservableChangeEvent<boolean>>( 'change:isEnabled', () => {

packages/ckeditor5-emoji/src/ui/emojigridview.ts

@@ -57,27 +57,27 @@ export default class EmojiGridView extends View<HTMLDivElement> implements Filte
 	/**
 	 * An array containing all emojis grouped by their categories.
 	 */
-	public readonly emojiGroups: Array<EmojiCategory>;
-
-	/**
-	 * A callback used to filter grid items by a specified query.
-	 */
-	private readonly getEmojiBySearchQuery: EmojiSearchQueryCallback;
+	public readonly emojiCategories: Array<EmojiCategory>;
 
 	/**
 	 * A collection of all already created tile views. Each tile represents a particular emoji.
 	 * The cached tiles collection is used for efficiency purposes to avoid re-creating a particular
 	 * tile again when the grid view has changed.
 	 */
-	private readonly cachedTiles: ViewCollection<ButtonView>;
+	public readonly cachedTiles: ViewCollection<ButtonView>;
+
+	/**
+	 * A callback used to filter grid items by a specified query.
+	 */
+	private readonly _getEmojiByQuery: EmojiSearchQueryCallback;
 
 	/**
 	 * @inheritDoc
 	 */
-	constructor( locale: Locale, { categoryName, emojiGroups, getEmojiBySearchQuery, skinTone }: {
+	constructor( locale: Locale, { categoryName, emojiCategories, getEmojiByQuery, skinTone }: {
 		categoryName: string;
-		emojiGroups: Array<EmojiCategory>;
-		getEmojiBySearchQuery: EmojiSearchQueryCallback;
+		emojiCategories: Array<EmojiCategory>;
+		getEmojiByQuery: EmojiSearchQueryCallback;
 		skinTone: SkinToneId;
 	} ) {
 		super( locale );
@@ -92,8 +92,8 @@ export default class EmojiGridView extends View<HTMLDivElement> implements Filte
 		this.focusTracker = new FocusTracker();
 		this.keystrokes = new KeystrokeHandler();
 
-		this.getEmojiBySearchQuery = getEmojiBySearchQuery;
-		this.emojiGroups = emojiGroups;
+		this._getEmojiByQuery = getEmojiByQuery;
+		this.emojiCategories = emojiCategories;
 
 		const bind = this.bindTemplate;
 
@@ -192,16 +192,16 @@ export default class EmojiGridView extends View<HTMLDivElement> implements Filte
 	 */
 	private _getItemsByQuery( query: string ): { matchingItems: Array<EmojiEntry>; allItems: Array<EmojiEntry> } {
 		return {
-			matchingItems: this.getEmojiBySearchQuery( query ),
-			allItems: this.emojiGroups.flatMap( group => group.items )
+			matchingItems: this._getEmojiByQuery( query ),
+			allItems: this.emojiCategories.flatMap( group => group.items )
 		};
 	}
 
 	/**
 	 * Returns emojis that belong to the specified category.
 	 */
 	private _getItemsByCategory(): { matchingItems: Array<EmojiEntry>; allItems: Array<EmojiEntry> } {
-		const emojiCategory = this.emojiGroups.find( item => item.title === this.categoryName )!;
+		const emojiCategory = this.emojiCategories.find( item => item.title === this.categoryName )!;
 		const { items } = emojiCategory;
 
 		return {

packages/ckeditor5-emoji/src/ui/emojipickerview.ts

@@ -82,21 +82,21 @@ export default class EmojiPickerView extends View<HTMLDivElement> {
 	 */
 	constructor(
 		locale: Locale,
-		{ emojiGroups, getEmojiBySearchQuery, skinTone, skinTones }: {
-			emojiGroups: Array<EmojiCategory>;
-			getEmojiBySearchQuery: EmojiSearchQueryCallback;
+		{ emojiCategories, getEmojiByQuery, skinTone, skinTones }: {
+			emojiCategories: Array<EmojiCategory>;
+			getEmojiByQuery: EmojiSearchQueryCallback;
 			skinTone: SkinToneId;
 			skinTones: Array<SkinTone>;
 		}
 	) {
 		super( locale );
 
-		const categoryName = emojiGroups[ 0 ].title;
+		const categoryName = emojiCategories[ 0 ].title;
 
 		this.gridView = new EmojiGridView( locale, {
 			categoryName,
-			emojiGroups,
-			getEmojiBySearchQuery,
+			emojiCategories,
+			getEmojiByQuery,
 			skinTone
 		} );
 		this.infoView = new SearchInfoView();
@@ -105,7 +105,7 @@ export default class EmojiPickerView extends View<HTMLDivElement> {
 			resultsView: this.infoView
 		} );
 		this.categoriesView = new EmojiCategoriesView( locale, {
-			emojiGroups,
+			emojiCategories,
 			categoryName
 		} );
 		this.toneView = new EmojiToneView( locale, {