import { proseStyles, resolveCssVarDeclarations, sanitizeIframeHtml, themeStore } from "@allurereport/web-commons"; import type { FunctionalComponent } from "preact"; import { useEffect, useMemo, useState } from "preact/hooks"; import type { AwesomeTestResult } from "types"; import { MetadataButton } from "@/components/MetadataButton"; import { collapsedTrees, toggleTree } from "@/stores/tree"; import * as styles from "./styles.scss"; export type TrDescriptionProps = { id?: string; descriptionHtml: AwesomeTestResult["descriptionHtml"]; }; const getIframeContentHeight = (iframe: HTMLIFrameElement) => { const documentElement = iframe.contentDocument?.documentElement; const body = iframe.contentDocument?.body; const bodyRectHeight = body?.getBoundingClientRect().height ?? 0; const scrollHeight = Math.max(body?.scrollHeight ?? 0, documentElement?.scrollHeight ?? 0); return Math.ceil(Math.max(bodyRectHeight, scrollHeight)); }; export const TrDescription: FunctionalComponent = ({ id, descriptionHtml }) => { const descriptionId = typeof id === "string" ? `${id}-description` : null; const isOpen = !collapsedTrees.value.has(descriptionId); const [blobUrl, setBlobUrl] = useState(""); const [height, setHeight] = useState(0); 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; setHeight(getIframeContentHeight(iframe)); }; return (

{ if (descriptionId !== null) { toggleTree(descriptionId); } }} isOpened={isOpen} /> {isOpen && (

{blobUrl && (