@duffcloudservices/cms 0.3.13 → 0.3.15

package/README.md

@@ -304,6 +304,29 @@ import { useTextContent } from '@duffcloudservices/cms'
 
 The API is the same, so no other code changes are needed.
 
+## DCS Visual Editor Bridge
+
+For DCS-managed sites, `src/editor/editorBridge.ts` is the shared
+discovery/runtime layer that turns site DOM markers into portal editing
+entry points.
+
+Current first-party surfaces:
+
+- **Managed forms** — discovers `[data-form-key]`, reports
+  `hasManagedForms`/`managedFormIds`, and emits
+  `dcs:managed-form-click`
+- **Reviews** — discovers `[data-dcs-reviews]`, reports
+  `hasReviews`/`reviewKeys`, emits `dcs:reviews-click`, and accepts
+  structured `dcs:update-reviews` data for live preview refresh
+
+The bridge owns discovery and affordances; the portal owns the actual
+editing workflow. Keep every entry point converged on one sheet per
+component family instead of creating parallel editors.
+
+See [`../FIRST-PARTY-COMPONENTS.md`](../FIRST-PARTY-COMPONENTS.md) for
+the shared contract across runtime markers, bridge events, portal
+workflows, publishing, rollout, and validation.
+
 ## License
 
 MIT

package/dist/editor/editorBridge.d.ts

