@ohhwells/bridge 0.1.55-next.163 → 0.1.55-next.168

package/dist/index.cjs

@@ -7192,6 +7192,47 @@ function AiSectionOverlay({
   ] });
 }
 
+// src/lib/section-instances.ts
+var SECTION_ORDER_KEY = "__ohw_section_order";
+function getPageSectionOrderEntries(raw, currentPath) {
+  if (!raw) return [];
+  try {
+    const entries = JSON.parse(raw);
+    return entries.filter((e) => !e.pagePath || e.pagePath === currentPath);
+  } catch {
+    return [];
+  }
+}
+function rekeySectionSubtree(root, instanceId) {
+  const suffix = `::${instanceId}`;
+  const rekey = (el, attr) => {
+    const current = el.getAttribute(attr);
+    if (current) el.setAttribute(attr, `${current}${suffix}`);
+  };
+  if (root.hasAttribute("data-ohw-key")) rekey(root, "data-ohw-key");
+  if (root.hasAttribute("data-ohw-href-key")) rekey(root, "data-ohw-href-key");
+  root.querySelectorAll("[data-ohw-key]").forEach((el) => rekey(el, "data-ohw-key"));
+  root.querySelectorAll("[data-ohw-href-key]").forEach((el) => rekey(el, "data-ohw-href-key"));
+}
+function initSectionInstancesFromContent(content, currentPath) {
+  document.querySelectorAll("[data-ohw-section]:not([data-ohw-instance])").forEach((el) => {
+    el.setAttribute("data-ohw-instance", el.getAttribute("data-ohw-section") ?? "");
+  });
+  const entries = getPageSectionOrderEntries(content[SECTION_ORDER_KEY], currentPath);
+  for (const entry of entries) {
+    if (entry.instanceId === entry.type) continue;
+    if (document.querySelector(`[data-ohw-instance="${CSS.escape(entry.instanceId)}"]`)) continue;
+    const original = document.querySelector(
+      `[data-ohw-section="${CSS.escape(entry.type)}"][data-ohw-instance="${CSS.escape(entry.type)}"]`
+    );
+    if (!original) continue;
+    const clone = original.cloneNode(true);
+    clone.setAttribute("data-ohw-instance", entry.instanceId);
+    rekeySectionSubtree(clone, entry.instanceId);
+    original.insertAdjacentElement("afterend", clone);
+  }
+}
+
 // src/OhhwellsBridge.tsx
 var import_react_dom4 = require("react-dom");
 var import_navigation3 = require("next/navigation");
@@ -7224,10 +7265,24 @@ function isPointOverBridgeChrome(x, y) {
   }
   return false;
 }
-function findCtaButtonAtPoint(x, y, media) {
+var BUTTON_LIKE_SELECTOR = `button, [role="button"], ${CTA_BUTTON_SELECTOR}`;
+function isButtonLikeElement(el) {
+  return el.matches(BUTTON_LIKE_SELECTOR);
+}
+function findClosestButtonLike(target) {
+  return target.closest(BUTTON_LIKE_SELECTOR);
+}
+function findButtonAtPoint(x, y, media) {
   const hits = Array.from(
-    document.querySelectorAll(CTA_BUTTON_SELECTOR)
-  ).filter((el) => containsPoint(el, x, y) && !(media && el.contains(media)));
+    document.querySelectorAll(BUTTON_LIKE_SELECTOR)
+  ).filter(
+    (el) => containsPoint(el, x, y) && !(media && el.contains(media)) && // Bridge-injected chrome (e.g. MediaOverlay's own "Replace image" button) is never a
+    // site button. Without this, once the media overlay renders its button lands right
+    // under the cursor, gets detected as "a button on the media", and dismisses the very
+    // overlay it belongs to — which removes the button, so the next hit-test finds nothing
+    // and the overlay reappears. Flip-flops every tick: the "Replace image" button flashes.
+    !el.closest("[data-ohw-bridge]")
+  );
   if (hits.length === 0) return null;
   return hits.reduce((best, el) => best.contains(el) ? el : best);
 }
