2022-10-10 12:50:21 +00:00
|
|
|
import { useEffect, useRef } from "../deps.ts";
|
|
|
|
|
import { Editor } from "../editor.tsx";
|
|
|
|
|
import { PanelConfig } from "../types.ts";
|
|
|
|
|
|
2022-12-22 15:20:05 +00:00
|
|
|
export const panelHtml = `<!DOCTYPE html>
|
2022-10-10 12:50:21 +00:00
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<base target="_top">
|
|
|
|
|
<script>
|
2023-01-16 09:40:16 +00:00
|
|
|
const pendingRequests = new Map();
|
|
|
|
|
let syscallReqId = 0;
|
|
|
|
|
|
|
|
|
|
self.syscall = async (name, ...args) => {
|
|
|
|
|
return await new Promise((resolve, reject) => {
|
|
|
|
|
syscallReqId++;
|
|
|
|
|
pendingRequests.set(syscallReqId, { resolve, reject });
|
|
|
|
|
window.parent.postMessage({
|
|
|
|
|
type: "syscall",
|
|
|
|
|
id: syscallReqId,
|
|
|
|
|
name,
|
|
|
|
|
args,
|
|
|
|
|
}, "*");
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
2022-10-10 12:50:21 +00:00
|
|
|
window.addEventListener("message", (message) => {
|
|
|
|
|
const data = message.data;
|
|
|
|
|
switch (data.type) {
|
|
|
|
|
case "html":
|
|
|
|
|
document.body.innerHTML = data.html;
|
|
|
|
|
if (data.script) {
|
|
|
|
|
try {
|
|
|
|
|
eval(data.script);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error("Error evaling script", e);
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-01-16 09:40:16 +00:00
|
|
|
break;
|
|
|
|
|
case "syscall-response":
|
|
|
|
|
{
|
|
|
|
|
const syscallId = data.id;
|
|
|
|
|
const lookup = pendingRequests.get(syscallId);
|
|
|
|
|
if (!lookup) {
|
|
|
|
|
console.log(
|
|
|
|
|
"Current outstanding requests",
|
|
|
|
|
pendingRequests,
|
|
|
|
|
"looking up",
|
|
|
|
|
syscallId,
|
|
|
|
|
);
|
|
|
|
|
throw Error("Invalid request id");
|
|
|
|
|
}
|
|
|
|
|
pendingRequests.delete(syscallId);
|
|
|
|
|
if (data.error) {
|
|
|
|
|
lookup.reject(new Error(data.error));
|
|
|
|
|
} else {
|
|
|
|
|
lookup.resolve(data.result);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2022-10-10 12:50:21 +00:00
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function sendEvent(name, ...args) {
|
2022-12-22 15:20:05 +00:00
|
|
|
window.parent.postMessage({ type: "event", name, args, }, "*");
|
|
|
|
|
}
|
|
|
|
|
function api(obj) {
|
|
|
|
|
window.parent.postMessage(obj, "*");
|
|
|
|
|
}
|
|
|
|
|
function updateHeight() {
|
|
|
|
|
api({
|
|
|
|
|
type: "setHeight",
|
|
|
|
|
height: document.documentElement.offsetHeight,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function loadJsByUrl(url) {
|
|
|
|
|
const script = document.createElement("script");
|
|
|
|
|
script.src = url;
|
|
|
|
|
|
|
|
|
|
return new Promise((resolve) => {
|
|
|
|
|
script.onload = resolve;
|
|
|
|
|
|
|
|
|
|
document.documentElement.firstChild.appendChild(script);
|
|
|
|
|
});
|
2022-10-10 12:50:21 +00:00
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
Send me HTML
|
|
|
|
|
</body>
|
|
|
|
|
</html>`;
|
|
|
|
|
|
|
|
|
|
export function Panel({
|
|
|
|
|
config,
|
|
|
|
|
editor,
|
|
|
|
|
}: {
|
|
|
|
|
config: PanelConfig;
|
|
|
|
|
editor: Editor;
|
|
|
|
|
}) {
|
|
|
|
|
const iFrameRef = useRef<HTMLIFrameElement>(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;
|
|
|
|
|
}
|
2023-01-16 09:40:16 +00:00
|
|
|
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) => {
|
|
|
|
|
iFrameRef.current!.contentWindow!.postMessage({
|
|
|
|
|
type: "syscall-response",
|
|
|
|
|
id,
|
|
|
|
|
result,
|
|
|
|
|
});
|
|
|
|
|
}).catch((e: any) => {
|
|
|
|
|
iFrameRef.current!.contentWindow!.postMessage({
|
|
|
|
|
type: "syscall-response",
|
|
|
|
|
id,
|
|
|
|
|
error: e.message,
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
break;
|
|
|
|
|
}
|
2022-10-10 12:50:21 +00:00
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
globalThis.addEventListener("message", messageListener);
|
|
|
|
|
return () => {
|
|
|
|
|
globalThis.removeEventListener("message", messageListener);
|
|
|
|
|
};
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="sb-panel" style={{ flex: config.mode }}>
|
|
|
|
|
<iframe srcDoc={panelHtml} ref={iFrameRef} />
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
