From a5a37d138a34777d34baf5e1971ffa5d5b6164c6 Mon Sep 17 00:00:00 2001
From: ABevier <awbevier@gmail.com>
Date: Tue, 30 May 2023 19:55:41 -0400
Subject: [PATCH] fix markdown image rendering (#636)

---
 modules/ui/src/markdown/markdown.svelte | 26 +++++++++++++++++++++++--
 modules/ui/src/markdown/styles.css      |  1 +
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/modules/ui/src/markdown/markdown.svelte b/modules/ui/src/markdown/markdown.svelte
index 5bce419..c2fc5df 100644
--- a/modules/ui/src/markdown/markdown.svelte
+++ b/modules/ui/src/markdown/markdown.svelte
@@ -2,11 +2,13 @@
   import SvelteMarkdown from "svelte-markdown";
   import Link from "./link.svelte";
   import rst2html from "./rst2html";
-
   import "./styles.css";
+  import { onMount } from "svelte";
 
   export let source: { data: string; type: "md" | "rst" };
 
+  let markDownRoot: HTMLElement;
+
   export let hook = (node: HTMLElement): { destroy: () => void } => {
     console.log("hook", node);
     return {
@@ -21,11 +23,31 @@
   };
 
   $: html = source.type === "rst" ? rst2html(source.data) : "";
+
+  onMount(() => {
+    // Need to override the height/width STYLE with the old-school height/width ATTRIBUTE to make it work with the markdown
+    if (markDownRoot) {
+      const images = markDownRoot.querySelectorAll("img");
+      images.forEach((element: HTMLImageElement) => {
+        const height = element.getAttribute("height");
+        if (height) {
+          element.style.height = height;
+        }
+
+        const width = element.getAttribute("width");
+        if (width) {
+          element.style.width = width;
+        }
+      });
+    }
+  });
 </script>
 
 <section use:hook class="markdown-body py-4">
   {#if source.type === "md"}
-    <SvelteMarkdown source={source.data} {renderers} />
+    <div bind:this={markDownRoot}>
+      <SvelteMarkdown source={source.data} {renderers} />
+    </div>
   {:else if source.type === "rst"}
     {@html html}
   {/if}
diff --git a/modules/ui/src/markdown/styles.css b/modules/ui/src/markdown/styles.css
index 6714f8d..b4706bf 100644
--- a/modules/ui/src/markdown/styles.css
+++ b/modules/ui/src/markdown/styles.css
@@ -114,6 +114,7 @@
   max-width: 100%;
   box-sizing: content-box;
   background-color: #0d1117;
+  display: inline;
 }
 
 .markdown-body code,