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; }
    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 }}
    />
  );
}