fix(topic): keep URLs, aliases and user IDs intact in room topics (#262)

The topic editor's hand-rolled markdown treated any single _ or * as
emphasis, inside URLs and #alias:server / @user:server too, and built the
plain topic by stripping tags, so the underscores were lost for every
client. It also left " unescaped in link targets.

buildTopicContent() now uses the composer's inline markdown parser (links,
bare URLs and HTML escaping as for messages) and treats _ between two
letters/digits as literal (CommonMark), except inside code, link targets
and URLs. The plain topic drops the markers but keeps links as
"text (url)" and decodes entities.

Fixes #262

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5

LOTUS_FEATURES.md

@@ -233,7 +233,7 @@ All decoration files are 256×256 APNGs. They animate natively in all modern bro
 Decoration preference is stored in the public Matrix profile field `io.lotus.avatar_decoration` (a slug string, e.g. `lotus_flower`). Any Lotus Chat user viewing your profile sees your current decoration.
 
 **CDN:**
-Files are self-hosted on the Lotus Nextcloud instance. Direct access: `https://drive.lotusguild.org/public.php/dav/files/{token}/cinny-decorations/{slug}.png`. `<img>` elements load cross-origin freely — no CORS headers needed.
+Static files at `https://chat.lotusguild.org/decorations/{slug}.png` (thumbnails: `thumbs/{slug}.webp`), cached for a week. They come from the versioned `avatar-decorations` package in Gitea's package registry, installed by the matrix repo's LXC 106 deploy (see its README, "Avatar decorations"). To add or replace decorations, publish a new package version there, then update the catalog in `avatarDecorations.ts`. They used to be served from Nextcloud (matrix #22). `<img>` elements load cross-origin freely, so no CORS headers are needed.
 
 **Module-level cache with in-flight deduplication:**
 `useAvatarDecoration(userId)` fetches the profile field once per user per session. A `Map<userId, slug|null>` cache prevents redundant requests; a second `pending` waiters map ensures multiple components requesting the same userId simultaneously share one HTTP request rather than firing duplicates.

package-lock.json

@@ -81,7 +81,7 @@
       },
       "devDependencies": {
         "@axe-core/playwright": "4.13.0",
-        "@lotusguild/element-call-embedded": "0.25.0-lotus.25",
+        "@lotusguild/element-call-embedded": "0.25.0-lotus.26",
         "@playwright/test": "1.63.0",
         "@rollup/plugin-inject": "5.0.5",
         "@rollup/plugin-wasm": "6.2.2",
@@ -2695,9 +2695,9 @@
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
     "node_modules/@lotusguild/element-call-embedded": {
-      "version": "0.25.0-lotus.25",
-      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.25/element-call-embedded-0.25.0-lotus.25.tgz",
-      "integrity": "sha512-Vvw6B+QoG0/qFJcBzhlAbE+vnk83DikpeeF2xbygpoHfmG9r1H/mS47V91jAMH2vmNbGiALwFlLbJjEET43A2g==",
+      "version": "0.25.0-lotus.26",
+      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.26/element-call-embedded-0.25.0-lotus.26.tgz",
+      "integrity": "sha512-u0gFV/ne61MHVkl2JFY6TjC0C/vY2oYTz6dFaDtAmdLUBH6gU+6ar0QOr5xs9bhr4+HT8CSBibU8mLTR+ByjKA==",
       "dev": true
     },
     "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {

package.json

@@ -108,7 +108,7 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "4.13.0",
-    "@lotusguild/element-call-embedded": "0.25.0-lotus.25",
+    "@lotusguild/element-call-embedded": "0.25.0-lotus.26",
     "@playwright/test": "1.63.0",
     "@rollup/plugin-inject": "5.0.5",
     "@rollup/plugin-wasm": "6.2.2",

src/app/features/common-settings/general/RoomProfile.tsx

@@ -52,8 +52,7 @@ import { settingsAtom } from '../../../state/settings';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useAlive } from '../../../hooks/useAlive';
 import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
