camox 0.41.1 → 0.42.0

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

@@ -1,14 +1,17 @@
 import { actionsStore } from "../../provider/actionsStore.js";
 import { checkIfInputFocused, cn } from "../../../lib/utils.js";
 import { SharedChromeContext } from "../../runtime/SharedChromeContext.js";
-import { previewStore, selectIsEditMode } from "../previewStore.js";
+import { areCommentsEnabled } from "../commentsEnabled.js";
+import { previewStore, selectIsCommentMode, selectIsEditMode } from "../previewStore.js";
 import { useBlockActionsShortcuts } from "./BlockActionsPopover.js";
+import { PreviewPageContext } from "../previewSelection.js";
 import { FieldOverlayStyles } from "./FieldOverlayStyles.js";
 import { FieldToolbar } from "./FieldToolbar.js";
 import { Frame, useFrame } from "./Frame.js";
 import { MobilePreviewDrawer } from "./MobilePreviewDrawer.js";
 import { Overlays } from "./Overlays.js";
 import { OverlayTracker } from "./OverlayTracker.js";
+import { PreviewComments } from "./PreviewComments.js";
 import { PreviewToolbar } from "./PreviewToolbar.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
@@ -19,9 +22,9 @@ import { PanelContent } from "@camox/ui/panel";
 //#region src/features/preview/components/PreviewPanel.tsx
 const PreviewFrame = (t0) => {
 	const $ = c(9);
-	if ($[0] !== "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2") {
+	if ($[0] !== "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e") {
 		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2";
+		$[0] = "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e";
 	}
 	const { children, style, className, onIframeReady } = t0;
 	let t1;
@@ -62,9 +65,9 @@ const PreviewFrame = (t0) => {
 };
 const KeyDownForwarder = () => {
 	const $ = c(5);
-	if ($[0] !== "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2") {
+	if ($[0] !== "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e") {
 		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2";
+		$[0] = "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e";
 	}
 	const { window: iframeWindow } = useFrame();
 	const actions = useSelector(actionsStore, _temp);
@@ -78,7 +81,7 @@ const KeyDownForwarder = () => {
 					if (!action.shortcut) return false;
 					if (!action.checkIfAvailable()) return false;
 					if (checkIfInputFocused(iframeWindow.document)) {
-						if (!action.shortcut.withMeta && !action.shortcut.withAlt) return false;
+						if (action.shortcut.key !== "Escape" && !action.shortcut.withMeta && !action.shortcut.withAlt) return false;
 						if (action.shortcut.key === "Backspace") return false;
 					}
 					const { key, withMeta, withAlt, withShift } = action.shortcut;
@@ -87,15 +90,26 @@ const KeyDownForwarder = () => {
 				if (matchingAction) {
 					e.preventDefault();
 					e.stopPropagation();
+					if (e.key === "Escape" && checkIfInputFocused(iframeWindow.document)) iframeWindow.document.activeElement.blur();
 					iframeWindow.parent.postMessage({
 						type: "executeAction",
 						actionId: matchingAction.id
 					}, "*");
 				}
 			};
-			iframeWindow.addEventListener("keydown", handleKeyDown, true);
+			const handleCapturedKeyDown = (event) => {
+				if (event.key === "Escape") return;
+				handleKeyDown(event);
+			};
+			const handleEscape = (event_0) => {
+				if (event_0.key !== "Escape" || event_0.defaultPrevented) return;
+				handleKeyDown(event_0);
+			};
+			iframeWindow.addEventListener("keydown", handleCapturedKeyDown, true);
+			iframeWindow.addEventListener("keydown", handleEscape);
 			return () => {
-				iframeWindow.removeEventListener("keydown", handleKeyDown, true);
+				iframeWindow.removeEventListener("keydown", handleCapturedKeyDown, true);
+				iframeWindow.removeEventListener("keydown", handleEscape);
 			};
 		};
 		t1 = [iframeWindow, actions];
@@ -116,82 +130,102 @@ const viewportClassName = {
 };
 function CuratedBlockShortcuts() {
 	const $ = c(1);
-	if ($[0] !== "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2") {
+	if ($[0] !== "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e") {
 		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2";
+		$[0] = "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e";
 	}
 	useBlockActionsShortcuts();
 	return null;
 }
 const PreviewPanel = (t0) => {
-	const $ = c(26);
-	if ($[0] !== "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2") {
-		for (let $i = 0; $i < 26; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "647d74b06c71c6ab8b55c8d5a27ecde77d7de427871f875c0c983ee0b4506ad2";
+	const $ = c(34);
+	if ($[0] !== "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e") {
+		for (let $i = 0; $i < 34; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e";
 	}
 	const { children, isMobileExperience: t1, page, projectName: t2, toolbarProps } = t0;
 	const isMobileExperience = t1 === void 0 ? false : t1;
 	const projectName = t2 === void 0 ? "Project" : t2;
 	const sharedChrome = React.useContext(SharedChromeContext);
+	const t3 = page?.id ?? null;
+	let t4;
+	if ($[1] !== children || $[2] !== t3) {
+		t4 = /* @__PURE__ */ jsx(PreviewPageContext, {
+			value: t3,
+			children
+		});
+		$[1] = children;
+		$[2] = t3;
+		$[3] = t4;
+	} else t4 = $[3];
+	const previewContent = t4;
 	const iframeElement = useSelector(previewStore, _temp2);
 	const handleIframeReady = _temp3;
 	const viewportMode = useSelector(previewStore, _temp4);
 	const isEditMode = useSelector(previewStore, selectIsEditMode);
+	const isCommentMode = useSelector(previewStore, selectIsCommentMode);
 	const isToolbarHidden = useSelector(previewStore, _temp5);
-	let t3;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = [];
-		$[1] = t3;
-	} else t3 = $[1];
-	React.useEffect(_temp15, t3);
+	let t5;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = [];
+		$[4] = t5;
+	} else t5 = $[4];
+	React.useEffect(_temp15, t5);
 	if (isMobileExperience) {
-		let t4;
-		if ($[2] !== children) {
-			t4 = /* @__PURE__ */ jsx("div", {
+		let t6;
+		if ($[5] !== previewContent) {
+			t6 = /* @__PURE__ */ jsx("div", {
 				className: "relative min-h-0 flex-1",
 				children: /* @__PURE__ */ jsx(PreviewFrame, {
 					className: "h-full w-full",
 					onIframeReady: handleIframeReady,
-					children
+					children: previewContent
 				})
 			});
-			$[2] = children;
-			$[3] = t4;
-		} else t4 = $[3];
-		let t5;
-		if ($[4] !== isToolbarHidden || $[5] !== page || $[6] !== projectName || $[7] !== sharedChrome || $[8] !== toolbarProps) {
-			t5 = !isToolbarHidden && (page ? /* @__PURE__ */ jsx(MobilePreviewDrawer, {
+			$[5] = previewContent;
+			$[6] = t6;
+		} else t6 = $[6];
+		let t7;
+		if ($[7] !== isToolbarHidden || $[8] !== page || $[9] !== projectName || $[10] !== sharedChrome || $[11] !== toolbarProps) {
+			t7 = !isToolbarHidden && (page ? /* @__PURE__ */ jsx(MobilePreviewDrawer, {
 				page,
 				projectName
 			}) : !sharedChrome && /* @__PURE__ */ jsx(PreviewToolbar, { ...toolbarProps }));
-			$[4] = isToolbarHidden;
-			$[5] = page;
-			$[6] = projectName;
-			$[7] = sharedChrome;
-			$[8] = toolbarProps;
-			$[9] = t5;
-		} else t5 = $[9];
-		let t6;
-		if ($[10] !== t4 || $[11] !== t5) {
-			t6 = /* @__PURE__ */ jsxs(PanelContent, {
+			$[7] = isToolbarHidden;
+			$[8] = page;
+			$[9] = projectName;
+			$[10] = sharedChrome;
+			$[11] = toolbarProps;
+			$[12] = t7;
+		} else t7 = $[12];
+		let t8;
+		if ($[13] !== t6 || $[14] !== t7) {
+			t8 = /* @__PURE__ */ jsxs(PanelContent, {
 				className: "flex min-h-0 flex-col overflow-hidden bg-black",
-				children: [t4, t5]
+				children: [t6, t7]
 			});
-			$[10] = t4;
-			$[11] = t5;
-			$[12] = t6;
-		} else t6 = $[12];
-		return t6;
+			$[13] = t6;
+			$[14] = t7;
+			$[15] = t8;
+		} else t8 = $[15];
+		return t8;
 	}
-	let t4;
-	if ($[13] !== page) {
-		t4 = page && /* @__PURE__ */ jsx(CuratedBlockShortcuts, {});
-		$[13] = page;
-		$[14] = t4;
-	} else t4 = $[14];
-	let t5;
-	if ($[15] !== children || $[16] !== iframeElement || $[17] !== isEditMode || $[18] !== page || $[19] !== sharedChrome || $[20] !== toolbarProps || $[21] !== viewportMode) {
-		t5 = /* @__PURE__ */ jsx(PanelContent, {
+	let t6;
+	if ($[16] !== isCommentMode || $[17] !== page) {
+		t6 = page && !isCommentMode && /* @__PURE__ */ jsx(CuratedBlockShortcuts, {});
+		$[16] = isCommentMode;
+		$[17] = page;
+		$[18] = t6;
+	} else t6 = $[18];
+	let t7;
+	if ($[19] !== page) {
+		t7 = areCommentsEnabled() && page && /* @__PURE__ */ jsx(PreviewComments, {}, page.id);
+		$[19] = page;
+		$[20] = t7;
+	} else t7 = $[20];
+	let t8;
+	if ($[21] !== iframeElement || $[22] !== isCommentMode || $[23] !== isEditMode || $[24] !== page || $[25] !== previewContent || $[26] !== sharedChrome || $[27] !== toolbarProps || $[28] !== viewportMode) {
+		t8 = /* @__PURE__ */ jsx(PanelContent, {
 			className: "relative overflow-hidden bg-black",
 			children: /* @__PURE__ */ jsx("div", {
 				className: "absolute inset-0",
@@ -199,13 +233,13 @@ const PreviewPanel = (t0) => {
 					/* @__PURE__ */ jsx(PreviewFrame, {
 						className: "checkered h-full w-full",
 						onIframeReady: handleIframeReady,
-						children
+						children: previewContent
 					}),
-					isEditMode && /* @__PURE__ */ jsx(Overlays, {
+					isEditMode && !isCommentMode && /* @__PURE__ */ jsx(Overlays, {
 						iframeElement,
 						canAddBlocks: !!page
 					}),
-					isEditMode && /* @__PURE__ */ jsx(FieldToolbar, {}),
+					isEditMode && !isCommentMode && /* @__PURE__ */ jsx(FieldToolbar, {}),
 					!sharedChrome && /* @__PURE__ */ jsx(PreviewToolbar, { ...toolbarProps })
 				] }) : /* @__PURE__ */ jsxs("div", {
 					className: cn("checkered flex h-full justify-center", isEditMode ? "items-start" : "items-center"),
@@ -215,35 +249,41 @@ const PreviewPanel = (t0) => {
 							children: [/* @__PURE__ */ jsx(PreviewFrame, {
 								className: "overflow-auto",
 								onIframeReady: handleIframeReady,
-								children
-							}), isEditMode && /* @__PURE__ */ jsx(Overlays, {
+								children: previewContent
+							}), isEditMode && !isCommentMode && /* @__PURE__ */ jsx(Overlays, {
 								iframeElement,
 								canAddBlocks: !!page
 							})]
 						}),
-						isEditMode && /* @__PURE__ */ jsx(FieldToolbar, {}),
+						isEditMode && !isCommentMode && /* @__PURE__ */ jsx(FieldToolbar, {}),
 						!sharedChrome && /* @__PURE__ */ jsx(PreviewToolbar, { ...toolbarProps })
 					]
 				})
 			})
 		});
-		$[15] = children;
-		$[16] = iframeElement;
-		$[17] = isEditMode;
-		$[18] = page;
-		$[19] = sharedChrome;
-		$[20] = toolbarProps;
-		$[21] = viewportMode;
-		$[22] = t5;
-	} else t5 = $[22];
-	let t6;
-	if ($[23] !== t4 || $[24] !== t5) {
-		t6 = /* @__PURE__ */ jsxs(Fragment, { children: [t4, t5] });
-		$[23] = t4;
-		$[24] = t5;
-		$[25] = t6;
-	} else t6 = $[25];
-	return t6;
+		$[21] = iframeElement;
+		$[22] = isCommentMode;
+		$[23] = isEditMode;
+		$[24] = page;
+		$[25] = previewContent;
+		$[26] = sharedChrome;
+		$[27] = toolbarProps;
+		$[28] = viewportMode;
+		$[29] = t8;
+	} else t8 = $[29];
+	let t9;
+	if ($[30] !== t6 || $[31] !== t7 || $[32] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Fragment, { children: [
+			t6,
+			t7,
+			t8
+		] });
+		$[30] = t6;
+		$[31] = t7;
+		$[32] = t8;
+		$[33] = t9;
+	} else t9 = $[33];
+	return t9;
 };
 function _temp(state) {
 	return state.context.actions;
@@ -300,6 +340,10 @@ function _temp12() {
 	return true;
 }
 function _temp13() {
+	previewStore.send({
+		type: "setCommentMode",
+		enabled: false
+	});
 	previewStore.send({ type: "clearSelection" });
 }
 function _temp14(a) {