@ohhwells/bridge 0.1.65-next.186 → 0.1.65-next.189

package/dist/index.cjs

@@ -6914,7 +6914,7 @@ function showSuccess(form, message) {
   note.innerHTML = text;
   form.replaceChildren(note);
 }
-function showSubmitError(form) {
+function showSubmitError(form, message = "Something went wrong. Please try again.") {
   let note = form.querySelector("[data-ohw-form-error]");
   if (!note) {
     note = document.createElement("p");
@@ -6923,7 +6923,7 @@ function showSubmitError(form) {
     note.style.marginTop = "8px";
     form.appendChild(note);
   }
-  note.textContent = "Something went wrong. Please try again.";
+  note.textContent = message;
   note.style.display = "";
 }
 function clearSubmitError(form) {
@@ -6988,6 +6988,11 @@ function bindPublishedForms(apiUrl, subdomain, content = {}) {
       if (!formKey) return;
       e.preventDefault();
       clearSubmitError(form);
+      const filled = collectFormFields(form);
+      if (!Object.values(filled).some((value) => value.trim() !== "")) {
+        showSubmitError(form, "Please fill in at least one field.");
+        return;
+      }
       const submitButton = form.querySelector(
         'button[type="submit"], input[type="submit"], button:not([type])'
       );
@@ -6999,7 +7004,7 @@ function bindPublishedForms(apiUrl, subdomain, content = {}) {
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
             formKey,
-            fields: collectFormFields(form),
+            fields: filled,
             hasLongText: formHasLongText(form)
           })
         });
@@ -14299,7 +14304,8 @@ function isNavItemPointerTarget(el) {
 function getNavigationItemAnchor(el) {
   const anchor = el.matches("[data-ohw-href-key]") ? el : el.closest("[data-ohw-href-key]");
   if (!anchor) return null;
-  if (!anchor.querySelector('[data-ohw-editable="text"]') && !getSocialItem(anchor)) return null;
+  if (!anchor.matches('[data-ohw-editable="text"], [data-ohw-editable="plain"]') && !anchor.querySelector('[data-ohw-editable="text"], [data-ohw-editable="plain"]') && !getSocialItem(anchor))
+    return null;
   if (!isNavItemPointerTarget(anchor)) return null;
   return anchor;
 }
@@ -15325,17 +15331,37 @@ function OhhwellsBridge() {
     [persistFields, selectField]
   );
   const fieldDragRef = (0, import_react16.useRef)(null);
+  const buildFieldDropSlots = (0, import_react16.useCallback)((form, draggedKey) => {
+    const others = listFieldWrappers(form).filter((el) => fieldKeyOf(el) !== draggedKey);
+    const slots = others.map((el) => {
+      const rect = el.getBoundingClientRect();
+      return { top: rect.top, left: rect.left, width: rect.width };
+    });
+    const last = others[others.length - 1];
+    if (last) {
+      const rect = last.getBoundingClientRect();
+      slots.push({ top: rect.bottom, left: rect.left, width: rect.width });
+    }
+    return slots;
+  }, []);
   const handleFieldDragStart = (0, import_react16.useCallback)(() => {
     const wrapper = fieldPickElRef.current;
     const form = formPickElRef.current;
     if (!wrapper || !form) return;
-    fieldDragRef.current = { key: fieldKeyOf(wrapper), form };
-  }, []);
+    const key = fieldKeyOf(wrapper);
+    fieldDragRef.current = { key, form };
+    setFieldDragging(true);
+    setFieldDropSlots(buildFieldDropSlots(form, key));
+  }, [buildFieldDropSlots]);
   const handleFieldDragEnd = (0, import_react16.useCallback)(() => {
     fieldDragRef.current = null;
     setFieldDropIndex(null);
+    setFieldDropSlots([]);
+    setFieldDragging(false);
   }, []);
   const [fieldDropIndex, setFieldDropIndex] = (0, import_react16.useState)(null);
+  const [fieldDropSlots, setFieldDropSlots] = (0, import_react16.useState)([]);
+  const [fieldDragging, setFieldDragging] = (0, import_react16.useState)(false);
   const clearFormPickRef = (0, import_react16.useRef)(clearFormPick);
   clearFormPickRef.current = clearFormPick;
   (0, import_react16.useEffect)(() => {
@@ -16796,6 +16822,7 @@ function OhhwellsBridge() {
       e.preventDefault();
       e.stopPropagation();
       if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+      setFieldDropSlots(buildFieldDropSlots(session.form, session.key));
       setFieldDropIndex(resolveIndex(session.form, e.clientY));
     };
     const onDrop = (e) => {
@@ -16810,6 +16837,8 @@ function OhhwellsBridge() {
       setFormPickRect(session.form.getBoundingClientRect());
       fieldDragRef.current = null;
       setFieldDropIndex(null);
+      setFieldDropSlots([]);
+      setFieldDragging(false);
     };
     window.addEventListener("dragover", onDragOver, true);
     window.addEventListener("drop", onDrop, true);
@@ -16817,7 +16846,7 @@ function OhhwellsBridge() {
       window.removeEventListener("dragover", onDragOver, true);
       window.removeEventListener("drop", onDrop, true);
     };
-  }, [isEditMode, persistFields, selectField]);
+  }, [buildFieldDropSlots, isEditMode, persistFields, selectField]);
   (0, import_react16.useEffect)(() => {
     if (!isEditMode) return;
     const mark = () => document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
@@ -20243,7 +20272,7 @@ function OhhwellsBridge() {
         ItemInteractionLayer,
         {
           rect: fieldPickRect,
-          state: "active-top",
+          state: fieldDragging ? "dragging" : "active-top",
           itemDragSurface: false,
           toolbarAlign: "left",
           chromeGap: 10,
@@ -20264,23 +20293,22 @@ function OhhwellsBridge() {
           )
         }
       ),
-      fieldDropIndex !== null && formPickElRef.current ? (() => {
-        const wrappers = listFieldWrappers(formPickElRef.current).filter(
-          (el) => fieldKeyOf(el) !== fieldDragRef.current?.key
-        );
-        const anchor = wrappers[Math.min(fieldDropIndex, wrappers.length - 1)];
-        if (!anchor) return null;
-        const rect = anchor.getBoundingClientRect();
-        const atEnd = fieldDropIndex >= wrappers.length;
-        return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-          "div",
-          {
-            className: "pointer-events-none fixed z-[2147483644]",
-            style: { top: atEnd ? rect.bottom : rect.top, left: rect.left, width: rect.width },
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropIndicator, { direction: "horizontal", state: "dragActive" })
-          }
-        );
-      })() : null,
+      fieldDragging ? fieldDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        "div",
+        {
+          className: "pointer-events-none fixed z-[2147483644]",
+          style: { top: slot.top, left: slot.left, width: slot.width },
+          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            DropIndicator,
+            {
+              direction: "horizontal",
+              state: fieldDropIndex === i ? "dragActive" : "dragIdle",
+              className: "!w-full"
+            }
+          )
+        },
+        `field-drop-${i}`
+      )) : null,
       fieldTypePickerOpen && formPickRect && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "div",
         {