@@ -39,6 +39,10 @@ interface EditorReadyPayload {
     hasBlogContent: boolean;
     /** Current innerHTML of the blog content element, if present */
     blogContentHtml: string | null;
+    /** Whether the page has a [data-event-content] or [data-rich-content="event"] element */
+    hasEventContent: boolean;
+    /** Current innerHTML of the event content element, if present */
+    eventContentHtml: string | null;
     /** Current blog post title text from [data-blog-title], if present */
     blogTitle: string | null;
     /** Current blog post summary/description text from [data-blog-summary], if present */

package/dist/editor/editorBridge.js

@@ -12,15 +12,14 @@ function postToParent(type, data) {
 }
 var TEXT_KEY_SELECTOR = "[data-text-key], [data-dcs-text]";
 var REVIEW_SELECTOR = "[data-dcs-reviews]";
+var BLOG_CONTENT_SELECTOR = "[data-blog-content]";
+var EVENT_CONTENT_SELECTOR = '[data-event-content], [data-rich-content="event"]';
 function getTextKey(el) {
   return el.dataset.dcsText ?? el.dataset.textKey ?? "";
 }
 function textKeySelector(key) {
   return `[data-text-key="${key}"], [data-dcs-text="${key}"]`;
 }
-function reviewSelector(key) {
-  return `[data-dcs-reviews="${key}"]`;
-}
 var editorActive = false;
 var bridgeInitialized = false;
 var activeEditElement = null;
@@ -44,6 +43,7 @@ var initializedSections = /* @__PURE__ */ new WeakSet();
 var initializedReviewElements = /* @__PURE__ */ new WeakSet();
 var initializedManagedFormElements = /* @__PURE__ */ new WeakSet();
 var blogContentInitialized = false;
+var eventContentInitialized = false;
 var blogMetadataInitialized = false;
 function scheduleRediscovery() {
   if (rediscoveryTimer) clearTimeout(rediscoveryTimer);
@@ -148,6 +148,7 @@ function checkForNavigation() {
   removeArrayEditIcon();
   removeReviewEditIcon();
   blogContentInitialized = false;
+  eventContentInitialized = false;
   blogMetadataInitialized = false;
   setTimeout(() => {
     rediscoverAndNotify();
@@ -167,9 +168,12 @@ function rediscoverAndNotify() {
   const reviewKeys = discoverReviewKeys();
   const managedFormIds = discoverManagedFormIds();
   const contentHeight = measureContentHeight(sections);
-  const blogEl = document.querySelector("[data-blog-content]");
+  const blogEl = document.querySelector(BLOG_CONTENT_SELECTOR);
   const hasBlogContent = !!blogEl;
   const blogContentHtml = blogEl ? blogEl.innerHTML : null;
+  const eventEl = document.querySelector(EVENT_CONTENT_SELECTOR);
+  const hasEventContent = !!eventEl;
+  const eventContentHtml = eventEl ? eventEl.innerHTML : null;
   const blogTitleEl = document.querySelector("[data-blog-title]");
   const blogSummaryEl = document.querySelector("[data-blog-summary]");
   const blogTitle = blogTitleEl ? blogTitleEl.textContent?.trim() ?? null : null;
@@ -180,6 +184,8 @@ function rediscoverAndNotify() {
     contentHeight,
     hasBlogContent,
     blogContentHtml,
+    hasEventContent,
+    eventContentHtml,
     blogTitle,
     blogSummary,
     hasManagedForms: managedFormIds.length > 0,
@@ -304,7 +310,7 @@ function applyEditorToElements() {
     });
   });
   if (!blogContentInitialized) {
-    const blogContentEl = document.querySelector("[data-blog-content]");
+    const blogContentEl = document.querySelector(BLOG_CONTENT_SELECTOR);
     if (blogContentEl) {
       blogContentInitialized = true;
       blogContentEl.classList.add("dcs-blog-content");
@@ -325,6 +331,28 @@ function applyEditorToElements() {
       postToParent("dcs:blog-content-ready", { content: blogContentEl.innerHTML });
     }
   }
+  if (!eventContentInitialized) {
+    const eventContentEl = document.querySelector(EVENT_CONTENT_SELECTOR);
+    if (eventContentEl) {
+      eventContentInitialized = true;
+      eventContentEl.classList.add("dcs-blog-content");
+      eventContentEl.addEventListener("click", (e) => {
+        const target = e.target;
+        if (target.closest(TEXT_KEY_SELECTOR)) return;
+        e.preventDefault();
+        e.stopPropagation();
+        postToParent("dcs:blog-content-click", { textKey: "event-content" });
+      });
+      eventContentEl.addEventListener("dblclick", (e) => {
+        const target = e.target;
+        if (target.closest(TEXT_KEY_SELECTOR)) return;
+        e.preventDefault();
+        e.stopPropagation();
+        postToParent("dcs:blog-content-click", { textKey: "event-content" });
+      });
+      postToParent("dcs:blog-content-ready", { content: eventContentEl.innerHTML });
+    }
+  }
   if (!blogMetadataInitialized) {
     const titleEl = document.querySelector("[data-blog-title]");
     const summaryEl = document.querySelector("[data-blog-summary]");
@@ -1027,21 +1055,23 @@ function handleMessage(event) {
       break;
     case "dcs:update-blog-content":
       if (data && typeof data === "object" && "content" in data) {
-        const blogEl = document.querySelector("[data-blog-content]");
-        if (blogEl) {
-          blogEl.innerHTML = data.content;
+        const contentEl = document.querySelector(BLOG_CONTENT_SELECTOR) ?? document.querySelector(EVENT_CONTENT_SELECTOR);
+        if (contentEl) {
+          contentEl.innerHTML = data.content;
           scheduleRediscovery();
         }
       }
       break;
     case "dcs:update-reviews":
-      if (data && typeof data === "object" && "key" in data && "html" in data) {
+      if (data && typeof data === "object" && "key" in data) {
         const d = data;
-        const reviewEl = document.querySelector(reviewSelector(d.key));
-        if (reviewEl) {
-          reviewEl.innerHTML = d.html;
-          scheduleRediscovery();
-        }
+        globalThis.dispatchEvent(new CustomEvent("dcs:reviews-updated", {
+          detail: {
+            key: d.key,
+            reviews: Array.isArray(d.reviews) ? d.reviews : null
+          }
+        }));
+        scheduleRediscovery();
       }
       break;
   }
@@ -1124,7 +1154,8 @@ function initEditorBridge() {
   const reviewKeys = discoverReviewKeys();
   const managedFormIds = discoverManagedFormIds();
   const contentHeight = measureContentHeight(sections);
-  const blogEl = document.querySelector("[data-blog-content]");
+  const blogEl = document.querySelector(BLOG_CONTENT_SELECTOR);
+  const eventEl = document.querySelector(EVENT_CONTENT_SELECTOR);
   const blogTitleEl = document.querySelector("[data-blog-title]");
   const blogSummaryEl = document.querySelector("[data-blog-summary]");
   postToParent("dcs:ready", {
@@ -1133,6 +1164,8 @@ function initEditorBridge() {
     contentHeight,
     hasBlogContent: !!blogEl,
     blogContentHtml: blogEl ? blogEl.innerHTML : null,
+    hasEventContent: !!eventEl,
+    eventContentHtml: eventEl ? eventEl.innerHTML : null,
     blogTitle: blogTitleEl ? blogTitleEl.textContent?.trim() ?? null : null,
     blogSummary: blogSummaryEl ? blogSummaryEl.textContent?.trim() ?? null : null,
     hasManagedForms: managedFormIds.length > 0,