-
-const MARKDOWN_PATTERN = /(\*\*|__|\*|_|~~|`|\[.+?\]\(.+?\))/;
+import { buildTopicContent } from '../../../utils/topicMarkdown';
 
 function wrapSelection(textarea: HTMLTextAreaElement, syntax: string, placeholder: string) {
   const start = textarea.selectionStart;
@@ -71,30 +70,6 @@ function wrapSelection(textarea: HTMLTextAreaElement, syntax: string, placeholde
   textarea.setSelectionRange(cursorStart, cursorEnd);
 }
 
-function topicMarkdownToHtml(text: string): string {
-  return text
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-    .replace(/__(.+?)__/g, '<strong>$1</strong>')
-    .replace(/\*(.+?)\*/g, '<em>$1</em>')
-    .replace(/_(.+?)_/g, '<em>$1</em>')
-    .replace(/~~(.+?)~~/g, '<del>$1</del>')
-    .replace(/`(.+?)`/g, '<code>$1</code>')
-    .replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2">$1</a>')
-    .replace(/\n/g, '<br>');
-}
-
-function buildTopicContent(topic: string): Record<string, string> {
-  if (!MARKDOWN_PATTERN.test(topic)) return { topic };
-  const formattedBody = topicMarkdownToHtml(topic);
-  // Use HTML-stripped text as the plain topic so the header shows clean text, not raw markdown syntax
-  const plainTopic = formattedBody.replace(/<br>/g, '\n').replace(/<[^>]+>/g, '');
-
-  return { topic: plainTopic, format: 'org.matrix.custom.html', formatted_body: formattedBody };
-}
-
 type RoomProfileEditProps = {
   canEditAvatar: boolean;
   canEditName: boolean;

src/app/features/lotus/avatarDecorations.ts

@@ -3,8 +3,10 @@
 // of this file at runtime (by regex) instead of re-declaring it, so the two can
 // never drift. If you migrate the CDN, change it here ONLY — keep the
 // `export const DECORATION_CDN = '...'` shape so the sync script can still parse it.
-export const DECORATION_CDN =
-  'https://drive.lotusguild.org/public.php/dav/files/bHswJ9pNKp2t26N/cinny-decorations';
+// matrix #22: static files on chat.lotusguild.org (a versioned package installed
+// by the matrix repo's LXC 106 deploy), not Nextcloud's public DAV. Absolute, so
+// the desktop app and the Element Call fork's origin allowlist both work.
+export const DECORATION_CDN = 'https://chat.lotusguild.org/decorations';
 
 // Runtime base. A deployment can repoint the decorations at a different host
 // without editing the catalog literal above (which scripts/syncDecorations.mjs

src/app/utils/topicMarkdown.test.ts

@@ -0,0 +1,72 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { buildTopicContent } from './topicMarkdown';
+
+test('a URL with underscores is sent verbatim (#262)', () => {
+  const t = 'Rules: https://wiki.lotusguild.org/en/server_rules_and_faq';
+  assert.deepEqual(buildTopicContent(t), { topic: t });
+});
+
+test('a markdown link keeps its underscored URL in both fields (#262)', () => {
+  const c = buildTopicContent('[Our wiki](https://wiki.example.org/my_cool_page)');
+  assert.ok('formatted_body' in c);
+  assert.match(c.formatted_body, /href="https:\/\/wiki\.example\.org\/my_cool_page"/);
+  assert.equal(c.topic, 'Our wiki (https://wiki.example.org/my_cool_page)');
+});
+
+test('room aliases and user IDs with underscores are untouched (#262)', () => {
+  for (const t of [
+    'Join #my_room_name:matrix.org',
+    'Ask @some_user_x:matrix.org',
+    'see snake_case_word',
+  ]) {
+    assert.deepEqual(buildTopicContent(t), { topic: t });
+  }
+});
+
+test('emphasis still works at word boundaries', () => {
+  const c = buildTopicContent('this is _really_ *great* and **bold**');
+  assert.ok('formatted_body' in c);
+  assert.match(c.formatted_body, /<i data-md="_">really<\/i>/);
+  assert.match(c.formatted_body, /<i data-md="\*">great<\/i>/);
+  assert.match(c.formatted_body, /<strong data-md="\*\*">bold<\/strong>/);
+  assert.equal(c.topic, 'this is really great and bold');
+});
+
+test('emphasis around an alias keeps the alias intact', () => {
+  const c = buildTopicContent('**Join #my_room:matrix.org**');
+  assert.ok('formatted_body' in c);
+  assert.match(c.formatted_body, /<strong data-md="\*\*">Join #my_room:matrix\.org<\/strong>/);
+  assert.equal(c.topic, 'Join #my_room:matrix.org');
+});
+
+test('inline code keeps its underscores and no backslashes appear', () => {
+  const c = buildTopicContent('run `a_b_c` now');
+  assert.ok('formatted_body' in c);
+  assert.match(c.formatted_body, /<code data-md="`">a_b_c<\/code>/);
+  assert.equal(c.topic, 'run a_b_c now');
+});
+
+test('a double quote in a link target cannot break out of the attribute (#262)', () => {
+  const c = buildTopicContent('[x](https://a" onclick="alert(1))');
+  assert.ok('formatted_body' in c);
+  assert.doesNotMatch(c.formatted_body, /" onclick="/);
+});
+
+test('HTML in the topic is escaped, and the plain topic shows it as typed', () => {
+  const c = buildTopicContent('**<b>hi</b> & bye**');
+  assert.ok('formatted_body' in c);
+  assert.match(c.formatted_body, /&lt;b&gt;hi&lt;\/b&gt; &amp; bye/);
+  assert.equal(c.topic, '<b>hi</b> & bye');
+});
+
+test('line breaks become <br> and survive in the plain topic', () => {
+  const c = buildTopicContent('**Rules**\nBe nice');
+  assert.ok('formatted_body' in c);
+  assert.equal(c.formatted_body, '<strong data-md="**">Rules</strong><br>Be nice');
+  assert.equal(c.topic, 'Rules\nBe nice');
+});
+
+test('plain text with no markdown is sent as typed', () => {
+  assert.deepEqual(buildTopicContent("It's <fun> & games"), { topic: "It's <fun> & games" });
+});

