@useinsider/guido 1.0.3-beta.c8da346 → 1.0.3-beta.cafee45

package/dist/extensions/DynamicContent/dynamic-content.js

@@ -1,26 +1,27 @@
-var l = Object.defineProperty;
-var g = (r, o, t) => o in r ? l(r, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[o] = t;
-var s = (r, o, t) => g(r, typeof o != "symbol" ? o + "" : o, t);
-import { dynamicContentToMergeTags as d } from "../../utils/genericUtil.js";
-import { UIElement as u, UIElementType as a, UEAttr as m, UIElementTagRegistry as h } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { ExternalMergeTagsLibrary as T } from "./dynamic-content-modal.js";
-const c = "external-dynamic-content-ui-element", y = "button-add-dynamic-content";
-class C extends h {
-  registerUiElements(o) {
-    o[a.MERGETAGS] = c;
+var c = Object.defineProperty;
+var g = (o, s, t) => s in o ? c(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
+var r = (o, s, t) => g(o, typeof s != "symbol" ? s + "" : s, t);
+import { mergeTagToDynamicContent as d, dynamicContentToMergeTags as m } from "../../utils/genericUtil.js";
+import { UIElement as u, UIElementType as a, UEAttr as h, UIElementTagRegistry as T } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ExternalMergeTagsLibrary as y } from "./dynamic-content-modal.js";
+const l = "external-dynamic-content-ui-element", C = "button-add-dynamic-content";
+class p extends T {
+  registerUiElements(s) {
+    s[a.MERGETAGS] = l;
   }
 }
-class E extends u {
+class b extends u {
   constructor() {
     super(...arguments);
-    s(this, "mergeTagsButton", null);
-    s(this, "mergeTagsLibrary", null);
-    s(this, "clickListener", null);
-    s(this, "lastClickedPosition");
-    s(this, "mousedownListener", null);
+    r(this, "mergeTagsButton", null);
+    r(this, "mergeTagsLibrary", null);
+    r(this, "clickListener", null);
+    r(this, "lastClickedElement", null);
+    r(this, "lastClickedFrame", null);
+    r(this, "mousedownListener", null);
   }
   getId() {
-    return c;
+    return l;
   }
   onRender(t) {
     var e;
@@ -28,7 +29,7 @@ class E extends u {
   }
   onDestroy() {
     var t;
-    this.clickListener && ((t = this.mergeTagsButton) == null || t.removeEventListener("click", this.clickListener)), this._cleanupCoordinateTracking(), this.mergeTagsButton = null, this.clickListener = null, this.lastClickedPosition = void 0;
+    this.clickListener && ((t = this.mergeTagsButton) == null || t.removeEventListener("click", this.clickListener)), this._cleanupCoordinateTracking(), this.mergeTagsButton = null, this.clickListener = null, this.lastClickedElement = null, this.lastClickedFrame = null;
   }
   _onClick() {
     this.openMergeTagLibrary();
@@ -40,13 +41,10 @@ class E extends u {
    * @param value - MergeTag object with label, value, selStart, selEnd, etc.
    */
   onAttributeUpdated(t, e) {
-    if (t !== "mergeTag" || !e)
+    if (t !== "mergeTag" || !(e != null && e.value))
       return;
-    const n = {
-      text: e.label,
-      value: e.value
-    }, i = this.lastClickedPosition;
-    this.lastClickedPosition = void 0, this._openDynamicContentLibrary(n, i);
+    const n = d(e), i = this._getLastClickedPosition();
+    this.lastClickedElement = null, this.lastClickedFrame = null, this._openDynamicContentLibrary(n, i);
   }
   openMergeTagLibrary() {
     const t = this._getButtonPosition(), e = { value: "", text: "" };
@@ -57,51 +55,35 @@ class E extends u {
    * Dispatches event with dynamic content data and position
    */
   _openDynamicContentLibrary(t, e) {
-    this._ensureMergeTagsLibrary(), this.mergeTagsLibrary.openMergeTagsLibrary(
+    this.mergeTagsLibrary || (this.mergeTagsLibrary = new y()), this.mergeTagsLibrary.openMergeTagsLibrary(
       t,
       (n) => {
-        this.api.triggerValueChange(d([n])[0]);
+        n.text && n.value ? this.api.triggerValueChange(m([n])[0]) : this.api.triggerValueChange(null);
       },
       e
     );
   }
-  /**
-   * Ensures merge tags library is initialized
-   */
-  _ensureMergeTagsLibrary() {
-    this.mergeTagsLibrary || (this.mergeTagsLibrary = new T());
-  }
   /**
    * Gets the button's position on the screen
-   * Used to position the modal near the button
+   * Used to position the modal or anything else near the button
    */
   _getButtonPosition() {
-    const t = this.mergeTagsButton.getBoundingClientRect();
-    return {
-      x: t.left,
-      y: t.top,
-      width: t.width,
-      height: t.height
-    };
+    if (!this.mergeTagsButton)
+      return { x: 0, y: 0, width: 0, height: 0 };
+    const { x: t, y: e, width: n, height: i } = this.mergeTagsButton.getBoundingClientRect();
+    return { x: t, y: e, width: n, height: i };
   }
   /**
    * Sets up coordinate tracking for merge tag clicks in the iframe
-   * Workaround for Stripo intercepting click events - tracks mousedown events instead
+   * Workaround from Stripo intercepting click events - tracks mousedown events instead
    */
-  // TODO: Check possibilities with baseApi to get the position of the merge tag and its values
   _setupCoordinateTracking() {
-    const t = () => {
-      const e = this._getEditorFrame();
-      if (!e) {
-        setTimeout(t, 100);
-        return;
-      }
-      this.mousedownListener = (n) => {
-        const i = this._findMergeTagElement(n.target);
-        i && (this.lastClickedPosition = this._calculateAbsolutePosition(e, i));
-      }, e.contentWindow.document.addEventListener("mousedown", this.mousedownListener);
-    };
-    t();
+    var e;
+    const t = this._getEditorFrame();
+    (e = t == null ? void 0 : t.contentWindow) != null && e.document && (this.mousedownListener = (n) => {
+      const i = this._findMergeTagElement(n.target);
+      i && (this.lastClickedElement = i, this.lastClickedFrame = t);
+    }, t.contentWindow.document.addEventListener("mousedown", this.mousedownListener));
   }
   /**
    * Gets the editor iframe element
@@ -118,14 +100,15 @@ class E extends u {
    * Finds merge tag element in the element tree
    */
   _findMergeTagElement(t) {
-    var n, i;
-    let e = t;
-    for (; e; ) {
-      if ((n = e.classList) != null && n.contains("target") || (i = e.classList) != null && i.contains("esd-merge-tag"))
-        return e;
-      e = e.parentElement;
-    }
-    return null;
+    return t.closest(".target, .esd-merge-tag");
+  }
+  /**
+   * Gets the position of the last clicked element, calculated on-demand
+   * This ensures we always use the correct element's position even with rapid clicks
+   */
+  _getLastClickedPosition() {
+    if (!(!this.lastClickedElement || !this.lastClickedFrame))
+      return this._calculateAbsolutePosition(this.lastClickedFrame, this.lastClickedElement);
   }
   /**
    * Calculates absolute position of element relative to page
@@ -159,7 +142,7 @@ class E extends u {
                 <${a.BUTTON} 
                     id="guido__btn-add-dynamic-content" 
                     class="btn btn-primary"
-                    ${m.BUTTON.name}="${y}">
+                    ${h.BUTTON.name}="${C}">
                         <${a.ICON} src="plus" class="icon icon-button color-primary">
                         </${a.ICON}>
                         ${this.api.translate("Add Dynamic Content")}
@@ -168,6 +151,6 @@ class E extends u {
   }
 }
 export {
-  C as DynamicContentTagRegistry,
-  E as DynamicContentUiElementExtension
+  p as DynamicContentTagRegistry,
+  b as DynamicContentUiElementExtension
 };

package/dist/guido.css

@@ -1 +1 @@
-.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-0502bceb] .in-button-v2__wrapper{line-height:0}[data-v-b5997368] .in-segments-wrapper .in-tooltip-wrapper__box{text-align:left}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.guido-loading__wrapper[data-v-dced5582]{height:100%;top:75px}.guido-editor__wrapper[data-v-9fb62152],.guido-editor__container[data-v-9fb62152]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-9fb62152]{height:calc(100vh - 75px)}[data-v-70835920] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-dd57102d] .guido__verion-history-view-option-selection-desktop svg,[data-v-dd57102d] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-dd57102d] .in-segments-wrapper__button_selected,[data-v-dd57102d] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-7a09985c]{gap:16px}[data-v-c2adc57d] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-2dd60b0c],[data-v-2dd60b0c] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.cropped-text[data-v-f20b3a9b]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-v-d3c52b44] .vueperslides__bullets,[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}
+.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-0502bceb] .in-button-v2__wrapper{line-height:0}[data-v-b5997368] .in-segments-wrapper .in-tooltip-wrapper__box{text-align:left}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.guido-loading__wrapper[data-v-dced5582]{height:100%;top:75px}.guido-editor__wrapper[data-v-23c413c9],.guido-editor__container[data-v-23c413c9]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-23c413c9]{height:calc(100vh - 75px)}[data-v-70835920] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-dd57102d] .guido__verion-history-view-option-selection-desktop svg,[data-v-dd57102d] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-dd57102d] .in-segments-wrapper__button_selected,[data-v-dd57102d] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-7a09985c]{gap:16px}[data-v-c2adc57d] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-2dd60b0c],[data-v-2dd60b0c] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.cropped-text[data-v-f20b3a9b]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-v-d3c52b44] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}