Spaces:
Running
Running
File size: 7,786 Bytes
fc69895 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 |
<script lang="ts">
import Modal from "./Modal.svelte";
import { onMount, onDestroy } from "svelte";
import CarbonCopy from "~icons/carbon/copy";
interface Props {
html: string;
onclose?: () => void;
}
let { html, onclose }: Props = $props();
let iframeEl: HTMLIFrameElement | undefined = $state();
let channel = $state(`preview_${Math.random().toString(36).slice(2)}`);
let errors: { message: string; stack?: string }[] = $state([]);
function buildSrcdoc(content: string, channel: string): string {
const trimmed = content.trimStart();
const svgPattern = /^(?:<\?xml[^>]*>\s*)?(?:<!doctype\s+svg[^>]*>\s*)?<svg[\s>]/i;
const baseTag = '<base target="_blank">';
const disabledLinkStyles = `<style>
a[data-chatui-link-disabled] {}
</style>`;
const endScriptTag = "</scr" + "ipt>";
const errorHook = `\n<script>\n(function(){\n function send(detail){\n try{ parent.postMessage({ type: 'chatui.preview.error', channel: '${channel}', detail: detail }, '*'); }catch(e){}\n }\n function markDisabled(anchor){\n if (!anchor || anchor.dataset.chatuiLinkDisabled === 'true') return;\n anchor.dataset.chatuiLinkDisabled = 'true';\n var note = 'Link disabled in preview';\n var title = anchor.getAttribute('title');\n if (!title) {\n anchor.setAttribute('title', note);\n } else if (title.indexOf(note) === -1) {\n anchor.setAttribute('title', title + ' — ' + note);\n }\n }\n function disableAnchors(scope){\n try {\n var root = scope && scope.querySelectorAll ? scope : document;\n var anchors = root.querySelectorAll ? root.querySelectorAll('a') : [];\n for (var i = 0; i < anchors.length; i++) {\n markDisabled(anchors[i]);\n }\n } catch (err) {}\n }\n function nearestAnchor(node){\n while (node && node !== document) {\n if (node.tagName && node.tagName.toLowerCase() === 'a') return node;\n node = node.parentNode;\n }\n return null;\n }\n function intercept(ev){\n var anchor = nearestAnchor(ev.target);\n if (!anchor) return;\n markDisabled(anchor);\n ev.preventDefault();\n ev.stopPropagation();\n }\n disableAnchors();\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', function(){ disableAnchors(); });\n } else {\n setTimeout(function(){ disableAnchors(); }, 0);\n }\n if (window.MutationObserver) {\n var observer = new MutationObserver(function(mutations){\n for (var i = 0; i < mutations.length; i++) {\n var nodes = mutations[i].addedNodes;\n for (var j = 0; j < nodes.length; j++) {\n var node = nodes[j];\n if (!node || node.nodeType !== 1) continue;\n if (node.tagName && node.tagName.toLowerCase() === 'a') {\n markDisabled(node);\n } else {\n disableAnchors(node);\n }\n }\n }\n });\n observer.observe(document.documentElement, { childList: true, subtree: true });\n }\n window.addEventListener('click', intercept, true);\n window.addEventListener('auxclick', intercept, true);\n window.addEventListener('keydown', function(ev){\n if (ev.key === 'Enter' || ev.key === ' ') {\n intercept(ev);\n }\n }, true);\n window.addEventListener('error', function(ev){\n var msg = ev && ev.message ? ev.message : 'Script error';\n var stack = ev && ev.error && ev.error.stack ? ev.error.stack : undefined;\n send({ message: msg, stack: stack });\n });\n window.addEventListener('unhandledrejection', function(ev){\n var r = ev && ev.reason;\n var msg = (typeof r === 'string') ? r : (r && r.message) ? r.message : 'Unhandled promise rejection';\n var stack = r && r.stack ? r.stack : undefined;\n send({ message: msg, stack: stack });\n });\n})();\n${endScriptTag}`;
if (svgPattern.test(trimmed)) {
const svgContent = trimmed
.replace(/^(<\?xml[^>]*>\s*)/i, "")
.replace(/^(<!doctype[^>]*>\s*)/i, "");
return `<!doctype html><html><head>${baseTag}${disabledLinkStyles}${errorHook}</head><body>${svgContent}</body></html>`;
}
const headMatch = content.match(/<head[^>]*>/i);
if (headMatch) {
return content.replace(headMatch[0], headMatch[0] + baseTag + disabledLinkStyles + errorHook);
}
const htmlTagMatch = content.match(/<html[^>]*>/i);
if (htmlTagMatch) {
return content.replace(
htmlTagMatch[0],
htmlTagMatch[0] + "\n<head>" + baseTag + disabledLinkStyles + errorHook + "</head>"
);
}
const doctypeMatch = content.match(/<!doctype[^>]*>/i);
if (doctypeMatch) {
const idx = content.indexOf(doctypeMatch[0]) + doctypeMatch[0].length;
return (
content.slice(0, idx) +
"\n<head>" +
baseTag +
disabledLinkStyles +
errorHook +
"</head>" +
content.slice(idx)
);
}
return "<head>" + baseTag + disabledLinkStyles + errorHook + "</head>\n" + content;
}
let srcdoc = $derived(buildSrcdoc(html, channel));
type PreviewMessage = {
type: string;
channel: string;
detail?: { message?: unknown; stack?: string };
};
function onMessage(ev: MessageEvent) {
if (!iframeEl || ev.source !== iframeEl.contentWindow) return;
const raw = ev.data as unknown;
if (!raw || typeof raw !== "object") return;
const data = raw as Partial<PreviewMessage>;
if (data.type !== "chatui.preview.error" || data.channel !== channel) return;
const detail = (data.detail ?? {}) as { message?: unknown; stack?: string };
errors = [...errors, { message: String(detail.message ?? "Error"), stack: detail.stack }];
}
onMount(() => {
window.addEventListener("message", onMessage);
});
onDestroy(() => {
window.removeEventListener("message", onMessage);
if (copyTimer) clearTimeout(copyTimer);
});
function composeText(): string {
const lines = errors.map((e, i) => `${i + 1}. ${e.message}${e.stack ? `\n${e.stack}` : ""}`);
const summary = lines[0] ?? "Unknown error";
return errors.length > 1
? `it's not working: ${summary} (+${errors.length - 1} more) - can you fix it?`
: `it's not working: ${summary} - can you fix it?`;
}
async function copy(text: string) {
try {
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(text);
} else {
const ta = document.createElement("textarea");
ta.value = text;
ta.style.position = "fixed";
ta.style.left = "-9999px";
document.body.appendChild(ta);
ta.focus();
ta.select();
document.execCommand("copy");
document.body.removeChild(ta);
}
copied = true;
clearTimeout(copyTimer);
copyTimer = setTimeout(() => (copied = false), 1200);
} catch (e) {
console.error("Copy failed", e);
}
}
let copied = $state(false);
let copyTimer: ReturnType<typeof setTimeout>;
function handleKeydown(event: KeyboardEvent) {
// Close preview on ESC key
if (event.key === "Escape") {
event.preventDefault();
onclose?.();
}
}
</script>
<svelte:window on:keydown={handleKeydown} />
<Modal width="max-w-[90dvw]" closeButton onclose={() => onclose?.()}>
<div class="p-4">
<div class="relative h-[90dvh] w-[80dvw]">
<iframe
bind:this={iframeEl}
title="HTML Preview"
class="h-full w-full rounded-lg border border-gray-200 dark:border-gray-700"
sandbox="allow-scripts allow-popups"
referrerpolicy="no-referrer"
{srcdoc}
></iframe>
{#if errors.length > 0}
<button
class="btn absolute bottom-4 right-4 flex items-center gap-2 rounded-full border-2 border-red-500/60 bg-red-800/90 px-4 py-1.5 text-sm text-white shadow-lg"
title="Copy error"
onclick={() => copy(composeText())}
>
<CarbonCopy class="text-xs" />
<span>{copied ? "Copied" : `Error caught (${errors.length})`}</span>
</button>
{/if}
</div>
</div>
</Modal>
|