Write text blocks with formatting

Tiptap replaces the plain textarea: bold, italic, subheading, lists and
links. Stored as Markdown so API clients keep reading and writing the
same field, rendered with react-markdown.

src/components/blocks/TextBlock.tsx

@@ -1,22 +1,23 @@
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 import { readString } from './data'
 import type { BlockProps } from './types'
 
 export function TextBlock({ data }: BlockProps) {
 	const text = readString(data, 'text', 'body', 'content')
 
-	if (text === undefined) {
+	if (text === undefined || text.trim() === '') {
 		return null
 	}
 
-	const paragraphs = text.split(/\n{2,}/).map(part => part.trim()).filter(part => part !== '')
-
 	return (
-		<div className="flex flex-col gap-4">
-			{paragraphs.map((paragraph, index) => (
-				<p key={index} className="m-0 text-base text-ink">
-					{paragraph}
-				</p>
-			))}
+		<div className="prose-logbuch">
+			<Markdown
+				remarkPlugins={[remarkGfm]}
+				components={{ a: props => <a {...props} rel="noreferrer" /> }}
+			>
+				{text}
+			</Markdown>
 		</div>
 	)
 }