@cmssy/react 9.7.1 → 9.8.0

package/dist/client.cjs

@@ -94,6 +94,8 @@ function useEditBridge(page, config) {
   const [order, setOrder] = react.useState(null);
   const [removed, setRemoved] = react.useState([]);
   const selectedIdRef = react.useRef(null);
+  const postSafeRef = react.useRef(() => {
+  });
   const { id: pageId, blocks } = page;
   const blocksKey = blocks.map((b) => `${b.id}:${b.type}`).join("|");
   react.useEffect(() => {
@@ -209,6 +211,7 @@ function useEditBridge(page, config) {
         sendReady();
       }
     };
+    postSafeRef.current = postSafe;
     const onClick = (event) => {
       const target = event.target;
       const el = target?.closest?.("[data-block-id]");
@@ -222,7 +225,10 @@ function useEditBridge(page, config) {
         return;
       }
       selectedIdRef.current = id;
-      if (target?.closest?.("a[href]")) event.preventDefault();
+      if (target?.closest?.("a[href]")) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
       const r = el.getBoundingClientRect();
       const layoutPosition = el.getAttribute("data-layout-position");
       postSafe({
@@ -253,7 +259,7 @@ function useEditBridge(page, config) {
       });
     };
     window.addEventListener("message", handler);
-    document.addEventListener("click", onClick);
+    document.addEventListener("click", onClick, { capture: true });
     window.addEventListener("scroll", emitSelectedBounds, {
       capture: true,
       passive: true
@@ -263,13 +269,26 @@ function useEditBridge(page, config) {
     return () => {
       if (boundsRaf) cancelAnimationFrame(boundsRaf);
       window.removeEventListener("message", handler);
-      document.removeEventListener("click", onClick);
+      document.removeEventListener("click", onClick, { capture: true });
       window.removeEventListener("scroll", emitSelectedBounds, {
         capture: true
       });
       window.removeEventListener("resize", emitSelectedBounds);
     };
   }, [config.editorOrigin, pageId, blocksKey]);
+  react.useEffect(() => {
+    if (typeof window === "undefined" || window.parent === window) return;
+    const notifySelectionGone = () => {
+      if (!selectedIdRef.current) return;
+      selectedIdRef.current = null;
+      postSafeRef.current({ type: "cmssy:deselect" });
+    };
+    window.addEventListener("pagehide", notifySelectionGone);
+    return () => {
+      window.removeEventListener("pagehide", notifySelectionGone);
+      notifySelectionGone();
+    };
+  }, []);
   return {
     patches,
     patchesStyle,

package/dist/client.js

@@ -93,6 +93,8 @@ function useEditBridge(page, config) {
   const [order, setOrder] = useState(null);
   const [removed, setRemoved] = useState([]);
   const selectedIdRef = useRef(null);
+  const postSafeRef = useRef(() => {
+  });
   const { id: pageId, blocks } = page;
   const blocksKey = blocks.map((b) => `${b.id}:${b.type}`).join("|");
   useEffect(() => {
@@ -208,6 +210,7 @@ function useEditBridge(page, config) {
         sendReady();
       }
     };
+    postSafeRef.current = postSafe;
     const onClick = (event) => {
       const target = event.target;
       const el = target?.closest?.("[data-block-id]");
@@ -221,7 +224,10 @@ function useEditBridge(page, config) {
         return;
       }
       selectedIdRef.current = id;
-      if (target?.closest?.("a[href]")) event.preventDefault();
+      if (target?.closest?.("a[href]")) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
       const r = el.getBoundingClientRect();
       const layoutPosition = el.getAttribute("data-layout-position");
       postSafe({
@@ -252,7 +258,7 @@ function useEditBridge(page, config) {
       });
     };
     window.addEventListener("message", handler);
-    document.addEventListener("click", onClick);
+    document.addEventListener("click", onClick, { capture: true });
     window.addEventListener("scroll", emitSelectedBounds, {
       capture: true,
       passive: true
@@ -262,13 +268,26 @@ function useEditBridge(page, config) {
     return () => {
       if (boundsRaf) cancelAnimationFrame(boundsRaf);
       window.removeEventListener("message", handler);
-      document.removeEventListener("click", onClick);
+      document.removeEventListener("click", onClick, { capture: true });
       window.removeEventListener("scroll", emitSelectedBounds, {
         capture: true
       });
       window.removeEventListener("resize", emitSelectedBounds);
     };
   }, [config.editorOrigin, pageId, blocksKey]);
+  useEffect(() => {
+    if (typeof window === "undefined" || window.parent === window) return;
+    const notifySelectionGone = () => {
+      if (!selectedIdRef.current) return;
+      selectedIdRef.current = null;
+      postSafeRef.current({ type: "cmssy:deselect" });
+    };
+    window.addEventListener("pagehide", notifySelectionGone);
+    return () => {
+      window.removeEventListener("pagehide", notifySelectionGone);
+      notifySelectionGone();
+    };
+  }, []);
   return {
     patches,
     patchesStyle,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmssy/react",
-  "version": "9.7.1",
+  "version": "9.8.0",
   "description": "React blocks, renderers, data client and editor bridge for cmssy headless sites",
   "keywords": [
     "cmssy",
@@ -62,7 +62,7 @@
   },
   "dependencies": {
     "@cmssy/types": "0.29.0",
-    "@cmssy/core": "9.7.1"
+    "@cmssy/core": "9.8.0"
   },
   "scripts": {
     "build": "tsup",