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

package/dist/components/Guido.vue.js

@@ -12,9 +12,9 @@ var t = function() {
   n,
   !1,
   null,
-  "3c910a93"
+  "9fb62152"
 );
-const v = s.exports;
+const u = s.exports;
 export {
-  v as default
+  u as default
 };

package/dist/components/Guido.vue2.js

@@ -1,23 +1,23 @@
-import { defineComponent as R, defineAsyncComponent as I, ref as x, computed as U, watch as M, onMounted as z, onUnmounted as B } from "vue";
-import { provideGuidoActions as K } from "../composables/useGuidoActions.js";
-import { usePartner as O } from "../composables/usePartner.js";
-import { useStripo as j } from "../composables/useStripo.js";
-import { migrate as W } from "../config/migrator/index.js";
-import { DefaultUsername as q, DefaultMessageType as J, DefaultGuidoConfig as Q } from "../enums/defaults.js";
-import V from "./organisms/base/Toaster.vue.js";
-import X from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
-import Y from "./organisms/header/HeaderWrapper.vue.js";
-import Z from "./organisms/LoadingWrapper.vue.js";
-import $ from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
-import ee from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
-import { useStripoApi as oe } from "../services/stripoApi.js";
-import { useConfigStore as te } from "../stores/config.js";
-import { useDynamicContentStore as ne } from "../stores/dynamic-content.js";
-import { useEditorStore as re } from "../stores/editor.js";
-import { usePreviewStore as ae } from "../stores/preview.js";
-import { useUnsubscribeStore as ie } from "../stores/unsubscribe.js";
-import se from "../node_modules/lodash-es/merge.js";
-const Ge = /* @__PURE__ */ R({
+import { defineComponent as z, defineAsyncComponent as L, ref as B, computed as k, watch as K, onMounted as j, onUnmounted as q } from "vue";
+import { provideGuidoActions as J } from "../composables/useGuidoActions.js";
+import { usePartner as Q } from "../composables/usePartner.js";
+import { useStripo as V } from "../composables/useStripo.js";
+import { migrate as A } from "../config/migrator/index.js";
+import { DefaultUsername as X, DefaultMessageType as Y, DefaultGuidoConfig as Z } from "../enums/defaults.js";
+import $ from "./organisms/base/Toaster.vue.js";
+import ee from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
+import te from "./organisms/header/HeaderWrapper.vue.js";
+import oe from "./organisms/LoadingWrapper.vue.js";
+import ne from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
+import re from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
+import { useStripoApi as ie } from "../services/stripoApi.js";
+import { useConfigStore as ae } from "../stores/config.js";
+import { useDynamicContentStore as se } from "../stores/dynamic-content.js";
+import { useEditorStore as ce } from "../stores/editor.js";
+import { usePreviewStore as me } from "../stores/preview.js";
+import { useUnsubscribeStore as de } from "../stores/unsubscribe.js";
+import ue from "../node_modules/lodash-es/merge.js";
+const _e = /* @__PURE__ */ z({
   __name: "Guido",
   props: {
     templateId: null,
@@ -32,97 +32,101 @@ const Ge = /* @__PURE__ */ R({
     templateConfig: null
   },
   emits: ["dynamic-content:open", "back", "save:start", "save:complete", "on-change", "ready", "onboarding:finished"],
-  setup(_, { expose: L, emit: t }) {
-    const u = _, k = I(
+  setup(N, { expose: F, emit: n }) {
+    const f = N, H = L(
       () => import("./organisms/email-preview/PreviewContainer.vue.js")
-    ), A = I(
+    ), R = L(
       () => import("./organisms/onboarding/OnboardingWrapper.vue.js")
-    ), l = x(), a = ne(), p = ie(), g = te(), i = re(), N = ae(), n = U(() => i.hasChanges), { getPartnerName: f, getProductType: y, isTestPartner: F } = O(), v = () => {
+    ), g = B(), a = se(), y = de(), v = ae(), s = ce(), x = me(), r = k(() => s.hasChanges), { getPartnerName: C, getProductType: b, isTestPartner: M } = Q(), h = () => {
       var e;
-      return (e = l.value) == null ? void 0 : e.handleSave(!0);
+      return (e = g.value) == null ? void 0 : e.handleSave(!0);
     }, {
-      templateId: s,
-      userId: b,
-      guidoConfig: C,
+      templateId: c,
+      userId: S,
+      guidoConfig: w,
       templateConfig: o,
-      html: r = "",
-      css: h = "",
-      partnerName: c = f(),
-      productType: d = y(),
-      messageType: S = J,
-      username: w = q
-    } = u, m = (o == null ? void 0 : o.preselectedDynamicContentList) || [];
-    i.templateId = s, window.GuidoConfig = se(Q, C), window.GuidoConfig.partner = {
-      partnerName: c,
+      html: i = "",
+      css: D = "",
+      partnerName: m = C(),
+      productType: d = b(),
+      messageType: E = Y,
+      username: P = X
+    } = f, u = (o == null ? void 0 : o.preselectedDynamicContentList) || [];
+    s.templateId = c, window.GuidoConfig = ue(Z, w), window.GuidoConfig.partner = {
+      partnerName: m,
       productType: d,
-      messageType: S
-    }, g.templateConfig = o;
-    const { initPlugin: D } = j({
-      emailId: s,
-      userId: b,
-      username: w,
-      partnerName: c,
+      messageType: E
+    }, v.templateConfig = o;
+    const { initPlugin: T } = V({
+      emailId: c,
+      userId: S,
+      username: P,
+      partnerName: m,
       productType: d,
-      preselectedDynamicContentList: m,
+      preselectedDynamicContentList: u,
       onReady: () => {
-        console.debug("guido:ready"), t("ready");
+        console.debug("guido:ready"), n("ready");
       }
-    }), { getDefaultTemplate: T } = oe(), H = U(() => {
+    }), { getDefaultTemplate: G } = ie(), O = k(() => {
       var e;
       return !((e = window.GuidoConfig) != null && e.useHeader);
     });
-    K({
+    J({
       onBack: () => {
-        console.debug("guido:back"), t("back");
+        console.debug("guido:back"), n("back");
       },
       onSaveStart: () => {
-        console.debug("guido:save:start"), t("save:start");
+        console.debug("guido:save:start"), n("save:start");
       },
       onSaveComplete: (e) => {
-        console.debug("guido:save:complete", e), t("save:complete", e);
+        console.debug("guido:save:complete", e), n("save:complete", e);
       }
     });
-    const E = (e) => {
-      console.debug("dynamic-content:close", e), a.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
-    }, P = () => {
+    const I = (e) => {
+      a.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
+    }, U = () => {
       console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
     };
-    return M(() => n.value, () => {
-      t("on-change", n.value);
-    }), z(async () => {
+    return K(() => r.value, () => {
+      n("on-change", r.value);
+    }), j(async () => {
       console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
       try {
-        p.selectedUnsubscribePages = (o == null ? void 0 : o.selectedUnsubscribePages) || [];
-        let e = {
-          html: r && await W(r),
-          css: h,
+        y.selectedUnsubscribePages = (o == null ? void 0 : o.selectedUnsubscribePages) || [];
+        let t = {
+          html: i && await A(i),
+          css: D,
           forceRecreate: !0
           // TODO: It should be false for old templates. We will communicate with Stripo
         };
-        e.html || (e = await T(), e.html = await W(e.html)), await D(e), a.selectedDynamicContentList = m;
-      } catch (e) {
-        console.error("Failed to initialize Stripo editor:", e);
+        t.html || (t = await G(), t.html = await A(t.html)), await T(t), a.selectedDynamicContentList = u;
+      } catch (t) {
+        console.error("Failed to initialize Stripo editor:", t);
       }
-      document.addEventListener("dynamic-content:open", (e) => {
-        const G = e;
-        console.debug("dynamic-content:open", G.detail), t("dynamic-content:open", G.detail);
+      const e = (t, l) => {
+        const p = t, { attribute: W, position: _ } = p.detail;
+        return console.log(l, W, "Position:", _), { attribute: W, position: _ };
+      };
+      document.addEventListener("dynamic-content:open", (t) => {
+        const { attribute: l, position: p } = e(t, "📥 Dynamic Content Open Event - Data:");
+        n("dynamic-content:open", l, p);
       });
-    }), B(() => {
+    }), q(() => {
       try {
         window.UIEditor.removeEditor();
       } catch {
         console.debug("Failed to remove Stripo editor: No editor found");
       }
-    }), L({
+    }), F({
       dynamicContent: {
-        insert: E,
-        close: P
+        insert: I,
+        close: U
       },
-      hasChanges: n,
-      saveSilent: v
-    }), { __sfc: !0, PreviewContainer: k, OnboardingWrapper: A, headerWrapperRef: l, dynamicContentStore: a, unsubscribeStore: p, props: u, configStore: g, editorStore: i, previewStore: N, hasChanges: n, getPartnerName: f, getProductType: y, isTestPartner: F, saveSilent: v, templateId: s, userId: b, guidoConfig: C, templateConfig: o, html: r, css: h, partnerName: c, productType: d, messageType: S, username: w, preselectedDynamicContentList: m, emit: t, initPlugin: D, getDefaultTemplate: T, noHeader: H, insertDynamicContent: E, closeDynamicContent: P, Toaster: V, FilterSelectionDrawer: X, HeaderWrapper: Y, LoadingWrapper: Z, SaveAsTemplateDrawer: $, UnsubscribeWrapper: ee };
+      hasChanges: r,
+      saveSilent: h
+    }), { __sfc: !0, PreviewContainer: H, OnboardingWrapper: R, headerWrapperRef: g, dynamicContentStore: a, unsubscribeStore: y, props: f, configStore: v, editorStore: s, previewStore: x, hasChanges: r, getPartnerName: C, getProductType: b, isTestPartner: M, saveSilent: h, templateId: c, userId: S, guidoConfig: w, templateConfig: o, html: i, css: D, partnerName: m, productType: d, messageType: E, username: P, preselectedDynamicContentList: u, emit: n, initPlugin: T, getDefaultTemplate: G, noHeader: O, insertDynamicContent: I, closeDynamicContent: U, Toaster: $, FilterSelectionDrawer: ee, HeaderWrapper: te, LoadingWrapper: oe, SaveAsTemplateDrawer: ne, UnsubscribeWrapper: re };
   }
 });
 export {
-  Ge as default
+  _e as default
 };

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

@@ -1,27 +1,34 @@
-var i = Object.defineProperty;
-var d = (t, e, n) => e in t ? i(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
-var a = (t, e, n) => d(t, typeof e != "symbol" ? e + "" : e, n);
-class y {
+var m = Object.defineProperty;
+var r = (t, e, n) => e in t ? m(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var a = (t, e, n) => r(t, typeof e != "symbol" ? e + "" : e, n);
+class v {
   constructor() {
     a(this, "selectedDynamicContent", null);
     a(this, "dataSelectCallback", () => {
     });
   }
-  openMergeTagsLibrary(e, n) {
+  /**
+   * Opens the merge tags library modal
+   * @param dynamicContent - Currently selected dynamic content (if any)
+   * @param onDataSelectCallback - Callback invoked when user selects a merge tag
+   * @param position - Optional position data to place the modal
+   */
+  openMergeTagsLibrary(e, n, s) {
     this.dataSelectCallback = n, this.selectedDynamicContent = e;
-    const s = new CustomEvent("dynamic-content:open", {
-      detail: {
-        attribute: e
-      }
+    const l = {
+      attribute: e,
+      position: s
+    }, i = new CustomEvent("dynamic-content:open", {
+      detail: l
     });
-    document.dispatchEvent(s);
-    const o = (l) => {
-      const c = l.detail;
+    document.dispatchEvent(i);
+    const o = (d) => {
+      const c = d.detail;
       this.selectedDynamicContent = c, c.text && c.value && this.dataSelectCallback(c), document.removeEventListener("dynamic-content:close", o);
     };
     document.addEventListener("dynamic-content:close", o);
   }
 }
 export {
-  y as ExternalMergeTagsLibrary
+  v as ExternalMergeTagsLibrary
 };

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

@@ -1,61 +1,173 @@
-var o = Object.defineProperty;
-var g = (n, t, e) => t in n ? o(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
-var i = (n, t, e) => g(n, typeof t != "symbol" ? t + "" : t, e);
-import { dynamicContentToMergeTags as m } from "../../utils/genericUtil.js";
-import { UIElement as c, UIElementType as r, UEAttr as l, UIElementTagRegistry as d } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+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 a = "external-dynamic-content-ui-element", y = "button-add-dynamic-content";
-class p extends d {
-  registerUiElements(t) {
-    t[r.MERGETAGS] = a;
+const c = "external-dynamic-content-ui-element", y = "button-add-dynamic-content";
+class C extends h {
+  registerUiElements(o) {
+    o[a.MERGETAGS] = c;
   }
 }
-class C extends c {
+class E extends u {
   constructor() {
     super(...arguments);
-    i(this, "mergeTagsButton", null);
-    i(this, "listener", () => {
-    });
-    i(this, "mergeTagsLibrary", null);
-    i(this, "selectedDynamicContent", { value: "", text: "" });
+    s(this, "mergeTagsButton", null);
+    s(this, "mergeTagsLibrary", null);
+    s(this, "clickListener", null);
+    s(this, "lastClickedPosition");
+    s(this, "mousedownListener", null);
   }
   getId() {
-    return a;
+    return c;
   }
-  onRender(e) {
-    var s;
-    this.listener = this._onClick.bind(this), this.mergeTagsButton = e.querySelector("#guido__btn-add-dynamic-content"), (s = this.mergeTagsButton) == null || s.addEventListener("click", this.listener);
+  onRender(t) {
+    var e;
+    this.mergeTagsButton = t.querySelector("#guido__btn-add-dynamic-content"), this.clickListener = this._onClick.bind(this), (e = this.mergeTagsButton) == null || e.addEventListener("click", this.clickListener), this._setupCoordinateTracking();
   }
   onDestroy() {
-    var e;
-    (e = this.mergeTagsButton) == null || e.removeEventListener("click", this.listener);
+    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;
   }
   _onClick() {
     this.openMergeTagLibrary();
   }
+  /**
+   * Called when Stripo detects merge tag interactions
+   * This is the key method that receives notifications about merge tag clicks
+   * @param name - Attribute name (e.g., 'mergeTag')
+   * @param value - MergeTag object with label, value, selStart, selEnd, etc.
+   */
+  onAttributeUpdated(t, e) {
+    if (t !== "mergeTag" || !e)
+      return;
+    const n = {
+      text: e.label,
+      value: e.value
+    }, i = this.lastClickedPosition;
+    this.lastClickedPosition = void 0, this._openDynamicContentLibrary(n, i);
+  }
   openMergeTagLibrary() {
-    this.mergeTagsLibrary || (this.mergeTagsLibrary = new T()), this.mergeTagsLibrary.openMergeTagsLibrary(
-      this.selectedDynamicContent,
-      (e) => {
-        this.api.onValueChanged(m([e])[0]);
-      }
+    const t = this._getButtonPosition(), e = { value: "", text: "" };
+    this._openDynamicContentLibrary(e, t);
+  }
+  /**
+   * Opens the dynamic content library for external apps
+   * Dispatches event with dynamic content data and position
+   */
+  _openDynamicContentLibrary(t, e) {
+    this._ensureMergeTagsLibrary(), this.mergeTagsLibrary.openMergeTagsLibrary(
+      t,
+      (n) => {
+        this.api.triggerValueChange(d([n])[0]);
+      },
+      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
+   */
+  _getButtonPosition() {
+    const t = this.mergeTagsButton.getBoundingClientRect();
+    return {
+      x: t.left,
+      y: t.top,
+      width: t.width,
+      height: t.height
+    };
+  }
+  /**
+   * Sets up coordinate tracking for merge tag clicks in the iframe
+   * Workaround for 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();
+  }
+  /**
+   * Gets the editor iframe element
+   */
+  _getEditorFrame() {
+    var n;
+    const t = document.querySelector("ui-editor");
+    if (!(t != null && t.shadowRoot))
+      return null;
+    const e = t.shadowRoot.querySelector("iframe");
+    return (n = e == null ? void 0 : e.contentWindow) != null && n.document ? e : null;
+  }
+  /**
+   * 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;
+  }
+  /**
+   * Calculates absolute position of element relative to page
+   */
+  _calculateAbsolutePosition(t, e) {
+    const n = t.getBoundingClientRect(), i = e.getBoundingClientRect();
+    return {
+      x: n.x + i.x,
+      y: n.y + i.y,
+      width: i.width,
+      height: i.height
+    };
+  }
+  /**
+   * Cleans up the coordinate tracking event listener
+   */
+  _cleanupCoordinateTracking() {
+    var e;
+    if (!this.mousedownListener)
+      return;
+    const t = this._getEditorFrame();
+    (e = t == null ? void 0 : t.contentWindow) != null && e.document && t.contentWindow.document.removeEventListener("mousedown", this.mousedownListener), this.mousedownListener = null;
+  }
+  /**
+   * Returns the HTML template for the "Add Dynamic Content" button
+   * This button is placed in the merge tags selector UI
+   */
   getTemplate() {
     return `
             <div>
-                <${r.BUTTON} 
+                <${a.BUTTON} 
                     id="guido__btn-add-dynamic-content" 
                     class="btn btn-primary"
-                    ${l.BUTTON.name}="${y}">
-                        <${r.ICON} src="plus" class="icon icon-button color-primary">
-                        </${r.ICON}>
+                    ${m.BUTTON.name}="${y}">
+                        <${a.ICON} src="plus" class="icon icon-button color-primary">
+                        </${a.ICON}>
                         ${this.api.translate("Add Dynamic Content")}
-                </${r.BUTTON}>
+                </${a.BUTTON}>
             </div>`;
   }
 }
 export {
-  p as DynamicContentTagRegistry,
-  C as DynamicContentUiElementExtension
+  C as DynamicContentTagRegistry,
+  E 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-3c910a93],.guido-editor__container[data-v-3c910a93]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-3c910a93]{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-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}

package/dist/src/@types/generic.d.ts

@@ -37,15 +37,39 @@ export type TemplateConfig = {
     selectedUnsubscribePages?: number[];
     variationId?: string;
 };
-export type DynamicContent = {
+type BaseDynamicContent = {
     value: string;
-    text: string;
     fallback?: string;
     format?: {
         key: string;
         value: string;
     };
 };
+export type DynamicContent = BaseDynamicContent & {
+    text: string;
+};
+export type MergeTag = BaseDynamicContent & {
+    label: string;
+    selStart?: number;
+    selEnd?: number;
+    hidden?: boolean;
+};
+export type PositionData = {
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+};
+export type DynamicContentEvent = {
+    attribute: DynamicContent;
+    position?: PositionData;
+};
+export type MergeTagClickEvent = {
+    position: PositionData;
+    element: HTMLElement;
+    tagValue: string | null;
+    tagLabel: string | null;
+};
 export interface EmailHeader {
     senderName: string;
     subject: string;
@@ -61,10 +85,6 @@ export interface TooltipOptions {
     };
     preventXss?: boolean;
 }
-export type MergeTag = {
-    label: string;
-    value: string;
-};
 export type TextValueObject = {
     text: string;
     value: string;

package/dist/src/components/Guido.vue.d.ts

@@ -1,4 +1,4 @@
-import type { DynamicContent, GuidoConfig, TemplateConfig } from '@@/Types/generic';
+import type { DynamicContent, GuidoConfig, PositionData, TemplateConfig } from '@@/Types/generic';
 import type { SavedTemplateDetails } from '@@/Types/stripo';
 type __VLS_Props = {
     templateId: string;
@@ -20,7 +20,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__
     hasChanges: import("vue").ComputedRef<boolean>;
     saveSilent: () => Promise<SavedTemplateDetails | undefined> | undefined;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {
-    "dynamic-content:open": (detail: DynamicContent | null) => void;
+    "dynamic-content:open": (detail: DynamicContent | null, position?: PositionData | undefined) => void;
     back: () => void;
     "save:start": () => void;
     "save:complete": (data: Omit<SavedTemplateDetails, "forceRecreate">) => void;

package/dist/src/extensions/DynamicContent/dynamic-content-modal.d.ts

@@ -1,6 +1,12 @@
-import type { DynamicContent } from '@@/Types/generic';
+import type { DynamicContent, PositionData } from '@@/Types/generic';
 export declare class ExternalMergeTagsLibrary {
     selectedDynamicContent: DynamicContent | null;
     dataSelectCallback: (data: DynamicContent) => void;
-    openMergeTagsLibrary(dynamicContent: DynamicContent, onDataSelectCallback: (data: DynamicContent) => void): void;
+    /**
+     * Opens the merge tags library modal
+     * @param dynamicContent - Currently selected dynamic content (if any)
+     * @param onDataSelectCallback - Callback invoked when user selects a merge tag
+     * @param position - Optional position data to place the modal
+     */
+    openMergeTagsLibrary(dynamicContent: DynamicContent, onDataSelectCallback: (data: DynamicContent) => void, position?: PositionData): void;
 }

package/dist/src/extensions/DynamicContent/dynamic-content.d.ts

@@ -1,16 +1,64 @@
+import type { MergeTag } from '@@/Types/generic';
 import { UIElementType, UIElement, UIElementTagRegistry } from '@stripoinc/ui-editor-extensions';
 export declare class DynamicContentTagRegistry extends UIElementTagRegistry {
     registerUiElements(uiElementsTagsMap: Record<UIElementType, string>): void;
 }
 export declare class DynamicContentUiElementExtension extends UIElement {
     private mergeTagsButton;
-    private listener;
     private mergeTagsLibrary;
-    private selectedDynamicContent;
+    private clickListener;
+    private lastClickedPosition;
+    private mousedownListener;
     getId(): string;
     onRender(container: HTMLElement): void;
     onDestroy(): void;
     _onClick(): void;
+    /**
+     * Called when Stripo detects merge tag interactions
+     * This is the key method that receives notifications about merge tag clicks
+     * @param name - Attribute name (e.g., 'mergeTag')
+     * @param value - MergeTag object with label, value, selStart, selEnd, etc.
+     */
+    onAttributeUpdated(name: string, value: MergeTag | null | undefined): void;
     openMergeTagLibrary(): void;
+    /**
+     * Opens the dynamic content library for external apps
+     * Dispatches event with dynamic content data and position
+     */
+    private _openDynamicContentLibrary;
+    /**
+     * Ensures merge tags library is initialized
+     */
+    private _ensureMergeTagsLibrary;
+    /**
+     * Gets the button's position on the screen
+     * Used to position the modal near the button
+     */
+    private _getButtonPosition;
+    /**
+     * Sets up coordinate tracking for merge tag clicks in the iframe
+     * Workaround for Stripo intercepting click events - tracks mousedown events instead
+     */
+    private _setupCoordinateTracking;
+    /**
+     * Gets the editor iframe element
+     */
+    private _getEditorFrame;
+    /**
+     * Finds merge tag element in the element tree
+     */
+    private _findMergeTagElement;
+    /**
+     * Calculates absolute position of element relative to page
+     */
+    private _calculateAbsolutePosition;
+    /**
+     * Cleans up the coordinate tracking event listener
+     */
+    private _cleanupCoordinateTracking;
+    /**
+     * Returns the HTML template for the "Add Dynamic Content" button
+     * This button is placed in the merge tags selector UI
+     */
     getTemplate(): string;
 }

package/dist/src/stores/config.d.ts

@@ -3,7 +3,7 @@ interface StoreState {
     guidoConfig: GuidoConfig;
     templateConfig?: TemplateConfig;
 }
-export declare const useConfigStore: import("pinia").StoreDefinition<"guidoConfig", StoreState, {
+export declare const useConfigStore: import("pinia").StoreDefinition<"config", StoreState, {
     getVariationId: (state: {
         guidoConfig: {
             translationsPath: string;
@@ -88,12 +88,12 @@ export declare const useConfigStore: import("pinia").StoreDefinition<"guidoConfi
         templateConfig?: {
             preselectedDynamicContentList?: {
                 value: string;
-                text: string;
                 fallback?: string | undefined;
                 format?: {
                     key: string;
                     value: string;
                 } | undefined;
+                text: string;
             }[] | undefined;
             selectedUnsubscribePages?: number[] | undefined;
             variationId?: string | undefined;

package/dist/src/stores/dynamic-content.d.ts

@@ -1,26 +1,26 @@
 import type { DynamicContent } from '@@/Types/generic';
-export declare const useDynamicContentStore: import("pinia").StoreDefinition<"guidoDynamicContent", {
+export declare const useDynamicContentStore: import("pinia").StoreDefinition<"dynamicContent", {
     selectedDynamicContent: DynamicContent;
     selectedDynamicContentList: DynamicContent[];
 }, {
     getSelectedDynamicContentList: (state: {
         selectedDynamicContent: {
             value: string;
-            text: string;
             fallback?: string | undefined;
             format?: {
                 key: string;
                 value: string;
             } | undefined;
+            text: string;
         };
         selectedDynamicContentList: {
             value: string;
-            text: string;
             fallback?: string | undefined;
             format?: {
                 key: string;
                 value: string;
             } | undefined;
+            text: string;
         }[];
     } & import("pinia").PiniaCustomStateProperties<{
         selectedDynamicContent: DynamicContent;

package/dist/src/stores/editor.d.ts

@@ -1,4 +1,4 @@
-export declare const useEditorStore: import("pinia").StoreDefinition<"guidoEditor", {
+export declare const useEditorStore: import("pinia").StoreDefinition<"editor", {
     loadingStatus: boolean;
     isCodeEditorOpen: boolean;
     isSaveAsTemplateDrawerOpen: boolean;

package/dist/src/stores/onboarding.d.ts

@@ -1,5 +1,5 @@
 import type { OnboardingCardConfig, OnboardingType, OnboardingStoreState } from '@@/Types/onboarding';
-export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoOnboarding", OnboardingStoreState, {
+export declare const useOnboardingStore: import("pinia").StoreDefinition<"onboarding", OnboardingStoreState, {
     getOnboarding: (state: {
         onboardings: {
             newVersionPopup: {

package/dist/src/stores/preview.d.ts

@@ -1,5 +1,5 @@
 import type { PreviewState, EmailFormat } from '@@/Types/preview';
-export declare const usePreviewStore: import("pinia").StoreDefinition<"guidoPreview", PreviewState, {
+export declare const usePreviewStore: import("pinia").StoreDefinition<"preview", PreviewState, {
     isAMPModeEnabled: (state: {
         emailFormat: EmailFormat;
         ampHtml: string;

package/dist/src/stores/recommendation.d.ts

@@ -6,5 +6,5 @@ type RecommendationConfig = {
 interface StoreState {
     recommendationConfigs: RecommendationConfig[];
 }
-export declare const useRecommendationStore: import("pinia").StoreDefinition<"guidoRecommendation", StoreState, {}, {}>;
+export declare const useRecommendationStore: import("pinia").StoreDefinition<"recommendation", StoreState, {}, {}>;
 export {};

package/dist/src/stores/save-as-template.d.ts

@@ -17,7 +17,7 @@ interface StoreState {
         message: number;
     };
 }
-export declare const useSaveAsTemplateStore: import("pinia").StoreDefinition<"guidoSaveAsTemplate", StoreState, {
+export declare const useSaveAsTemplateStore: import("pinia").StoreDefinition<"saveAsTemplate", StoreState, {
     getTemplateName: (state: {
         templateName: string;
         categories: {

package/dist/src/stores/toaster.d.ts

@@ -1,5 +1,5 @@
 import type { ToasterState, ToasterOptions } from '@@/Types/toaster';
-export declare const useToasterStore: import("pinia").StoreDefinition<"guidoToaster", ToasterState, {
+export declare const useToasterStore: import("pinia").StoreDefinition<"toaster", ToasterState, {
     shouldAutoHide: (s: {
         status: boolean;
         type: import("@@/Types/toaster").ToasterType;

package/dist/src/stores/unsubscribe.d.ts

@@ -11,7 +11,7 @@ interface StoreState {
     isGlobalUnsubscribeDisabled: boolean;
     isSubscriptionPreferencesCenterDisabled: boolean;
 }
-export declare const useUnsubscribeStore: import("pinia").StoreDefinition<"guidoUnsubscribe", StoreState, {
+export declare const useUnsubscribeStore: import("pinia").StoreDefinition<"unsubscribe", StoreState, {
     getSelectedCollection: (state: {
         templates: {
             id: number;

package/dist/src/stores/version-history.d.ts

@@ -2,7 +2,7 @@ import type { VersionHistoryState } from '@@/Types/version-history-api';
 export interface StoreState extends VersionHistoryState {
     editorVisualMode: 'desktop' | 'mobile';
 }
-export declare const useVersionHistoryStore: import("pinia").StoreDefinition<"guidoVersionHistory", StoreState, {
+export declare const useVersionHistoryStore: import("pinia").StoreDefinition<"versionHistory", StoreState, {
     hasPreviousPatch: (state: {
         editorVisualMode: "desktop" | "mobile";
         previousPatch: {

package/dist/stores/config.js

@@ -1,8 +1,8 @@
-import { DefaultGuidoConfig as i } from "../enums/defaults.js";
-import { defineStore as e } from "pinia";
-const n = e("guidoConfig", {
+import { DefaultGuidoConfig as e } from "../enums/defaults.js";
+import { defineStore as i } from "pinia";
+const r = i("config", {
   state: () => ({
-    guidoConfig: i,
+    guidoConfig: e,
     templateConfig: {}
   }),
   getters: {
@@ -13,5 +13,5 @@ const n = e("guidoConfig", {
   }
 });
 export {
-  n as useConfigStore
+  r as useConfigStore
 };

package/dist/stores/dynamic-content.js

@@ -1,6 +1,6 @@
 import { removeDuplicatesFromArray as n } from "../utils/arrayUtil.js";
 import { defineStore as a } from "pinia";
-const s = a("guidoDynamicContent", {
+const s = a("dynamicContent", {
   state: () => ({
     selectedDynamicContent: { text: "", value: "", fallback: "" },
     selectedDynamicContentList: []

package/dist/stores/editor.js

@@ -1,5 +1,5 @@
 import { defineStore as e } from "pinia";
-const o = e("guidoEditor", {
+const o = e("editor", {
   state: () => ({
     loadingStatus: !0,
     isCodeEditorOpen: !1,

package/dist/stores/onboarding.js

@@ -14,41 +14,41 @@ const e = () => ({
   },
   userModalState: {},
   isFetched: !1
-}), c = s("guidoOnboarding", {
+}), g = s("onboarding", {
   state: () => a(),
   getters: {
-    getOnboarding: (n) => (i) => n.onboardings[i],
-    isActive: (n) => (i) => n.onboardings[i].isActive,
-    getCurrentCard: (n) => (i) => {
-      const o = n.onboardings[i];
-      return o.config[o.cardIndex];
+    getOnboarding: (n) => (o) => n.onboardings[o],
+    isActive: (n) => (o) => n.onboardings[o].isActive,
+    getCurrentCard: (n) => (o) => {
+      const i = n.onboardings[o];
+      return i.config[i.cardIndex];
     },
     getGenericCurrentCard: (n) => {
-      const { genericOnboarding: i } = n.onboardings;
-      return i.config[i.cardIndex];
+      const { genericOnboarding: o } = n.onboardings;
+      return o.config[o.cardIndex];
     },
     getTextBlockCurrentCard: (n) => {
-      const { textBlockOnboarding: i } = n.onboardings;
-      return i.config[i.cardIndex];
+      const { textBlockOnboarding: o } = n.onboardings;
+      return o.config[o.cardIndex];
     },
     getVersionHistoryCurrentCard: (n) => {
-      const { versionHistoryOnboarding: i } = n.onboardings;
-      return i.config[i.cardIndex];
+      const { versionHistoryOnboarding: o } = n.onboardings;
+      return o.config[o.cardIndex];
     },
     getAmpCurrentCard: (n) => {
-      const { ampOnboarding: i } = n.onboardings;
-      return i.config[i.cardIndex];
+      const { ampOnboarding: o } = n.onboardings;
+      return o.config[o.cardIndex];
     },
-    shouldShowOnboarding: (n) => (i) => {
-      const o = n.userModalState.Guido;
-      return i === "newVersionPopup" && (o != null && o.genericOnboarding) ? !1 : o ? !o[i] : !0;
+    shouldShowOnboarding: (n) => (o) => {
+      const i = n.userModalState.Guido;
+      return o === "newVersionPopup" && (i != null && i.genericOnboarding) ? !1 : i ? !i[o] : !0;
     }
   },
   actions: {
     closeOtherOnboardings(n) {
-      Object.keys(this.onboardings).forEach((i) => {
-        const o = i;
-        o !== n && this.onboardings[o].isActive && (this.onboardings[o].isActive = !1, this.onboardings[o].cardIndex = 0, this.onboardings[o].config = []);
+      Object.keys(this.onboardings).forEach((o) => {
+        const i = o;
+        i !== n && this.onboardings[i].isActive && (this.onboardings[i].isActive = !1, this.onboardings[i].cardIndex = 0, this.onboardings[i].config = []);
       });
     },
     start(n) {
@@ -63,8 +63,8 @@ const e = () => ({
     previous(n) {
       this.onboardings[n].cardIndex > 0 && this.onboardings[n].cardIndex--;
     },
-    setConfig(n, i) {
-      this.onboardings[n].config = i ?? [], this.onboardings[n].cardIndex >= this.onboardings[n].config.length && (this.onboardings[n].cardIndex = 0);
+    setConfig(n, o) {
+      this.onboardings[n].config = o ?? [], this.onboardings[n].cardIndex >= this.onboardings[n].config.length && (this.onboardings[n].cardIndex = 0);
     },
     async onDiscoverNowClicked() {
       await this.setUserModalState("newVersionPopup", "true", "Guido"), await this.setUserModalState("genericOnboarding", "true", "Guido"), this.start("genericOnboarding");
@@ -81,15 +81,15 @@ const e = () => ({
     async fetchUserModalState() {
       if (this.isFetched)
         return;
-      const { fetchUserModalState: n } = t(), i = await n();
-      this.userModalState = i, this.isFetched = !0;
+      const { fetchUserModalState: n } = t(), o = await n();
+      this.userModalState = o, this.isFetched = !0;
     },
-    async setUserModalState(n, i, o) {
+    async setUserModalState(n, o, i) {
       const { setUserModalState: r } = t();
-      await r(n, i, o), this.isFetched = !1, await this.fetchUserModalState();
+      await r(n, o, i), this.isFetched = !1, await this.fetchUserModalState();
     }
   }
 });
 export {
-  c as useOnboardingStore
+  g as useOnboardingStore
 };

package/dist/stores/preview.js

@@ -6,7 +6,7 @@ const s = () => ({
   templateHtml: "",
   isLoaded: !1,
   isAMPErrorModalVisible: !1
-}), a = e("guidoPreview", {
+}), a = e("preview", {
   state: () => s(),
   getters: {
     isAMPModeEnabled: (t) => t.emailFormat === "AMP",

package/dist/stores/recommendation.js

@@ -1,8 +1,8 @@
 import { defineStore as e } from "pinia";
-const o = () => ({
+const t = () => ({
   recommendationConfigs: []
-}), n = e("guidoRecommendation", {
-  state: () => o()
+}), n = e("recommendation", {
+  state: () => t()
 });
 export {
   n as useRecommendationStore

package/dist/stores/save-as-template.js

@@ -17,7 +17,7 @@ const r = () => ({
     editor: 2,
     message: 1
   }
-}), g = i("guidoSaveAsTemplate", {
+}), n = i("saveAsTemplate", {
   state: () => r(),
   getters: {
     getTemplateName: (e) => e.templateName.trim(),
@@ -44,5 +44,5 @@ const r = () => ({
   }
 });
 export {
-  g as useSaveAsTemplateStore
+  n as useSaveAsTemplateStore
 };

package/dist/stores/toaster.js

@@ -8,7 +8,7 @@ const a = () => ({
   withIcon: !0,
   withoutLeftMargin: !1,
   actionButton: void 0
-}), u = i("guidoToaster", {
+}), u = i("toaster", {
   state: () => a(),
   getters: {
     shouldAutoHide: (t) => t.status && !!t.text

package/dist/stores/unsubscribe.js

@@ -12,7 +12,7 @@ const p = () => ({
   typeSelectionDrawerStatus: !1,
   isGlobalUnsubscribeDisabled: !1,
   isSubscriptionPreferencesCenterDisabled: !1
-}), g = d("guidoUnsubscribe", {
+}), g = d("unsubscribe", {
   state: () => p(),
   getters: {
     getSelectedCollection: (e) => i[e.selectedCollectionType],

package/dist/stores/version-history.js

@@ -5,13 +5,13 @@ const e = () => ({
   description: "",
   authorId: "",
   authorName: ""
-}), i = () => ({
+}), r = () => ({
   previousPatch: e(),
   currentPatch: e(),
   nextPatch: e(),
   editorVisualMode: "desktop"
-}), r = a("guidoVersionHistory", {
-  state: () => i(),
+}), o = a("versionHistory", {
+  state: () => r(),
   getters: {
     hasPreviousPatch: (t) => !!t.previousPatch.id,
     hasCurrentPatch: (t) => !!t.currentPatch.id,
@@ -24,5 +24,5 @@ const e = () => ({
   }
 });
 export {
-  r as useVersionHistoryStore
+  o as useVersionHistoryStore
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "1.0.3-beta.c6f7a60",
+  "version": "1.0.3-beta.c8da346",
   "description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
   "main": "./dist/guido.umd.cjs",
   "module": "./dist/library.js",