@ohhwells/bridge 0.1.65-next.182 → 0.1.65-next.184

package/dist/index.cjs

@@ -7018,6 +7018,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";
 function fieldsKey(formKey) {
   return `${formKey}-fields`;
 }
@@ -7055,7 +7056,7 @@ function ensureFieldLabel(wrapper, key) {
   label.style.lineHeight = "1.3";
   const fromPlaceholder = input?.getAttribute("placeholder")?.trim();
   const text = fromPlaceholder && fromPlaceholder.length < 40 ? fromPlaceholder : key.replace(/[-_]/g, " ");
-  label.textContent = input?.hasAttribute("required") ? `${text} *` : text;
+  label.textContent = text;
   if (input && input.parentElement === wrapper) wrapper.insertBefore(label, input);
   else wrapper.insertBefore(label, wrapper.firstChild);
   return label;
@@ -7111,8 +7112,11 @@ function readFieldsFromDom(form) {
     return {
       key: fieldKeyOf(wrapper),
       type: fieldTypeOf(wrapper),
-      label: fieldLabelOf(wrapper)?.textContent?.trim() ?? "",
-      placeholder: input?.getAttribute("placeholder") ?? "",
+      label: fieldLabelText(fieldLabelOf(wrapper)).trim(),
+      // While a field is selected its placeholder text lives in the value (see
+      // beginPlaceholderEdit), so reading the attribute would store an empty one — whoever
+      // happens to save at that moment must still record what the owner typed.
+      placeholder: input ? input.hasAttribute(PLACEHOLDER_EDIT_ATTR) ? input.value : input.getAttribute("placeholder") ?? "" : "",
       required: Boolean(input?.hasAttribute("required"))
     };
   });
@@ -7140,7 +7144,7 @@ function applyFieldType(wrapper, type) {
   const followsDefaults = {
     // A label the owner wrote stays; one that still reads as a type name (or as the old
     // placeholder the template shipped) follows the new type.
-    label: isDefaultText(label?.textContent ?? "", (d) => d.label) || (label?.textContent ?? "").trim().replace(/\s*\*$/, "") === placeholder.trim()
+    label: isDefaultText(label?.textContent ?? "", (d) => d.label) || fieldLabelText(label).trim() === placeholder.trim()
   };
   const { tag, inputType } = inputTagFor(type);
   wrapper.setAttribute(FIELD_TYPE_ATTR, type);
@@ -7154,8 +7158,7 @@ function applyFieldType(wrapper, type) {
   const applyDefaults = (el) => {
     el.setAttribute("placeholder", defaults.placeholder);
     if (label && followsDefaults.label) {
-      const required = (label.textContent ?? "").trim().endsWith("*");
-      label.textContent = required ? `${defaults.label} *` : defaults.label;
+      label.textContent = defaults.label;
     }
   };
   if (input.tagName.toLowerCase() === tag) {
@@ -7175,13 +7178,19 @@ function applyFieldType(wrapper, type) {
   input.replaceWith(next);
   applyDefaults(next);
 }
+var REQUIRED_MARK_ATTR = "data-ohw-field-required";
+function fieldLabelText(label) {
+  if (!label) return "";
+  return (label.textContent ?? "").replace(/\s*\*\s*$/, "").trimEnd();
+}
 function syncRequiredMark(wrapper) {
   const label = fieldLabelOf(wrapper);
   if (!label) return;
-  const required = isFieldRequired(wrapper);
-  const base = (label.textContent ?? "").replace(/\s*\*\s*$/, "").trimEnd();
-  const next = required ? `${base} *` : base;
-  if (label.textContent !== next) label.textContent = next;
+  label.querySelectorAll("[data-ohw-required-mark]").forEach((el) => el.remove());
+  const words = fieldLabelText(label);
+  if ((label.textContent ?? "") !== words) label.textContent = words;
+  if (isFieldRequired(wrapper)) label.setAttribute(REQUIRED_MARK_ATTR, "");
+  else label.removeAttribute(REQUIRED_MARK_ATTR);
 }
 function setFieldRequired(wrapper, required) {
   const input = fieldInputOf(wrapper);
@@ -7191,7 +7200,6 @@ function setFieldRequired(wrapper, required) {
   else input.removeAttribute("required");
   if (label) syncRequiredMark(wrapper);
 }
-var PLACEHOLDER_EDIT_ATTR = "data-ohw-placeholder-edit";
 function beginPlaceholderEdit(wrapper) {
   const input = fieldInputOf(wrapper);
   if (!input || input.hasAttribute(PLACEHOLDER_EDIT_ATTR)) return;
@@ -7270,14 +7278,25 @@ function duplicateField(form, wrapper) {
 function removeField(wrapper) {
   wrapper.remove();
 }
-function moveField(form, key, toIndex) {
+function applyFieldOrder(form, keys) {
   const wrappers = listFieldWrappers(form);
-  const moving = wrappers.find((wrapper) => fieldKeyOf(wrapper) === key);
-  if (!moving) return;
-  const rest = wrappers.filter((wrapper) => wrapper !== moving);
-  const target = rest[Math.max(0, Math.min(rest.length, toIndex))];
-  if (target) target.before(moving);
-  else rest[rest.length - 1]?.after(moving);
+  const byKey = new Map(wrappers.map((wrapper) => [fieldKeyOf(wrapper), wrapper]));
+  const ordered = keys.map((key) => byKey.get(key)).filter((w) => Boolean(w));
+  if (ordered.length !== wrappers.length) return;
+  const slots = wrappers.map((wrapper) => {
+    const slot = document.createComment("ohw-field-slot");
+    wrapper.replaceWith(slot);
+    return slot;
+  });
+  ordered.forEach((wrapper, index) => slots[index].replaceWith(wrapper));
+}
+function moveField(form, key, toIndex) {
+  const keys = listFieldWrappers(form).map(fieldKeyOf);
+  const from = keys.indexOf(key);
+  if (from === -1) return;
+  const rest = keys.filter((k) => k !== key);
+  rest.splice(Math.max(0, Math.min(rest.length, toIndex)), 0, key);
+  applyFieldOrder(form, rest);
 }
 function reconcileFieldsFromContent(form, content) {
   const formKey = form.getAttribute("data-ohw-key");
@@ -7303,14 +7322,18 @@ function reconcileFieldsFromContent(form, content) {
     setFieldRequired(wrapper, spec.required);
     setFieldPlaceholder(wrapper, spec.placeholder);
     const label = fieldLabelOf(wrapper);
-    if (label && spec.label) label.textContent = spec.label;
+    if (label && spec.label) label.textContent = spec.label.replace(/\s*\*\s*$/, "").trimEnd();
     syncRequiredMark(wrapper);
   });
   const wanted = new Set(stored.map((spec) => spec.key));
   listFieldWrappers(form).forEach((wrapper) => {
     if (!wanted.has(fieldKeyOf(wrapper))) wrapper.remove();
   });
-  stored.forEach((spec, index) => moveField(form, spec.key, index));
+  const currentOrder = listFieldWrappers(form).map(fieldKeyOf).join("\0");
+  const storedOrder = stored.map((spec) => spec.key).join("\0");
+  if (currentOrder !== storedOrder) {
+    applyFieldOrder(form, stored.map((spec) => spec.key));
+  }
 }
 
 // src/ui/form-field-toolbar.tsx
@@ -13387,8 +13410,10 @@ function getLinkHref3(el) {
 }
 function collectEditableNodes(extraContent, root = document) {
   const isScoped = root !== document;
-  const editableEls = Array.from(root.querySelectorAll("[data-ohw-editable]"));
-  if (isScoped && root instanceof HTMLElement && root.matches("[data-ohw-editable]")) {
+  const editableEls = Array.from(
+    root.querySelectorAll('[data-ohw-editable]:not([data-ohw-editable="form"])')
+  );
+  if (isScoped && root instanceof HTMLElement && root.matches('[data-ohw-editable]:not([data-ohw-editable="form"])')) {
     editableEls.unshift(root);
   }
   const nodes = editableEls.map((el) => {
@@ -15236,8 +15261,8 @@ function OhhwellsBridge() {
       if (!wrapper || !form) return;
       commitPlaceholderEdit(wrapper);
       run(form, wrapper);
-      beginPlaceholderEdit(wrapper);
       persistFields(form);
+      beginPlaceholderEdit(wrapper);
       setFormPickRect(form.getBoundingClientRect());
     },
     [persistFields]
@@ -15595,6 +15620,12 @@ function OhhwellsBridge() {
     }
     el.removeAttribute("contenteditable");
     el.removeAttribute("data-ohw-editing");
+    const labelField = getFieldWrapper(el);
+    if (labelField) {
+      syncRequiredMark(labelField);
+      const owner = labelField.closest('[data-ohw-editable="form"]');
+      if (owner) persistFieldsRef.current(owner);
+    }
     activeElRef.current = null;
     setNavGroupForceOpen(null, false);
     setReorderHrefKey(null);
@@ -15750,6 +15781,12 @@ function OhhwellsBridge() {
     }
     el.removeAttribute("contenteditable");
     el.removeAttribute("data-ohw-editing");
+    const labelField = getFieldWrapper(el);
+    if (labelField) {
+      syncRequiredMark(labelField);
+      const owner = labelField.closest('[data-ohw-editable="form"]');
+      if (owner) persistFieldsRef.current(owner);
+    }
     activeElRef.current = null;
     setMaxBadge(null);
     setActiveCommands(/* @__PURE__ */ new Set());
@@ -16876,6 +16913,9 @@ function OhhwellsBridge() {
         reconcileFooterOrderFromContent(content);
         reconcileSocialsFromContent(content);
         applySocialsDisplayFromContent(content);
+        document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
+          listFieldWrappers(form).forEach(syncRequiredMark);
+        });
       } finally {
         observer?.observe(document.body, { childList: true, subtree: true });
       }
@@ -19003,6 +19043,13 @@ function OhhwellsBridge() {
       if (brandKitRef.current) {
         nodes.push({ key: BRAND_KIT_KEY, type: "brand", text: brandKitRef.current });
       }
+      document.querySelectorAll('[data-ohw-editable="form"]').forEach((form) => {
+        const formKey = formKeyOf(form);
+        if (!formKey) return;
+        const specs = readFieldsFromDom(form);
+        const text = specs.length ? JSON.stringify(specs) : editContentRef.current[fieldsKey(formKey)];
+        if (text) nodes.push({ key: fieldsKey(formKey), type: "text", text });
+      });
       postToParentRef.current({ type: "ow:save-result", nodes });
     };
     const handleInsertSection = (e) => {