camox 0.43.0 → 0.45.0

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

@@ -1,9 +1,7 @@
-import { previewStore } from "../previewStore.js";
-import { isOverlayMessage } from "../overlayMessages.js";
 import { useFrame } from "./Frame.js";
+import { isOverlayMessage } from "../overlayMessages.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
-import { useSelector } from "@xstate/store-react";
 
 //#region src/features/preview/components/OverlayTracker.tsx
 /**
@@ -11,36 +9,12 @@ import { useSelector } from "@xstate/store-react";
 * Listening for focus commands from parent (for sidebar-triggered focus)
 */
 const OverlayTracker = () => {
-	const $ = c(8);
-	if ($[0] !== "ebfece21400ea0599bf93e9f81b5244a330a6049bfb4c02fcc51a02e95e8e214") {
-		for (let $i = 0; $i < 8; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "ebfece21400ea0599bf93e9f81b5244a330a6049bfb4c02fcc51a02e95e8e214";
-	}
+	const $ = c(3);
 	const { window: iframeWindow } = useFrame();
-	const isAddBlockSidebarOpen = useSelector(previewStore, _temp);
 	let t0;
 	let t1;
-	if ($[1] !== iframeWindow || $[2] !== isAddBlockSidebarOpen) {
+	if ($[0] !== iframeWindow) {
 		t0 = () => {
-			if (!iframeWindow || !isAddBlockSidebarOpen) return;
-			const handleClick = _temp2;
-			iframeWindow.document.addEventListener("click", handleClick);
-			return () => iframeWindow.document.removeEventListener("click", handleClick);
-		};
-		t1 = [iframeWindow, isAddBlockSidebarOpen];
-		$[1] = iframeWindow;
-		$[2] = isAddBlockSidebarOpen;
-		$[3] = t0;
-		$[4] = t1;
-	} else {
-		t0 = $[3];
-		t1 = $[4];
-	}
-	React.useEffect(t0, t1);
-	let t2;
-	let t3;
-	if ($[5] !== iframeWindow) {
-		t2 = () => {
 			if (!iframeWindow) return;
 			const handleMessage = (event) => {
 				if (!isOverlayMessage(event.data)) return;
@@ -54,23 +28,17 @@ const OverlayTracker = () => {
 			iframeWindow.addEventListener("message", handleMessage);
 			return () => iframeWindow.removeEventListener("message", handleMessage);
 		};
-		t3 = [iframeWindow];
-		$[5] = iframeWindow;
-		$[6] = t2;
-		$[7] = t3;
+		t1 = [iframeWindow];
+		$[0] = iframeWindow;
+		$[1] = t0;
+		$[2] = t1;
 	} else {
-		t2 = $[6];
-		t3 = $[7];
+		t0 = $[1];
+		t1 = $[2];
 	}
-	React.useEffect(t2, t3);
+	React.useEffect(t0, t1);
 	return null;
 };
-function _temp(state) {
-	return state.context.isAddBlockSidebarOpen;
-}
-function _temp2() {
-	previewStore.send({ type: "exitPeekedBlock" });
-}
 
 //#endregion
 export { OverlayTracker };

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

@@ -1,29 +1,34 @@
 import { usePageBlocks } from "../../../lib/normalized-data.js";
-import { previewStore, selectIsEditMode } from "../previewStore.js";
-import { isOverlayMessage } from "../overlayMessages.js";
+import { previewStore, selectIsCanvasShown, selectionForOwner } from "../previewStore.js";
+import { useEditingFrame } from "../editingFrame.js";
+import { isOverlayMessage, overlayFieldId, recordFieldId } from "../overlayMessages.js";
 import { usePreviewedPage } from "../CamoxPreview.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
 import { useSelector } from "@xstate/store-react";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/features/preview/components/Overlays.tsx
-function CuratedAddBlockListener() {
-	const $ = c(4);
-	if ($[0] !== "6fe49b666f3f81b9063fd01dd7ea74a4df9732064d2b113c5ce2770c9992f6b4") {
-		for (let $i = 0; $i < 4; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "6fe49b666f3f81b9063fd01dd7ea74a4df9732064d2b113c5ce2770c9992f6b4";
-	}
-	const { pageBlocks } = usePageBlocks(usePreviewedPage());
-	let t0;
+function CuratedAddBlockListener(t0) {
+	const $ = c(5);
+	const { frame } = t0;
+	const page = usePreviewedPage();
+	const { pageBlocks } = usePageBlocks(page);
+	const { document: editingDocument } = useEditingFrame();
+	const isEditingFrame = !!editingDocument && editingDocument === frame?.contentDocument;
 	let t1;
-	if ($[1] !== pageBlocks) {
-		t0 = () => {
+	let t2;
+	if ($[0] !== isEditingFrame || $[1] !== page.page.id || $[2] !== pageBlocks) {
+		t1 = () => {
 			const handleMessage = (event) => {
 				if (!isOverlayMessage(event.data)) return;
 				const message = event.data;
 				if (message.type === "CAMOX_ADD_BLOCK_REQUEST") {
-					if (!selectIsEditMode(previewStore.getSnapshot())) return;
+					const snapshot = previewStore.getSnapshot();
+					if (!selectIsCanvasShown(snapshot)) return;
+					if (!isEditingFrame) return;
+					const owner = snapshot.context.editingContext;
+					if (owner?.kind !== "page" || owner.pageId !== page.page.id) return;
 					const { blockPosition, insertPosition } = message;
 					let afterPosition = null;
 					if (message.afterPosition !== void 0) afterPosition = message.afterPosition;
@@ -34,7 +39,7 @@ function CuratedAddBlockListener() {
 						else if (blockIndex === 0) afterPosition = "";
 					}
 					previewStore.send({
-						type: "openAddBlockSidebar",
+						type: "openAddBlockDialog",
 						afterPosition
 					});
 				}
@@ -42,74 +47,81 @@ function CuratedAddBlockListener() {
 			window.addEventListener("message", handleMessage);
 			return () => window.removeEventListener("message", handleMessage);
 		};
-		t1 = [pageBlocks];
-		$[1] = pageBlocks;
-		$[2] = t0;
+		t2 = [
+			pageBlocks,
+			page.page.id,
+			isEditingFrame
+		];
+		$[0] = isEditingFrame;
+		$[1] = page.page.id;
+		$[2] = pageBlocks;
 		$[3] = t1;
+		$[4] = t2;
 	} else {
-		t0 = $[2];
 		t1 = $[3];
+		t2 = $[4];
 	}
-	React.useEffect(t0, t1);
+	React.useEffect(t1, t2);
 	return null;
 }
-const Overlays = (t0) => {
-	const $ = c(11);
-	if ($[0] !== "6fe49b666f3f81b9063fd01dd7ea74a4df9732064d2b113c5ce2770c9992f6b4") {
-		for (let $i = 0; $i < 11; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "6fe49b666f3f81b9063fd01dd7ea74a4df9732064d2b113c5ce2770c9992f6b4";
+/** The field ID of a selected String field; only those are focused in the page. */
+function stringFieldId(selection) {
+	if (!selection) return null;
+	switch (selection.type) {
+		case "block-field": return selection.fieldType === "String" ? overlayFieldId(selection.blockId, selection.fieldName) : null;
+		case "item-field": return selection.fieldType === "String" ? overlayFieldId(selection.blockId, selection.fieldName, { itemId: selection.itemId }) : null;
+		case "record-field": return selection.recordFieldType === "String" ? recordFieldId(selection, selection.recordFieldName) : null;
+		default: return null;
 	}
-	const { iframeElement, canAddBlocks: t1 } = t0;
+}
+const Overlays = (t0) => {
+	const $ = c(10);
+	const { frame, canAddBlocks: t1, owner } = t0;
 	const canAddBlocks = t1 === void 0 ? false : t1;
-	const selection = useSelector(previewStore, _temp);
-	const peekedBlock = useSelector(previewStore, _temp2);
 	let t2;
-	if ($[1] !== iframeElement?.contentWindow || $[2] !== peekedBlock || $[3] !== selection) {
-		t2 = () => {
-			if (peekedBlock) return;
-			if (!selection) return;
-			if (selection.type !== "block-field" && selection.type !== "item-field") return;
-			if (selection.fieldType !== "String") return;
-			const blockId = selection.blockId;
-			const fieldName = selection.fieldName;
-			const message = {
+	if ($[0] !== owner) {
+		t2 = (state) => selectionForOwner(state.context, owner);
+		$[0] = owner;
+		$[1] = t2;
+	} else t2 = $[1];
+	const selection = useSelector(previewStore, t2);
+	const { document: editingDocument, send } = useEditingFrame();
+	const isEditingFrame = !!editingDocument && editingDocument === frame?.contentDocument;
+	let t3;
+	let t4;
+	if ($[2] !== isEditingFrame || $[3] !== selection || $[4] !== send) {
+		t3 = () => {
+			const fieldId = stringFieldId(selection);
+			if (!fieldId || !isEditingFrame) return;
+			send({
 				type: "CAMOX_FOCUS_FIELD",
-				fieldId: selection.type === "item-field" ? `${blockId}__${selection.itemId}__${fieldName}` : `${blockId}__${fieldName}`
-			};
-			iframeElement?.contentWindow?.postMessage(message, "*");
+				fieldId
+			});
 		};
-		$[1] = iframeElement?.contentWindow;
-		$[2] = peekedBlock;
-		$[3] = selection;
-		$[4] = t2;
-	} else t2 = $[4];
-	let t3;
-	if ($[5] !== iframeElement || $[6] !== peekedBlock || $[7] !== selection) {
-		t3 = [
+		t4 = [
 			selection,
-			peekedBlock,
-			iframeElement
+			isEditingFrame,
+			send
 		];
-		$[5] = iframeElement;
-		$[6] = peekedBlock;
-		$[7] = selection;
-		$[8] = t3;
-	} else t3 = $[8];
-	React.useEffect(t2, t3);
-	let t4;
-	if ($[9] !== canAddBlocks) {
-		t4 = canAddBlocks ? /* @__PURE__ */ jsx(CuratedAddBlockListener, {}) : null;
-		$[9] = canAddBlocks;
-		$[10] = t4;
-	} else t4 = $[10];
-	return t4;
+		$[2] = isEditingFrame;
+		$[3] = selection;
+		$[4] = send;
+		$[5] = t3;
+		$[6] = t4;
+	} else {
+		t3 = $[5];
+		t4 = $[6];
+	}
+	React.useEffect(t3, t4);
+	let t5;
+	if ($[7] !== canAddBlocks || $[8] !== frame) {
+		t5 = canAddBlocks ? /* @__PURE__ */ jsx(CuratedAddBlockListener, { frame }) : null;
+		$[7] = canAddBlocks;
+		$[8] = frame;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
 };
-function _temp(state) {
-	return state.context.selection;
-}
-function _temp2(state_0) {
-	return state_0.context.peekedBlock;
-}
 
 //#endregion
 export { Overlays };