markdown: Render inline images as small lightbox previews in place.

Images added using the `![alt text](url)` syntax are rendered in a fixed
size, expandable via lightbox, exactly like the linked image previews,
except inline.

For drafts which are only rendered by the frontend markdown processor,
images are rendered as a regular link, for now.

Author: N-Shar-ma

web/src/compose.js

@@ -341,7 +341,10 @@ export function render_and_show_preview($preview_spinner, $preview_content_box,
             rendered_preview_html = rendered_content;
         }
 
-        $preview_content_box.html(util.clean_user_content_links(rendered_preview_html));
+        rendered_preview_html = util.make_inline_images_lightbox_previewable(rendered_preview_html);
+        rendered_preview_html = util.clean_user_content_links(rendered_preview_html);
+
+        $preview_content_box.html(rendered_preview_html);
         rendered_markdown.update_elements($preview_content_box);
     }
 

web/src/markdown.ts

@@ -709,6 +709,10 @@ export function parse({
         return "<br>\n";
     };
 
+    // Treat images as links, because only the backend markdown processor
+    // can handle them correctly.
+    renderer.image = renderer.link;
+
     function preprocess_code_blocks(src: string): string {
         return fenced_code.process_fenced_code(src);
     }

web/src/templates.js

@@ -110,10 +110,11 @@ Handlebars.registerHelper("tr", function (options) {
     return new Handlebars.SafeString(result);
 });
 
-Handlebars.registerHelper(
-    "rendered_markdown",
-    (content) => new Handlebars.SafeString(util.clean_user_content_links(content)),
-);
+Handlebars.registerHelper("rendered_markdown", (content) => {
+    content = util.make_inline_images_lightbox_previewable(content);
+    content = util.clean_user_content_links(content);
+    return new Handlebars.SafeString(content);
+});
 
 Handlebars.registerHelper("numberFormat", (number) => number.toLocaleString());
 

web/src/util.ts

@@ -300,6 +300,36 @@ export function canonicalize_stream_synonyms(text: string): string {
 
 let inertDocument: Document | undefined;
 
+export function make_inline_images_lightbox_previewable(html: string): string {
+    if (inertDocument === undefined) {
+        inertDocument = new DOMParser().parseFromString("", "text/html");
+    }
+    const template = inertDocument.createElement("template");
+    template.innerHTML = html;
+
+    for (const img of template.content.querySelectorAll("img")) {
+        if (img.parentElement?.tagName === "A") {
+            // skip images that are already previewable
+            continue;
+        }
+        const anchor = inertDocument.createElement("a");
+        const src = img.getAttribute("src");
+        if (src) {
+            anchor.setAttribute("href", src);
+        }
+        const alt = img.getAttribute("alt");
+        if (alt) {
+            anchor.setAttribute("title", alt);
+        }
+        anchor.append(img.cloneNode(true));
+        const span = inertDocument.createElement("span");
+        span.classList.add("message_inline_image", "true_inline");
+        span.append(anchor);
+        img.parentNode?.replaceChild(span, img);
+    }
+    return template.innerHTML;
+}
+
 export function clean_user_content_links(html: string): string {
     if (inertDocument === undefined) {
         inertDocument = new DOMParser().parseFromString("", "text/html");

web/styles/rendered_markdown.css

@@ -397,6 +397,10 @@
         }
     }
 
+    .message_inline_image.true_inline {
+        margin-bottom: unset;
+    }
+
     &.rtl .twitter-image,
     &.rtl .message_inline_image {
         margin-left: unset;
@@ -408,7 +412,8 @@
        formed with EDITED/MOVED markers and the
        timestamp when the first child of the rendered
        markdown is a media element. */
-    &:has(> .message_inline_image:first-child) {
+    &:has(> .message_inline_image:first-child),
+    &:has(> p:first-child > .message_inline_image) {
         align-self: center;
     }
 

web/tests/util.test.js

@@ -326,6 +326,17 @@ run_test("clean_user_content_links", () => {
     );
 });
 
+run_test("make_inline_images_lightbox_previewable", () => {
+    assert.equal(
+        util.make_inline_images_lightbox_previewable(
+            '<img src="/user_uploads/2/ae/7BJKQei4DMm0UDL7EBxECPL0/zebra.gif" alt="zebra">\n\n' +
+                '<span class="message_inline_image"><a href="/user_uploads/test.png" title="linked"><img src="/user_uploads/test.png" alt="linked"></a></span>',
+        ),
+        '<span class="message_inline_image true_inline"><a href="/user_uploads/2/ae/7BJKQei4DMm0UDL7EBxECPL0/zebra.gif" title="zebra"><img src="/user_uploads/2/ae/7BJKQei4DMm0UDL7EBxECPL0/zebra.gif" alt="zebra"></a></span>\n\n' +
+            '<span class="message_inline_image"><a href="/user_uploads/test.png" title="linked"><img src="/user_uploads/test.png" alt="linked"></a></span>',
+    );
+});
+
 run_test("filter_by_word_prefix_match", () => {
     const strings = ["stream-hyphen_underscore/slash", "three word stream"];
     const values = [0, 1];

web/third/marked/lib/marked.d.ts

@@ -10,6 +10,7 @@ export class Renderer {
     code: (code: string) => string;
     link: (href: string, title: string, text: string) => string;
     br: () => string;
+    image: (href: string, title: string, text: string) => string;
 }
 
 export type RegExpOrStub = RegExp | {