From 0edcfe752eb519e13f8a2695f156b073390343b3 Mon Sep 17 00:00:00 2001
From: Kajetan Litwinowicz <k.litwinowicz@cksource.com>
Date: Tue, 18 Dec 2018 17:45:21 +0100
Subject: [PATCH] Moved emoji preview to span, added styles to display it
 correctly.

---
 plugins/emoji/plugin.js         | 2 +-
 plugins/emoji/skins/default.css | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/plugins/emoji/plugin.js b/plugins/emoji/plugin.js
index 461a430882f..d0b4524cedd 100644
--- a/plugins/emoji/plugin.js
+++ b/plugins/emoji/plugin.js
@@ -597,7 +597,7 @@
 					editor._.emoji.autocomplete = new CKEDITOR.plugins.autocomplete( editor, {
 						textTestCallback: getTextTestCallback(),
 						dataCallback: dataCallback,
-						itemTemplate: '<li data-id="{id}" class="cke_emoji-suggestion_item">{symbol} {name}</li>',
+						itemTemplate: '<li data-id="{id}" class="cke_emoji-suggestion_item"><span>{symbol}</span> {name}</li>',
 						outputTemplate: '{symbol}'
 					} );
 				}
diff --git a/plugins/emoji/skins/default.css b/plugins/emoji/skins/default.css
index 922a52d2fce..efe54dd1c08 100644
--- a/plugins/emoji/skins/default.css
+++ b/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;