@cmssy/react 12.6.0 → 12.7.1

package/dist/client.cjs

@@ -65,6 +65,141 @@ function resolveShortcutAction(event, isMac, isTyping) {
   return null;
 }
 
+// src/bridge/invisible-blocks.ts
+var TRANSPARENT = 0.01;
+var VISIBLE_TEXT_FRACTION = 0.5;
+var MEDIA = "img,svg,video,canvas,picture,iframe";
+var UNPAINTED_TEXT = /* @__PURE__ */ new Set(["SCRIPT", "STYLE", "TEMPLATE", "NOSCRIPT"]);
+function effectiveOpacity(node) {
+  let value = 1;
+  let current = node;
+  while (current) {
+    const style = getComputedStyle(current);
+    if (style.display === "none" || style.visibility === "hidden") return 0;
+    const own = Number.parseFloat(style.opacity);
+    if (Number.isFinite(own)) value *= own;
+    if (value <= TRANSPARENT) return 0;
+    if (current === document.documentElement) break;
+    current = current.parentElement;
+  }
+  return value;
+}
+function holdsText(el) {
+  for (const node of el.childNodes) {
+    if (node.nodeType === 3 && node.textContent?.trim()) return true;
+  }
+  return false;
+}
+function collectCopy(block) {
+  const copy = [];
+  const keep = (el) => {
+    if (UNPAINTED_TEXT.has(el.tagName)) return;
+    if (el.closest("svg")) return;
+    if (holdsText(el)) copy.push(el);
+  };
+  keep(block);
+  for (const el of block.querySelectorAll("*")) keep(el);
+  return copy;
+}
+function collectMedia(block) {
+  const media = [];
+  if (block.matches(MEDIA)) media.push(block);
+  for (const el of block.querySelectorAll(MEDIA)) media.push(el);
+  return media;
+}
+function isBlockPainted(block) {
+  const copy = collectCopy(block);
+  if (copy.length > 0) {
+    const visible2 = copy.filter((el) => effectiveOpacity(el) > TRANSPARENT);
+    return visible2.length >= copy.length * VISIBLE_TEXT_FRACTION;
+  }
+  const media = collectMedia(block);
+  if (media.length === 0) return true;
+  return media.some((el) => effectiveOpacity(el) > TRANSPARENT);
+}
+
+// src/bridge/use-invisible-blocks.ts
+var DWELL_MS = 1500;
+var VISIBLE_FRACTION = 0.35;
+var SWEEP_MS = 2e3;
+function useInvisibleBlocks(enabled, blocksKey, report) {
+  const reportRef = react.useRef(report);
+  reportRef.current = report;
+  react.useEffect(() => {
+    if (!enabled) return;
+    if (typeof document === "undefined") return;
+    if (typeof IntersectionObserver === "undefined") return;
+    const timers = /* @__PURE__ */ new Map();
+    const observed = /* @__PURE__ */ new WeakSet();
+    const invisible = /* @__PURE__ */ new Map();
+    let reported = "";
+    const flush = () => {
+      const blocks = [...invisible.values()];
+      const key = blocks.map((block) => `${block.blockId}:${block.blockType}`).sort().join("|");
+      if (key === reported) return;
+      reported = key;
+      reportRef.current(blocks);
+    };
+    const judge = (el) => {
+      const blockId = el.getAttribute("data-block-id");
+      const blockType = el.getAttribute("data-block-type");
+      if (!blockId || !blockType) return;
+      if (isBlockPainted(el)) invisible.delete(blockId);
+      else invisible.set(blockId, { blockId, blockType });
+      flush();
+    };
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const pending = timers.get(entry.target);
+          if (!entry.isIntersecting || entry.intersectionRatio < VISIBLE_FRACTION) {
+            if (pending) {
+              clearTimeout(pending);
+              timers.delete(entry.target);
+            }
+            continue;
+          }
+          if (pending) continue;
+          timers.set(
+            entry.target,
+            setTimeout(() => {
+              timers.delete(entry.target);
+              judge(entry.target);
+            }, DWELL_MS)
+          );
+        }
+      },
+      { threshold: VISIBLE_FRACTION }
+    );
+    const sweep = () => {
+      const present = /* @__PURE__ */ new Set();
+      for (const el of document.querySelectorAll("[data-block-id]")) {
+        if (!observed.has(el)) {
+          observed.add(el);
+          observer.observe(el);
+        }
+        const blockId = el.getAttribute("data-block-id");
+        if (!blockId) continue;
+        present.add(blockId);
+        if (invisible.has(blockId) && isBlockPainted(el)) {
+          invisible.delete(blockId);
+        }
+      }
+      for (const blockId of [...invisible.keys()]) {
+        if (!present.has(blockId)) invisible.delete(blockId);
+      }
+      flush();
+    };
+    sweep();
+    const interval = setInterval(sweep, SWEEP_MS);
+    return () => {
+      observer.disconnect();
+      for (const timer of timers.values()) clearTimeout(timer);
+      clearInterval(interval);
+    };
+  }, [enabled, blocksKey]);
+}
+
 // src/bridge/use-edit-bridge.tsx
 var ZERO_RECT = { x: 0, y: 0, width: 0, height: 0 };
 function collectRects() {
@@ -88,6 +223,9 @@ function findBlockEl(blockId) {
     return null;
   }
 }
