camox 0.51.0 → 0.52.1

package/dist/features/preview/components/BlockThumbnail.js

@@ -1,6 +1,5 @@
-import { NormalizedDataProvider } from "../../../lib/normalized-data.js";
-import { BlockErrorBoundary } from "./BlockErrorBoundary.js";
 import { cn } from "../../../lib/utils.js";
+import { useRendererHost } from "../../renderer/RendererFrames.js";
 import { useEditingFrame } from "../editingFrame.js";
 import { EMPTY_PREVIEW_DOCUMENT, isSiteStyle } from "./previewStyles.js";
 import { FrameContext } from "./Frame.js";
@@ -13,24 +12,17 @@ import { createPortal } from "react-dom";
 const VIEWPORT_WIDTH = 1200;
 const VIEWPORT_HEIGHT = 800;
 const ThumbnailFrame = (t0) => {
-	const $ = c(29);
-	const { block, width } = t0;
+	const $ = c(26);
+	const { blockType, title, width } = t0;
 	const sourceDocument = useEditingFrame().document;
 	const [frame, setFrame] = React.useState(null);
 	const [root, setRoot] = React.useState(null);
 	const [content, setContent] = React.useState(null);
 	const [contentHeight, setContentHeight] = React.useState(VIEWPORT_HEIGHT);
-	let t1;
-	if ($[0] !== block._internal) {
-		t1 = block._internal.getPeekBundle();
-		$[0] = block._internal;
-		$[1] = t1;
-	} else t1 = $[1];
-	const bundle = t1;
 	const initialization = React.useRef(0);
-	let t2;
-	if ($[2] !== frame?.contentDocument || $[3] !== sourceDocument) {
-		t2 = () => {
+	let t1;
+	if ($[0] !== frame?.contentDocument || $[1] !== sourceDocument) {
+		t1 = () => {
 			const doc = frame?.contentDocument;
 			const mount = doc?.querySelector("[data-camox-preview-root]");
 			if (!doc || !mount) return;
@@ -66,30 +58,30 @@ const ThumbnailFrame = (t0) => {
 				if (initialization.current === generation) setRoot(mount);
 			});
 		};
-		$[2] = frame?.contentDocument;
-		$[3] = sourceDocument;
-		$[4] = t2;
-	} else t2 = $[4];
-	const initialize = t2;
+		$[0] = frame?.contentDocument;
+		$[1] = sourceDocument;
+		$[2] = t1;
+	} else t1 = $[2];
+	const initialize = t1;
+	let t2;
 	let t3;
-	let t4;
-	if ($[5] !== initialize) {
-		t3 = () => {
+	if ($[3] !== initialize) {
+		t2 = () => {
 			initialize();
 		};
-		t4 = [initialize];
-		$[5] = initialize;
-		$[6] = t3;
-		$[7] = t4;
+		t3 = [initialize];
+		$[3] = initialize;
+		$[4] = t2;
+		$[5] = t3;
 	} else {
-		t3 = $[6];
-		t4 = $[7];
+		t2 = $[4];
+		t3 = $[5];
 	}
-	React.useEffect(t3, t4);
+	React.useEffect(t2, t3);
+	let t4;
 	let t5;
-	let t6;
-	if ($[8] !== content) {
-		t5 = () => {
+	if ($[6] !== content) {
+		t4 = () => {
 			if (!content) return;
 			const observer = new ResizeObserver(() => {
 				setContentHeight(content.getBoundingClientRect().height);
@@ -97,53 +89,53 @@ const ThumbnailFrame = (t0) => {
 			observer.observe(content);
 			return () => observer.disconnect();
 		};
-		t6 = [content];
-		$[8] = content;
-		$[9] = t5;
-		$[10] = t6;
+		t5 = [content];
+		$[6] = content;
+		$[7] = t4;
+		$[8] = t5;
 	} else {
-		t5 = $[9];
-		t6 = $[10];
+		t4 = $[7];
+		t5 = $[8];
 	}
-	React.useEffect(t5, t6);
-	const t7 = contentHeight * width / VIEWPORT_WIDTH;
-	let t8;
-	if ($[11] !== t7) {
-		t8 = { height: t7 };
-		$[11] = t7;
-		$[12] = t8;
-	} else t8 = $[12];
-	const t9 = `${block._internal.title} preview`;
-	const t10 = `scale(${width / VIEWPORT_WIDTH})`;
-	let t11;
-	if ($[13] !== t10) {
-		t11 = {
+	React.useEffect(t4, t5);
+	const t6 = contentHeight * width / VIEWPORT_WIDTH;
+	let t7;
+	if ($[9] !== t6) {
+		t7 = { height: t6 };
+		$[9] = t6;
+		$[10] = t7;
+	} else t7 = $[10];
+	const t8 = `${title} preview`;
+	const t9 = `scale(${width / VIEWPORT_WIDTH})`;
+	let t10;
+	if ($[11] !== t9) {
+		t10 = {
 			width: VIEWPORT_WIDTH,
 			height: VIEWPORT_HEIGHT,
-			transform: t10
+			transform: t9
 		};
-		$[13] = t10;
-		$[14] = t11;
-	} else t11 = $[14];
-	let t12;
-	if ($[15] !== initialize || $[16] !== t11 || $[17] !== t9) {
-		t12 = /* @__PURE__ */ jsx("iframe", {
+		$[11] = t9;
+		$[12] = t10;
+	} else t10 = $[12];
+	let t11;
+	if ($[13] !== initialize || $[14] !== t10 || $[15] !== t8) {
+		t11 = /* @__PURE__ */ jsx("iframe", {
 			ref: setFrame,
-			title: t9,
+			title: t8,
 			srcDoc: EMPTY_PREVIEW_DOCUMENT,
 			onLoad: initialize,
 			tabIndex: -1,
 			className: "pointer-events-none absolute top-0 left-0 origin-top-left border-0",
-			style: t11
+			style: t10
 		});
-		$[15] = initialize;
+		$[13] = initialize;
+		$[14] = t10;
+		$[15] = t8;
 		$[16] = t11;
-		$[17] = t9;
-		$[18] = t12;
-	} else t12 = $[18];
-	let t13;
-	if ($[19] !== block._internal.Component || $[20] !== block._internal.id || $[21] !== bundle || $[22] !== frame || $[23] !== root) {
-		t13 = root && createPortal(/* @__PURE__ */ jsx(FrameContext.Provider, {
+	} else t11 = $[16];
+	let t12;
+	if ($[17] !== blockType || $[18] !== content || $[19] !== frame || $[20] !== root) {
+		t12 = root && createPortal(/* @__PURE__ */ jsx(FrameContext.Provider, {
 			value: {
 				window: frame?.contentWindow ?? null,
 				iframeElement: frame
@@ -151,56 +143,76 @@ const ThumbnailFrame = (t0) => {
 			children: /* @__PURE__ */ jsx("div", {
 				ref: setContent,
 				style: { display: "flow-root" },
-				children: /* @__PURE__ */ jsx(BlockErrorBoundary, {
-					blockId: "thumbnail",
-					blockType: block._internal.id,
-					children: /* @__PURE__ */ jsx(React.Suspense, {
-						fallback: null,
-						children: /* @__PURE__ */ jsx(NormalizedDataProvider, {
-							files: bundle.files,
-							repeatableItems: bundle.repeatableItems,
-							children: /* @__PURE__ */ jsx(block._internal.Component, {
-								blockData: {
-									_id: "thumbnail",
-									type: block._internal.id,
-									content: bundle.block.content,
-									settings: bundle.block.settings,
-									position: ""
-								},
-								mode: "peek"
-							})
-						})
-					})
+				children: content && /* @__PURE__ */ jsx(ThumbnailContent, {
+					blockType,
+					slot: content
 				})
 			})
 		}), root);
-		$[19] = block._internal.Component;
-		$[20] = block._internal.id;
-		$[21] = bundle;
-		$[22] = frame;
-		$[23] = root;
-		$[24] = t13;
-	} else t13 = $[24];
-	let t14;
-	if ($[25] !== t12 || $[26] !== t13 || $[27] !== t8) {
-		t14 = /* @__PURE__ */ jsxs("div", {
+		$[17] = blockType;
+		$[18] = content;
+		$[19] = frame;
+		$[20] = root;
+		$[21] = t12;
+	} else t12 = $[21];
+	let t13;
+	if ($[22] !== t11 || $[23] !== t12 || $[24] !== t7) {
+		t13 = /* @__PURE__ */ jsxs("div", {
 			className: "relative max-h-full w-full shrink-0 overflow-hidden",
-			style: t8,
-			children: [t12, t13]
+			style: t7,
+			children: [t11, t12]
 		});
-		$[25] = t12;
-		$[26] = t13;
-		$[27] = t8;
-		$[28] = t14;
-	} else t14 = $[28];
-	return t14;
+		$[22] = t11;
+		$[23] = t12;
+		$[24] = t7;
+		$[25] = t13;
+	} else t13 = $[25];
+	return t13;
 };
+/**
+* What the thumbnail shows: the block rendered into `slot` by the renderer frame, which runs the
+* draft's code.
+*/
+const ThumbnailContent = (t0) => {
+	const $ = c(6);
+	const { blockType, slot } = t0;
+	const host = useRendererHost();
+	const thumbnailId = React.useId();
+	let t1;
+	let t2;
+	if ($[0] !== blockType || $[1] !== host || $[2] !== slot || $[3] !== thumbnailId) {
+		t1 = () => {
+			if (!host) return;
+			host.showThumbnail(thumbnailId, slot, blockType);
+			return () => host.hideThumbnail(thumbnailId);
+		};
+		t2 = [
+			host,
+			thumbnailId,
+			slot,
+			blockType
+		];
+		$[0] = blockType;
+		$[1] = host;
+		$[2] = slot;
+		$[3] = thumbnailId;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		t1 = $[4];
+		t2 = $[5];
+	}
+	React.useLayoutEffect(t1, t2);
+	return null;
+};
+/** A block's thumbnail, rendered by the renderer frame with the draft's code. */
 const BlockThumbnail = (t0) => {
-	const $ = c(11);
-	const { block, className } = t0;
+	const $ = c(13);
+	const { blockType, title, className } = t0;
 	const ref = React.useRef(null);
 	const [isVisible, setIsVisible] = React.useState(false);
 	const [width, setWidth] = React.useState(0);
+	const renderable = !!useRendererHost();
 	let t1;
 	let t2;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -237,28 +249,31 @@ const BlockThumbnail = (t0) => {
 		$[3] = t3;
 	} else t3 = $[3];
 	let t4;
-	if ($[4] !== block || $[5] !== isVisible || $[6] !== width) {
-		t4 = isVisible && width > 0 && /* @__PURE__ */ jsx(ThumbnailFrame, {
-			block,
+	if ($[4] !== blockType || $[5] !== isVisible || $[6] !== renderable || $[7] !== title || $[8] !== width) {
+		t4 = renderable && isVisible && width > 0 && /* @__PURE__ */ jsx(ThumbnailFrame, {
+			blockType,
+			title,
 			width
 		});
-		$[4] = block;
+		$[4] = blockType;
 		$[5] = isVisible;
-		$[6] = width;
-		$[7] = t4;
-	} else t4 = $[7];
+		$[6] = renderable;
+		$[7] = title;
+		$[8] = width;
+		$[9] = t4;
+	} else t4 = $[9];
 	let t5;
-	if ($[8] !== t3 || $[9] !== t4) {
+	if ($[10] !== t3 || $[11] !== t4) {
 		t5 = /* @__PURE__ */ jsx("div", {
 			ref,
 			className: t3,
 			"aria-hidden": "true",
 			children: t4
 		});
-		$[8] = t3;
-		$[9] = t4;
-		$[10] = t5;
-	} else t5 = $[10];
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
 	return t5;
 };
 

package/dist/features/preview/components/CanvasPreview.js

@@ -1,6 +1,6 @@
+import { CanvasLoadingScreen } from "../../canvas/CanvasLoadingScreen.js";
 import { ViewportContinuity, ViewportContinuityContext } from "../viewportContinuity.js";
 import { PreviewActivationContext } from "./PreviewActivation.js";
-import { CanvasLoadingScreen } from "../../canvas/CanvasLoadingScreen.js";
 import { PreviewPageFrame, PreviewPageFrameContext } from "../previewPageFrame.js";
 import { PreviewPreparationContext } from "../previewPreparation.js";
 import { c } from "react/compiler-runtime";