@ohhwells/bridge 0.1.8 → 0.1.10

package/dist/index.js

@@ -3907,6 +3907,10 @@ function OhhwellsBridge() {
   const activate = useCallback((el) => {
     if (activeElRef.current === el) return;
     deactivate();
+    if (hoveredImageRef.current) {
+      hoveredImageRef.current = null;
+      postToParentRef.current({ type: "ow:image-unhover" });
+    }
     el.setAttribute("contenteditable", "true");
     el.removeAttribute("data-ohw-hovered");
     activeElRef.current = el;
@@ -4081,6 +4085,7 @@ function OhhwellsBridge() {
       [data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY}59 !important; }
       [data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
       [data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
+      [data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"]) { pointer-events: auto !important; }
     `;
       const forceHover = document.createElement("style");
       forceHover.setAttribute("data-ohw-active-state-style", "");
@@ -4175,10 +4180,13 @@ function OhhwellsBridge() {
     };
     const postImageHover = (imgEl, isDragOver = false) => {
       const r2 = getVisibleRect(imgEl);
+      const hasTextOverlap = imgEl.dataset.ohwEditable === "bg-image" || imgEl.hasAttribute("data-ohw-editable-state");
+      console.log("[OHW] postImageHover", { key: imgEl.dataset.ohwKey, editable: imgEl.dataset.ohwEditable, hasState: imgEl.hasAttribute("data-ohw-editable-state"), hasTextOverlap });
       postToParentRef.current({
         type: "ow:image-hover",
         key: imgEl.dataset.ohwKey ?? "",
         rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height },
+        hasTextOverlap,
         ...isDragOver ? { isDragOver: true } : {}
       });
       const track = imgEl.closest("[data-ohw-hover-pause]");
@@ -4225,7 +4233,16 @@ function OhhwellsBridge() {
       }
       return smallest;
     };
-    const probeImageAt = (clientX, clientY, isDragOver = false, fromParentViewport = false, fromOverlay = false) => {
+    const probeImageAt = (clientX, clientY, isDragOver = false, fromParentViewport = false) => {
+      if (activeElRef.current) {
+        console.log("[OHW] probeImageAt: text active, suppressing image hover");
+        if (hoveredImageRef.current) {
+          hoveredImageRef.current = null;
+          resumeAnimTracks();
+          postToParentRef.current({ type: "ow:image-unhover" });
+        }
+        return;
+      }
       const toggleEl = document.querySelector("[data-ohw-state-toggle]");
       if (toggleEl) {
         const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
@@ -4251,16 +4268,20 @@ function OhhwellsBridge() {
           }
           return;
         }
-        const topEditable = topEl?.closest("[data-ohw-editable]");
-        if (topEditable && topEditable.dataset.ohwEditable !== "image" && topEditable.dataset.ohwEditable !== "bg-image") {
-          if (topEditable.hasAttribute("contenteditable") && fromOverlay) return;
+        const textEditable = Array.from(
+          document.querySelectorAll('[data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"])')
+        ).find((el) => {
+          const er = el.getBoundingClientRect();
+          return x >= er.left && x <= er.right && y >= er.top && y <= er.bottom;
+        });
+        if (textEditable) {
           if (hoveredImageRef.current) {
             hoveredImageRef.current = null;
             resumeAnimTracks();
             postToParentRef.current({ type: "ow:image-unhover" });
           }
           document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
-          topEditable.setAttribute("data-ohw-hovered", "");
+          if (!textEditable.hasAttribute("contenteditable")) textEditable.setAttribute("data-ohw-hovered", "");
           return;
         }
         const activeHovered = document.querySelector("[data-ohw-hovered]");
@@ -4286,9 +4307,20 @@ function OhhwellsBridge() {
       } else {
         const inIframeView = clientX >= 0 && clientY >= 0 && clientX <= window.innerWidth && clientY <= window.innerHeight;
         if (!inIframeView) return;
-        hoveredImageRef.current = null;
-        resumeAnimTracks();
-        postToParentRef.current({ type: "ow:image-unhover" });
+        if (hoveredImageRef.current) {
+          hoveredImageRef.current = null;
+          resumeAnimTracks();
+          postToParentRef.current({ type: "ow:image-unhover" });
+        }
+        const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
+        const textEl = Array.from(
+          document.querySelectorAll('[data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"])')
+        ).find((el) => {
+          const er = el.getBoundingClientRect();
+          return x >= er.left && x <= er.right && y >= er.top && y <= er.bottom;
+        });
+        document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+        if (textEl && !textEl.hasAttribute("contenteditable")) textEl.setAttribute("data-ohw-hovered", "");
       }
     };
     const probeHoverCardsAt = (clientX, clientY, fromParentViewport = false) => {
@@ -4325,9 +4357,9 @@ function OhhwellsBridge() {
     };
     const handlePointerSync = (e) => {
       if (e.data?.type !== "ow:pointer-sync") return;
-      const { clientX, clientY, fromOverlay } = e.data;
+      const { clientX, clientY } = e.data;
       if (typeof clientX !== "number" || typeof clientY !== "number") return;
-      probeImageAt(clientX, clientY, false, false, fromOverlay ?? false);
+      probeImageAt(clientX, clientY);
       probeHoverCardsAt(clientX, clientY);
     };
     const handleDragOver = (e) => {
@@ -4526,11 +4558,14 @@ function OhhwellsBridge() {
         setToggleState((prev) => prev ? { ...prev, rect } : null);
       }
       if (hoveredImageRef.current) {
-        const r2 = hoveredImageRef.current.getBoundingClientRect();
+        const el = hoveredImageRef.current;
+        const r2 = el.getBoundingClientRect();
+        const hasTextOverlap = el.dataset.ohwEditable === "bg-image" || el.hasAttribute("data-ohw-editable-state");
         postToParentRef.current({
           type: "ow:image-hover",
-          key: hoveredImageRef.current.dataset.ohwKey ?? "",
-          rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height }
+          key: el.dataset.ohwKey ?? "",
+          rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height },
+          hasTextOverlap
         });
       }
     };