From 3119ef0f004b576d67737bebf517947f8819b4fa Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 22 Jul 2025 18:54:44 -0400
Subject: 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.
---
 ui/lib/components/Message.svelte                   |  5 ++++-
 ui/lib/outbox.svelte.js                            |  2 --
 ui/lib/session.svelte.js                           |  6 ++----
 ui/lib/state/remote/messages.svelte.js             |  5 +----
 ui/routes/(swatch)/.swatch/Message/+page.svelte    | 25 ++++------------------
 ui/routes/(swatch)/.swatch/MessageRun/+page.svelte |  4 +---
 6 files changed, 12 insertions(+), 35 deletions(-)

(limited to 'ui')

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();
diff --git a/ui/lib/outbox.svelte.js b/ui/lib/outbox.svelte.js
index c4e2324..74f41bc 100644
--- a/ui/lib/outbox.svelte.js
+++ b/ui/lib/outbox.svelte.js
@@ -9,7 +9,6 @@ class SendToConversation {
     this.conversation = conversation;
     this.body = body;
     this.at = DateTime.now();
-    this.renderedBody = md.render(body);
   }
 
   toSkeleton(sender) {
@@ -19,7 +18,6 @@ class SendToConversation {
       conversation: this.conversation,
       sender,
       body: this.body,
-      renderedBody: this.renderedBody,
     };
   }
 
diff --git a/ui/lib/session.svelte.js b/ui/lib/session.svelte.js
index 4430e8a..42b86f0 100644
--- a/ui/lib/session.svelte.js
+++ b/ui/lib/session.svelte.js
@@ -29,24 +29,22 @@ class Conversation {
 }
 
 class Message {
-  static fromRemote({ id, at, conversation, sender, body, renderedBody }, users) {
+  static fromRemote({ id, at, conversation, sender, body }, users) {
     return new Message({
       id,
       at,
       conversation,
       sender: users.get(sender),
       body,
-      renderedBody,
     });
   }
 
-  constructor({ id, at, conversation, sender, body, renderedBody }) {
+  constructor({ id, at, conversation, sender, body }) {
     this.id = id;
     this.at = at;
     this.conversation = conversation;
     this.sender = sender;
     this.body = body;
-    this.renderedBody = renderedBody;
   }
 }
 
diff --git a/ui/lib/state/remote/messages.svelte.js b/ui/lib/state/remote/messages.svelte.js
index 852f29e..10de27a 100644
--- a/ui/lib/state/remote/messages.svelte.js
+++ b/ui/lib/state/remote/messages.svelte.js
@@ -1,5 +1,4 @@
 import { DateTime } from 'luxon';
-import { render } from '$lib/markdown.js';
 
 class Message {
   static boot({ id, at, conversation, sender, body }) {
@@ -9,17 +8,15 @@ class Message {
       conversation,
       sender,
       body,
-      renderedBody: render(body),
     });
   }
 
-  constructor({ id, at, conversation, sender, body, renderedBody }) {
+  constructor({ id, at, conversation, sender, body }) {
     this.id = id;
     this.at = at;
     this.conversation = conversation;
     this.sender = sender;
     this.body = body;
-    this.renderedBody = renderedBody;
   }
 }
 
diff --git a/ui/routes/(swatch)/.swatch/Message/+page.svelte b/ui/routes/(swatch)/.swatch/Message/+page.svelte
index aab17d5..bc27522 100644
--- a/ui/routes/(swatch)/.swatch/Message/+page.svelte
+++ b/ui/routes/(swatch)/.swatch/Message/+page.svelte
@@ -2,7 +2,6 @@
   import { DateTime } from 'luxon';
 
   import EventCapture from '$lib/swatch/event-capture.svelte.js';
-  import { render } from '$lib/markdown.js';
 
   import Message from '$lib/components/Message.svelte';
   import EventLog from '$lib/components/swatch/EventLog.svelte';
@@ -12,7 +11,7 @@
   // Astonishingly, `DateTime.fromISO` does not throw on invalid inputs. It generates an "Invalid
   // DateTime" sentinel value, instead.
   let at = $derived(DateTime.fromISO(atInput));
-  let renderedBodyInput = $state(
+  let body = $state(
     `Lorem ipsum \`dolor\` sit amet, consectetur adipiscing elit. Nunc quis ante ac leo tristique
 iaculis vel in tortor. Praesent sed interdum ipsum. Pellentesque blandit, sapien at mattis
 facilisis, leo mi gravida erat, in euismod mi lectus non dui. Praesent at justo vel mauris pulvinar
@@ -27,22 +26,6 @@ maximus, nisl eget interdum ornare, enim turpis semper ligula, sed ultricies sem
 dapibus augue. Pellentesque nec tincidunt sem.
 `,
   );
-  /*
-   * Even though `Message` is notionally a generic container for markup, we restrict the swatch to
-   * message-flavoured Markdown. Swatches are available to all users, including
-   * technically-unsophisticated ones, and anything rendered in a swatch runs in the same origin
-   * context and the same cookie context as the rest of the client.
-   *
-   * This makes it possible that a user would be persuaded to enter something into a swatch that
-   * then runs _as them_, interacting with Pilcrow via its API or accessing client-stored data.
-   *
-   * As a proof of concept, `<img src="x" onerror="console.log('oh no')">` should not run the log
-   * statement. With generic HTML entry, it would do so. With our markdown processing, it does not
-   * (the `onerror` attribute is removed). Similarly, `script` elements are prohibited.
-   *
-   * Users who want to experiment with free HTML are encouraged to edit the swatch for themselves.
-   */
-  let renderedBody = $derived(render(renderedBodyInput));
   let editable = $state(true);
   let cssClass = $state('');
 
@@ -75,15 +58,15 @@ dapibus augue. Pellentesque nec tincidunt sem.
   <label>editable <input type="checkbox" bind:checked={editable} /></label>
 
   <label
-    ><p>rendered body (markdown)</p>
-    <textarea bind:value={renderedBodyInput}></textarea>
+    ><p>body (markdown)</p>
+    <textarea bind:value={body}></textarea>
   </label>
 </div>
 
 <h2>rendered</h2>
 
 <div class="component-preview">
-  <Message {id} {at} {renderedBody} {editable} class={cssClass} {deleteMessage} />
+  <Message {id} {at} {body} {editable} class={cssClass} {deleteMessage} />
 </div>
 
 <h2>events</h2>
diff --git a/ui/routes/(swatch)/.swatch/MessageRun/+page.svelte b/ui/routes/(swatch)/.swatch/MessageRun/+page.svelte
index 34118ec..30aeee4 100644
--- a/ui/routes/(swatch)/.swatch/MessageRun/+page.svelte
+++ b/ui/routes/(swatch)/.swatch/MessageRun/+page.svelte
@@ -1,8 +1,6 @@
 <script>
   import { DateTime } from 'luxon';
 
-  import { render } from '$lib/markdown.js';
-
   import MessageRun from '$lib/components/MessageRun.svelte';
   import Message from '$lib/components/Message.svelte';
 
@@ -59,7 +57,7 @@ quis arcu. Ut a dapibus augue. Pellentesque nec tincidunt sem.`,
 <div class="component-preview">
   <MessageRun {sender} class={cssClass}>
     {#each messages.entries() as [index, message]}
-      <Message id="Mplaceholder-{index}" at={DateTime.now()} renderedBody={render(message)} />
+      <Message id="Mplaceholder-{index}" at={DateTime.now()} body={message} />
     {/each}
   </MessageRun>
 </div>
-- 
cgit v1.2.3