@aswin.dev/editor 0.7.0 → 0.7.2

package/dist/cdn/editor.js

@@ -1,218 +1,282 @@
-import { $ as e, H as t, M as n, N as r, S as i, U as a, _ as o, at as s, b as c, c as l, ct as ee, g as u, h as d, j as f, lt as p, m, n as te, r as h, st as g, w as _, y as v } from "./chunks/draggable-Bcb86AsV.js";
-import { J as y, Ln as b, dn as x, k as S, tt as C } from "./chunks/features-DEMb13KS.js";
-import { C as w } from "./chunks/icons-CsLTcirh.js";
-import { a as ne, c as re, i as ie, n as T, o as E, r as D, s as O, t as k } from "./chunks/styles-BHJULjNR.js";
+import { C as e, F as t, G as n, M as r, N as i, P as a, T as o, W as s, _ as c, b as l, ct as u, dt as d, f, ft as p, g as m, h, l as g, m as _, n as ee, r as v, tt as y, ut as b, v as x, x as S } from "./chunks/draggable-C-1_gch3.js";
+import { Nn as te, Pn as ne, Sn as re, Y as C, cn as w, k as ie, nn as ae, nt as T, rr as E } from "./chunks/features-DIBEo4xl.js";
+import { T as D } from "./chunks/icons-C1Gg-ov-.js";
+import { a as oe, c as se, d as ce, f as le, h as ue, i as de, l as fe, m as pe, n as me, o as O, p as k, r as A, s as j, t as M, u as N } from "./chunks/styles-CQR6ed13.js";
 //#region src/Editor.vue?vue&type=script&setup=true&lang.ts
