camox 0.41.0 → 0.42.0

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

@@ -0,0 +1,56 @@
+import { previewStore, selectIsCommentMode } from "../previewStore.js";
+import { previewCommentsStore } from "../previewCommentsStore.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 { createPortal } from "react-dom";
+
+//#region src/features/preview/components/PreviewComments.tsx
+const commentCursor = `url("data:image/svg+xml,${encodeURIComponent("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 32 32\"><path d=\"M16 1a15 15 0 0 1 0 30H1V16A15 15 0 0 1 16 1Z\" fill=\"oklch(69.6% 0.17 162.48)\" stroke=\"white\" stroke-width=\"2\"/></svg>")}") 1 23, crosshair`;
+/** Comment mode lifecycle and cursor. Editable components handle selection and clicks. */
+function PreviewComments() {
+	const $ = c(5);
+	if ($[0] !== "d824232b82365a442ae6220ec1d54f5b3bfeb17d2c1560e70b52c59208d222b1") {
+		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "d824232b82365a442ae6220ec1d54f5b3bfeb17d2c1560e70b52c59208d222b1";
+	}
+	const iframe = useSelector(previewStore, _temp);
+	const commenting = useSelector(previewStore, selectIsCommentMode);
+	const doc = iframe?.contentDocument;
+	let t0;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = [];
+		$[1] = t0;
+	} else t0 = $[1];
+	React.useEffect(_temp3, t0);
+	if (!doc || !commenting) return null;
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx("style", { children: `html, html * { cursor: ${commentCursor} !important; }` });
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== doc.head) {
+		t2 = createPortal(t1, doc.head);
+		$[3] = doc.head;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+function _temp3() {
+	return _temp2;
+}
+function _temp2() {
+	previewStore.send({
+		type: "setCommentMode",
+		enabled: false
+	});
+	previewCommentsStore.send({ type: "clearSelection" });
+}
+function _temp(state) {
+	return state.context.iframeElement;
+}
+
+//#endregion
+export { PreviewComments };

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 } 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] !== "d1fef758f47859e4d6ac1a8436e009a46839990f032b83d1c6b20b946ff84297") {
+	if ($[0] !== "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e") {
 		for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "d1fef758f47859e4d6ac1a8436e009a46839990f032b83d1c6b20b946ff84297";
+		$[0] = "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e";
 	}
 	const { children, style, className, onIframeReady } = t0;
 	let t1;
@@ -62,9 +65,9 @@ const PreviewFrame = (t0) => {
 };
 const KeyDownForwarder = () => {
 	const $ = c(5);
-	if ($[0] !== "d1fef758f47859e4d6ac1a8436e009a46839990f032b83d1c6b20b946ff84297") {
+	if ($[0] !== "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e") {
 		for (let $i = 0; $i < 5; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "d1fef758f47859e4d6ac1a8436e009a46839990f032b83d1c6b20b946ff84297";
+		$[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;
@@ -86,15 +89,27 @@ 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);
+			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);
+				iframeWindow.removeEventListener("keydown", handleCapturedKeyDown, true);
+				iframeWindow.removeEventListener("keydown", handleEscape);
 			};
 		};
 		t1 = [iframeWindow, actions];
@@ -115,82 +130,102 @@ const viewportClassName = {
 };
 function CuratedBlockShortcuts() {
 	const $ = c(1);
-	if ($[0] !== "d1fef758f47859e4d6ac1a8436e009a46839990f032b83d1c6b20b946ff84297") {
+	if ($[0] !== "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e") {
 		for (let $i = 0; $i < 1; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "d1fef758f47859e4d6ac1a8436e009a46839990f032b83d1c6b20b946ff84297";
+		$[0] = "2ff281df7470ab1480710764847a6828eb3009ff64e2feadae4454d04b90f99e";
 	}
 	useBlockActionsShortcuts();
 	return null;
 }
 const PreviewPanel = (t0) => {
-	const $ = c(26);
-	if ($[0] !== "d1fef758f47859e4d6ac1a8436e009a46839990f032b83d1c6b20b946ff84297") {
-		for (let $i = 0; $i < 26; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-		$[0] = "d1fef758f47859e4d6ac1a8436e009a46839990f032b83d1c6b20b946ff84297";
+	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, _temp5);
-	const isToolbarHidden = useSelector(previewStore, _temp6);
-	let t3;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = [];
-		$[1] = t3;
-	} else t3 = $[1];
-	React.useEffect(_temp16, t3);
+	const isEditMode = useSelector(previewStore, selectIsEditMode);
+	const isCommentMode = useSelector(previewStore, selectIsCommentMode);
+	const isToolbarHidden = useSelector(previewStore, _temp5);
+	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",
@@ -198,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"),
@@ -214,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;
@@ -260,54 +301,55 @@ function _temp4(state_0) {
 	return state_0.context.viewportMode;
 }
 function _temp5(state_1) {
-	return state_1.context.isEditMode;
+	return state_1.context.isToolbarHidden;
 }
-function _temp6(state_2) {
-	return state_2.context.isToolbarHidden;
-}
-function _temp7() {
+function _temp6() {
 	return true;
 }
-function _temp8() {
+function _temp7() {
 	return previewStore.send({ type: "cycleViewportMode" });
 }
-function _temp9() {
+function _temp8() {
 	return true;
 }
-function _temp0() {
+function _temp9() {
 	return previewStore.send({
 		type: "setViewportMode",
 		mode: "full"
 	});
 }
-function _temp1() {
+function _temp0() {
 	return true;
 }
-function _temp10() {
+function _temp1() {
 	return previewStore.send({
 		type: "setViewportMode",
 		mode: "tablet"
 	});
 }
-function _temp11() {
+function _temp10() {
 	return true;
 }
-function _temp12() {
+function _temp11() {
 	return previewStore.send({
 		type: "setViewportMode",
 		mode: "mobile"
 	});
 }
-function _temp13() {
+function _temp12() {
 	return true;
 }
-function _temp14() {
+function _temp13() {
+	previewStore.send({
+		type: "setCommentMode",
+		enabled: false
+	});
 	previewStore.send({ type: "clearSelection" });
 }
-function _temp15(a) {
+function _temp14(a) {
 	return a.id;
 }
-function _temp16() {
+function _temp15() {
 	const actions = [
 		{
 			id: "cycle-viewport-mode",
@@ -318,8 +360,8 @@ function _temp16() {
 				"Device preview"
 			],
 			groupLabel: "Preview",
-			checkIfAvailable: _temp7,
-			execute: _temp8,
+			checkIfAvailable: _temp6,
+			execute: _temp7,
 			shortcut: { key: "m" }
 		},
 		{
@@ -331,16 +373,16 @@ function _temp16() {
 				"Full width preview"
 			],
 			groupLabel: "Preview",
-			checkIfAvailable: _temp9,
-			execute: _temp0
+			checkIfAvailable: _temp8,
+			execute: _temp9
 		},
 		{
 			id: "set-viewport-tablet",
 			label: "Set tablet viewport",
 			aliases: ["Tablet preview", "Responsive preview"],
 			groupLabel: "Preview",
-			checkIfAvailable: _temp1,
-			execute: _temp10
+			checkIfAvailable: _temp0,
+			execute: _temp1
 		},
 		{
 			id: "set-viewport-mobile",
@@ -351,16 +393,16 @@ function _temp16() {
 				"Responsive preview"
 			],
 			groupLabel: "Preview",
-			checkIfAvailable: _temp11,
-			execute: _temp12
+			checkIfAvailable: _temp10,
+			execute: _temp11
 		},
 		{
 			id: "clear-selection",
 			label: "Clear selection",
 			aliases: ["Deselect", "Unselect"],
 			groupLabel: "Preview",
-			checkIfAvailable: _temp13,
-			execute: _temp14,
+			checkIfAvailable: _temp12,
+			execute: _temp13,
 			shortcut: { key: "Escape" }
 		}
 	];
@@ -371,7 +413,7 @@ function _temp16() {
 	return () => {
 		actionsStore.send({
 			type: "unregisterManyActions",
-			ids: actions.map(_temp15)
+			ids: actions.map(_temp14)
 		});
 	};
 }