Use lit-html to render a message

.eslintrc.json

@@ -35,6 +35,7 @@
         "lodash/prefer-startswith": "off",
         "lodash/preferred-alias": "off",
         "lodash/matches-prop-shorthand": "off",
+        "lodash/prop-shorthand": "off",
         "accessor-pairs": "error",
         "array-bracket-spacing": "off",
         "array-callback-return": "error",

spec/chatbox.js

@@ -1542,7 +1542,7 @@ describe("Chatboxes", function () {
         }));
     });
 
-    describe("A Minimized ChatBoxView's Unread Message Count", function () {
+    fdescribe("A Minimized ChatBoxView's Unread Message Count", function () {
 
         it("is displayed when scrolled up chatbox is minimized after receiving unread messages",
             mock.initConverse(
@@ -1597,16 +1597,15 @@ describe("Chatboxes", function () {
             done();
         }));
 
-        it("will render Openstreetmap-URL from geo-URI",
+        fit("will render Openstreetmap-URL from geo-URI",
             mock.initConverse(
                 ['rosterGroupsFetched', 'chatBoxesFetched'], {},
                 async function (done, _converse) {
 
             await mock.waitForRoster(_converse, 'current', 1);
 
-            const message = "geo:37.786971,-122.399677",
-                  contact_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
-
+            const message = "geo:37.786971,-122.399677";
+            const contact_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
             await mock.openChatBoxFor(_converse, contact_jid);
             const view = _converse.chatboxviews.get(contact_jid);
             spyOn(view.model, 'sendMessage').and.callThrough();
@@ -1614,10 +1613,9 @@ describe("Chatboxes", function () {
             await u.waitUntil(() => view.el.querySelectorAll('.chat-content .chat-msg').length, 1000);
             expect(view.model.sendMessage).toHaveBeenCalled();
             const msg = sizzle('.chat-content .chat-msg:last .chat-msg__text', view.el).pop();
-            expect(msg.innerHTML).toEqual(
+            expect(msg.innerHTML.replace(/\<!----\>/g, '')).toEqual(
                 '<a target="_blank" rel="noopener" href="https://www.openstreetmap.org/?mlat=37.786971&amp;'+
-                'mlon=-122.399677#map=18/37.786971/-122.399677">https://www.openstreetmap.org/?mlat=37.7869'+
-                '71&amp;mlon=-122.399677#map=18/37.786971/-122.399677</a>');
+                'mlon=-122.399677#map=18/37.786971/-122.399677">https://www.openstreetmap.org/?mlat=37.786971&amp;amp;mlon=-122.399677#map=18/37.786971/-122.399677</a>');
             done();
         }));
     });

spec/spoilers.js

@@ -36,7 +36,7 @@ describe("A spoiler message", function () {
         await u.waitUntil(() => view.model.vcard.get('fullname') === 'Mercutio')
         expect(view.el.querySelector('.chat-msg__author').textContent.trim()).toBe('Mercutio');
         const message_content = view.el.querySelector('.chat-msg__text');
-        expect(message_content.textContent).toBe(spoiler);
+        await u.waitUntil(() => message_content.textContent === spoiler);
         const spoiler_hint_el = view.el.querySelector('.spoiler-hint');
         expect(spoiler_hint_el.textContent).toBe(spoiler_hint);
         done();
@@ -72,9 +72,10 @@ describe("A spoiler message", function () {
         await new Promise(resolve => view.model.messages.once('rendered', resolve));
         await u.waitUntil(() => u.isVisible(view.el));
         await u.waitUntil(() => view.model.vcard.get('fullname') === 'Mercutio')
+        await u.waitUntil(() => u.isVisible(view.el.querySelector('.chat-msg__author')));
         expect(view.el.querySelector('.chat-msg__author').textContent.includes('Mercutio')).toBeTruthy();
         const message_content = view.el.querySelector('.chat-msg__text');
-        expect(message_content.textContent).toBe(spoiler);
+        await u.waitUntil(() => message_content.textContent === spoiler);
         const spoiler_hint_el = view.el.querySelector('.spoiler-hint');
         expect(spoiler_hint_el.textContent).toBe('');
         done();
@@ -136,23 +137,26 @@ describe("A spoiler message", function () {
         expect(spoiler_el === null).toBeFalsy();
         expect(spoiler_el.textContent).toBe('');
 
+        const spoiler = 'This is the spoiler';
         const body_el = stanza.querySelector('body');
-        expect(body_el.textContent).toBe('This is the spoiler');
+        expect(body_el.textContent).toBe(spoiler);
 
         /* Test the HTML spoiler message */
         expect(view.el.querySelector('.chat-msg__author').textContent.trim()).toBe('Romeo Montague');
 
+        const message_content = view.el.querySelector('.chat-msg__text');
+        await u.waitUntil(() => message_content.textContent === spoiler);
+
         const spoiler_msg_el = view.el.querySelector('.chat-msg__text.spoiler');
-        expect(spoiler_msg_el.textContent).toBe('This is the spoiler');
         expect(Array.from(spoiler_msg_el.classList).includes('collapsed')).toBeTruthy();
 
         spoiler_toggle = view.el.querySelector('.spoiler-toggle');
-        expect(spoiler_toggle.textContent).toBe('Show more');
+        expect(spoiler_toggle.textContent.trim()).toBe('Show more');
         spoiler_toggle.click();
-        expect(Array.from(spoiler_msg_el.classList).includes('collapsed')).toBeFalsy();
-        expect(spoiler_toggle.textContent).toBe('Show less');
+        await u.waitUntil(() => !Array.from(spoiler_msg_el.classList).includes('collapsed'));
+        expect(spoiler_toggle.textContent.trim()).toBe('Show less');
         spoiler_toggle.click();
-        expect(Array.from(spoiler_msg_el.classList).includes('collapsed')).toBeTruthy();
+        await u.waitUntil(() => Array.from(spoiler_msg_el.classList).includes('collapsed'));
         done();
     }));
 
@@ -217,23 +221,26 @@ describe("A spoiler message", function () {
         expect(spoiler_el === null).toBeFalsy();
         expect(spoiler_el.textContent).toBe('This is the hint');
 
+        const spoiler = 'This is the spoiler'
         const body_el = stanza.querySelector('body');
-        expect(body_el.textContent).toBe('This is the spoiler');
+        expect(body_el.textContent).toBe(spoiler);
 
         /* Test the HTML spoiler message */
         expect(view.el.querySelector('.chat-msg__author').textContent.trim()).toBe('Romeo Montague');
 
+        const message_content = view.el.querySelector('.chat-msg__text');
+        await u.waitUntil(() => message_content.textContent === spoiler);
+
         const spoiler_msg_el = view.el.querySelector('.chat-msg__text.spoiler');
-        expect(spoiler_msg_el.textContent).toBe('This is the spoiler');
         expect(Array.from(spoiler_msg_el.classList).includes('collapsed')).toBeTruthy();
 
         spoiler_toggle = view.el.querySelector('.spoiler-toggle');
-        expect(spoiler_toggle.textContent).toBe('Show more');
+        expect(spoiler_toggle.textContent.trim()).toBe('Show more');
         spoiler_toggle.click();
-        expect(Array.from(spoiler_msg_el.classList).includes('collapsed')).toBeFalsy();
-        expect(spoiler_toggle.textContent).toBe('Show less');
+        await u.waitUntil(() => !Array.from(spoiler_msg_el.classList).includes('collapsed'));
+        expect(spoiler_toggle.textContent.trim()).toBe('Show less');
         spoiler_toggle.click();
-        expect(Array.from(spoiler_msg_el.classList).includes('collapsed')).toBeTruthy();
+        await u.waitUntil(() => Array.from(spoiler_msg_el.classList).includes('collapsed'));
         done();
     }));
 });

src/components/message.js

@@ -0,0 +1,217 @@
+import dayjs from 'dayjs';
+import tpl_message_versions_modal from "../templates/message_versions_modal.js";
+import { BootstrapModal } from "../converse-modal.js";
+import { LitElement, html } from 'lit-element';
+import { __ } from '@converse/headless/i18n';
+import { _converse, api, converse } from  "@converse/headless/converse-core";
+import { renderAvatar } from './../templates/directives/avatar';
+import { renderBodyText } from './../templates/directives/body';
+import { renderRetractionLink } from './../templates/directives/retraction';
+
+const { Strophe } = converse.env;
+const u = converse.env.utils;
+
+const i18n_edit_message = __('Edit this message');
+const i18n_edited = __('This message has been edited');
+const i18n_show = __('Show more');
+const i18n_show_less = __('Show less');
+
+
+const MessageVersionsModal = BootstrapModal.extend({
+    // FIXME: this isn't globally unique
+    id: "message-versions-modal",
+    toHTML () {
+        return tpl_message_versions_modal(this.model.toJSON());
+    }
+});
+
+
+class Message extends LitElement {
+
+    static get properties () {
+        return {
+            correcting: { type: Boolean },
+            editable: { type: Boolean },
+            first_unread: { type: Boolean },
+            from: { type: String },
+            has_mentions: { type: Boolean },
+            hats: { type: Array },
+            is_delayed: { type: Boolean },
+            is_encrypted: { type: Boolean },
+            is_me_message: { type: Boolean },
+            is_only_emojis: { type: Boolean },
+            is_retracted: { type: Boolean },
+            is_spoiler: { type: Boolean },
+            is_spoiler_visible: { type: Boolean },
+            message_type: { type: String },
+            model: { type: Object },
+            moderated_by: { type: String },
+            moderation_reason: { type: String },
+            msgid: { type: String },
+            occupant_affiliation: { type: String },
+            occupant_role: { type: String },
+            oob_url: { type: String },
+            pretty_time: { type: String },
+            received: { type: String },
+            retractable: { type: Boolean },
+            sender: { type: String },
+            spoiler_hint: { type: String },
+            subject: { type: String },
+            time: { type: String },
+            username: { type: String },
+        }
+    }
+
+    render () {
+        const is_groupchat_message = (this.message_type === 'groupchat');
+        return html`
+            <div class="message chat-msg ${this.message_type} ${this.getExtraMessageClasses()}
+                        ${ this.is_me_message ? 'chat-msg--action' : '' }
+                        ${this.isFollowup() ? 'chat-msg--followup' : ''}"
+                    data-isodate="${this.time}" data-msgid="${this.msgid}" data-from="${this.from}" data-encrypted="${this.is_encrypted}">
+
+                ${ renderAvatar(this) }
+                <div class="chat-msg__content chat-msg__content--${this.sender} ${this.is_me_message ? 'chat-msg__content--action' : ''}">
+                    ${this.first_unread ? html`<div class="message date-separator"><hr class="separator"><span class="separator-text">{{{o.__('unread messages')}}}</span></div>` : '' }
+                    <span class="chat-msg__heading">
+                        ${ (this.is_me_message) ? html`
+                            <time timestamp="${this.time}" class="chat-msg__time">${this.pretty_time}</time>
+                            ${this.hats.map(hat => html`<span class="badge badge-secondary">${hat}</span>`)}
+                        ` : '' }
+                        <span class="chat-msg__author">${ this.is_me_message ? '**' : ''}${this.username}</span>
+                        ${ !this.is_me_message ? this.renderAvatarByline() : '' }
+                        ${ this.is_encrypted ? html`<span class="fa fa-lock"></span>` : '' }
+                    </span>
+                    <div class="chat-msg__body chat-msg__body--${this.message_type} ${this.received ? 'chat-msg__body--received' : '' } ${this.is_delayed ? 'chat-msg__body--delayed' : '' }">
+                        <div class="chat-msg__message">
+                            ${ this.is_retracted ? this.renderRetraction() : this.renderMessageText() }
+                        </div>
+                        ${ (this.received && !this.is_me_message && !is_groupchat_message) ? html`<span class="fa fa-check chat-msg__receipt"></span>` : '' }
+                        ${ (this.edited) ? html`<i title="${ i18n_edited }" class="fa fa-edit chat-msg__edit-modal" @click=${this.showMessageVersionsModal}></i>` : '' }
+                        <div class="chat-msg__actions">
+                            ${ this.editable ?
+                                html`<button class="chat-msg__action chat-msg__action-edit" title="${i18n_edit_message}">
+                                    <fa-icon class="fas fa-pencil-alt" path-prefix="/node_modules" color="var(--text-color-lighten-15-percent)" size="1em"></fa-icon>
+                                </button>` : '' }
+                            ${ renderRetractionLink(this) }
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    static openChatRoomFromURIClicked (ev) {
+        ev.preventDefault();
+        api.rooms.open(ev.target.href);
+    }
+
+    registerClickHandlers () {
+        const els = this.querySelectorAll('a.open-chatroom');
+        Array.from(els).forEach(el => el.addEventListener('click', ev => Message.openChatRoomFromURIClicked(ev), false));
+    }
+
+    createRenderRoot () {
+        // Render without the shadow DOM
+        return this;
+    }
+
+    isFollowup () {
+        const messages = this.model.collection.models;
+        const idx = messages.indexOf(this.model);
+        const prev_model = idx ? messages[idx-1] : null;
+        if (prev_model === null) {
+            return false;
+        }
+        const date = dayjs(this.time);
+        return this.from === prev_model.get('from') &&
+            !this.is_me_message &&
+            !u.isMeCommand(prev_model.getMessageText()) &&
+            this.message_type !== 'info' &&
+            prev_model.get('type') !== 'info' &&
+            date.isBefore(dayjs(prev_model.get('time')).add(10, 'minutes')) &&
+            this.is_encrypted === prev_model.get('is_encrypted');
+    }
+
+
+    getExtraMessageClasses () {
+        const extra_classes = [
+            ...(this.is_delayed ? ['delayed'] : []),
+            ...(this.is_retracted ? ['chat-msg--retracted'] : [])
+        ];
+        if (this.message_type === 'groupchat') {
+            this.occupant_role && extra_classes.push(this.occupant_role);
+            this.occupant_affiliation && extra_classes.push(this.occupant_affiliation);
+            if (this.sender === 'them' && this.has_mentions) {
+                extra_classes.push('mentioned');
+            }
+        }
+        this.correcting && extra_classes.push('correcting');
+        return extra_classes.filter(c => c).join(" ");
+    }
+
+    getRetractionText () {
+        if (this.message_type === 'groupchat' && this.moderated_by) {
+            const retracted_by_mod = this.moderated_by;
+            const chatbox = this.model.collection.chatbox;
+            if (!this.model.mod) {
+                this.model.mod =
+                    chatbox.occupants.findOccupant({'jid': retracted_by_mod}) ||
+                    chatbox.occupants.findOccupant({'nick': Strophe.getResourceFromJid(retracted_by_mod)});
+            }
+            const modname = this.model.mod ? this.model.mod.getDisplayName() : 'A moderator';
+            return __('%1$s has removed this message', modname);
+        } else {
+            return __('%1$s has removed this message', this.model.getDisplayName());
+        }
+    }
+
+    renderRetraction () {
+        const retraction_text = this.is_retracted ? this.getRetractionText() : null;
+        return html`
+            <div>${retraction_text}</div>
+            ${ this.moderation_reason ? html`<q class="chat-msg--retracted__reason">${this.moderation_reason}</q>` : '' }
+        `;
+    }
+
+    renderMessageText () {
+        const tpl_spoiler_hint = html`
+            <div class="chat-msg__spoiler-hint">
+                <span class="spoiler-hint">${this.spoiler_hint}</span>
+                <a class="badge badge-info spoiler-toggle" href="#" @click=${this.toggleSpoilerMessage}>
+                    <i class="fa ${this.is_spoiler_visible ? 'fa-eye-slash' : 'fa-eye'}"></i>
+                    ${ this.is_spoiler_visible ? i18n_show_less : i18n_show }
+                </a>
+            </div>
+        `;
+        const spoiler_classes = this.is_spoiler ? `spoiler ${this.is_spoiler_visible ? '' : 'collapsed'}` : '';
+        return html`
+            ${ this.is_spoiler ? tpl_spoiler_hint : '' }
+            ${ this.subject ? html`<div class="chat-msg__subject">${this.subject}</div>` : '' }
+            <div class="chat-msg__text ${this.is_only_emojis ? 'chat-msg__text--larger' : ''} ${spoiler_classes}">${renderBodyText(this)}</div>
+            ${ this.oob_url ? html`<div class="chat-msg__media">${u.getOOBURLMarkup(_converse, this.oob_url)}</div>` : '' }
+        `;
+    }
+
+    renderAvatarByline () {
+        return html`
+            ${ this.hats.map(role => html`<span class="badge badge-secondary">${role}</span>`) }
+            <time timestamp="${this.time}" class="chat-msg__time">${this.pretty_time}</time>
+        `;
+    }
+
+    showMessageVersionsModal (ev) {
+        ev.preventDefault();
+        if (this.message_versions_modal === undefined) {
+            this.message_versions_modal = new MessageVersionsModal({'model': this.model});
+        }
+        this.message_versions_modal.show(ev);
+    }
+
+    toggleSpoilerMessage (ev) {
+        ev?.preventDefault();
+        this.model.save({'is_spoiler_visible': !this.model.get('is_spoiler_visible')});
+    }
+}
+
+customElements.define('converse-chat-message', Message);

src/converse-chatview.js

@@ -11,7 +11,6 @@ import tpl_chatbox from "templates/chatbox.js";
 import tpl_chatbox_head from "templates/chatbox_head.js";
 import tpl_chatbox_message_form from "templates/chatbox_message_form.html";
 import tpl_help_message from "templates/help_message.html";
-import tpl_info from "templates/info.html";
 import tpl_new_day from "templates/new_day.html";
 import tpl_spinner from "templates/spinner.html";
 import tpl_spoiler_button from "templates/spoiler_button.html";
@@ -175,7 +174,6 @@ converse.plugins.add('converse-chatview', {
                 'click .chatbox-navback': 'showControlBox',
                 'click .new-msgs-indicator': 'viewUnreadMessages',
                 'click .send-button': 'onFormSubmitted',
-                'click .spoiler-toggle': 'toggleSpoilerMessage',
                 'click .toggle-call': 'toggleCall',
                 'click .toggle-clear': 'clearMessages',
                 'click .toggle-compose-spoiler': 'toggleComposeSpoilerMessage',
@@ -499,20 +497,6 @@ converse.plugins.add('converse-chatview', {
                 return this;
             },
 
-            showChatEvent (message) {
-                const isodate = (new Date()).toISOString();
-                this.msgs_container.insertAdjacentHTML(
-                    'beforeend',
-                    tpl_info({
-                        'extra_classes': 'chat-event',
-                        'message': message,
-                        'isodate': isodate,
-                    }));
-                this.insertDayIndicator(this.msgs_container.lastElementChild);
-                this.scrollDown();
-                return isodate;
-            },
-
             addSpinner (append=false) {
                 if (this.el.querySelector('.spinner') === null) {
                     if (append) {
@@ -1150,31 +1134,6 @@ converse.plugins.add('converse-chatview', {
                 this.focus();
             },
 
-            toggleSpoilerMessage (ev) {
-                if (ev && ev.preventDefault) {
-                    ev.preventDefault();
-                }
-                const toggle_el = ev.target,
-                    icon_el = toggle_el.firstElementChild;
-
-                u.slideToggleElement(
-                    toggle_el.parentElement.parentElement.querySelector('.spoiler')
-                );
-                if (toggle_el.getAttribute("data-toggle-state") == "closed") {
-                    toggle_el.textContent = 'Show less';
-                    icon_el.classList.remove("fa-eye");
-                    icon_el.classList.add("fa-eye-slash");
-                    toggle_el.insertAdjacentElement('afterBegin', icon_el);
-                    toggle_el.setAttribute("data-toggle-state", "open");
-                } else {
-                    toggle_el.textContent = 'Show more';
-                    icon_el.classList.remove("fa-eye-slash");
-                    icon_el.classList.add("fa-eye");
-                    toggle_el.insertAdjacentElement('afterBegin', icon_el);
-                    toggle_el.setAttribute("data-toggle-state", "closed");
-                }
-            },
-
             onPresenceChanged (item) {
                 const show = item.get('show'),
                       fullname = this.model.getDisplayName();

src/converse-message-view.js

@@ -3,14 +3,15 @@
  * @copyright 2020, the Converse.js contributors
  * @license Mozilla Public License (MPLv2)
  */
+import "./components/message.js";
 import "./utils/html";
 import "@converse/headless/converse-emoji";
 import URI from "urijs";
 import filesize from "filesize";
 import log from "@converse/headless/log";
 import tpl_file_progress from "templates/file_progress.html";
-import tpl_info from "templates/info.html";
-import tpl_message from "templates/message.html";
+import tpl_info from "templates/info.js";
+import tpl_message from "templates/message.js";
 import tpl_message_versions_modal from "templates/message_versions_modal.js";
 import tpl_spinner from "templates/spinner.html";
 import xss from "xss/dist/xss";
@@ -112,7 +113,6 @@ converse.plugins.add('converse-message-view', {
                     this.debouncedRender();
                 });
                 this.listenTo(this.model, 'vcard:change', this.debouncedRender);
-                this.debouncedRender();
             },
 
             async render () {
@@ -141,22 +141,7 @@ converse.plugins.add('converse-message-view', {
                 if (this.model.changed.progress) {
                     return this.renderFileUploadProgresBar();
                 }
-                // TODO: We can remove this once we render messages via lit-html
-                const isValidChange = prop => Object.prototype.hasOwnProperty.call(this.model.changed, prop);
-                const props = [
-                    'correcting',
-                    'editable',
-                    'error',
-                    'message',
-                    'moderated',
-                    'received',
-                    'retracted',
-                    'type',
-                    'upload',
-                ];
-                if (props.filter(isValidChange).length) {
-                    await this.debouncedRender();
-                }
+                await this.debouncedRender();
                 if (edited) {
                     this.onMessageEdited();
                 }
@@ -244,8 +229,6 @@ converse.plugins.add('converse-message-view', {
                 await api.waitUntil('emojisInitialized');
                 const time = dayjs(this.model.get('time'));
                 const is_retracted = this.model.get('retracted') || this.model.get('moderated') === 'retracted';
-                const may_be_moderated = this.model.get('type') === 'groupchat' && await this.model.mayBeModerated();
-                const retractable= !is_retracted && (this.model.mayBeRetracted() || may_be_moderated);
                 const is_groupchat_message = this.model.get('type') === 'groupchat';
 
                 let hats = [];
@@ -258,42 +241,40 @@ converse.plugins.add('converse-message-view', {
                     }
                 }
 
-                const msg = u.stringToElement(tpl_message(
+                render(tpl_message(
                     Object.assign(
                         this.model.toJSON(), {
-                         __,
-                        hats,
-                        is_groupchat_message,
-                        is_retracted,
-                        retractable,
                         'extra_classes': this.getExtraMessageClasses(),
                         'is_me_message': this.model.isMeCommand(),
-                        'label_show': __('Show more'),
+                        'model': this.model,
                         'occupant': this.model.occupant,
                         'pretty_time': time.format(api.settings.get('time_format')),
                         'retraction_text': is_retracted ? this.getRetractionText() : null,
                         'time': time.toISOString(),
-                        'username': this.model.getDisplayName()
+                        'username': this.model.getDisplayName(),
+                        hats,
+                        is_groupchat_message,
+                        is_retracted
                     })
-                ));
-
-                const url = this.model.get('oob_url');
-                url && render(this.transformOOBURL(url), msg.querySelector('.chat-msg__media'));
-
-                if (!is_retracted) {
-                    const text = this.model.getMessageText();
-                    const msg_content = msg.querySelector('.chat-msg__text');
-                    if (text && text !== url) {
-                        msg_content.innerHTML = await this.transformBodyText(text);
-                        if (api.settings.get('show_images_inline')) {
-                            u.renderImageURLs(_converse, msg_content).then(() => this.triggerRendered());
-                        }
-                    }
-                }
-                if (this.model.get('type') !== 'headline') {
-                    this.renderAvatar(msg);
-                }
-                this.replaceElement(msg);
+                ), this.el);
+
+                // const url = this.model.get('oob_url');
+                // url && render(this.transformOOBURL(url), msg.querySelector('.chat-msg__media'));
+
+                // if (!is_retracted) {
+                //     const text = this.model.getMessageText();
+                //     const msg_content = msg.querySelector('.chat-msg__text');
+                //     if (text && text !== url) {
+                //         msg_content.innerHTML = await this.transformBodyText(text);
+                //         if (api.settings.get('show_images_inline')) {
+                //             u.renderImageURLs(_converse, msg_content).then(() => this.triggerRendered());
+                //         }
+                //     }
+                // }
+                // if (this.model.get('type') !== 'headline') {
+                //     this.renderAvatar(msg);
+                // }
+                // this.replaceElement(msg);
                 this.triggerRendered();
             },
 
@@ -306,13 +287,13 @@ converse.plugins.add('converse-message-view', {
             },
 
             renderInfoMessage () {
-                const msg = u.stringToElement(
+                render(
                     tpl_info(Object.assign(this.model.toJSON(), {
                         'extra_classes': 'chat-info',
                         'isodate': dayjs(this.model.get('time')).toISOString()
-                    }))
+                    })),
+                    this.el
                 );
-                return this.replaceElement(msg);
             },
 
             getRetractionText () {

src/converse-muc-views.js

@@ -17,7 +17,6 @@ import tpl_chatroom_destroyed from "templates/chatroom_destroyed.html";
 import tpl_chatroom_disconnect from "templates/chatroom_disconnect.html";
 import tpl_chatroom_head from "templates/chatroom_head.js";
 import tpl_chatroom_nickname_form from "templates/chatroom_nickname_form.html";
-import tpl_info from "templates/info.html";
 import tpl_list_chatrooms_modal from "templates/list_chatrooms_modal.js";
 import tpl_muc_config_form from "templates/muc_config_form.js";
 import tpl_muc_invite_modal from "templates/muc_invite_modal.js";
@@ -1688,18 +1687,6 @@ converse.plugins.add('converse-muc-views', {
                 return _converse.ChatBoxView.prototype.insertMessage.call(this, view);
             },
 
-            insertNotification (message) {
-                this.removeEmptyHistoryFeedback();
-                this.msgs_container.insertAdjacentHTML(
-                    'beforeend',
-                    tpl_info({
-                        'isodate': (new Date()).toISOString(),
-                        'extra_classes': 'chat-event',
-                        'message': message
-                    })
-                );
-            },
-
             onOccupantAdded (occupant) {
                 if (occupant.get('jid') === _converse.bare_jid) {
                     this.renderHeading();

src/headless/utils/core.js

@@ -463,16 +463,6 @@ u.triggerEvent = function (el, name, type="Event", bubbles=true, cancelable=true
     el.dispatchEvent(evt);
 };
 
-u.geoUriToHttp = function(text, geouri_replacement) {
-    const regex = /geo:([\-0-9.]+),([\-0-9.]+)(?:,([\-0-9.]+))?(?:\?(.*))?/g;
-    return text.replace(regex, geouri_replacement);
-};
-
-u.httpToGeoUri = function(text, _converse) {
-    const replacement = 'geo:$1,$2';
-    return text.replace(_converse.api.settings.get("geouri_regex"), replacement);
-};
-
 u.getSelectValues = function (select) {
     const result = [];
     const options = select && select.options;

src/templates/avatar.js

@@ -1,5 +1,6 @@
 import { html } from "lit-html";
 
 export default  (o) => html`
-    <img alt="${o.alt_text}" class="avatar align-self-center ${o.extra_classes}"
-            height="${o.height}" width="${o.width}" src="data:${o.image_type};base64,${o.image}"/>`;
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="${o.classes}" width="${o.width}" height="${o.height}">
+        <image width="${o.width}" height="${o.height}" preserveAspectRatio="xMidYMid meet" xlink:href="${o.image}"/>
+    </svg>`;

src/templates/directives/avatar.js

@@ -0,0 +1,25 @@
+import tpl_avatar from "templates/avatar.svg";
+import { directive, html } from "lit-html";
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+
+
+export const renderAvatar = directive(o => part => {
+    if (o.type === 'headline' || o.is_me_message) {
+        part.setValue('');
+        return;
+    }
+
+    if (o.model.vcard) {
+        const data = {
+            'classes': 'avatar chat-msg__avatar',
+            'width': 36,
+            'height': 36,
+        }
+        const image_type = o.model.vcard.get('image_type');
+        const image = o.model.vcard.get('image');
+        data['image'] = "data:" + image_type + ";base64," + image;
+
+        // TODO: XSS
+        part.setValue(html`${unsafeHTML(tpl_avatar(data))}`);
+    }
+});

src/templates/directives/body.js

@@ -0,0 +1,204 @@
+import URI from "urijs";
+import log from '@converse/headless/log';
+import tpl_avatar from "templates/avatar.js";
+import xss from "xss/dist/xss";
+import { _converse, api, converse } from  "@converse/headless/converse-core";
+import { directive, html } from "lit-html";
+import { isString } from "lodash";
+
+const u = converse.env.utils;
+
+
+function onTagFoundDuringXSSFilter (tag, html, options) {
+    /* This function gets called by the XSS library whenever it finds
+     * what it thinks is a new HTML tag.
+     *
+     * It thinks that something like <https://example.com> is an HTML
+     * tag and then escapes the <> chars.
+     *
+     * We want to avoid this, because it prevents these URLs from being
+     * shown properly (whithout the trailing &gt;).
+     *
+     * The URI lib correctly trims a trailing >, but not a trailing &gt;
+     */
+    if (options.isClosing) {
+        // Closing tags don't match our use-case
+        return;
+    }
+    const uri = new URI(tag);
+    const protocol = uri.protocol().toLowerCase();
+    if (!["https", "http", "xmpp", "ftp"].includes(protocol)) {
+        // Not a URL, the tag will get filtered as usual
+        return;
+    }
+    if (uri.equals(tag) && `<${tag}>` === html.toLocaleLowerCase()) {
+        // We have something like <https://example.com>, and don't want
+        // to filter it.
+        return html;
+    }
+}
+
+
+class Markup extends String {
+
+    constructor (data) {
+        super();
+        this.markup = data.markup;
+        this.text = data.text;
+    }
+
+    get length () {
+        return this.text.length;
+    }
+
+    toString () {
+        return "" + this.text;
+    }
+
+    textOf () {
+        return this.toString();
+    }
+}
+
+
+class MessageBodyRenderer extends String {
+
+    constructor (component) {
+        super();
+        this.text = component.model.getMessageText();
+        this.model = component.model;
+        this.component = component;
+    }
+
+    async transform () {
+        /**
+         * Synchronous event which provides a hook for transforming a chat message's body text
+         * before the default transformations have been applied.
+         * @event _converse#beforeMessageBodyTransformed
+         * @param { _converse.Message } model - The model representing the message
+         * @param { string } text - The message text
+         * @example _converse.api.listen.on('beforeMessageBodyTransformed', (view, text) => { ... });
+         */
+        await api.trigger('beforeMessageBodyTransformed', this.model, this.text, {'Synchronous': true});
+
+        let text = xss.filterXSS(this.text, {'whiteList': {}, 'onTag': onTagFoundDuringXSSFilter});
+        text = this.component.is_me_message ? text.substring(4) : text;
+        text = u.geoUriToHttp(text, _converse.geouri_replacement);
+
+        const process = (text) => {
+            text = u.addEmoji(text);
+            return addMentionsMarkup(text, this.model.get('references'), this.model.collection.chatbox);
+        }
+        const list = await Promise.all(addHyperlinks(text));
+        this.list = list.reduce((acc, i) => isString(i) ? [...acc, ...process(i)] : [...acc, i], []);
+        /**
+         * Synchronous event which provides a hook for transforming a chat message's body text
+         * after the default transformations have been applied.
+         * @event _converse#afterMessageBodyTransformed
+         * @param { _converse.Message } model - The model representing the message
+         * @param { string } text - The message text
+         * @example _converse.api.listen.on('afterMessageBodyTransformed', (view, text) => { ... });
+         */
+        await api.trigger('afterMessageBodyTransformed', this.model, text, {'Synchronous': true});
+
+        return this.list;
+    }
+
+    async render () {
+        return html`${await this.transform()}`
+    }
+
+    get length () {
+        return this.text.length;
+    }
+
+    toString () {
+        return "" + this.text;
+    }
+
+    textOf () {
+        return this.toString();
+    }
+}
+
+const tpl_mention_with_nick = (o) => html`<span class="mention mention--self badge badge-info">${o.mention}</span>`;
+const tpl_mention = (o) => html`<span class="mention">${o.mention}</span>`;
+
+
+function addHyperlinks (text) {
+    const objs = [];
+    const parse_options = { 'start': /\b(?:([a-z][a-z0-9.+-]*:\/\/)|xmpp:|mailto:|www\.)/gi };
+    try {
+        URI.withinString(text, (url, start, end) => {
+            objs.push({url, start, end})
+            return url;
+        } , parse_options);
+    } catch (error) {
+        log.debug(error);
+        return [text];
+    }
+    let list = [];
+    objs.sort((a, b) => b.start - a.start)
+        .forEach(url_obj => {
+            const new_list = [
+                text.slice(0, url_obj.start),
+                u.isImageURL(text) ? u.convertToImageTag(text) : u.convertUrlToHyperlink(text),
+                text.slice(url_obj.end),
+                ...list
+            ];
+            list = new_list.filter(i => i);
+            text = text.slice(0, url_obj.start);
+        });
+    return list;
+}
+
+
+function addMentionsMarkup (text, references, chatbox) {
+    if (chatbox.get('message_type') !== 'groupchat') {
+        return [text];
+    }
+    const nick = chatbox.get('nick');
+    let list = [];
+    references
+        .sort((a, b) => b.begin - a.begin)
+        .forEach(ref => {
+            const mention = text.slice(ref.begin, ref.end)
+            chatbox;
+            if (mention === nick) {
+                list = [text.slice(0, ref.begin), new Markup(mention, tpl_mention_with_nick({mention})), text.slice(ref.end),  ...list];
+            } else {
+                list = [text.slice(0, ref.begin), new Markup(mention, tpl_mention({mention})), text.slice(ref.end), ...list];
+            }
+            text = text.slice(0, ref.begin);
+        });
+    return list;
+}
+
+
+export const renderBodyText = directive(component => async part => {
+    const model = component.model;
+    const renderer = new MessageBodyRenderer(component);
+    part.setValue(await renderer.render());
+    part.commit();
+    model.collection && model.collection.trigger('rendered', model);
+    component.registerClickHandlers();
+});
+
+
+export const renderAvatar = directive(o => part => {
+    if (o.type === 'headline' || o.is_me_message) {
+        part.setValue('');
+        return;
+    }
+    if (o.model.vcard) {
+        const data = {
+            'classes': 'avatar chat-msg__avatar',
+            'width': 36,
+            'height': 36,
+        }
+        const image_type = o.model.vcard.get('image_type');
+        const image = o.model.vcard.get('image');
+        data['image'] = "data:" + image_type + ";base64," + image;
+        part.setValue(tpl_avatar(data));
+    }
+});

src/templates/directives/retraction.js

@@ -0,0 +1,23 @@
+import { directive, html } from "lit-html";
+import { __ } from '@converse/headless/i18n';
+
+
+const i18n_retract_message = __('Retract this message');
+const tpl_retract = html`
+    <button class="chat-msg__action chat-msg__action-retract" title="${i18n_retract_message}">
+        <fa-icon class="fas fa-trash-alt" path-prefix="/node_modules" color="var(--text-color-lighten-15-percent)" size="1em"></fa-icon>
+    </button>
+`;
+
+
+export const renderRetractionLink = directive(o => async part => {
+    const may_be_moderated = o.model.get('type') === 'groupchat' && await o.model.mayBeModerated();
+    const retractable = !o.is_retracted && (o.model.mayBeRetracted() || may_be_moderated);
+
+    if (retractable) {
+        part.setValue(tpl_retract);
+    } else {
+        part.setValue('');
+    }
+    part.commit();
+});

src/templates/info.html

@@ -1,13 +0,0 @@
-<div class="message chat-info {{{o.extra_classes}}}" data-isodate="{{{o.isodate}}}" {[ if (o.data_name) { ]} data-{{{o.data_name}}}="{{{o.data_value}}}"{[ } ]}>
-{[ if (o.render_message) {
-    // XXX: Should only ever be rendered if the message text has been sanitized already
-]}
-    {{o.message}}
-{[ } else { ]}
-<div class="chat-info__message">{{{o.message}}}</div>
-    {[ if (o.reason) { ]}<q class="reason">{{{o.reason}}}</q>{[ } ]}
-{[ } ]}
-{[ if (o.retry) { ]}
-    <a class="retry">Retry</a>
-{[ } ]}
-</div>

src/templates/info.js

@@ -0,0 +1,17 @@
+import { html } from "lit-html";
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { __ } from '@converse/headless/i18n';
+
+const i18n_retry = __('Retry');
+
+
+export default (o) => html`
+    <div class="message chat-info ${o.extra_classes}"
+         data-isodate="${o.isodate}"
+         data-type="${o.data_name}"
+         data-value="${o.data_value}">
+
+        ${ o.render_message ? unsafeHTML(o.message) : o.message }
+        ${ o.retry ? html`<a class="retry" @click=${o.onRetryClicked}>${i18n_retry}</a>` : '' }
+    </div>
+`;

src/templates/message.html

@@ -1,54 +0,0 @@
-<div class="message chat-msg {{{o.type}}} {{{o.extra_classes}}} {[ if (o.is_me_message) { ]} chat-msg--action {[ } ]}"
-        data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}" data-from="{{{o.from}}}" data-encrypted="{{{o.is_encrypted}}}">
-    {[ if (o.type !== 'headline' && !o.is_me_message) { ]}
-    <canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
-    {[ } ]}
-    <div class="chat-msg__content chat-msg__content--{{{o.sender}}} {{{o.is_me_message ? 'chat-msg__content--action' : ''}}}">
-        {[ if (o.first_unread) { ]}
-            <div class="message date-separator"><hr class="separator"><span class="separator-text">{{{o.__('unread messages')}}}</span></div>
-        {[ } ]}
-        <span class="chat-msg__heading">
-            {[ if (o.is_me_message) { ]}<time timestamp="{{{o.isodate}}}" class="chat-msg__time">{{{o.pretty_time}}}</time>{[ } ]}
-            <span class="chat-msg__author">{[ if (o.is_me_message) { ]}**{[ }; ]}{{{o.username}}}</span>
-            {[ if (!o.is_me_message) { ]}
-                {[o.hats.forEach(function (hat) { ]} <span class="badge badge-secondary">{{{hat.title}}}</span> {[ }); ]}
-                <time timestamp="{{{o.isodate}}}" class="chat-msg__time">{{{o.pretty_time}}}</time>
-            {[ } ]}
-            {[ if (o.is_encrypted) { ]}<span class="fa fa-lock"></span>{[ } ]}
-        </span>
-        <div class="chat-msg__body chat-msg__body--{{{o.type}}} {{{o.received ? 'chat-msg__body--received' : '' }}} {{{o.is_delayed ? 'chat-msg__body--delayed' : '' }}}">
-            <div class="chat-msg__message">
-                {[ if (o.is_retracted) { ]}
-                    <div>{{{o.retraction_text}}}</div>
-                    {[ if (o.moderation_reason) { ]}<q class="chat-msg--retracted__reason">{{{o.moderation_reason}}}</q>{[ } ]}
-                {[ } else { ]}
-                    {[ if (o.is_spoiler) { ]}
-                        <div class="chat-msg__spoiler-hint">
-                            <span class="spoiler-hint">{{{o.spoiler_hint}}}</span>
-                            <a class="badge badge-info spoiler-toggle" data-toggle-state="closed" href="#"><i class="fa fa-eye"></i>{{{o.label_show}}}</a>
-                        </div>
-                    {[ } ]}
-
-                    {[ if (o.subject) { ]}
-                        <div class="chat-msg__subject">{{{ o.subject }}}</div>
-                    {[ } ]}
-                    <div class="chat-msg__text
-                        {[ if (o.is_only_emojis) { ]} chat-msg__text--larger{[ } ]}
-                        {[ if (o.is_spoiler) { ]} spoiler collapsed{[ } ]}"><!-- message gets added here via renderMessage --></div>
-                    <div class="chat-msg__media"></div>
-                    <div class="chat-msg__error">{{{o.error}}}</div>
-                {[ } ]}
-            </div>
-            {[ if (o.received && !o.is_me_message && !o.is_groupchat_message) { ]} <span class="fa fa-check chat-msg__receipt"></span> {[ } ]}
-            {[ if (o.edited) { ]} <i title="{{{o.__('This message has been edited')}}}" class="fa fa-edit chat-msg__edit-modal"></i> {[ } ]}
-            <div class="chat-msg__actions">
-                {[ if (o.editable) { ]}
-                    <button class="chat-msg__action chat-msg__action-edit fa fa-pencil-alt" title="{{{o.__('Edit this message')}}}"></button>
-                {[ } ]}
-                {[ if (o.retractable) { ]}
-                    <button class="chat-msg__action chat-msg__action-retract fa fa-trash-alt" title="{{{o.__('Retract this message')}}}"></button>
-                {[ } ]}
-            </div>
-        </div>
-    </div>
-</div>

src/templates/message.js

@@ -0,0 +1,35 @@
+import { html } from 'lit-element';
+
+
+export default (o) => html`
+    <converse-chat-message
+        .model=${o.model}
+        .hats=${o.hats}
+        ?retractable=${o.retractable}
+        ?correcting=${o.model.get('correcting')}
+        ?editable=${o.model.get('editable')}
+        ?has_mentions=${o.has_mentions}
+        ?is_delayed=${o.model.get('is_delayed')}
+        ?is_encrypted=${o.model.get('is_encrypted')}
+        ?is_me_message=${o.is_me_message}
+        ?is_only_emojis=${o.model.get('is_only_emojis')}
+        ?is_retracted=${o.is_retracted}
+        ?is_spoiler=${o.model.get('is_spoiler')}
+        ?is_spoiler_visible=${o.model.get('is_spoiler_visible')}
+        from=${o.model.get('from')}
+        moderated_by=${o.model.get('moderated_by') || ''}
+        moderation_reason=${o.model.get('moderation_reason') || ''}
+        msgid=${o.model.get('msgid')}
+        occupant_affiliation=${o.model.occupant ? o.model.occupant.get('affiliation') : ''}
+        occupant_role=${o.model.occupant ? o.model.occupant.get('role') : ''}
+        oob_url=${o.model.get('oob_url') || ''}
+        pretty_time=${o.pretty_time}
+        pretty_type=${o.model.get('pretty_type')}
+        received=${o.model.get('received')}
+        sender=${o.model.get('sender')}
+        spoiler_hint=${o.model.get('spoiler_hint') || ''}
+        subject=${o.model.get('subject') || ''}
+        time=${o.model.get('time')}
+        message_type=${o.model.get('type')}
+        username=${o.username}></converse-chat-message>
+`;

src/utils/html.js

@@ -4,7 +4,6 @@
  * @description This is the DOM/HTML utilities module.
  */
 import URI from "urijs";
-import { isFunction } from "lodash";
 import log from '@converse/headless/log';
 import sizzle from "sizzle";
 import tpl_audio from  "../templates/audio.js";
@@ -20,8 +19,9 @@ import tpl_image from "../templates/image.js";
 import tpl_select_option from "../templates/select_option.html";
 import tpl_video from "../templates/video.js";
 import u from "../headless/utils/core";
+import { html } from "lit-html";
+import { isFunction } from "lodash";
 
-const URL_REGEX = /\b(https?\:\/\/|www\.|https?:\/\/www\.)[^\s<>]{2,200}\b\/?/g;
 const APPROVED_URL_PROTOCOLS = ['http', 'https', 'xmpp', 'mailto'];
 
 function getAutoCompleteProperty (name, options) {
@@ -96,7 +96,7 @@ function renderAudioURL (_converse, uri) {
 
 function renderImageURL (_converse, uri) {
     if (!_converse.api.settings.get('show_images_inline')) {
-        return u.convertUriToHyperlink(uri);
+        return u.convertURIoHyperlink(uri);
     }
     const { __ } = _converse;
     return tpl_image({
@@ -179,60 +179,6 @@ function loadImage (url) {
 }
 
 
-async function renderImage (img_url, link_url, el, callback) {
-    if (u.isImageURL(img_url)) {
-        let img;
-        try {
-            img = await loadImage(img_url);
-        } catch (e) {
-            log.error(e);
-            return callback();
-        }
-        sizzle(`a[href="${link_url}"]`, el).forEach(a => {
-            a.innerHTML = "";
-            u.addClass('chat-image__link', a);
-            u.addClass('chat-image', img);
-            u.addClass('img-thumbnail', img);
-            a.insertAdjacentElement('afterBegin', img);
-        });
-    }
-    callback();
-}
-
-
-/**
- * Returns a Promise which resolves once all images have been loaded.
- * @method u#renderImageURLs
- * @param { _converse }
- * @param { HTMLElement }
- * @returns { Promise }
- */
-u.renderImageURLs = function (_converse, el) {
-    if (!_converse.api.settings.get('show_images_inline')) {
-        return Promise.resolve();
-    }
-    const list = el.textContent.match(URL_REGEX) || [];
-    return Promise.all(
-        list.map(url =>
-            new Promise(resolve => {
-                let image_url = getURI(url);
-                if (['imgur.com', 'pbs.twimg.com'].includes(image_url.hostname()) && !u.isImageURL(url)) {
-                    const format = (image_url.hostname() === 'pbs.twimg.com') ? image_url.search(true).format : 'png';
-                    image_url = image_url.removeSearch(/.*/).toString() + `.${format}`;
-                    renderImage(image_url, url, el, resolve);
-                } else {
-                    renderImage(url, url, el, resolve);
-                }
-            })
-        )
-    )
-};
-
-
-u.renderNewLines = function (text) {
-    return text.replace(/\n\n+/g, '<br/><br/>').replace(/\n/g, '<br/>');
-};
-
 u.calculateElementHeight = function (el) {
     /* Return the height of the passed in DOM element,
      * based on the heights of its children.
@@ -364,42 +310,39 @@ u.escapeHTML = function (string) {
         .replace(/"/g, "&quot;");
 };
 
-
-u.addMentionsMarkup = function (text, references, chatbox) {
-    if (chatbox.get('message_type') !== 'groupchat') {
-        return text;
+u.convertToImageTag = async function (url) {
+    const uri = getURI(url);
+    const img_url_without_ext = ['imgur.com', 'pbs.twimg.com'].includes(uri.hostname());
+    let src;
+    if (u.isImageURL(url) || img_url_without_ext) {
+        if (img_url_without_ext) {
+            const format = (uri.hostname() === 'pbs.twimg.com') ? uri.search(true).format : 'png';
+            src = uri.removeSearch(/.*/).toString() + `.${format}`;
+        } else {
+            src = url;
+        }
+        try {
+            await loadImage(src);
+        } catch (e) {
+            log.error(e);
+            return u.convertUrlToHyperlink(url);
+        }
+        return tpl_image({url, src});
     }
-    const nick = chatbox.get('nick');
-    references
-        .sort((a, b) => b.begin - a.begin)
-        .forEach(ref => {
-            const prefix = text.slice(0, ref.begin);
-            const offset = ((prefix.match(/&lt;/g) || []).length + (prefix.match(/&gt;/g) || []).length) * 3;
-            const begin = parseInt(ref.begin, 10) + parseInt(offset, 10);
-            const end = parseInt(ref.end, 10) + parseInt(offset, 10);
-            const mention = text.slice(begin, end)
-            chatbox;
-
-            if (mention === nick) {
-                text = text.slice(0, begin) + `<span class="mention mention--self badge badge-info">${mention}</span>` + text.slice(end);
-            } else {
-                text = text.slice(0, begin) + `<span class="mention">${mention}</span>` + text.slice(end);
-            }
-        });
-    return text;
-};
+}
+
 
-u.convertUriToHyperlink = function (uri, urlAsTyped) {
-    let normalizedUrl = uri.normalize()._string;
-    const pretty_url = uri._parts.urn ? normalizedUrl : uri.readable();
+u.convertURIoHyperlink = function (uri, urlAsTyped) {
+    let normalized_url = uri.normalize()._string;
+    const pretty_url = uri._parts.urn ? normalized_url : uri.readable();
     const visibleUrl = u.escapeHTML(urlAsTyped || pretty_url);
-    if (!uri._parts.protocol && !normalizedUrl.startsWith('http://') && !normalizedUrl.startsWith('https://')) {
-        normalizedUrl = 'http://' + normalizedUrl;
+    if (!uri._parts.protocol && !normalized_url.startsWith('http://') && !normalized_url.startsWith('https://')) {
+        normalized_url = 'http://' + normalized_url;
     }
     if (uri._parts.protocol === 'xmpp' && uri._parts.query === 'join') {
-        return `<a target="_blank" rel="noopener" class="open-chatroom" href="${normalizedUrl}">${visibleUrl}</a>`;
+        return html`<a target="_blank" rel="noopener" class="open-chatroom" href="${normalized_url}">${visibleUrl}</a>`;
     }
-    return `<a target="_blank" rel="noopener" href="${normalizedUrl}">${visibleUrl}</a>`;
+    return html`<a target="_blank" rel="noopener" href="${normalized_url}">${visibleUrl}</a>`;
 };
 
 function isProtocolApproved (protocol, safeProtocolsList = APPROVED_URL_PROTOCOLS) {
@@ -417,27 +360,23 @@ function isUrlValid (urlString) {
 }
 
 u.convertUrlToHyperlink = function (url) {
-    const urlWithProtocol = RegExp('^w{3}.', 'ig').test(url) ? `http://${url}` : url;
+    const http_url = RegExp('^w{3}.', 'ig').test(url) ? `http://${url}` : url;
     const uri = getURI(url);
-    if (uri !== null && isUrlValid(urlWithProtocol) && (isProtocolApproved(uri._parts.protocol) || !uri._parts.protocol)) {
-        const hyperlink = this.convertUriToHyperlink(uri, url);
-        return hyperlink;
+    if (uri !== null && isUrlValid(http_url) && (isProtocolApproved(uri._parts.protocol) || !uri._parts.protocol)) {
+        return this.convertURIoHyperlink(uri, url);
     }
     return url;
 };
 
-u.addHyperlinks = function (text) {
-    try {
-        const parse_options = {
-            'start': /\b(?:([a-z][a-z0-9.+-]*:\/\/)|xmpp:|mailto:|www\.)/gi
-        };
-        return URI.withinString(text, url => u.convertUrlToHyperlink(url), parse_options);
-    } catch (error) {
-        log.debug(error);
-        return text;
-    }
+u.geoUriToHttp = function(text, geouri_replacement) {
+    const regex = /geo:([\-0-9.]+),([\-0-9.]+)(?:,([\-0-9.]+))?(?:\?(.*))?/g;
+    return text.replace(regex, geouri_replacement);
 };
 
+u.httpToGeoUri = function(text, _converse) {
+    const replacement = 'geo:$1,$2';
+    return text.replace(_converse.api.settings.get("geouri_regex"), replacement);
+};
 
 u.slideInAllElements = function (elements, duration=300) {
     return Promise.all(Array.from(elements).map(e => u.slideIn(e, duration)));