@duffcloudservices/cms 0.11.0 → 0.13.0

package/dist/editor/editorBridge.d.ts

@@ -56,6 +56,58 @@ interface EditorReadyPayload {
     /** Keys of all [data-dcs-reviews] elements found on the page */
     reviewKeys: string[];
 }
+/**
+ * Swap the live `<img>`(s) carrying a managed image key to a new source.
+ *
+ * Mirrors the self-heal invariant: a `<picture>` does NOT re-resolve after its
+ * `<source>` set changes, so the stale `<source>` siblings are removed and the
+ * `srcset` on the `<img>` cleared — otherwise the browser keeps serving the old
+ * variant. `data-dcs-image-url`/`-alt` are updated too so a subsequent
+ * right-click reports the new image, not the replaced one.
+ *
+ * @returns the number of elements updated (0 when the key isn't on the page).
+ */
+declare function applyImageOverride(key: string, src: string, alt?: string | null): number;
+/**
+ * Re-apply all pending image overrides. Called after a re-render (HMR / SPA nav)
+ * so a hot reload doesn't revert a not-yet-saved swap.
+ */
+declare function applyPendingImageOverrides(): void;
+/**
+ * Record a pending image override (test/utility seam for the replay path).
+ */
+declare function recordPendingImageOverride(key: string, src: string, alt?: string | null): void;
+/**
+ * Handle a `dcs:update-text` that actually targets a MANAGED IMAGE key.
+ *
+ * The portal's discard/undo paths (discardTextChanges / discardSingleTextChange
+ * in visualEditor.ts) revert EVERY staged key — including image keys — via the
+ * text revert callback, which sends `dcs:update-text`. `updateTextInPlace` only
+ * touches `data-text-key` elements, a no-op for image keys (which live on
+ * `data-dcs-image-key`), while `pendingImageOverrides` would keep re-applying
+ * the discarded src on every re-render — the discarded swap stayed sticky until
+ * a manual refresh. So: if the key has a pending image override (or a managed
+ * image element on the page), drop the sticky override and swap the live
+ * `<img>` back to the reverted URL. Covers discard-all, discard-single, undo,
+ * and reload-drops-staged-swap in one place.
+ *
+ * @returns true when the key was handled as an image revert (skip text handling).
+ */
+declare function revertImageOverrideIfImageKey(key: string, value: string): boolean;
+/**
+ * Handle a `dcs:update-text` that targets a MANAGED IMAGE **ALT** key
+ * (`data-dcs-image-alt-key`). The portal stages an alt change alongside the
+ * src change on "Replace without AI"; on discard/undo it reverts each staged
+ * key via `dcs:update-text`. Alt keys are attributes, not text nodes, so
+ * `updateTextInPlace` would be a silent no-op — instead restore the `<img>`
+ * alt and refresh any pending image override (keyed by the SRC key) so a
+ * re-render replay does not resurrect the discarded alt.
+ *
+ * @returns true when the key was handled as an image-alt revert.
+ */
+declare function revertImageAltOverrideIfAltKey(key: string, value: string): boolean;
+/** Clear all pending image overrides (test isolation). */
+declare function clearPendingImageOverrides(): void;
 declare function initEditorBridge(): void;
 
-export { type EditorReadyPayload, type SectionInfo, initEditorBridge };
+export { type EditorReadyPayload, type SectionInfo, applyImageOverride, applyPendingImageOverrides, clearPendingImageOverrides, initEditorBridge, recordPendingImageOverride, revertImageAltOverrideIfAltKey, revertImageOverrideIfImageKey };

package/dist/editor/editorBridge.js

@@ -193,6 +193,7 @@ function rediscoverAndNotify() {
     hasReviews: reviewKeys.length > 0,
     reviewKeys
   });
