@duffcloudservices/cms 0.1.1 → 0.1.2

package/dist/editor/editorBridge.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Editor Bridge — injected into customer site iframes by the DCS visual editor.
+ *
+ * Responsibilities:
+ * 1. Report available sections and text keys to the parent portal
+ * 2. Enable inline contenteditable editing on data-text-key elements (double-click)
+ * 3. Render section overlay highlights on hover/select from parent
+ * 4. Communicate all interactions back to the parent via postMessage
+ * 5. Monitor navigation within the iframe and notify the parent
+ * 6. Show floating edit icon on hover for text-key elements
+ *
+ * NOTE: AI ✨ buttons are rendered by the portal-side SectionOverlayLayer,
+ * NOT by this bridge. The bridge only reports section/text key data and
+ * handles inline text editing.
+ *
+ * This script runs inside the iframe (customer site). The parent portal
+ * communicates via postMessage using the `dcs:*` message protocol.
+ */
+interface SectionInfo {
+    id: string;
+    label: string | null;
+    bounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    textKeyCount: number;
+}
+interface EditorReadyPayload {
+    sections: SectionInfo[];
+    textKeys: string[];
+    contentHeight: number;
+}
+declare function initEditorBridge(): void;
+
+export { type EditorReadyPayload, type SectionInfo, initEditorBridge };

package/dist/editor/editorBridge.js

