Show matched emoji name instead of an ID in emoji suggestion box

CHANGES.md

@@ -3,6 +3,10 @@
 
 ## CKEditor 4.14
 
+New features:
+
+* [#2583](https://github.com/ckeditor/ckeditor-dev/issues/2583): Changed [Emoji](https://ckeditor.com/cke4/addon/emoji) suggestion box to show matched emoji name instead of an ID.
+
 ## CKEditor 4.13.1
 
 Fixed Issues:

plugins/emoji/plugin.js

@@ -379,10 +379,11 @@
 					return arrTools.reduce(
 						items,
 						function( acc, item ) {
+							addEncodedName( item );
 							return acc + emojiTpl.output( {
 									symbol: htmlEncode( item.symbol ),
 									id: htmlEncode( item.id ),
-									name: htmlEncode( item.id.replace( /::.*$/, ':' ).replace( /^:|:$/g, '' ).replace( /_/g, ' ' ) ),
+									name: item.name,
 									group: htmlEncode( item.group ),
 									keywords: htmlEncode( ( item.keywords || [] ).join( ',' ) )
 								} );
@@ -599,7 +600,7 @@
 					editor._.emoji.autocomplete = new CKEDITOR.plugins.autocomplete( editor, {
 						textTestCallback: getTextTestCallback(),
 						dataCallback: dataCallback,
-						itemTemplate: '<li data-id="{id}" class="cke_emoji-suggestion_item">{symbol} {id}</li>',
+						itemTemplate: '<li data-id="{id}" class="cke_emoji-suggestion_item"><span>{symbol}</span> {name}</li>',
 						outputTemplate: '{symbol}'
 					} );
 				}
@@ -641,6 +642,7 @@
 								return a.id > b.id ? 1 : -1;
 							}
 						} );
+					data = arrTools.map( data, addEncodedName );
 					callback( data );
 				}
 			} );
@@ -657,6 +659,13 @@
 
 		}
 	} );
+
+	function addEncodedName( item ) {
+		if ( !item.name ) {
+			item.name = htmlEncode( item.id.replace( /::.*$/, ':' ).replace( /^:|:$/g, '' ) );
+		}
+		return item;
+	}
 } )();
 
 /**

plugins/emoji/skins/default.css

@@ -10,6 +10,10 @@
 	font-family: sans-serif, Arial, Verdana, "Trebuchet MS", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
+.cke_emoji-suggestion_item span {
+	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
 .cke_emoji-panel {
 	width: 310px;
 	height: 300px;

tests/plugins/emoji/basic.js

@@ -96,6 +96,21 @@
 			}
 		},
 
+		// This test should be on top of test suite, cause other tests will cache emojis (#2583).
+		'test emoji names cache': function( editor, bot ) {
+			bot.setHtmlWithSelection( '<p>foo :collision:^</p>' );
+
+			var collision = CKEDITOR.tools.array.filter( editor._.emoji.list, function( item ) {
+				return item.id === ':collision:';
+			} )[ 0 ];
+
+			assert.isUndefined( collision.name, 'Emoji name should be undefined.' );
+
+			editor.editable().fire( 'keyup', new CKEDITOR.dom.event( {} ) );
+
+			assert.areEqual( 'collision', collision.name, 'Emoji name should be cached.' );
+		},
+
 		'test emoji objects are added to editor': function( editor ) {
 			emojiTools.runAfterInstanceReady( editor, null, function( editor ) {
 				assert.isObject( editor._.emoji, 'Emoji variable doesn\' exists' );
@@ -210,7 +225,19 @@
 				} );
 
 				arrayAssert.itemsAreSame( expected, actual );
-				assert.areSame( '😻 :smiling_cat_face_with_heart-eyes:', autocomplete.view.element.getChild( 0 ).getText(), 'First element in view should start from "smiling".' );
+				assert.areSame( '<span>😻</span> smiling_cat_face_with_heart-eyes' , autocomplete.view.element.getChild( 0 ).getHtml(), 'First element in view should start from "smiling".' );
+			} );
+		},
+
+		// (#2583)
+		'test emoji autocomplete panel displays name': function( editor, bot ) {
+			emojiTools.runAfterInstanceReady( editor, bot, function( editor, bot ) {
+				bot.setHtmlWithSelection( '<p>:smiling_cat_face_with_heart-eyes:^</p>' );
+				editor.editable().fire( 'keyup', new CKEDITOR.dom.event( {} ) );
+
+				var element = CKEDITOR.document.findOne( '.cke_emoji-suggestion_item' );
+
+				assert.areEqual( element.getHtml(), '<span>😻</span> smiling_cat_face_with_heart-eyes' );
 			} );
 		}
 	};

tests/plugins/emoji/dropdown.js

@@ -28,6 +28,22 @@
 		setUp: function() {
 			bender.tools.ignoreUnsupportedEnvironment( 'emoji' );
 		},
+
+		// This test should be on top of test suite, cause other tests will cache emojis (#2583).
+		'test emoji names cache': function() {
+			var bot = this.editorBot,
+				collision = CKEDITOR.tools.array.filter( bot.editor._.emoji.list, function( item ) {
+				return item.id === ':collision:';
+			} )[ 0 ];
+
+			assert.isUndefined( collision.name, 'Emoji name should be undefined.' );
+
+			bot.panel( 'EmojiPanel', function( panel ) {
+				panel.hide();
+				assert.areEqual( 'collision', collision.name, 'Emoji name should be cached.' );
+			} );
+		},
+
 		'test emoji dropdown has proper components': function() {
 			var bot = this.editorBot;
 

tests/plugins/emoji/manual/emojimatchlabel.html

@@ -0,0 +1,11 @@
+<textarea id="editor" cols="10" rows="10">
+	<p></p>
+</textarea>
+
+<script>
+	bender.tools.ignoreUnsupportedEnvironment( 'emoji' );
+
+	CKEDITOR.replace( 'editor', {
+		removeButtons: 'EmojiPanel'
+	} );
+</script>

tests/plugins/emoji/manual/emojimatchlabel.md

@@ -0,0 +1,15 @@
+@bender-tags: 4.14.0, feature, emoji, 2583
+@bender-ckeditor-plugins: wysiwygarea, toolbar, emoji
+@bender-ui: collapsed
+@bender-include: ../_helpers/tools.js
+
+1. Focus the editor.
+1. Type `:smiling_face:`
+
+## Expected:
+
+The emoji suggestion box appears with the match: `☺️ smiling_face`.
+
+## Unexpected:
+
+The emoji suggestion box appears with the match: `☺️ :smiling_face:`.

tests/plugins/emoji/manual/font.html

@@ -0,0 +1,9 @@
+<textarea id="editor" cols="10" rows="10">
+	<p></p>
+</textarea>
+
+<script>
+	bender.tools.ignoreUnsupportedEnvironment( 'emoji' );
+
+	CKEDITOR.replace( 'editor' );
+</script>

tests/plugins/emoji/manual/font.md

@@ -0,0 +1,15 @@
+@bender-tags: 4.14.0, feature, emoji, 2583
+@bender-ckeditor-plugins: wysiwygarea, toolbar, emoji
+@bender-ui: collapsed
+@bender-include: ../_helpers/tools.js
+
+1. Focus the editor.
+1. Type `:smiling_face:`
+
+## Expected:
+
+Emoji suggestion box displays a nicely colored emoji symbol like this one: <span style="font-family:&quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;;">☺</span>.
+
+## Unexpected:
+
+Emoji suggestion box displays an ugly black and white smiley like this one: <span style="font-family:sans-serif">☺</span>