ngx-xtroedge-cms 1.4.0 → 1.4.3

package/dist/index.mjs

@@ -397,6 +397,12 @@ body.lcms-editing [data-cms] {
   -webkit-user-select: text !important;
   cursor: text !important;
 }
+
+/* Ensure editable elements appear above other content */
+body.lcms-editing [contenteditable="true"] {
+  position: relative !important;
+  z-index: 9999 !important;
+}
 `;
 
 // src/xtroedge-cms.ts
@@ -483,6 +489,7 @@ var _XtroedgeCMS = class _XtroedgeCMS {
     this.scanTimeout = null;
     this.activeImageEl = null;
     this.imageCtxMenu = null;
+    this.floatingEditDialog = null;
     // ===== Rich Text Toolbar =====
     this.richToolbarEl = null;
     this.activeEditableEl = null;
@@ -520,6 +527,7 @@ var _XtroedgeCMS = class _XtroedgeCMS {
     // ===== Edit-mode visibility tracking =====
     this.editScrollHandler = null;
     this.editScrollRAF = null;
+    this.editClickCaptureHandler = null;
     // ===== FAB Drag =====
     this.posX = 20;
     this.posY = 20;
@@ -646,6 +654,26 @@ var _XtroedgeCMS = class _XtroedgeCMS {
     this.observer.observe(document.body, { childList: true, subtree: true });
     window.addEventListener("popstate", this.boundPopState);
     window.addEventListener("hashchange", this.boundHashChange);
+    document.addEventListener("click", (e) => {
+      if (!document.body.classList.contains("lcms-editing")) return;
+      const target = e.target;
+      const anchor = target.closest("a");
+      if (anchor) {
+        let editableEl = null;
+        if (target.getAttribute("contenteditable") === "true") {
+          editableEl = target;
+        } else {
+          editableEl = target.closest('[contenteditable="true"]') || anchor.querySelector('[contenteditable="true"]');
+        }
+        if (editableEl) {
+          e.preventDefault();
+          e.stopPropagation();
+          setTimeout(() => {
+            editableEl.focus();
+          }, 0);
+        }
+      }
+    }, true);
     this.handleNavigation();
   }
   destroy() {
@@ -666,6 +694,14 @@ var _XtroedgeCMS = class _XtroedgeCMS {
     if (this.toastTimer) clearTimeout(this.toastTimer);
     this.db?.close();
   }
+  /**
+   * Manually trigger a rescan of the DOM to detect new editable elements.
+   * Useful when elements are dynamically shown/hidden or added to the page.
+   */
+  rescan() {
+    if (this.scanTimeout) clearTimeout(this.scanTimeout);
+    this.autoDetectAndScan();
+  }
   // 24 hours
   async validateLicense() {
     const licenseKey = this.config.licenseKey || _XtroedgeCMS.secureGet("builder_token") || "";
@@ -1165,13 +1201,20 @@ var _XtroedgeCMS = class _XtroedgeCMS {
       return this.currentSlug;
     };
     const tagCounters = {};
+    const hasCmsKey = (candidate) => {
+      return Array.from(document.querySelectorAll("[data-cms]")).some((node) => node.getAttribute("data-cms") === candidate);
+    };
     const assignKey = (el, sectionSlug) => {
       const sectionKey = sectionSlug === "/header" ? "header" : sectionSlug === "/footer" ? "footer" : "page";
       if (!tagCounters[sectionKey]) tagCounters[sectionKey] = {};
       const tag = el.tagName.toLowerCase();
       if (!tagCounters[sectionKey][tag]) tagCounters[sectionKey][tag] = 0;
       const prefix = sectionKey !== "page" ? `${sectionKey}_` : "";
-      const key = `${prefix}xcms_${tag}_${tagCounters[sectionKey][tag]}`;
+      let key = `${prefix}xcms_${tag}_${tagCounters[sectionKey][tag]}`;
+      while (hasCmsKey(key)) {
+        tagCounters[sectionKey][tag]++;
+        key = `${prefix}xcms_${tag}_${tagCounters[sectionKey][tag]}`;
+      }
       tagCounters[sectionKey][tag]++;
       el.setAttribute("data-cms", key);
       el.setAttribute("data-cms-section", sectionSlug);
@@ -1198,9 +1241,21 @@ var _XtroedgeCMS = class _XtroedgeCMS {
   }
   scanDOM() {
     const elements = document.querySelectorAll("[data-cms]");
+    const seenKeys = /* @__PURE__ */ new Set();
     elements.forEach((el) => {
       if (el.closest("#xtroedge-cms-root, #lcms-login-modal")) return;
-      const key = el.getAttribute("data-cms");
+      let key = el.getAttribute("data-cms");
+      if (seenKeys.has(key)) {
+        let idx = 1;
+        let repaired = `${key}__${idx}`;
+        while (document.querySelector(`[data-cms="${repaired}"]`)) {
+          idx++;
+          repaired = `${key}__${idx}`;
+        }
+        el.setAttribute("data-cms", repaired);
+        key = repaired;
+      }
+      seenKeys.add(key);
       this.registeredKeys.add(key);
       if (!this.managedElements.has(el)) {
         this.attachElement(el, key);
@@ -1248,21 +1303,20 @@ var _XtroedgeCMS = class _XtroedgeCMS {
     return !!el.querySelector("[data-cms]");
   }
   getElementContent(el) {
-    if (this.hasEditableChildren(el)) {
-      return this.getDirectTextContent(el).trim();
-    }
-    return this.richTextEnabled ? el.innerHTML?.trim() || "" : el.textContent?.trim() || "";
+    if (this.richTextEnabled) return el.innerHTML?.trim() || "";
+    if (this.hasEditableChildren(el)) return this.getDirectTextContent(el).trim();
+    return el.textContent?.trim() || "";
   }
   setElementContent(el, val) {
-    if (this.hasEditableChildren(el)) {
+    if (this.richTextEnabled) {
+      el.innerHTML = this.sanitizeHTML(val);
+    } else if (this.hasEditableChildren(el)) {
       const textNodes = [];
       for (let i = 0; i < el.childNodes.length; i++) {
         if (el.childNodes[i].nodeType === Node.TEXT_NODE) textNodes.push(el.childNodes[i]);
       }
       if (textNodes.length > 0) textNodes[0].textContent = val;
       else el.prepend(document.createTextNode(val));
-    } else if (this.richTextEnabled) {
-      el.innerHTML = this.sanitizeHTML(val);
     } else {
       el.textContent = val;
     }
@@ -1296,12 +1350,21 @@ var _XtroedgeCMS = class _XtroedgeCMS {
       const currentVal = this.getPageText(key);
       if (text !== currentVal) this.onTextChanged(key, text);
     };
+    const focusEditableEnd = () => {
+      if (document.activeElement !== el) el.focus();
+      const selection = window.getSelection();
+      if (!selection) return;
+      const range = document.createRange();
+      range.selectNodeContents(el);
+      range.collapse(false);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    };
     const clickHandler = (e) => {
-      const isLink = el.tagName === "A" || e.target.closest("a");
-      if (isLink) {
+      e.stopPropagation();
+      const inAnchor = el.tagName === "A" || !!e.target.closest("a");
+      if (inAnchor) {
         e.preventDefault();
-        e.stopPropagation();
-        el.focus();
       }
     };
     const sectionSlug = el.getAttribute("data-cms-section") || this.currentSlug;
@@ -1323,6 +1386,16 @@ var _XtroedgeCMS = class _XtroedgeCMS {
   static stopProp(e) {
     e.stopPropagation();
   }
+  focusEditableEnd(el) {
+    if (document.activeElement !== el) el.focus();
+    const selection = window.getSelection();
+    if (!selection) return;
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    range.collapse(false);
+    selection.removeAllRanges();
+    selection.addRange(range);
+  }
   enableElementEdit(el, _key, blurH, keyH, inputH, clickH) {
     const val = this.getPageText(_key);
     if (val) this.setElementContent(el, val);
@@ -1359,6 +1432,24 @@ var _XtroedgeCMS = class _XtroedgeCMS {
   applyEditMode(editMode) {
     document.body.classList.toggle("lcms-editing", editMode);
     if (editMode) {
+      this.editClickCaptureHandler = (e) => {
+        const target = e.target;
+        if (!target) return;
+        const editable = target.closest('[contenteditable="true"]');
+        const imageTarget = target.closest("[data-cms-image-key], img[data-cms-key], [data-cms-key]");
+        const isManagedEditable = !!editable && this.managedElements.has(editable);
+        const isManagedImage = !!imageTarget && this.managedImages.has(imageTarget);
+        const isManagedTarget = isManagedEditable || isManagedImage || !!editable || !!imageTarget;
+        if (isManagedTarget) {
+          e.stopPropagation();
+          const anchor = target.closest("a");
+          if (anchor) e.preventDefault();
+        }
+      };
+      document.addEventListener("click", this.editClickCaptureHandler, true);
+      document.addEventListener("mousedown", this.editClickCaptureHandler, true);
+      document.addEventListener("pointerdown", this.editClickCaptureHandler, true);
+      document.addEventListener("touchstart", this.editClickCaptureHandler, true);
       this.editScrollHandler = () => {
         if (this.editScrollRAF) return;
         this.editScrollRAF = requestAnimationFrame(() => {
@@ -1369,6 +1460,13 @@ var _XtroedgeCMS = class _XtroedgeCMS {
       window.addEventListener("scroll", this.editScrollHandler, { passive: true });
       this.syncEditablePointerEvents();
     } else {
+      if (this.editClickCaptureHandler) {
+        document.removeEventListener("click", this.editClickCaptureHandler, true);
+        document.removeEventListener("mousedown", this.editClickCaptureHandler, true);
+        document.removeEventListener("pointerdown", this.editClickCaptureHandler, true);
+        document.removeEventListener("touchstart", this.editClickCaptureHandler, true);
+        this.editClickCaptureHandler = null;
+      }
       if (this.editScrollHandler) {
         window.removeEventListener("scroll", this.editScrollHandler);
         this.editScrollHandler = null;
@@ -1531,6 +1629,11 @@ var _XtroedgeCMS = class _XtroedgeCMS {
       }
     }
     this.observer?.observe(document.body, { childList: true, subtree: true });
+    setTimeout(() => {
+      if (this.editMode) {
+        this.applyEditMode(true);
+      }
+    }, 200);
   }
   cleanupManagedElements() {
     for (const [el] of this.managedElements) this.detachElement(el);
@@ -1572,7 +1675,10 @@ var _XtroedgeCMS = class _XtroedgeCMS {
       if (editMode) this.enableImageEdit(img, info.ctxHandler);
       else this.disableImageEdit(img, info.ctxHandler);
     }
-    if (!editMode) this.dismissImageCtxMenu();
+    if (!editMode) {
+      this.dismissImageCtxMenu();
+      this.dismissFloatingEditDialog();
+    }
   }
   enableImageEdit(img, ctxHandler) {
     if (!img.dataset.origTitle) img.dataset.origTitle = img.title || "";
@@ -1649,6 +1755,123 @@ var _XtroedgeCMS = class _XtroedgeCMS {
       this.imageCtxMenu = null;
     }
   }
+  showFloatingEditDialog(el, key) {
+    this.dismissFloatingEditDialog();
+    const currentText = el.textContent || "";
+    const rect = el.getBoundingClientRect();
+    const dialog = document.createElement("div");
+    Object.assign(dialog.style, {
+      position: "fixed",
+      zIndex: "99999",
+      left: `${Math.max(20, rect.left)}px`,
+      top: `${Math.max(20, rect.top - 120)}px`,
+      background: "rgba(15, 10, 40, 0.95)",
+      backdropFilter: "blur(20px)",
+      webkitBackdropFilter: "blur(20px)",
+      border: "2px solid rgba(139, 92, 246, 0.5)",
+      borderRadius: "12px",
+      padding: "16px",
+      boxShadow: "0 12px 48px rgba(0, 0, 0, 0.6)",
+      minWidth: "320px",
+      maxWidth: "500px"
+    });
+    const title = document.createElement("div");
+    title.textContent = "Edit Text";
+    Object.assign(title.style, {
+      color: "rgba(255, 255, 255, 0.9)",
+      fontSize: "13px",
+      fontWeight: "600",
+      marginBottom: "12px",
+      fontFamily: "system-ui, sans-serif"
+    });
+    const textarea = document.createElement("textarea");
+    textarea.value = currentText;
+    Object.assign(textarea.style, {
+      width: "100%",
+      minHeight: "80px",
+      background: "rgba(255, 255, 255, 0.08)",
+      border: "1px solid rgba(139, 92, 246, 0.3)",
+      borderRadius: "8px",
+      color: "white",
+      padding: "10px",
+      fontSize: "14px",
+      fontFamily: "system-ui, sans-serif",
+      resize: "vertical",
+      outline: "none"
+    });
+    textarea.addEventListener("focus", () => {
+      textarea.style.borderColor = this.highlightColor;
+    });
+    textarea.addEventListener("blur", () => {
+      textarea.style.borderColor = "rgba(139, 92, 246, 0.3)";
+    });
+    const buttons = document.createElement("div");
+    Object.assign(buttons.style, {
+      display: "flex",
+      gap: "8px",
+      marginTop: "12px",
+      justifyContent: "flex-end"
+    });
+    const cancelBtn = document.createElement("button");
+    cancelBtn.textContent = "Cancel";
+    Object.assign(cancelBtn.style, {
+      padding: "8px 16px",
+      background: "rgba(255, 255, 255, 0.1)",
+      border: "none",
+      borderRadius: "6px",
+      color: "rgba(255, 255, 255, 0.7)",
+      fontSize: "13px",
+      fontWeight: "500",
+      cursor: "pointer",
+      fontFamily: "system-ui, sans-serif"
+    });
+    cancelBtn.addEventListener("click", () => this.dismissFloatingEditDialog());
+    cancelBtn.addEventListener("mouseenter", () => cancelBtn.style.background = "rgba(255, 255, 255, 0.15)");
+    cancelBtn.addEventListener("mouseleave", () => cancelBtn.style.background = "rgba(255, 255, 255, 0.1)");
+    const saveBtn = document.createElement("button");
+    saveBtn.textContent = "Save";
+    Object.assign(saveBtn.style, {
+      padding: "8px 16px",
+      background: this.highlightColor,
+      border: "none",
+      borderRadius: "6px",
+      color: "white",
+      fontSize: "13px",
+      fontWeight: "600",
+      cursor: "pointer",
+      fontFamily: "system-ui, sans-serif"
+    });
+    saveBtn.addEventListener("click", () => {
+      const newText = textarea.value;
+      this.setElementContent(el, newText);
+      this.onTextChanged(key, newText);
+      this.dismissFloatingEditDialog();
+    });
+    saveBtn.addEventListener("mouseenter", () => saveBtn.style.opacity = "0.9");
+    saveBtn.addEventListener("mouseleave", () => saveBtn.style.opacity = "1");
+    buttons.appendChild(cancelBtn);
+    buttons.appendChild(saveBtn);
+    dialog.appendChild(title);
+    dialog.appendChild(textarea);
+    dialog.appendChild(buttons);
+    (this.rootEl || document.body).appendChild(dialog);
+    this.floatingEditDialog = dialog;
+    textarea.focus();
+    textarea.select();
+    const closeHandler = (e) => {
+      if (!dialog.contains(e.target)) {
+        this.dismissFloatingEditDialog();
+        document.removeEventListener("mousedown", closeHandler);
+      }
+    };
+    setTimeout(() => document.addEventListener("mousedown", closeHandler), 0);
+  }
+  dismissFloatingEditDialog() {
+    if (this.floatingEditDialog) {
+      this.floatingEditDialog.remove();
+      this.floatingEditDialog = null;
+    }
+  }
   onImageFileSelected(event) {
     const input = event.target;
     const file = input.files?.[0];