Render message markdown to HTML inside of `<Message />`.

This simplifies data flow, at the potential expense of re-rendering HTML more often than strictly necessary. Requiring every path that produces a message-shaped object to pre-render markdown made things more interdependent than intended and slowed me down.

1 files changed, 4 insertions, 1 deletions

diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index 4c6979e..6dbd7b2 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -1,16 +1,19 @@
 <script>
   import { DateTime } from 'luxon';
 
+  import { render } from '$lib/markdown.js';
+
   let {
     class: cssClass,
     id,
     at,
-    renderedBody,
+    body,
     editable = false,
     deleteMessage = async (id) => {},
   } = $props();
   let deleteArmed = $state(false);
   let atFormatted = $derived(at.toLocaleString(DateTime.DATETIME_SHORT));
+  let renderedBody = $derived(render(body));
 
   function ondelete(event) {
     event.preventDefault();