@useinsider/guido 3.1.1-beta.b0899ff → 3.1.1-beta.b962371

package/dist/composables/useStripo.js

@@ -1,42 +1,42 @@
-import { useActionsApi as A } from "./useActionsApi.js";
-import { useBlocksConfig as F } from "./useBlocksConfig.js";
-import { useConfig as D } from "./useConfig.js";
-import { useCustomInterfaceAppearance as I } from "./useCustomInterfaceAppearance.js";
-import { useStripoEventHandler as P } from "./useStripoEventHandler.js";
-import { useToaster as U } from "./useToaster.js";
-import { localePatch as R } from "../config/i18n/index.js";
-import { displayConditions as H } from "../enums/displayConditions.js";
-import { useStripoApi as O } from "../services/stripoApi.js";
-import q from "../static/styles/customEditorStyle.css.js";
-import { useEditorStore as S } from "../stores/editor.js";
-import { dynamicContentToMergeTags as x } from "../utils/genericUtil.js";
-import L from "../package.json.js";
-const oe = (C, c) => {
-  const { features: l, template: E } = D(), { handleError: u } = U(), { getToken: h, getCustomFonts: w, getSyncModulesStatus: b } = O(), { handleEvent: k } = P(), { getStripoBlocksConfig: T } = F(), V = async (i, n = [], r = !1) => {
-    var f, g, y;
-    const e = S(), { html: m, css: a } = i, { baseBlocks: o, extensions: d } = await T(), p = ((f = l.value) == null ? void 0 : f.displayConditions) ?? !0, B = ((g = l.value) == null ? void 0 : g.modulesDisabled) ?? !1, v = ((y = E.value) == null ? void 0 : y.forceRecreate) ?? !1;
+import { useActionsApi as F } from "./useActionsApi.js";
+import { useBlocksConfig as D } from "./useBlocksConfig.js";
+import { useConfig as I } from "./useConfig.js";
+import { useCustomInterfaceAppearance as P } from "./useCustomInterfaceAppearance.js";
+import { useStripoEventHandler as U } from "./useStripoEventHandler.js";
+import { useToaster as R } from "./useToaster.js";
+import { localePatch as q } from "../config/i18n/index.js";
+import { displayConditions as x } from "../enums/displayConditions.js";
+import { useStripoApi as H } from "../services/stripoApi.js";
+import O from "../static/styles/customEditorStyle.css.js";
+import { useEditorStore as C } from "../stores/editor.js";
+import { dynamicContentToMergeTags as L } from "../utils/genericUtil.js";
+import $ from "../package.json.js";
+const ie = (E, c) => {
+  const { features: l, template: h, isFeatureEnabled: u } = I(), { handleError: m } = R(), { getToken: b, getCustomFonts: w, getSyncModulesStatus: k } = H(), { handleEvent: T } = U(), { getStripoBlocksConfig: V } = D(), _ = async (i, n = [], r = !1) => {
+    var g, y, S;
+    const e = C(), { html: p, css: a } = i, { baseBlocks: o, extensions: d } = await V(), f = ((g = l.value) == null ? void 0 : g.displayConditions) ?? !0, v = ((y = l.value) == null ? void 0 : y.modulesDisabled) ?? !1, M = ((S = h.value) == null ? void 0 : S.forceRecreate) ?? !1;
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
-        metadata: C,
-        html: m,
+        metadata: E,
+        html: p,
         css: a,
-        forceRecreate: v,
+        forceRecreate: M,
         locale: "en",
         undoButtonSelector: "#guido__undo-button",
         redoButtonSelector: "#guido__redo-button",
         mobileViewButtonSelector: ".guido__view-option-selection-mobile",
         desktopViewButtonSelector: ".guido__view-option-selection-desktop",
         codeEditorButtonSelector: "#guido__code-button",
-        customAppearanceMergetags: !0,
+        customAppearanceMergetags: !u("liquidSyntax"),
         customAppearanceMergetagsBorderColor: "#f1f3fe",
         customAppearanceMergetagsBackgroundColor: "#f1f3fe",
-        customViewStyles: q,
-        conditionsEnabled: p,
-        customConditionsEnabled: p,
-        conditionCategories: H,
+        customViewStyles: O,
+        conditionsEnabled: f,
+        customConditionsEnabled: f,
+        conditionCategories: x,
         enableXSSSecurity: !0,
-        modulesDisabled: B,
+        modulesDisabled: v,
         syncModulesEnabled: r,
         messageSettingsEnabled: !0,
         displayGmailAnnotations: !0,
@@ -52,25 +52,28 @@ const oe = (C, c) => {
         },
         mergeTags: [
           {
-            entries: x(c.preselectedDynamicContentList)
+            entries: L(
+              c.preselectedDynamicContentList,
+              u("liquidSyntax")
+            )
           }
         ],
         async onTokenRefreshRequest(t) {
           try {
-            const s = await h();
+            const s = await b();
             t(s);
           } catch (s) {
-            u(s, "Failed to refresh token");
+            m(s, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
-            const { importCss: t } = I(), { activateCustomViewStyles: s, updateTimerInClonedTemplate: M } = A();
-            t(), s(), M(), c.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
+            const { importCss: t } = P(), { activateCustomViewStyles: s, updateTimerInClonedTemplate: A } = F();
+            t(), s(), A(), c.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
               e.hasChanges = !1;
             }, 1e3);
           } catch (t) {
-            u(t, "Failed to load custom interface appearance");
+            m(t, "Failed to load custom interface appearance");
           }
         },
         onCodeEditorVisibilityChanged(t) {
@@ -85,23 +88,23 @@ const oe = (C, c) => {
         onDataChanged() {
           e.hasChanges = !0;
         },
-        onEvent: k,
+        onEvent: T,
         ignoreClickOutsideSelectors: [
           "#guido-dynamic-content-modal",
           ".in-on-board-wrapper",
           ".in-drawer__container"
         ],
         extensions: d,
-        localePatch: R
+        localePatch: q
       }
     );
-  }, _ = (i) => new Promise((n, r) => {
+  }, B = (i) => new Promise((n, r) => {
     var d;
     if (document.getElementById("UiEditorScript")) {
       i(), n();
       return;
     }
-    const e = L.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, o = document.createElement("script");
+    const e = $.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, o = document.createElement("script");
     o.id = "UiEditorScript", o.type = "module", o.src = a, o.onload = () => {
       i(), n();
     }, o.onerror = () => {
@@ -109,15 +112,15 @@ const oe = (C, c) => {
     }, document.body.appendChild(o);
   });
   return { initPlugin: async (i) => {
-    await _(async () => {
-      const n = S(), [r, e] = await Promise.all([
+    await B(async () => {
+      const n = C(), [r, e] = await Promise.all([
         w(),
-        b()
+        k()
       ]);
-      n.syncModulesEnabled = e, await V(i, r, e);
+      n.syncModulesEnabled = e, await _(i, r, e);
     });
   } };
 };
 export {
-  oe as useStripo
+  ie as useStripo
 };

package/dist/composables/validators/useLiquidValidator.js

@@ -0,0 +1,36 @@
+import { ToasterTypeOptions as i } from "../../enums/toaster.js";
+import { base64EncodeWithSpecialChars as d } from "../../utils/base64.js";
+import { useHttp as u } from "../useHttp.js";
+import { useToaster as m } from "../useToaster.js";
+import { useTranslations as p } from "../useTranslations.js";
+const x = () => {
+  const { post: o } = u(), { showToaster: a } = m(), r = p();
+  return { validateLiquidSyntax: async (n) => {
+    var s;
+    const e = await o("/newsletter/contents/validate-syntax", [{
+      identifier: "default",
+      syntax: "liquid",
+      contents: {
+        subject: null,
+        preheader: null,
+        html: d(n),
+        ampHtml: null
+      }
+    }]);
+    if (!Array.isArray(e.data)) {
+      const l = e.data;
+      return a({
+        type: i.Alert,
+        message: l.message ?? r("journey-builder.liquid-validation-failed")
+      }), !1;
+    }
+    const [t] = e.data;
+    return t != null && t.success ? !0 : (a({
+      type: i.Alert,
+      message: ((s = t == null ? void 0 : t.errors) == null ? void 0 : s.html) ?? r("journey-builder.liquid-validation-failed")
+    }), !1);
+  } };
+};
+export {
+  x as useLiquidValidator
+};

package/dist/config/compiler/liquidCompilerRules.js

@@ -0,0 +1,15 @@
+import { COUPON_PLACEHOLDER_LIQUID as e, COUPON_PLACEHOLDER_DEFAULT as i } from "../../extensions/Blocks/CouponBlock/template.js";
+const o = [
+  {
+    id: "liquid-coupon-code",
+    description: "Replace legacy coupon placeholder with liquid syntax",
+    type: "replace",
+    search: i,
+    replacement: e,
+    replaceAll: !0,
+    priority: 50
+  }
+];
+export {
+  o as liquidCompilerRules
+};

package/dist/config/migrator/checkboxMigrator.js

@@ -11,6 +11,8 @@ class f {
     try {
       const e = this.parser.parseFromString(t, "text/html"), i = e.querySelectorAll("td.checkbox-block");
       return i.length === 0 ? t : (i.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>`,
           "text/html"
@@ -22,7 +24,7 @@ class f {
     }
   }
   extractTextFromElement(t, e) {
-    var o, u;
+    var o, d;
     const i = t.querySelector(`.${e}`);
     if (!i)
       return {
@@ -41,13 +43,13 @@ class f {
         align: i.getAttribute("align") || "left",
         styles: ""
       };
-    const n = ((u = r.textContent) == null ? void 0 : u.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"]), d = this.convertInlineToBlock(g);
+    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: d
+      styles: u
     };
   }
   buildTextBlock(t) {

package/dist/config/migrator/radioButtonMigrator.js

@@ -1,28 +1,30 @@
-var b = Object.defineProperty;
-var f = (r, t, e) => t in r ? b(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var x = (r, t, e) => f(r, typeof t != "symbol" ? t + "" : t, e);
+var x = Object.defineProperty;
+var f = (r, t, e) => t in r ? x(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var b = (r, t, e) => f(r, typeof t != "symbol" ? t + "" : t, e);
 import h from "../../extensions/Blocks/RadioButton/template.js";
 class T {
   constructor() {
-    x(this, "parser");
+    b(this, "parser");
     this.parser = new DOMParser();
   }
   migrate(t) {
     try {
       const e = this.parser.parseFromString(t, "text/html"), i = e.querySelectorAll("td.radio-button-block");
       return i.length === 0 ? t : (i.forEach((s) => {
-        const o = s.getAttribute("id"), l = this.extractTextFromElement(s, "ins-title"), a = this.extractTextFromElement(s, "ins-description"), p = this.extractTextFromElement(s, "ins-subscribe"), u = this.extractTextFromElement(s, "ins-unsubscribe"), d = this.buildTextBlock(l), g = this.buildTextBlock(a), m = this.buildTextBlock({ ...p, classList: "" }), n = this.buildTextBlock({ ...u, classList: "" }), c = h.replace("{-{-TITLE-}-}", d).replace("{-{-DESCRIPTION-}-}", g).replace("{-{-YES-}-}", m).replace("{-{-NO-}-}", n), y = this.parser.parseFromString(
+        if (s.classList.contains("radio-button-v2"))
+          return;
+        const n = s.getAttribute("id"), l = this.extractTextFromElement(s, "ins-title"), a = this.extractTextFromElement(s, "ins-description"), p = this.extractTextFromElement(s, "ins-subscribe"), u = this.extractTextFromElement(s, "ins-unsubscribe"), d = this.buildTextBlock(l), g = this.buildTextBlock(a), m = this.buildTextBlock({ ...p, classList: "" }), o = this.buildTextBlock({ ...u, classList: "" }), c = h.replace("{-{-TITLE-}-}", d).replace("{-{-DESCRIPTION-}-}", g).replace("{-{-YES-}-}", m).replace("{-{-NO-}-}", o), y = this.parser.parseFromString(
           `<table id="tempDoc"><tbody><tr>${c}</tr></tbody></table>`,
           "text/html"
         ).querySelector(".radio-button-v2");
-        y && s.parentNode && (y.setAttribute("id", o || ""), s.parentNode.replaceChild(y, s));
+        y && s.parentNode && (y.setAttribute("id", n || ""), s.parentNode.replaceChild(y, s));
       }), e.documentElement.outerHTML);
     } catch (e) {
       return console.error("RadioButtonMigrator failed:", e), t;
     }
   }
   extractTextFromElement(t, e) {
-    var n, c;
+    var o, c;
     const i = t.querySelector(`.${e}`);
     if (!i)
       return {
@@ -36,16 +38,16 @@ class T {
     const s = i.querySelector("p");
     if (!s)
       return {
-        text: ((n = i.textContent) == null ? void 0 : n.trim()) || (e === "ins-title" ? "Title" : "Description"),
+        text: ((o = i.textContent) == null ? void 0 : o.trim()) || (e === "ins-title" ? "Title" : "Description"),
         isBold: !1,
         isItalic: !1,
         align: i.getAttribute("align") || "left",
         styles: "",
         classList: ""
       };
-    const o = ((c = s.textContent) == null ? void 0 : c.trim()) || (e === "ins-title" ? "Title" : "Description"), l = s.getAttribute("style") || "", a = i.getAttribute("align") || s.getAttribute("align") || "left", p = /font-weight\s*:\s*bold/i.test(l) || !!s.querySelector("b, strong"), u = /font-style\s*:\s*italic/i.test(l) || !!s.querySelector("i, em"), d = this.removeStyleProperties(l, ["font-weight", "font-style"]), g = this.convertInlineToBlock(d), m = i.getAttribute("class") || "";
+    const n = ((c = s.textContent) == null ? void 0 : c.trim()) || (e === "ins-title" ? "Title" : "Description"), l = s.getAttribute("style") || "", a = i.getAttribute("align") || s.getAttribute("align") || "left", p = /font-weight\s*:\s*bold/i.test(l) || !!s.querySelector("b, strong"), u = /font-style\s*:\s*italic/i.test(l) || !!s.querySelector("i, em"), d = this.removeStyleProperties(l, ["font-weight", "font-style"]), g = this.convertInlineToBlock(d), m = i.getAttribute("class") || "";
     return {
-      text: o,
+      text: n,
       isBold: p,
       isItalic: u,
       align: a,
@@ -66,8 +68,8 @@ class T {
         `;
   }
   removeStyleProperties(t, e) {
-    return t ? e.reduce((s, o) => {
-      const l = new RegExp(`${o}\\s*:\\s*[^;]*;?`, "gi");
+    return t ? e.reduce((s, n) => {
+      const l = new RegExp(`${n}\\s*:\\s*[^;]*;?`, "gi");
       return s.replace(l, "");
     }, t).replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim() : "";
   }

package/dist/extensions/Blocks/CouponBlock/template.js

@@ -1,29 +1,40 @@
-import { BlockType as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { COUPON_BLOCK_ID as e } from "./block.js";
-const t = `
-    <${o.BLOCK_TEXT}
+import { useConfig as n } from "../../../composables/useConfig.js";
+import { BlockType as e } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { COUPON_BLOCK_ID as t } from "./block.js";
+const c = "{@COUPON_CODE}", s = "{{ins_coupon_code}}";
+function l() {
+  const { isFeatureEnabled: o } = n();
+  return o("liquidSyntax") ? s : c;
+}
+function i(o) {
+  return `
+    <${e.BLOCK_TEXT}
         class="coupon-block ins-coupon-code coupon-block-v2 es-p10"
         align="center"
-        esd-extension-block-id="${e}">
+        esd-extension-block-id="${t}">
         <p
             path="1"
             contenteditable="false"
             style="font-size: 16px; color: #333333;">
-            <strong path="1,0">{@COUPON_CODE}</strong>
+            <strong path="1,0">${o}</strong>
         </p>
-    </${o.BLOCK_TEXT}>
-    `, l = `
+    </${e.BLOCK_TEXT}>
+    `;
+}
+const u = `
     <td
         class="coupon-block coupon-block-v2 ins-coupon-code esd-block-text esd-extension-block"
-        esd-extension-block-id="${e}"
+        esd-extension-block-id="${t}"
     >
         <p class="ins-title" contenteditable="false">{@COUPON_CODE}</p>
     </td>
 `;
-function s() {
-  return t;
+function d() {
+  return i(l());
 }
 export {
-  l as default,
-  s as getDefaultTemplate
+  c as COUPON_PLACEHOLDER_DEFAULT,
+  s as COUPON_PLACEHOLDER_LIQUID,
+  u as default,
+  d as getDefaultTemplate
 };

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

@@ -1,16 +1,17 @@
 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 {
+import { useConfig as d } from "../../composables/useConfig.js";
+import { mergeTagToDynamicContent as m, dynamicContentToMergeTags as u } from "../../utils/genericUtil.js";
+import { UIElement as h, UIElementType as a, UEAttr as T, UIElementTagRegistry as y } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { ExternalMergeTagsLibrary as C } from "./dynamic-content-modal.js";
+const l = "external-dynamic-content-ui-element", L = "button-add-dynamic-content";
+class w extends y {
   registerUiElements(s) {
     s[a.MERGETAGS] = l;
   }
 }
-class b extends u {
+class f extends h {
   constructor() {
     super(...arguments);
     r(this, "mergeTagsButton", null);
@@ -43,7 +44,7 @@ class b extends u {
   onAttributeUpdated(t, e) {
     if (t !== "mergeTag" || !(e != null && e.value))
       return;
-    const n = d(e), i = this._getLastClickedPosition();
+    const n = m(e), i = this._getLastClickedPosition();
     this.lastClickedElement = null, this.lastClickedFrame = null, this._openDynamicContentLibrary(n, i);
   }
   openMergeTagLibrary() {
@@ -55,10 +56,14 @@ class b extends u {
    * Dispatches event with dynamic content data and position
    */
   _openDynamicContentLibrary(t, e) {
-    this.mergeTagsLibrary || (this.mergeTagsLibrary = new y()), this.mergeTagsLibrary.openMergeTagsLibrary(
+    this.mergeTagsLibrary || (this.mergeTagsLibrary = new C()), this.mergeTagsLibrary.openMergeTagsLibrary(
       t,
       (n) => {
-        n.text && n.value ? this.api.triggerValueChange(m([n])[0]) : this.api.triggerValueChange(null);
+        if (n.text && n.value) {
+          const { isFeatureEnabled: i } = d();
+          this.api.triggerValueChange(u([n], i("liquidSyntax"))[0]);
+        } else
+          this.api.triggerValueChange(null);
       },
       e
     );
@@ -142,7 +147,7 @@ class b extends u {
                 <${a.BUTTON} 
                     id="guido__btn-add-dynamic-content" 
                     class="btn btn-primary"
-                    ${h.BUTTON.name}="${C}">
+                    ${T.BUTTON.name}="${L}">
                         <${a.ICON} src="plus" class="icon icon-button color-primary">
                         </${a.ICON}>
                         ${this.api.translate("Add Dynamic Content")}
@@ -151,6 +156,6 @@ class b extends u {
   }
 }
 export {
-  p as DynamicContentTagRegistry,
-  b as DynamicContentUiElementExtension
+  w as DynamicContentTagRegistry,
+  f as DynamicContentUiElementExtension
 };

package/dist/guido.css

@@ -1 +1 @@
-.gap-16[data-v-3b53a736],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-0a732fce] .in-progress-wrapper__progress p span:last-child{display:none!important}.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}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.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}.editor-actions[data-v-acff76a8]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-a26d7792]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-a26d7792]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-a26d7792]{height:calc(100vh - 75px)}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-df672485]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-df672485]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-df672485]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-df672485]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-df672485]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-29b9af29] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-d073b1dc] .vueperslides__bullets{pointer-events:none!important}[data-v-d073b1dc] .vueperslides__parallax-wrapper{height:110px!important}
+.gap-16[data-v-3b53a736],.gap-16[data-v-0e1b0c54]{gap:16px}[data-v-cd76c125] .in-button-v2__wrapper{line-height:0}[data-v-22226124] .in-segments-wrapper__button_selected,[data-v-22226124] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb;color:#0010ac;border-color:#0010ac}[data-v-2cb418af] .in-progress-wrapper__progress p span:last-child{display:none!important}[data-v-2cb418af] .in-progress-description-status{display:none!important}.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}.editor-toolbar[data-v-173c3a40]{gap:4px}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history[data-v-64c52560]{gap:8px}.version-history__toolbar[data-v-64c52560]{gap:4px}.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}.editor-actions[data-v-acff76a8]{gap:4px}.header-wrapper[data-v-5c02dcc7]{min-width:1000px}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-a26d7792]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-a26d7792]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-a26d7792]{height:calc(100vh - 75px)}[data-v-293f1c47] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-df672485]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-df672485]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-df672485]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-df672485]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-df672485]{object-fit:cover;transform:scale(1)}[data-v-43c617a7] .guido__verion-history-view-option-selection-desktop svg,[data-v-43c617a7] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-43c617a7] .in-segments-wrapper__button_selected,[data-v-43c617a7] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-c3fd5d4b]{gap:16px}.desktop-browser-header[data-v-d86c5af5]{height:79px;min-height:79px}.desktop-browser-header__left[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:378px}.desktop-browser-header__center[data-v-d86c5af5]{height:79px;background-repeat:repeat-x;background-size:auto 100%;background-position:left top}.desktop-browser-header__right[data-v-d86c5af5]{-webkit-user-drag:none;height:79px;width:112px}.desktop-preview[data-v-988f8da6]{min-width:602px;height:70vh;min-height:583px;border-radius:10px}.desktop-preview iframe[data-v-988f8da6]{min-height:504px}.iframe-wrapper[data-v-e0424e99]{width:258px}.iframe-scaled[data-v-e0424e99]{width:320px;height:124.0310077519%;transform:scale(.80625);transform-origin:top left}.cropped-text[data-v-eb3d05d7]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-preview-wrapper__phone[data-v-3f472f96]{width:282px}.mobile-preview-wrapper__phone img[data-v-3f472f96]{object-fit:cover;border-radius:44px}.mobile-preview-wrapper__content[data-v-3f472f96]{width:258px;height:450px;left:12px}[data-v-29b9af29] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-d073b1dc] .vueperslides__bullets{pointer-events:none!important}[data-v-d073b1dc] .vueperslides__parallax-wrapper{height:110px!important}

package/dist/src/@types/config/index.d.ts

@@ -8,7 +8,7 @@
  * - Validation utilities
  */
 export { MessageType, ProductType, GuidoConfigSchema, IdentitySchema, PartnerSchema, TemplateSchema, EditorSchema, UISchema, FeaturesSchema, BlocksSchema, CompilerSchema, CallbacksSchema, DynamicContentSchema, EmailHeaderSchema, DefaultBlockTypeSchema, CustomBlockTypeSchema, CompilerRuleSchema, CompilerRuleTypeSchema, ReplaceRuleSchema, RegexRuleSchema, RemoveRuleSchema, CustomRuleSchema, } from './schemas';
-export type { GuidoConfig, GuidoConfigInput, IdentityConfig, IdentityConfigInput, PartnerConfig, PartnerConfigInput, TemplateConfig, TemplateConfigInput, EditorConfig, EditorConfigInput, UIConfig, UIConfigInput, FeaturesConfig, FeaturesConfigInput, BlocksConfig, BlocksConfigInput, CompilerConfig, CompilerConfigInput, CallbacksConfig, CallbacksConfigInput, ExternalValidationHandler, EmailHeader, DynamicContent, DefaultBlockType, CustomBlockType, BlockType, FeatureName, CompilerRule, ReplaceRule, RegexRule, RemoveRule, CustomRule, DeepPartial, ConfigOverrides, } from './types';
+export type { GuidoConfig, GuidoConfigInput, IdentityConfig, IdentityConfigInput, PartnerConfig, PartnerConfigInput, FallbackFont, TemplateConfig, TemplateConfigInput, EditorConfig, EditorConfigInput, UIConfig, UIConfigInput, FeaturesConfig, FeaturesConfigInput, BlocksConfig, BlocksConfigInput, CompilerConfig, CompilerConfigInput, CallbacksConfig, CallbacksConfigInput, ExternalValidationHandler, EmailHeader, DynamicContent, DefaultBlockType, CustomBlockType, BlockType, FeatureName, CompilerRule, ReplaceRule, RegexRule, RemoveRule, CustomRule, DeepPartial, ConfigOverrides, } from './types';
 export { DEFAULT_EMAIL_HEADER, DEFAULT_TEMPLATE, DEFAULT_EDITOR, DEFAULT_UI, DEFAULT_FEATURES, DEFAULT_BLOCKS, DEFAULT_COMPILER, DEFAULT_PRODUCT_TYPE, DEFAULT_MESSAGE_TYPE, DEFAULT_USERNAME, EDITOR_TYPE, TEST_PARTNERS, isTestPartner, } from './defaults';
 export { validateConfig, parseConfig, parseConfigSafe, getValidationErrors, isValidConfig, validateIdentity, validatePartner, } from './validator';
 export type { ValidationResult, ValidationError, } from './validator';

package/dist/src/@types/config/schemas.d.ts

@@ -47,6 +47,12 @@ export declare const IdentitySchema: v.ObjectSchema<{
 /**
  * Partner configuration - organization and product context
  */
+export declare const FallbackFontSchema: v.ObjectSchema<{
+    /** Fallback font name (e.g., "Georgia") */
+    readonly name: v.StringSchema<undefined>;
+    /** Fallback font family (e.g., "serif" or "sans-serif") */
+    readonly family: v.StringSchema<undefined>;
+}, undefined>;
 export declare const PartnerSchema: v.ObjectSchema<{
     /** Partner/organization name (required) */
     readonly name: v.SchemaWithPipe<readonly [v.StringSchema<undefined>, v.MinLengthAction<string, 1, "partner.name is required">]>;
@@ -56,6 +62,13 @@ export declare const PartnerSchema: v.ObjectSchema<{
     readonly messageType: v.OptionalSchema<v.PicklistSchema<[1, 2], undefined>, 1>;
     /** Display name for the current user */
     readonly username: v.OptionalSchema<v.StringSchema<undefined>, "Guido User">;
+    /** Fallback font settings from partner settings — used to match backend size calculation */
+    readonly fallbackFont: v.OptionalSchema<v.ObjectSchema<{
+        /** Fallback font name (e.g., "Georgia") */
+        readonly name: v.StringSchema<undefined>;
+        /** Fallback font family (e.g., "serif" or "sans-serif") */
+        readonly family: v.StringSchema<undefined>;
+    }, undefined>, undefined>;
 }, undefined>;
 /**
  * Dynamic content item schema
@@ -163,6 +176,8 @@ export declare const FeaturesSchema: v.ObjectSchema<{
     readonly unsubscribe: v.OptionalSchema<v.BooleanSchema<undefined>, true>;
     /** Disable modules panel in the editor */
     readonly modulesDisabled: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
+    /** Enable Liquid template syntax */
+    readonly liquidSyntax: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
 }, undefined>;
 /**
  * Default block types available in Stripo
@@ -403,6 +418,13 @@ export declare const GuidoConfigSchema: v.ObjectSchema<{
         readonly messageType: v.OptionalSchema<v.PicklistSchema<[1, 2], undefined>, 1>;
         /** Display name for the current user */
         readonly username: v.OptionalSchema<v.StringSchema<undefined>, "Guido User">;
+        /** Fallback font settings from partner settings — used to match backend size calculation */
+        readonly fallbackFont: v.OptionalSchema<v.ObjectSchema<{
+            /** Fallback font name (e.g., "Georgia") */
+            readonly name: v.StringSchema<undefined>;
+            /** Fallback font family (e.g., "serif" or "sans-serif") */
+            readonly family: v.StringSchema<undefined>;
+        }, undefined>, undefined>;
     }, undefined>;
     /** Template content and presets */
     readonly template: v.OptionalSchema<v.ObjectSchema<{
@@ -477,6 +499,8 @@ export declare const GuidoConfigSchema: v.ObjectSchema<{
         readonly unsubscribe: v.OptionalSchema<v.BooleanSchema<undefined>, true>;
         /** Disable modules panel in the editor */
         readonly modulesDisabled: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
+        /** Enable Liquid template syntax */
+        readonly liquidSyntax: v.OptionalSchema<v.BooleanSchema<undefined>, false>;
     }, undefined>, {}>;
     /** Block configuration */
     readonly blocks: v.OptionalSchema<v.ObjectSchema<{

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

@@ -5,7 +5,7 @@
  * This ensures type definitions are always in sync with validation.
  * @module @types/config/types
  */
-import type { GuidoConfigSchema, IdentitySchema, PartnerSchema, TemplateSchema, EditorSchema, UISchema, FeaturesSchema, BlocksSchema, CompilerSchema, CallbacksSchema, DynamicContentSchema, EmailHeaderSchema, CompilerRuleSchema, ReplaceRuleSchema, RegexRuleSchema, RemoveRuleSchema, CustomRuleSchema, DefaultBlockTypeSchema, CustomBlockTypeSchema, ExternalValidationHandler } from './schemas';
+import type { GuidoConfigSchema, IdentitySchema, PartnerSchema, TemplateSchema, EditorSchema, UISchema, FeaturesSchema, BlocksSchema, CompilerSchema, CallbacksSchema, DynamicContentSchema, EmailHeaderSchema, CompilerRuleSchema, ReplaceRuleSchema, RegexRuleSchema, RemoveRuleSchema, CustomRuleSchema, DefaultBlockTypeSchema, CustomBlockTypeSchema, FallbackFontSchema, ExternalValidationHandler } from './schemas';
 import type * as v from 'valibot';
 /**
  * Complete validated Guido configuration.
@@ -29,6 +29,8 @@ export type GuidoConfig = v.InferOutput<typeof GuidoConfigSchema>;
 export type IdentityConfig = v.InferOutput<typeof IdentitySchema>;
 /** Partner configuration (name, productType, messageType, username) */
 export type PartnerConfig = v.InferOutput<typeof PartnerSchema>;
+/** Fallback font settings for backend size calculation alignment */
+export type FallbackFont = v.InferOutput<typeof FallbackFontSchema>;
 /** Template configuration (html, css, dynamic content, unsubscribe pages) */
 export type TemplateConfig = v.InferOutput<typeof TemplateSchema>;
 /** Editor configuration (locale, translations, migration date, email header) */

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

@@ -17,6 +17,10 @@ export declare const useConfig: () => {
             productType: 60 | 49 | 97;
             messageType: 1 | 2;
             username: string;
+            fallbackFont?: {
+                name: string;
+                family: string;
+            } | undefined;
         };
         template: {
             html: string;
@@ -57,6 +61,7 @@ export declare const useConfig: () => {
             displayConditions: boolean;
             unsubscribe: boolean;
             modulesDisabled: boolean;
+            liquidSyntax: boolean;
         };
         blocks: {
             excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];
@@ -109,6 +114,10 @@ export declare const useConfig: () => {
         productType: 60 | 49 | 97;
         messageType: 1 | 2;
         username: string;
+        fallbackFont?: {
+            name: string;
+            family: string;
+        } | undefined;
     } | null>;
     template: import("vue").ComputedRef<{
         html: string;
@@ -149,6 +158,7 @@ export declare const useConfig: () => {
         displayConditions: boolean;
         unsubscribe: boolean;
         modulesDisabled: boolean;
+        liquidSyntax: boolean;
     } | null>;
     blocks: import("vue").ComputedRef<{
         excludeDefaults: ("amp-accordion" | "amp-carousel" | "amp-form-controls" | "banner-block" | "button-block" | "html-block" | "image-block" | "menu-block" | "social-block" | "spacer-block" | "text-block" | "timer-block" | "video-block")[];

package/dist/src/composables/validators/useLiquidValidator.d.ts

@@ -0,0 +1,3 @@
+export declare const useLiquidValidator: () => {
+    validateLiquidSyntax: (compiledHtml: string) => Promise<boolean>;
+};

package/dist/src/config/compiler/liquidCompilerRules.d.ts

@@ -0,0 +1,2 @@
+import type { CompilerRule } from '@@/Types/html-compiler';
+export declare const liquidCompilerRules: CompilerRule[];

package/dist/src/extensions/Blocks/CouponBlock/template.d.ts

@@ -1,3 +1,5 @@
+export declare const COUPON_PLACEHOLDER_DEFAULT = "{@COUPON_CODE}";
+export declare const COUPON_PLACEHOLDER_LIQUID = "{{ins_coupon_code}}";
 declare const migrationTemplate = "\n    <td\n        class=\"coupon-block coupon-block-v2 ins-coupon-code esd-block-text esd-extension-block\"\n        esd-extension-block-id=\"coupon-block\"\n    >\n        <p class=\"ins-title\" contenteditable=\"false\">{@COUPON_CODE}</p>\n    </td>\n";
 export declare function getDefaultTemplate(): string;
 export default migrationTemplate;