From 3a478b4f154b3133140153da1819c846b2610a38 Mon Sep 17 00:00:00 2001
From: Nico Domino <yo@ndo.dev>
Date: Thu, 12 Sep 2024 11:53:21 +0200
Subject: [PATCH] fix: reactive markdown rendering (#4888)

---
 apps/desktop/src/lib/components/Markdown.svelte      | 12 ++++++++----
 .../src/lib/components/MarkdownContent.svelte        |  5 ++---
 apps/desktop/src/lib/utils/markdownRenderers.ts      |  3 ++-
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/apps/desktop/src/lib/components/Markdown.svelte b/apps/desktop/src/lib/components/Markdown.svelte
index 25545440f0..981341c3fd 100644
--- a/apps/desktop/src/lib/components/Markdown.svelte
+++ b/apps/desktop/src/lib/components/Markdown.svelte
@@ -4,17 +4,21 @@
 	import { Lexer } from 'marked';
 
 	interface Props {
-		content: string;
+		content: string | undefined;
 	}
 
 	let { content }: Props = $props();
 
-	const lexer = new Lexer(options);
-	const tokens = lexer.lex(content);
+	const tokens = $derived.by(() => {
+		const lexer = new Lexer(options);
+		return lexer.lex(content ?? '');
+	});
 </script>
 
 <div class="markdown-content">
-	<MarkdownContent type="init" {tokens} />
+	{#if tokens}
+		<MarkdownContent type="init" {tokens} />
+	{/if}
 </div>
 
 <style>
diff --git a/apps/desktop/src/lib/components/MarkdownContent.svelte b/apps/desktop/src/lib/components/MarkdownContent.svelte
index 0cae5b4c31..50dfa8494a 100644
--- a/apps/desktop/src/lib/components/MarkdownContent.svelte
+++ b/apps/desktop/src/lib/components/MarkdownContent.svelte
@@ -19,8 +19,6 @@
 		| Tokens.List;
 
 	const { type, ...rest }: Props = $props();
-
-	const CurrentComponent = renderers[type] as Component<Props>;
 </script>
 
 {#if (!type || type === 'init') && 'tokens' in rest && rest.tokens}
@@ -28,6 +26,7 @@
 		<svelte:self {...token} />
 	{/each}
 {:else if renderers[type]}
+	{@const CurrentComponent = renderers[type] as Component<Props>}
 	{#if type === 'list'}
 		{@const listItems = (rest as Extract<Props, { type: 'list' }>).items}
 		<CurrentComponent {...rest}>
@@ -39,7 +38,7 @@
 			{/each}
 		</CurrentComponent>
 	{:else}
-		<CurrentComponent this={renderers[type]} {...rest}>
+		<CurrentComponent {...rest}>
 			{#if 'tokens' in rest && rest.tokens}
 				<svelte:self tokens={rest.tokens} />
 			{:else if 'raw' in rest}
diff --git a/apps/desktop/src/lib/utils/markdownRenderers.ts b/apps/desktop/src/lib/utils/markdownRenderers.ts
index 7055883353..480da90770 100644
--- a/apps/desktop/src/lib/utils/markdownRenderers.ts
+++ b/apps/desktop/src/lib/utils/markdownRenderers.ts
@@ -22,7 +22,8 @@ export const renderers = {
 	list_item: ListItem,
 	heading: Heading,
 	paragraph: Paragraph,
-	init: null
+	init: null,
+	space: null
 };
 
 export const options = {