make use_system_emojis==false work

CHANGES.md

@@ -22,6 +22,7 @@ Soon we'll deprecate the latter, so prepare now.
 - #1937: Editing a message removes the mentions highlight
 - #1963: Mentions are visually incorrect when used in message replies
 - #2002: fix rendering of `muc_roomid_policy_hint`
+- #2006: fix rendering of emojis in case `use_system_emojis == false`
 - Allow ignoring of bootstrap modules at build using environment variable. For xample: `export BOOTSTRAP_IGNORE_MODULES="Modal,Dropdown" && make dist`
 - Bugfix. Handle stanza that clears the MUC subject
 - Replace Backbone with [Skeletor](https://github.com/skeletorjs/skeletor)

src/templates/emoji_picker.js

@@ -10,7 +10,7 @@ const skintones = ['tone1', 'tone2', 'tone3', 'tone4', 'tone5'];
 
 
 const emoji_category = (o) => {
-    const category_emoji = unsafeHTML(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': ['class', 'draggable' ,'alt', 'src', 'title']}}));
     return html`
         <li data-category="${o.category}"
             class="emoji-category ${o.category} ${(o.current_category === o.category) ? 'picked' : ''}"
@@ -32,10 +32,7 @@ const emoji_picker_header = (o) => html`
 
 
 const emoji_item = (o) => {
-    let emoji;
-    if (o._converse.api.settings.get('use_system_emojis')) {
-        emoji = unsafeHTML(xss.filterXSS(o.transform(o.emoji.sn), {'whiteList': {'img': []}}));
-    }
+    const emoji = unsafeHTML(xss.filterXSS(o.transform(o.emoji.sn), {'whiteList': {'img': ['class', 'draggable' ,'alt', 'src', 'title']}}));
     return html`
         <li class="emoji insert-emoji ${o.shouldBeHidden(o.emoji.sn) ? 'hidden' : ''}" data-emoji="${o.emoji.sn}" title="${o.emoji.sn}">
             <a href="#" @click=${o.onEmojiPicked} data-emoji="${o.emoji.sn}">${emoji}</a>
@@ -62,10 +59,7 @@ const emojis_for_category = (o) => html`
 
 const skintone_emoji = (o) => {
     const shortname = ':'+o.skintone+':';
-    let emoji;
-    if (o._converse.api.settings.get('use_system_emojis')) {
-        emoji = unsafeHTML(xss.filterXSS(o.transform(shortname), {'whiteList': {'img': []}}));
-    }
+    const emoji = unsafeHTML(xss.filterXSS(o.transform(shortname), {'whiteList': {'img': ['class', 'draggable' ,'alt', 'src', 'title']}}));
     return html`
         <li data-skintone="${o.skintone}" class="emoji-skintone ${(o.current_skintone === o.skintone) ? 'picked' : ''}">
             <a class="pick-skintone" href="#" data-skintone="${o.skintone}" @click=${o.onSkintonePicked}>${emoji}</a>