From 3a10f58b28ea3e485bc5abb45d96d18f0e7c3aee Mon Sep 17 00:00:00 2001
From: lloydzhou <lloydzhou@qq.com>
Date: Tue, 23 Jul 2024 14:33:41 +0800
Subject: [PATCH] add preview html code

---
 app/components/markdown.tsx | 33 +++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx
index 1afd7de3b..e870be877 100644
--- a/app/components/markdown.tsx
+++ b/app/components/markdown.tsx
@@ -60,21 +60,49 @@ export function Mermaid(props: { code: string }) {
   );
 }
 
+export function HTMLPreview(props: { code: string }) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  return (
+    <div
+      className="no-dark html"
+      style={{
+        cursor: "pointer",
+        overflow: "auto",
+      }}
+      ref={ref}
+      onClick={() => console.log("click")}
+    >
+      <iframe
+        frameBorder={0}
+        sandbox="allow-scripts"
+        style={{ width: "100%", height: 400 }}
+        srcdoc={props.code}
+      ></iframe>
+    </div>
+  );
+}
+
 export function PreCode(props: { children: any }) {
   const ref = useRef<HTMLPreElement>(null);
   const refText = ref.current?.innerText;
   const [mermaidCode, setMermaidCode] = useState("");
+  const [htmlCode, setHtmlCode] = useState("");
 
-  const renderMermaid = useDebouncedCallback(() => {
+  const renderArtifacts = useDebouncedCallback(() => {
     if (!ref.current) return;
     const mermaidDom = ref.current.querySelector("code.language-mermaid");
     if (mermaidDom) {
       setMermaidCode((mermaidDom as HTMLElement).innerText);
     }
+    const htmlDom = ref.current.querySelector("code.language-html");
+    if (htmlDom) {
+      setHtmlCode((htmlDom as HTMLElement).innerText);
+    }
   }, 600);
 
   useEffect(() => {
-    setTimeout(renderMermaid, 1);
+    setTimeout(renderArtifacts, 1);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [refText]);
 
@@ -83,6 +111,7 @@ export function PreCode(props: { children: any }) {
       {mermaidCode.length > 0 && (
         <Mermaid code={mermaidCode} key={mermaidCode} />
       )}
+      {htmlCode.length > 0 && <HTMLPreview code={htmlCode} key={htmlCode} />}
       <pre ref={ref}>
         <span
           className="copy-code-button"