@useinsider/guido 3.2.0-beta.d3596a1 → 3.2.0-beta.d5a560f
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/composables/useFullStoryBridge.js +14 -0
- package/dist/composables/useStripo.js +44 -42
- package/dist/config/migrator/radioButtonMigrator.js +49 -60
- package/dist/extensions/Blocks/RadioButton/template.js +1 -1
- package/dist/src/composables/useFullStoryBridge.d.ts +11 -0
- package/dist/src/extensions/Blocks/RadioButton/template.d.ts +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
const c = "https://email-static.useinsider.com/guido/guido-fullstory.js", u = () => ({ injectFullStory: () => {
|
|
2
|
+
var n;
|
|
3
|
+
const s = window;
|
|
4
|
+
if (typeof s._fs_org != "string" || !s._fs_org)
|
|
5
|
+
return;
|
|
6
|
+
const r = document.querySelector("ui-editor"), o = (n = r == null ? void 0 : r.shadowRoot) == null ? void 0 : n.querySelector("iframe"), e = o == null ? void 0 : o.contentDocument;
|
|
7
|
+
if (!e || e.querySelector('script[data-fullstory-bridge="true"]'))
|
|
8
|
+
return;
|
|
9
|
+
const t = e.createElement("script");
|
|
10
|
+
t.src = c, t.async = !0, t.crossOrigin = "anonymous", t.dataset.fullstoryBridge = "true", e.head.appendChild(t);
|
|
11
|
+
} });
|
|
12
|
+
export {
|
|
13
|
+
u as useFullStoryBridge
|
|
14
|
+
};
|
|
@@ -1,27 +1,28 @@
|
|
|
1
|
-
import { useActionsApi as
|
|
2
|
-
import { useBlocksConfig as
|
|
3
|
-
import { useConfig as
|
|
4
|
-
import { useCustomInterfaceAppearance as
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import
|
|
1
|
+
import { useActionsApi as D } from "./useActionsApi.js";
|
|
2
|
+
import { useBlocksConfig as I } from "./useBlocksConfig.js";
|
|
3
|
+
import { useConfig as P } from "./useConfig.js";
|
|
4
|
+
import { useCustomInterfaceAppearance as U } from "./useCustomInterfaceAppearance.js";
|
|
5
|
+
import { useFullStoryBridge as R } from "./useFullStoryBridge.js";
|
|
6
|
+
import { useStripoEventHandler as q } from "./useStripoEventHandler.js";
|
|
7
|
+
import { useToaster as x } from "./useToaster.js";
|
|
8
|
+
import { localePatch as H } from "../config/i18n/index.js";
|
|
9
|
+
import { displayConditions as O } from "../enums/displayConditions.js";
|
|
10
|
+
import { useStripoApi as j } from "../services/stripoApi.js";
|
|
11
|
+
import L from "../static/styles/customEditorStyle.css.js";
|
|
11
12
|
import { useEditorStore as C } from "../stores/editor.js";
|
|
12
|
-
import { dynamicContentToMergeTags as
|
|
13
|
-
import
|
|
14
|
-
const
|
|
15
|
-
const { features:
|
|
16
|
-
var g,
|
|
17
|
-
const e = C(), { html: p, css: a } = i, { baseBlocks: o, extensions: d } = await
|
|
13
|
+
import { dynamicContentToMergeTags as $ } from "../utils/genericUtil.js";
|
|
14
|
+
import z from "../package.json.js";
|
|
15
|
+
const ae = (E, l) => {
|
|
16
|
+
const { features: c, template: h, isFeatureEnabled: u } = P(), { handleError: m } = x(), { getToken: w, getCustomFonts: b, getSyncModulesStatus: k } = j(), { handleEvent: B } = q(), { getStripoBlocksConfig: T } = I(), V = async (i, r = [], s = !1) => {
|
|
17
|
+
var g, S, y;
|
|
18
|
+
const e = C(), { html: p, css: a } = i, { baseBlocks: o, extensions: d } = await T(), f = ((g = c.value) == null ? void 0 : g.displayConditions) ?? !0, F = ((S = c.value) == null ? void 0 : S.modulesDisabled) ?? !1, v = ((y = h.value) == null ? void 0 : y.forceRecreate) ?? !1;
|
|
18
19
|
window.UIEditor.initEditor(
|
|
19
20
|
document.querySelector("#guido-editor"),
|
|
20
21
|
{
|
|
21
22
|
metadata: E,
|
|
22
23
|
html: p,
|
|
23
24
|
css: a,
|
|
24
|
-
forceRecreate:
|
|
25
|
+
forceRecreate: v,
|
|
25
26
|
locale: "en",
|
|
26
27
|
undoButtonSelector: "#guido__undo-button",
|
|
27
28
|
redoButtonSelector: "#guido__redo-button",
|
|
@@ -31,45 +32,46 @@ const ie = (E, c) => {
|
|
|
31
32
|
customAppearanceMergetags: !u("liquidSyntax"),
|
|
32
33
|
customAppearanceMergetagsBorderColor: "#f1f3fe",
|
|
33
34
|
customAppearanceMergetagsBackgroundColor: "#f1f3fe",
|
|
34
|
-
customViewStyles:
|
|
35
|
+
customViewStyles: L,
|
|
35
36
|
conditionsEnabled: f,
|
|
36
37
|
customConditionsEnabled: f,
|
|
37
|
-
conditionCategories:
|
|
38
|
+
conditionCategories: O,
|
|
38
39
|
enableXSSSecurity: !0,
|
|
39
|
-
modulesDisabled:
|
|
40
|
-
syncModulesEnabled:
|
|
40
|
+
modulesDisabled: F,
|
|
41
|
+
syncModulesEnabled: s,
|
|
41
42
|
messageSettingsEnabled: !0,
|
|
42
43
|
displayGmailAnnotations: !0,
|
|
43
44
|
displayHiddenPreheader: !1,
|
|
44
45
|
displayTitle: !1,
|
|
45
46
|
displayUTM: !1,
|
|
46
47
|
selectElementAfterDrop: !0,
|
|
48
|
+
allowedScriptSourceDomains: "https://email-static.useinsider.com https://edge.fullstory.com https://rs.fullstory.com",
|
|
47
49
|
...o ? { baseBlocks: o } : {},
|
|
48
50
|
editorFonts: {
|
|
49
51
|
showDefaultStandardFonts: !0,
|
|
50
52
|
showDefaultNotStandardFonts: !0,
|
|
51
|
-
customFonts:
|
|
53
|
+
customFonts: r
|
|
52
54
|
},
|
|
53
55
|
mergeTags: [
|
|
54
56
|
{
|
|
55
|
-
entries:
|
|
56
|
-
|
|
57
|
+
entries: $(
|
|
58
|
+
l.preselectedDynamicContentList,
|
|
57
59
|
u("liquidSyntax")
|
|
58
60
|
)
|
|
59
61
|
}
|
|
60
62
|
],
|
|
61
63
|
async onTokenRefreshRequest(t) {
|
|
62
64
|
try {
|
|
63
|
-
const
|
|
64
|
-
t(
|
|
65
|
-
} catch (
|
|
66
|
-
m(
|
|
65
|
+
const n = await w();
|
|
66
|
+
t(n);
|
|
67
|
+
} catch (n) {
|
|
68
|
+
m(n, "Failed to refresh token");
|
|
67
69
|
}
|
|
68
70
|
},
|
|
69
71
|
onTemplateLoaded() {
|
|
70
72
|
try {
|
|
71
|
-
const { importCss: t } =
|
|
72
|
-
t(),
|
|
73
|
+
const { importCss: t } = U(), { activateCustomViewStyles: n, updateTimerInClonedTemplate: M } = D(), { injectFullStory: A } = R();
|
|
74
|
+
t(), n(), A(), M(), l.onReady(), e.isStripoInitialized = !0, e.loadingStatus = !1, setTimeout(() => {
|
|
73
75
|
e.hasChanges = !1;
|
|
74
76
|
}, 1e3);
|
|
75
77
|
} catch (t) {
|
|
@@ -88,39 +90,39 @@ const ie = (E, c) => {
|
|
|
88
90
|
onDataChanged() {
|
|
89
91
|
e.hasChanges = !0;
|
|
90
92
|
},
|
|
91
|
-
onEvent:
|
|
93
|
+
onEvent: B,
|
|
92
94
|
ignoreClickOutsideSelectors: [
|
|
93
95
|
"#guido-dynamic-content-modal",
|
|
94
96
|
".in-on-board-wrapper",
|
|
95
97
|
".in-drawer__container"
|
|
96
98
|
],
|
|
97
99
|
extensions: d,
|
|
98
|
-
localePatch:
|
|
100
|
+
localePatch: H
|
|
99
101
|
}
|
|
100
102
|
);
|
|
101
|
-
},
|
|
103
|
+
}, _ = (i) => new Promise((r, s) => {
|
|
102
104
|
var d;
|
|
103
105
|
if (document.getElementById("UiEditorScript")) {
|
|
104
|
-
i(),
|
|
106
|
+
i(), r();
|
|
105
107
|
return;
|
|
106
108
|
}
|
|
107
|
-
const e =
|
|
109
|
+
const e = z.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");
|
|
108
110
|
o.id = "UiEditorScript", o.type = "module", o.src = a, o.onload = () => {
|
|
109
|
-
i(),
|
|
111
|
+
i(), r();
|
|
110
112
|
}, o.onerror = () => {
|
|
111
|
-
|
|
113
|
+
s(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
|
|
112
114
|
}, document.body.appendChild(o);
|
|
113
115
|
});
|
|
114
116
|
return { initPlugin: async (i) => {
|
|
115
|
-
await
|
|
116
|
-
const
|
|
117
|
-
|
|
117
|
+
await _(async () => {
|
|
118
|
+
const r = C(), [s, e] = await Promise.all([
|
|
119
|
+
b(),
|
|
118
120
|
k()
|
|
119
121
|
]);
|
|
120
|
-
|
|
122
|
+
r.syncModulesEnabled = e, await V(i, s, e);
|
|
121
123
|
});
|
|
122
124
|
} };
|
|
123
125
|
};
|
|
124
126
|
export {
|
|
125
|
-
|
|
127
|
+
ae as useStripo
|
|
126
128
|
};
|
|
@@ -1,99 +1,88 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var b = (
|
|
4
|
-
import
|
|
5
|
-
class
|
|
1
|
+
var x = Object.defineProperty;
|
|
2
|
+
var f = (r, t, e) => t in r ? x(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
|
|
3
|
+
var b = (r, t, e) => f(r, typeof t != "symbol" ? t + "" : t, e);
|
|
4
|
+
import h from "../../extensions/Blocks/RadioButton/template.js";
|
|
5
|
+
class T {
|
|
6
6
|
constructor() {
|
|
7
7
|
b(this, "parser");
|
|
8
8
|
this.parser = new DOMParser();
|
|
9
9
|
}
|
|
10
|
-
migrate(
|
|
10
|
+
migrate(t) {
|
|
11
11
|
try {
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
let a = !1;
|
|
16
|
-
return s.forEach((r) => {
|
|
17
|
-
if (r.classList.contains("radio-button-v2"))
|
|
12
|
+
const e = this.parser.parseFromString(t, "text/html"), i = e.querySelectorAll("td.radio-button-block");
|
|
13
|
+
return i.length === 0 ? t : (i.forEach((s) => {
|
|
14
|
+
if (s.classList.contains("radio-button-v2"))
|
|
18
15
|
return;
|
|
19
|
-
const
|
|
20
|
-
`<table id="tempDoc"><tbody><tr>${
|
|
16
|
+
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(
|
|
17
|
+
`<table id="tempDoc"><tbody><tr>${c}</tr></tbody></table>`,
|
|
21
18
|
"text/html"
|
|
22
19
|
).querySelector(".radio-button-v2");
|
|
23
|
-
y &&
|
|
24
|
-
}),
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
if (!c || (n == null ? void 0 : n.tagName) !== "TR")
|
|
28
|
-
return;
|
|
29
|
-
r.removeAttribute("esd-block-text");
|
|
30
|
-
const o = t.createElement("td");
|
|
31
|
-
o.setAttribute("align", "left"), o.setAttribute("style", "padding:0;Margin:0"), o.appendChild(c), n.appendChild(o), a = !0;
|
|
32
|
-
}), a ? t.documentElement.outerHTML : e;
|
|
33
|
-
} catch (t) {
|
|
34
|
-
return console.error("RadioButtonMigrator failed:", t), e;
|
|
20
|
+
y && s.parentNode && (y.setAttribute("id", n || ""), s.parentNode.replaceChild(y, s));
|
|
21
|
+
}), e.documentElement.outerHTML);
|
|
22
|
+
} catch (e) {
|
|
23
|
+
return console.error("RadioButtonMigrator failed:", e), t;
|
|
35
24
|
}
|
|
36
25
|
}
|
|
37
|
-
extractTextFromElement(
|
|
38
|
-
var
|
|
39
|
-
const
|
|
40
|
-
if (!
|
|
26
|
+
extractTextFromElement(t, e) {
|
|
27
|
+
var o, c;
|
|
28
|
+
const i = t.querySelector(`.${e}`);
|
|
29
|
+
if (!i)
|
|
41
30
|
return {
|
|
42
|
-
text:
|
|
31
|
+
text: e === "ins-title" ? "Title" : "Description",
|
|
43
32
|
isBold: !1,
|
|
44
33
|
isItalic: !1,
|
|
45
34
|
align: "left",
|
|
46
35
|
styles: "",
|
|
47
36
|
classList: ""
|
|
48
37
|
};
|
|
49
|
-
const
|
|
50
|
-
if (!
|
|
38
|
+
const s = i.querySelector("p");
|
|
39
|
+
if (!s)
|
|
51
40
|
return {
|
|
52
|
-
text: ((
|
|
41
|
+
text: ((o = i.textContent) == null ? void 0 : o.trim()) || (e === "ins-title" ? "Title" : "Description"),
|
|
53
42
|
isBold: !1,
|
|
54
43
|
isItalic: !1,
|
|
55
|
-
align:
|
|
44
|
+
align: i.getAttribute("align") || "left",
|
|
56
45
|
styles: "",
|
|
57
46
|
classList: ""
|
|
58
47
|
};
|
|
59
|
-
const
|
|
48
|
+
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") || "";
|
|
60
49
|
return {
|
|
61
|
-
text:
|
|
62
|
-
isBold:
|
|
63
|
-
isItalic:
|
|
64
|
-
align:
|
|
65
|
-
styles:
|
|
50
|
+
text: n,
|
|
51
|
+
isBold: p,
|
|
52
|
+
isItalic: u,
|
|
53
|
+
align: a,
|
|
54
|
+
styles: g,
|
|
66
55
|
classList: m
|
|
67
56
|
};
|
|
68
57
|
}
|
|
69
|
-
buildTextBlock(
|
|
70
|
-
let
|
|
71
|
-
|
|
72
|
-
const
|
|
58
|
+
buildTextBlock(t) {
|
|
59
|
+
let e = t.text;
|
|
60
|
+
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>`);
|
|
61
|
+
const i = t.align ? ` align="${t.align}"` : "", s = t.styles ? ` style="${t.styles.replaceAll('"', "'")}"` : "";
|
|
73
62
|
return `
|
|
74
|
-
<td class="esd-block-text ${
|
|
75
|
-
<p path="1" ${
|
|
76
|
-
${
|
|
63
|
+
<td class="esd-block-text ${t.classList}" ${i}>
|
|
64
|
+
<p path="1" ${s}>
|
|
65
|
+
${e}
|
|
77
66
|
</p>
|
|
78
67
|
</td>
|
|
79
68
|
`;
|
|
80
69
|
}
|
|
81
|
-
removeStyleProperties(
|
|
82
|
-
return
|
|
83
|
-
const
|
|
84
|
-
return
|
|
85
|
-
},
|
|
70
|
+
removeStyleProperties(t, e) {
|
|
71
|
+
return t ? e.reduce((s, n) => {
|
|
72
|
+
const l = new RegExp(`${n}\\s*:\\s*[^;]*;?`, "gi");
|
|
73
|
+
return s.replace(l, "");
|
|
74
|
+
}, t).replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim() : "";
|
|
86
75
|
}
|
|
87
|
-
convertInlineToBlock(
|
|
88
|
-
if (!
|
|
76
|
+
convertInlineToBlock(t) {
|
|
77
|
+
if (!t)
|
|
89
78
|
return "";
|
|
90
|
-
let
|
|
91
|
-
return /display\s*:/i.test(
|
|
79
|
+
let e = t.replace(/display\s*:\s*inline/gi, "display: block");
|
|
80
|
+
return /display\s*:/i.test(e) || (e = e ? `${e}; display: block` : "display: block"), e.replace(/;\s*;/g, ";").replace(/^;|;$/g, "").trim();
|
|
92
81
|
}
|
|
93
82
|
}
|
|
94
|
-
function
|
|
95
|
-
return new
|
|
83
|
+
function A(r) {
|
|
84
|
+
return new T().migrate(r);
|
|
96
85
|
}
|
|
97
86
|
export {
|
|
98
|
-
|
|
87
|
+
A as migrateRadioButton
|
|
99
88
|
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Injects the hosted FullStory bridge script into the Stripo editor iframe.
|
|
3
|
+
*
|
|
4
|
+
* The bridge script's origin is allowlisted via Stripo's
|
|
5
|
+
* `allowedScriptSourceDomains` in useStripo, so the iframe's CSP permits
|
|
6
|
+
* the load. The bundled script itself handles reading FS config from the
|
|
7
|
+
* parent window and booting the FullStory queue stub inside the iframe.
|
|
8
|
+
*/
|
|
9
|
+
export declare const useFullStoryBridge: () => {
|
|
10
|
+
injectFullStory: () => void;
|
|
11
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const migrationTemplate = "\n <td\n align=\"left\"\n esd-extension-block-id=\"radio-button-block\"\n esd-handler-name=\"esd-extension-RadioButtonBlock\"\n class=\"\n radio-button\n radio-button-v2\n esd-block-ra\n esd-radio-button-block\n esd-extension-block\n es-p10t\n es-p10b\n es-p30r\n es-p30l\"\n >\n <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n <tbody>\n <tr>\n <td align=\"left\" width=\"70%\" style=\"vertical-align: top;\">\n <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n <tbody>\n <tr>\n {-{-TITLE-}-}\n </tr>\n <tr>\n {-{-DESCRIPTION-}-}\n </tr>\n </tbody>\n </table>\n </td>\n <td align=\"right\" width=\"30%\" style=\"vertical-align: middle;\">\n <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n <tbody>\n <tr>\n <td width=\"50%\">\n <table width=\"100%\">\n <tr>\n <td width=\"24\">\n <input\n type=\"radio\"\n id=\"radioYes\"\n name=\"unsubscribe\"\n data-cke-editable=\"1\"\n style=\"margin: 0px; vertical-align: middle
|
|
1
|
+
declare const migrationTemplate = "\n <td\n align=\"left\"\n esd-extension-block-id=\"radio-button-block\"\n esd-handler-name=\"esd-extension-RadioButtonBlock\"\n class=\"\n radio-button\n radio-button-v2\n esd-block-ra\n esd-radio-button-block\n esd-extension-block\n es-p10t\n es-p10b\n es-p30r\n es-p30l\"\n >\n <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n <tbody>\n <tr>\n <td align=\"left\" width=\"70%\" style=\"vertical-align: top;\">\n <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n <tbody>\n <tr>\n {-{-TITLE-}-}\n </tr>\n <tr>\n {-{-DESCRIPTION-}-}\n </tr>\n </tbody>\n </table>\n </td>\n <td align=\"right\" width=\"30%\" style=\"vertical-align: middle;\">\n <table cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" width=\"100%\">\n <tbody>\n <tr>\n <td width=\"50%\">\n <table width=\"100%\">\n <tr>\n <td width=\"24\">\n <input\n type=\"radio\"\n id=\"radioYes\"\n name=\"unsubscribe\"\n data-cke-editable=\"1\"\n style=\"margin: 0px; vertical-align: middle;>\n </td>\n {-{-YES-}-}\n </tr>\n </table>\n </td>\n <td width=\"50%\">\n <table width=\"100%\">\n <tr>\n <td width=\"24\">\n <input\n type=\"radio\"\n id=\"radioNo\"\n name=\"unsubscribe\"\n data-cke-editable=\"1\"\n style=\"margin: 0px; vertical-align: middle;\">\n </td>\n {-{-NO-}-}\n </tr>\n </table>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n </tr>\n </tbody>\n </table>\n </td>\n";
|
|
2
2
|
/**
|
|
3
3
|
* @returns The template for the default checkbox block
|
|
4
4
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@useinsider/guido",
|
|
3
|
-
"version": "3.2.0-beta.
|
|
3
|
+
"version": "3.2.0-beta.d5a560f",
|
|
4
4
|
"description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
|
|
5
5
|
"main": "./dist/guido.umd.cjs",
|
|
6
6
|
"module": "./dist/library.js",
|