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

package/dist/index.cjs

@@ -14304,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;
 }
@@ -15330,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)(() => {
@@ -16801,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) => {
@@ -16815,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);
@@ -16822,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) => {
@@ -20248,7 +20272,7 @@ function OhhwellsBridge() {
         ItemInteractionLayer,
         {
           rect: fieldPickRect,
-          state: "active-top",
+          state: fieldDragging ? "dragging" : "active-top",
           itemDragSurface: false,
           toolbarAlign: "left",
           chromeGap: 10,
@@ -20269,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",
         {