@useinsider/guido 3.4.1-beta.ac571e2 → 3.4.1-beta.ea1fec9

package/dist/composables/useActionsApi.js

@@ -21,9 +21,9 @@ const v = () => {
       resetDataSavedFlag: !1,
       disableLineHeightsReplace: !0
     }, ...t }, s = {
-      callback: (l, p, d, c, u) => {
+      callback: (l, r, d, c, u) => {
         l ? a(l) : e({
-          html: p,
+          html: r,
           ampHtml: d,
           ampErrors: c,
           displayConditions: u
@@ -36,11 +36,11 @@ const v = () => {
   return {
     getCompiledEmail: m,
     getTemplateData: () => new Promise((t) => {
-      const e = ({ html: a, css: i, width: o, height: r, utmParams: s, syncModulesIds: l }) => t({
+      const e = ({ html: a, css: i, width: o, height: p, utmParams: s, syncModulesIds: l }) => t({
         html: a,
         css: i,
         width: o,
-        height: r,
+        height: p,
         utmParams: s,
         syncModulesIds: l
       });
@@ -91,11 +91,7 @@ const v = () => {
     },
     editorSave: () => new Promise((t) => {
       window.StripoEditorApi.actionsApi.save((e) => {
-        if (e) {
-          n(e, "Failed to save template"), t(!1);
-          return;
-        }
-        t(!0);
+        e && n(e, "Failed to save template"), t();
       });
     })
   };

package/dist/composables/useSave.js

@@ -1,31 +1,32 @@
 import { useActionsApi as x } from "./useActionsApi.js";
 import { useConfig as y } from "./useConfig.js";
 import { useSaveStart as w, useSaveComplete as C } from "./useGuidoActions.js";
-import { useSyncModuleExtractor as E } from "./useSyncModuleExtractor.js";
-import { useStripoApi as H } from "../services/stripoApi.js";
-import { useTemplatePreparation as b } from "../utils/templatePreparation.js";
-import { useHtmlValidator as q } from "./useHtmlValidator.js";
-import { useCouponBlockValidator as L } from "./validators/useCouponBlockValidator.js";
-import { useLiquidValidator as P } from "./validators/useLiquidValidator.js";
-const z = () => {
-  const o = w(), s = C(), { validateHtml: r } = q(), { validateLiquidSyntax: n } = P(), { validateCouponBlockTags: l } = L(), { callbacks: a, isFeatureEnabled: d } = y(), { extractSyncModuleData: u } = E(), { setSyncModuleUnsubscriptionPages: c } = H(), { editorSave: m } = x();
+import { useSyncModuleExtractor as H } from "./useSyncModuleExtractor.js";
+import { useStripoApi as b } from "../services/stripoApi.js";
+import { useTemplatePreparation as q } from "../utils/templatePreparation.js";
+import { useHtmlValidator as L } from "./useHtmlValidator.js";
+import { useCouponBlockValidator as P } from "./validators/useCouponBlockValidator.js";
+import { useLiquidValidator as E } from "./validators/useLiquidValidator.js";
+const j = () => {
+  const o = w(), s = C(), { validateHtml: r } = L(), { validateLiquidSyntax: l } = E(), { validateCouponBlockTags: n } = P(), { callbacks: a, isFeatureEnabled: d } = y(), { extractSyncModuleData: u } = H(), { setSyncModuleUnsubscriptionPages: c } = b(), { editorSave: m } = x();
   return { save: async (p = !1, f = !1) => {
     var i;
     o();
-    const { prepareTemplateDetails: v } = b(), t = await v();
-    if (!l(t.compiledHtml))
+    const { prepareTemplateDetails: v } = q(), t = await v();
+    if (!n(t.compiledHtml))
       return;
     if (d("liquidSyntax")) {
-      if (!await n(t.compiledHtml))
+      if (!await l(t.compiledHtml))
         return;
     } else if (!await r(t.compiledHtml, t.dynamicContentList, !0))
       return;
-    if ((i = a.value) != null && i.externalValidation && !await a.value.externalValidation(t) || !await m())
+    if ((i = a.value) != null && i.externalValidation && !await a.value.externalValidation(t))
       return;
+    await m();
     const { unsubscribePayload: S, stripoModules: V } = u(t.rawHtml);
     return await c(S), t.modules = V, p || s({ ...t, silent: f }), t;
   } };
 };
 export {
-  z as useSave
+  j as useSave
 };

package/dist/config/migrator/checkboxMigrator.js

@@ -1,85 +1,91 @@
-var x = Object.defineProperty;
-var y = (s, t, e) => t in s ? x(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
-var m = (s, t, e) => y(s, typeof t != "symbol" ? t + "" : t, e);
-import b from "../../extensions/Blocks/Checkbox/template.js";
-class f {
+var f = Object.defineProperty;
+var I = (o, t, e) => t in o ? f(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
+var T = (o, t, e) => I(o, typeof t != "symbol" ? t + "" : t, e);
+import y from "../../extensions/Blocks/Checkbox/template.js";
+const _ = /font-weight\s*:\s*[^;]*;?/gi, x = /font-style\s*:\s*[^;]*;?/gi, b = /;\s*;/g, d = /^;|;$/g, S = /display\s*:\s*inline/gi, A = /display\s*:/i, L = /font-weight\s*:\s*bold/i, R = /font-style\s*:\s*italic/i, $ = /^<(?:strong|b)\b/i, k = /^<(?:em|i)\b/i;
+class O {
   constructor() {
-    m(this, "parser");
+    T(this, "parser");
     this.parser = new DOMParser();
   }
   migrate(t) {
     try {
-      const e = this.parser.parseFromString(t, "text/html"), i = e.querySelectorAll("td.checkbox-block");
-      return i.length === 0 ? t : (i.forEach((r) => {
+      const e = this.parser.parseFromString(t, "text/html"), l = e.querySelectorAll("td.checkbox-block");
+      if (l.length === 0)
+        return t;
+      let s = !1;
+      return l.forEach((r) => {
         if (r.classList.contains("checkbox-block-v2"))
           return;
-        const n = r.getAttribute("id"), l = this.extractTextFromElement(r, "ins-title"), c = this.extractTextFromElement(r, "ins-description"), a = this.buildTextBlock(l), p = this.buildTextBlock(c), g = b.replace("{-{-TITLE-}-}", a).replace("{-{-DESCRIPTION-}-}", p), o = this.parser.parseFromString(
-          `<table id="tempDoc"><tbody><tr>${g}</tr></tbody></table>`,
+        const i = r.getAttribute("id"), n = this.extractTextFromElement(r, "ins-title"), m = this.extractTextFromElement(r, "ins-description"), c = this.buildTextBlock(n), a = this.buildTextBlock(m), p = y.replace("{-{-TITLE-}-}", c).replace("{-{-DESCRIPTION-}-}", a), u = this.parser.parseFromString(
+          `<table id="tempDoc"><tbody><tr>${p}</tr></tbody></table>`,
           "text/html"
         ).querySelector(".checkbox-block-v2");
-        o && r.parentNode && (o.setAttribute("id", n || ""), r.parentNode.replaceChild(o, r));
-      }), e.documentElement.outerHTML);
+        u && r.parentNode && (u.setAttribute("id", i || ""), r.parentNode.replaceChild(u, r), s = !0);
+      }), s ? e.documentElement.outerHTML : t;
     } catch (e) {
       return console.error("CheckboxMigrator failed:", e), t;
     }
   }
   extractTextFromElement(t, e) {
-    var o, d;
-    const i = t.querySelector(`.${e}`);
-    if (!i)
+    var c, a;
+    const l = e === "ins-title" ? "Title" : "Description", s = t.querySelector(`.${e}`);
+    if (!s)
       return {
-        text: e === "ins-title" ? "Title" : "Description",
-        isBold: !1,
-        isItalic: !1,
+        paragraphs: [{ innerHtml: l, isBold: !1, isItalic: !1, styles: "" }],
         align: "left",
-        styles: ""
+        classList: ""
       };
-    const r = i.querySelector("p");
-    if (!r)
-      return {
-        text: ((o = i.textContent) == null ? void 0 : o.trim()) || (e === "ins-title" ? "Title" : "Description"),
+    const r = Array.from(s.querySelectorAll("p")), i = s.getAttribute("align") || ((c = r[0]) == null ? void 0 : c.getAttribute("align")) || "left", n = s.getAttribute("class") || "";
+    return r.length === 0 ? {
+      paragraphs: [{
+        innerHtml: ((a = s.textContent) == null ? void 0 : a.trim()) || l,
         isBold: !1,
         isItalic: !1,
-        align: i.getAttribute("align") || "left",
         styles: ""
+      }],
+      align: i,
+      classList: ""
+    } : { paragraphs: r.map((p) => {
+      const g = p.getAttribute("style") || "", u = L.test(g) || !!p.querySelector("b, strong"), h = R.test(g) || !!p.querySelector("i, em"), E = this.removeFontEmphasisProperties(g);
+      return {
+        // Legacy parity: empty <p> → fallback placeholder; <p><br></p> is not empty.
+        innerHtml: p.innerHTML.trim() || l,
+        isBold: u,
+        isItalic: h,
+        styles: this.convertInlineToBlock(E)
       };
-    const n = ((d = r.textContent) == null ? void 0 : d.trim()) || (e === "ins-title" ? "Title" : "Description"), l = r.getAttribute("style") || "", c = i.getAttribute("align") || r.getAttribute("align") || "left", a = /font-weight\s*:\s*bold/i.test(l) || !!r.querySelector("b, strong"), p = /font-style\s*:\s*italic/i.test(l) || !!r.querySelector("i, em"), g = this.removeStyleProperties(l, ["font-weight", "font-style"]), u = this.convertInlineToBlock(g);
-    return {
-      text: n,
-      isBold: a,
-      isItalic: p,
-      align: c,
-      styles: u
-    };
+    }), align: i, classList: n };
   }
   buildTextBlock(t) {
-    let e = t.text;
-    t.isBold && t.isItalic ? e = `<strong path="1,0"><em path="1,0,0">${e}</em></strong>` : t.isBold ? e = `<strong path="1,0">${e}</strong>` : t.isItalic && (e = `<em path="1,0">${e}</em>`);
-    const i = t.align ? ` align="${t.align}"` : "", r = t.styles ? ` style="${t.styles}"` : "";
+    const e = t.align ? ` align="${t.align}"` : "", l = t.paragraphs.map((s, r) => {
+      const i = r + 1;
+      let n = s.innerHtml;
+      const m = s.isBold && !$.test(n), c = s.isItalic && !k.test(n);
+      m && c ? n = `<strong path="${i},0"><em path="${i},0,0">${n}</em></strong>` : m ? n = `<strong path="${i},0">${n}</strong>` : c && (n = `<em path="${i},0">${n}</em>`);
+      const a = s.styles ? ` style="${s.styles.replaceAll('"', "'")}"` : "";
+      return `<p path="${i}"${a}>${n}</p>`;
+    }).join(`
+                    `);
     return `
-            <td class="esd-block-text" ${i}>
-                <p path="1" ${r}>
-                    ${e}
-                </p>
+            <td class="esd-block-text ${t.classList}" ${e}>
+                    ${l}
             </td>
         `;
   }
-  removeStyleProperties(t, e) {
-    return t ? e.reduce((r, n) => {
-      const l = new RegExp(`${n}\\s*:\\s*[^;]*;?`, "gi");
-      return r.replace(l, "");
-    }, t).replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim() : "";
+  removeFontEmphasisProperties(t) {
+    return t ? t.replace(_, "").replace(x, "").replace(b, ";").replace(d, "").trim() : "";
   }
   convertInlineToBlock(t) {
     if (!t)
       return "";
-    let e = t.replace(/display\s*:\s*inline/gi, "display: block");
-    return /display\s*:/i.test(e) || (e = e ? `${e}; display: block` : "display: block"), e.replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim();
+    let e = t.replace(S, "display: block");
+    return A.test(e) || (e = e ? `${e}; display: block` : "display: block"), e.replace(b, ";").replace(d, "").trim();
   }
 }
-function k(s) {
-  return new f().migrate(s);
+function N(o) {
+  return new O().migrate(o);
 }
 export {
-  k as migrateCheckbox
+  N as migrateCheckbox
 };

package/dist/config/migrator/radioButtonMigrator.js

@@ -1,109 +1,109 @@
-var x = Object.defineProperty;
-var T = (l, e, t) => e in l ? x(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t;
-var b = (l, e, t) => T(l, typeof e != "symbol" ? e + "" : e, t);
-import S from "../../extensions/Blocks/RadioButton/template.js";
-class B {
+var S = Object.defineProperty;
+var I = (p, t, e) => t in p ? S(p, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : p[t] = e;
+var y = (p, t, e) => I(p, typeof t != "symbol" ? t + "" : t, e);
+import R from "../../extensions/Blocks/RadioButton/template.js";
+const L = /font-weight\s*:\s*[^;]*;?/gi, _ = /font-style\s*:\s*[^;]*;?/gi, f = /;\s*;/g, E = /^;|;$/g, x = /display\s*:\s*inline/gi, A = /display\s*:/i, B = /font-weight\s*:\s*bold/i, $ = /font-style\s*:\s*italic/i, N = /^<(?:strong|b)\b/i, O = /^<(?:em|i)\b/i;
+class H {
   constructor() {
-    b(this, "parser");
+    y(this, "parser");
     this.parser = new DOMParser();
   }
-  migrate(e) {
+  migrate(t) {
     try {
-      const t = this.parser.parseFromString(e, "text/html"), s = t.querySelectorAll("td.radio-button-block"), i = t.querySelectorAll("td.radio-button-v2");
-      if (s.length === 0 && i.length === 0)
-        return e;
-      let o = !1;
-      return s.forEach((r) => {
+      const e = this.parser.parseFromString(t, "text/html"), o = e.querySelectorAll("td.radio-button-block"), n = e.querySelectorAll("td.radio-button-v2");
+      if (o.length === 0 && n.length === 0)
+        return t;
+      let i = !1;
+      return o.forEach((r) => {
         if (r.classList.contains("radio-button-v2"))
           return;
-        const n = r.getAttribute("id"), a = this.extractTextFromElement(r, "ins-title"), g = this.extractTextFromElement(r, "ins-description"), c = this.extractTextFromElement(r, "ins-subscribe"), u = this.extractTextFromElement(r, "ins-unsubscribe"), p = this.buildTextBlock(a), d = this.buildTextBlock(g), y = this.buildTextBlock({ ...c, classList: "" }), f = this.buildTextBlock({ ...u, classList: "" }), h = S.replace("{-{-TITLE-}-}", p).replace("{-{-DESCRIPTION-}-}", d).replace("{-{-YES-}-}", y).replace("{-{-NO-}-}", f), m = this.parser.parseFromString(
+        const s = r.getAttribute("id"), c = this.extractTextFromElement(r, "ins-title"), u = this.extractTextFromElement(r, "ins-description"), l = this.extractTextFromElement(r, "ins-subscribe"), a = this.extractTextFromElement(r, "ins-unsubscribe"), d = this.buildTextBlock(c), m = this.buildTextBlock(u), T = this.buildTextBlock({ ...l, classList: "" }), b = this.buildTextBlock({ ...a, classList: "" }), h = R.replace("{-{-TITLE-}-}", d).replace("{-{-DESCRIPTION-}-}", m).replace("{-{-YES-}-}", T).replace("{-{-NO-}-}", b), g = this.parser.parseFromString(
           `<table id="tempDoc"><tbody><tr>${h}</tr></tbody></table>`,
           "text/html"
         ).querySelector(".radio-button-v2");
-        m && r.parentNode && (m.setAttribute("id", n || ""), r.parentNode.replaceChild(m, r), o = !0);
-      }), o = this.healRadioButtonV2(t) || o, o ? t.documentElement.outerHTML : e;
-    } catch (t) {
-      return console.error("RadioButtonMigrator failed:", t), e;
+        g && r.parentNode && (g.setAttribute("id", s || ""), r.parentNode.replaceChild(g, r), i = !0);
+      }), i = this.healRadioButtonV2(e) || i, i ? e.documentElement.outerHTML : t;
+    } catch (e) {
+      return console.error("RadioButtonMigrator failed:", e), t;
     }
   }
-  healRadioButtonV2(e) {
-    let t = !1;
-    return e.querySelectorAll("td.radio-button-v2").forEach((s) => {
-      var d;
-      s.classList.contains("radio-button-block") || (s.classList.add("radio-button-block"), t = !0);
-      const i = s.querySelector("input#radioYes"), o = s.querySelector("input#radioNo");
-      if (!i || !o)
+  healRadioButtonV2(t) {
+    let e = !1;
+    return t.querySelectorAll("td.radio-button-v2").forEach((o) => {
+      var m;
+      o.classList.contains("radio-button-block") || (o.classList.add("radio-button-block"), e = !0);
+      const n = o.querySelector("input#radioYes"), i = o.querySelector("input#radioNo");
+      if (!n || !i)
         return;
-      const r = ((d = i.parentElement) == null ? void 0 : d.querySelector(":scope > p")) || null;
-      if (!r && !i.hasAttribute("align"))
+      const r = ((m = n.parentElement) == null ? void 0 : m.querySelector(":scope > p")) || null;
+      if (!r && !n.hasAttribute("align"))
         return;
-      const n = i.closest("tr"), a = o.closest("tr");
-      if (!n || !a || n === a || !n.parentNode)
+      const s = n.closest("tr"), c = i.closest("tr");
+      if (!s || !c || s === c || !s.parentNode)
         return;
-      const g = (r == null ? void 0 : r.innerHTML.trim()) || "Yes", c = a.cloneNode(!0), u = c.querySelector("input#radioNo"), p = c.querySelector("p");
-      u && (u.setAttribute("id", "radioYes"), u.removeAttribute("align")), p && (p.innerHTML = g), n.parentNode.replaceChild(c, n), t = !0;
-    }), t;
+      const u = (r == null ? void 0 : r.innerHTML.trim()) || "Yes", l = c.cloneNode(!0), a = l.querySelector("input#radioNo"), d = l.querySelector("p");
+      a && (a.setAttribute("id", "radioYes"), a.removeAttribute("align")), d && (d.innerHTML = u), s.parentNode.replaceChild(l, s), e = !0;
+    }), e;
   }
-  extractTextFromElement(e, t) {
-    var d, y;
-    const s = e.querySelector(`.${t}`);
-    if (!s)
+  extractTextFromElement(t, e) {
+    var u, l;
+    const o = e === "ins-title" ? "Title" : "Description", n = t.querySelector(`.${e}`);
+    if (!n)
       return {
-        text: t === "ins-title" ? "Title" : "Description",
-        isBold: !1,
-        isItalic: !1,
+        paragraphs: [{ innerHtml: o, isBold: !1, isItalic: !1, styles: "" }],
         align: "left",
-        styles: "",
         classList: ""
       };
-    const i = s.querySelector("p");
-    if (!i)
-      return {
-        text: ((d = s.textContent) == null ? void 0 : d.trim()) || (t === "ins-title" ? "Title" : "Description"),
+    const i = Array.from(n.querySelectorAll("p")), r = n.getAttribute("align") || ((u = i[0]) == null ? void 0 : u.getAttribute("align")) || "left", s = n.getAttribute("class") || "";
+    return i.length === 0 ? {
+      paragraphs: [{
+        innerHtml: ((l = n.textContent) == null ? void 0 : l.trim()) || o,
         isBold: !1,
         isItalic: !1,
-        align: s.getAttribute("align") || "left",
-        styles: "",
-        classList: ""
+        styles: ""
+      }],
+      align: r,
+      classList: ""
+    } : { paragraphs: i.map((a) => {
+      const d = a.getAttribute("style") || "", m = B.test(d) || !!a.querySelector("b, strong"), T = $.test(d) || !!a.querySelector("i, em"), b = this.removeFontEmphasisProperties(d);
+      return {
+        // Legacy parity: empty <p> → fallback placeholder; <p><br></p> is not empty.
+        innerHtml: a.innerHTML.trim() || o,
+        isBold: m,
+        isItalic: T,
+        styles: this.convertInlineToBlock(b)
       };
-    const o = ((y = i.textContent) == null ? void 0 : y.trim()) || (t === "ins-title" ? "Title" : "Description"), r = i.getAttribute("style") || "", n = s.getAttribute("align") || i.getAttribute("align") || "left", a = /font-weight\s*:\s*bold/i.test(r) || !!i.querySelector("b, strong"), g = /font-style\s*:\s*italic/i.test(r) || !!i.querySelector("i, em"), c = this.removeStyleProperties(r, ["font-weight", "font-style"]), u = this.convertInlineToBlock(c), p = s.getAttribute("class") || "";
-    return {
-      text: o,
-      isBold: a,
-      isItalic: g,
-      align: n,
-      styles: u,
-      classList: p
-    };
+    }), align: r, classList: s };
   }
-  buildTextBlock(e) {
-    let t = e.text;
-    e.isBold && e.isItalic ? t = `<strong path="1,0"><em path="1,0,0">${t}</em></strong>` : e.isBold ? t = `<strong path="1,0">${t}</strong>` : e.isItalic && (t = `<em path="1,0">${t}</em>`);
-    const s = e.align ? ` align="${e.align}"` : "", i = e.styles ? ` style="${e.styles.replaceAll('"', "'")}"` : "";
+  buildTextBlock(t) {
+    const e = t.align ? ` align="${t.align}"` : "", o = t.paragraphs.map((n, i) => {
+      const r = i + 1;
+      let s = n.innerHtml;
+      const c = n.isBold && !N.test(s), u = n.isItalic && !O.test(s);
+      c && u ? s = `<strong path="${r},0"><em path="${r},0,0">${s}</em></strong>` : c ? s = `<strong path="${r},0">${s}</strong>` : u && (s = `<em path="${r},0">${s}</em>`);
+      const l = n.styles ? ` style="${n.styles.replaceAll('"', "'")}"` : "";
+      return `<p path="${r}"${l}>${s}</p>`;
+    }).join(`
+                    `);
     return `
-            <td class="esd-block-text ${e.classList}" ${s}>
-                <p path="1" ${i}>
-                    ${t}
-                </p>
+            <td class="esd-block-text ${t.classList}" ${e}>
+                    ${o}
             </td>
         `;
   }
-  removeStyleProperties(e, t) {
-    return e ? t.reduce((i, o) => {
-      const r = new RegExp(`${o}\\s*:\\s*[^;]*;?`, "gi");
-      return i.replace(r, "");
-    }, e).replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim() : "";
+  removeFontEmphasisProperties(t) {
+    return t ? t.replace(L, "").replace(_, "").replace(f, ";").replace(E, "").trim() : "";
   }
-  convertInlineToBlock(e) {
-    if (!e)
+  convertInlineToBlock(t) {
+    if (!t)
       return "";
-    let t = e.replace(/display\s*:\s*inline/gi, "display: block");
-    return /display\s*:/i.test(t) || (t = t ? `${t}; display: block` : "display: block"), t.replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim();
+    let e = t.replace(x, "display: block");
+    return A.test(e) || (e = e ? `${e}; display: block` : "display: block"), e.replace(f, ";").replace(E, "").trim();
   }
 }
-function L(l) {
-  return new B().migrate(l);
+function C(p) {
+  return new H().migrate(p);
 }
 export {
-  L as migrateRadioButton
+  C as migrateRadioButton
 };

package/dist/src/composables/useActionsApi.d.ts

@@ -7,5 +7,5 @@ export declare const useActionsApi: () => {
     getPreviewData: (options?: CompileEmailOptions) => Promise<CompiledEmailResult>;
     updateTimerInClonedTemplate: () => Promise<string | null>;
     updateHtmlAndCss: (html: string, css: string) => void;
-    editorSave: () => Promise<boolean>;
+    editorSave: () => Promise<void>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.4.1-beta.ac571e2",
+  "version": "3.4.1-beta.ea1fec9",
   "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",