@templatical/editor 0.6.5 → 0.6.7

package/dist/templatical-editor.js

@@ -1,17 +1,17 @@
-import { A as e, B as t, O as n, S as r, X as i, _ as a, at as o, b as s, f as c, h as l, k as ee, m as u, n as d, o as f, ot as p, p as m, rt as h, st as g, t as te, v as _, z as ne } from "./vue.runtime.esm-bundler-Bxqkjqhc.js";
-import { r as v } from "./timeouts-BSGxjuUF.js";
-import { L as y, t as b, x } from "./useEditorCore-DLd-5qMg.js";
-import { a as S, c as C, i as w, l as T, n as E, o as re, r as D, s as O, t as k } from "./styles-CwJQsnSp.js";
-import { t as A } from "./_plugin-vue_export-helper-B0hnzhyu.js";
+import { A as e, B as t, O as n, S as r, X as i, _ as a, at as o, b as s, f as c, h as l, k as u, m as d, n as f, o as p, ot as m, p as h, rt as g, st as _, t as v, v as y, z as b } from "./vue.runtime.esm-bundler-Bxqkjqhc.js";
+import { r as x } from "./timeouts-BSGxjuUF.js";
+import { L as S, t as C, x as w } from "./useEditorCore-CnXrv71D.js";
+import { a as T, c as E, i as D, l as O, n as k, o as ee, r as te, s as ne, t as re } from "./styles-BgmKdc2x.js";
+import { t as ie } from "./_plugin-vue_export-helper-B0hnzhyu.js";
 //#region src/Editor.vue?vue&type=script&setup=true&lang.ts
-var j = ["data-tpl-theme"], M = {
+var ae = ["data-tpl-theme"], oe = {
 	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)"
 	}