src/app/utils/topicMarkdown.ts

@@ -0,0 +1,63 @@
+import { parseInlineMD } from '../plugins/markdown';
+import { sanitizeText } from './sanitize';
+
+/**
+ * Room topic markdown → `m.room.topic` content (#262).
+ *
+ * Uses the composer's inline markdown parser (the same rules as messages: links,
+ * bare URLs and `"` are handled), with one topic-specific guard: an `_` between
+ * two letters/digits is literal, as in CommonMark. Topics are full of
+ * `#room_alias:server`, `@user_name:server` and snake_case paths, which the
+ * shared parser would otherwise turn into italics and, worse, drop from the
+ * plain `topic` that every other client shows.
+ */
+
+// Spans the guard must not touch: inline code, link targets, bare URLs.
+const PROTECTED = /(`[^`\n]*`|\]\([^)\n]*\)|https?:\/\/[^\s<>"]+)/;
+const INTRAWORD_UNDERSCORES = /(?<=[\p{L}\p{N}])_+(?=[\p{L}\p{N}])/gu;
+
+const escapeIntrawordUnderscores = (line: string): string =>
+  line
+    .split(PROTECTED)
+    .map((part, i) =>
+      // split() with one capture group puts the protected spans at odd indexes.
+      i % 2 === 1 ? part : part.replace(INTRAWORD_UNDERSCORES, (m) => m.replace(/_/g, '\\_')),
+    )
+    .join('');
+
+const ENTITIES: Record<string, string> = {
+  '&amp;': '&',
+  '&lt;': '<',
+  '&gt;': '>',
+  '&quot;': '"',
+  '&#39;': "'",
+};
+const decodeEntities = (s: string): string =>
+  s.replace(/&(?:amp|lt|gt|quot|#39);/g, (e) => ENTITIES[e]);
+
+/** Readable plain text for `topic`: markers dropped, links kept as "text (url)". */
+const htmlToPlain = (html: string): string =>
+  decodeEntities(
+    html
+      .replace(/<a\b[^>]*\bhref="([^"]*)"[^>]*>(.*?)<\/a>/g, (_m, href: string, label: string) => {
+        const text = label.replace(/<[^>]+>/g, '');
+        return text === href ? href : `${text} (${href})`;
+      })
+      .replace(/<br>/g, '\n')
+      .replace(/<[^>]+>/g, ''),
+  );
+
+export type TopicContent =
+  | { topic: string }
+  | { topic: string; format: 'org.matrix.custom.html'; formatted_body: string };
+
+export function buildTopicContent(text: string): TopicContent {
+  const lines = text.split('\n');
+  const html = lines
+    .map((line) => parseInlineMD(sanitizeText(escapeIntrawordUnderscores(line))))
+    .join('<br>');
+  const plainHtml = lines.map(sanitizeText).join('<br>');
+  // No markdown at all: send the text as typed, without a formatted body.
+  if (html === plainHtml) return { topic: text };
+  return { topic: htmlToPlain(html), format: 'org.matrix.custom.html', formatted_body: html };
+}