-var A = ["data-tpl-theme"], j = {
+var P = ["data-tpl-theme"], F = {
 	class: "tpl-header tpl:absolute tpl:top-0 tpl:right-0 tpl:left-0 tpl:z-50 tpl:grid tpl:h-14 tpl:grid-cols-[1fr_auto_1fr] tpl:items-center tpl:px-4 tpl:shadow-[var(--tpl-shadow-md)] tpl:border-b tpl:border-[var(--tpl-border)]",
 	style: {
 		"background-color": "color-mix(in srgb, var(--tpl-bg) 80%, transparent)",
 		"backdrop-filter": "blur(12px)",
 		"-webkit-backdrop-filter": "blur(12px)"
 	}
-}, M = { class: "tpl:flex tpl:items-center tpl:justify-center tpl:gap-10" }, N = { class: "tpl:sticky tpl:top-0 tpl:z-40 tpl:h-0" }, P = { class: "tpl:flex tpl:justify-center tpl:p-8" }, F = ["aria-label"], I = /* @__PURE__ */ C(/* @__PURE__ */ i({
+}, I = { class: "tpl:flex tpl:items-center tpl:justify-center tpl:gap-10" }, L = { class: "tpl:sticky tpl:top-0 tpl:z-40 tpl:h-0" }, R = { class: "tpl:flex tpl:justify-center tpl:p-8" }, he = ["aria-label"], z = /* @__PURE__ */ T(/* @__PURE__ */ e({
 	__name: "Editor",
 	props: {
 		config: {},
 		translations: {},
 		fontsManager: {}
 	},
-	setup(e, { expose: i }) {
-		let h = e, _ = x({
-			content: h.config.content,
-			templateDefaults: h.config.templateDefaults
-		}), y = S({
-			editor: _,
+	setup(e, { expose: o }) {
+		let v = y(null), C = e, T = re({
+			content: C.config.content,
+			templateDefaults: C.config.templateDefaults
+		}), E = ie({
+			editor: T,
 			config: {
-				uiTheme: h.config.uiTheme,
-				theme: h.config.theme,
-				blockDefaults: h.config.blockDefaults,
-				customBlocks: h.config.customBlocks,
-				mergeTags: h.config.mergeTags,
-				displayConditions: h.config.displayConditions,
-				onRequestMedia: h.config.onRequestMedia,
-				accessibility: re(h.config),
-				onSave: h.config.onSave ? () => h.config.onSave(JSON.parse(JSON.stringify(_.state.content))) : void 0
+				uiTheme: C.config.uiTheme,
+				theme: C.config.theme,
+				blockDefaults: C.config.blockDefaults,
+				customBlocks: C.config.customBlocks,
+				mergeTags: C.config.mergeTags,
+				displayConditions: C.config.displayConditions,
+				onRequestMedia: C.config.onRequestMedia,
+				editorType: C.config.editorType,
+				accessibility: ue(C.config),
+				onSave: C.config.onSave ? () => C.config.onSave(JSON.parse(JSON.stringify(T.state.content))) : void 0
 			},
-			translations: h.translations,
-			fontsManager: h.fontsManager,
-			autoSaveOptions: h.config.onChange ? { onChange: () => h.config.onChange(JSON.parse(JSON.stringify(_.state.content))) } : null
+			translations: C.translations,
+			fontsManager: C.fontsManager,
+			autoSaveOptions: C.config.onChange ? { onChange: () => C.config.onChange(JSON.parse(JSON.stringify(T.state.content))) } : null
 		});
-		return f(async () => {
-			await h.fontsManager.loadCustomFonts();
-		}), n(() => {
-			h.fontsManager.cleanupFontLinks(), y.destroy();
-		}), i({
-			getContent: () => _.content.value,
-			setContent: (e) => _.setContent(e),
-			setTheme: (e) => _.setUiTheme(e),
-			renderCustomBlock: y.registry.renderCustomBlock
-		}), (n, i) => (r(), o("div", {
-			class: g(["tpl tpl:relative tpl:h-full tpl:overflow-hidden", { "tpl:dark": s(_).state.darkMode }]),
-			"data-tpl-theme": s(y).resolvedTheme.value,
-			style: ee(s(y).themeStyles.value)
+		r(async () => {
+			if (await C.fontsManager.loadCustomFonts(), w(C.config.editorType) === "popup" && !T.content.value.settings.popup) {
+				let e = ne();
+				T.updateSettings({
+					popup: e,
+					width: te[e.design.sizePreset]
+				});
+			}
+		}), i(() => {
+			C.fontsManager.cleanupFontLinks(), E.destroy();
+		});
+		let O = y("blocks");
+		t(ae, O);
+		let z = _(() => w(C.config.editorType) === "popup"), B = _(() => z.value && O.value === "displayRules"), V = _(() => z.value && O.value === "schedule"), H = _(() => O.value === "design"), U = _(() => z.value && (B.value || V.value || H.value)), W = _(() => {
+			if (T.state.previewMode) return ["tpl:left-0", "tpl:right-0"];
+			if (!z.value) return ["tpl:left-12", "tpl:right-[320px]"];
+			let e;
+			return e = O.value === "blocks" ? "tpl:left-[272px]" : H.value ? "tpl:left-[392px]" : "tpl:left-[72px]", [e, U.value ? "tpl:right-0" : "tpl:right-[320px]"];
+		}), G = _(() => B.value || V.value);
+		return o({
+			getContent: () => T.content.value,
+			setContent: (e) => T.setContent(e),
+			setTheme: (e) => T.setUiTheme(e),
+			undo: () => E.history.undo(),
+			redo: () => E.history.redo(),
+			canUndo: () => E.history.canUndo.value,
+			canRedo: () => E.history.canRedo.value,
+			renderCustomBlock: E.registry.renderCustomBlock,
+			startTour: (e) => v.value?.start(e),
+			dismissTour: () => v.value?.dismiss(),
+			resetTourDismissed: () => de(C.config.tour),
+			isTourDismissed: () => C.config.tour ? oe(C.config.tour) : !0
+		}), (t, r) => (a(), x("div", {
+			class: b(["tpl tpl:relative tpl:h-full tpl:overflow-hidden", { "tpl:dark": u(T).state.darkMode }]),
+			"data-tpl-theme": u(E).resolvedTheme.value,
+			style: d(u(E).themeStyles.value)
 		}, [
-			m("header", j, [
-				i[5] ||= m("div", { class: "tpl:flex tpl:items-center tpl:gap-2.5" }, null, -1),
-				m("div", M, [
-					c(ie, {
-						viewport: s(_).state.viewport,
-						onChange: s(_).setViewport
+			h("header", F, [
+				r[5] ||= h("div", { class: "tpl:flex tpl:items-center tpl:gap-2.5" }, null, -1),
+				h("div", I, [
+					S(ce),
+					S(N, {
+						viewport: u(T).state.viewport,
+						onChange: u(T).setViewport
 					}, null, 8, ["viewport", "onChange"]),
-					c(T, {
-						"dark-mode": s(_).state.darkMode,
-						onChange: s(_).setDarkMode
+					S(se, {
+						"dark-mode": u(T).state.darkMode,
+						onChange: u(T).setDarkMode
 					}, null, 8, ["dark-mode", "onChange"]),
-					c(D, {
-						"preview-mode": s(_).state.previewMode,
-						onChange: s(_).setPreviewMode
+					S(fe, {
+						"preview-mode": u(T).state.previewMode,
+						onChange: u(T).setPreviewMode
 					}, null, 8, ["preview-mode", "onChange"])
 				]),
-				i[6] ||= m("div", { class: "tpl:flex tpl:min-w-[200px] tpl:items-center tpl:justify-end tpl:gap-3" }, null, -1)
+				r[6] ||= h("div", { class: "tpl:flex tpl:min-w-[200px] tpl:items-center tpl:justify-end tpl:gap-3" }, null, -1)
 			]),
-			a(c(E, null, null, 512), [[l, !s(_).state.previewMode]]),
-			m("div", {
-				class: g(["tpl-body tpl:absolute tpl:bottom-0 tpl:overflow-auto tpl:bg-[var(--tpl-canvas-bg)]", [s(_).state.previewMode ? "tpl:left-0 tpl:right-0" : "tpl:left-12 tpl:right-[320px]", "tpl:top-14"]]),
-				style: { transition: "all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)" }
-			}, [m("div", N, [c(te, { name: "tpl-restore-btn" }, {
-				default: t(() => [s(y).conditionPreview.hasHiddenBlocks.value ? (r(), o("button", {
+			n(S(k, null, null, 512), [[g, !u(T).state.previewMode]]),
+			h("div", {
+				class: b(["tpl-body tpl:absolute tpl:bottom-0 tpl:overflow-auto", [...W.value, "tpl:top-14"]]),
+				style: d({
+					transition: "all 300ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+					backgroundColor: G.value ? "var(--tpl-bg)" : "var(--tpl-canvas-bg)"
+				})
+			}, [z.value && O.value === "displayRules" ? (a(), m(me, { key: 0 })) : z.value && O.value === "schedule" ? (a(), m(M, {
+				key: 1,
+				layout: "standalone"
+			})) : (a(), x(f, { key: 2 }, [h("div", L, [S(ee, { name: "tpl-restore-btn" }, {
+				default: s(() => [u(E).conditionPreview.hasHiddenBlocks.value ? (a(), x("button", {
 					key: 0,
 					class: "tpl:absolute tpl:left-1/2 tpl:top-2 tpl:-translate-x-1/2 tpl:inline-flex tpl:items-center tpl:gap-1.5 tpl:rounded-full tpl:border tpl:px-3.5 tpl:py-1.5 tpl:text-xs tpl:font-medium tpl:whitespace-nowrap tpl:shadow-md tpl:hover:opacity-80 tpl:bg-[var(--tpl-warning-light)] tpl:text-[var(--tpl-warning)] tpl:border-[var(--tpl-warning)]",
 					style: { "backdrop-filter": "blur(8px)" },
-					onClick: i[0] ||= (e) => s(y).conditionPreview.reset()
-				}, [c(s(w), {
+					onClick: r[0] ||= (e) => u(E).conditionPreview.reset()
+				}, [S(u(D), {
 					size: 13,
 					"stroke-width": 2
-				}), v(" " + p(s(y).t.blockSettings.restoreHiddenBlocks), 1)])) : u("", !0)]),
+				}), l(" " + p(u(E).t.blockSettings.restoreHiddenBlocks), 1)])) : c("", !0)]),
 				_: 1
-			})]), m("div", P, [c(O, {
-				viewport: s(_).state.viewport,
-				content: s(_).content.value,
-				"selected-block-id": s(_).state.selectedBlockId,
-				"dark-mode": s(_).state.darkMode,
-				"preview-mode": s(_).state.previewMode,
-				onSelectBlock: s(_).selectBlock
+			})]), h("div", R, [S(pe, {
+				viewport: u(T).state.viewport,
+				content: u(T).content.value,
+				"selected-block-id": u(T).state.selectedBlockId,
+				"dark-mode": u(T).state.darkMode,
+				"preview-mode": u(T).state.previewMode,
+				"multi-page-canvas": e.config.multiPageCanvas ?? !1,
+				onSelectBlock: u(T).selectBlock
 			}, null, 8, [
 				"viewport",
 				"content",
 				"selected-block-id",
 				"dark-mode",
 				"preview-mode",
+				"multi-page-canvas",
 				"onSelectBlock"
-			])])], 2),
-			e.config.branding === !1 ? u("", !0) : (r(), d(k, {
+			])])], 64))], 6),
+			e.config.branding === !1 ? c("", !0) : (a(), m(j, {
 				key: 0,
-				"position-class": [s(_).state.previewMode ? "tpl:left-0 tpl:right-0" : "tpl:left-12 tpl:right-[320px]"]
+				"position-class": W.value
 			}, null, 8, ["position-class"])),
-			m("div", {
+			h("div", {
 				class: "tpl-sr-only",
 				role: "status",
 				"aria-live": "polite",
 				"aria-atomic": "true",
-				"aria-label": s(y).t.landmarks.reorderAnnouncements
-			}, p(s(y).keyboardReorder.announcement.value), 9, F),
-			a(c(ne, {
-				"selected-block": s(_).selectedBlock.value,
-				settings: s(_).content.value.settings,
-				onUpdateBlock: i[1] ||= (e) => s(_).updateBlock(s(_).state.selectedBlockId, e),
-				onDeleteBlock: i[2] ||= () => {
-					s(_).state.selectedBlockId && s(y).blockActions.deleteBlock(s(_).state.selectedBlockId);
+				"aria-label": u(E).t.landmarks.reorderAnnouncements
+			}, p(u(E).keyboardReorder.announcement.value), 9, he),
+			n(S(le, {
+				"selected-block": u(T).selectedBlock.value,
+				settings: u(T).content.value.settings,
+				onUpdateBlock: r[1] ||= (e) => u(T).updateBlock(u(T).state.selectedBlockId, e),
+				onDeleteBlock: r[2] ||= () => {
+					u(T).state.selectedBlockId && u(E).blockActions.deleteBlock(u(T).state.selectedBlockId);
 				},
-				onDuplicateBlock: i[3] ||= () => {
-					s(_).selectedBlock.value && s(y).blockActions.duplicateBlock(s(_).selectedBlock.value);
+				onDuplicateBlock: r[3] ||= () => {
+					u(T).selectedBlock.value && u(E).blockActions.duplicateBlock(u(T).selectedBlock.value);
 				},
-				onUpdateSettings: i[4] ||= (e) => s(_).updateSettings(e)
-			}, null, 8, ["selected-block", "settings"]), [[l, !s(_).state.previewMode]])
-		], 14, A));
+				onUpdateSettings: r[4] ||= (e) => u(T).updateSettings(e)
+			}, null, 8, ["selected-block", "settings"]), [[g, !u(T).state.previewMode && !U.value]]),
+			e.config.tour ? (a(), m(A, {
+				key: 1,
+				ref_key: "editorTourRef",
+				ref: v,
+				"tour-config": e.config.tour,
+				"dark-mode": u(T).state.darkMode
+			}, null, 8, ["tour-config", "dark-mode"])) : c("", !0)
+		], 14, P));
 	}
-}), [["__scopeId", "data-v-9ffdcb5e"]]), L = /* @__PURE__ */ Object.assign({
-	"./locales/de.ts": () => import("./chunks/de-D8CnZxV9.js"),
-	"./locales/en.ts": () => import("./chunks/en-8FHaQv4V.js")
-}), R = /* @__PURE__ */ Object.assign({
+}), [["__scopeId", "data-v-040fed1e"]]), B = /* @__PURE__ */ Object.assign({
+	"./locales/de.ts": () => import("./chunks/de-_tooy3Q8.js"),
+	"./locales/en.ts": () => import("./chunks/en-CNqLoIm9.js")
+}), V = /* @__PURE__ */ Object.assign({
 	"./locales/cloud/de.ts": () => import("./chunks/de-RQrZR56a.js"),
 	"./locales/cloud/en.ts": () => import("./chunks/en-Bl1ecfRF.js")
 });
-function z(e) {
+function H(e) {
 	return Object.keys(e).map((e) => e.match(/\/([^/]+)\.ts$/)?.[1]).filter((e) => !!e);
 }
-var B = z(L), V = z(R);
-function H(e) {
+var U = H(B), W = H(V);
+function G(e) {
 	return e.split("-")[0].toLowerCase();
 }
-function U(e, t) {
-	let n = H(e);
+function K(e, t) {
+	let n = G(e);
 	return t.includes(n) ? n : "en";
 }
-async function W(e) {
-	let t = L[`./locales/${U(e, B)}.ts`];
+async function q(e) {
+	let t = B[`./locales/${K(e, U)}.ts`];
 	return (await t()).default;
 }
-async function G(e) {
-	let t = R[`./locales/cloud/${U(e, V)}.ts`];
+async function ge(e) {
+	let t = V[`./locales/cloud/${K(e, W)}.ts`];
 	return (await t()).default;
 }
 //#endregion
 //#region src/utils/toMjml.ts
-async function K(e) {
+async function _e(e) {
 	let t;
 	try {
-		t = await import("./chunks/renderer-CUxvx7ro.js").then((e) => e.t);
+		t = await import("./chunks/renderer-D0L44Vlp.js").then((e) => e.t);
 	} catch {
-		throw Error("[Templatical] toMjml() requires the @templatical/renderer package. Please install it.");
+		throw Error("[Templatical] toMjml() requires the @aswin.dev/renderer package. Please install it.");
 	}
 	return t.renderToMjml(e.getContent(), { renderCustomBlock: e.renderCustomBlock });
 }
 //#endregion
 //#region src/index.ts
-var q = null, J = e(null);
-async function Y(e) {
+var J = null, Y = y(null);
+async function ve(e) {
 	let t = typeof e.container == "string" ? document.querySelector(e.container) : e.container;
 	if (!t) throw Error(`[Templatical] Container element not found: ${e.container}`);
-	let n = await W(e.locale ?? "en"), r = y(e.fonts);
-	q && Q(), q = h({ setup() {
-		return () => _(I, {
+	let n = await q(e.locale ?? "en"), r = C(e.fonts);
+	J && Q(), J = v({ setup() {
+		return () => o(z, {
 			config: e,
 			translations: n,
 			fontsManager: r,
-			ref: J
+			ref: Y
 		});
-	} }), q.mount(t);
+	} }), J.mount(t);
 	let i = {
 		getContent() {
-			return JSON.parse(JSON.stringify(J.value ? J.value.getContent() : e.content));
+			return JSON.parse(JSON.stringify(Y.value ? Y.value.getContent() : e.content));
 		},
 		setContent(t) {
-			J.value && J.value.setContent(t), e.content = t;
+			Y.value && Y.value.setContent(t), e.content = t;
 		},
 		setTheme(e) {
-			J.value && J.value.setTheme(e);
+			Y.value && Y.value.setTheme(e);
 		},
 		unmount: Q,
+		startTour(e) {
+			Y.value?.startTour?.(e);
+		},
+		dismissTour() {
+			Y.value?.dismissTour?.();
+		},
+		resetTourDismissed() {
+			Y.value?.resetTourDismissed?.();
+		},
+		isTourDismissed() {
+			return Y.value?.isTourDismissed?.() ?? !0;
+		},
+		undo() {
+			Y.value?.undo?.();
+		},
+		redo() {
+			Y.value?.redo?.();
+		},
+		canUndo() {
+			return Y.value?.canUndo?.() ?? !1;
+		},
+		canRedo() {
+			return Y.value?.canRedo?.() ?? !1;
+		},
 		renderCustomBlock(e) {
-			return J.value ? J.value.renderCustomBlock(e) : Promise.reject(/* @__PURE__ */ Error("[Templatical] Editor not ready"));
+			return Y.value ? Y.value.renderCustomBlock(e) : Promise.reject(/* @__PURE__ */ Error("[Templatical] Editor not ready"));
 		},
-		toMjml: () => K(i)
+		toMjml: () => _e(i)
 	};
 	return i;
 }
-var X = null, Z = e(null);
-async function ae(e) {
+var X = null, Z = y(null);
+async function ye(e) {
 	let t = typeof e.container == "string" ? document.querySelector(e.container) : e.container;
 	if (!t) throw Error(`[Templatical] Container element not found: ${e.container}`);
-	let { default: n } = await import("./chunks/CloudEditor-D2GsEC_n.js"), [r, i] = await Promise.all([W(e.locale ?? "en"), G(e.locale ?? "en")]), a = y(e.fonts);
-	return X && $(), await new Promise((o, s) => {
-		let c = setTimeout(() => {
-			s(/* @__PURE__ */ Error("[Templatical] Cloud editor initialization timed out"));
-		}, b);
-		X = h({ setup() {
-			return () => _(n, {
+	let { default: n } = await import("./chunks/CloudEditor-Btyr0b0_.js"), [r, i] = await Promise.all([q(e.locale ?? "en"), ge(e.locale ?? "en")]), a = C(e.fonts);
+	return X && $(), await new Promise((s, c) => {
+		let l = setTimeout(() => {
+			c(/* @__PURE__ */ Error("[Templatical] Cloud editor initialization timed out"));
+		}, E);
+		X = v({ setup() {
+			return () => o(n, {
 				config: e,
 				translations: r,
 				cloudTranslations: i,
 				fontsManager: a,
 				ref: Z,
 				onReady: () => {
-					clearTimeout(c), o();
+					clearTimeout(l), s();
 				}
 			});
 		} }), X.mount(t);
@@ -227,6 +291,30 @@ async function ae(e) {
 			Z.value && Z.value.setTheme(e);
 		},
 		unmount: $,
+		startTour(e) {
+			Z.value?.startTour?.(e);
+		},
+		dismissTour() {
+			Z.value?.dismissTour?.();
+		},
+		resetTourDismissed() {
+			Z.value?.resetTourDismissed?.();
+		},
+		isTourDismissed() {
+			return Z.value?.isTourDismissed?.() ?? !0;
+		},
+		undo() {
+			Z.value?.undo?.();
+		},
+		redo() {
+			Z.value?.redo?.();
+		},
+		canUndo() {
+			return Z.value?.canUndo?.() ?? !1;
+		},
+		canRedo() {
+			return Z.value?.canRedo?.() ?? !1;
+		},
 		create(e) {
 			return Z.value ? Z.value.create(e) : Promise.reject(/* @__PURE__ */ Error("[Templatical] Cloud editor not ready"));
 		},
@@ -239,12 +327,12 @@ async function ae(e) {
 	};
 }
 function Q() {
-	q && (q.unmount(), q = null, J.value = null);
+	J && (J.unmount(), J = null, Y.value = null);
 }
 function $() {
 	X && (X.unmount(), X = null, Z.value = null);
 }
 //#endregion
-export { Y as init, ae as initCloud, Q as unmount, y as useFonts };
+export { O as DEFAULT_EDITOR_TOUR_STORAGE_KEY, ve as init, ye as initCloud, Q as unmount, C as useFonts };
 
 //# sourceMappingURL=editor.js.map