@ohhwells/bridge 0.1.12 → 0.1.13

package/dist/index.js

@@ -3396,7 +3396,9 @@ function ToggleGroupItem({
     Toggle,
     {
       pressed: groupValue === value,
-      onPressedChange: () => onValueChange(value),
+      onPressedChange: (pressed) => {
+        if (pressed) onValueChange(value);
+      },
       className: cn(
         "text-foreground cursor-pointer hover:bg-transparent hover:text-foreground",
         "data-[state=on]:bg-background data-[state=on]:shadow-sm",
@@ -4088,8 +4090,6 @@ function OhhwellsBridge() {
       [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-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
-      [data-ohw-editable-state] [data-ohw-editable="image"],
-      [data-ohw-editable-state][data-ohw-editable="image"] { pointer-events: auto !important; }
     `;
       const forceHover = document.createElement("style");
       forceHover.setAttribute("data-ohw-active-state-style", "");
@@ -4116,10 +4116,12 @@ function OhhwellsBridge() {
       if (editable) {
         if (editable.dataset.ohwEditable === "image" || editable.dataset.ohwEditable === "bg-image") {
           e.preventDefault();
+          e.stopPropagation();
           postToParentRef.current({ type: "ow:image-pick", key: editable.dataset.ohwKey ?? "" });
           return;
         }
         e.preventDefault();
+        e.stopPropagation();
         activateRef.current(editable);
         return;
       }
@@ -4184,7 +4186,7 @@ function OhhwellsBridge() {
     };
     const postImageHover = (imgEl, isDragOver = false, forceTextOverlap) => {
       const r2 = getVisibleRect(imgEl);
-      const hasTextOverlap = forceTextOverlap ?? (imgEl.dataset.ohwEditable === "bg-image" || imgEl.hasAttribute("data-ohw-editable-state"));
+      const hasTextOverlap = forceTextOverlap ?? false;
       hoveredImageHasTextOverlapRef.current = hasTextOverlap;
       postToParentRef.current({
         type: "ow:image-hover",
@@ -4583,12 +4585,11 @@ function OhhwellsBridge() {
       if (hoveredImageRef.current) {
         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: el.dataset.ohwKey ?? "",
           rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height },
-          hasTextOverlap
+          hasTextOverlap: hoveredImageHasTextOverlapRef.current
         });
       }
     };
@@ -4662,12 +4663,49 @@ function OhhwellsBridge() {
       parentScrollRef.current = { iframeOffsetTop, headerH, canvasH };
       if (activeElRef.current) applyToolbarPos(activeElRef.current.getBoundingClientRect());
     };
+    const handleClickAt = (e) => {
+      if (e.data?.type !== "ow:click-at") return;
+      const { clientX, clientY } = e.data;
+      const allImages = Array.from(
+        document.querySelectorAll('[data-ohw-editable="image"], [data-ohw-editable="bg-image"]')
+      ).filter((el) => !!el.closest("[data-ohw-editable-state]"));
+      const stateCardImage = allImages.find((el) => {
+        const ownerCard = el.closest("[data-ohw-editable-state]");
+        if (ownerCard) {
+          const inHoverState = ownerCard.getAttribute("data-ohw-active-state") === "hover";
+          const elState = el.dataset.ohwState;
+          if (el === ownerCard && inHoverState) return false;
+          if (elState === "default" && inHoverState) return false;
+          if (elState === "hover" && !inHoverState) return false;
+        }
+        const r2 = el.getBoundingClientRect();
+        return clientX >= r2.left && clientX <= r2.right && clientY >= r2.top && clientY <= r2.bottom;
+      });
+      if (stateCardImage) {
+        postToParentRef.current({ type: "ow:image-pick", key: stateCardImage.dataset.ohwKey ?? "" });
+        return;
+      }
+      const textEditable = Array.from(
+        document.querySelectorAll(
+          '[data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"])'
+        )
+      ).find((el) => {
+        const r2 = el.getBoundingClientRect();
+        return clientX >= r2.left && clientX <= r2.right && clientY >= r2.top && clientY <= r2.bottom;
+      });
+      if (textEditable) {
+        activateRef.current(textEditable);
+        return;
+      }
+      deactivateRef.current();
+    };
     window.addEventListener("message", handleSave);
     window.addEventListener("message", handleImageUrl);
     window.addEventListener("message", handleAnimLock);
     window.addEventListener("message", handleCanvasHeight);
     window.addEventListener("message", handleParentScroll);
     window.addEventListener("message", handlePointerSync);
+    window.addEventListener("message", handleClickAt);
     document.addEventListener("click", handleClick, true);
     document.addEventListener("paste", handlePaste, true);
     document.addEventListener("input", handleInput, true);
@@ -4701,6 +4739,7 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleCanvasHeight);
       window.removeEventListener("message", handleParentScroll);
       window.removeEventListener("message", handlePointerSync);
+      window.removeEventListener("message", handleClickAt);
       window.removeEventListener("message", handleHydrate);
       window.removeEventListener("message", handleDeactivate);
       autoSaveTimers.current.forEach(clearTimeout);