From c7013f4902272473dfa07dbf0ba2f6fe571e967c Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 29 Apr 2026 00:02:03 +0200
Subject: [PATCH] refactor(mention): extract shared escapeHtml helper

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/utils/mention.spec.ts | 26 +++++++++++++++++++++++++-
 frontend/src/lib/utils/mention.ts      | 24 ++++++++++++++----------
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/utils/mention.spec.ts b/frontend/src/lib/utils/mention.spec.ts
index 5a7982be..4f15bc10 100644
--- a/frontend/src/lib/utils/mention.spec.ts
+++ b/frontend/src/lib/utils/mention.spec.ts
@@ -1,7 +1,31 @@
 import { describe, it, expect } from 'vitest';
-import { detectMention, extractContent, renderBody } from './mention';
+import { detectMention, escapeHtml, extractContent, renderBody } from './mention';
 import type { MentionDTO } from '$lib/types';
 
+// ─── escapeHtml ───────────────────────────────────────────────────────────────
+
+describe('escapeHtml', () => {
+	it('escapes ampersand', () => {
+		expect(escapeHtml('AT&T')).toBe('AT&amp;T');
+	});
+
+	it('escapes less-than and greater-than', () => {
+		expect(escapeHtml('<script>')).toBe('&lt;script&gt;');
+	});
+
+	it('escapes double quote', () => {
+		expect(escapeHtml('say "hi"')).toBe('say &quot;hi&quot;');
+	});
+
+	it('returns empty string unchanged', () => {
+		expect(escapeHtml('')).toBe('');
+	});
+
+	it('escapes ampersand before other entities to avoid double-encoding', () => {
+		expect(escapeHtml('a&<b')).toBe('a&amp;&lt;b');
+	});
+});
+
 // ─── detectMention ────────────────────────────────────────────────────────────
 
 describe('detectMention', () => {
diff --git a/frontend/src/lib/utils/mention.ts b/frontend/src/lib/utils/mention.ts
index 27e7b29d..c0e0f11b 100644
--- a/frontend/src/lib/utils/mention.ts
+++ b/frontend/src/lib/utils/mention.ts
@@ -44,6 +44,18 @@ export function extractContent(
 	return { content: text, mentionedUserIds: [...seen] };
 }
 
+/**
+ * Escapes the four HTML-special characters that can break out of text content
+ * or attribute values. & must be escaped first to avoid double-encoding.
+ */
+export function escapeHtml(str: string): string {
+	return str
+		.replaceAll('&', '&amp;')
+		.replaceAll('<', '&lt;')
+		.replaceAll('>', '&gt;')
+		.replaceAll('"', '&quot;');
+}
+
 /**
  * Renders a comment body as safe HTML:
  * 1. Escapes all HTML-special characters in the raw content
@@ -51,19 +63,11 @@ export function extractContent(
  * 3. Converts newlines to <br>
  */
 export function renderBody(content: string, mentions: MentionDTO[]): string {
-	let escaped = content
-		.replaceAll('&', '&amp;')
-		.replaceAll('<', '&lt;')
-		.replaceAll('>', '&gt;')
-		.replaceAll('"', '&quot;');
+	let escaped = escapeHtml(content);
 
 	for (const mention of mentions) {
 		const displayName = `${mention.firstName} ${mention.lastName}`.trim();
-		const escapedDisplayName = displayName
-			.replaceAll('&', '&amp;')
-			.replaceAll('<', '&lt;')
-			.replaceAll('>', '&gt;')
-			.replaceAll('"', '&quot;');
+		const escapedDisplayName = escapeHtml(displayName);
 		const span = `<span class="mention" data-user-id="${mention.id}">@${escapedDisplayName}</span>`;
 		escaped = escaped.replaceAll(`@${escapedDisplayName}`, span);
 	}