malice

public

Star0

Fork 0

Watch0

13 commits 2 branches 0 tags 0 releases4.4 MiB

Commit `6d6a4c34bdc1`

tarball

atagen <boss@atagen.co>2026-10-24 06:51 UTC

16 files changed+289-83

web: compose in markdown and render formatted bodies

The composer now runs marked over the body when the markdown toggle is on, escaping raw HTML and linking mentions in text tokens only so code stays literal. Received messages render from formatted_body through an allowlist sanitiser into a node tree instead of {@html}, so formatting from other clients shows up and nothing outside the Matrix tag set reaches the DOM. Enter inside an unclosed fence inserts a newline.

Modified file: web/package-lock.json+13 additions@@ -10,6 +10,7 @@
       "dependencies": {
         "@twemoji/svg": "^15.0.0",
         "emojibase-data": "^18.0.0",
+        "marked": "^18.1.1",
         "svelte": "^5.39.0"
       },
       "devDependencies": {
@@ -2702,6 +2703,18 @@
         "@jridgewell/sourcemap-codec": "^1.6.0"
       }
     },
+    "node_modules/marked": {
+      "version": "18.1.1",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-18.1.1.tgz",
+      "integrity": "sha512-zEGgrtUG8crk+TrMacJSVABU4DYDDkS8uqgU3ohrn/2fW9C2AEfUrO3m6IhpIpQpl7YcVpiXXC9cSMWDANT3dg==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",

Modified file: web/package.json+1

@@ -16,6 +16,7 @@

1616 "dependencies": {

1717 "@twemoji/svg": "^15.0.0",

1818 "emojibase-data": "^18.0.0",

19+ "marked": "^18.1.1",

1920 "svelte": "^5.39.0"

2021 },

2122 "devDependencies": {

Modified file: web/src/App.svelte+20 additions−6 deletions@@ -47,6 +47,7 @@
   } from './lib/store';
   import { discardPending, pendingByRoom, queueSend, resetPending, retryPending } from './lib/pending';
   import type { PendingMessage } from './lib/pending';
+  import { insideOpenFence } from './lib/markdown';
   import { mentionQueryAt, mentionsFromHtml, rankPeople, resolveMentions } from './lib/mentions';
   import type { Mention, MentionQuery } from './lib/mentions';
   import { loadQuickReactions, quickReactions, saveQuickReactions } from './lib/quick-reactions';
@@ -59,7 +60,7 @@
   } from './lib/link-previews';
   import { notifyTyping, stopTyping } from './lib/typing';
   import { formatDay } from './lib/format';
-  import { lastSpaceRooms, lineHeight, messageSpacing, navFolded, railFolded } from './lib/appearance';
+  import { lastSpaceRooms, lineHeight, markdownEnabled, messageSpacing, navFolded, railFolded } from './lib/appearance';
   import SettingsPanel from './lib/SettingsPanel.svelte';
   import { packsForRoom, parseEncryptionState, parseOwnProfile, parseVerificationState, contentPreview, senderLabel } from './lib/types';
   import type { MemberSummary, OwnProfile, Person, QuickReaction, ReplyReference, RoomSummary, SendState, TimelineEvent, TimelineItem } from './lib/types';
@@ -194,7 +195,7 @@
       send_state: state,
       content: {
         kind: 'Message',
-        message: { kind: 'Text', body: p.body, geo_uri: null, formatted_body: null, edited: false, media: null, link_previews: [] }
+        message: { kind: 'Text', body: p.body, geo_uri: null, formatted_body: p.formatted, edited: false, media: null, link_previews: [] }
       },
       reply_to: p.replyTo,
       thread_root: null,
