pftom
274 lines
11 KiB
TypeScript
274 lines
11 KiB
TypeScript
/**
|
|
* Wrap an artifact's HTML for a sandboxed iframe. Corresponds to
|
|
* buildSrcdoc in packages/runtime/src/index.ts — the reference version also
|
|
* injects an edit-mode overlay and tweak bridge, which this starter omits.
|
|
*
|
|
* If the model returned a full document, pass it through unchanged; otherwise
|
|
* wrap the fragment in a minimal doctype shell.
|
|
*
|
|
* When `options.deck` is set we also inject a `postMessage` listener that
|
|
* lets the host advance / rewind slides without relying on the iframe
|
|
* having keyboard focus. The host posts:
|
|
* { type: 'od:slide', action: 'next' | 'prev' | 'first' | 'last' | 'go', index?: number }
|
|
* and the iframe responds with:
|
|
* { type: 'od:slide-state', active: number, count: number }
|
|
* after every navigation so the host can render its own counter / dots.
|
|
*/
|
|
export function buildSrcdoc(
|
|
html: string,
|
|
options: { deck?: boolean } = {}
|
|
): string {
|
|
const head = html.trimStart().slice(0, 64).toLowerCase();
|
|
const isFullDoc = head.startsWith("<!doctype") || head.startsWith("<html");
|
|
const wrapped = isFullDoc
|
|
? html
|
|
: `<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
</head>
|
|
<body>${html}</body>
|
|
</html>`;
|
|
const withShim = injectSandboxShim(wrapped);
|
|
if (!options.deck) return withShim;
|
|
return injectDeckBridge(withShim);
|
|
}
|
|
|
|
// Sandboxed iframes (we use `sandbox="allow-scripts"`) without
|
|
// `allow-same-origin` raise a SecurityError on first `localStorage` /
|
|
// `sessionStorage` access. Many freeform-generated decks call
|
|
// `localStorage.getItem(...)` at the top of their IIFE without a
|
|
// try/catch — when it throws, the whole script aborts and the deck
|
|
// becomes a static, unnavigable preview. We install a same-origin
|
|
// in-memory shim BEFORE any user script runs so those decks degrade
|
|
// gracefully (position just doesn't persist across reloads).
|
|
function injectSandboxShim(doc: string): string {
|
|
const shim = `<script>(function(){
|
|
function makeStore(){
|
|
var data = {};
|
|
var api = {
|
|
getItem: function(k){ return Object.prototype.hasOwnProperty.call(data, k) ? data[k] : null; },
|
|
setItem: function(k, v){ data[k] = String(v); },
|
|
removeItem: function(k){ delete data[k]; },
|
|
clear: function(){ data = {}; },
|
|
key: function(i){ return Object.keys(data)[i] || null; }
|
|
};
|
|
Object.defineProperty(api, 'length', { get: function(){ return Object.keys(data).length; } });
|
|
return api;
|
|
}
|
|
function tryShim(name){
|
|
var works = false;
|
|
try { works = !!window[name] && typeof window[name].getItem === 'function'; void window[name].length; }
|
|
catch (_) { works = false; }
|
|
if (works) return;
|
|
try { Object.defineProperty(window, name, { configurable: true, value: makeStore() }); }
|
|
catch (_) { try { window[name] = makeStore(); } catch (__) {} }
|
|
}
|
|
tryShim('localStorage');
|
|
tryShim('sessionStorage');
|
|
})();</script>`;
|
|
if (/<head[^>]*>/i.test(doc))
|
|
return doc.replace(/<head[^>]*>/i, (m) => `${m}${shim}`);
|
|
if (/<body[^>]*>/i.test(doc))
|
|
return doc.replace(/<body[^>]*>/i, (m) => `${m}${shim}`);
|
|
return shim + doc;
|
|
}
|
|
|
|
// The deck bridge supports three deck conventions found across our skills
|
|
// and freeform-generated artifacts:
|
|
// 1. Horizontal scroll decks (simple-deck, guizang-ppt) — slides laid out
|
|
// side-by-side, navigation = scrollTo({ left }).
|
|
// 2. Class-toggle decks (deck-framework, freeform pitches) — one slide
|
|
// carries `.active` or `.is-active`; siblings are display:none. Their
|
|
// own JS listens for ArrowRight/Left, so we drive them by dispatching
|
|
// synthetic KeyboardEvents.
|
|
// 3. Visibility-only decks — no class toggle, slides hidden via inline
|
|
// style. We fall back to keyboard dispatch + visibility detection.
|
|
//
|
|
// All three report `{ active, count }` back to the host so the toolbar can
|
|
// render a unified counter. A MutationObserver on each `.slide` lets us
|
|
// catch class changes from the deck's own keyboard handler.
|
|
//
|
|
// We also inject a small CSS override that fixes a common authoring
|
|
// mistake in fixed-canvas decks: a `.stage { display: grid; place-items:
|
|
// center }` only centers items within their grid cells, but the track
|
|
// itself stays `start`-aligned, so the 1920x1080 canvas top-lefts at
|
|
// (0,0) of the stage. Combined with `transform-origin: center center`,
|
|
// the scaled canvas ends up offset toward the bottom-right of any
|
|
// preview that's smaller than 1920x1080 — exactly what users see in the
|
|
// sandbox iframe. `place-content: center` centers the track itself.
|
|
function injectDeckBridge(doc: string): string {
|
|
const styleFix = `<style data-od-deck-fix>
|
|
.stage, .deck-stage, .deck-shell { place-content: center !important; }
|
|
</style>`;
|
|
const docWithStyle = /<\/head>/i.test(doc)
|
|
? doc.replace(/<\/head>/i, styleFix + "</head>")
|
|
: /<head[^>]*>/i.test(doc)
|
|
? doc.replace(/<head[^>]*>/i, (m) => m + styleFix)
|
|
: styleFix + doc;
|
|
doc = docWithStyle;
|
|
const script = `<script>(function(){
|
|
function slides(){ return document.querySelectorAll('.slide'); }
|
|
function scroller(){
|
|
if (document.body && document.body.scrollWidth > document.body.clientWidth + 1) return document.body;
|
|
return document.scrollingElement || document.documentElement;
|
|
}
|
|
function isScrollDeck(){
|
|
var sc = scroller();
|
|
return !!(sc && sc.scrollWidth > sc.clientWidth + 1);
|
|
}
|
|
function findActiveByClass(list){
|
|
for (var i=0; i<list.length; i++) {
|
|
var cl = list[i].classList;
|
|
if (cl && (cl.contains('is-active') || cl.contains('active') || cl.contains('current'))) return i;
|
|
}
|
|
return -1;
|
|
}
|
|
function findActiveByVisibility(list){
|
|
for (var i=0; i<list.length; i++) {
|
|
try {
|
|
var cs = window.getComputedStyle(list[i]);
|
|
if (cs.display !== 'none' && cs.visibility !== 'hidden' && cs.opacity !== '0') return i;
|
|
} catch (_) {}
|
|
}
|
|
return -1;
|
|
}
|
|
function activeIndex(list){
|
|
if (!list || !list.length) return 0;
|
|
if (isScrollDeck()) {
|
|
var w = Math.max(1, window.innerWidth);
|
|
return Math.max(0, Math.min(list.length - 1, Math.round(scroller().scrollLeft / w)));
|
|
}
|
|
var byClass = findActiveByClass(list);
|
|
if (byClass >= 0) return byClass;
|
|
var byVis = findActiveByVisibility(list);
|
|
if (byVis >= 0) return byVis;
|
|
return 0;
|
|
}
|
|
function dispatchKey(key){
|
|
// Bubbles so any listener on window picks it up too. We dispatch on
|
|
// document only — dispatching on window/body in addition would cause
|
|
// bubbling to fire the same document-level listener twice.
|
|
var init = { key: key, code: key, bubbles: true, cancelable: true, composed: true };
|
|
try {
|
|
document.dispatchEvent(new KeyboardEvent('keydown', init));
|
|
document.dispatchEvent(new KeyboardEvent('keyup', init));
|
|
} catch (_) {}
|
|
}
|
|
function scrollGo(i){
|
|
var list = slides();
|
|
var next = Math.max(0, Math.min(list.length - 1, i));
|
|
scroller().scrollTo({ left: next * window.innerWidth, behavior: 'smooth' });
|
|
setTimeout(report, 380);
|
|
}
|
|
function go(action){
|
|
var list = slides();
|
|
if (!list.length) return;
|
|
if (isScrollDeck()) {
|
|
var i = activeIndex(list);
|
|
if (action === 'next') scrollGo(i + 1);
|
|
else if (action === 'prev') scrollGo(i - 1);
|
|
else if (action === 'first') scrollGo(0);
|
|
else if (action === 'last') scrollGo(list.length - 1);
|
|
return;
|
|
}
|
|
if (action === 'next') dispatchKey('ArrowRight');
|
|
else if (action === 'prev') dispatchKey('ArrowLeft');
|
|
else if (action === 'first') dispatchKey('Home');
|
|
else if (action === 'last') dispatchKey('End');
|
|
setTimeout(report, 280);
|
|
}
|
|
function gotoIndex(i){
|
|
var list = slides();
|
|
if (!list.length) return;
|
|
var target = Math.max(0, Math.min(list.length - 1, i));
|
|
if (isScrollDeck()) { scrollGo(target); return; }
|
|
var current = activeIndex(list);
|
|
var diff = target - current;
|
|
if (!diff) { report(); return; }
|
|
var key = diff > 0 ? 'ArrowRight' : 'ArrowLeft';
|
|
var n = Math.abs(diff);
|
|
for (var k = 0; k < n; k++) dispatchKey(key);
|
|
setTimeout(report, 320);
|
|
}
|
|
function report(){
|
|
try {
|
|
var list = slides();
|
|
window.parent.postMessage({
|
|
type: 'od:slide-state',
|
|
active: activeIndex(list),
|
|
count: list.length,
|
|
}, '*');
|
|
} catch (e) {}
|
|
}
|
|
window.addEventListener('message', function(ev){
|
|
var data = ev && ev.data;
|
|
if (!data || data.type !== 'od:slide') return;
|
|
if (data.action === 'go' && typeof data.index === 'number') gotoIndex(data.index);
|
|
else go(data.action);
|
|
});
|
|
// Report once on load and on every scroll-end so the host stays in sync.
|
|
window.addEventListener('load', function(){ setTimeout(report, 200); });
|
|
document.addEventListener('scroll', function(){
|
|
clearTimeout(window.__odReportT);
|
|
window.__odReportT = setTimeout(report, 120);
|
|
}, { passive: true, capture: true });
|
|
// Nudge the deck's own fit/resize listener after layout settles. Fixed-canvas
|
|
// decks (e.g. ".canvas { width: 1920px }" + "transform: scale(...)") compute
|
|
// their scale on first run, which fires when the iframe is still 0x0 in
|
|
// sandboxed previews — the deck's fit() then resolves to scale(0) / scale(1)
|
|
// and never recovers. Re-firing 'resize' lets the deck recompute, and a
|
|
// ResizeObserver picks up later layout settles (zoom toggle, sidebar drag).
|
|
function nudgeResize(){
|
|
try { window.dispatchEvent(new Event('resize')); }
|
|
catch (_) {}
|
|
}
|
|
// Aggressively nudge during the first second so the deck catches the
|
|
// iframe's first non-zero size; bail out early once the iframe reports a
|
|
// real width. Without this loop, fixed-canvas decks render at scale(0).
|
|
function chaseFirstLayout(){
|
|
var attempts = 0;
|
|
function tick(){
|
|
attempts += 1;
|
|
var w = window.innerWidth;
|
|
nudgeResize();
|
|
if (w > 0 && attempts >= 2) return; // one extra nudge after first non-zero
|
|
if (attempts < 30) setTimeout(tick, 50);
|
|
}
|
|
tick();
|
|
}
|
|
if (document.readyState === 'complete') chaseFirstLayout();
|
|
else window.addEventListener('load', chaseFirstLayout);
|
|
// Re-nudge whenever the iframe itself is resized by the host (e.g.
|
|
// user toggles zoom, resizes the chat sidebar, exits Present).
|
|
if (typeof ResizeObserver !== 'undefined') {
|
|
try {
|
|
var ro = new ResizeObserver(function(){ nudgeResize(); });
|
|
ro.observe(document.documentElement);
|
|
} catch (_) {}
|
|
}
|
|
// For class-toggle decks the deck's own keyboard handler updates classes
|
|
// on the slide elements; an attribute observer translates that into the
|
|
// host counter without depending on scroll events.
|
|
function observeSlides(){
|
|
var list = slides();
|
|
if (!list.length) { setTimeout(observeSlides, 150); return; }
|
|
try {
|
|
var mo = new MutationObserver(function(){
|
|
clearTimeout(window.__odReportT2);
|
|
window.__odReportT2 = setTimeout(report, 60);
|
|
});
|
|
for (var i = 0; i < list.length; i++) {
|
|
mo.observe(list[i], { attributes: true, attributeFilter: ['class', 'style', 'hidden', 'aria-hidden'] });
|
|
}
|
|
} catch (e) {}
|
|
setTimeout(report, 100);
|
|
}
|
|
observeSlides();
|
|
})();</script>`;
|
|
if (/<\/body>/i.test(doc))
|
|
return doc.replace(/<\/body>/i, `${script}</body>`);
|
|
return doc + script;
|
|
}
|