pargar/frontend/src/components/safe-markdown.tsx

"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; }
    let cancelled = false;
    void (async () => {
      const { marked } = await import("marked");
      const DOMPurify = (await import("dompurify")).default;
      const raw = await marked(text);
      if (!cancelled) setHtml(DOMPurify.sanitize(raw));
    })();
    return () => { cancelled = true; };
  }, [text]);

  const mdClasses =
    "[&_strong]:font-bold [&_em]:italic [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:text-[0.85em] [&_h2]:text-base [&_h2]:font-bold [&_h2]:mt-3 [&_h3]:text-sm [&_h3]:font-bold [&_h3]:mt-2 [&_ul]:list-disc [&_ul]:pr-5 [&_ol]:list-decimal [&_ol]:pr-5 [&_li]:mt-0.5 [&_p]:leading-relaxed [&_p+p]:mt-2 [&_a]:underline [&_a]:text-primary";

  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(
        "break-words text-sm [unicode-bidi:plaintext]",
        mdClasses,
        lines === 2 && "line-clamp-2",
        lines === 3 && "line-clamp-3",
        className,
      )}
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
}