Add `converse-image` custom element

And use that to render images in unfurls.

This solves the issue of github URL unfurl images not having an image
extension and then being rendered as a hyperlink by `converse-rich-text`.

Instead, we know that it's supposed to be a url, so we just use `converse-image`.

src/plugins/muc-views/tests/unfurls.js

@@ -79,7 +79,6 @@ describe("A Groupchat Message", function () {
 
         const unfurl = await u.waitUntil(() => view.querySelector('converse-message-unfurl'));
         expect(unfurl.querySelector('.card-img-top').getAttribute('text')).toBe('https://conversejs.org/dist/images/custom_emojis/converse.png');
-        expect(unfurl.querySelector('.card-img-top a')?.getAttribute('href')).toBe('https://conversejs.org/dist/images/custom_emojis/converse.png');
         expect(unfurl.querySelector('.card-body')).toBe(null);
     }));
 

src/shared/chat/templates/unfurl.js

@@ -1,10 +1,5 @@
-import {
-    getURI,
-    isAudioURL,
-    isGIFURL,
-    isVideoURL,
-    isDomainAllowed
-} from '@converse/headless/utils/url.js';
+import 'shared/components/image.js';
+import { getURI, isGIFURL, isDomainAllowed } from '@converse/headless/utils/url.js';
 import { html } from 'lit';
 
 function isValidURL (url) {
@@ -16,23 +11,13 @@ function isValidImage (image) {
     return image && isDomainAllowed(image, 'allowed_image_domains') && isValidURL(image);
 }
 
-function shouldHideMediaURL (url) {
-    return url && (isGIFURL(url) || isVideoURL(url) || isAudioURL(url));
-}
-
 const tpl_url_wrapper = (o, wrapped_template) =>
-    o.url && isValidURL(o.url) && !isGIFURL(o.url)
+    o.url && isValidURL(o.url) && !isGIFURL(o.image)
         ? html`<a href="${o.url}" target="_blank" rel="noopener">${wrapped_template(o)}</a>`
         : wrapped_template(o);
 
 const tpl_image = o =>
-    html`<converse-rich-text
-        class="card-img-top"
-        text="${o.image}"
-        show_images
-        ?hide_media_urls=${shouldHideMediaURL(o.url)}
-        .onImgLoad=${o.onload}
-    ></converse-rich-text>`;
+    html`<converse-image class="card-img-top" text="${o.image}" href="${o.url}" .onImgLoad=${o.onload}></converse-image>`;
 
 export default o => {
     const show_image = isValidImage(o.image);

src/shared/components/image.js

@@ -0,0 +1,33 @@
+import tpl_gif from 'templates/gif.js';
+import tpl_image from 'templates/image.js';
+import { CustomElement } from './element.js';
+import { api } from "@converse/headless/core";
+import { filterQueryParamsFromURL, isGIFURL } from '@converse/headless/utils/url.js';
+
+
+export default class Image extends CustomElement {
+
+    static get properties () {
+        return {
+            'href': { type: String },
+            'onImgLoad': { type: Function },
+            'text': { type: String },
+        }
+    }
+
+    render () {
+        const filtered_url = filterQueryParamsFromURL(this.href);
+        if (isGIFURL(this.text) && this.shouldRenderMedia(this.text, 'image')) {
+            return tpl_gif(filtered_url);
+        } else {
+            return tpl_image({
+                'url': this.text,
+                'href': filtered_url,
+                'onClick': this.onImgClick,
+                'onLoad': this.onImgLoad
+            });
+        }
+    }
+}
+
+api.elements.define('converse-image', Image);

src/shared/rich-text.js

@@ -129,7 +129,6 @@ export class RichText extends String {
         media_urls.filter(o => !o.is_encrypted).forEach(url_obj => {
             const url_text = url_obj.url;
             const filtered_url = filterQueryParamsFromURL(url_text);
-
             let template;
             if (isGIFURL(url_text) && this.shouldRenderMedia(url_text, 'image')) {
                 template = tpl_gif(filtered_url, this.hide_media_urls);

src/shared/styles/messages.scss

@@ -299,7 +299,6 @@
                     display: none;
                 }
                 &.chat-msg--with-avatar .chat-msg__content {
-                    margin-left: 2.75rem;
                     width: 100%;
                 }
             }