emoji-picker: Make sure that emojis as images are rendered properly

sass/_emoji.scss

@@ -87,6 +87,11 @@
                         &.selected a {
                             background-color: var(--highlight-color-darker);
                         }
+                        img {
+                            margin-top: 3px;
+                            height: var(--font-size-huge);
+                            width: var(--font-size-huge);
+                        }
                         a {
                             padding: 3px;
                             font-size: var(--font-size-huge);
@@ -127,6 +132,10 @@
                         a {
                             padding: 0.25em;
                         }
+                        img {
+                            height: var(--font-size-huge);
+                            width: var(--font-size-huge);
+                        }
                     }
                 }
             }

src/headless/converse-emoji.js

@@ -191,7 +191,7 @@ converse.plugins.add('converse-emoji', {
                     } else if (unicode_only) {
                         return shortname;
                     } else {
-                        return `<img class="emoji" draggable="false" alt="${shortname}" src="${_converse.emojis_map[shortname].url}"/>`;
+                        return `<img class="emoji" draggable="false" alt="${shortname}" src="${_converse.emojis_map[shortname].url}">`;
                     }
                 });
                 // Also replace ASCII smileys

src/templates/emoji_picker.js

@@ -10,7 +10,7 @@ const skintones = ['tone1', 'tone2', 'tone3', 'tone4', 'tone5'];
 
 
 const emoji_category = (o) => {
-    const category_emoji = xss.filterXSS(o.transformCategory(o.emoji_categories[o.category]), {'whitelist': {'img': []}});
+    const category_emoji = unsafeHTML(xss.filterXSS(o.transformCategory(o.emoji_categories[o.category]), {'whitelist': {'img': []}}));
     return html`
         <li data-category="${o.category}"
             class="emoji-category ${o.category} ${(o.current_category === o.category) ? 'picked' : ''}"
@@ -19,7 +19,7 @@ const emoji_category = (o) => {
             <a class="pick-category"
                @click=${o.onCategoryPicked}
                href="#emoji-picker-${o.category}"
-               data-category="${o.category}">${unsafeHTML(category_emoji)} </a>
+               data-category="${o.category}">${category_emoji} </a>
         </li>
     `;
 }
@@ -34,8 +34,6 @@ const emoji_picker_header = (o) => html`
 const emoji_item = (o) => {
     let emoji;
     if (o._converse.use_system_emojis) {
-        emoji = o.transform(o.emoji.sn);
-    } else {
         emoji = unsafeHTML(xss.filterXSS(o.transform(o.emoji.sn), {'whitelist': {'img': []}}));
     }
     return html`
@@ -66,8 +64,6 @@ const skintone_emoji = (o) => {
     const shortname = ':'+o.skintone+':';
     let emoji;
     if (o._converse.use_system_emojis) {
-        emoji = o.transform(shortname);
-    } else {
         emoji = unsafeHTML(xss.filterXSS(o.transform(shortname), {'whitelist': {'img': []}}));
     }
     return html`