Fixes infinite loop bug when appending .png to allowed image urls

CHANGES.md

@@ -4,6 +4,7 @@
 
 - #1083: Add support for XEP-0393 Message Styling
 - #2275: Allow punctuation to immediately precede a mention
+- #2400: Fixes infinite loop bug when appending .png to allowed image urls
 - Add support for XEP-0437 Room Activity Indicators see [muc-subscribe-to-rai](https://conversejs.org/docs/html/configuration.html#muc-subscribe-to-rai)
 - Bugfix: Use real JID in XEP-0372 references only when the MUC is non-anonymous
 - Bugfix: Connection protocol not updated based on XEP-0156 connection methods

spec/messages.js

@@ -730,6 +730,29 @@ describe("A Chat Message", function () {
         done();
     }));
 
+    it("will fall back to rendering URLs that match image_urls_regex as URLs",
+        mock.initConverse(
+            ['rosterGroupsFetched', 'chatBoxesFetched'], {
+                'show_images_inline': ['twimg.com'],
+                'image_urls_regex': /^https?:\/\/(www.)?(pbs\.twimg\.com\/)/i
+            },
+            async function (done, _converse) {
+
+        await mock.waitForRoster(_converse, 'current');
+        const message = "https://pbs.twimg.com/media/string?format=jpg&name=small";
+        const contact_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
+        await mock.openChatBoxFor(_converse, contact_jid);
+        const view = _converse.api.chatviews.get(contact_jid);
+        spyOn(view.model, 'sendMessage').and.callThrough();
+        mock.sendMessage(view, message);
+        expect(view.model.sendMessage).toHaveBeenCalled();
+        await u.waitUntil(() => view.el.querySelector('.chat-content .chat-msg'), 1000);
+        const msg = view.el.querySelector('.chat-content .chat-msg .chat-msg__text');
+        await u.waitUntil(() => msg.innerHTML.replace(/<!---->/g, '').trim() ==
+            `<a target="_blank" rel="noopener" href="https://pbs.twimg.com/media/string?format=jpg&amp;name=small">https://pbs.twimg.com/media/string?format=jpg&amp;name=small</a>`, 1000);
+        done();
+    }));
+
     it("will render the message time as configured",
             mock.initConverse(
                 ['rosterGroupsFetched', 'chatBoxesFetched'], {},

src/templates/directives/image.js

@@ -1,6 +1,6 @@
 import { converse } from "@converse/headless/core";
 import { directive, html } from "lit-html";
-
+import URI from "urijs";
 
 /**
  * lit-html directive which attempts to render an <img> element from a URL.
@@ -21,7 +21,10 @@ export const renderImage = directive((src, href, onLoad, onClick) => part => {
             // Before giving up and falling back to just rendering a hyperlink,
             // we attach `.png` and try one more time.
             // This works with some Imgur URLs
-            part.setValue(renderImage(`${src}.png`, href, onLoad, onClick));
+            const uri = new URI(src);
+            const filename = uri.filename();
+            uri.filename(`${filename}.png`);
+            part.setValue(renderImage(uri.toString(), href, onLoad, onClick));
             part.commit();
         }
     }