@@ -592,7 +593,7 @@
     pickedMentions = { ...pickedMentions, [roomId]: [] };
     mentionQuery = null;
     if (attachments.length === 0) {
-      queueSend(roomId, body, reply, mentions);
+      queueSend(roomId, body, reply, mentions, $markdownEnabled);
     } else {
       const { [roomId]: _sent, ...rest } = staged;
       staged = rest;
@@ -614,7 +615,7 @@
       for (const attachment of attachments) {
         uploadName = attachment.file.name || 'attachment';
         try {
-          if (first) await uploadAttachment(roomId, attachment.file, body || null, reply?.event_id ?? null, mentions);
+          if (first) await uploadAttachment(roomId, attachment.file, body || null, reply?.event_id ?? null, mentions, $markdownEnabled);
           else await uploadAttachment(roomId, attachment.file);
           first = false;
         } catch (e) {
@@ -687,7 +688,7 @@
     const body = composer.trim();
     cancelEdit();
     if (!body || body === original.trim()) return;
-    editMessage(roomId, eventId, body, resolveMentions(body, pickedMentions[roomId] ?? [])).catch((e) => pushBanner(e instanceof Error ? e.message : 'Edit failed'));
+    editMessage(roomId, eventId, body, resolveMentions(body, pickedMentions[roomId] ?? []), $markdownEnabled).catch((e) => pushBanner(e instanceof Error ? e.message : 'Edit failed'));
   }
 
   function editLastOwn(): boolean {
@@ -787,7 +788,7 @@
         return;
       }
     }
-    if (ev.key === 'Enter' && !ev.shiftKey) {
+    if (ev.key === 'Enter' && !ev.shiftKey && !insideOpenFence(composer, composerEl?.selectionStart ?? composer.length)) {
       ev.preventDefault();
       send();
     } else if (ev.key === 'Escape' && editing) {
@@ -1653,6 +1654,19 @@
               disabled={!($selectedRoomId && openReady[$selectedRoomId])}
             ></textarea>
             <button
+              type="button"
+              class="icon-btn md-toggle"
+              aria-pressed={$markdownEnabled}
+              aria-label={$markdownEnabled ? 'Turn markdown off' : 'Turn markdown on'}
+              title={$markdownEnabled ? 'Markdown on' : 'Markdown off'}
+              on:click={() => markdownEnabled.update((v) => !v)}
+            >
+              <svg viewBox="0 0 24 16" width="22" height="15" aria-hidden="true">
+                <rect x="1" y="1" width="22" height="14" rx="2" fill="none" stroke="currentColor" stroke-width="1.6" />
+                <path d="M4.5 11.5v-7l2.75 3 2.75-3v7M15.5 4.5v6.5M13 8.5l2.5 2.75L18 8.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round" />
+              </svg>
+            </button>
+            <button
               type="submit"
               class="primary-btn"
               disabled={(!composer.trim() && currentStaged.length === 0) ||

Modified file: web/src/app.css+2

@@ -784,3 +784,5 @@ input, textarea { font: inherit; }

784784 .rail-btn { width: 40px; height: 40px; font-size: 16px; }

785785 .empty-cta { flex-direction: column; }

786786 }

787+.md-toggle { align-self: center; padding: 4px 6px; }

788+.md-toggle[aria-pressed='true'] { color: var(--accent); }

Modified file: web/src/lib/MessageRow.svelte+1−1

@@ -347,7 +347,7 @@

347347 {@const m = event.content.message}

348348 {#if stripped.text}

349349

         <div class="text" class:emote={m.kind === 'Emote'} class:notice={m.kind === 'Notice' || m.kind === 'ServerNotice'}>

350

-          {#if m.kind === 'Emote'}* {displayName} {/if}<MessageText text={stripped.text} jumbo={m.kind === 'Text'} {mentions} {self} nameOf={(id) => people[id]?.name ?? null} />

350

+          {#if m.kind === 'Emote'}* {displayName} {/if}<MessageText text={stripped.text} html={m.formatted_body} jumbo={m.kind === 'Text'} {mentions} {self} nameOf={(id) => people[id]?.name ?? null} />

351351 {#if m.edited && !showSender}<span class="edited" title="Edited">(edited)</span>{/if}

352352 </div>

353353 {/if}

Modified file: web/src/lib/MessageText.svelte+37 additions−8 deletions@@ -1,34 +1,38 @@
 <script lang="ts">
   import EmojiText from './EmojiText.svelte';
+  import RichNodes from './RichNodes.svelte';
   import { parseCode } from './code';
   import { segmentInline } from './inline';
   import type { Mention } from './mentions';
+  import { parseRich } from './rich';
 
   export let text: string;
+  export let html: string | null = null;
   export let jumbo = false;
   export let mentions: Mention[] = [];
   export let self: string | null = null;
   export let nameOf: (userId: string) => string | null = () => null;
 
+  $: rich = html ? parseRich(html) : null;
   $: segments = parseCode(text);
   $: pieces = segments.map((s) => (s.kind === 'text' ? segmentInline(s.text, mentions) : []));
   $: single = segments.length === 1 && pieces[0].length === 1;
 </script>
 
-{#each segments as s, i}{#if s.kind === 'inline'}<code class="inline">{s.text}</code>{:else if s.kind === 'block'}<pre class="block"><code>{s.text}</code></pre>{:else}{#each pieces[i] as p}{#if p.kind === 'mention'}<span class="mention" class:me={p.user_id === self} title={p.user_id}><EmojiText text={p.text === p.user_id ? (nameOf(p.user_id) ?? p.text) : p.text} /></span>{:else if p.kind === 'link'}<a class="link" href={p.href} target="_blank" rel="noopener noreferrer">{p.text}</a>{:else}<EmojiText text={p.text} jumbo={jumbo && single} />{/if}{/each}{/if}{/each}
+{#if rich}<div class="rich"><RichNodes nodes={rich} {mentions} {self} {nameOf} /></div>{:else}{#each segments as s, i}{#if s.kind === 'inline'}<code class="inline">{s.text}</code>{:else if s.kind === 'block'}<pre class="block"><code>{s.text}</code></pre>{:else}{#each pieces[i] as p}{#if p.kind === 'mention'}<span class="mention" class:me={p.user_id === self} title={p.user_id}><EmojiText text={p.text === p.user_id ? (nameOf(p.user_id) ?? p.text) : p.text} /></span>{:else if p.kind === 'link'}<a class="link" href={p.href} target="_blank" rel="noopener noreferrer">{p.text}</a>{:else}<EmojiText text={p.text} jumbo={jumbo && single} />{/if}{/each}{/if}{/each}{/if}
 
 <style>
-  code {
+  code, .rich :global(code) {
     font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', Menlo, monospace;
     font-size: 0.9em;
   }
-  .inline {
+  .inline, .rich :global(:not(pre) > code) {
     padding: 1px 5px;
     border-radius: 4px;
     background: var(--bg-soft);
     border: 1px solid var(--border);
   }
-  .block {
+  .block, .rich :global(pre) {
     margin: 4px 0;
     padding: 8px 10px;
     border-radius: 6px;
@@ -38,17 +42,42 @@
     white-space: pre;
     line-height: 1.4;
   }
-  .mention {
+  .mention, .rich :global(.mention) {
     padding: 0 4px;
     border-radius: 4px;
     font-weight: 600;
     color: var(--accent);
     background: color-mix(in srgb, var(--accent) 18%, transparent);
   }
-  .mention.me {
+  .mention.me, .rich :global(.mention.me) {
     color: var(--warn-text);
     background: color-mix(in srgb, var(--warn) 28%, transparent);
   }
-  .link { color: var(--accent); overflow-wrap: anywhere; }
-  .link:hover { text-decoration: underline; }
+  .link, .rich :global(.link) { color: var(--accent); overflow-wrap: anywhere; }
+  .link:hover, .rich :global(.link:hover) { text-decoration: underline; }
+  .rich { white-space: normal; }
+  .rich :global(:is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6, table, details)) { margin: 4px 0; }
+  .rich :global(:first-child) { margin-top: 0; }
+  .rich :global(:last-child) { margin-bottom: 0; }
+  .rich :global(:is(ul, ol)) { padding-left: 22px; }
+  .rich :global(blockquote) {
+    padding: 2px 10px;
+    border-left: 3px solid var(--border);
+    color: var(--muted);
+  }
+  .rich :global(:is(h1, h2, h3, h4, h5, h6)) { line-height: 1.3; }
+  .rich :global(h1) { font-size: 1.4em; }
+  .rich :global(h2) { font-size: 1.25em; }
+  .rich :global(:is(h3, h4, h5, h6)) { font-size: 1.1em; }
+  .rich :global(hr) { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
+  .rich :global(table) { border-collapse: collapse; }
+  .rich :global(:is(th, td)) { border: 1px solid var(--border); padding: 3px 8px; text-align: left; }
+  .rich :global(.spoiler) {
+    border-radius: 4px;
+    background: var(--text);
+    color: transparent;
+    cursor: pointer;
+  }
+  .rich :global(.spoiler:is(:hover, :focus)) { background: var(--bg-soft); color: inherit; }
+  .rich :global(.emote) { height: 1.6em; width: auto; vertical-align: middle; }
 </style>

Added file: web/src/lib/RichNodes.svelte+16 additions@@ -0,0 +1,16 @@
+<script lang="ts">
+  import EmojiText from './EmojiText.svelte';
+  import RichNodes from './RichNodes.svelte';
+  import { mediaUrl } from './api';
+  import { segmentInline } from './inline';
+  import type { Mention } from './mentions';
+  import type { RichNode } from './rich';
+
+  export let nodes: RichNode[];
+  export let mentions: Mention[] = [];
+  export let self: string | null = null;
+  export let nameOf: (userId: string) => string | null = () => null;
+  export let plain = false;
+</script>
+
+{#each nodes as n}{#if n.kind === 'text'}{#if plain}{n.text}{:else}{#each segmentInline(n.text, mentions) as p}{#if p.kind === 'mention'}<span class="mention" class:me={p.user_id === self} title={p.user_id}><EmojiText text={p.text === p.user_id ? (nameOf(p.user_id) ?? p.text) : p.text} /></span>{:else if p.kind === 'link'}<a class="link" href={p.href} target="_blank" rel="noopener noreferrer">{p.text}</a>{:else}<EmojiText text={p.text} />{/if}{/each}{/if}{:else if n.kind === 'mention'}<span class="mention" class:me={n.user_id === self} title={n.user_id}><RichNodes nodes={n.children} plain /></span>{:else if n.kind === 'spoiler'}<span class="spoiler" role="button" tabindex="0"><RichNodes nodes={n.children} {mentions} {self} {nameOf} {plain} /></span>{:else if n.kind === 'emote'}<img class="emote" src={mediaUrl(n.mxc) ?? ''} alt={n.alt} title={n.alt} />{:else if n.tag === 'br'}<br />{:else if n.tag === 'hr'}<hr />{:else if n.tag === 'a'}<a class="link" href={n.attrs['href']} target="_blank" rel="noopener noreferrer"><RichNodes nodes={n.children} plain /></a>{:else}<svelte:element this={n.tag} {...n.attrs}><RichNodes nodes={n.children} {mentions} {self} {nameOf} plain={plain || n.tag === 'code' || n.tag === 'pre'} /></svelte:element>{/if}{/each}

Modified file: web/src/lib/api.ts+13 additions−7 deletions@@ -1,7 +1,7 @@
 // Backend-agnostic API surface. Every call forwards to whichever transport
 // this build was compiled for, hosted (fetch + SSE) or on-device (worker).
 import type { MemberSummary, RoomSummary } from './types';
-import { codeToHtml } from './code';
+import { formatBody } from './markdown';
 import { mentionedUserIds, type Mention } from './mentions';
 import { HttpTransport } from './transport-http';
 import type { SessionInfo, Transport, VerifyAction } from './transport';
@@ -35,8 +35,13 @@ export function getRooms(): Promise<{ rooms: RoomSummary[] }> {
 
 export const openRoom = (room_id: string) => transport.openRoom(room_id);
 export const closeRoom = (room_id: string) => transport.closeRoom(room_id);
-export const sendMessage = (room_id: string, body: string, reply_to: string | null = null, mentions: Mention[] = []) =>
-  transport.sendMessage(room_id, body, codeToHtml(body, mentions), reply_to, mentionedUserIds(mentions));
+export const sendMessage = (
+  room_id: string,
+  body: string,
+  reply_to: string | null = null,
+  mentions: Mention[] = [],
+  markdown = false
+) => transport.sendMessage(room_id, body, formatBody(body, mentions, markdown), reply_to, mentionedUserIds(mentions));
 export const paginateRoom = (room_id: string) => transport.paginateRoom(room_id);
 export const setTyping = (room_id: string, typing: boolean) => transport.setTyping(room_id, typing);
 export const getAccountData = (eventType: string) => transport.getAccountData(eventType);
@@ -55,8 +60,8 @@ export function createRoom(name: string, topic?: string): Promise<{ room_id: str
 export const leaveRoom = (room_id: string) => transport.leaveRoom(room_id);
 export const reactToMessage = (room_id: string, event_id: string, key: string, shortcode?: string) =>
   transport.reactToMessage(room_id, event_id, key, shortcode);
-export const editMessage = (room_id: string, event_id: string, body: string, mentions: Mention[] = []) =>
-  transport.editMessage(room_id, event_id, body, codeToHtml(body, mentions), mentionedUserIds(mentions));
+export const editMessage = (room_id: string, event_id: string, body: string, mentions: Mention[] = [], markdown = false) =>
+  transport.editMessage(room_id, event_id, body, formatBody(body, mentions, markdown), mentionedUserIds(mentions));
 export const markRead = (room_id: string, event_id: string) => transport.markRead(room_id, event_id);
 
 export function getMembers(room_id: string): Promise<{ members: MemberSummary[] }> {
@@ -102,11 +107,12 @@ export function uploadAttachment(
   file: File,
   caption: string | null = null,
   reply_to: string | null = null,
-  mentions: Mention[] = []
+  mentions: Mention[] = [],
+  markdown = false
 ): Promise<void> {
   return transport.uploadAttachment(room_id, file, {
     caption,
-    formatted_caption: caption ? codeToHtml(caption, mentions) : null,
+    formatted_caption: caption ? formatBody(caption, mentions, markdown) : null,
     reply_to,
     mentions: mentionedUserIds(mentions)
   });

Modified file: web/src/lib/appearance.ts+1

@@ -28,6 +28,7 @@ const isSpacing = (v: unknown): v is number =>

2828

2929 export const navFolded = persisted('malice.navFolded', false, isBool);

3030 export const railFolded = persisted('malice.railFolded', false, isBool);

31+export const markdownEnabled = persisted('malice.markdown', true, isBool);

3132 export const messageSpacing = persisted('malice.messageSpacing', MESSAGE_SPACING_DEFAULT, isSpacing);

3233

3334 export const LINE_HEIGHT_MIN = 1.1;

Modified file: web/src/lib/code.ts−43 deletions@@ -1,5 +1,3 @@
-import type { Mention } from './mentions';
-
 export type CodeSegment =
   | { kind: 'text'; text: string }
   | { kind: 'inline'; text: string }
@@ -38,44 +36,3 @@ export function parseCode(text: string): CodeSegment[] {
 export function hasCode(segments: CodeSegment[]): boolean {
   return segments.some((s) => s.kind !== 'text');
 }
-
-function escapeHtml(text: string): string {
-  return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}
-
-function escapeRegExp(text: string): string {
-  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-
-function textToHtml(text: string, pattern: RegExp | null, byText: Map<string, string>): string {
-  if (!pattern) return escapeHtml(text).replace(/\n/g, '<br>');
-  let out = '';
-  let last = 0;
-  for (const m of text.matchAll(pattern)) {
-    out += escapeHtml(text.slice(last, m.index)).replace(/\n/g, '<br>');
-    const userId = byText.get(m[0]) ?? m[0];
-    out += `<a href="https://matrix.to/#/${escapeHtml(userId)}">${escapeHtml(m[0])}</a>`;
-    last = m.index + m[0].length;
-  }
-  return out + escapeHtml(text.slice(last)).replace(/\n/g, '<br>');
-}
-
-/** Matrix `formatted_body` for a plain body, or null when it has no code or mentions to format. */
-export function codeToHtml(body: string, mentions: Mention[] = []): string | null {
-  const segments = parseCode(body);
-  const byText = new Map(mentions.map((m) => [m.text, m.user_id]));
-  const texts = [...byText.keys()].sort((a, b) => b.length - a.length);
-  const pattern = texts.length > 0 ? new RegExp(texts.map(escapeRegExp).join('|'), 'g') : null;
-  const linked = pattern !== null && segments.some((s) => s.kind === 'text' && new RegExp(pattern.source).test(s.text));
-  if (!hasCode(segments) && !linked) return null;
-  return segments
-    .map((s) => {
-      if (s.kind === 'inline') return `<code>${escapeHtml(s.text)}</code>`;
-      if (s.kind === 'block') {
-        const cls = s.lang ? ` class="language-${escapeHtml(s.lang)}"` : '';
-        return `<pre><code${cls}>${escapeHtml(s.text)}</code></pre>`;
-      }
-      return textToHtml(s.text, pattern, byText);
-    })
-    .join('');
-}

Added file: web/src/lib/markdown.ts+68 additions@@ -0,0 +1,68 @@
+import { Marked, type Token, type Tokens } from 'marked';
+import type { Mention } from './mentions';
+
+function escapeHtml(text: string): string {
+  return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+function escapeRegExp(text: string): string {
+  return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function mentionLinker(mentions: Mention[]): (escaped: string) => string {
+  const byText = new Map(mentions.filter((m) => m.text).map((m) => [escapeHtml(m.text), m.user_id]));
+  if (byText.size === 0) return (escaped) => escaped;
+  const names = [...byText.keys()].sort((a, b) => b.length - a.length);
+  const pattern = new RegExp(names.map(escapeRegExp).join('|'), 'g');
+  return (escaped) =>
+    escaped.replace(pattern, (name) => `<a href="https://matrix.to/#/${escapeHtml(byText.get(name)!)}">${name}</a>`);
+}
+
+function textToHtml(text: string, link: (escaped: string) => string): string {
+  return link(escapeHtml(text)).replace(/\n/g, '<br>');
+}
+
+const PLAIN_INLINE = new Set(['text', 'escape', 'br']);
+
+function isPlain(tokens: Token[]): boolean {
+  const blocks = tokens.filter((t) => t.type !== 'space');
+  if (blocks.length !== 1 || blocks[0].type !== 'paragraph') return blocks.length === 0;
+  return (blocks[0] as Tokens.Paragraph).tokens.every((t) => PLAIN_INLINE.has(t.type) && !('tokens' in t && t.tokens));
+}
+
+function markdownToHtml(body: string, link: (escaped: string) => string): string | null {
+  const marked = new Marked({ gfm: true, breaks: true });
+  marked.use({
+    renderer: {
+      text(token) {
+        if ('tokens' in token && token.tokens) return false;
+        return link('escaped' in token && token.escaped ? token.text : escapeHtml(token.text));
+      },
+      html(token) {
+        return escapeHtml(token.text);
+      },
+      image(token) {
+        return `<a href="${escapeHtml(token.href)}">${escapeHtml(token.text || token.href)}</a>`;
+      },
+      checkbox(token) {
+        return token.checked ? '[x] ' : '[ ] ';
+      }
+    }
+  });
+  const tokens = marked.lexer(body);
+  if (isPlain(tokens)) return null;
+  return marked.parser(tokens).trim();
+}
+
+/** Matrix `formatted_body` for a composed message, or null when plain text says it all. */
+export function formatBody(body: string, mentions: Mention[], markdown: boolean): string | null {
+  const link = mentionLinker(mentions);
+  const html = markdown ? markdownToHtml(body, link) : null;
+  if (html !== null) return html;
+  const plain = textToHtml(body, link);
+  return plain === escapeHtml(body).replace(/\n/g, '<br>') ? null : plain;
+}
+
+export function insideOpenFence(text: string, caret: number): boolean {
+  return (text.slice(0, caret).match(/^\s*```/gm)?.length ?? 0) % 2 === 1;
+}

Modified file: web/src/lib/pending.ts+14 additions−3 deletions@@ -1,5 +1,6 @@
 import { get, writable } from 'svelte/store';
 import { sendMessage } from './api';
+import { formatBody } from './markdown';
 import { timelines } from './store';
 import type { Mention } from './mentions';
 import type { ReplyReference, TimelineItem } from './types';
@@ -7,6 +8,7 @@ import type { ReplyReference, TimelineItem } from './types';
 export interface PendingMessage {
   id: string;
   body: string;
+  formatted: string | null;
   replyTo: ReplyReference | null;
   status: 'sending' | 'failed';
   error: string | null;
@@ -18,6 +20,7 @@ export const pendingByRoom = writable<Record<string, PendingMessage[]>>({});
 interface PendingRecord extends PendingMessage {
   roomId: string;
   mentions: Mention[];
+  markdown: boolean;
   knownIds: Set<string>;
 }
 
@@ -40,7 +43,7 @@ function ownIdentities(items: TimelineItem[]): Set<string> {
 }
 
 function toPublic(record: PendingRecord): PendingMessage {
-  return { id: record.id, body: record.body, replyTo: record.replyTo, status: record.status, error: record.error, createdAt: record.createdAt };
+  return { id: record.id, body: record.body, formatted: record.formatted, replyTo: record.replyTo, status: record.status, error: record.error, createdAt: record.createdAt };
 }
 
 function roomList(roomId: string): PendingMessage[] {
@@ -74,7 +77,7 @@ async function attemptSend(record: PendingRecord): Promise<void> {
   if (!records.has(record.id)) return;
   updateRecord(record.id, { status: 'sending', error: null });
   try {
-    await sendMessage(record.roomId, record.body, record.replyTo?.event_id ?? null, record.mentions);
+    await sendMessage(record.roomId, record.body, record.replyTo?.event_id ?? null, record.mentions, record.markdown);
   } catch (e) {
     updateRecord(record.id, { status: 'failed', error: e instanceof Error ? e.message : 'Message could not be sent' });
   }
@@ -86,13 +89,21 @@ function enqueue(record: PendingRecord): void {
   queues.set(record.roomId, next.catch(() => undefined));
 }
 
-export function queueSend(roomId: string, body: string, replyTo: ReplyReference | null = null, mentions: Mention[] = []): void {
+export function queueSend(
+  roomId: string,
+  body: string,
+  replyTo: ReplyReference | null = null,
+  mentions: Mention[] = [],
+  markdown = false
+): void {
   const record: PendingRecord = {
     id: nextId(),
     roomId,
     body,
+    formatted: formatBody(body, mentions, markdown),
     replyTo,
     mentions,
+    markdown,
     status: 'sending',
     error: null,
     createdAt: Date.now(),

Added file: web/src/lib/rich.ts+68 additions@@ -0,0 +1,68 @@
+export type RichNode =
+  | { kind: 'text'; text: string }
+  | { kind: 'element'; tag: string; attrs: Record<string, string>; children: RichNode[] }
+  | { kind: 'mention'; user_id: string; children: RichNode[] }
+  | { kind: 'spoiler'; children: RichNode[] }
+  | { kind: 'emote'; mxc: string; alt: string };
+
+// The tag allowlist from the Matrix spec's m.room.message HTML section, minus font colours.
+const ALLOWED = new Set([
+  'del', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol', 'sup', 'sub', 'li', 'b', 'i',
+  'u', 'strong', 'em', 's', 'strike', 'code', 'hr', 'br', 'div', 'table', 'thead', 'tbody', 'tr', 'th', 'td',
+  'caption', 'pre', 'span', 'details', 'summary', 'font'
+]);
+const DROPPED = new Set(['mx-reply', 'script', 'style', 'head', 'title', 'iframe', 'object', 'template']);
+const MATRIX_TO_USER = /^https:\/\/matrix\.to\/#\/(@[^/?]+)/;
+const SAFE_HREF = /^(https?:|mailto:)/i;
+
+function attrsFor(el: Element, tag: string): Record<string, string> | null {
+  const attrs: Record<string, string> = {};
+  if (tag === 'a') {
+    const href = el.getAttribute('href') ?? '';
+    if (!SAFE_HREF.test(href)) return null;
+    attrs['href'] = href;
+  } else if (tag === 'ol') {
+    const start = Number(el.getAttribute('start'));
+    if (Number.isInteger(start) && start > 0) attrs['start'] = String(start);
+  } else if (tag === 'code') {
+    const lang = /(?:^|\s)(language-[\w+#-]+)/.exec(el.getAttribute('class') ?? '');
+    if (lang) attrs['class'] = lang[1];
+  }
+  return attrs;
+}
+
+function convert(node: Node): RichNode[] {
+  if (node.nodeType === Node.TEXT_NODE) return node.textContent ? [{ kind: 'text', text: node.textContent }] : [];
+  if (node.nodeType !== Node.ELEMENT_NODE) return [];
+  const el = node as Element;
+  const tag = el.tagName.toLowerCase();
+  if (DROPPED.has(tag)) return [];
+  const children = () => [...el.childNodes].flatMap(convert);
+  if (tag === 'img') {
+    const src = el.getAttribute('src') ?? '';
+    const alt = el.getAttribute('alt') ?? el.getAttribute('title') ?? '';
+    if (src.startsWith('mxc://')) return [{ kind: 'emote', mxc: src, alt }];
+    return alt ? [{ kind: 'text', text: alt }] : [];
+  }
+  if (tag === 'span' && el.hasAttribute('data-mx-spoiler')) return [{ kind: 'spoiler', children: children() }];
+  if (!ALLOWED.has(tag)) return children();
+  if (tag === 'a') {
+    const user = MATRIX_TO_USER.exec(el.getAttribute('href') ?? '');
+    if (user) {
+      try {
+        return [{ kind: 'mention', user_id: decodeURIComponent(user[1]), children: children() }];
+      } catch {
+        return children();
+      }
+    }
+  }
+  const attrs = attrsFor(el, tag);
+  if (!attrs) return children();
+  return [{ kind: 'element', tag: tag === 'font' ? 'span' : tag, attrs, children: children() }];
+}
+
+/** A sanitised tree for a message's `formatted_body`, safe to render without `{@html}`. */
+export function parseRich(html: string): RichNode[] {
+  const doc = new DOMParser().parseFromString(`<body>${html}</body>`, 'text/html');
+  return [...doc.body.childNodes].flatMap(convert);
+}

Modified file: web/test/code.test.ts+1 additions−11 deletions@@ -1,10 +1,6 @@
 import assert from 'node:assert/strict';
 import { test } from 'node:test';
-import { codeToHtml, parseCode } from '../src/lib/code.ts';
-
-test('plain text has no formatted body', () => {
-  assert.equal(codeToHtml('hello <b>'), null);
-});
+import { parseCode } from '../src/lib/code.ts';
 
 test('splits inline code', () => {
   assert.deepEqual(parseCode('run `ls -l` now'), [
@@ -30,9 +26,3 @@ test('unclosed backtick is text', () => {
   assert.deepEqual(parseCode('a ` b'), [{ kind: 'text', text: 'a ` b' }]);
 });
 
-test('html escapes and keeps line breaks', () => {
-  assert.equal(
-    codeToHtml('x<y\n`a&b`\n```js\n<p>\n```'),
-    'x&lt;y<br><code>a&amp;b</code><br><pre><code class="language-js">&lt;p&gt;</code></pre>'
-  );
-});

Added file: web/test/markdown.test.ts+29 additions@@ -0,0 +1,29 @@
+import assert from 'node:assert/strict';
+import { test } from 'node:test';
+import { formatBody, insideOpenFence } from '../src/lib/markdown.ts';
+
+test('plain text stays unformatted', () => {
+  assert.equal(formatBody('hello\nthere', [], true), null);
+  assert.equal(formatBody('**bold**', [], false), null);
+});
+
+test('renders the common chat markdown', () => {
+  assert.equal(formatBody('*it* **bold** ~~gone~~', [], true), '<p><em>it</em> <strong>bold</strong> <del>gone</del></p>');
+  assert.equal(formatBody('> quoted\nstill', [], true), '<blockquote>\n<p>quoted<br>still</p>\n</blockquote>');
+  assert.equal(formatBody('run `ls <x>`', [], true), '<p>run <code>ls &lt;x&gt;</code></p>');
+  assert.equal(
+    formatBody('```js\nlet a = "<b>";\n```', [], true),
+    '<pre><code class="language-js">let a = &quot;&lt;b&gt;&quot;;\n</code></pre>'
+  );
+});
+
+test('raw html is escaped, not passed through', () => {
+  assert.equal(formatBody('<b>hi</b> **x**', [], true), '<p>&lt;b&gt;hi&lt;/b&gt; <strong>x</strong></p>');
+  assert.equal(formatBody('<script>alert(1)</script>', [], true), '&lt;script&gt;alert(1)&lt;/script&gt;');
+});
+
+test('enter stays a newline inside an open fence', () => {
+  assert.equal(insideOpenFence('```\ncode', 8), true);
+  assert.equal(insideOpenFence('```\ncode\n```\n', 13), false);
+  assert.equal(insideOpenFence('say ``` mid line', 16), false);
+});

Modified file: web/test/mentions.test.ts+5 additions−4 deletions@@ -1,6 +1,6 @@
 import assert from 'node:assert/strict';
 import { test } from 'node:test';
-import { codeToHtml } from '../src/lib/code.ts';
+import { formatBody } from '../src/lib/markdown.ts';
 import { mentionQueryAt, mentionedUserIds, rankPeople, resolveMentions, stripMarkdownPills } from '../src/lib/mentions.ts';
 import { findUrls } from '../src/lib/urls.ts';
 
@@ -33,10 +33,11 @@ test('keeps picked names still in the body and typed matrix ids', () => {
 test('links mentions outside code', () => {
   const mentions = [{ user_id: '@a<b:example.org', text: 'A<B' }];
   assert.equal(
-    codeToHtml('hey A<B `A<B`', mentions),
-    'hey <a href="https://matrix.to/#/@a&lt;b:example.org">A&lt;B</a> <code>A&lt;B</code>'
+    formatBody('hey A<B `A<B`', mentions, true),
+    '<p>hey <a href="https://matrix.to/#/@a&lt;b:example.org">A&lt;B</a> <code>A&lt;B</code></p>'
   );
-  assert.equal(codeToHtml('nobody here', mentions), null);
+  assert.equal(formatBody('hey A<B', mentions, false), 'hey <a href="https://matrix.to/#/@a&lt;b:example.org">A&lt;B</a>');
+  assert.equal(formatBody('nobody here', mentions, true), null);
 });
 
 test('markdown pills in the plain body become names', () => {

malice

Commit 6d6a4c34bdc1

Commit `6d6a4c34bdc1`