import { proseStyles, resolveCssVarDeclarations, sanitizeIframeHtml, themeStore } from "@allurereport/web-commons"; import type { FunctionalComponent } from "preact"; import { useEffect, useMemo, useState } from "preact/hooks"; import type { ClassicTestResult } from "types"; import { MetadataButton } from "@/components/MetadataButton"; import * as styles from "./styles.scss"; export type TestResultDescriptionProps = { descriptionHtml: ClassicTestResult["descriptionHtml"]; }; const MIN_HEIGHT = 120; export const TestResultDescription: FunctionalComponent = ({ descriptionHtml }) => { const [isOpen, setIsOpen] = useState(true); const [blobUrl, setBlobUrl] = useState(""); const [height, setHeight] = useState(MIN_HEIGHT); const currentTheme = themeStore.value.current; const sanitized = useMemo(() => (descriptionHtml ? sanitizeIframeHtml(descriptionHtml) : ""), [descriptionHtml]); useEffect(() => { if (!sanitized) { setBlobUrl(""); return; } const iframeThemeVars = resolveCssVarDeclarations(proseStyles); const html = ` ${sanitized} `; const blob = new Blob([html], { type: "text/html" }); const url = URL.createObjectURL(blob); setBlobUrl(url); return () => URL.revokeObjectURL(url); }, [currentTheme, sanitized]); const handleLoad = (e: Event) => { const iframe = e.currentTarget as HTMLIFrameElement; const documentElement = iframe.contentDocument?.documentElement; const body = iframe.contentDocument?.body; const scrollHeight = Math.max(documentElement?.scrollHeight ?? 0, body?.scrollHeight ?? 0); setHeight(Math.max(scrollHeight, MIN_HEIGHT)); }; return (

{isOpen && (

{blobUrl && (