@@ -15577,6 +15632,7 @@ function OhhwellsBridge() {
       applySocialsDisplayFromContent(content);
       enforceLinkHrefs();
       initSectionsFromContent(content, true);
+      initSectionInstancesFromContent(content, window.location.pathname);
       sectionsLoadedRef.current = true;
       pendingScheduleConfigRequests.current.splice(0).forEach(processConfigRequest);
       return imageLoads.length > 0 ? Promise.all(imageLoads).then(() => {
@@ -15613,6 +15669,7 @@ function OhhwellsBridge() {
       const content = contentCache.get(subdomain);
       if (!content) return;
       retryMissingSchedulingMounts(getPageSchedulingEntries(content["__ohw_sections"]), false);
+      initSectionInstancesFromContent(content, window.location.pathname);
       observer?.disconnect();
       try {
         applyBrandChrome(content);
@@ -16049,14 +16106,17 @@ function OhhwellsBridge() {
           });
           return;
         }
-        if (isMediaEditable(editable)) {
+        const clickedButton = findClosestButtonLike(target);
+        const buttonOnMedia = Boolean(clickedButton && isMediaEditable(editable) && editable.contains(clickedButton));
+        if (isMediaEditable(editable) && !buttonOnMedia) {
           e.preventDefault();
           e.stopPropagation();
           aiSectionApiRef.current?.selectFromElement(editable);
           postToParentRef.current({ type: "ow:image-pick", key: editable.dataset.ohwKey ?? "", elementType: editable.dataset.ohwEditable ?? "image" });
           return;
         }
-        const hrefCtx = getHrefKeyFromElement(editable);
+        const hrefLookupTarget = buttonOnMedia ? clickedButton : editable;
+        const hrefCtx = getHrefKeyFromElement(hrefLookupTarget);
         const navAnchor = hrefCtx ? getNavigationItemAnchor(hrefCtx.anchor) : null;
         if (navAnchor) {
           e.preventDefault();
@@ -16064,7 +16124,8 @@ function OhhwellsBridge() {
           if (selectedElRef.current === navAnchor) {
             if (e.detail >= 2) return;
             if (requestSocialDialog(navAnchor, postToParentRef.current, editContentRef.current)) return;
-            activateRef.current(editable, { caretX: e.clientX, caretY: e.clientY });
+            const activateTarget = isButtonLikeElement(hrefLookupTarget) ? navAnchor.querySelector('[data-ohw-editable="text"]') ?? hrefLookupTarget : hrefLookupTarget;
+            activateRef.current(activateTarget, { caretX: e.clientX, caretY: e.clientY });
             return;
           }
           selectRef.current(navAnchor);
@@ -16072,7 +16133,7 @@ function OhhwellsBridge() {
         }
         e.preventDefault();
         e.stopPropagation();
-        activateRef.current(editable, { caretX: e.clientX, caretY: e.clientY });
+        activateRef.current(hrefLookupTarget, { caretX: e.clientX, caretY: e.clientY });
         return;
       }
       const hrefAnchor = getNavigationItemAnchor(target);
@@ -16667,15 +16728,15 @@ function OhhwellsBridge() {
           dismissImageHover();
           return;
         }
-        const ctaHit = isDragOver ? null : findCtaButtonAtPoint(x2, y2, imgEl);
-        if (ctaHit) {
+        const buttonHit = isDragOver ? null : findButtonAtPoint(x2, y2, imgEl);
+        if (buttonHit) {
           dismissImageHover();
           document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
           const selected = selectedElRef.current;
-          if (selected !== ctaHit && !selected?.contains(ctaHit)) {
-            clearHrefKeyHover(ctaHit);
-            hoveredItemElRef.current = ctaHit;
-            setHoveredItemRect(ctaHit.getBoundingClientRect());
+          if (selected !== buttonHit && !selected?.contains(buttonHit)) {
+            clearHrefKeyHover(buttonHit);
+            hoveredItemElRef.current = buttonHit;
+            setHoveredItemRect(buttonHit.getBoundingClientRect());
           }
           return;
         }
@@ -17234,6 +17295,7 @@ function OhhwellsBridge() {
         sectionsLoadedRef.current = true;
         pendingScheduleConfigRequests.current.splice(0).forEach(processConfigRequest);
       }
+      initSectionInstancesFromContent(content, window.location.pathname);
       editContentRef.current = { ...editContentRef.current, ...content };
       reconcileNavbarItemsFromContent(editContentRef.current);
       reconcileFooterOrderFromContent(editContentRef.current);