feat(ST-1112): render description as markdown in task-detail-dialog

Solo task detail now renders description via react-markdown +
remark-gfm with prose styling. Sanitizes script/iframe elements.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser 2026-04-29 23:54:26 +02:00
parent 03c90c1fdd
commit 1b09f85e19

View file

@ -3,6 +3,8 @@
import { useRef, useState, useTransition } from 'react'
import Link from 'next/link'
import { toast } from 'sonner'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
@ -132,7 +134,14 @@ function TaskDetailContent({ task, productId, isDemo, onClose }: TaskDetailConte
{task.description && (
<div>
<p className="text-xs font-medium text-muted-foreground mb-1.5">Beschrijving</p>
<p className="text-sm text-foreground whitespace-pre-wrap">{task.description}</p>
<div className="prose prose-sm dark:prose-invert max-w-none text-foreground">
<ReactMarkdown
remarkPlugins={[remarkGfm]}
disallowedElements={['script', 'iframe']}
>
{task.description}
</ReactMarkdown>
</div>
</div>
)}