From beb4209baf8ad434fcc7c31078ee580d4449aeac Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <cabassut.frederic@gmail.com>
Date: Wed, 8 Apr 2026 22:00:06 +0200
Subject: [PATCH] fix: decode HTML entities in unlinkifyHtml and fix
 indentation

- Add entity decoding (&amp; &lt; &gt; &quot;) to unlinkifyHtml to
  prevent double-encoding on contenteditable edit cycles
- Fix indentation of LinkPopover import and state declaration
- Move LinkPopover inside root div
- Add unit test for entity decoding

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/lib/components/Checklist.svelte | 14 +++++++-------
 src/lib/utils/checklist.test.ts     |  6 ++++++
 src/lib/utils/checklist.ts          |  7 ++++++-
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/Checklist.svelte b/src/lib/components/Checklist.svelte
index ffe5fc2..bf9c0fb 100644
--- a/src/lib/components/Checklist.svelte
+++ b/src/lib/components/Checklist.svelte
@@ -7,7 +7,7 @@
 	import { dragHandleZone, dragHandle, type DndEvent } from 'svelte-dnd-action';
 	import { flip } from 'svelte/animate';
 	import { type ChecklistItem, generateId, parseChecklist, serializeChecklist, toggleItemWithCascade, indentItem, outdentItem, linkifyText, unlinkifyHtml } from '$lib/utils/checklist.js';
-import LinkPopover from './LinkPopover.svelte';
+	import LinkPopover from './LinkPopover.svelte';
 
 	interface Props {
 		content: string;
@@ -20,7 +20,7 @@ import LinkPopover from './LinkPopover.svelte';
 	let items = $state<ChecklistItem[]>(parseChecklist(content));
 	let doneExpanded = $state(true);
 	const flipDurationMs = 150;
-let linkPopover = $state<{ url: string; anchor: DOMRect } | null>(null);
+	let linkPopover = $state<{ url: string; anchor: DOMRect } | null>(null);
 
 	// Track the last content we emitted so we can distinguish self-originated
 	// changes from external ones (sync, history restore, etc.)
@@ -314,7 +314,7 @@ let linkPopover = $state<{ url: string; anchor: DOMRect } | null>(null);
 					data-testid="checklist-input"
 					data-item-id={item.id}
 					role="textbox"
-				tabindex="0"
+					tabindex="0"
 				>{@html linkifyText(item.text)}</div>
 				<button
 					onclick={() => removeItem(item.id)}
@@ -382,9 +382,9 @@ let linkPopover = $state<{ url: string; anchor: DOMRect } | null>(null);
 			{/if}
 		</div>
 	{/if}
+
+	{#if linkPopover}
+		<LinkPopover url={linkPopover.url} anchor={linkPopover.anchor} onClose={() => (linkPopover = null)} />
+	{/if}
 </div>
 
-{#if linkPopover}
-	<LinkPopover url={linkPopover.url} anchor={linkPopover.anchor} onClose={() => (linkPopover = null)} />
-{/if}
-
diff --git a/src/lib/utils/checklist.test.ts b/src/lib/utils/checklist.test.ts
index 8171468..d4d5e14 100644
--- a/src/lib/utils/checklist.test.ts
+++ b/src/lib/utils/checklist.test.ts
@@ -312,4 +312,10 @@ describe('unlinkifyHtml', () => {
 	it('handles div and br tags from contenteditable', () => {
 		expect(unlinkifyHtml('line1<br>line2')).toBe('line1line2');
 	});
+
+	it('decodes HTML entities after stripping tags', () => {
+		expect(unlinkifyHtml('Tom &amp; Jerry')).toBe('Tom & Jerry');
+		expect(unlinkifyHtml('&lt;b&gt;bold&lt;/b&gt;')).toBe('<b>bold</b>');
+		expect(unlinkifyHtml('say &quot;hello&quot;')).toBe('say "hello"');
+	});
 });
diff --git a/src/lib/utils/checklist.ts b/src/lib/utils/checklist.ts
index cd5db59..2f51a48 100644
--- a/src/lib/utils/checklist.ts
+++ b/src/lib/utils/checklist.ts
@@ -189,5 +189,10 @@ export function linkifyText(text: string): string {
 
 export function unlinkifyHtml(html: string): string {
 	if (!html) return '';
-	return html.replace(/<[^>]*>/g, '');
+	return html
+		.replace(/<[^>]*>/g, '')
+		.replace(/&amp;/g, '&')
+		.replace(/&lt;/g, '<')
+		.replace(/&gt;/g, '>')
+		.replace(/&quot;/g, '"');
 }