import build from "https://esm.sh/build";
const ret = await build({
dependencies: {
"react-dom": "18.3.1",
"react": "18.3.1",
"tldraw": "2.3.0",
"@reecelucas/react-use-hotkeys": "2.0.0",
},
source: `
export * as ReactDOM from "react-dom";
export * as React from "react";
export * as tldraw from "tldraw";
import useHotkeys from "@reecelucas/react-use-hotkeys";
export { useHotkeys };
`,
});
const {
ReactDOM,
React,
tldraw,
useHotkeys,
} = await import(ret.url + "?bundle-deps");
const { useCallback, useRef, useEffect } = React;
const {
Tldraw,
useEditor,
useToasts,
createShapeId,
BaseBoxShapeUtil,
DefaultSpinner,
HTMLContainer,
SvgExportContext,
TLBaseShape,
TldrawUiIcon,
Vec,
stopEventPropagation,
toDomPrecision,
useIsEditing,
useValue,
sortByIndex,
} = tldraw;
function MakeRealButton() {
const editor = useEditor();
const { addToast } = useToasts();
const handleClick = useCallback(async () => {
try {
const selectedShapes = editor.getSelectedShapes();
if (selectedShapes.length === 0) throw Error("First select something to make real.");
const { maxX, midY } = editor.getSelectionPageBounds();
const text = `export default async function main(req: Request): Promise<Response> {
return new Response("Hello, World!", {
headers: { "Content-Type": "text/plain" },
});
}`;
let previewHeight = (540 * 2) / 3;
let previewWidth = (960 * 2) / 3;
const prompt = `Make an HTTP Val that outputs HTML (there is no need to import stevekrouse/html).\n`
+ selectedShapes.filter((s) => s.type === "text").map((s) => s.props.text).join("\n");
const loadValName = selectedShapes.filter((s) =>
s.type === "preview" && s.props.finishedValName
).map((s) => s.props.finishedValName)[0] || "";
const newShapeId = createShapeId();
editor.createShape({
id: `${newShapeId}_preview`,
type: "preview",
x: maxX + 60,
y: midY - previewHeight / 2,
props: {
prompt,
loadValName,
w: previewWidth,
h: previewHeight,
iframeWidth: 800,
source: "",
},
meta: {},
});
} catch (e: any) {
console.error(e);
addToast({
title: "Something went wrong",
description: `${e.message.slice(0, 200)}`,
});