@templatical/editor 0.17.1 → 0.19.0

package/dist/{dist-DoRIUsfz.js → dist-BJbqgyPn.js}

@@ -128,7 +128,7 @@ var r = {
 	cellPadding: 8,
 	fontSize: 15,
 	textAlign: "left"
-}, ee = {
+}, h = {
 	targetDate: "",
 	timezone: "UTC",
 	showDays: !0,
@@ -148,7 +148,21 @@ var r = {
 	expiredMessage: "This offer has expired",
 	expiredImageUrl: "",
 	hideOnExpiry: !1
-}, h = {
+}, g = {
+	title: r,
+	paragraph: i,
+	image: a,
+	button: o,
+	divider: s,
+	section: c,
+	video: l,
+	social: u,
+	spacer: d,
+	html: f,
+	menu: p,
+	table: m,
+	countdown: h
+}, _ = {
 	width: 600,
 	backgroundColor: "#ffffff",
 	textColor: "#1a1a1a",
@@ -156,34 +170,34 @@ var r = {
 	fontFamily: "Arial",
 	locale: "en"
 };
-function g(e) {
+function v(e) {
 	return typeof e == "object" && !!e && !Array.isArray(e) && Object.getPrototypeOf(e) === Object.prototype;
 }
-function _(e, t) {
+function y(e, t) {
 	let n = { ...e };
 	for (let r of Object.keys(t)) {
 		let i = e[r], a = t[r];
-		a !== void 0 && (g(i) && g(a) ? n[r] = _(i, a) : n[r] = a);
+		a !== void 0 && (v(i) && v(a) ? n[r] = y(i, a) : n[r] = a);
 	}
 	return n;
 }
-function v(e = "Arial", t) {
+function b(e = "Arial", t) {
 	return {
 		blocks: [],
 		settings: {
-			...h,
+			..._,
 			fontFamily: e,
 			...t
 		}
 	};
 }
-function y(e, t) {
-	return !t || Object.keys(t).length === 0 ? e : _(e, t);
+function x(e, t) {
+	return !t || Object.keys(t).length === 0 ? e : y(e, t);
 }
-function b() {
+function S() {
 	return crypto.randomUUID();
 }
-function x(e = 0) {
+function C(e = 0) {
 	return {
 		top: e,
 		right: e,
@@ -191,135 +205,135 @@ function x(e = 0) {
 		left: e
 	};
 }
-function S(e = 10) {
-	return { padding: x(e) };
+function w(e = 10) {
+	return { padding: C(e) };
 }
-function C(e = {}) {
-	return y({
-		id: b(),
+function T(e = {}) {
+	return x({
+		id: S(),
 		type: "title",
 		...r,
-		styles: S()
+		styles: w()
 	}, e);
 }
-function w(e = {}) {
-	return y({
-		id: b(),
+function E(e = {}) {
+	return x({
+		id: S(),
 		type: "paragraph",
 		...i,
-		styles: S()
+		styles: w()
 	}, e);
 }
-function T(e = {}) {
-	return y({
-		id: b(),
+function D(e = {}) {
+	return x({
+		id: S(),
 		type: "image",
 		...a,
-		styles: S()
+		styles: w()
 	}, e);
 }
-function E(e = {}) {
-	return y({
-		id: b(),
+function O(e = {}) {
+	return x({
+		id: S(),
 		type: "button",
 		...o,
-		styles: S()
+		styles: w()
 	}, e);
 }
-function D(e = {}) {
-	return y({
-		id: b(),
+function k(e = {}) {
+	return x({
+		id: S(),
 		type: "divider",
 		...s,
-		styles: S(20)
+		styles: w(20)
 	}, e);
 }
-function O(e = {}) {
-	return y({
-		id: b(),
+function A(e = {}) {
+	return x({
+		id: S(),
 		type: "section",
 		...c,
 		children: [[]],
-		styles: S(20)
+		styles: w(20)
 	}, e);
 }
-function k(e = {}) {
-	return y({
-		id: b(),
+function j(e = {}) {
+	return x({
+		id: S(),
 		type: "video",
 		...l,
-		styles: S()
+		styles: w()
 	}, e);
 }
-function A(e = {}) {
-	return y({
-		id: b(),
+function M(e = {}) {
+	return x({
+		id: S(),
 		type: "social",
 		icons: [],
 		...u,
-		styles: S()
+		styles: w()
 	}, e);
 }
-function j(e = {}) {
-	return y({
-		id: b(),
+function N(e = {}) {
+	return x({
+		id: S(),
 		type: "spacer",
 		...d,
-		styles: S(0)
+		styles: w(0)
 	}, e);
 }
-function M(e = {}) {
-	return y({
-		id: b(),
+function P(e = {}) {
+	return x({
+		id: S(),
 		type: "html",
 		...f,
-		styles: S()
+		styles: w()
 	}, e);
 }
-function N(e = {}) {
-	return y({
-		id: b(),
+function F(e = {}) {
+	return x({
+		id: S(),
 		type: "menu",
 		items: [],
 		...p,
-		styles: S()
+		styles: w()
 	}, e);
 }
-function P(e, t) {
+function ee(e, t) {
 	return Array.from({ length: t }, () => ({
-		id: b(),
+		id: S(),
 		cells: Array.from({ length: e }, () => ({
-			id: b(),
+			id: S(),
 			content: ""
 		}))
 	}));
 }
-function F(e = {}) {
-	return y({
-		id: b(),
+function I(e = {}) {
+	return x({
+		id: S(),
 		type: "table",
-		rows: P(3, 3),
+		rows: ee(3, 3),
 		...m,
-		styles: S()
+		styles: w()
 	}, e);
 }
-function I(e = {}) {
-	return y({
-		id: b(),
+function L(e = {}) {
+	return x({
+		id: S(),
 		type: "countdown",
-		...ee,
-		styles: S()
+		...h,
+		styles: w()
 	}, e);
 }
-function te(e) {
+function R(e) {
 	return e.type === "repeatable" ? e.default ?? [] : e.type === "boolean" ? e.default ?? !1 : e.type === "number" ? e.default ?? 0 : e.default ?? "";
 }
-function L(e) {
+function te(e) {
 	let t = {};
-	for (let n of e.fields) t[n.key] = te(n);
-	let n = y(S(), e.defaultStyles);
+	for (let n of e.fields) t[n.key] = R(n);
+	let n = x(w(), e.defaultStyles);
 	return {
-		id: b(),
+		id: S(),
 		type: "custom",
 		customType: e.type,
 		fieldValues: t,
@@ -327,27 +341,27 @@ function L(e) {
 		...e.dataSource ? { dataSourceFetched: !1 } : {}
 	};
 }
-function R(e, t) {
+function ne(e, t) {
 	switch (e) {
-		case "section": return O(t?.section);
-		case "title": return C(t?.title);
-		case "paragraph": return w(t?.paragraph);
-		case "image": return T(t?.image);
-		case "button": return E(t?.button);
-		case "divider": return D(t?.divider);
-		case "video": return k(t?.video);
-		case "social": return A(t?.social);
-		case "spacer": return j(t?.spacer);
-		case "html": return M(t?.html);
-		case "menu": return N(t?.menu);
-		case "table": return F(t?.table);
-		case "countdown": return I(t?.countdown);
+		case "section": return A(t?.section);
+		case "title": return T(t?.title);
+		case "paragraph": return E(t?.paragraph);
+		case "image": return D(t?.image);
+		case "button": return O(t?.button);
+		case "divider": return k(t?.divider);
+		case "video": return j(t?.video);
+		case "social": return M(t?.social);
+		case "spacer": return N(t?.spacer);
+		case "html": return P(t?.html);
+		case "menu": return F(t?.menu);
+		case "table": return I(t?.table);
+		case "countdown": return L(t?.countdown);
 		default: throw Error(`Unknown block type: ${e}`);
 	}
 }
 function z(e) {
 	let t = JSON.parse(JSON.stringify(e));
-	return t.id = b(), t.type === "section" && (t.children = t.children.map((e) => e.map((e) => z(e)))), t;
+	return t.id = S(), t.type === "section" && (t.children = t.children.map((e) => e.map((e) => z(e)))), t;
 }
 function B(e) {
 	let t = /* @__PURE__ */ new WeakSet();
@@ -418,14 +432,14 @@ function Z(e, t) {
 	let n = new RegExp(t.value.source, t.value.flags), r = new RegExp(t.logic.source, t.logic.flags);
 	return n.test(e) || r.test(e);
 }
-function ne(e, t) {
+function re(e, t) {
 	return q(t.logic).test(e?.trim() || "");
 }
 function Q(e, t) {
 	let n = new RegExp(t.logic.source, t.logic.flags.replace("g", "")), r = e.match(n);
 	return r && r[1] ? r[1].toUpperCase() : e;
 }
-function re(e, t) {
+function ie(e, t) {
 	return $(e, "data-logic-merge-tag", (e) => Q(e, t));
 }
 function $(e, t, n) {
@@ -461,7 +475,7 @@ function $(e, t, n) {
 	}
 	return i;
 }
-var ie = class extends Error {
+var ae = class extends Error {
 	statusCode;
 	constructor(e, t) {
 		super(e), this.statusCode = t, this.name = "SdkError";
@@ -477,4 +491,4 @@ var ie = class extends Error {
 	}
 };
 //#endregion
-export { J as A, b as C, W as D, G as E, X as M, K as N, n as O, B as P, k as S, Y as T, O as _, z as a, F as b, E as c, v as d, D as f, w as g, N as h, ie as i, re as j, ne as k, I as l, T as m, t as n, Z as o, M as p, V as r, R as s, e as t, L as u, A as v, Q as w, C as x, j as y };
+export { n as A, T as C, Y as D, Q as E, K as F, B as I, J as M, ie as N, G as O, X as P, I as S, S as T, F as _, V as a, M as b, Z as c, L as d, te as f, D as g, P as h, t as i, re as j, W as k, ne as l, k as m, _ as n, ae as o, b as p, e as r, z as s, g as t, O as u, E as v, j as w, N as x, A as y };

package/dist/{en-CHuXeJDt.js → en-DrUV9xth.js}

@@ -393,7 +393,8 @@ var e = {
 		pickColor: "Pick a color",
 		hexValue: "Hex color value",
 		notSet: "Not set",
-		clear: "Clear color"
+		clear: "Clear color",
+		presetColors: "Preset colors"
 	},
 	mergeTag: {
 		clickToEdit: "Click to edit",

package/dist/{cdn/chunks/es-CaC8VQjO.js → es-DwbKjU7q.js}

@@ -393,7 +393,8 @@ var e = {
 		pickColor: "Elegir un color",
 		hexValue: "Valor de color Hex",
 		notSet: "No establecido",
-		clear: "Limpiar color"
+		clear: "Limpiar color",
+		presetColors: "Colores predefinidos"
 	},
 	mergeTag: {
 		clickToEdit: "Haz clic para editar",
@@ -558,5 +559,3 @@ var e = {
 };
 //#endregion
 export { e as default };
-
-//# sourceMappingURL=es-CaC8VQjO.js.map

package/dist/{extensions-DhgbhfBX.js → extensions-BCA9pyer.js}

@@ -1,8 +1,8 @@
 import { Dt as e, Et as t, O as n, Ot as r, R as i, Y as a, _ as o, c as s, d as c, l, nt as u, s as d, u as f, w as p, z as m } from "./vue.runtime.esm-bundler-B0xoGkDv.js";
 import { a as h, c as g, s as _ } from "./runtime-dom.esm-bundler-GdMI8WqG.js";
-import { T as v, k as y, r as b, w as x } from "./dist-DoRIUsfz.js";
-import { t as S } from "./useI18n-0EU_JVe7.js";
-import { t as C } from "./useMergeTag-C7v6MVah.js";
+import { D as v, E as y, a as b, j as x } from "./dist-BJbqgyPn.js";
+import { t as S } from "./useI18n-BNMzZTM5.js";
+import { t as C } from "./useMergeTag-DfEY0eK5.js";
 import { i as w, o as T, p as E, qt as D, u as O } from "./dist-CgTKuIUN.js";
 import { i as k, r as A, t as j } from "./MergeTagSuggestion-DCuaSOPQ.js";
 import { n as M, t as N } from "./dist-8TKf-Jpg.js";
@@ -87,7 +87,7 @@ var P = w.create({
 		updateAttributes: { type: Function }
 	},
 	setup(o) {
-		let v = o, { syntax: b } = C(), { t: w } = S(), T = d(() => y(v.node.attrs.value, b)), E = d(() => x(v.node.attrs.value, b)), D = a(!1), O = a(""), k = a(null), A = !1;
+		let v = o, { syntax: b } = C(), { t: w } = S(), T = d(() => x(v.node.attrs.value, b)), E = d(() => y(v.node.attrs.value, b)), D = a(!1), O = a(""), k = a(null), A = !1;
 		function j() {
 			O.value = v.node.attrs.value, A = !1, D.value = !0, p(() => {
 				k.value?.focus(), k.value?.select();
@@ -103,7 +103,7 @@ var P = w.create({
 			}
 			e !== v.node.attrs.value && v.updateAttributes({
 				value: e,
-				keyword: y(e, b) ? x(e, b) : ""
+				keyword: x(e, b) ? y(e, b) : ""
 			}), D.value = !1;
 		}
 		function P(e) {
@@ -207,12 +207,12 @@ var U = O.create({
 		return [{ tag: "span[data-logic-merge-tag]" }];
 	},
 	renderHTML({ node: e, HTMLAttributes: t }) {
-		if (!y(e.attrs.value, this.options.syntax)) return [
+		if (!x(e.attrs.value, this.options.syntax)) return [
 			"span",
 			{},
 			e.attrs.value
 		];
-		let n = x(e.attrs.value, this.options.syntax);
+		let n = y(e.attrs.value, this.options.syntax);
 		return [
 			"span",
 			D(t, {
@@ -236,8 +236,8 @@ var U = O.create({
 			find: RegExp(this.options.syntax.logic.source + "$", ""),
 			handler: ({ state: e, range: t, match: n }) => {
 				let r = n[0];
-				if (!y(r, this.options.syntax)) return;
-				let i = x(r, this.options.syntax), a = this.type.create({
+				if (!x(r, this.options.syntax)) return;
+				let i = y(r, this.options.syntax), a = this.type.create({
 					value: r,
 					keyword: i
 				});
@@ -250,8 +250,8 @@ var U = O.create({
 			find: new RegExp(this.options.syntax.logic.source, "g"),
 			handler: ({ state: e, range: t, match: n }) => {
 				let r = n[0];
-				if (!y(r, this.options.syntax)) return;
-				let i = x(r, this.options.syntax), a = this.type.create({
+				if (!x(r, this.options.syntax)) return;
+				let i = y(r, this.options.syntax), a = this.type.create({
 					value: r,
 					keyword: i
 				});

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import type { AiConfig } from '@templatical/types';
 import { BlockDefaults } from '@templatical/types';
 import type { CollaborationConfig } from '@templatical/types';
+import { ColorsConfig } from '@templatical/types';
 import type { CommentEvent } from '@templatical/types';
 import { ComputedRef } from 'vue';
 import type { CustomBlock } from '@templatical/types';
@@ -28,6 +29,8 @@ import { ViewportSize } from '@templatical/types';
 
 export { BlockDefaults }
 
+export { ColorsConfig }
+
 export { CustomBlockDefinition }
 
 export { CustomFont }
@@ -106,6 +109,15 @@ export { MergeTagsConfig }
 /** Function type for media browser requests, used by both OSS and Cloud editors. */
 export declare type OnRequestMedia = (context?: MediaRequestContext) => Promise<MediaResult | null>;
 
+/**
+ * Display-only resolver for image `src` values (`config.resolveImageUrl`,
+ * #415). Maps a canonical src (e.g. a plain file name like `logo.png`) to a
+ * URL the canvas can actually display (e.g. an ephemeral `blob:` URL).
+ * Returning `null` (or the input value) means "use the src as-is". The
+ * resolved value never enters the content model or the MJML export.
+ */
+export declare type ResolveImageUrl = (src: string) => string | null | Promise<string | null>;
+
 export { SaveResult }
 
 export { Template }
@@ -221,6 +233,14 @@ export declare interface TemplaticalCloudEditorConfig {
      */
     htmlBlockPreview?: HtmlBlockPreviewConfig;
     fonts?: FontsConfig;
+    /**
+     * Editor-wide color-picker palette. `presets` render as a clickable grid in
+     * every color picker popover; `allowCustom: false` (with `presets`) hides the
+     * wheel and hex input so authors can only pick from the palette. Ignored with
+     * a warning when no `presets` are configured. See `colors` on the OSS editor
+     * config for details and an example.
+     */
+    colors?: ColorsConfig;
     onChange?: (content: TemplateContent) => void;
     onSave?: (result: SaveResult) => void;
     onCreate?: (template: Template) => void;
@@ -310,6 +330,34 @@ export declare interface TemplaticalEditorConfig {
     onSave?: (content: TemplateContent) => void;
     onError?: (error: Error) => void;
     onRequestMedia?: OnRequestMedia;
+    /**
+     * Display-only resolver for image `src` values. The canvas calls this to
+     * obtain a preview URL for a src the user entered; the content model (and
+     * `toMjml()` output) always keeps the canonical value. Return `null` — or
+     * the input value — to use the src as-is.
+     *
+     * Use this when templates reference images by a value that isn't directly
+     * displayable, e.g. plain file names resolved to ephemeral `blob:` URLs
+     * from local storage:
+     *
+     * ```ts
+     * resolveImageUrl: async (src) => {
+     *   const file = await fileStore.lookup(src);
+     *   return file ? URL.createObjectURL(file) : null;
+     * }
+     * ```
+     *
+     * The resolver is called once per committed src value (typing in the src
+     * input is debounced, so partial values never reach it) and results are
+     * cached per src for the editor's lifetime — including failures, which
+     * fall back to displaying the src verbatim. Note the caching applies to
+     * transient failures too: a src that failed to resolve stays unresolved
+     * until the editor is re-initialized (a re-resolve hook may be added
+     * later). Applies to image srcs, design-time placeholder previews, and
+     * explicit video thumbnails; auto-derived provider thumbnails (YouTube/
+     * Vimeo) are already real URLs and are never resolved.
+     */
+    resolveImageUrl?: ResolveImageUrl;
     mergeTags?: MergeTagsConfig;
     /**
      * Standalone logic tags — control-flow tokens (`{% else %}`) and open/close
@@ -359,6 +407,26 @@ export declare interface TemplaticalEditorConfig {
      */
     htmlBlockPreview?: HtmlBlockPreviewConfig;
     fonts?: FontsConfig;
+    /**
+     * Editor-wide color-picker palette. `presets` appear as a clickable grid in
+     * every color picker popover (block toolbars, template settings, rich-text
+     * color, custom-block color fields) — clicking one applies it, and the preset
+     * matching the current value is marked selected.
+     *
+     * ```ts
+     * colors: {
+     *   presets: ['#0b5cff', '#111827', '#6b7280', '#ffffff'],
+     *   allowCustom: false, // lock authors to the presets above
+     * }
+     * ```
+     *
+     * `allowCustom` defaults to `true`. Set it to `false` (together with
+     * `presets`) to hide the wheel and hex input so authors can only pick from the
+     * palette — useful when embedding the editor as a white-label / brand-kit
+     * tool. `allowCustom: false` is ignored, with a warning, when no `presets` are
+     * configured, since that would leave the picker with no way to set a color.
+     */
+    colors?: ColorsConfig;
     blockDefaults?: BlockDefaults;
     templateDefaults?: TemplateDefaults;
     theme?: ThemeOverrides;

package/dist/keys-DFaIbGR8.js

@@ -0,0 +1,10 @@
+import { x as e } from "./vue.runtime.esm-bundler-B0xoGkDv.js";
+//#region src/keys.ts
+var t = Symbol("translations"), n = Symbol("editor"), r = Symbol("history"), i = Symbol("blockActions"), a = Symbol("conditionPreview"), o = Symbol("fontsManager"), s = Symbol("themeStyles"), c = Symbol("tplUiTheme"), l = Symbol("blockDefaults"), u = Symbol("blockRegistry"), d = Symbol("customBlockDefinitions"), f = Symbol("paletteBlocks"), p = Symbol("htmlBlockPreview"), m = Symbol("colors"), h = Symbol("customBlockStylesheets"), g = Symbol("mergeTags"), _ = Symbol("mergeTagSyntax"), v = Symbol("onRequestMergeTag"), y = Symbol("mergeTagAutocomplete"), b = Symbol("mergeTagPicker"), x = Symbol("logicTags"), S = Symbol("logicPairs"), C = Symbol("logicPicker"), w = Symbol("onRequestLogic"), T = Symbol("onRequestMedia"), E = Symbol("imageUrlResolver"), D = Symbol("displayConditions"), O = Symbol("allowCustomConditions"), k = Symbol("capabilities"), A = Symbol("keyboardReorder"), j = Symbol("templateLint"), M = Symbol("editorRoot"), N = Symbol("popoverRoot"), P = Symbol("authManager"), F = Symbol("aiConfig"), I = Symbol("comments"), L = Symbol("savedModulesHeadless"), R = Symbol("scoring"), z = Symbol("cloudTranslations");
+function B(t, n) {
+	let r = e(t, null);
+	if (r == null) throw Error(`${n} requires a provider for ${t.description ?? "unknown key"}. Ensure it is a descendant of Editor or CloudEditor.`);
+	return r;
+}
+//#endregion
+export { T as A, B, x as C, b as D, y as E, R as F, j as I, s as L, f as M, N, _ as O, L as P, t as R, S, g as T, o as _, l as a, E as b, z as c, a as d, d as f, M as g, n as h, i, v as j, w as k, m as l, D as m, O as n, u as o, h as p, P as r, k as s, F as t, I as u, r as v, C as w, A as x, p as y, c as z };

package/dist/{pt-BR-C74zfEWH.js → pt-BR-Bcc5Tjed.js}

@@ -393,7 +393,8 @@ var e = {
 		pickColor: "Escolher uma cor",
 		hexValue: "Valor hexadecimal da cor",
 		notSet: "Não definido",
-		clear: "Limpar cor"
+		clear: "Limpar cor",
+		presetColors: "Cores predefinidas"
 	},
 	mergeTag: {
 		clickToEdit: "Clique para editar",