Add a title attribute to emojis in messages

so that you can see the shortname when you hover your mouse over an emoji.

.eslintrc.json

@@ -117,7 +117,7 @@
         "no-console": "off",
         "no-catch-shadow": "off",
         "no-cond-assign": [
-            "error",
+            "off",
             "except-parens"
         ],
         "no-confusing-arrow": "off",

src/components/emoji-picker.js

@@ -43,7 +43,7 @@ export class EmojiPicker extends CustomElement {
             'query': this.query,
             'search_results': this.search_results,
             'shouldBeHidden': shortname => this.shouldBeHidden(shortname),
-            'transformCategory': shortname => u.getEmojiRenderer()(this.getTonedShortname(shortname))
+            'transformCategory': shortname => u.shortnamesToEmojis(this.getTonedShortname(shortname))
         });
     }
 

src/headless/converse-chat.js

@@ -951,7 +951,7 @@ converse.plugins.add('converse-chat', {
             getOutgoingMessageAttributes (text, spoiler_hint) {
                 const is_spoiler = this.get('composing_spoiler');
                 const origin_id = u.getUniqueId();
-                const body = text ? u.httpToGeoUri(u.shortnameToUnicode(text), _converse) : undefined;
+                const body = text ? u.httpToGeoUri(u.shortnamesToUnicode(text), _converse) : undefined;
                 return {
                     'from': _converse.bare_jid,
                     'fullname': _converse.xmppstatus.get('fullname'),

src/headless/converse-muc.js

@@ -997,7 +997,7 @@ converse.plugins.add('converse-muc', {
                 const is_spoiler = this.get('composing_spoiler');
                 const [text, references] = this.parseTextForReferences(original_message);
                 const origin_id = u.getUniqueId();
-                const body = text ? u.httpToGeoUri(u.shortnameToUnicode(text), _converse) : undefined;
+                const body = text ? u.httpToGeoUri(u.shortnamesToUnicode(text), _converse) : undefined;
                 return {
                     body,
                     is_spoiler,

src/templates/emoji_picker.js

 import { __ } from '@converse/headless/i18n';
-import { _converse, api } from "@converse/headless/converse-core";
+import { _converse, converse, api } from "@converse/headless/converse-core";
 import { html } from "lit-html";
 
 const u = converse.env.utils;
@@ -32,7 +32,7 @@ const emoji_picker_header = (o) => html`
 const emoji_item = (o) => {
     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}">${o.transform(o.emoji.sn)}</a>
+            <a href="#" @click=${o.onEmojiPicked} data-emoji="${o.emoji.sn}">${u.shortnamesToEmojis(o.emoji.sn)}</a>
         </li>
     `;
 }
@@ -53,16 +53,14 @@ const emojis_for_category = (o) => html`
     </ul>
 `;
 
-
 const skintone_emoji = (o) => {
     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}>${o.transform(':'+o.skintone+':')}</a>
+            <a class="pick-skintone" href="#" data-skintone="${o.skintone}" @click=${o.onSkintonePicked}>${u.shortnamesToEmojis(':'+o.skintone+':')}</a>
         </li>
     `;
 }
 
-
 const all_emojis = (o) => html`
     <span ?hidden=${o.query} class="emoji-lists__container emoji-lists__container--browse">
         ${Object.keys(o.emoji_categories).map(category => (o.emoji_categories[category] ? emojis_for_category(Object.assign({category}, o)) : ''))}
@@ -73,7 +71,6 @@ const all_emojis = (o) => html`
 export default (o) => {
     o.emoji_categories = api.settings.get('emoji_categories');
     o.emojis_by_category = _converse.emojis.json;
-    o.transform = u.getEmojiRenderer();
     o.toned_emojis = _converse.emojis.toned;
 
     return html`