fix: rich text rendering

src/lib/components/RichTextRenderer.svelte

@@ -2,6 +2,7 @@
 	import type { BlahRichText } from '$lib/richText';
 	import { tw } from '$lib/tw';
 	import RichTextSpan from './RichTextRenderer/RichTextSpan.svelte';
+	import PlainTextRenderer from './RichTextRenderer/PlainTextRenderer.svelte';
 
 	export let content: BlahRichText;
 	let className = '';
@@ -9,20 +10,14 @@
 </script>
 
 <div class={tw('rich-text', className)}>
-	{#each content as block}
-		<p>
-			{#each block as span}
-				{#if typeof span === 'string'}
-					{#if span === ''}
-						<br />
-					{:else}
-						{span}
-					{/if}
-				{:else}
-					{@const [text, attributes] = span}
-					<RichTextSpan {text} {attributes} />
-				{/if}
-			{/each}
-		</p>
-	{/each}
+	<p>
+		{#each content as span}
+			{#if typeof span === 'string'}
+				<PlainTextRenderer text={span} />
+			{:else}
+				{@const [text, attributes] = span}
+				<RichTextSpan {text} {attributes} />
+			{/if}
+		{/each}
+	</p>
 </div>

src/lib/components/RichTextRenderer/PlainTextRenderer.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	export let text: string;
+</script>
+
+{#each text.split('\n') as segment, idx}
+	{#if idx > 0}
+		<br />
+	{/if}
+	{segment}
+{/each}

src/lib/components/RichTextRenderer/RichTextSpan.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { BlahRichTextSpanAttributes } from '$lib/richText';
+	import PlainTextRenderer from './PlainTextRenderer.svelte';
 
 	// From outside to inside, better align this with the RichTextInput
 	const renderOrder: (keyof BlahRichTextSpanAttributes)[] = [
@@ -30,8 +31,10 @@
 	const nextAttribute = attribute ? (renderOrder[renderOrder.indexOf(attribute) + 1] ?? '') : null;
 </script>
 
-{#if attribute === '' || !attributes[attribute]}
-	{text}
+{#if attribute === ''}
+	<PlainTextRenderer {text} />
+{:else if !attributes[attribute]}
+	<svelte:self {...$$props} attribute={nextAttribute} />
 {:else if attribute === 'link'}
 	<a href={attributes.link} target="_blank">
 		<svelte:self {...$$props} attribute={nextAttribute} />