@ohhwells/bridge 0.1.109 → 0.1.111

package/dist/index.js

@@ -8178,6 +8178,7 @@ var FIELD_TYPES = [
 var FIELD_ATTR = "data-ohw-form-field";
 var FIELD_TYPE_ATTR = "data-ohw-field-type";
 var PLACEHOLDER_EDIT_ATTR = "data-ohw-placeholder-edit";
+var seedFieldByForm = /* @__PURE__ */ new WeakMap();
 function fieldsKey(formKey) {
   return `${formKey}-fields`;
 }
@@ -8263,7 +8264,11 @@ function markFormFields(form) {
     ensureFieldLabel(wrapper, key);
     syncRequiredMark(wrapper);
   });
-  return listFieldWrappers(form);
+  const wrappers = listFieldWrappers(form);
+  if (wrappers.length > 0 && !seedFieldByForm.has(form)) {
+    seedFieldByForm.set(form, wrappers[0].cloneNode(true));
+  }
+  return wrappers;
 }
 function readFieldsFromDom(form) {
   return listFieldWrappers(form).map((wrapper) => {
@@ -8407,12 +8412,27 @@ function insertField(form, type) {
     wrapper = source.cloneNode(true);
     source.after(wrapper);
   } else {
-    wrapper = document.createElement("div");
-    const label2 = document.createElement("label");
-    const input2 = document.createElement("input");
-    wrapper.append(label2, input2);
+    const seed = seedFieldByForm.get(form);
+    if (seed) {
+      wrapper = seed.cloneNode(true);
+    } else {
+      wrapper = document.createElement("div");
+      const input2 = document.createElement("input");
+      input2.style.width = "100%";
+      input2.style.boxSizing = "border-box";
+      input2.style.padding = "12px";
+      input2.style.border = "1px solid color-mix(in srgb, currentColor 35%, transparent)";
+      input2.style.borderRadius = "8px";
+      input2.style.background = "#fff";
+      input2.style.fontFamily = "inherit";
+      input2.style.fontSize = "inherit";
+      input2.style.color = "inherit";
+      wrapper.append(input2);
+    }
     const submit = form.querySelector('button, input[type="submit"]');
-    if (submit) submit.before(wrapper);
+    let anchor = submit;
+    while (anchor && anchor.parentElement !== form) anchor = anchor.parentElement;
+    if (anchor) anchor.before(wrapper);
     else form.appendChild(wrapper);
   }
   wrapper.setAttribute(FIELD_ATTR, key);
@@ -16853,6 +16873,10 @@ function getIframeVisibleClip(parentScroll) {
   );
   return { top: clipTop, bottom: Math.max(clipTop, clipBottom) };
 }
+function isRectOutsideClip(rect, clip) {
+  if (!clip) return false;
+  return rect.bottom < clip.top || rect.top > clip.bottom;
+}
 function applyVisibleViewport(el, parentScroll) {
   const clip = getIframeVisibleClip(parentScroll);
   const top = clip?.top ?? 0;
@@ -19592,8 +19616,10 @@ function OhhwellsBridge() {
          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"]) {
+         image was unset (OHH-758-ish). Not inside a container that declares its editables
+         inline (data-ohw-inline-editables): a row of inline links \u2014 a footer's legal line \u2014
+         keeps its line; blockified labels put each link on its own row in the editor only. */
+      [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"]):not([data-ohw-inline-editables] *) {
         display: block;
       }
       /* The block-force above is an author rule, so it beats the browser's own
@@ -21336,6 +21362,7 @@ function OhhwellsBridge() {
             applyMapQuery(el, val);
           } else if (el.dataset.ohwEditable === "icon") {
             applyIconMarkup(el, val);
+          } else if (el.dataset.ohwEditable === "form") {
           } else if (isIconMarkupValue(val)) {
           } else {
             el.innerHTML = val;
@@ -21345,6 +21372,9 @@ function OhhwellsBridge() {
       }
       applyLogoFromContent(content);
       applyLogoSizes(content);
+      document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
+        reconcileFieldsFromContent(form, content);
+      });
       if (sectionsJson) {
         initSectionsFromContent({ __ohw_sections: sectionsJson }, true);
         sectionsLoadedRef.current = true;
@@ -22201,14 +22231,20 @@ function OhhwellsBridge() {
     };
     const applyToolbarPos = (rect) => {
       const ps = parentScrollRef.current;
+      const hidden = isRectOutsideClip(rect, getIframeVisibleClip(ps));
       const measuredW = toolbarElRef.current?.offsetWidth || 330;
       if (toolbarElRef.current) {
-        const { top, left, transform } = calcToolbarPos(rect, ps, measuredW);
-        toolbarElRef.current.style.top = `${top}px`;
-        toolbarElRef.current.style.left = `${left}px`;
-        toolbarElRef.current.style.transform = transform;
+        toolbarElRef.current.style.display = hidden ? "none" : "";
+        if (!hidden) {
+          const { top, left, transform } = calcToolbarPos(rect, ps, measuredW);
+          toolbarElRef.current.style.top = `${top}px`;
+          toolbarElRef.current.style.left = `${left}px`;
+          toolbarElRef.current.style.transform = transform;
+        }
       }
       if (glowElRef.current) {
+        glowElRef.current.style.display = hidden ? "none" : "";
+        if (hidden) return;
         const GAP = SELECTION_CHROME_GAP2;
         glowElRef.current.style.top = `${rect.top - GAP}px`;
         glowElRef.current.style.left = `${rect.left - GAP}px`;
@@ -22650,7 +22686,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.108",
+        bridgeVersion: "0.1.110",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -23438,7 +23474,7 @@ function OhhwellsBridge() {
             ) : void 0
           }
         ),
-        toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ jsxs20(Fragment8, { children: [
+        toolbarRect && toolbarVariant === "rich-text" && !linkPopover && !isRectOutsideClip(toolbarRect, getIframeVisibleClip(parentScrollRef.current)) && /* @__PURE__ */ jsxs20(Fragment8, { children: [
           /* @__PURE__ */ jsx33(
             EditGlowChrome,
             {