From cd49c12181bbcdd099827855075457f14ecccbac Mon Sep 17 00:00:00 2001 From: lloydzhou Date: Tue, 20 Aug 2024 23:00:19 +0800 Subject: [PATCH 1/7] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=9F=A5=E7=9C=8B?= =?UTF-8?q?=E5=85=A8=E9=83=A8=E6=8C=89=E9=92=AE=E5=AF=BC=E8=87=B4artifacts?= =?UTF-8?q?=E5=A4=B1=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/markdown.tsx | 7 ++----- app/styles/globals.scss | 2 ++ 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx index 5515164c44b..ae05a458ba9 100644 --- a/app/components/markdown.tsx +++ b/app/components/markdown.tsx @@ -79,6 +79,7 @@ export function PreCode(props: { children: any }) { setMermaidCode((mermaidDom as HTMLElement).innerText); } const htmlDom = ref.current.querySelector("code.language-html"); + const refText = ref.current?.innerText; if (htmlDom) { setHtmlCode((htmlDom as HTMLElement).innerText); } else if (refText?.startsWith(" { - setTimeout(renderArtifacts, 1); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [refText]); - const enableArtifacts = useMemo( () => plugins?.includes(Plugin.Artifacts), [plugins], @@ -119,6 +115,7 @@ export function PreCode(props: { children: any }) { codeElement.style.whiteSpace = "pre-wrap"; } }); + setTimeout(renderArtifacts, 1); } }, []); diff --git a/app/styles/globals.scss b/app/styles/globals.scss index 96d6402dc83..564875b9092 100644 --- a/app/styles/globals.scss +++ b/app/styles/globals.scss @@ -314,7 +314,9 @@ code{ height: fit-content; display: inline-flex; justify-content: center; + pointer-events: none; button{ + pointer-events: auto; margin-top: 3em; margin-bottom: 4em; padding: 5px 16px; From 8b67536c2313b03d19e28896292d6b81ad90247b Mon Sep 17 00:00:00 2001 From: lloydzhou Date: Wed, 21 Aug 2024 02:04:48 +0800 Subject: [PATCH 2/7] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=A4=9A=E4=BD=99?= =?UTF-8?q?=E7=9A=84=E6=9F=A5=E7=9C=8B=E5=85=A8=E9=83=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/components/markdown.tsx | 19 ++++++++----------- app/styles/globals.scss | 2 +- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx index ae05a458ba9..d592e7a34ce 100644 --- a/app/components/markdown.tsx +++ b/app/components/markdown.tsx @@ -64,7 +64,6 @@ export function Mermaid(props: { code: string }) { export function PreCode(props: { children: any }) { const ref = useRef(null); - const refText = ref.current?.innerText; const [mermaidCode, setMermaidCode] = useState(""); const [htmlCode, setHtmlCode] = useState(""); const { height } = useWindowSize(); @@ -79,7 +78,7 @@ export function PreCode(props: { children: any }) { setMermaidCode((mermaidDom as HTMLElement).innerText); } const htmlDom = ref.current.querySelector("code.language-html"); - const refText = ref.current?.innerText; + const refText = ref.current.querySelector("code")?.innerText; if (htmlDom) { setHtmlCode((htmlDom as HTMLElement).innerText); } else if (refText?.startsWith(" {props.children} - {showToggle && collapsed && ( -
- -
- )} + {showToggle && collapsed && ( +
+ +
+ )} ); } diff --git a/app/styles/globals.scss b/app/styles/globals.scss index 564875b9092..e8c10de3f2d 100644 --- a/app/styles/globals.scss +++ b/app/styles/globals.scss @@ -304,7 +304,7 @@ pre { } } -code{ +pre { .show-hide-button { border-radius: 10px; position: absolute; From b0e9a542ba5e9e9edf2984f9b37521b127ccae4e Mon Sep 17 00:00:00 2001 From: lloydzhou Date: Wed, 21 Aug 2024 11:17:00 +0800 Subject: [PATCH 3/7] frat: add reload button --- app/components/artifacts.tsx | 59 ++++++++++++++++++++++++++---------- app/components/markdown.tsx | 12 ++++++++ 2 files changed, 55 insertions(+), 16 deletions(-) diff --git a/app/components/artifacts.tsx b/app/components/artifacts.tsx index 326891e736a..6c0164b9192 100644 --- a/app/components/artifacts.tsx +++ b/app/components/artifacts.tsx @@ -1,4 +1,11 @@ -import { useEffect, useState, useRef, useMemo } from "react"; +import { + useEffect, + useState, + useRef, + useMemo, + forwardRef, + useImperativeHandle, +} from "react"; import { useParams } from "react-router"; import { useWindowSize } from "@/app/utils"; import { IconButton } from "./button"; @@ -8,6 +15,7 @@ import CopyIcon from "../icons/copy.svg"; import DownloadIcon from "../icons/download.svg"; import GithubIcon from "../icons/github.svg"; import LoadingButtonIcon from "../icons/loading.svg"; +import ReloadButtonIcon from "../icons/reload.svg"; import Locale from "../locales"; import { Modal, showToast } from "./ui-lib"; import { copyToClipboard, downloadAs } from "../utils"; @@ -15,14 +23,19 @@ import { Path, ApiPath, REPO_URL } from "@/app/constant"; import { Loading } from "./home"; import styles from "./artifacts.module.scss"; -export function HTMLPreview(props: { - code: string; - autoHeight?: boolean; - height?: number | string; - onLoad?: (title?: string) => void; -}) { - const ref = useRef(null); - const frameId = useRef(nanoid()); +export const HTMLPreview = forwardRef< + { + reload: () => void; + }, + { + code: string; + autoHeight?: boolean; + height?: number | string; + onLoad?: (title?: string) => void; + } +>(function HTMLPreview(props, ref) { + const iframeRef = useRef(null); + const [frameId, setFrameId] = useState(nanoid()); const [iframeHeight, setIframeHeight] = useState(600); const [title, setTitle] = useState(""); /* @@ -37,7 +50,7 @@ export function HTMLPreview(props: { const handleMessage = (e: any) => { const { id, height, title } = e.data; setTitle(title); - if (id == frameId.current) { + if (id == frameId) { setIframeHeight(height); } }; @@ -45,7 +58,13 @@ export function HTMLPreview(props: { return () => { window.removeEventListener("message", handleMessage); }; - }, []); + }, [frameId]); + + useImperativeHandle(ref, () => ({ + reload: () => { + setFrameId(nanoid()); + }, + })); const height = useMemo(() => { if (!props.autoHeight) return props.height || 600; @@ -57,12 +76,12 @@ export function HTMLPreview(props: { }, [props.autoHeight, props.height, iframeHeight]); const srcDoc = useMemo(() => { - const script = ``; + const script = ``; if (props.code.includes("")) { props.code.replace("", "" + script); } return props.code + script; - }, [props.code]); + }, [props.code, frameId]); const handleOnLoad = () => { if (props?.onLoad) { @@ -73,15 +92,15 @@ export function HTMLPreview(props: { return (