@duffcloudservices/cms 0.3.11 → 0.3.13

package/dist/editor/editorBridge.js

@@ -33,6 +33,8 @@ var imageEditIconElements = [];
 var imageEditIconTargets = [];
 var reviewEditIconElement = null;
 var reviewEditIconTarget = null;
+var managedFormEditIconElement = null;
+var managedFormEditIconTarget = null;
 var editingEnabled = true;
 var originalTextValues = /* @__PURE__ */ new Map();
 var sectionResizeObserver = null;
@@ -239,6 +241,33 @@ function applyEditorToElements() {
       removeReviewEditIcon();
     });
   });
+  const managedFormElements = document.querySelectorAll("[data-form-key]");
+  managedFormElements.forEach((formEl) => {
+    formEl.classList.add("dcs-managed-form");
+    if (!initializedManagedFormElements.has(formEl)) {
+      initializedManagedFormElements.add(formEl);
+      const openManagedForm = (e) => {
+        if (!editingEnabled) return;
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        postToParent("dcs:managed-form-click", {
+          formId: formEl.dataset.formKey ?? null
+        });
+      };
+      formEl.addEventListener("click", openManagedForm, true);
+      formEl.addEventListener("dblclick", openManagedForm, true);
+      formEl.addEventListener("mouseenter", () => {
+        if (activeEditElement) return;
+        showManagedFormEditIcon(formEl);
+      });
+      formEl.addEventListener("mouseleave", (e) => {
+        const related = e.relatedTarget;
+        if (related && (related.classList?.contains("dcs-managed-form-edit-icon") || related.closest?.(".dcs-managed-form-edit-icon"))) return;
+        removeManagedFormEditIcon();
+      });
+    }
+  });
   const sections = document.querySelectorAll("[data-section]");
   sections.forEach((el) => {
     if (initializedSections.has(el)) return;
@@ -317,23 +346,6 @@ function applyEditorToElements() {
       summaryEl?.classList.add("dcs-blog-metadata");
     }
   }
-  const managedFormElements = document.querySelectorAll("[data-form-key]");
-  managedFormElements.forEach((formEl) => {
-    formEl.classList.add("dcs-managed-form");
-    if (initializedManagedFormElements.has(formEl)) return;
-    initializedManagedFormElements.add(formEl);
-    const openManagedForm = (e) => {
-      if (!editingEnabled) return;
-      e.preventDefault();
-      e.stopPropagation();
-      e.stopImmediatePropagation();
-      postToParent("dcs:managed-form-click", {
-        formId: formEl.dataset.formKey ?? null
-      });
-    };
-    formEl.addEventListener("click", openManagedForm, true);
-    formEl.addEventListener("dblclick", openManagedForm, true);
-  });
 }
 function handleTextKeyDblClick(e) {
   if (!editingEnabled) return;
@@ -553,6 +565,53 @@ function removeReviewEditIcon() {
   }
   reviewEditIconTarget = null;
 }
+function createManagedFormEditIcon() {
+  const icon = document.createElement("button");
+  icon.className = "dcs-managed-form-edit-icon";
+  icon.setAttribute("type", "button");
+  icon.setAttribute("title", "Manage form");
+  icon.setAttribute("aria-label", "Manage form fields");
+  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">
+      <path d="M3 6h18"/><path d="M7 12h10"/><path d="M10 18h4"/>
+    </svg>
+    <span class="dcs-managed-form-edit-label">Manage form</span>
+  `;
+  icon.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    if (!managedFormEditIconTarget) return;
+    postToParent("dcs:managed-form-click", {
+      formId: managedFormEditIconTarget.dataset.formKey ?? null
+    });
+    removeManagedFormEditIcon();
+  }, true);
+  icon.addEventListener("mouseleave", (e) => {
+    const related = e.relatedTarget;
+    if (related && managedFormEditIconTarget && (related === managedFormEditIconTarget || managedFormEditIconTarget.contains(related))) return;
+    removeManagedFormEditIcon();
+  });
+  return icon;
+}
+function showManagedFormEditIcon(el) {
+  if (!editingEnabled) return;
+  if (!managedFormEditIconElement) {
+    managedFormEditIconElement = createManagedFormEditIcon();
+    document.body.appendChild(managedFormEditIconElement);
+  }
+  managedFormEditIconTarget = el;
+  const rect = el.getBoundingClientRect();
+  managedFormEditIconElement.style.top = `${rect.top + scrollY + 8}px`;
+  managedFormEditIconElement.style.left = `${rect.left + scrollX + 8}px`;
+  managedFormEditIconElement.style.display = "flex";
+}
+function removeManagedFormEditIcon() {
+  if (managedFormEditIconElement) {
+    managedFormEditIconElement.style.display = "none";
+  }
+  managedFormEditIconTarget = null;
+}
 function createImageEditIcon(label) {
   const icon = document.createElement("button");
   icon.className = "dcs-image-edit-icon";
@@ -766,6 +825,46 @@ function injectEditorStyles() {
       transform: scale(1.1);
     }
 
+    .dcs-managed-form-edit-icon {
+      position: absolute;
+      z-index: 99999;
+      display: none;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      min-width: 24px;
+      height: 24px;
+      padding: 0 8px;
+      margin: 0;
+      border: 1.5px solid hsl(271 91% 65%);
+      border-radius: 4px;
+      background: hsl(271 91% 65% / 0.12);
+      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);
+      font-size: 11px;
+      font-weight: 600;
+      line-height: 1;
+      white-space: nowrap;
+    }
+
+    .dcs-managed-form-edit-icon:hover {
+      background: hsl(271 91% 65% / 0.24);
+      transform: scale(1.03);
+    }
+
+    .dcs-managed-form-edit-icon svg {
+      display: block;
+      flex-shrink: 0;
+    }
+
+    .dcs-managed-form-edit-label {
+      white-space: nowrap;
+    }
+
     /* Floating image edit icon button \u2014 green to distinguish from text (blue) and array (violet) */
     .dcs-image-edit-icon {
       position: absolute;
@@ -853,33 +952,11 @@ function injectEditorStyles() {
     }
 
     [data-form-key].dcs-managed-form:hover {
-      outline: 2px solid hsl(271 91% 65% / 0.65) !important;
-      outline-offset: 10px;
+      outline: 2px dashed hsl(271 91% 65% / 0.65) !important;
+      outline-offset: 4px;
       background-color: hsl(271 91% 65% / 0.04);
     }
 
-    [data-form-key].dcs-managed-form::after {
-      content: 'Click to manage form';
-      position: absolute;
-      top: -28px;
-      left: 8px;
-      font-size: 11px;
-      font-weight: 600;
-      color: hsl(271 91% 65%);
-      background: hsl(271 91% 65% / 0.12);
-      border: 1px solid hsl(271 91% 65% / 0.3);
-      padding: 2px 8px;
-      border-radius: 4px;
-      opacity: 0;
-      transition: opacity 0.2s;
-      pointer-events: none;
-      white-space: nowrap;
-    }
-
-    [data-form-key].dcs-managed-form:hover::after {
-      opacity: 1;
-    }
-
     /* Blog metadata (title / summary) \u2014 click to edit */
     .dcs-blog-metadata {
       cursor: pointer;
@@ -940,6 +1017,7 @@ function handleMessage(event) {
           removeEditIcon();
           removeArrayEditIcon();
           removeReviewEditIcon();
+          removeManagedFormEditIcon();
           removeAllImageEditIcons();
           document.querySelectorAll(".dcs-editable").forEach((el) => {
             el.classList.remove("dcs-editable");