+function canDetectInvisibleBlocks() {
+  return typeof document !== "undefined" && typeof IntersectionObserver !== "undefined";
+}
 function prefersReducedMotion() {
   return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
@@ -126,6 +264,7 @@ function useEditBridge(page, config) {
   });
   const { id: pageId, blocks } = page;
   const blocksKey = blocks.map((b) => `${b.id}:${b.type}`).join("|");
+  const framed = typeof window !== "undefined" && window.parent !== window;
   react.useEffect(() => {
     setPatches({});
     setPatchesStyle({});
@@ -172,7 +311,7 @@ function useEditBridge(page, config) {
           ],
           schemas: config.schemas ?? /* @__PURE__ */ Object.create(null),
           blockMeta: config.blockMeta ?? /* @__PURE__ */ Object.create(null),
-          capabilities: ["shortcuts"]
+          capabilities: canDetectInvisibleBlocks() ? ["shortcuts", "invisible-blocks"] : ["shortcuts"]
         });
       } catch (error) {
         if (typeof console !== "undefined") {
@@ -322,6 +461,13 @@ function useEditBridge(page, config) {
       window.removeEventListener("resize", emitSelectedBounds);
     };
   }, [config.editorOrigin, pageId, blocksKey]);
+  useInvisibleBlocks(framed, blocksKey, (invisibleBlocks) => {
+    postSafeRef.current({
+      type: "cmssy:invisible-blocks",
+      protocolVersion: core.PROTOCOL_VERSION,
+      blocks: invisibleBlocks
+    });
+  });
   react.useEffect(() => {
     emitBoundsRef.current();
   });

package/dist/client.js

@@ -63,6 +63,141 @@ function resolveShortcutAction(event, isMac, isTyping) {
   return null;
 }
 