+  applyPendingImageOverrides();
   if (editorActive) {
     applyEditorToElements();
     if (sectionResizeObserver) {
@@ -217,6 +218,7 @@ function applyEditorToElements() {
     htmlEl.addEventListener("dblclick", handleTextKeyDblClick);
     htmlEl.addEventListener("blur", handleTextKeyBlur);
     htmlEl.addEventListener("keydown", handleTextKeyKeydown);
+    htmlEl.addEventListener("paste", handleTextKeyPaste);
     htmlEl.addEventListener("mouseenter", () => {
       if (activeEditElement) return;
       const key = getTextKey(htmlEl);
@@ -387,12 +389,21 @@ function handleTextKeyDblClick(e) {
   postToParent("dcs:text-key-dblclick", { key, sectionId });
   startInlineEdit(el, key, sectionId);
 }
+function supportsPlaintextOnly() {
+  try {
+    const probe = document.createElement("div");
+    probe.contentEditable = "plaintext-only";
+    return probe.getAttribute("contenteditable") === "plaintext-only";
+  } catch {
+    return false;
+  }
+}
 function startInlineEdit(el, key, sectionId) {
   if (activeEditElement && activeEditElement !== el) {
     finishEdit(activeEditElement);
   }
   originalTextValues.set(el, el.innerText.trim());
-  el.setAttribute("contenteditable", "true");
+  el.setAttribute("contenteditable", supportsPlaintextOnly() ? "plaintext-only" : "true");
   el.classList.add("dcs-editing");
   el.focus();
   activeEditElement = el;
@@ -414,9 +425,44 @@ function handleTextKeyKeydown(e) {
   }
   if (e.key === "Escape") {
     e.preventDefault();
-    e.currentTarget.blur();
+    cancelInlineEdit(e.currentTarget);
   }
 }
+function handleTextKeyPaste(e) {
+  const el = e.currentTarget;
+  if (el !== activeEditElement) return;
+  if (el.getAttribute("contenteditable") === "plaintext-only") return;
+  const text = e.clipboardData?.getData("text/plain") ?? "";
+  e.preventDefault();
+  insertPlainTextAtCaret(el, text);
+}
+function insertPlainTextAtCaret(el, text) {
+  const selection = getSelection();
+  if (!selection || selection.rangeCount === 0) {
+    el.appendChild(document.createTextNode(text));
+    return;
+  }
+  const range = selection.getRangeAt(0);
+  if (!el.contains(range.commonAncestorContainer)) return;
+  range.deleteContents();
+  if (text) {
+    const node = document.createTextNode(text);
+    range.insertNode(node);
+    range.setStartAfter(node);
+  }
+  range.collapse(true);
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+function cancelInlineEdit(el) {
+  if (!el.hasAttribute("contenteditable")) return;
+  const original = originalTextValues.get(el);
+  if (original !== void 0) {
+    el.innerText = original;
+  }
+  el.blur();
+  finishEdit(el);
+}
 function finishEdit(el) {
   if (!el.hasAttribute("contenteditable")) return;
   el.removeAttribute("contenteditable");
@@ -663,6 +709,83 @@ function createImageEditIcon(label) {
 function getManagedImageKey(img) {
   return img.dataset.dcsImageKey || img.closest("[data-dcs-image-key]")?.dataset.dcsImageKey || null;
 }
+function getManagedImageAltKey(img) {
+  return img.dataset.dcsImageAltKey || img.closest("[data-dcs-image-alt-key]")?.dataset.dcsImageAltKey || null;
+}
+var pendingImageOverrides = /* @__PURE__ */ new Map();
+function cssEscapeAttributeValue(value) {
+  const cssGlobal = globalThis.CSS;
+  if (typeof cssGlobal?.escape === "function") return cssGlobal.escape(value);
+  return value.replace(/[\\"]/g, "\\$&");
+}
+function applyImageOverride(key, src, alt) {
+  if (!key) return 0;
+  const escapedKey = cssEscapeAttributeValue(key);
+  const targets = /* @__PURE__ */ new Set();
+  document.querySelectorAll(`img[data-dcs-image-key="${escapedKey}"]`).forEach((img) => targets.add(img));
+  document.querySelectorAll(`[data-dcs-image-key="${escapedKey}"]`).forEach((el) => {
+    if (el instanceof HTMLImageElement) {
+      targets.add(el);
+    } else {
+      el.querySelectorAll("img").forEach((img) => targets.add(img));
+    }
+  });
+  targets.forEach((img) => {
+    img.closest("picture")?.querySelectorAll("source").forEach((s) => s.remove());
+    img.removeAttribute("srcset");
+    img.src = src;
+    img.dataset.dcsImageUrl = src;
+    if (alt != null) {
+      img.alt = alt;
+      img.dataset.dcsImageAlt = alt;
+    }
+  });
+  return targets.size;
+}
+function setImageOverride(key, src, alt) {
+  pendingImageOverrides.set(key, { src, alt });
+  applyImageOverride(key, src, alt);
+  scheduleRediscovery();
+}
+function applyPendingImageOverrides() {
+  for (const [key, override] of pendingImageOverrides) {
+    applyImageOverride(key, override.src, override.alt);
+  }
+}
+function recordPendingImageOverride(key, src, alt) {
+  pendingImageOverrides.set(key, { src, alt });
+}
+function revertImageOverrideIfImageKey(key, value) {
+  if (!key) return false;
+  const isPending = pendingImageOverrides.has(key);
+  const isImageElement = !isPending && !!document.querySelector(`[data-dcs-image-key="${cssEscapeAttributeValue(key)}"]`);
+  if (!isPending && !isImageElement) return false;
+  pendingImageOverrides.delete(key);
+  if (value) applyImageOverride(key, value);
+  return true;
+}
+function revertImageAltOverrideIfAltKey(key, value) {
+  if (!key) return false;
+  const escapedKey = cssEscapeAttributeValue(key);
+  const hosts = document.querySelectorAll(`[data-dcs-image-alt-key="${escapedKey}"]`);
+  if (hosts.length === 0) return false;
+  hosts.forEach((host) => {
+    const imgs = host instanceof HTMLImageElement ? [host] : Array.from(host.querySelectorAll("img"));
+    imgs.forEach((img) => {
+      img.alt = value;
+      img.dataset.dcsImageAlt = value;
+    });
+    const srcKey = host.dataset.dcsImageKey || host.closest("[data-dcs-image-key]")?.dataset.dcsImageKey;
+    if (srcKey) {
+      const pending = pendingImageOverrides.get(srcKey);
+      if (pending) pendingImageOverrides.set(srcKey, { ...pending, alt: value });
+    }
+  });
+  return true;
+}
+function clearPendingImageOverrides() {
+  pendingImageOverrides.clear();
+}
 function showImageEditIcons(images) {
   if (!editingEnabled) return;
   if (imageEditIconTargets.length === images.length && images.every((img, i) => imageEditIconTargets[i] === img)) return;
@@ -689,6 +812,7 @@ function showImageEditIcons(images) {
         imageWidth: img.naturalWidth,
         imageHeight: img.naturalHeight,
         imageKey: getManagedImageKey(img),
+        imageAltKey: getManagedImageAltKey(img),
         sectionId: sectionEl?.dataset.section ?? null,
         sectionLabel: sectionEl?.dataset.sectionLabel ?? null
       });
@@ -1027,7 +1151,9 @@ function handleMessage(event) {
     case "dcs:update-text":
       if (data && typeof data === "object" && "key" in data && "value" in data) {
         const d = data;
-        updateTextInPlace(d.key, d.value);
+        if (!revertImageOverrideIfImageKey(d.key, d.value) && !revertImageAltOverrideIfAltKey(d.key, d.value)) {
+          updateTextInPlace(d.key, d.value);
+        }
       }
       break;
     case "dcs:set-mode":
@@ -1066,6 +1192,14 @@ function handleMessage(event) {
         }
       }
       break;
+    case "dcs:image-set":
+      if (data && typeof data === "object" && "key" in data && "src" in data) {
+        const d = data;
+        if (typeof d.key === "string" && typeof d.src === "string") {
+          setImageOverride(d.key, d.src, d.alt ?? null);
+        }
+      }
+      break;
     case "dcs:update-reviews":
       if (data && typeof data === "object" && "key" in data) {
         const d = data;
@@ -1135,13 +1269,15 @@ function initEditorBridge() {
         imageWidth: topImage?.naturalWidth ?? null,
         imageHeight: topImage?.naturalHeight ?? null,
         imageKey: topImage ? getManagedImageKey(topImage) : null,
+        imageAltKey: topImage ? getManagedImageAltKey(topImage) : null,
         // All images at click point (for overlapping image scenarios like before/after sliders)
         images: allImages.length > 1 ? allImages.map((img) => ({
           imageUrl: img.currentSrc ?? img.src,
           imageAlt: img.alt ?? null,
           imageWidth: img.naturalWidth,
           imageHeight: img.naturalHeight,
-          imageKey: getManagedImageKey(img)
+          imageKey: getManagedImageKey(img),
+          imageAltKey: getManagedImageAltKey(img)
         })) : null
       });
     }, true);
@@ -1182,6 +1318,6 @@ function initEditorBridge() {
   observeSectionLayout();
 }
 
-export { initEditorBridge };
+export { applyImageOverride, applyPendingImageOverrides, clearPendingImageOverrides, initEditorBridge, recordPendingImageOverride, revertImageAltOverrideIfAltKey, revertImageOverrideIfImageKey };
 //# sourceMappingURL=editorBridge.js.map
 //# sourceMappingURL=editorBridge.js.map