import { useEffect, useRef } from "../deps.ts"; import { Editor } from "../editor.tsx"; import { PanelConfig } from "../types.ts"; export const panelHtml = ` Send me HTML `; export function Panel({ config, editor, }: { config: PanelConfig; editor: Editor; }) { const iFrameRef = useRef(null); useEffect(() => { function loadContent() { if (iFrameRef.current?.contentWindow) { iFrameRef.current.contentWindow.postMessage({ type: "html", html: config.html, script: config.script, }); } } if (!iFrameRef.current) { return; } const iframe = iFrameRef.current; iframe.onload = loadContent; loadContent(); return () => { iframe.onload = null; }; }, [config.html, config.script]); useEffect(() => { const messageListener = (evt: any) => { if (evt.source !== iFrameRef.current!.contentWindow) { return; } const data = evt.data; if (!data) { return; } switch (data.type) { case "event": editor.dispatchAppEvent(data.name, ...data.args); break; case "syscall": { const { id, name, args } = data; editor.system.localSyscall("core", name, args).then((result) => { if (!iFrameRef.current?.contentWindow) { // iFrame already went away return; } iFrameRef.current!.contentWindow!.postMessage({ type: "syscall-response", id, result, }); }).catch((e: any) => { if (!iFrameRef.current?.contentWindow) { // iFrame already went away return; } iFrameRef.current!.contentWindow!.postMessage({ type: "syscall-response", id, error: e.message, }); }); break; } } }; globalThis.addEventListener("message", messageListener); return () => { globalThis.removeEventListener("message", messageListener); }; }, []); return (