[ui] add markdown view

webui/package.json

@@ -38,10 +38,12 @@
   "dependencies": {
     "boxicons": "^2.1.1",
     "date-fns": "^2.25.0",
+    "dompurify": "^2.3.4",
     "filesize": "^8.0.6",
     "history": "^5.1.0",
     "lodash": "^4.17.21",
     "lru-cache": "^6.0.0",
+    "marked": "^4.0.10",
     "mitt": "^3.0.0",
     "normalize.css": "^8.0.1",
     "sass": "^1.43.4",

webui/src/components/display/blobs/TextViewer.svelte

@@ -4,13 +4,20 @@
   import Spinner from "../../utils/Spinner.svelte";
   export let address: string;
 
-  let mode: "preview" | "full" = "preview";
+  let mode: "preview" | "full" | "markdown" = "markdown";
 
   $: textContent = (async () => {
     const response = await fetch(
       `/api/${mode == "preview" ? "thumb" : "raw"}/${address}`
     );
-    return await response.text();
+    const text = await response.text();
+    if (mode === "markdown") {
+      const { marked } = await import("marked");
+      const DOMPurify = await import("dompurify");
+      return DOMPurify.sanitize(marked.parse(text));
+    } else {
+      return text;
+    }
   })();
 </script>
 
@@ -40,12 +47,28 @@
       />
       <div class="label">Full</div>
     </div>
+    <div
+      class="tab"
+      class:active={mode == "markdown"}
+      on:click={() => (mode = "markdown")}
+    >
+      <IconButton
+        name="edit"
+        active={mode == "markdown"}
+        on:click={() => (mode = "markdown")}
+      />
+      <div class="label">Markdown</div>
+    </div>
   </header>
-  <div class="text">
+  <div class="text" class:markdown={mode === "markdown"}>
     {#await textContent}
       <Spinner />
     {:then text}
-      {text}
+      {#if mode === "markdown"}
+        {@html text}
+      {:else}
+        {text}
+      {/if}
     {/await}
   </div>
 </div>
@@ -53,17 +76,29 @@
 <style lang="scss">
   .text-preview {
     flex: 1;
+    min-width: 0;
   }
 
   .text {
     background: var(--background);
     padding: 0.5em;
-    overflow: auto;
-    white-space: pre-wrap;
-    border-radius: 4px;
-    border: 1px solid var(--foreground);
     height: 100%;
     box-sizing: border-box;
+
+    overflow: auto;
+
+    border-radius: 4px;
+    border: 1px solid var(--foreground);
+
+    white-space: pre-wrap;
+
+    &.markdown {
+      white-space: unset;
+
+      :global(img) {
+        max-width: 75%;
+      }
+    }
   }
 
   header {

webui/yarn.lock

@@ -943,6 +943,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dompurify@npm:^2.3.4":
+  version: 2.3.4
+  resolution: "dompurify@npm:2.3.4"
+  checksum: 65d50e62b7c5da611b3562d71a1fbcf0a951ea47844daf17c097acb209ea4d039a602ee0be37c314b998102e4ab09223b0fe3f4575eeda7240b01aeabf212415
+  languageName: node
+  linkType: hard
+
 "ee-first@npm:1.1.1":
   version: 1.1.1
   resolution: "ee-first@npm:1.1.1"
@@ -1890,6 +1897,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"marked@npm:^4.0.10":
+  version: 4.0.10
+  resolution: "marked@npm:4.0.10"
+  bin:
+    marked: bin/marked.js
+  checksum: 46cd8ef1a7cfcf5e461727c7f3e16dd4244369ef58f60485e75d3f5df9d53a8249b9609e96a336521eaa5c88d9531cbd296509a148718056e9375e69609f4442
+  languageName: node
+  linkType: hard
+
 "merge-stream@npm:^2.0.0":
   version: 2.0.0
   resolution: "merge-stream@npm:2.0.0"
@@ -3176,10 +3192,12 @@ __metadata:
     "@yarnpkg/libzip": ^2.2.2
     boxicons: ^2.1.1
     date-fns: ^2.25.0
+    dompurify: ^2.3.4
     filesize: ^8.0.6
     history: ^5.1.0
     lodash: ^4.17.21
     lru-cache: ^6.0.0
+    marked: ^4.0.10
     mitt: ^3.0.0
     normalize.css: ^8.0.1
     postcss: ^8.3.11
@@ -3474,8 +3492,8 @@ __metadata:
 
 "upend@file:../tools/upend_js::locator=svelte-app%40workspace%3A.":
   version: 0.0.1
-  resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=2fee87&locator=svelte-app%40workspace%3A."
-  checksum: 51fd21439f8a42d901e03c06e4797f89fd7c505c21ce53d9cb7340ae7495f05d774dd7f0ff758b5470ebb1fb6725e33e06b09d98ec91f17e9766ae1c05d2bd58
+  resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=1e1f74&locator=svelte-app%40workspace%3A."
+  checksum: 3d6603afb89c815deb783bff5e16016ba40983271e761e15850e9e8843735a8eef4737cd13fa44a701ff1be4b0f0738656cd84986122cbae5e665829caa833de
   languageName: node
   linkType: hard