@useinsider/guido 1.0.3-beta.a024c62 → 1.0.3-beta.a058e8a
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/README.md +0 -5
- package/dist/components/Guido.vue.js +1 -1
- package/dist/components/Guido.vue2.js +61 -64
- package/dist/composables/useStripo.js +35 -37
- package/dist/enums/defaults.js +1 -2
- package/dist/enums/environment.js +5 -0
- package/dist/extensions/Blocks/Recommendation/store/recommendation.js +1 -1
- package/dist/extensions/DynamicContent/dynamic-content-modal.js +19 -25
- package/dist/extensions/DynamicContent/dynamic-content.js +33 -128
- package/dist/guido.css +1 -1
- package/dist/package.json.js +1 -1
- package/dist/src/@types/generic.d.ts +6 -27
- package/dist/src/components/Guido.vue.d.ts +2 -2
- package/dist/src/enums/environment.d.ts +5 -0
- package/dist/src/extensions/Blocks/Recommendation/store/recommendation.d.ts +1 -1
- package/dist/src/extensions/DynamicContent/dynamic-content-modal.d.ts +2 -9
- package/dist/src/extensions/DynamicContent/dynamic-content.d.ts +2 -52
- package/dist/src/stores/config.d.ts +2 -3
- package/dist/src/stores/dynamic-content.d.ts +3 -3
- package/dist/src/stores/editor.d.ts +1 -1
- package/dist/src/stores/onboarding.d.ts +1 -1
- package/dist/src/stores/preview.d.ts +1 -1
- package/dist/src/stores/recommendation.d.ts +1 -1
- package/dist/src/stores/save-as-template.d.ts +1 -1
- package/dist/src/stores/toaster.d.ts +1 -1
- package/dist/src/stores/unsubscribe.d.ts +1 -1
- package/dist/src/stores/version-history.d.ts +1 -1
- package/dist/src/utils/environmentUtil.d.ts +5 -2
- package/dist/src/utils/genericUtil.d.ts +0 -1
- package/dist/stores/config.js +5 -5
- package/dist/stores/dynamic-content.js +2 -2
- package/dist/stores/editor.js +1 -1
- package/dist/stores/onboarding.js +27 -27
- package/dist/stores/preview.js +1 -1
- package/dist/stores/recommendation.js +3 -3
- package/dist/stores/save-as-template.js +2 -2
- package/dist/stores/toaster.js +1 -1
- package/dist/stores/unsubscribe.js +1 -1
- package/dist/stores/version-history.js +4 -4
- package/dist/utils/environmentUtil.js +4 -2
- package/dist/utils/genericUtil.js +9 -20
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -198,7 +198,6 @@ interface GuidoConfig {
|
|
|
198
198
|
saveAsTemplate: boolean;
|
|
199
199
|
versionHistory: boolean;
|
|
200
200
|
testMessage: boolean;
|
|
201
|
-
displayConditions: boolean;
|
|
202
201
|
};
|
|
203
202
|
blocks?: {
|
|
204
203
|
excludeDefaults?: GuidoBlockType[];
|
|
@@ -217,7 +216,6 @@ interface GuidoConfig {
|
|
|
217
216
|
| `features.dynamicContent` | `boolean` | `true` | Enable dynamic content insertion feature |
|
|
218
217
|
| `features.saveAsTemplate` | `boolean` | `true` | Enable save as template feature |
|
|
219
218
|
| `features.versionHistory` | `boolean` | `true` | Enable version history feature |
|
|
220
|
-
| `features.displayConditions` | `boolean` | `true` | Enable display conditions |
|
|
221
219
|
| `blocks` | `BlocksConfig` | `{ excludeDefaults: [], includeCustoms: [] }` | Block configuration for excluding default blocks and including custom blocks. See [Blocks Configuration](#-blocks-configuration) section below |
|
|
222
220
|
| `blocks.excludeDefaults` | `GuidoBlockType[]` | `[]` | Array of default Stripo blocks to exclude from the editor |
|
|
223
221
|
| `blocks.includeCustoms` | `GuidoCustomBlockType[]` | `[]` | Array of custom blocks to include in the editor |
|
|
@@ -600,9 +598,6 @@ Create a `.env` file with the following variables: (You can get env variables fr
|
|
|
600
598
|
VITE_STRIPO_PLUGIN_ID=your_plugin_id
|
|
601
599
|
VITE_STRIPO_SECRET_KEY=your_secret_key
|
|
602
600
|
VITE_STRIPO_ROLE=your_role
|
|
603
|
-
|
|
604
|
-
# Playwright Test Configuration (Optional - for local debugging only)
|
|
605
|
-
HEADED=false # Set to 'true' to run tests with visible browser
|
|
606
601
|
```
|
|
607
602
|
|
|
608
603
|
### Project Structure
|
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { provideGuidoActions as
|
|
3
|
-
import { usePartner as
|
|
4
|
-
import { useStripo as
|
|
5
|
-
import { migrate as
|
|
6
|
-
import { DefaultUsername as
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import { useStripoApi as
|
|
14
|
-
import { useConfigStore as
|
|
15
|
-
import { useDynamicContentStore as
|
|
16
|
-
import { useEditorStore as
|
|
17
|
-
import { usePreviewStore as
|
|
18
|
-
import { useUnsubscribeStore as
|
|
19
|
-
import
|
|
20
|
-
const
|
|
1
|
+
import { defineComponent as R, defineAsyncComponent as G, ref as x, computed as I, watch as M, onMounted as z, onUnmounted as B } from "vue";
|
|
2
|
+
import { provideGuidoActions as K } from "../composables/useGuidoActions.js";
|
|
3
|
+
import { usePartner as O } from "../composables/usePartner.js";
|
|
4
|
+
import { useStripo as j } from "../composables/useStripo.js";
|
|
5
|
+
import { migrate as U } from "../config/migrator/index.js";
|
|
6
|
+
import { DefaultUsername as q, DefaultMessageType as J, DefaultGuidoConfig as Q } from "../enums/defaults.js";
|
|
7
|
+
import V from "./organisms/base/Toaster.vue.js";
|
|
8
|
+
import X from "./organisms/extensions/recommendation/FilterSelectionDrawer.vue.js";
|
|
9
|
+
import Y from "./organisms/header/HeaderWrapper.vue.js";
|
|
10
|
+
import Z from "./organisms/LoadingWrapper.vue.js";
|
|
11
|
+
import $ from "./organisms/save-as-template/SaveAsTemplateDrawer.vue.js";
|
|
12
|
+
import ee from "./organisms/unsubscribe/UnsubscribeWrapper.vue.js";
|
|
13
|
+
import { useStripoApi as oe } from "../services/stripoApi.js";
|
|
14
|
+
import { useConfigStore as te } from "../stores/config.js";
|
|
15
|
+
import { useDynamicContentStore as ne } from "../stores/dynamic-content.js";
|
|
16
|
+
import { useEditorStore as re } from "../stores/editor.js";
|
|
17
|
+
import { usePreviewStore as ie } from "../stores/preview.js";
|
|
18
|
+
import { useUnsubscribeStore as se } from "../stores/unsubscribe.js";
|
|
19
|
+
import ae from "../node_modules/lodash-es/merge.js";
|
|
20
|
+
const ke = /* @__PURE__ */ R({
|
|
21
21
|
__name: "Guido",
|
|
22
22
|
props: {
|
|
23
23
|
templateId: null,
|
|
@@ -33,45 +33,45 @@ const Ue = /* @__PURE__ */ O({
|
|
|
33
33
|
},
|
|
34
34
|
emits: ["dynamic-content:open", "back", "save:start", "save:complete", "on-change", "ready", "onboarding:finished", "test-email:click"],
|
|
35
35
|
setup(W, { expose: _, emit: o }) {
|
|
36
|
-
const
|
|
36
|
+
const l = W, L = G(
|
|
37
37
|
() => import("./organisms/email-preview/PreviewContainer.vue.js")
|
|
38
|
-
),
|
|
38
|
+
), A = G(
|
|
39
39
|
() => import("./organisms/onboarding/OnboardingWrapper.vue.js")
|
|
40
|
-
),
|
|
40
|
+
), u = x(), i = ne(), p = se(), g = te(), s = re(), N = ie(), n = I(() => s.hasChanges), { getPartnerName: f, getProductType: y, isTestPartner: F } = O(), v = () => {
|
|
41
41
|
var e;
|
|
42
|
-
return (e =
|
|
42
|
+
return (e = u.value) == null ? void 0 : e.handleSave(!0);
|
|
43
43
|
}, {
|
|
44
44
|
templateId: a,
|
|
45
|
-
userId:
|
|
46
|
-
guidoConfig:
|
|
45
|
+
userId: b,
|
|
46
|
+
guidoConfig: C,
|
|
47
47
|
templateConfig: t,
|
|
48
48
|
html: r = "",
|
|
49
|
-
css:
|
|
50
|
-
partnerName: c =
|
|
51
|
-
productType:
|
|
52
|
-
messageType:
|
|
53
|
-
username:
|
|
54
|
-
} =
|
|
55
|
-
s.templateId = a, window.GuidoConfig =
|
|
49
|
+
css: h = "",
|
|
50
|
+
partnerName: c = f(),
|
|
51
|
+
productType: d = y(),
|
|
52
|
+
messageType: S = J,
|
|
53
|
+
username: w = q
|
|
54
|
+
} = l, m = (t == null ? void 0 : t.preselectedDynamicContentList) || [];
|
|
55
|
+
s.templateId = a, window.GuidoConfig = ae(Q, C), window.GuidoConfig.partner = {
|
|
56
56
|
partnerName: c,
|
|
57
|
-
productType:
|
|
58
|
-
messageType:
|
|
59
|
-
},
|
|
60
|
-
const { initPlugin:
|
|
57
|
+
productType: d,
|
|
58
|
+
messageType: S
|
|
59
|
+
}, g.templateConfig = t;
|
|
60
|
+
const { initPlugin: D } = j({
|
|
61
61
|
emailId: a,
|
|
62
|
-
userId:
|
|
63
|
-
username:
|
|
62
|
+
userId: b,
|
|
63
|
+
username: w,
|
|
64
64
|
partnerName: c,
|
|
65
|
-
productType:
|
|
66
|
-
preselectedDynamicContentList:
|
|
65
|
+
productType: d,
|
|
66
|
+
preselectedDynamicContentList: m,
|
|
67
67
|
onReady: () => {
|
|
68
68
|
console.debug("guido:ready"), o("ready");
|
|
69
69
|
}
|
|
70
|
-
}), { getDefaultTemplate: T } =
|
|
70
|
+
}), { getDefaultTemplate: T } = oe(), H = I(() => {
|
|
71
71
|
var e;
|
|
72
72
|
return !((e = window.GuidoConfig) != null && e.useHeader);
|
|
73
73
|
});
|
|
74
|
-
|
|
74
|
+
K({
|
|
75
75
|
onBack: () => {
|
|
76
76
|
console.debug("guido:back"), o("back");
|
|
77
77
|
},
|
|
@@ -85,35 +85,32 @@ const Ue = /* @__PURE__ */ O({
|
|
|
85
85
|
console.debug("guido:test-email:click"), o("test-email:click");
|
|
86
86
|
}
|
|
87
87
|
});
|
|
88
|
-
const
|
|
88
|
+
const E = (e) => {
|
|
89
89
|
console.debug("dynamic-content:close", e), i.setSelectedDynamicContent(e), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: e }));
|
|
90
|
-
},
|
|
90
|
+
}, P = () => {
|
|
91
91
|
console.debug("dynamic-content:close", "Without Data"), document.dispatchEvent(new CustomEvent("dynamic-content:close", { detail: { text: "", value: "" } }));
|
|
92
92
|
};
|
|
93
|
-
|
|
93
|
+
return M(() => n.value, () => {
|
|
94
94
|
o("on-change", n.value);
|
|
95
|
-
})
|
|
96
|
-
const l = (e) => {
|
|
97
|
-
const G = e, { attribute: x, position: M } = G.detail;
|
|
98
|
-
console.debug("dynamic-content:open", G.detail), o("dynamic-content:open", x, M);
|
|
99
|
-
};
|
|
100
|
-
return K(async () => {
|
|
95
|
+
}), z(async () => {
|
|
101
96
|
console.debug("Guido says happy coding 🎉"), console.debug("🚗 Ka-Chow");
|
|
102
97
|
try {
|
|
103
|
-
|
|
98
|
+
p.selectedUnsubscribePages = (t == null ? void 0 : t.selectedUnsubscribePages) || [];
|
|
104
99
|
let e = {
|
|
105
|
-
html: r && await
|
|
106
|
-
css:
|
|
100
|
+
html: r && await U(r),
|
|
101
|
+
css: h,
|
|
107
102
|
forceRecreate: !0
|
|
108
103
|
// TODO: It should be false for old templates. We will communicate with Stripo
|
|
109
104
|
};
|
|
110
|
-
e.html || (e = await T(), e.html = await
|
|
105
|
+
e.html || (e = await T(), e.html = await U(e.html)), await D(e), i.selectedDynamicContentList = m;
|
|
111
106
|
} catch (e) {
|
|
112
107
|
console.error("Failed to initialize Stripo editor:", e);
|
|
113
108
|
}
|
|
114
|
-
document.addEventListener("dynamic-content:open",
|
|
115
|
-
|
|
116
|
-
|
|
109
|
+
document.addEventListener("dynamic-content:open", (e) => {
|
|
110
|
+
const k = e;
|
|
111
|
+
console.debug("dynamic-content:open", k.detail), o("dynamic-content:open", k.detail);
|
|
112
|
+
});
|
|
113
|
+
}), B(() => {
|
|
117
114
|
try {
|
|
118
115
|
window.UIEditor.removeEditor();
|
|
119
116
|
} catch {
|
|
@@ -121,14 +118,14 @@ const Ue = /* @__PURE__ */ O({
|
|
|
121
118
|
}
|
|
122
119
|
}), _({
|
|
123
120
|
dynamicContent: {
|
|
124
|
-
insert:
|
|
125
|
-
close:
|
|
121
|
+
insert: E,
|
|
122
|
+
close: P
|
|
126
123
|
},
|
|
127
124
|
hasChanges: n,
|
|
128
|
-
saveSilent:
|
|
129
|
-
}), { __sfc: !0, PreviewContainer:
|
|
125
|
+
saveSilent: v
|
|
126
|
+
}), { __sfc: !0, PreviewContainer: L, OnboardingWrapper: A, headerWrapperRef: u, dynamicContentStore: i, unsubscribeStore: p, props: l, configStore: g, editorStore: s, previewStore: N, hasChanges: n, getPartnerName: f, getProductType: y, isTestPartner: F, saveSilent: v, templateId: a, userId: b, guidoConfig: C, templateConfig: t, html: r, css: h, partnerName: c, productType: d, messageType: S, username: w, preselectedDynamicContentList: m, emit: o, initPlugin: D, getDefaultTemplate: T, noHeader: H, insertDynamicContent: E, closeDynamicContent: P, Toaster: V, FilterSelectionDrawer: X, HeaderWrapper: Y, LoadingWrapper: Z, SaveAsTemplateDrawer: $, UnsubscribeWrapper: ee };
|
|
130
127
|
}
|
|
131
128
|
});
|
|
132
129
|
export {
|
|
133
|
-
|
|
130
|
+
ke as default
|
|
134
131
|
};
|
|
@@ -1,25 +1,23 @@
|
|
|
1
|
-
import { useActionsApi as
|
|
2
|
-
import { useBlocksConfig as
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
import
|
|
12
|
-
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
var m, g;
|
|
16
|
-
const t = v(), { html: n, css: p, forceRecreate: a } = i, { baseBlocks: e, extensions: c } = await y();
|
|
1
|
+
import { useActionsApi as y } from "./useActionsApi.js";
|
|
2
|
+
import { useBlocksConfig as E } from "./useBlocksConfig.js";
|
|
3
|
+
import { useCustomInterfaceAppearance as w } from "./useCustomInterfaceAppearance.js";
|
|
4
|
+
import { useStripoEventHandler as h } from "./useStripoEventHandler.js";
|
|
5
|
+
import { useToaster as b } from "./useToaster.js";
|
|
6
|
+
import { displayConditions as k } from "../enums/displayConditions.js";
|
|
7
|
+
import { useStripoApi as B } from "../services/stripoApi.js";
|
|
8
|
+
import V from "../static/styles/customEditorStyle.css.js";
|
|
9
|
+
import { useEditorStore as _ } from "../stores/editor.js";
|
|
10
|
+
import { dynamicContentToMergeTags as F } from "../utils/genericUtil.js";
|
|
11
|
+
import A from "../package.json.js";
|
|
12
|
+
const L = (d) => {
|
|
13
|
+
const { handleError: u } = b(), { getToken: p, getCustomFonts: m } = B(), { handleEvent: g } = h(), { getStripoBlocksConfig: f } = E(), S = async (r, i = []) => {
|
|
14
|
+
const t = _(), { html: n, css: l, forceRecreate: a } = r, { baseBlocks: e, extensions: c } = await f();
|
|
17
15
|
window.UIEditor.initEditor(
|
|
18
16
|
document.querySelector("#guido-editor"),
|
|
19
17
|
{
|
|
20
18
|
metadata: d,
|
|
21
19
|
html: n,
|
|
22
|
-
css:
|
|
20
|
+
css: l,
|
|
23
21
|
forceRecreate: a,
|
|
24
22
|
locale: "en",
|
|
25
23
|
undoButtonSelector: "#guido__undo-button",
|
|
@@ -30,10 +28,10 @@ const N = (d) => {
|
|
|
30
28
|
customAppearanceMergetags: !0,
|
|
31
29
|
customAppearanceMergetagsBorderColor: "#f1f3fe",
|
|
32
30
|
customAppearanceMergetagsBackgroundColor: "#f1f3fe",
|
|
33
|
-
customViewStyles:
|
|
34
|
-
conditionsEnabled:
|
|
35
|
-
customConditionsEnabled:
|
|
36
|
-
conditionCategories:
|
|
31
|
+
customViewStyles: V,
|
|
32
|
+
conditionsEnabled: !0,
|
|
33
|
+
customConditionsEnabled: !0,
|
|
34
|
+
conditionCategories: k,
|
|
37
35
|
enableXSSSecurity: !0,
|
|
38
36
|
messageSettingsEnabled: !1,
|
|
39
37
|
selectBlockAfterDropFromSettingsPanel: !0,
|
|
@@ -41,29 +39,29 @@ const N = (d) => {
|
|
|
41
39
|
editorFonts: {
|
|
42
40
|
showDefaultStandardFonts: !0,
|
|
43
41
|
showDefaultNotStandardFonts: !0,
|
|
44
|
-
customFonts:
|
|
42
|
+
customFonts: i
|
|
45
43
|
},
|
|
46
44
|
mergeTags: [
|
|
47
45
|
{
|
|
48
|
-
entries:
|
|
46
|
+
entries: F(d.preselectedDynamicContentList)
|
|
49
47
|
}
|
|
50
48
|
],
|
|
51
49
|
async onTokenRefreshRequest(o) {
|
|
52
50
|
try {
|
|
53
|
-
const s = await
|
|
51
|
+
const s = await p();
|
|
54
52
|
o(s);
|
|
55
53
|
} catch (s) {
|
|
56
|
-
|
|
54
|
+
u(s, "Failed to refresh token");
|
|
57
55
|
}
|
|
58
56
|
},
|
|
59
57
|
onTemplateLoaded() {
|
|
60
58
|
try {
|
|
61
|
-
const { importCss: o } =
|
|
59
|
+
const { importCss: o } = w(), { activateCustomViewStyles: s } = y();
|
|
62
60
|
o(), s(), d.onReady(), t.isStripoInitialized = !0, t.loadingStatus = !1, setTimeout(() => {
|
|
63
61
|
t.hasChanges = !1;
|
|
64
62
|
}, 1e3);
|
|
65
63
|
} catch (o) {
|
|
66
|
-
|
|
64
|
+
u(o, "Failed to load custom interface appearance");
|
|
67
65
|
}
|
|
68
66
|
},
|
|
69
67
|
onCodeEditorVisibilityChanged(o) {
|
|
@@ -78,7 +76,7 @@ const N = (d) => {
|
|
|
78
76
|
onDataChanged() {
|
|
79
77
|
t.hasChanges = !0;
|
|
80
78
|
},
|
|
81
|
-
onEvent:
|
|
79
|
+
onEvent: g,
|
|
82
80
|
ignoreClickOutsideSelectors: [
|
|
83
81
|
"#guido-dynamic-content-modal",
|
|
84
82
|
".in-on-board-wrapper",
|
|
@@ -87,26 +85,26 @@ const N = (d) => {
|
|
|
87
85
|
extensions: c
|
|
88
86
|
}
|
|
89
87
|
);
|
|
90
|
-
},
|
|
88
|
+
}, C = (r) => new Promise((i, t) => {
|
|
91
89
|
var c;
|
|
92
90
|
if (document.getElementById("UiEditorScript")) {
|
|
93
|
-
|
|
91
|
+
r(), i();
|
|
94
92
|
return;
|
|
95
93
|
}
|
|
96
|
-
const n =
|
|
94
|
+
const n = A.guido, a = `https://email-static.useinsider.com/guido/${(c = n == null ? void 0 : n.stripo) == null ? void 0 : c.version}/UIEditor.js`, e = document.createElement("script");
|
|
97
95
|
e.id = "UiEditorScript", e.type = "module", e.src = a, e.onload = () => {
|
|
98
|
-
|
|
96
|
+
r(), i();
|
|
99
97
|
}, e.onerror = () => {
|
|
100
98
|
t(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
|
|
101
99
|
}, document.body.appendChild(e);
|
|
102
100
|
});
|
|
103
|
-
return { initPlugin: async (
|
|
104
|
-
await
|
|
105
|
-
const
|
|
106
|
-
await
|
|
101
|
+
return { initPlugin: async (r) => {
|
|
102
|
+
await C(async () => {
|
|
103
|
+
const i = await m();
|
|
104
|
+
await S(r, i);
|
|
107
105
|
});
|
|
108
106
|
} };
|
|
109
107
|
};
|
|
110
108
|
export {
|
|
111
|
-
|
|
109
|
+
L as useStripo
|
|
112
110
|
};
|
package/dist/enums/defaults.js
CHANGED
|
@@ -133,7 +133,7 @@ const a = c(), d = () => ({
|
|
|
133
133
|
filterSelectionDrawerStatus: !1,
|
|
134
134
|
filterList: {},
|
|
135
135
|
filterGroup: 1
|
|
136
|
-
}), G = p("
|
|
136
|
+
}), G = p("recommendationExtension", {
|
|
137
137
|
state: () => d(),
|
|
138
138
|
getters: {
|
|
139
139
|
hasFilters: (e) => !!e.recommendationConfigs.filters.length,
|
|
@@ -1,33 +1,27 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
4
|
-
class
|
|
1
|
+
var i = Object.defineProperty;
|
|
2
|
+
var d = (t, e, n) => e in t ? i(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
|
|
3
|
+
var a = (t, e, n) => d(t, typeof e != "symbol" ? e + "" : e, n);
|
|
4
|
+
class y {
|
|
5
5
|
constructor() {
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
a(this, "selectedDynamicContent", null);
|
|
7
|
+
a(this, "dataSelectCallback", () => {
|
|
8
8
|
});
|
|
9
|
-
c(this, "closeDynamicContentHandler", null);
|
|
10
9
|
}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
openMergeTagsLibrary(e, n, l) {
|
|
18
|
-
this.closeDynamicContentHandler && (document.removeEventListener("dynamic-content:close", this.closeDynamicContentHandler), this.closeDynamicContentHandler = null), this.dataSelectCallback = n, this.selectedDynamicContent = e;
|
|
19
|
-
const o = {
|
|
20
|
-
attribute: e,
|
|
21
|
-
position: l
|
|
22
|
-
}, s = new CustomEvent("dynamic-content:open", {
|
|
23
|
-
detail: o
|
|
10
|
+
openMergeTagsLibrary(e, n) {
|
|
11
|
+
this.dataSelectCallback = n, this.selectedDynamicContent = e;
|
|
12
|
+
const s = new CustomEvent("dynamic-content:open", {
|
|
13
|
+
detail: {
|
|
14
|
+
attribute: e
|
|
15
|
+
}
|
|
24
16
|
});
|
|
25
|
-
document.dispatchEvent(s)
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
17
|
+
document.dispatchEvent(s);
|
|
18
|
+
const o = (l) => {
|
|
19
|
+
const c = l.detail;
|
|
20
|
+
this.selectedDynamicContent = c, c.text && c.value && this.dataSelectCallback(c), document.removeEventListener("dynamic-content:close", o);
|
|
21
|
+
};
|
|
22
|
+
document.addEventListener("dynamic-content:close", o);
|
|
29
23
|
}
|
|
30
24
|
}
|
|
31
25
|
export {
|
|
32
|
-
|
|
26
|
+
y as ExternalMergeTagsLibrary
|
|
33
27
|
};
|
|
@@ -1,156 +1,61 @@
|
|
|
1
|
-
var
|
|
2
|
-
var g = (
|
|
3
|
-
var
|
|
4
|
-
import {
|
|
5
|
-
import { UIElement as
|
|
6
|
-
import { ExternalMergeTagsLibrary as
|
|
7
|
-
const
|
|
8
|
-
class p extends
|
|
9
|
-
registerUiElements(
|
|
10
|
-
|
|
1
|
+
var o = Object.defineProperty;
|
|
2
|
+
var g = (n, t, e) => t in n ? o(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
|
|
3
|
+
var i = (n, t, e) => g(n, typeof t != "symbol" ? t + "" : t, e);
|
|
4
|
+
import { dynamicContentToMergeTags as m } from "../../utils/genericUtil.js";
|
|
5
|
+
import { UIElement as c, UIElementType as r, UEAttr as l, UIElementTagRegistry as d } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
6
|
+
import { ExternalMergeTagsLibrary as T } from "./dynamic-content-modal.js";
|
|
7
|
+
const a = "external-dynamic-content-ui-element", y = "button-add-dynamic-content";
|
|
8
|
+
class p extends d {
|
|
9
|
+
registerUiElements(t) {
|
|
10
|
+
t[r.MERGETAGS] = a;
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
|
-
class
|
|
13
|
+
class C extends c {
|
|
14
14
|
constructor() {
|
|
15
15
|
super(...arguments);
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
r(this, "mousedownListener", null);
|
|
16
|
+
i(this, "mergeTagsButton", null);
|
|
17
|
+
i(this, "listener", () => {
|
|
18
|
+
});
|
|
19
|
+
i(this, "mergeTagsLibrary", null);
|
|
20
|
+
i(this, "selectedDynamicContent", { value: "", text: "" });
|
|
22
21
|
}
|
|
23
22
|
getId() {
|
|
24
|
-
return
|
|
23
|
+
return a;
|
|
25
24
|
}
|
|
26
|
-
onRender(
|
|
27
|
-
var
|
|
28
|
-
this.mergeTagsButton =
|
|
25
|
+
onRender(e) {
|
|
26
|
+
var s;
|
|
27
|
+
this.listener = this._onClick.bind(this), this.mergeTagsButton = e.querySelector("#guido__btn-add-dynamic-content"), (s = this.mergeTagsButton) == null || s.addEventListener("click", this.listener);
|
|
29
28
|
}
|
|
30
29
|
onDestroy() {
|
|
31
|
-
var
|
|
32
|
-
|
|
30
|
+
var e;
|
|
31
|
+
(e = this.mergeTagsButton) == null || e.removeEventListener("click", this.listener);
|
|
33
32
|
}
|
|
34
33
|
_onClick() {
|
|
35
34
|
this.openMergeTagLibrary();
|
|
36
35
|
}
|
|
37
|
-
/**
|
|
38
|
-
* Called when Stripo detects merge tag interactions
|
|
39
|
-
* This is the key method that receives notifications about merge tag clicks
|
|
40
|
-
* @param name - Attribute name (e.g., 'mergeTag')
|
|
41
|
-
* @param value - MergeTag object with label, value, selStart, selEnd, etc.
|
|
42
|
-
*/
|
|
43
|
-
onAttributeUpdated(t, e) {
|
|
44
|
-
if (t !== "mergeTag" || !(e != null && e.value))
|
|
45
|
-
return;
|
|
46
|
-
const n = d(e), i = this._getLastClickedPosition();
|
|
47
|
-
this.lastClickedElement = null, this.lastClickedFrame = null, this._openDynamicContentLibrary(n, i);
|
|
48
|
-
}
|
|
49
36
|
openMergeTagLibrary() {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
* Dispatches event with dynamic content data and position
|
|
56
|
-
*/
|
|
57
|
-
_openDynamicContentLibrary(t, e) {
|
|
58
|
-
this.mergeTagsLibrary || (this.mergeTagsLibrary = new y()), this.mergeTagsLibrary.openMergeTagsLibrary(
|
|
59
|
-
t,
|
|
60
|
-
(n) => {
|
|
61
|
-
n.text && n.value ? this.api.triggerValueChange(m([n])[0]) : this.api.triggerValueChange(null);
|
|
62
|
-
},
|
|
63
|
-
e
|
|
37
|
+
this.mergeTagsLibrary || (this.mergeTagsLibrary = new T()), this.mergeTagsLibrary.openMergeTagsLibrary(
|
|
38
|
+
this.selectedDynamicContent,
|
|
39
|
+
(e) => {
|
|
40
|
+
this.api.onValueChanged(m([e])[0]);
|
|
41
|
+
}
|
|
64
42
|
);
|
|
65
43
|
}
|
|
66
|
-
/**
|
|
67
|
-
* Gets the button's position on the screen
|
|
68
|
-
* Used to position the modal or anything else near the button
|
|
69
|
-
*/
|
|
70
|
-
_getButtonPosition() {
|
|
71
|
-
if (!this.mergeTagsButton)
|
|
72
|
-
return { x: 0, y: 0, width: 0, height: 0 };
|
|
73
|
-
const { x: t, y: e, width: n, height: i } = this.mergeTagsButton.getBoundingClientRect();
|
|
74
|
-
return { x: t, y: e, width: n, height: i };
|
|
75
|
-
}
|
|
76
|
-
/**
|
|
77
|
-
* Sets up coordinate tracking for merge tag clicks in the iframe
|
|
78
|
-
* Workaround from Stripo intercepting click events - tracks mousedown events instead
|
|
79
|
-
*/
|
|
80
|
-
_setupCoordinateTracking() {
|
|
81
|
-
var e;
|
|
82
|
-
const t = this._getEditorFrame();
|
|
83
|
-
(e = t == null ? void 0 : t.contentWindow) != null && e.document && (this.mousedownListener = (n) => {
|
|
84
|
-
const i = this._findMergeTagElement(n.target);
|
|
85
|
-
i && (this.lastClickedElement = i, this.lastClickedFrame = t);
|
|
86
|
-
}, t.contentWindow.document.addEventListener("mousedown", this.mousedownListener));
|
|
87
|
-
}
|
|
88
|
-
/**
|
|
89
|
-
* Gets the editor iframe element
|
|
90
|
-
*/
|
|
91
|
-
_getEditorFrame() {
|
|
92
|
-
var n;
|
|
93
|
-
const t = document.querySelector("ui-editor");
|
|
94
|
-
if (!(t != null && t.shadowRoot))
|
|
95
|
-
return null;
|
|
96
|
-
const e = t.shadowRoot.querySelector("iframe");
|
|
97
|
-
return (n = e == null ? void 0 : e.contentWindow) != null && n.document ? e : null;
|
|
98
|
-
}
|
|
99
|
-
/**
|
|
100
|
-
* Finds merge tag element in the element tree
|
|
101
|
-
*/
|
|
102
|
-
_findMergeTagElement(t) {
|
|
103
|
-
return t.closest(".target, .esd-merge-tag");
|
|
104
|
-
}
|
|
105
|
-
/**
|
|
106
|
-
* Gets the position of the last clicked element, calculated on-demand
|
|
107
|
-
* This ensures we always use the correct element's position even with rapid clicks
|
|
108
|
-
*/
|
|
109
|
-
_getLastClickedPosition() {
|
|
110
|
-
if (!(!this.lastClickedElement || !this.lastClickedFrame))
|
|
111
|
-
return this._calculateAbsolutePosition(this.lastClickedFrame, this.lastClickedElement);
|
|
112
|
-
}
|
|
113
|
-
/**
|
|
114
|
-
* Calculates absolute position of element relative to page
|
|
115
|
-
*/
|
|
116
|
-
_calculateAbsolutePosition(t, e) {
|
|
117
|
-
const n = t.getBoundingClientRect(), i = e.getBoundingClientRect();
|
|
118
|
-
return {
|
|
119
|
-
x: n.x + i.x,
|
|
120
|
-
y: n.y + i.y,
|
|
121
|
-
width: i.width,
|
|
122
|
-
height: i.height
|
|
123
|
-
};
|
|
124
|
-
}
|
|
125
|
-
/**
|
|
126
|
-
* Cleans up the coordinate tracking event listener
|
|
127
|
-
*/
|
|
128
|
-
_cleanupCoordinateTracking() {
|
|
129
|
-
var e;
|
|
130
|
-
if (!this.mousedownListener)
|
|
131
|
-
return;
|
|
132
|
-
const t = this._getEditorFrame();
|
|
133
|
-
(e = t == null ? void 0 : t.contentWindow) != null && e.document && t.contentWindow.document.removeEventListener("mousedown", this.mousedownListener), this.mousedownListener = null;
|
|
134
|
-
}
|
|
135
|
-
/**
|
|
136
|
-
* Returns the HTML template for the "Add Dynamic Content" button
|
|
137
|
-
* This button is placed in the merge tags selector UI
|
|
138
|
-
*/
|
|
139
44
|
getTemplate() {
|
|
140
45
|
return `
|
|
141
46
|
<div>
|
|
142
|
-
<${
|
|
47
|
+
<${r.BUTTON}
|
|
143
48
|
id="guido__btn-add-dynamic-content"
|
|
144
49
|
class="btn btn-primary"
|
|
145
|
-
${
|
|
146
|
-
<${
|
|
147
|
-
</${
|
|
50
|
+
${l.BUTTON.name}="${y}">
|
|
51
|
+
<${r.ICON} src="plus" class="icon icon-button color-primary">
|
|
52
|
+
</${r.ICON}>
|
|
148
53
|
${this.api.translate("Add Dynamic Content")}
|
|
149
|
-
</${
|
|
54
|
+
</${r.BUTTON}>
|
|
150
55
|
</div>`;
|
|
151
56
|
}
|
|
152
57
|
}
|
|
153
58
|
export {
|
|
154
59
|
p as DynamicContentTagRegistry,
|
|
155
|
-
|
|
60
|
+
C as DynamicContentUiElementExtension
|
|
156
61
|
};
|