- 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
57 lines
1.2 KiB
TypeScript
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 }}
|
|
/>
|
|
);
|
|
}
|