@ohhwells/bridge 0.1.105 → 0.1.107

package/dist/index.js

@@ -520,6 +520,19 @@ function alignSubjectOf(el) {
   while (subject.parentElement && !subject.parentElement.hasAttribute("data-ohw-section") && /^inline/.test(getComputedStyle(subject).display)) {
     subject = subject.parentElement;
   }
+  const TEXT_ROW = /^(P|LI|H[1-6]|BLOCKQUOTE|FIGCAPTION|DT|DD)$/;
+  const parent = subject.parentElement;
+  if (parent && TEXT_ROW.test(parent.tagName) && /^(inline-)?flex$/.test(getComputedStyle(parent).display)) {
+    return parent;
+  }
+  if (parent && !parent.hasAttribute("data-ohw-section")) {
+    const pcs = getComputedStyle(parent);
+    const children = Array.from(parent.children);
+    const textRowChild = (c) => c.hasAttribute("data-ohw-editable") || (c.textContent ?? "").trim().length === 0 || c.getAttribute("aria-hidden") === "true";
+    if (/^(inline-)?flex$/.test(pcs.display) && pcs.flexDirection.startsWith("row") && children.length > 0 && children.some((c) => c.hasAttribute("data-ohw-editable")) && children.every(textRowChild)) {
+      return parent;
+    }
+  }
   const row = subject.closest("li");
   if (row && row !== subject && /^(inline-)?flex$/.test(getComputedStyle(row).display)) {
     return row;
@@ -19434,10 +19447,21 @@ function OhhwellsBridge() {
         gap: 6px;
       }
       /* Not the form: it is a layout container (flex/grid with gaps), and forcing block
-         crushed its fields together (OHH-490). */
-      [data-ohw-editable]:not([data-ohw-editable="form"]) {
+         crushed its fields together (OHH-490). Not media (image/bg-image/video/icon/map)
+         either: those can be their own flex containers centering fallback content (a
+         placeholder label, a mascot emoji) \u2014 forcing block broke that centering while the
+         image was unset (OHH-758-ish). */
+      [data-ohw-editable]:not([data-ohw-editable="form"]):not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"]):not([data-ohw-editable="video"]):not([data-ohw-editable="icon"]):not([data-ohw-editable="map"]) {
         display: block;
       }
+      /* The block-force above is an author rule, so it beats the browser's own
+         details-not-open child-display-none UA rule \u2014 origin always wins over specificity.
+         Left alone, a closed FAQ's answer became a real, hoverable box that overflowed past
+         the collapsed <details> into the gap before the next item. Restore the native
+         collapse for editable content once it isn't the summary. */
+      details:not([open]) > [data-ohw-editable]:not(summary) {
+        display: none !important;
+      }
       /* Body text (no item-action toolbar) \u2014 first click enters text edit \u2192 I-beam.
          Exclude select-first nav/footer labels so grab/default on [data-ohw-href-key] can win. */
       [data-ohw-editable]:not([contenteditable]):not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"]):not([data-ohw-editable="video"]):not([data-ohw-editable="link"]):not(:is([data-ohw-href-key] *)) {
@@ -19461,6 +19485,14 @@ function OhhwellsBridge() {
       [data-ohw-editable="video"], [data-ohw-editable="video"] *,
       [data-ohw-editable="bg-image"], [data-ohw-editable="bg-image"] * { cursor: pointer !important; }
       [data-ohw-editable="link"], [data-ohw-editable="link"] * { cursor: pointer !important; }
+      /* A text/plain editable nested inside a media editable (e.g. a placeholder's fallback
+         label inside its bg-image box) is its own click target, not the media picker \u2014 the
+         blanket media cursor rule above would otherwise show pointer where a click actually
+         opens text edit. */
+      [data-ohw-editable="bg-image"] [data-ohw-editable="text"],
+      [data-ohw-editable="bg-image"] [data-ohw-editable="text"] *,
+      [data-ohw-editable="image"] [data-ohw-editable="text"],
+      [data-ohw-editable="image"] [data-ohw-editable="text"] * { cursor: text !important; }
       /* A form field is a design surface in the editor: its input takes the pointer so the
          field can be picked and hovered from anywhere inside it (OHH-642). */
       [data-ohw-editable="form"] [data-ohw-form-field] input,
@@ -20047,6 +20079,8 @@ function OhhwellsBridge() {
         setFormHoverRect(null);
       }
       if (!editable) return;
+      const editableRect = editable.getBoundingClientRect();
+      if (editableRect.width <= 0 || editableRect.height <= 0) return;
       const selected = selectedElRef.current;
       if (selected && (selected === editable || selected.contains(editable))) return;
       if (!isMediaEditable(editable) && !editable.hasAttribute("contenteditable")) {
@@ -22150,6 +22184,18 @@ function OhhwellsBridge() {
       hoveredNavContainerRef.current = null;
       setHoveredNavContainerRect(null);
     };
+    const handleDetailsToggle = (e) => {
+      if (e.target?.tagName !== "DETAILS") return;
+      document.querySelectorAll("[data-ohw-hovered]").forEach((hovered) => {
+        hovered.removeAttribute("data-ohw-hovered");
+      });
+      setHoveredTextRect(null);
+      hoveredItemElRef.current = null;
+      setHoveredItemRect(null);
+      hoveredNavContainerRef.current = null;
+      setHoveredNavContainerRect(null);
+    };
+    document.addEventListener("toggle", handleDetailsToggle, true);
     window.addEventListener("resize", handleViewportResize, { passive: true });
     document.addEventListener("click", handleClick, true);
     document.addEventListener("dblclick", handleDblClick, true);
@@ -22167,6 +22213,7 @@ function OhhwellsBridge() {
     document.addEventListener("selectionchange", handleSelectionChange);
     window.addEventListener("scroll", handleScroll, true);
     return () => {
+      document.removeEventListener("toggle", handleDetailsToggle, true);
       document.removeEventListener("click", handleClick, true);
       document.removeEventListener("dblclick", handleDblClick, true);
       document.removeEventListener("paste", handlePaste, true);
@@ -22420,7 +22467,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.104",
+        bridgeVersion: "0.1.106",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections