vibespot 1.7.7 → 1.8.0

package/ui/inline-edit.js

@@ -1,483 +1,16 @@
 /**
- * Unified interact mode — merged Select + Edit into one contextual model.
+ * Unified interact mode — parent end (VIB-1892).
  *
- * Editable elements (text, images, links) get inline editing.
- * Module-level containers prefill the chat input for referencing.
+ * The hover/edit UI itself lives in the cross-origin preview frame and is run
+ * by the trusted agent (ui/preview-agent.js). This file owns the toolbar
+ * toggle, tells the agent which mode is active (vs:set-mode via preview.js),
+ * and maps the agent's committed edits (vs:edit-commit / vs:select-module)
+ * onto module fields via /api/field. The frame can only ever request the
+ * field-edit writes handled here — nothing else crosses the boundary.
  */
 
 const interactBtn = document.getElementById("interact-mode-toggle");
 let interactModeActive = false;
-let interactHandlers = null;
-
-function ensureInteractStyles(doc) {
-  if (doc.getElementById("vibespot-interact-css")) return;
-  const style = doc.createElement("style");
-  style.id = "vibespot-interact-css";
-  style.textContent = `
-    html.vibespot-interact-mode { cursor: default; }
-    .vibespot-editable-hover {
-      outline: 2px dashed rgba(59, 130, 246, 0.6) !important;
-      outline-offset: 2px !important;
-      cursor: text !important;
-    }
-    .vibespot-editable-hover[data-edit-type="image"] {
-      cursor: pointer !important;
-    }
-    .vibespot-editable-hover[data-edit-type="select"] {
-      outline-color: #e8613a !important;
-      outline-style: solid !important;
-      background-color: rgba(232, 97, 58, 0.08) !important;
-      cursor: crosshair !important;
-    }
-    .vibespot-editing {
-      outline: 2px solid rgba(59, 130, 246, 0.9) !important;
-      outline-offset: 2px !important;
-      background-color: rgba(59, 130, 246, 0.04) !important;
-      min-height: 1em;
-    }
-    .vibespot-edit-label {
-      position: fixed;
-      z-index: 2147483647;
-      pointer-events: none;
-      font: 500 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      color: #fff;
-      padding: 2px 7px;
-      border-radius: 3px;
-      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
-      white-space: nowrap;
-    }
-    .vibespot-edit-label--edit {
-      background: #3b82f6;
-    }
-    .vibespot-edit-label--select {
-      background: #e8613a;
-    }
-    .vibespot-image-edit-input {
-      position: fixed;
-      z-index: 2147483647;
-      font: 13px/1.4 -apple-system, BlinkMacSystemFont, sans-serif;
-      padding: 6px 10px;
-      border: 2px solid #3b82f6;
-      border-radius: 6px;
-      background: #1c1917;
-      color: #fff;
-      width: 320px;
-      outline: none;
-    }
-    .vibespot-link-edit-popup {
-      position: fixed;
-      z-index: 2147483647;
-      background: #1c1917;
-      border: 1px solid rgba(255,255,255,0.15);
-      border-radius: 8px;
-      padding: 10px;
-      box-shadow: 0 4px 16px rgba(0,0,0,0.4);
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-    }
-    .vibespot-link-edit-popup label {
-      font: 500 11px/1.4 -apple-system, sans-serif;
-      color: rgba(255,255,255,0.6);
-    }
-    .vibespot-link-edit-popup input {
-      font: 13px/1.4 -apple-system, sans-serif;
-      padding: 5px 8px;
-      border: 1px solid rgba(255,255,255,0.2);
-      border-radius: 4px;
-      background: #0c0a09;
-      color: #fff;
-      outline: none;
-      width: 260px;
-    }
-    .vibespot-link-edit-popup input:focus { border-color: #3b82f6; }
-    .vibespot-link-edit-popup .vibespot-link-edit-actions {
-      display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px;
-    }
-    .vibespot-link-edit-popup button {
-      font: 500 12px/1 -apple-system, sans-serif;
-      padding: 5px 12px;
-      border: none; border-radius: 4px;
-      cursor: pointer;
-    }
-    .vibespot-link-edit-popup .vibespot-btn-save {
-      background: #3b82f6; color: #fff;
-    }
-    .vibespot-link-edit-popup .vibespot-btn-cancel {
-      background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7);
-    }
-  `;
-  doc.head.appendChild(style);
-}
-
-// Determine if element is directly editable (text/image/link) or module-level
-function getInteractInfo(el) {
-  if (!el) return null;
-  const tag = (el.tagName || "").toLowerCase();
-
-  // Check for explicit field annotations first
-  const annotated = el.closest("[data-vs-field]");
-  if (annotated) {
-    const vsType = annotated.getAttribute("data-vs-type");
-    if (vsType === "image") return { type: "image", el: annotated, action: "edit" };
-    if (vsType === "link") return { type: "link", el: annotated, action: "edit" };
-    return { type: "text", el: annotated, action: "edit" };
-  }
-  const linkAnnotated = el.closest("[data-vs-link]");
-  if (linkAnnotated) return { type: "link", el: linkAnnotated, action: "edit" };
-
-  // Heuristic detection for editable elements
-  if (tag === "img") return { type: "image", el, action: "edit" };
-  if (tag === "a" || (el.closest && el.closest("a"))) {
-    const anchor = tag === "a" ? el : el.closest("a");
-    return { type: "link", el: anchor, action: "edit" };
-  }
-  if (tag.match(/^h[1-6]$/) || tag === "p" || tag === "span" || tag === "li" || tag === "td" || tag === "th") {
-    if (el.children.length === 0 || (el.children.length === 1 && el.children[0].tagName === "BR")) {
-      return { type: "text", el, action: "edit" };
-    }
-    if (el.textContent && el.textContent.trim().length > 0 && el.childElementCount <= 2) {
-      return { type: "text", el, action: "edit" };
-    }
-  }
-  if (tag === "button") return { type: "text", el, action: "edit" };
-
-  // Module-level container → select mode (prefill chat)
-  const moduleEl = el.closest("[data-module]");
-  if (moduleEl) return { type: "select", el: moduleEl, action: "select" };
-
-  return null;
-}
-
-function describeElement(el) {
-  if (!el) return "";
-  const moduleEl = el.closest("[data-module]");
-  const moduleName = moduleEl ? moduleEl.getAttribute("data-module") : null;
-  const tag = (el.tagName || "").toLowerCase();
-  let kind = tag;
-  if (tag.match(/^h[1-6]$/)) kind = "headline";
-  else if (tag === "p") kind = "paragraph";
-  else if (tag === "a") kind = "link";
-  else if (tag === "button") kind = "button";
-  else if (tag === "img") kind = "image";
-  else if (tag === "ul" || tag === "ol") kind = "list";
-  else if (tag === "li") kind = "list item";
-
-  if (moduleName && moduleEl === el) return moduleName;
-  if (moduleName) return `${moduleName} > ${kind}`;
-  return kind;
-}
-
-function buildChatPrefill(el) {
-  if (!el) return "";
-  const moduleEl = el.closest("[data-module]");
-  const moduleName = moduleEl ? moduleEl.getAttribute("data-module") : null;
-  const tag = (el.tagName || "").toLowerCase();
-  const text = (el.textContent || "").trim().replace(/\s+/g, " ").slice(0, 80);
-
-  let elementPart;
-  if (tag.match(/^h[1-6]$/)) elementPart = "the headline";
-  else if (tag === "p") elementPart = "the paragraph";
-  else if (tag === "a") elementPart = "the link";
-  else if (tag === "button") elementPart = "the button";
-  else if (tag === "img") elementPart = "the image";
-  else elementPart = `the ${tag}`;
-
-  if (moduleEl === el && moduleName) {
-    return `In the ${moduleName} module, `;
-  }
-  if (moduleName) {
-    const quote = text ? ` ("${text}${text.length === 80 ? "…" : ""}")` : "";
-    return `In the ${moduleName} module, ${elementPart}${quote} `;
-  }
-  return `${elementPart} `;
-}
-
-function attachInteractHandlers() {
-  let doc;
-  try {
-    doc = previewFrame.contentDocument || previewFrame.contentWindow?.document;
-  } catch { return; }
-  if (!doc || !doc.body) return;
-
-  ensureInteractStyles(doc);
-  doc.documentElement.classList.add("vibespot-interact-mode");
-
-  let hoveredEl = null;
-  let labelEl = null;
-  let activeEditor = null;
-
-  const cleanup = () => {
-    if (hoveredEl) {
-      hoveredEl.classList.remove("vibespot-editable-hover", "vibespot-select-hover");
-      hoveredEl.removeAttribute("data-edit-type");
-      hoveredEl = null;
-    }
-    if (labelEl && labelEl.parentNode) {
-      labelEl.parentNode.removeChild(labelEl);
-    }
-    labelEl = null;
-  };
-
-  const onMouseOver = (e) => {
-    if (activeEditor) return;
-    const info = getInteractInfo(e.target);
-    if (!info) {
-      cleanup();
-      return;
-    }
-    if (hoveredEl === info.el) return;
-    cleanup();
-    hoveredEl = info.el;
-    hoveredEl.classList.add("vibespot-editable-hover");
-    hoveredEl.setAttribute("data-edit-type", info.action === "select" ? "select" : info.type);
-
-    if (!labelEl) {
-      labelEl = doc.createElement("div");
-      labelEl.className = "vibespot-edit-label";
-      doc.body.appendChild(labelEl);
-    }
-
-    if (info.action === "select") {
-      labelEl.className = "vibespot-edit-label vibespot-edit-label--select";
-      labelEl.textContent = describeElement(info.el);
-    } else {
-      labelEl.className = "vibespot-edit-label vibespot-edit-label--edit";
-      const typeLabel = info.type === "image" ? "Click to edit image" : info.type === "link" ? "Click to edit link" : "Click to edit";
-      labelEl.textContent = typeLabel;
-    }
-    const rect = info.el.getBoundingClientRect();
-    labelEl.style.top = Math.max(4, rect.top - 20) + "px";
-    labelEl.style.left = Math.max(4, rect.left) + "px";
-  };
-
-  const onMouseOut = (e) => {
-    if (activeEditor) return;
-    if (!e.relatedTarget) cleanup();
-  };
-
-  const closeActiveEditor = () => {
-    if (!activeEditor) return;
-    if (activeEditor.cleanup) activeEditor.cleanup();
-    activeEditor = null;
-  };
-
-  const onClick = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    const info = getInteractInfo(e.target);
-    if (!info) return;
-
-    closeActiveEditor();
-    cleanup();
-
-    if (info.action === "select") {
-      const prefill = buildChatPrefill(info.el);
-      if (typeof window.prefillChatInput === "function") {
-        window.prefillChatInput(prefill);
-      }
-      return;
-    }
-
-    const moduleEl = info.el.closest("[data-module]");
-    if (!moduleEl) return;
-    const moduleName = moduleEl.getAttribute("data-module");
-
-    if (info.type === "text") {
-      startTextEdit(doc, info.el, moduleName);
-    } else if (info.type === "image") {
-      startImageEdit(doc, info.el, moduleName);
-    } else if (info.type === "link") {
-      startLinkEdit(doc, info.el, moduleName);
-    }
-  };
-
-  function startTextEdit(doc, el, moduleName) {
-    const originalText = el.textContent;
-    el.setAttribute("data-original-text", originalText.trim());
-    el.setAttribute("contenteditable", "true");
-    el.classList.add("vibespot-editing");
-    el.focus();
-
-    const range = doc.createRange();
-    range.selectNodeContents(el);
-    const sel = doc.defaultView.getSelection();
-    sel.removeAllRanges();
-    sel.addRange(range);
-
-    const save = () => {
-      el.removeAttribute("contenteditable");
-      el.classList.remove("vibespot-editing");
-      const newText = el.textContent.trim();
-      if (newText !== originalText.trim()) {
-        saveTextChange(moduleName, el, newText);
-      }
-      activeEditor = null;
-    };
-
-    el.addEventListener("blur", save, { once: true });
-    el.addEventListener("keydown", (e) => {
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        el.blur();
-      }
-      if (e.key === "Escape") {
-        el.textContent = originalText;
-        el.blur();
-      }
-    });
-
-    activeEditor = {
-      cleanup: () => {
-        el.removeAttribute("contenteditable");
-        el.classList.remove("vibespot-editing");
-      },
-    };
-  }
-
-  function startImageEdit(doc, imgEl, moduleName) {
-    const rect = imgEl.getBoundingClientRect();
-    const input = doc.createElement("input");
-    input.className = "vibespot-image-edit-input";
-    input.type = "text";
-    input.placeholder = "Enter image URL...";
-    input.value = imgEl.src || "";
-    input.style.top = (rect.bottom + 4) + "px";
-    input.style.left = Math.max(4, rect.left) + "px";
-    doc.body.appendChild(input);
-    input.focus();
-    input.select();
-
-    const save = () => {
-      const newSrc = input.value.trim();
-      if (input.parentNode) input.parentNode.removeChild(input);
-      if (newSrc && newSrc !== imgEl.src) {
-        imgEl.src = newSrc;
-        saveImageChange(moduleName, imgEl, newSrc);
-      }
-      activeEditor = null;
-    };
-
-    input.addEventListener("blur", save, { once: true });
-    input.addEventListener("keydown", (e) => {
-      if (e.key === "Enter") { e.preventDefault(); input.blur(); }
-      if (e.key === "Escape") {
-        if (input.parentNode) input.parentNode.removeChild(input);
-        activeEditor = null;
-      }
-    });
-
-    activeEditor = {
-      cleanup: () => { if (input.parentNode) input.parentNode.removeChild(input); },
-    };
-  }
-
-  function startLinkEdit(doc, anchorEl, moduleName) {
-    const origText = (anchorEl.textContent || "").trim();
-    const origHref = anchorEl.href || "";
-    const rect = anchorEl.getBoundingClientRect();
-
-    const popup = doc.createElement("div");
-    popup.className = "vibespot-link-edit-popup";
-    popup.style.top = (rect.bottom + 6) + "px";
-    popup.style.left = Math.max(4, rect.left) + "px";
-
-    const textLabel = doc.createElement("label");
-    textLabel.textContent = "Link text";
-    const textInput = doc.createElement("input");
-    textInput.type = "text";
-    textInput.className = "vibespot-link-text";
-    textInput.value = origText;
-
-    const urlLabel = doc.createElement("label");
-    urlLabel.textContent = "URL";
-    const urlInput = doc.createElement("input");
-    urlInput.type = "text";
-    urlInput.className = "vibespot-link-url";
-    urlInput.value = origHref;
-
-    const actions = doc.createElement("div");
-    actions.className = "vibespot-link-edit-actions";
-    const cancelBtn = doc.createElement("button");
-    cancelBtn.className = "vibespot-btn-cancel";
-    cancelBtn.textContent = "Cancel";
-    const saveBtn = doc.createElement("button");
-    saveBtn.className = "vibespot-btn-save";
-    saveBtn.textContent = "Save";
-    actions.appendChild(cancelBtn);
-    actions.appendChild(saveBtn);
-
-    popup.appendChild(textLabel);
-    popup.appendChild(textInput);
-    popup.appendChild(urlLabel);
-    popup.appendChild(urlInput);
-    popup.appendChild(actions);
-    doc.body.appendChild(popup);
-    textInput.focus();
-
-    const close = () => {
-      if (popup.parentNode) popup.parentNode.removeChild(popup);
-      activeEditor = null;
-    };
-
-    cancelBtn.addEventListener("click", close);
-    saveBtn.addEventListener("click", () => {
-      const newText = textInput.value.trim();
-      const newUrl = urlInput.value.trim();
-      if (newText) anchorEl.textContent = newText;
-      if (newUrl) anchorEl.href = newUrl;
-      if (newText !== origText || newUrl !== origHref) {
-        saveLinkChange(moduleName, anchorEl, newText, newUrl);
-      }
-      close();
-    });
-
-    popup.addEventListener("keydown", (e) => {
-      if (e.key === "Escape") close();
-      if (e.key === "Enter") {
-        e.preventDefault();
-        saveBtn.click();
-      }
-    });
-
-    activeEditor = { cleanup: close };
-  }
-
-  const onKeyDown = (e) => {
-    if (e.key === "Escape" && !activeEditor) deactivateInteractMode();
-  };
-
-  doc.addEventListener("mouseover", onMouseOver, true);
-  doc.addEventListener("mouseout", onMouseOut, true);
-  doc.addEventListener("click", onClick, true);
-  doc.addEventListener("keydown", onKeyDown, true);
-
-  interactHandlers = {
-    doc,
-    onMouseOver,
-    onMouseOut,
-    onClick,
-    onKeyDown,
-    cleanup,
-    closeActiveEditor,
-  };
-}
-
-function detachInteractHandlers() {
-  if (!interactHandlers) return;
-  const { doc, onMouseOver, onMouseOut, onClick, onKeyDown, cleanup, closeActiveEditor } = interactHandlers;
-  try {
-    closeActiveEditor();
-    cleanup();
-    doc.documentElement.classList.remove("vibespot-interact-mode");
-    doc.removeEventListener("mouseover", onMouseOver, true);
-    doc.removeEventListener("mouseout", onMouseOut, true);
-    doc.removeEventListener("click", onClick, true);
-    doc.removeEventListener("keydown", onKeyDown, true);
-  } catch { /* cross-origin */ }
-  interactHandlers = null;
-}
 
 function activateInteractMode() {
   if (interactModeActive) return;
@@ -485,7 +18,7 @@ function activateInteractMode() {
   if (interactBtn) interactBtn.setAttribute("aria-pressed", "true");
   const previewContainer = document.getElementById("preview-container");
   if (previewContainer) previewContainer.classList.add("preview--interact-mode");
-  attachInteractHandlers();
+  setPreviewMode("interact");
 }
 
 function deactivateInteractMode() {
@@ -494,7 +27,7 @@ function deactivateInteractMode() {
   if (interactBtn) interactBtn.setAttribute("aria-pressed", "false");
   const previewContainer = document.getElementById("preview-container");
   if (previewContainer) previewContainer.classList.remove("preview--interact-mode");
-  detachInteractHandlers();
+  setPreviewMode("view");
 }
 
 function setInteractModeDisabled(disabled) {
@@ -515,18 +48,45 @@ if (interactBtn) {
   });
 }
 
-if (typeof previewFrame !== "undefined" && previewFrame) {
-  previewFrame.addEventListener("load", () => {
-    if (interactModeActive) attachInteractHandlers();
-  });
-}
-
 // Backward-compat aliases
 window.setEditModeDisabled = setInteractModeDisabled;
 window.deactivateEditMode = deactivateInteractMode;
 window.setSelectModeDisabled = setInteractModeDisabled;
 window.deactivateSelectMode = deactivateInteractMode;
 
+// ---------------------------------------------------------------------------
+// Agent messages: module select -> chat prefill; edit commits -> field saves
+// ---------------------------------------------------------------------------
+
+// The agent may *request* dropping back to view mode (Esc in-frame with no
+// editor open). Only the exit request is honoured — a compromised frame can
+// lower its privileges, never raise them — and the toolbar flip re-issues
+// vs:set-mode, so the parent stays authoritative over the mode.
+onPreviewMessage("vs:request-mode", (p) => {
+  if (!p || p.mode !== "view") return;
+  deactivateInteractMode();
+});
+
+onPreviewMessage("vs:select-module", (p) => {
+  if (typeof p.prefill !== "string") return;
+  if (typeof window.prefillChatInput === "function") {
+    // Preview content is AI-authored — cap the prefill so a hostile page
+    // can't stuff the composer.
+    window.prefillChatInput(p.prefill.slice(0, 400));
+  }
+});
+
+onPreviewMessage("vs:edit-commit", (p) => {
+  if (!p || typeof p.moduleName !== "string" || !p.moduleName) return;
+  if (p.kind === "text" && typeof p.value === "string") {
+    saveTextChange(p.moduleName, p);
+  } else if (p.kind === "image" && typeof p.value === "string") {
+    saveImageChange(p.moduleName, p);
+  } else if (p.kind === "link") {
+    saveLinkChange(p.moduleName, p);
+  }
+});
+
 // ---------------------------------------------------------------------------
 // Save helpers — find matching field in fields.json and update via /api/field
 // ---------------------------------------------------------------------------
@@ -560,40 +120,55 @@ function findFieldByText(fields, originalText, tag, prefix = "") {
   return null;
 }
 
-function findImageField(fields, imgSrc, prefix = "") {
+function collectFieldsOfType(fields, type, prefix = "", out = []) {
   for (const field of fields) {
     const path = prefix ? `${prefix}.${field.name}` : field.name;
     if (field.type === "group" && field.children) {
-      const found = findImageField(field.children, imgSrc, path);
-      if (found) return found;
-    }
-    if (field.type === "image" && field.default?.src) {
-      return { path, field };
+      collectFieldsOfType(field.children, type, path, out);
+      continue;
     }
+    if (field.type === type) out.push({ path, field });
   }
-  return null;
+  return out;
 }
 
-function findLinkField(fields, href, prefix = "") {
-  for (const field of fields) {
-    const path = prefix ? `${prefix}.${field.name}` : field.name;
-    if (field.type === "group" && field.children) {
-      const found = findLinkField(field.children, href, path);
-      if (found) return found;
-    }
-    if (field.type === "link") return { path, field };
-  }
-  return null;
+// The agent reports the DOM's absolutized URL (possibly with a preview access
+// token in the query) while field defaults are often relative — compare
+// without query/hash and accept a suffix match either way.
+function urlLikeMatches(a, b) {
+  a = String(a || "").split(/[?#]/)[0];
+  b = String(b || "").split(/[?#]/)[0];
+  if (!a || !b) return false;
+  return a === b || a.endsWith(b) || b.endsWith(a);
 }
 
-async function saveTextChange(moduleName, el, newText) {
-  const fieldPath = el.getAttribute("data-vs-field");
-  if (fieldPath) {
-    await fetch("/api/field", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ moduleName, fieldPath, value: newText }),
-    });
+/** Match the edited image by its pre-edit src so editing the 2nd image can't
+ * overwrite the 1st (VIB-1898). Falls back to a lone image field only. */
+function findImageField(fields, imgSrc) {
+  const candidates = collectFieldsOfType(fields, "image");
+  const bySrc = candidates.find((c) => urlLikeMatches(c.field.default?.src || "", imgSrc || ""));
+  if (bySrc) return bySrc;
+  return candidates.length === 1 ? candidates[0] : null;
+}
+
+/** Same per-href matching for link fields (VIB-1898). */
+function findLinkField(fields, href) {
+  const candidates = collectFieldsOfType(fields, "link");
+  const byHref = candidates.find((c) => urlLikeMatches(c.field.default?.url?.href || "", href || ""));
+  if (byHref) return byHref;
+  return candidates.length === 1 ? candidates[0] : null;
+}
+
+function postField(moduleName, fieldPath, value) {
+  // Unified save path (field-save.js); the commit handlers refresh the
+  // preview once per commit rather than once per POST.
+  return saveField(moduleName, fieldPath, value, { refresh: false });
+}
+
+/** p: { fieldPath?, originalText, tag, value } from vs:edit-commit. */
+async function saveTextChange(moduleName, p) {
+  if (typeof p.fieldPath === "string" && p.fieldPath) {
+    await postField(moduleName, p.fieldPath, p.value);
     refreshPreview();
     return;
   }
@@ -601,30 +176,20 @@ async function saveTextChange(moduleName, el, newText) {
   const data = await findModuleFields(moduleName);
   if (!data) { refreshPreview(); return; }
 
-  const originalText = el.getAttribute("data-original-text") || newText;
-  const match = findFieldByText(data.fields, originalText, el.tagName.toLowerCase());
-
+  const originalText = typeof p.originalText === "string" && p.originalText ? p.originalText : p.value;
+  const match = findFieldByText(data.fields, originalText, p.tag || "");
   if (match) {
-    await fetch("/api/field", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ moduleName, fieldPath: match.path, value: newText }),
-    });
+    await postField(moduleName, match.path, p.value);
   }
   refreshPreview();
 }
 
-async function saveImageChange(moduleName, imgEl, newSrc) {
-  const fieldPath = imgEl.getAttribute("data-vs-field");
-  if (fieldPath) {
-    await fetch("/api/field", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        moduleName,
-        fieldPath,
-        value: { src: newSrc, alt: imgEl.getAttribute("alt") || "" },
-      }),
+/** p: { fieldPath?, alt?, oldSrc?, value } from vs:edit-commit. */
+async function saveImageChange(moduleName, p) {
+  if (typeof p.fieldPath === "string" && p.fieldPath) {
+    await postField(moduleName, p.fieldPath, {
+      src: p.value,
+      alt: typeof p.alt === "string" ? p.alt : "",
     });
     refreshPreview();
     return;
@@ -633,43 +198,33 @@ async function saveImageChange(moduleName, imgEl, newSrc) {
   const data = await findModuleFields(moduleName);
   if (!data) { refreshPreview(); return; }
 
-  const match = findImageField(data.fields, imgEl.src);
+  const match = findImageField(data.fields, p.oldSrc || "");
   if (match) {
-    await fetch("/api/field", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        moduleName,
-        fieldPath: match.path,
-        value: { src: newSrc, alt: match.field.default?.alt || "" },
-      }),
+    await postField(moduleName, match.path, {
+      src: p.value,
+      alt: match.field.default?.alt || "",
     });
   }
   refreshPreview();
 }
 
-async function saveLinkChange(moduleName, anchorEl, newText, newUrl) {
-  const linkField = anchorEl.getAttribute("data-vs-link");
-  const textField = anchorEl.getAttribute("data-vs-field");
+/** p: { linkField?, textField?, origText?, origHref?, newText?, newUrl? }. */
+async function saveLinkChange(moduleName, p) {
+  const newText = typeof p.newText === "string" ? p.newText : "";
+  const newUrl = typeof p.newUrl === "string" ? p.newUrl : "";
+  const linkField = typeof p.linkField === "string" ? p.linkField : "";
+  const textField = typeof p.textField === "string" ? p.textField : "";
 
   if (linkField || textField) {
     if (linkField && newUrl) {
-      await fetch("/api/field", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          moduleName,
-          fieldPath: linkField,
-          value: { url: { href: newUrl, type: "EXTERNAL" }, open_in_new_tab: false, no_follow: false },
-        }),
+      await postField(moduleName, linkField, {
+        url: { href: newUrl, type: "EXTERNAL" },
+        open_in_new_tab: false,
+        no_follow: false,
       });
     }
     if (textField && newText) {
-      await fetch("/api/field", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ moduleName, fieldPath: textField, value: newText }),
-      });
+      await postField(moduleName, textField, newText);
     }
     refreshPreview();
     return;
@@ -678,31 +233,22 @@ async function saveLinkChange(moduleName, anchorEl, newText, newUrl) {
   const data = await findModuleFields(moduleName);
   if (!data) { refreshPreview(); return; }
 
-  const match = findLinkField(data.fields, anchorEl.href);
+  // Only write the URL when the user actually changed it — a text-only edit
+  // must not blank the stored href (VIB-1898).
+  const match = newUrl && newUrl !== (p.origHref || "") ? findLinkField(data.fields, p.origHref || "") : null;
   if (match) {
-    await fetch("/api/field", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        moduleName,
-        fieldPath: match.path,
-        value: {
-          url: { href: newUrl, type: "EXTERNAL" },
-          open_in_new_tab: match.field.default?.open_in_new_tab ?? false,
-          no_follow: match.field.default?.no_follow ?? false,
-        },
-      }),
+    await postField(moduleName, match.path, {
+      url: { href: newUrl, type: "EXTERNAL" },
+      open_in_new_tab: match.field.default?.open_in_new_tab ?? false,
+      no_follow: match.field.default?.no_follow ?? false,
     });
   }
 
   if (newText) {
-    const textMatch = findFieldByText(data.fields, anchorEl.textContent, "a");
+    // Match the pre-edit text so the right field default is found.
+    const textMatch = findFieldByText(data.fields, p.origText || newText, "a");
     if (textMatch) {
-      await fetch("/api/field", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ moduleName, fieldPath: textMatch.path, value: newText }),
-      });
+      await postField(moduleName, textMatch.path, newText);
     }
   }