@useinsider/guido 3.5.0-beta.17c0032 → 3.5.0-beta.6fa034d

package/dist/config/compiler/utils/recommendationCompilerUtils.js

@@ -2,128 +2,126 @@ import { useConfig as S } from "../../../composables/useConfig.js";
 import { useRecommendation as g } from "../../../composables/useRecommendation.js";
 import { CSS_CLASS_RECO_BUTTON as _ } from "../../../extensions/Blocks/Recommendation/constants/selectors.js";
 import { useRecommendationExtensionStore as q } from "../../../extensions/Blocks/Recommendation/store/recommendation.js";
-function y(r, i, e, o, s = "") {
-  const c = `{{${s}${r}_${i}_${e}}}`, t = `{{${s}${r}_${i}_currency}}`;
-  return o === "before" ? `${t} ${c}` : `${c} ${t}`;
+function y(r, c, e, o, s = "") {
+  const n = `{{${s}${r}_${c}_${e}}}`, t = `{{${s}${r}_${c}_currency}}`;
+  return o === "before" ? `${t} ${n}` : `${n} ${t}`;
 }
-function f(r, i, e, o, s, c) {
-  switch (i) {
+function f(r, c, e, o, s, n) {
+  switch (c) {
     case "productImage": {
       const t = r.querySelector("img");
-      t && (t.setAttribute("src", `{{${c}${e}_${o}_image_url}}`), t.setAttribute("alt", `{{${c}${e}_${o}_name}}`));
-      const n = r.querySelector("a");
-      n && (n.setAttribute("href", `{{${c}${e}_${o}_url}}`), n.classList.add(_));
+      t && (t.setAttribute("src", `{{${n}${e}_${o}_image_url}}`), t.setAttribute("alt", `{{${n}${e}_${o}_name}}`));
+      const i = r.querySelector("a");
+      i && (i.setAttribute("href", `{{${n}${e}_${o}_url}}`), i.classList.add(_));
       break;
     }
     case "productName": {
       const t = r.querySelector("p");
       if (t) {
-        const n = t.querySelector("strong") || t;
-        n.textContent = `{{${c}${e}_${o}_name}}`;
+        const i = t.querySelector("strong") || t;
+        i.textContent = `{{${n}${e}_${o}_name}}`;
       }
       break;
     }
     case "productPrice": {
       const t = r.querySelector("p");
       if (t) {
-        const n = t.querySelector("strong") || t;
-        n.textContent = y(e, o, "price", s, c);
+        const i = t.querySelector("strong") || t;
+        i.textContent = y(e, o, "price", s, n);
       }
       break;
     }
     case "productOldPrice": {
       const t = r.querySelector("p");
       if (t) {
-        let n = t;
-        for (; n.children.length === 1; )
-          [n] = n.children;
-        n.textContent = y(
+        const i = t.querySelector("strong") || t;
+        i.textContent = y(
           e,
           o,
           "original_price",
           s,
-          c
+          n
         ), t.setAttribute("product-attr", "discount");
       }
       break;
     }
     case "productButton": {
       const t = r.querySelector("a");
-      t && t.setAttribute("href", `{{${c}${e}_${o}_url}}`);
+      t && t.setAttribute("href", `{{${n}${e}_${o}_url}}`);
       break;
     }
     case "productOmnibusPrice": {
       const t = r.querySelector(".omnibus-price-value");
       if (t) {
-        t.textContent = `{{${c}${e}_${o}_omnibus_price}}`;
-        const n = t.closest("p");
-        n && (n.setAttribute("product-attr", "omnibus_price"), n.setAttribute("composition", "true"));
+        t.textContent = `{{${n}${e}_${o}_omnibus_price}}`;
+        const i = t.closest("p");
+        i && (i.setAttribute("product-attr", "omnibus_price"), i.setAttribute("composition", "true"));
       }
       break;
     }
     case "productOmnibusDiscount": {
       const t = r.querySelector(".omnibus-discount-value");
       if (t) {
-        t.textContent = `{{${c}${e}_${o}_omnibus_discount}}`;
-        const n = t.closest("p");
-        n && (n.setAttribute("product-attr", "omnibus_discount"), n.setAttribute("composition", "true"));
+        t.textContent = `{{${n}${e}_${o}_omnibus_discount}}`;
+        const i = t.closest("p");
+        i && (i.setAttribute("product-attr", "omnibus_discount"), i.setAttribute("composition", "true"));
       }
       break;
     }
     default: {
       const t = r.getAttribute("product-attr") ? r : r.querySelector("[product-attr]");
       if (t) {
-        const n = t.getAttribute("product-attr"), a = t.querySelector("p");
+        const i = t.getAttribute("product-attr"), a = t.querySelector("p");
         if (a) {
           const u = a.querySelector("strong") || a;
-          u.textContent = `{{${c}${e}_${o}_${n}}}`;
+          u.textContent = `{{${n}${e}_${o}_${i}}}`;
         }
       }
       break;
     }
   }
 }
-function C(r, i, e, o) {
-  r.querySelectorAll(".recommendation-product-row").forEach((c, t) => {
-    c.querySelectorAll("[data-attribute-type]").forEach((a) => {
+function C(r, c, e, o) {
+  r.querySelectorAll(".recommendation-product-row").forEach((n, t) => {
+    n.querySelectorAll("[data-attribute-type]").forEach((a) => {
       const u = a.getAttribute("data-attribute-type") || "", p = a.querySelectorAll(".attribute-cell");
       p.length > 0 ? p.forEach((l) => {
-        f(l, u, i, t, e, o);
-      }) : f(a, u, i, t, e, o);
+        f(l, u, c, t, e, o);
+      }) : f(a, u, c, t, e, o);
     });
   });
 }
-function w(r, i, e, o) {
+function E(r, c, e, o) {
   const s = r.querySelectorAll(".recommendation-product-row");
   if (!s.length)
     return;
-  const [c] = s, t = c.querySelector("[data-attribute-type]"), n = t ? t.querySelectorAll(".attribute-cell").length : 1;
+  const [n] = s, t = n.querySelector("[data-attribute-type]"), i = t ? t.querySelectorAll(".attribute-cell").length : 1;
   s.forEach((a, u) => {
     a.querySelectorAll("[data-attribute-type]").forEach((l) => {
       const d = l.getAttribute("data-attribute-type") || "";
       l.querySelectorAll(".attribute-cell").forEach((A, h) => {
-        const $ = u * n + h;
-        f(A, d, i, $, e, o);
+        const $ = u * i + h;
+        f(A, d, c, $, e, o);
       });
     });
   });
 }
-function E(r, i, e, o) {
-  r.querySelectorAll(".ins-recommendation-product-container").forEach((c) => {
-    w(c, i, e, o);
+function w(r, c, e, o) {
+  r.querySelectorAll(".ins-recommendation-product-container").forEach((n) => {
+    E(n, c, e, o);
   });
 }
-function R(r, i, e) {
+function R(r, c, e) {
   const o = r.getAttribute("data-layout") || "grid", s = r.getAttribute("currency-alignment") || "after";
-  o === "list" ? C(r, i, s, e) : E(r, i, s, e);
+  o === "list" ? C(r, c, s, e) : w(r, c, s, e);
 }
-function b(r, i, e) {
-  const o = new RegExp(`${i}\\s*:\\s*(\\d+)\\s*px`, "i"), s = r.match(o);
+function b(r, c, e) {
+  const o = new RegExp(`${c}\\s*:\\s*(\\d+)\\s*px`, "i"), s = r.match(o);
   return s ? parseInt(s[1]) : e;
 }
-function P(r, i) {
+function P(r, c) {
   let e = r.parentElement;
-  for (; e && e !== i; ) {
+  for (; e && e !== c; ) {
     if (e.tagName === "TD") {
       const o = e.getAttribute("width");
       if (o && o.endsWith("%") && parseFloat(o) < 100)
@@ -134,39 +132,39 @@ function P(r, i) {
   return null;
 }
 function T(r) {
-  const i = r.getAttribute("style") || "", e = b(i, "width", 600), o = b(i, "padding", 0) * 2, s = Math.max(0, e - o);
-  s !== 0 && r.querySelectorAll("img.adapt-img").forEach((c) => {
-    if (c.hasAttribute("width"))
+  const c = r.getAttribute("style") || "", e = b(c, "width", 600), o = b(c, "padding", 0) * 2, s = Math.max(0, e - o);
+  s !== 0 && r.querySelectorAll("img.adapt-img").forEach((n) => {
+    if (n.hasAttribute("width"))
       return;
-    const t = P(c, r);
+    const t = P(n, r);
     if (!t)
       return;
-    const n = t.getAttribute("width"), a = parseFloat(n), u = b(t.getAttribute("style") || "", "padding", 0) * 2, p = Math.floor(s * a / 100), l = Math.max(1, p - u);
-    c.setAttribute("width", String(l));
-    const d = c.getAttribute("style") || "";
+    const i = t.getAttribute("width"), a = parseFloat(i), u = b(t.getAttribute("style") || "", "padding", 0) * 2, p = Math.floor(s * a / 100), l = Math.max(1, p - u);
+    n.setAttribute("width", String(l));
+    const d = n.getAttribute("style") || "";
     if (!/\bwidth\s*:\s*\d/i.test(d)) {
       const m = d && !d.trim().endsWith(";") ? "; " : "";
-      c.setAttribute("style", `${d}${m}width: ${l}px`);
+      n.setAttribute("style", `${d}${m}width: ${l}px`);
     }
   });
 }
-function v(r, i) {
+function v(r, c) {
   const e = r.match(/<!DOCTYPE[^>]*>/i);
   return (e ? `${e[0]}
-` : "") + i.documentElement.outerHTML;
+` : "") + c.documentElement.outerHTML;
 }
 function N(r) {
-  const i = r.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), e = new DOMParser().parseFromString(i, "text/html"), o = e.querySelectorAll(".recommendation-block-v2");
+  const c = r.replaceAll("{%", "<!--{%").replaceAll("%}", "%}-->"), e = new DOMParser().parseFromString(c, "text/html"), o = e.querySelectorAll(".recommendation-block-v2");
   if (!o.length)
     return r;
-  const { buildCampaignUrl: s } = g(), c = q();
-  c.recommendationCampaignUrls = {};
-  const { isFeatureEnabled: t } = S(), n = t("liquidSyntax") ? "reco_" : "";
+  const { buildCampaignUrl: s } = g(), n = q();
+  n.recommendationCampaignUrls = {};
+  const { isFeatureEnabled: t } = S(), i = t("liquidSyntax") ? "reco_" : "";
   return o.forEach((u) => {
     var l, d;
     const p = u.getAttribute("recommendation-id");
-    p && ((l = u.parentNode) == null || l.insertBefore(e.createComment("REC_START"), u), (d = u.parentNode) == null || d.insertBefore(e.createComment("REC_END"), u.nextSibling), u.querySelectorAll('[data-visibility="0"]').forEach((m) => m.remove()), s(p), R(u, p, n), T(u));
-  }), v(i, e).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
+    p && ((l = u.parentNode) == null || l.insertBefore(e.createComment("REC_START"), u), (d = u.parentNode) == null || d.insertBefore(e.createComment("REC_END"), u.nextSibling), u.querySelectorAll('[data-visibility="0"]').forEach((m) => m.remove()), s(p), R(u, p, i), T(u));
+  }), v(c, e).replaceAll("<!--{%", "{%").replaceAll("%}-->", "%}").replaceAll("&lt;!--{%", "{%").replaceAll("%}--&gt;", "%}");
 }
 export {
   y as formatPriceVariable,

package/dist/extensions/Blocks/Recommendation/block.js

@@ -1,33 +1,33 @@
-var B = Object.defineProperty;
-var C = (a, s, t) => s in a ? B(a, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[s] = t;
-var p = (a, s, t) => C(a, typeof s != "symbol" ? s + "" : s, t);
-import { BlockId as R } from "../../../enums/block.js";
-import { getMigrationBannerHtml as b } from "../../../utils/migrationBannerHtml.js";
-import { Block as A, BlockCompositionType as y, ModificationDescription as f } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { regenerateMobileProductRows as D } from "./controls/main/utils.js";
-import { ensureMobileCssRulesExist as h, setMobileLayoutOptOut as I, hasMobileLayoutOptOut as E } from "./controls/mobileLayout/cssRules.js";
+var k = Object.defineProperty;
+var y = (a, r, t) => r in a ? k(a, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[r] = t;
+var d = (a, r, t) => y(a, typeof r != "symbol" ? r + "" : r, t);
+import { BlockId as B } from "../../../enums/block.js";
+import { getMigrationBannerHtml as D } from "../../../utils/migrationBannerHtml.js";
+import { Block as R, BlockCompositionType as C, ModificationDescription as h } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { regenerateMobileProductRows as b } from "./controls/main/utils.js";
+import { ensureMobileCssRulesExist as p, setMobileLayoutOptOut as f, hasMobileLayoutOptOut as A } from "./controls/mobileLayout/cssRules.js";
 import { RecommendationConfigService as c } from "./services/configService.js";
 import { useRecommendationExtensionStore as g } from "./store/recommendation.js";
-import { getDefaultTemplate as N } from "./templates/grid/template.js";
-const k = R.Recommendation, m = "recommendation-block-v2", u = "recommendation-id";
-let _ = !1;
-class q extends A {
+import { getDefaultTemplate as E } from "./templates/grid/template.js";
+const _ = B.Recommendation, m = "recommendation-block-v2", u = "recommendation-id";
+let I = !1;
+class q extends R {
   constructor() {
     super();
     /**
      * Stores the ID generated in getTemplate() so onCreated() can reuse it.
      * This avoids generating a new (different) ID in onCreated().
      */
-    p(this, "_pendingBlockId", null);
+    d(this, "_pendingBlockId", null);
   }
   getId() {
-    return k;
+    return _;
   }
   getIcon() {
     return "recommendation-icon";
   }
   getBlockCompositionType() {
-    return y.CONTAINER;
+    return C.CONTAINER;
   }
   getName() {
     return this.api.translate("Recommendation Block");
@@ -38,8 +38,8 @@ class q extends A {
     );
   }
   getSettingsPanelTitleHtml() {
-    return b(
-      k,
+    return D(
+      _,
       this.api.translate("Recommendation Block"),
       this.api.translate("This block is switched from the Old Version to the New Version. We recommend you check the Recommendation block and test your message to ensure it works properly.")
     );
@@ -59,7 +59,7 @@ class q extends A {
    */
   getTemplate() {
     const t = this._generateNextId();
-    return this._pendingBlockId = t, N(t);
+    return this._pendingBlockId = t, E(t);
   }
   /**
    * Called when a new block is dropped into the template
@@ -71,7 +71,13 @@ class q extends A {
   onCreated(t) {
     const e = this._getRecommendationId(t);
     if (e !== null && e > 0) {
-      this._detectDuplicate(e) && this._handleDuplicate(t, e);
+      if (this._detectDuplicate(e)) {
+        this._handleDuplicate(t, e);
+        return;
+      }
+      this._pendingBlockId === null && setTimeout(() => {
+        this._getBlockElement(t) && this._detectDuplicate(e) && this._handleDuplicate(t, e);
+      }, 0);
       return;
     }
     const i = this._pendingBlockId ?? this._generateNextId();
@@ -80,16 +86,16 @@ class q extends A {
       this.api,
       t,
       { recommendationId: i }
-    ), r = g();
-    if (r.setCurrentBlock(i), o) {
-      h(this.api);
+    ), s = g();
+    if (s.setCurrentBlock(i), o) {
+      p(this.api);
       const l = this._getBlockElement(t);
-      l && (I(this.api, l, !0), D({
+      l && (f(this.api, l, !0), b({
         currentNode: t,
         documentModifier: this.api.getDocumentModifier()
       }));
     }
-    r.patchCurrentBlockConfig({ language: n.language }, { triggerRefetch: !1 });
+    s.patchCurrentBlockConfig({ language: n.language }, { triggerRefetch: !1 });
   }
   /**
    * Called when the document changes or template is loaded
@@ -109,13 +115,13 @@ class q extends A {
           "Assign recommendation ID to legacy block"
         );
       }
-      c.needsMigration(t) && this._migrateFromLegacy(t);
+      this._healLingeringDuplicate(t), c.needsMigration(t) && this._migrateFromLegacy(t);
       try {
-        _ || (h(this.api), _ = !0);
+        I || (p(this.api), I = !0);
         const e = c.getConfig(t), i = this._getBlockElement(t);
         if (i) {
           const n = !e.mobileLayoutEnabled;
-          E(i) !== n && I(this.api, i, n);
+          A(i) !== n && f(this.api, i, n);
         }
       } catch {
       }
@@ -141,14 +147,53 @@ class q extends A {
       const e = this.api.getDocumentRoot();
       e && "querySelectorAll" in e && e.querySelectorAll(`.${m}`).forEach((n) => {
         if ("getAttribute" in n) {
-          const o = n.getAttribute(u), r = o ? parseInt(o) : 0;
-          r > t && (t = r);
+          const o = n.getAttribute(u), s = o ? parseInt(o) : 0;
+          s > t && (t = s);
         }
       });
     } catch {
     }
     return t + 1;
   }
+  /**
+   * Heals a duplicate that slipped past the create-time `_detectDuplicate`
+   * scan (or that was persisted by an older template before SD-142352).
+   * When two blocks share a `recommendation-id`, the first occurrence in DOM
+   * order is treated as the source and any later sibling is reassigned a
+   * fresh id. The store entry and active-block focus are intentionally not
+   * touched here: each block's persisted `esd-ext-config` carries its own
+   * truth and the regular save-time hydration (`hydrateRecommendationStore`)
+   * will seed the new id from that. Skipping `setCurrentBlock` avoids
+   * yanking the user's current selection mid-edit when the heal fires from
+   * `onDocumentChanged`.
+   */
+  _healLingeringDuplicate(t) {
+    const e = this._getRecommendationId(t);
+    if (!(e === null || e <= 0))
+      try {
+        const i = this.api.getDocumentRoot();
+        if (!i || !("querySelectorAll" in i))
+          return;
+        const n = i.querySelectorAll(
+          `.${m}[${u}="${e}"]`
+        );
+        if (n.length <= 1)
+          return;
+        const o = this._getBlockElement(t);
+        if (!o)
+          return;
+        let s = -1;
+        for (let l = 0; l < n.length; l++)
+          if (n[l] === o) {
+            s = l;
+            break;
+          }
+        if (s <= 0)
+          return;
+        this._reassignDuplicateId(t, e);
+      } catch {
+      }
+  }
   /** True when another block already holds the same id — Stripo's duplication signal. */
   _detectDuplicate(t) {
     try {
@@ -163,33 +208,42 @@ class q extends A {
   }
   /** Assigns a fresh id to a duplicated block and syncs DOM, node config and store. */
   _handleDuplicate(t, e) {
+    const i = this._reassignDuplicateId(t, e), n = g();
+    n.cloneBlockState(e, i), n.setCurrentBlock(i);
+  }
+  /**
+   * Core id-reassignment for a duplicated block: rewrites the DOM
+   * `recommendation-id`, the instance class and the persisted node config to
+   * a fresh id. Returns the new id.
+   *
+   * Used by `_handleDuplicate` at create-time (which additionally clones the
+   * store entry and focuses the new block) and by `_healLingeringDuplicate`
+   * at document-change time (which intentionally skips store/focus side
+   * effects so older bug-affected templates can self-repair without
+   * disturbing the user's current selection).
+   */
+  _reassignDuplicateId(t, e) {
     const i = this._generateNextId(), n = this._getBlockElement(t);
-    this._assignRecommendationId(t, i), n && this._reassignInstanceClass(n, e, i), c.hasConfig(t) && c.updateConfig(
+    return this._assignRecommendationId(t, i), n && this._reassignInstanceClass(n, e, i), c.hasConfig(t) && c.updateConfig(
       this.api,
       t,
       { recommendationId: i },
       `Reassign recommendation ID on duplicate (was ${e})`
-    );
-    const o = g();
-    o.cloneBlockState(e, i), o.setCurrentBlock(i);
+    ), i;
   }
   /**
    * Rewrites `ins-recommendation-v3-block-{id}` on the clone — the instance
-   * class scopes per-block CSS rules, so leaving the source's class would
-   * make stylistic edits leak between source and clone.
+   * class scopes per-block CSS rules in the editor and is also the key the
+   * mail render service reads to look up per-id campaign config, so leaving
+   * the source's class would both leak stylistic edits across blocks and
+   * cause the mail render to apply the source block's config to the clone.
    */
   _reassignInstanceClass(t, e, i) {
     if (!("getAttribute" in t))
       return;
-    const n = t.getAttribute("class");
-    if (!n)
-      return;
-    const o = `ins-recommendation-v3-block-${e}`, r = `ins-recommendation-v3-block-${i}`;
-    if (!n.includes(o))
-      return;
-    const l = n.replace(o, r), d = this.api.getDocumentModifier();
-    d.modifyHtml(t).setAttribute("class", l), d.apply(new f(
-      `Reassign recommendation instance class ${o} -> ${r}`
+    const n = `ins-recommendation-v3-block-${e}`, o = `ins-recommendation-v3-block-${i}`, s = this.api.getDocumentModifier();
+    s.modifyHtml(t).removeClass(n).setClass(o), s.apply(new h(
+      `Reassign recommendation instance class ${n} -> ${o}`
     ));
   }
   /**
@@ -203,7 +257,7 @@ class q extends A {
     if (!i)
       return;
     const n = this.api.getDocumentModifier();
-    n.modifyHtml(i).setAttribute(u, e.toString()), n.apply(new f(`Assign recommendation ID ${e}`));
+    n.modifyHtml(i).setAttribute(u, e.toString()), n.apply(new h(`Assign recommendation ID ${e}`));
   }
   /**
    * Gets the recommendation-id from a block node
@@ -237,6 +291,6 @@ class q extends A {
   }
 }
 export {
-  k as BLOCK_ID,
+  _ as BLOCK_ID,
   q as RecommendationBlock
 };

package/dist/src/extensions/Blocks/Recommendation/block.d.ts

@@ -60,14 +60,41 @@ export declare class RecommendationBlock extends Block {
      * in the document and finding the maximum existing ID + 1.
      */
     private _generateNextId;
+    /**
+     * Heals a duplicate that slipped past the create-time `_detectDuplicate`
+     * scan (or that was persisted by an older template before SD-142352).
+     * When two blocks share a `recommendation-id`, the first occurrence in DOM
+     * order is treated as the source and any later sibling is reassigned a
+     * fresh id. The store entry and active-block focus are intentionally not
+     * touched here: each block's persisted `esd-ext-config` carries its own
+     * truth and the regular save-time hydration (`hydrateRecommendationStore`)
+     * will seed the new id from that. Skipping `setCurrentBlock` avoids
+     * yanking the user's current selection mid-edit when the heal fires from
+     * `onDocumentChanged`.
+     */
+    private _healLingeringDuplicate;
     /** True when another block already holds the same id — Stripo's duplication signal. */
     private _detectDuplicate;
     /** Assigns a fresh id to a duplicated block and syncs DOM, node config and store. */
     private _handleDuplicate;
+    /**
+     * Core id-reassignment for a duplicated block: rewrites the DOM
+     * `recommendation-id`, the instance class and the persisted node config to
+     * a fresh id. Returns the new id.
+     *
+     * Used by `_handleDuplicate` at create-time (which additionally clones the
+     * store entry and focuses the new block) and by `_healLingeringDuplicate`
+     * at document-change time (which intentionally skips store/focus side
+     * effects so older bug-affected templates can self-repair without
+     * disturbing the user's current selection).
+     */
+    private _reassignDuplicateId;
     /**
      * Rewrites `ins-recommendation-v3-block-{id}` on the clone — the instance
-     * class scopes per-block CSS rules, so leaving the source's class would
-     * make stylistic edits leak between source and clone.
+     * class scopes per-block CSS rules in the editor and is also the key the
+     * mail render service reads to look up per-id campaign config, so leaving
+     * the source's class would both leak stylistic edits across blocks and
+     * cause the mail render to apply the source block's config to the clone.
      */
     private _reassignInstanceClass;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.5.0-beta.17c0032",
+  "version": "3.5.0-beta.6fa034d",
   "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",