fix: reactive markdown rendering (#4888)

Author: ndom91

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>

apps/desktop/src/lib/components/MarkdownContent.svelte

@@ -19,15 +19,14 @@
 		| Tokens.List;
 
 	const { type, ...rest }: Props = $props();
-
-	const CurrentComponent = renderers[type] as Component<Props>;
 </script>
 
 {#if (!type || type === 'init') && 'tokens' in rest && rest.tokens}
 	{#each rest.tokens as token}
 		<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}

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 = {