-}, N = { class: "tpl:flex tpl:items-center tpl:justify-center tpl:gap-10" }, P = { class: "tpl:sticky tpl:top-0 tpl:z-40 tpl:h-0" }, F = { class: "tpl:flex tpl:justify-center tpl:p-8" }, I = ["aria-label"], L = /* @__PURE__ */ A(/* @__PURE__ */ s({
+}, A = { class: "tpl:flex tpl:items-center tpl:justify-center tpl:gap-10" }, j = { class: "tpl:sticky tpl:top-0 tpl:z-40 tpl:h-0" }, M = { class: "tpl:flex tpl:justify-center tpl:p-8" }, N = ["aria-label"], P = /* @__PURE__ */ ie(/* @__PURE__ */ s({
 	__name: "Editor",
 	props: {
 		config: {},
@@ -19,11 +19,11 @@ var j = ["data-tpl-theme"], M = {
 		fontsManager: {}
 	},
 	setup(r, { expose: i }) {
-		let s = r, d = y({
+		let s = r, f = S({
 			content: s.config.content,
 			templateDefaults: s.config.templateDefaults
-		}), v = b({
-			editor: d,
+		}), x = C({
+			editor: f,
 			config: {
 				uiTheme: s.config.uiTheme,
 				theme: s.config.theme,
@@ -32,67 +32,67 @@ var j = ["data-tpl-theme"], M = {
 				mergeTags: s.config.mergeTags,
 				displayConditions: s.config.displayConditions,
 				onRequestMedia: s.config.onRequestMedia,
-				accessibility: C(s.config),
-				onSave: s.config.onSave ? () => s.config.onSave(JSON.parse(JSON.stringify(d.state.content))) : void 0
+				accessibility: E(s.config),
+				onSave: s.config.onSave ? () => s.config.onSave(JSON.parse(JSON.stringify(f.state.content))) : void 0
 			},
 			translations: s.translations,
 			fontsManager: s.fontsManager,
-			autoSaveOptions: s.config.onChange ? { onChange: () => s.config.onChange(JSON.parse(JSON.stringify(d.state.content))) } : null
+			autoSaveOptions: s.config.onChange ? { onChange: () => s.config.onChange(JSON.parse(JSON.stringify(f.state.content))) } : null
 		});
 		return n(async () => {
 			await s.fontsManager.loadCustomFonts();
-		}), ee(() => {
-			s.fontsManager.cleanupFontLinks(), v.destroy();
+		}), u(() => {
+			s.fontsManager.cleanupFontLinks(), x.destroy();
 		}), i({
-			getContent: () => d.content.value,
-			setContent: (e) => d.setContent(e),
-			setTheme: (e) => d.setUiTheme(e),
-			renderCustomBlock: v.registry.renderCustomBlock
+			getContent: () => f.content.value,
+			setContent: (e) => f.setContent(e),
+			setTheme: (e) => f.setUiTheme(e),
+			renderCustomBlock: x.registry.renderCustomBlock
 		}), (n, i) => (e(), l("div", {
-			class: o(["tpl tpl:relative tpl:h-full tpl:overflow-hidden", { "tpl:dark": h(d).state.darkMode }]),
-			"data-tpl-theme": h(v).resolvedTheme.value,
-			style: p(h(v).themeStyles.value)
+			class: o(["tpl tpl:relative tpl:h-full tpl:overflow-hidden", { "tpl:dark": g(f).state.darkMode }]),
+			"data-tpl-theme": g(x).resolvedTheme.value,
+			style: m(g(x).themeStyles.value)
 		}, [
-			c("header", M, [
+			c("header", oe, [
 				i[5] ||= c("div", { class: "tpl:flex tpl:items-center tpl:gap-2.5" }, null, -1),
-				c("div", N, [
-					_(w, {
-						viewport: h(d).state.viewport,
-						onChange: h(d).setViewport
+				c("div", A, [
+					y(D, {
+						viewport: g(f).state.viewport,
+						onChange: g(f).setViewport
 					}, null, 8, ["viewport", "onChange"]),
-					_(E, {
-						"dark-mode": h(d).state.darkMode,
-						onChange: h(d).setDarkMode
+					y(k, {
+						"dark-mode": g(f).state.darkMode,
+						onChange: g(f).setDarkMode
 					}, null, 8, ["dark-mode", "onChange"]),
-					_(D, {
-						"preview-mode": h(d).state.previewMode,
-						onChange: h(d).setPreviewMode
+					y(te, {
+						"preview-mode": g(f).state.previewMode,
+						onChange: g(f).setPreviewMode
 					}, null, 8, ["preview-mode", "onChange"])
 				]),
 				i[6] ||= c("div", { class: "tpl:flex tpl:min-w-[200px] tpl:items-center tpl:justify-end tpl:gap-3" }, null, -1)
 			]),
-			t(_(re, null, null, 512), [[f, !h(d).state.previewMode]]),
+			t(y(ee, null, null, 512), [[p, !g(f).state.previewMode]]),
 			c("div", {
-				class: o(["tpl-body tpl:absolute tpl:bottom-0 tpl:overflow-auto tpl:bg-[var(--tpl-canvas-bg)]", [h(d).state.previewMode ? "tpl:left-0 tpl:right-0" : "tpl:left-12 tpl:right-[320px]", "tpl:top-14"]]),
+				class: o(["tpl-body tpl:absolute tpl:bottom-0 tpl:overflow-auto tpl:bg-[var(--tpl-canvas-bg)]", [g(f).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)" }
-			}, [c("div", P, [_(te, { name: "tpl-restore-btn" }, {
-				default: ne(() => [h(v).conditionPreview.hasHiddenBlocks.value ? (e(), l("button", {
+			}, [c("div", j, [y(v, { name: "tpl-restore-btn" }, {
+				default: b(() => [g(x).conditionPreview.hasHiddenBlocks.value ? (e(), l("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) => h(v).conditionPreview.reset()
-				}, [_(h(T), {
+					onClick: i[0] ||= (e) => g(x).conditionPreview.reset()
+				}, [y(g(O), {
 					size: 13,
 					"stroke-width": 2
-				}), a(" " + g(h(v).t.blockSettings.restoreHiddenBlocks), 1)])) : u("", !0)]),
+				}), a(" " + _(g(x).t.blockSettings.restoreHiddenBlocks), 1)])) : d("", !0)]),
 				_: 1
-			})]), c("div", F, [_(O, {
-				viewport: h(d).state.viewport,
-				content: h(d).content.value,
-				"selected-block-id": h(d).state.selectedBlockId,
-				"dark-mode": h(d).state.darkMode,
-				"preview-mode": h(d).state.previewMode,
-				onSelectBlock: h(d).selectBlock
+			})]), c("div", M, [y(ne, {
+				viewport: g(f).state.viewport,
+				content: g(f).content.value,
+				"selected-block-id": g(f).state.selectedBlockId,
+				"dark-mode": g(f).state.darkMode,
+				"preview-mode": g(f).state.previewMode,
+				onSelectBlock: g(f).selectBlock
 			}, null, 8, [
 				"viewport",
 				"content",
@@ -101,57 +101,80 @@ var j = ["data-tpl-theme"], M = {
 				"preview-mode",
 				"onSelectBlock"
 			])])], 2),
-			r.config.branding === !1 ? u("", !0) : (e(), m(k, {
+			r.config.branding === !1 ? d("", !0) : (e(), h(re, {
 				key: 0,
-				"position-class": [h(d).state.previewMode ? "tpl:left-0 tpl:right-0" : "tpl:left-12 tpl:right-[320px]"]
+				"position-class": [g(f).state.previewMode ? "tpl:left-0 tpl:right-0" : "tpl:left-12 tpl:right-[320px]"]
 			}, null, 8, ["position-class"])),
 			c("div", {
 				class: "tpl-sr-only",
 				role: "status",
 				"aria-live": "polite",
 				"aria-atomic": "true",
-				"aria-label": h(v).t.landmarks.reorderAnnouncements
-			}, g(h(v).keyboardReorder.announcement.value), 9, I),
-			t(_(S, {
-				"selected-block": h(d).selectedBlock.value,
-				settings: h(d).content.value.settings,
-				onUpdateBlock: i[1] ||= (e) => h(d).updateBlock(h(d).state.selectedBlockId, e),
+				"aria-label": g(x).t.landmarks.reorderAnnouncements
+			}, _(g(x).keyboardReorder.announcement.value), 9, N),
+			t(y(T, {
+				"selected-block": g(f).selectedBlock.value,
+				settings: g(f).content.value.settings,
+				onUpdateBlock: i[1] ||= (e) => g(f).updateBlock(g(f).state.selectedBlockId, e),
 				onDeleteBlock: i[2] ||= () => {
-					h(d).state.selectedBlockId && h(v).blockActions.deleteBlock(h(d).state.selectedBlockId);
+					g(f).state.selectedBlockId && g(x).blockActions.deleteBlock(g(f).state.selectedBlockId);
 				},
 				onDuplicateBlock: i[3] ||= () => {
-					h(d).selectedBlock.value && h(v).blockActions.duplicateBlock(h(d).selectedBlock.value);
+					g(f).selectedBlock.value && g(x).blockActions.duplicateBlock(g(f).selectedBlock.value);
 				},
-				onUpdateSettings: i[4] ||= (e) => h(d).updateSettings(e)
-			}, null, 8, ["selected-block", "settings"]), [[f, !h(d).state.previewMode]])
-		], 14, j));
+				onUpdateSettings: i[4] ||= (e) => g(f).updateSettings(e)
+			}, null, 8, ["selected-block", "settings"]), [[p, !g(f).state.previewMode]])
+		], 14, ae));
 	}
-}), [["__scopeId", "data-v-9ffdcb5e"]]), R = /* @__PURE__ */ Object.assign({
-	"./locales/de.ts": () => import("./de-Brqvgr43.js"),
-	"./locales/en.ts": () => import("./en-WDVp87TE.js")
-}), z = /* @__PURE__ */ Object.assign({
+}), [["__scopeId", "data-v-9ffdcb5e"]]), F = /* @__PURE__ */ Object.assign({
+	"./locales/de.ts": () => import("./de-DcVOh9Fp.js"),
+	"./locales/en.ts": () => import("./en-TZVJ_f6v.js"),
+	"./locales/pt-BR.ts": () => import("./pt-BR-BMGasLBa.js")
+}), I = /* @__PURE__ */ Object.assign({
 	"./locales/cloud/de.ts": () => import("./de-DCaaCE5s.js"),
-	"./locales/cloud/en.ts": () => import("./en-DXCyK4-X.js")
+	"./locales/cloud/en.ts": () => import("./en-DXCyK4-X.js"),
+	"./locales/cloud/pt-BR.ts": () => import("./pt-BR-Vq7D7c11.js")
 });
-function B(e) {
+function L(e) {
 	return Object.keys(e).map((e) => e.match(/\/([^/]+)\.ts$/)?.[1]).filter((e) => !!e);
 }
-var V = B(R), H = B(z);
-function U(e) {
-	return e.split("-")[0].toLowerCase();
+var R = L(F), z = L(I);
+function B(e) {
+	return e.trim().replace(/_/g, "-").toLowerCase();
+}
+function V(e, t) {
+	let n = B(e);
+	return t.find((e) => B(e) === n);
+}
+function H(e) {
+	return B(e).split("-")[0];
+}
+function U(e, t) {
+	return V(e, t) ?? V(H(e), t);
 }
 function W(e, t) {
-	let n = U(e);
-	return t.includes(n) ? n : "en";
+	return U(e, t) ?? "en";
 }
 async function G(e) {
-	let t = R[`./locales/${W(e, V)}.ts`];
+	let t = F[`./locales/${W(e, R)}.ts`];
 	return (await t()).default;
 }
 async function K(e) {
-	let t = z[`./locales/cloud/${W(e, H)}.ts`];
+	let t = I[`./locales/cloud/${W(e, z)}.ts`];
 	return (await t()).default;
 }
+function se(e) {
+	return U(e, R) !== void 0;
+}
+function ce(e) {
+	return U(e, z) !== void 0;
+}
+function le() {
+	return [...R];
+}
+function ue() {
+	return [...z];
+}
 //#endregion
 //#region src/utils/toMjml.ts
 async function q(e) {
@@ -166,12 +189,12 @@ async function q(e) {
 //#endregion
 //#region src/index.ts
 var J = null, Y = i(null);
-async function ie(e) {
+async function de(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 G(e.locale ?? "en"), i = x(e.fonts);
-	J && Q(), J = d({ setup() {
-		return () => r(L, {
+	let n = await G(e.locale ?? "en"), i = w(e.fonts);
+	J && Q(), J = f({ setup() {
+		return () => r(P, {
 			config: e,
 			translations: n,
 			fontsManager: i,
@@ -197,15 +220,15 @@ async function ie(e) {
 	return a;
 }
 var X = null, Z = i(null);
-async function ae(e) {
+async function fe(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("./CloudEditor-_GaYluN7.js"), [i, a] = await Promise.all([G(e.locale ?? "en"), K(e.locale ?? "en")]), o = x(e.fonts);
+	let { default: n } = await import("./CloudEditor-DYYaScFe.js"), [i, a] = await Promise.all([G(e.locale ?? "en"), K(e.locale ?? "en")]), o = w(e.fonts);
 	return X && $(), await new Promise((s, c) => {
 		let l = setTimeout(() => {
 			c(/* @__PURE__ */ Error("[Templatical] Cloud editor initialization timed out"));
-		}, v);
-		X = d({ setup() {
+		}, x);
+		X = f({ setup() {
 			return () => r(n, {
 				config: e,
 				translations: i,
@@ -246,4 +269,4 @@ function $() {
 	X && (X.unmount(), X = null, Z.value = null);
 }
 //#endregion
-export { ie as init, ae as initCloud, Q as unmount, x as useFonts };
+export { H as getBaseLocale, ue as getSupportedCloudLocales, le as getSupportedLocales, de as init, fe as initCloud, ce as isCloudLocaleSupported, se as isLocaleSupported, Q as unmount, w as useFonts };

package/dist/{useEditorCore-DLd-5qMg.js → useEditorCore-CnXrv71D.js}

@@ -1564,7 +1564,7 @@ var Kn = ["innerHTML"], qn = /* @__PURE__ */ y({
 		viewport: {}
 	},
 	setup(t) {
-		let n = t, r = se(() => import("./ParagraphEditor-C8IP9HOZ.js")), { isEditing: i, blockRef: a, toolbarPosition: o, resolvedContent: s, handleDoubleClick: c, handleEditorDone: l } = Gn(() => n.block.content);
+		let n = t, r = se(() => import("./ParagraphEditor-DjDiUzmv.js")), { isEditing: i, blockRef: a, toolbarPosition: o, resolvedContent: s, handleDoubleClick: c, handleEditorDone: l } = Gn(() => n.block.content);
 		return (n, u) => (e(), w("div", {
 			ref_key: "blockRef",
 			ref: a,
@@ -1756,41 +1756,51 @@ var Xn = ["data-block-id", "data-block-type"], Zn = ["aria-label"], Qn = [
 			l(n.$slots, "default", {}, void 0, !0)
 		], 14, Xn));
 	}
-}), [["__scopeId", "data-v-850614e7"]]), lr = ["innerHTML"], ur = /* @__PURE__ */ y({
+}), [["__scopeId", "data-v-850614e7"]]);
+//#endregion
+//#region src/utils/unwrapParagraph.ts
+function lr(e) {
+	let t = e.match(/^\s*<p\b[^>]*>([\s\S]*)<\/p>\s*$/);
+	return !t || /<\/p>\s*<p\b/i.test(t[1]) ? e : t[1];
+}
+//#endregion
+//#region src/components/blocks/TitleBlock.vue
+var ur = /* @__PURE__ */ y({
 	__name: "TitleBlock",
 	props: {
 		block: {},
 		viewport: {}
 	},
 	setup(t) {
-		let n = t, r = se(() => import("./TitleEditor-21D8_OUQ.js")), { isEditing: i, blockRef: a, toolbarPosition: o, resolvedContent: s, handleDoubleClick: c, handleEditorDone: l } = Gn(() => n.block.content), u = x(() => {
+		let n = t, r = se(() => import("./TitleEditor-BCV5k6wj.js")), { isEditing: a, blockRef: o, toolbarPosition: s, resolvedContent: c, handleDoubleClick: l, handleEditorDone: u } = Gn(() => n.block.content), d = x(() => {
 			let e = {
 				fontSize: `${De[n.block.level]}px`,
 				color: n.block.color,
 				textAlign: n.block.textAlign
 			};
 			return n.block.fontFamily && (e.fontFamily = n.block.fontFamily), e;
-		});
-		return (n, d) => (e(), w("div", {
+		}), f = x(() => `h${n.block.level}`), p = x(() => lr(c.value));
+		return (n, c) => (e(), w("div", {
 			ref_key: "blockRef",
-			ref: a,
+			ref: o,
 			class: "tpl:min-h-[1em] tpl:w-full",
-			style: A(u.value),
-			onDblclick: d[0] ||= (...e) => j(c) && j(c)(...e)
-		}, [j(i) ? (e(), ne(j(r), {
+			style: A(d.value),
+			onDblclick: c[0] ||= (...e) => j(l) && j(l)(...e)
+		}, [j(a) ? (e(), ne(j(r), {
 			key: 0,
 			block: t.block,
-			"toolbar-position": j(o),
-			onDone: j(l)
+			"toolbar-position": j(s),
+			onDone: j(u)
 		}, null, 8, [
 			"block",
 			"toolbar-position",
 			"onDone"
-		])) : (e(), w("div", {
+		])) : (e(), ne(i(f.value), {
 			key: 1,
-			class: "tpl-text-content tpl:outline-none [&_a]:tpl:underline [&_p]:tpl:m-0 [&_p]:tpl:mb-2 [&_p:last-child]:tpl:mb-0",
-			innerHTML: j(s)
-		}, null, 8, lr))], 36));
+			class: "tpl-text-content tpl:m-0 tpl:font-[inherit] tpl:text-[length:inherit] tpl:leading-tight tpl:outline-none [&_a]:tpl:underline [&_p]:tpl:m-0 [&_p]:tpl:mb-2 [&_p:last-child]:tpl:mb-0",
+			style: { color: "inherit" },
+			innerHTML: p.value
+		}, null, 8, ["innerHTML"]))], 36));
 	}
 }), dr = Object.defineProperty, fr = Object.getOwnPropertySymbols, pr = Object.prototype.hasOwnProperty, mr = Object.prototype.propertyIsEnumerable, hr = (e, t, n) => t in e ? dr(e, t, {
 	enumerable: !0,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@templatical/editor",
   "description": "Vue 3 visual drag-and-drop email editor powered by Templatical",
-  "version": "0.6.5",
+  "version": "0.6.7",
   "bugs": "https://github.com/templatical/sdk/issues",
   "devDependencies": {
     "@lucide/vue": "^1.11.0",
@@ -33,9 +33,9 @@
     "vue": "^3.5.33",
     "vue-draggable-plus": "^0.6.0",
     "vue-tsc": "^3.2.7",
-    "@templatical/core": "0.6.5",
-    "@templatical/quality": "0.6.5",
-    "@templatical/types": "0.6.5"
+    "@templatical/core": "0.6.7",
+    "@templatical/quality": "0.6.7",
+    "@templatical/types": "0.6.7"
   },
   "exports": {
     ".": {
@@ -63,9 +63,9 @@
   "license": "SEE LICENSE IN LICENSE",
   "module": "./dist/templatical-editor.js",
   "peerDependencies": {
-    "@templatical/media-library": "0.6.5",
-    "@templatical/quality": "0.6.5",
-    "@templatical/renderer": "0.6.5"
+    "@templatical/media-library": "0.6.7",
+    "@templatical/quality": "0.6.7",
+    "@templatical/renderer": "0.6.7"
   },
   "peerDependenciesMeta": {
     "@templatical/renderer": {