@useinsider/guido 3.7.0-beta.2037cb1 → 3.7.0-beta.24a845f

package/dist/composables/useStripo.js

@@ -1,42 +1,42 @@
 import { useActionsApi as D } from "./useActionsApi.js";
-import { useBlocksConfig as P } from "./useBlocksConfig.js";
-import { useConfig as I } from "./useConfig.js";
+import { useBlocksConfig as I } from "./useBlocksConfig.js";
+import { useConfig as P } from "./useConfig.js";
 import { useCustomInterfaceAppearance as U } from "./useCustomInterfaceAppearance.js";
 import { useFullStoryBridge as R } from "./useFullStoryBridge.js";
 import { useStripoEventHandler as q } from "./useStripoEventHandler.js";
 import { useToaster as x } from "./useToaster.js";
 import { localePatch as H } from "../config/i18n/index.js";
 import { useStripoApi as O } from "../services/stripoApi.js";
-import z from "../static/styles/customEditorStyle.css.js";
-import { useEditorStore as h } from "../stores/editor.js";
-import { dynamicContentToMergeTags as L } from "../utils/genericUtil.js";
-import $ from "../package.json.js";
-const se = (E, c) => {
-  const { features: u, template: C, isFeatureEnabled: m } = I(), { handleError: l } = x(), { getToken: w, getCustomFonts: b, getSyncModulesStatus: F } = O(), { handleEvent: k } = q(), { getStripoBlocksConfig: v } = P(), B = async (s, r = [], o = !1) => {
+import j from "../static/styles/customEditorStyle.css.js";
+import { useEditorStore as E } from "../stores/editor.js";
+import { dynamicContentToMergeTags as z } from "../utils/genericUtil.js";
+import L from "../package.json.js";
+const se = (C, l) => {
+  const { features: c, template: h, isFeatureEnabled: u } = P(), { handleError: m } = x(), { getToken: w, getCustomFonts: b, getSyncModulesStatus: k } = O(), { handleEvent: F } = q(), { getStripoBlocksConfig: B } = I(), T = async (i, r = [], s = !1) => {
     var g, S, y;
-    const e = h(), { html: p, css: a } = s, { baseBlocks: i, extensions: d } = await v(), f = ((g = u.value) == null ? void 0 : g.displayConditions) ?? !0, V = ((S = u.value) == null ? void 0 : S.modulesDisabled) ?? !1, _ = ((y = C.value) == null ? void 0 : y.forceRecreate) ?? !1;
+    const e = E(), { html: p, css: a } = i, { baseBlocks: o, extensions: d } = await B(), f = ((g = c.value) == null ? void 0 : g.displayConditions) ?? !0, _ = ((S = c.value) == null ? void 0 : S.modulesDisabled) ?? !1, v = ((y = h.value) == null ? void 0 : y.forceRecreate) ?? !1;
     window.UIEditor.initEditor(
       document.querySelector("#guido-editor"),
       {
-        metadata: E,
+        metadata: C,
         html: p,
         css: a,
-        forceRecreate: _,
+        forceRecreate: v,
         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: !m("liquidSyntax"),
+        customAppearanceMergetags: !u("liquidSyntax"),
         customAppearanceMergetagsBorderColor: "#f1f3fe",
         customAppearanceMergetagsBackgroundColor: "#f1f3fe",
-        customViewStyles: z,
+        customViewStyles: j,
         conditionsEnabled: f,
         customConditionsEnabled: f,
         enableXSSSecurity: !0,
-        modulesDisabled: V,
-        syncModulesEnabled: o,
+        modulesDisabled: _,
+        syncModulesEnabled: s,
         messageSettingsEnabled: !0,
         displayGmailAnnotations: !0,
         displayHiddenPreheader: !1,
@@ -45,7 +45,7 @@ const se = (E, c) => {
         selectElementAfterDrop: !0,
         sameFontSizeForOutlook: !0,
         allowedScriptSourceDomains: "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com",
-        ...i ? { baseBlocks: i } : {},
+        ...o ? { baseBlocks: o } : {},
         editorFonts: {
           showDefaultStandardFonts: !0,
           showDefaultNotStandardFonts: !0,
@@ -53,9 +53,9 @@ const se = (E, c) => {
         },
         mergeTags: [
           {
-            entries: L(
-              c.preselectedDynamicContentList,
-              m("liquidSyntax")
+            entries: z(
+              l.preselectedDynamicContentList,
+              u("liquidSyntax")
             )
           }
         ],
@@ -64,17 +64,17 @@ const se = (E, c) => {
             const n = await w();
             t(n);
           } catch (n) {
-            l(n, "Failed to refresh token");
+            m(n, "Failed to refresh token");
           }
         },
         onTemplateLoaded() {
           try {
             const { importCss: t } = U(), { activateCustomViewStyles: n, updateTimerInClonedTemplate: M } = D(), { injectFullStory: A } = R();
-            t(), n(), A(), M(), c.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
+            t(), n(), A(), M(), l.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
               e.hasChanges = !1;
             }, 1e3);
           } catch (t) {
-            l(t, "Failed to load custom interface appearance");
+            m(t, "Failed to load custom interface appearance");
           }
         },
         onCodeEditorVisibilityChanged(t) {
@@ -89,7 +89,7 @@ const se = (E, c) => {
         onDataChanged() {
           e.hasChanges = !0;
         },
-        onEvent: k,
+        onEvent: F,
         ignoreClickOutsideSelectors: [
           "#guido-dynamic-content-modal",
           ".in-on-board-wrapper",
@@ -99,32 +99,27 @@ const se = (E, c) => {
         localePatch: H
       }
     );
-  }, T = (s) => new Promise((r, o) => {
+  }, V = (i) => new Promise((r, s) => {
     var d;
     if (document.getElementById("UiEditorScript")) {
-      Promise.resolve(s()).then(r, o);
+      i(), r();
       return;
     }
-    const e = $.guido, a = `https://email-static.useinsider.com/guido/${(d = e == null ? void 0 : e.stripo) == null ? void 0 : d.version}/UIEditor.js`, i = document.createElement("script");
-    i.id = "UiEditorScript", i.type = "module", i.src = a, i.onload = () => {
-      Promise.resolve(s()).then(r, o);
-    }, i.onerror = () => {
-      o(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
-    }, document.body.appendChild(i);
+    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");
+    o.id = "UiEditorScript", o.type = "module", o.src = a, o.onload = () => {
+      i(), r();
+    }, o.onerror = () => {
+      s(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
+    }, document.body.appendChild(o);
   });
-  return { initPlugin: async (s) => {
-    const r = h();
-    try {
-      await T(async () => {
-        const [o, e] = await Promise.all([
-          b(),
-          F()
-        ]);
-        r.syncModulesEnabled = e, await B(s, o, e);
-      });
-    } catch (o) {
-      r.loadingStatus = !1, l(o, "Failed to load the editor");
-    }
+  return { initPlugin: async (i) => {
+    await V(async () => {
+      const r = E(), [s, e] = await Promise.all([
+        b(),
+        k()
+      ]);
+      r.syncModulesEnabled = e, await T(i, s, e);
+    });
   } };
 };
 export {

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

@@ -1,12 +1,12 @@
 import { BlockId as g } from "../../../enums/block.js";
-import { useOnboardingStore as p } from "../../../stores/onboarding.js";
-import { getMigrationBannerHtml as f } from "../../../utils/migrationBannerHtml.js";
-import { Block as u, BlockCompositionType as I, ModificationDescription as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { useOnboardingStore as u } from "../../../stores/onboarding.js";
+import { getMigrationBannerHtml as p } from "../../../utils/migrationBannerHtml.js";
+import { Block as f, BlockCompositionType as I, ModificationDescription as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
 import { SETTINGS_ENUMS as a, DefaultConfigValues as i } from "./enums/settingsEnums.js";
 import { getDefaultTemplate as C } from "./template.js";
 import { getItemsBlockContainer as y, getItemsBlockConfig as b, getDefaultItemsBlockConfig as h } from "./utils/nodeConfigUtils.js";
 const c = g.Items;
-class E extends u {
+class E extends f {
   getId() {
     return c;
   }
@@ -23,7 +23,7 @@ class E extends u {
     return this.api.translate("Items lets you display personalized products based on user behavior.");
   }
   getSettingsPanelTitleHtml() {
-    return f(
+    return p(
       c,
       this.api.translate("Items"),
       this.api.translate("This block is switched from the Old Version to the New Version. We recommend you check the Items block and test your message to ensure it works properly.")
@@ -42,18 +42,23 @@ class E extends u {
   allowInnerBlocksDND() {
     return !1;
   }
+  // Stripo's Block default is false. Items keeps its full config in nodeConfig
+  // (esd-ext-config), so a saved module is self-contained and restores on re-drop.
+  canBeSavedAsModule() {
+    return !0;
+  }
   onCreated(n) {
     const l = this.api.getDocumentModifier(), r = this.api.getDocumentRootCssNode();
     r.querySelector('[product-attr="imageSrc"] img') || l.modifyCss(r).appendRule('[product-attr="imageSrc"] img {object-fit: contain;}');
-    const e = y(n);
-    if (!e)
+    const t = y(n);
+    if (!t)
       return;
-    const s = e.getNodeConfig(), m = s && Object.keys(s).length > 0, t = b(n);
-    if (t != null && t.initialized)
-      m ? t.blockInstanceId || this.api.getDocumentModifier().modifyHtml(e).setNodeConfig({ ...t, blockInstanceId: String(Date.now()) }).apply(new o("Assign block instance ID to block")) : this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(t).apply(new o("Migrate legacy config to nodeConfig"));
+    const s = t.getNodeConfig(), m = s && Object.keys(s).length > 0, e = b(n);
+    if (e != null && e.initialized)
+      m ? e.blockInstanceId || this.api.getDocumentModifier().modifyHtml(t).setNodeConfig({ ...e, blockInstanceId: String(Date.now()) }).apply(new o("Assign block instance ID to block")) : this.api.getDocumentModifier().modifyHtml(t).setNodeConfig(e).apply(new o("Migrate legacy config to nodeConfig"));
     else {
       const d = h();
-      this.api.getDocumentModifier().modifyHtml(e).setNodeConfig(d).apply(new o("Initialize Items block with default configuration")), p().startOnboarding("itemsOnboarding");
+      this.api.getDocumentModifier().modifyHtml(t).setNodeConfig(d).apply(new o("Initialize Items block with default configuration")), u().startOnboarding("itemsOnboarding");
     }
   }
 }

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

@@ -47,8 +47,11 @@ class q extends R {
   allowInnerBlocksDND() {
     return !1;
   }
+  // Full config persists in nodeConfig (esd-ext-config) and is rebuilt at
+  // compile time by hydrateRecommendationStoreFromRawHtml, so a saved module
+  // restores its campaign/layout/styles when re-dropped into another email.
   canBeSavedAsModule() {
-    return !1;
+    return !0;
   }
   /**
    * Returns the template HTML for a new recommendation block.

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

@@ -24,5 +24,6 @@ export declare class ItemsBlock extends Block {
     getSettingsPanelTitleHtml(): string;
     getTemplate(): string;
     allowInnerBlocksDND(): boolean;
+    canBeSavedAsModule(): boolean;
     onCreated(node: ImmutableHtmlNode): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useinsider/guido",
-  "version": "3.7.0-beta.2037cb1",
+  "version": "3.7.0-beta.24a845f",
   "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",