+// src/bridge/invisible-blocks.ts
+var TRANSPARENT = 0.01;
+var VISIBLE_TEXT_FRACTION = 0.5;
+var MEDIA = "img,svg,video,canvas,picture,iframe";
+var UNPAINTED_TEXT = /* @__PURE__ */ new Set(["SCRIPT", "STYLE", "TEMPLATE", "NOSCRIPT"]);
+function effectiveOpacity(node) {
+  let value = 1;
+  let current = node;
+  while (current) {
+    const style = getComputedStyle(current);
+    if (style.display === "none" || style.visibility === "hidden") return 0;
+    const own = Number.parseFloat(style.opacity);
+    if (Number.isFinite(own)) value *= own;
+    if (value <= TRANSPARENT) return 0;
+    if (current === document.documentElement) break;
+    current = current.parentElement;
+  }
+  return value;
+}
+function holdsText(el) {
+  for (const node of el.childNodes) {
+    if (node.nodeType === 3 && node.textContent?.trim()) return true;
+  }
+  return false;
+}
+function collectCopy(block) {
+  const copy = [];
+  const keep = (el) => {
+    if (UNPAINTED_TEXT.has(el.tagName)) return;
+    if (el.closest("svg")) return;
+    if (holdsText(el)) copy.push(el);
+  };
+  keep(block);
+  for (const el of block.querySelectorAll("*")) keep(el);
+  return copy;
+}
+function collectMedia(block) {
+  const media = [];
+  if (block.matches(MEDIA)) media.push(block);
+  for (const el of block.querySelectorAll(MEDIA)) media.push(el);
+  return media;
+}
+function isBlockPainted(block) {
+  const copy = collectCopy(block);
+  if (copy.length > 0) {
+    const visible2 = copy.filter((el) => effectiveOpacity(el) > TRANSPARENT);
+    return visible2.length >= copy.length * VISIBLE_TEXT_FRACTION;
+  }
+  const media = collectMedia(block);
+  if (media.length === 0) return true;
+  return media.some((el) => effectiveOpacity(el) > TRANSPARENT);
+}
+
+// src/bridge/use-invisible-blocks.ts
+var DWELL_MS = 1500;
+var VISIBLE_FRACTION = 0.35;
+var SWEEP_MS = 2e3;
+function useInvisibleBlocks(enabled, blocksKey, report) {
+  const reportRef = useRef(report);
+  reportRef.current = report;
+  useEffect(() => {
+    if (!enabled) return;
+    if (typeof document === "undefined") return;
+    if (typeof IntersectionObserver === "undefined") return;
+    const timers = /* @__PURE__ */ new Map();
+    const observed = /* @__PURE__ */ new WeakSet();
+    const invisible = /* @__PURE__ */ new Map();
+    let reported = "";
+    const flush = () => {
+      const blocks = [...invisible.values()];
+      const key = blocks.map((block) => `${block.blockId}:${block.blockType}`).sort().join("|");
+      if (key === reported) return;
+      reported = key;
+      reportRef.current(blocks);
+    };
+    const judge = (el) => {
+      const blockId = el.getAttribute("data-block-id");
+      const blockType = el.getAttribute("data-block-type");
+      if (!blockId || !blockType) return;
+      if (isBlockPainted(el)) invisible.delete(blockId);
+      else invisible.set(blockId, { blockId, blockType });
+      flush();
+    };
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const pending = timers.get(entry.target);
+          if (!entry.isIntersecting || entry.intersectionRatio < VISIBLE_FRACTION) {
+            if (pending) {
+              clearTimeout(pending);
+              timers.delete(entry.target);
+            }
+            continue;
+          }
+          if (pending) continue;
+          timers.set(
+            entry.target,
+            setTimeout(() => {
+              timers.delete(entry.target);
+              judge(entry.target);
+            }, DWELL_MS)
+          );
+        }
+      },
+      { threshold: VISIBLE_FRACTION }
+    );
+    const sweep = () => {
+      const present = /* @__PURE__ */ new Set();
+      for (const el of document.querySelectorAll("[data-block-id]")) {
+        if (!observed.has(el)) {
+          observed.add(el);
+          observer.observe(el);
+        }
+        const blockId = el.getAttribute("data-block-id");
+        if (!blockId) continue;
+        present.add(blockId);
+        if (invisible.has(blockId) && isBlockPainted(el)) {
+          invisible.delete(blockId);
+        }
+      }
+      for (const blockId of [...invisible.keys()]) {
+        if (!present.has(blockId)) invisible.delete(blockId);
+      }
+      flush();
+    };
+    sweep();
+    const interval = setInterval(sweep, SWEEP_MS);
+    return () => {
+      observer.disconnect();
+      for (const timer of timers.values()) clearTimeout(timer);
+      clearInterval(interval);
+    };
+  }, [enabled, blocksKey]);
+}
+
 // src/bridge/use-edit-bridge.tsx
 var ZERO_RECT = { x: 0, y: 0, width: 0, height: 0 };
 function collectRects() {
@@ -86,6 +221,9 @@ function findBlockEl(blockId) {
     return null;
   }
 }
+function canDetectInvisibleBlocks() {
+  return typeof document !== "undefined" && typeof IntersectionObserver !== "undefined";
+}
 function prefersReducedMotion() {
   return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
@@ -124,6 +262,7 @@ function useEditBridge(page, config) {
   });
   const { id: pageId, blocks } = page;
   const blocksKey = blocks.map((b) => `${b.id}:${b.type}`).join("|");
+  const framed = typeof window !== "undefined" && window.parent !== window;
   useEffect(() => {
     setPatches({});
     setPatchesStyle({});
@@ -170,7 +309,7 @@ function useEditBridge(page, config) {
           ],
           schemas: config.schemas ?? /* @__PURE__ */ Object.create(null),
           blockMeta: config.blockMeta ?? /* @__PURE__ */ Object.create(null),
-          capabilities: ["shortcuts"]
+          capabilities: canDetectInvisibleBlocks() ? ["shortcuts", "invisible-blocks"] : ["shortcuts"]
         });
       } catch (error) {
         if (typeof console !== "undefined") {
@@ -320,6 +459,13 @@ function useEditBridge(page, config) {
       window.removeEventListener("resize", emitSelectedBounds);
     };
   }, [config.editorOrigin, pageId, blocksKey]);
+  useInvisibleBlocks(framed, blocksKey, (invisibleBlocks) => {
+    postSafeRef.current({
+      type: "cmssy:invisible-blocks",
+      protocolVersion: PROTOCOL_VERSION,
+      blocks: invisibleBlocks
+    });
+  });
   useEffect(() => {
     emitBoundsRef.current();
   });

package/package.json

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