Files
pargar/frontend/src/components/safe-markdown.tsx
T
ahp 03610bc3d3 feat: implement 8 features across full stack
- Leaderboard: rank-based percentile tiers (champion/gold/silver/bronze),
    deterministic tie-breaking (xp DESC, user_id ASC)
  - Mentor chat: md: breakpoints, safe-area-inset-bottom padding
  - Learning progress: server-side progressPct, curriculum expansion safety
  - Physical orders: hard-disabled with 410 Gone
  - Certificate approval: pending/issued flow, admin issue/revoke endpoints,
    certificate_requires_approval setting (migration 0031)
  - Draft/publish: is_published on lessons and chapters, admin publish UI
    (migration 0030)
  - Video panel: static thumbnails (no preload), client-side pagination
  - Rich editor: TipTap + tiptap-markdown for lesson descriptions,
    marked + DOMPurify for SafeMarkdown rendering
2026-10-18 10:14:22 +03:30

57 lines
1.2 KiB
TypeScript

"use client";
import { useEffect, useState } from "react";
import { cn } from "@/lib/utils";
export function SafeMarkdown({
text,
className,
lines,
}: {
text: string;
className?: string;
lines?: 2 | 3;
}) {
const [html, setHtml] = useState("");
useEffect(() => {
if (!text) { setHtml(""); return; }
void (async () => {
const { marked } = await import("marked");
const DOMPurify = (await import("dompurify")).default;
const raw = await marked(text);
setHtml(DOMPurify.sanitize(raw));
})();
}, [text]);
if (!html) {
return (
<div
dir="auto"
className={cn(
"break-words text-sm [unicode-bidi:plaintext]",
lines === 2 && "line-clamp-2",
lines === 3 && "line-clamp-3",
!lines && "whitespace-pre-wrap",
className,
)}
>
{text}
</div>
);
}
return (
<div
dir="auto"
className={cn(
"prose prose-sm max-w-none break-words [unicode-bidi:plaintext]",
lines === 2 && "line-clamp-2",
lines === 3 && "line-clamp-3",
className,
)}
dangerouslySetInnerHTML={{ __html: html }}
/>
);
}