@@ -0,0 +1,556 @@
+// src/editor/editorBridge.ts
+function isInIframe() {
+  try {
+    return globalThis.self !== globalThis.self.parent;
+  } catch {
+    return true;
+  }
+}
+function postToParent(type, data) {
+  if (!isInIframe()) return;
+  globalThis.self.parent.postMessage({ type, data }, "*");
+}
+var editorActive = false;
+var bridgeInitialized = false;
+var currentHighlightOverlay = null;
+var activeEditElement = null;
+var lastKnownPathname = "";
+var editIconElement = null;
+var editIconTarget = null;
+var arrayEditIconElement = null;
+var arrayEditIconTarget = null;
+var editingEnabled = true;
+var originalTextValues = /* @__PURE__ */ new Map();
+function discoverSections() {
+  const elements = document.querySelectorAll("[data-section]");
+  return Array.from(elements).map((el) => {
+    const rect = el.getBoundingClientRect();
+    const textKeyCount = el.querySelectorAll("[data-text-key]").length;
+    return {
+      id: el.dataset.section,
+      label: el.dataset.sectionLabel ?? null,
+      bounds: {
+        x: rect.left + scrollX,
+        y: rect.top + scrollY,
+        width: rect.width,
+        height: rect.height
+      },
+      textKeyCount
+    };
+  });
+}
+function discoverTextKeys() {
+  return Array.from(document.querySelectorAll("[data-text-key]")).map(
+    (el) => el.dataset.textKey
+  );
+}
+function showSectionHighlight(sectionId) {
+  clearSectionHighlight();
+  const el = document.querySelector(`[data-section="${sectionId}"]`);
+  if (!el) return;
+  const rect = el.getBoundingClientRect();
+  const overlay = document.createElement("div");
+  overlay.className = "dcs-section-highlight";
+  overlay.style.cssText = `
+    position: absolute;
+    left: ${rect.left + scrollX}px;
+    top: ${rect.top + scrollY}px;
+    width: ${rect.width}px;
+    height: ${rect.height}px;
+    border: 2px dashed hsl(221.2 83.2% 53.3%);
+    background: hsla(221.2, 83.2%, 53.3%, 0.05);
+    pointer-events: none;
+    z-index: 99998;
+    border-radius: 8px;
+    transition: all 0.15s ease;
+  `;
+  document.body.appendChild(overlay);
+  currentHighlightOverlay = overlay;
+}
+function clearSectionHighlight() {
+  if (currentHighlightOverlay) {
+    currentHighlightOverlay.remove();
+    currentHighlightOverlay = null;
+  }
+}
+function monitorNavigation() {
+  lastKnownPathname = globalThis.location.pathname;
+  setInterval(() => {
+    checkForNavigation();
+  }, 250);
+  globalThis.addEventListener("popstate", () => {
+    checkForNavigation();
+  });
+  const handleLinkClick = (e) => {
+    const link = e.target.closest?.("a[href]");
+    if (!link) return;
+    const href = link.getAttribute("href");
+    if (!href || href.startsWith("#") || href === "javascript:void(0)") return;
+    try {
+      const resolved = new URL(href, globalThis.location.href);
+      if (resolved.origin !== globalThis.location.origin) {
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+      }
+    } catch {
+      e.preventDefault();
+    }
+  };
+  globalThis.addEventListener("click", handleLinkClick, true);
+  document.addEventListener("click", handleLinkClick, true);
+  document.addEventListener("submit", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, true);
+  window.addEventListener("beforeunload", (e) => {
+    e.preventDefault();
+  });
+}
+function checkForNavigation() {
+  const currentPathname = globalThis.location.pathname;
+  if (currentPathname === lastKnownPathname) return;
+  lastKnownPathname = currentPathname;
+  postToParent("dcs:navigation", { pathname: currentPathname });
+  if (activeEditElement) {
+    finishEdit(activeEditElement);
+  }
+  removeEditIcon();
+  removeArrayEditIcon();
+  setTimeout(() => {
+    rediscoverAndNotify();
+  }, 500);
+}
+function setMode(mode) {
+  if (mode === "explore") {
+    if (activeEditElement) {
+      finishEdit(activeEditElement);
+    }
+  }
+}
+function rediscoverAndNotify() {
+  currentHighlightOverlay = null;
+  activeEditElement = null;
+  const sections = discoverSections();
+  const textKeys = discoverTextKeys();
+  const contentHeight = document.body.scrollHeight;
+  postToParent("dcs:ready", { sections, textKeys, contentHeight });
+  if (editorActive) {
+    editorActive = false;
+    enableEditorMode();
+  }
+}
+function enableEditorMode() {
+  if (editorActive) return;
+  editorActive = true;
+  injectEditorStyles();
+  const textElements = document.querySelectorAll("[data-text-key]");
+  textElements.forEach((htmlEl) => {
+    htmlEl.classList.add("dcs-editable");
+    htmlEl.addEventListener("dblclick", handleTextKeyDblClick);
+    htmlEl.addEventListener("blur", handleTextKeyBlur);
+    htmlEl.addEventListener("keydown", handleTextKeyKeydown);
+    htmlEl.addEventListener("mouseenter", () => {
+      if (activeEditElement) return;
+      const key = htmlEl.dataset.textKey;
+      if (isArrayTextKey(key)) {
+        showArrayEditIcon(htmlEl);
+      } else {
+        showEditIcon(htmlEl);
+      }
+    });
+    htmlEl.addEventListener("mouseleave", (e) => {
+      const related = e.relatedTarget;
+      if (related && (related.classList?.contains("dcs-edit-icon") || related.closest?.(".dcs-edit-icon") || related.classList?.contains("dcs-array-edit-icon") || related.closest?.(".dcs-array-edit-icon"))) return;
+      removeEditIcon();
+      removeArrayEditIcon();
+    });
+  });
+  const sections = document.querySelectorAll("[data-section]");
+  sections.forEach((el) => {
+    const sectionId = el.dataset.section;
+    el.addEventListener("mouseenter", () => {
+      postToParent("dcs:section-hover", { sectionId });
+    });
+    el.addEventListener("mouseleave", () => {
+      postToParent("dcs:section-hover", { sectionId: null });
+    });
+    el.addEventListener("click", (e) => {
+      const target = e.target;
+      if (!target.closest("[data-text-key]")) {
+        postToParent("dcs:section-click", { sectionId });
+      }
+    });
+  });
+}
+function handleTextKeyDblClick(e) {
+  if (!editingEnabled) return;
+  e.preventDefault();
+  e.stopPropagation();
+  e.stopImmediatePropagation();
+  const el = e.currentTarget;
+  const key = el.dataset.textKey;
+  const sectionParent = el.closest("[data-section]");
+  const sectionId = sectionParent?.dataset.section ?? null;
+  postToParent("dcs:text-key-dblclick", { key, sectionId });
+  startInlineEdit(el, key, sectionId);
+}
+function startInlineEdit(el, key, sectionId) {
+  if (activeEditElement && activeEditElement !== el) {
+    finishEdit(activeEditElement);
+  }
+  originalTextValues.set(el, el.innerText.trim());
+  el.setAttribute("contenteditable", "true");
+  el.classList.add("dcs-editing");
+  el.focus();
+  activeEditElement = el;
+  const selection = getSelection();
+  const range = document.createRange();
+  range.selectNodeContents(el);
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+  postToParent("dcs:text-key-click", { key, sectionId });
+}
+function handleTextKeyBlur(e) {
+  const el = e.currentTarget;
+  finishEdit(el);
+}
+function handleTextKeyKeydown(e) {
+  if (e.key === "Enter" && !e.shiftKey) {
+    e.preventDefault();
+    e.currentTarget.blur();
+  }
+  if (e.key === "Escape") {
+    e.preventDefault();
+    e.currentTarget.blur();
+  }
+}
+function finishEdit(el) {
+  if (!el.hasAttribute("contenteditable")) return;
+  el.removeAttribute("contenteditable");
+  el.classList.remove("dcs-editing");
+  const key = el.dataset.textKey;
+  const sectionParent = el.closest("[data-section]");
+  const sectionId = sectionParent?.dataset.section ?? null;
+  const newValue = el.innerText.trim();
+  const originalValue = originalTextValues.get(el) ?? "";
+  if (activeEditElement === el) {
+    activeEditElement = null;
+  }
+  if (newValue !== originalValue) {
+    postToParent("dcs:text-key-changed", { key, value: newValue, sectionId });
+  }
+  originalTextValues.delete(el);
+}
+function focusTextKey(key) {
+  const el = document.querySelector(`[data-text-key="${key}"]`);
+  if (!el) return;
+  el.scrollIntoView({ behavior: "smooth", block: "center" });
+  const sectionParent = el.closest("[data-section]");
+  const sectionId = sectionParent?.dataset.section ?? null;
+  startInlineEdit(el, key, sectionId);
+}
+function updateTextInPlace(key, value) {
+  const el = document.querySelector(`[data-text-key="${key}"]`);
+  if (!el) return;
+  if (el === activeEditElement) return;
+  el.innerText = value;
+}
+function createEditIcon() {
+  const icon = document.createElement("button");
+  icon.className = "dcs-edit-icon";
+  icon.setAttribute("type", "button");
+  icon.setAttribute("title", "Edit text");
+  icon.setAttribute("aria-label", "Edit text inline");
+  icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>`;
+  icon.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    if (!editIconTarget) return;
+    const el = editIconTarget;
+    const key = el.dataset.textKey;
+    const sectionParent = el.closest("[data-section]");
+    const sectionId = sectionParent?.dataset.section ?? null;
+    postToParent("dcs:text-key-dblclick", { key, sectionId });
+    startInlineEdit(el, key, sectionId);
+    removeEditIcon();
+  }, true);
+  icon.addEventListener("mouseleave", (e) => {
+    const related = e.relatedTarget;
+    if (related && editIconTarget && (related === editIconTarget || editIconTarget.contains(related))) return;
+    removeEditIcon();
+  });
+  return icon;
+}
+function showEditIcon(el) {
+  if (!editingEnabled) return;
+  if (!editIconElement) {
+    editIconElement = createEditIcon();
+    document.body.appendChild(editIconElement);
+  }
+  editIconTarget = el;
+  const rect = el.getBoundingClientRect();
+  editIconElement.style.top = `${rect.top + scrollY - 4}px`;
+  editIconElement.style.left = `${rect.left + scrollX - 4}px`;
+  editIconElement.style.display = "flex";
+}
+function removeEditIcon() {
+  if (editIconElement) {
+    editIconElement.style.display = "none";
+  }
+  editIconTarget = null;
+}
+function isArrayTextKey(key) {
+  return /\.\d+\./.test(key) || /\.\w+-\d+\./.test(key);
+}
+function getArrayBaseKey(key) {
+  const hyphenMatch = key.match(/^(.+?)-\d+\./);
+  if (hyphenMatch) return hyphenMatch[1];
+  const numMatch = key.match(/^(.+?)\.\d+\./);
+  return numMatch ? numMatch[1] : null;
+}
+function createArrayEditIcon() {
+  const icon = document.createElement("button");
+  icon.className = "dcs-array-edit-icon";
+  icon.setAttribute("type", "button");
+  icon.setAttribute("title", "Edit list items");
+  icon.setAttribute("aria-label", "Edit list items in panel");
+  icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>`;
+  icon.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    if (!arrayEditIconTarget) return;
+    const el = arrayEditIconTarget;
+    const key = el.dataset.textKey;
+    const arrayKey = getArrayBaseKey(key);
+    if (!arrayKey) return;
+    const sectionParent = el.closest("[data-section]");
+    const sectionId = sectionParent?.dataset.section ?? null;
+    postToParent("dcs:array-key-click", { arrayKey, sectionId });
+    removeArrayEditIcon();
+  }, true);
+  icon.addEventListener("mouseleave", (e) => {
+    const related = e.relatedTarget;
+    if (related && arrayEditIconTarget && (related === arrayEditIconTarget || arrayEditIconTarget.contains(related))) return;
+    removeArrayEditIcon();
+  });
+  return icon;
+}
+function showArrayEditIcon(el) {
+  if (!editingEnabled) return;
+  if (!arrayEditIconElement) {
+    arrayEditIconElement = createArrayEditIcon();
+    document.body.appendChild(arrayEditIconElement);
+  }
+  arrayEditIconTarget = el;
+  const rect = el.getBoundingClientRect();
+  arrayEditIconElement.style.top = `${rect.top + scrollY - 4}px`;
+  arrayEditIconElement.style.left = `${rect.left + scrollX - 4}px`;
+  arrayEditIconElement.style.display = "flex";
+}
+function removeArrayEditIcon() {
+  if (arrayEditIconElement) {
+    arrayEditIconElement.style.display = "none";
+  }
+  arrayEditIconTarget = null;
+}
+function injectEditorStyles() {
+  if (document.getElementById("dcs-editor-styles")) return;
+  const style = document.createElement("style");
+  style.id = "dcs-editor-styles";
+  style.textContent = `
+    [data-text-key].dcs-editable {
+      cursor: text !important;
+      border-radius: 4px;
+      position: relative;
+    }
+
+    [data-text-key].dcs-editable:hover {
+      outline: 2px dashed hsl(221.2 83.2% 53.3% / 0.4) !important;
+      outline-offset: 4px;
+      background-color: hsl(221.2 83.2% 53.3% / 0.03);
+    }
+
+    [data-text-key].dcs-editing {
+      outline: 2px solid hsl(221.2 83.2% 53.3%) !important;
+      outline-offset: 4px;
+      background-color: hsl(221.2 83.2% 53.3% / 0.06);
+      min-height: 1em;
+    }
+
+    [data-text-key].dcs-editing:focus {
+      outline: 2px solid hsl(221.2 83.2% 53.3%) !important;
+      outline-offset: 4px;
+    }
+
+    .dcs-section-highlight {
+      pointer-events: none;
+    }
+
+    /* Floating edit icon button */
+    .dcs-edit-icon {
+      position: absolute;
+      z-index: 99999;
+      display: none;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      margin: 0;
+      border: 1.5px solid hsl(221.2 83.2% 53.3%);
+      border-radius: 4px;
+      background: hsl(221.2 83.2% 53.3% / 0.1);
+      backdrop-filter: blur(4px);
+      color: hsl(221.2 83.2% 53.3%);
+      cursor: pointer;
+      pointer-events: auto;
+      transition: background 0.15s, transform 0.1s;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.12);
+    }
+
+    .dcs-edit-icon:hover {
+      background: hsl(221.2 83.2% 53.3% / 0.25);
+      transform: scale(1.1);
+    }
+
+    .dcs-edit-icon svg {
+      display: block;
+    }
+
+    /* Floating array edit icon button */
+    .dcs-array-edit-icon {
+      position: absolute;
+      z-index: 99999;
+      display: none;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      margin: 0;
+      border: 1.5px solid hsl(271 91% 65%);
+      border-radius: 4px;
+      background: hsl(271 91% 65% / 0.1);
+      backdrop-filter: blur(4px);
+      color: hsl(271 91% 65%);
+      cursor: pointer;
+      pointer-events: auto;
+      transition: background 0.15s, transform 0.1s;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.12);
+    }
+
+    .dcs-array-edit-icon:hover {
+      background: hsl(271 91% 65% / 0.25);
+      transform: scale(1.1);
+    }
+
+    .dcs-array-edit-icon svg {
+      display: block;
+    }
+  `;
+  document.head.appendChild(style);
+}
+function handleMessage(event) {
+  const msg = event.data;
+  if (!msg || typeof msg !== "object" || typeof msg.type !== "string") return;
+  if (!msg.type.startsWith("dcs:")) return;
+  const { type, data } = msg;
+  switch (type) {
+    case "dcs:init-editor":
+      enableEditorMode();
+      break;
+    case "dcs:highlight-section":
+      if (data && typeof data === "object" && "sectionId" in data) {
+        showSectionHighlight(data.sectionId);
+      }
+      break;
+    case "dcs:clear-highlight":
+      clearSectionHighlight();
+      break;
+    case "dcs:select-text-key":
+      if (data && typeof data === "object" && "key" in data) {
+        focusTextKey(data.key);
+      }
+      break;
+    case "dcs:update-text":
+      if (data && typeof data === "object" && "key" in data && "value" in data) {
+        const d = data;
+        updateTextInPlace(d.key, d.value);
+      }
+      break;
+    case "dcs:set-mode":
+      if (data && typeof data === "object" && "mode" in data) {
+        setMode(data.mode);
+      }
+      break;
+    case "dcs:set-editing-enabled":
+      if (data && typeof data === "object" && "enabled" in data) {
+        editingEnabled = data.enabled;
+        if (editingEnabled) {
+          document.querySelectorAll("[data-text-key]").forEach((el) => {
+            el.classList.add("dcs-editable");
+          });
+        } else {
+          if (activeEditElement) {
+            finishEdit(activeEditElement);
+          }
+          removeEditIcon();
+          removeArrayEditIcon();
+          document.querySelectorAll(".dcs-editable").forEach((el) => {
+            el.classList.remove("dcs-editable");
+          });
+        }
+      }
+      break;
+  }
+}
+function initEditorBridge() {
+  if (!isInIframe()) return;
+  if (!bridgeInitialized) {
+    bridgeInitialized = true;
+    monitorNavigation();
+    document.addEventListener("contextmenu", (e) => {
+      e.preventDefault();
+      const sectionEl = e.target.closest?.("[data-section]");
+      postToParent("dcs:contextmenu", {
+        x: e.clientX,
+        y: e.clientY,
+        sectionId: sectionEl?.dataset.section ?? null,
+        sectionLabel: sectionEl?.dataset.sectionLabel ?? null
+      });
+    }, true);
+    document.addEventListener("click", () => {
+      postToParent("dcs:click", {});
+    }, true);
+    globalThis.self.addEventListener("message", handleMessage);
+    if (import.meta.hot) {
+      import.meta.hot.on("vite:afterUpdate", () => {
+        setTimeout(rediscoverAndNotify, 300);
+      });
+    }
+  }
+  const sections = discoverSections();
+  const textKeys = discoverTextKeys();
+  const contentHeight = document.body.scrollHeight;
+  postToParent("dcs:ready", {
+    sections,
+    textKeys,
+    contentHeight
+  });
+}
+if (typeof globalThis.self !== "undefined" && isInIframe()) {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+      setTimeout(initEditorBridge, 200);
+    });
+  } else {
+    setTimeout(initEditorBridge, 200);
+  }
+}
+
+export { initEditorBridge };
+//# sourceMappingURL=editorBridge.js.map
+//# sourceMappingURL=editorBridge.js.map