feat: Sanitized basic Markdown rendering

package.json

@@ -42,6 +42,8 @@
   "type": "module",
   "dependencies": {
     "boxicons": "^2.1.4",
-    "chota": "^0.9.2"
+    "chota": "^0.9.2",
+    "dompurify": "^3.0.6",
+    "marked": "^9.1.5"
   }
 }

src/lib/KeyValue.svelte

@@ -9,6 +9,8 @@
 -->
 
 <script lang="ts">
+  import { marked } from "marked";
+  import DOMPurify from "dompurify";
   export let keys: Array<String>;
   export let values: any;
   export let compact = false;
@@ -21,7 +23,11 @@
   <table>
     <tbody>
       {#if key == "text" || key == "Text"}
-        <tr><td style={keyStyle}>{key}</td><td class="value">{values[index]}</td></tr>
+        <tr
+          ><td style={keyStyle}>{key}</td><td class="value"
+            >{@html DOMPurify.sanitize(marked.parse(values[index]))}</td
+          ></tr
+        >
       {:else}
         <tr><td style={keyStyle}>{key}</td><td class="value">{values[index]}</td></tr>
       {/if}

src/lib/singleview/notes/Note.svelte

@@ -12,6 +12,8 @@
   import Collapsible from "$lib/Collapsible.svelte";
   import KeyValue from "../../KeyValue.svelte";
   import type { Note } from "$lib/singleview/docmodel/docmodeltypes";
+  import { marked } from "marked";
+  import DOMPurify from "dompurify";
   export let note: Note;
   let keys: string[] = [];
   let values: string[] = [];
@@ -30,7 +32,7 @@
   <p />
   <h6>Text</h6>
   <div class="text">
-    {note.text}
+    {@html DOMPurify.sanitize(marked.parse(note.text))}
   </div>
 </Collapsible>