fix emojis in case `use_system_emojis == false`

CHANGES.md

@@ -30,6 +30,7 @@ Soon we'll deprecate the latter, so prepare now.
 - #2199: Fix BOSH session restore.
 - #2201: added html to converse.env
 - #2213: added CustomElement to converse.env
+- #2220: fix rendering of emojis in case `use_system_emojis == false` (again).
 - Removed the mockups from the project. Recommended to use tests instead.
 - The API method `api.settings.update` has been deprecated in favor of `api.settings.extend`.
 - The API methods under the `api.user.status` namespace are now asynchronous and need to be `await`ed.

spec/emojis.js

@@ -340,6 +340,48 @@ describe("Emojis", function () {
             done()
         }));
 
+        it("can render emojis as images",
+            mock.initConverse(
+                ['rosterGroupsFetched', 'chatBoxesFetched'], {'use_system_emojis': false},
+                async function (done, _converse) {
+
+            await mock.waitForRoster(_converse, 'current');
+            const sender_jid = mock.cur_names[1].replace(/ /g,'.').toLowerCase() + '@montague.lit';
+            _converse.handleMessageStanza($msg({
+                    'from': sender_jid,
+                    'to': _converse.connection.jid,
+                    'type': 'chat',
+                    'id': _converse.connection.getUniqueId()
+                }).c('body').t('😇').up()
+                .c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree());
+            await new Promise(resolve => _converse.on('chatBoxViewInitialized', resolve));
+            const view = _converse.api.chatviews.get(sender_jid);
+            await new Promise(resolve => view.model.messages.once('rendered', resolve));
+            await u.waitUntil(() => u.hasClass('chat-msg__text--larger', view.content.querySelector('.chat-msg__text')));
+
+            const last_msg_sel = 'converse-chat-message:last-child .chat-msg__text';
+            let message = view.content.querySelector(last_msg_sel);
+            await u.waitUntil(() => u.isVisible(message.querySelector('.emoji')), 1000);
+            let imgs = message.querySelectorAll('.emoji');
+            expect(imgs.length).toBe(1);
+            expect(imgs[0].src).toBe(_converse.api.settings.get('emoji_image_path')+'/72x72/1f607.png');
+
+            const textarea = view.el.querySelector('textarea.chat-textarea');
+            textarea.value = ':poop: :innocent:';
+            view.onKeyDown({
+                target: textarea,
+                preventDefault: function preventDefault () {},
+                keyCode: 13 // Enter
+            });
+            await new Promise(resolve => view.model.messages.once('rendered', resolve));
+            message = view.content.querySelector(last_msg_sel);
+            await u.waitUntil(() => u.isVisible(message.querySelector('.emoji')), 1000);
+            imgs = message.querySelectorAll('.emoji');
+            expect(imgs.length).toBe(2);
+            expect(imgs[0].src).toBe(_converse.api.settings.get('emoji_image_path')+'/72x72/1f4a9.png');
+            expect(imgs[1].src).toBe(_converse.api.settings.get('emoji_image_path')+'/72x72/1f607.png');
+            done()
+        }));
 
         it("can show custom emojis",
             mock.initConverse(

src/headless/converse-emoji.js

@@ -119,14 +119,18 @@ export function getEmojiMarkup (data, options={unicode_only: false, add_title_wr
     const emoji = data.emoji;
     const shortname = data.shortname;
     if (emoji) {
-        if (api.settings.get('use_system_emojis')) {
-            return (options.add_title_wrapper && shortname) ? html`<span title="${shortname}">${emoji}</span>` : emoji;
+        if (options.add_title_wrapper) {
+            if (api.settings.get('use_system_emojis')) {
+                return shortname ? html`<span title="${shortname}">${emoji}</span>` : emoji;
+            } else {
+                const path = api.settings.get('emoji_image_path');
+                return html`<img class="emoji"
+                    draggable="false"
+                    alt="${emoji}"
+                    src="${path}/72x72/${data.cp}.png"/>`;
+            }
         } else {
-            const path = api.settings.get('emoji_image_path');
-            return html`<img class="emoji"
-                draggable="false"
-                alt="${emoji}"
-                src="${path}/72x72/${data.cp}.png"/>`;
+            return emoji;
         }
     } else if (options.unicode_only) {
         return shortname;