@templatical/editor 0.38.0 → 0.39.1

package/dist/cdn/chunks/{extensions-B8_jnIkD.js → extensions-Bhu8UEE5.js}

@@ -1,11 +1,11 @@
-import { H as e, N as t, Q as n, S as r, U as i, at as a, c as o, ct as s, f as c, g as l, h as u, k as d, l as f, lt as p, m, o as h, p as g, ut as _ } from "./draggable-kbOhCgnk.js";
-import { a as v, d as y, o as b, r as x } from "./src-Dwgq7hf4.js";
-import { t as S } from "./useI18n-Dlo7R9RA.js";
-import { t as C } from "./useMergeTag-BYAifvh8.js";
-import { _ as w, g as T, h as E, n as D, t as O, v as k, y as A } from "./tiptap-Epe8m3Vo.js";
-import { i as j, r as M, t as N } from "./MergeTagSuggestion-t8Uj00Er.js";
+import { H as e, N as t, Q as n, S as r, U as i, Y as a, at as o, c as s, ct as c, f as l, g as u, h as d, k as f, l as p, lt as m, m as h, o as g, p as _, ut as v } from "./draggable-IB4x6w2O.js";
+import { a as y, d as b, o as x, r as S } from "./src-Dwgq7hf4.js";
+import { t as C } from "./useI18n-DTZ9sIcv.js";
+import { t as w } from "./useMergeTag-BE8oDoha.js";
+import { _ as T, g as E, h as D, n as O, r as k, t as A, v as j, y as M } from "./tiptap-DhLuKyDc.js";
+import { a as N, o as P, s as F } from "./LogicTagInsertButton-DpyPozop.js";
 //#region src/extensions/FontSize.ts
-var P = E.create({
+var I = D.create({
 	name: "fontSize",
 	addOptions() {
 		return { types: ["textStyle"] };
@@ -26,7 +26,7 @@ var P = E.create({
 			unsetFontSize: () => ({ chain: e }) => e().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run()
 		};
 	}
-}), F = E.create({
+}), L = D.create({
 	name: "letterSpacing",
 	addOptions() {
 		return { types: ["textStyle"] };
@@ -47,7 +47,7 @@ var P = E.create({
 			unsetLetterSpacing: () => ({ chain: e }) => e().setMark("textStyle", { letterSpacing: null }).removeEmptyTextStyle().run()
 		};
 	}
-}), I = E.create({
+}), R = D.create({
 	name: "lineBoundaryKeys",
 	addKeyboardShortcuts() {
 		let e = (e) => ({ editor: t }) => {
@@ -61,7 +61,7 @@ var P = E.create({
 			Home: e("backward")
 		};
 	}
-}), L = E.create({
+}), z = D.create({
 	name: "lineHeight",
 	addOptions() {
 		return {
@@ -85,11 +85,11 @@ var P = E.create({
 			unsetLineHeight: () => ({ commands: e }) => this.options.types.every((t) => e.resetAttributes(t, "lineHeight"))
 		};
 	}
-}), R = [
+}), B = [
 	"aria-label",
 	"data-tooltip",
 	"onKeydown"
-], z = ["aria-label", "onKeydown"], B = ["aria-label"], V = /* @__PURE__ */ r({
+], V = ["aria-label", "onKeydown"], H = ["aria-label"], U = /* @__PURE__ */ r({
 	__name: "LogicMergeTagNodeView",
 	props: {
 		node: {},
@@ -99,9 +99,9 @@ var P = E.create({
 		updateAttributes: { type: Function }
 	},
 	setup(r) {
-		let b = r, { syntax: x } = C(), { t: w } = S(), T = c(() => y(b.node.attrs.value, x)), E = c(() => v(b.node.attrs.value, x)), D = n(!1), k = n(""), A = n(null), j = !1;
+		let a = r, { syntax: x } = w(), { t: S } = C(), T = l(() => b(a.node.attrs.value, x)), E = l(() => y(a.node.attrs.value, x)), D = n(!1), k = n(""), A = n(null), j = !1;
 		function M() {
-			k.value = b.node.attrs.value, j = !1, D.value = !0, d(() => {
+			k.value = a.node.attrs.value, j = !1, D.value = !0, f(() => {
 				A.value?.focus(), A.value?.select();
 			});
 		}
@@ -113,53 +113,53 @@ var P = E.create({
 				D.value = !1;
 				return;
 			}
-			e !== b.node.attrs.value && b.updateAttributes({
+			e !== a.node.attrs.value && a.updateAttributes({
 				value: e,
-				keyword: y(e, x) ? v(e, x) : ""
+				keyword: b(e, x) ? y(e, x) : ""
 			}), D.value = !1;
 		}
 		function P(e) {
 			e.key === "Enter" ? (e.preventDefault(), N()) : e.key === "Escape" && (D.value = !1);
 		}
-		return (n, c) => (t(), m(a(O), {
+		return (n, a) => (t(), h(o(O), {
 			as: "span",
-			class: s(T.value ? "tpl-logic-merge-tag-node tpl:group tpl:mx-0.5 tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[0.8em] tpl:font-bold tpl:tracking-wide tpl:uppercase tpl:select-none" : ""),
-			style: p(T.value ? "background-color: transparent; border: 1.5px solid color-mix(in srgb, var(--tpl-primary) 50%, transparent); color: var(--tpl-primary);" : ""),
+			class: c(T.value ? "tpl-logic-merge-tag-node tpl:group tpl:mx-0.5 tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[0.8em] tpl:font-bold tpl:tracking-wide tpl:uppercase tpl:select-none" : ""),
+			style: m(T.value ? "background-color: transparent; border: 1.5px solid color-mix(in srgb, var(--tpl-primary) 50%, transparent); color: var(--tpl-primary);" : ""),
 			contenteditable: "false"
 		}, {
-			default: e(() => [D.value ? i((t(), l("input", {
+			default: e(() => [D.value ? i((t(), u("input", {
 				key: 0,
 				ref_key: "inputRef",
 				ref: A,
-				"onUpdate:modelValue": c[0] ||= (e) => k.value = e,
+				"onUpdate:modelValue": a[0] ||= (e) => k.value = e,
 				type: "text",
 				class: "tpl:w-40 tpl:rounded tpl:border-none tpl:bg-transparent tpl:px-0.5 tpl:py-0 tpl:text-[1em] tpl:font-medium tpl:normal-case tpl:outline-none tpl:text-[var(--tpl-primary)]",
 				onBlur: N,
 				onKeydown: P
-			}, null, 544)), [[h, k.value]]) : T.value ? (t(), l("span", {
+			}, null, 544)), [[g, k.value]]) : T.value ? (t(), u("span", {
 				key: 1,
 				role: "button",
 				tabindex: "0",
-				"aria-label": a(w).mergeTag.editValue,
+				"aria-label": o(S).mergeTag.editValue,
 				class: "tpl-tooltip tpl:cursor-pointer",
 				"data-tooltip": r.node.attrs.value,
-				onClick: f(M, ["stop"]),
-				onKeydown: [o(f(M, ["stop"]), ["enter"]), o(f(M, ["prevent", "stop"]), ["space"])]
-			}, _(E.value), 41, R)) : (t(), l("span", {
+				onClick: p(M, ["stop"]),
+				onKeydown: [s(p(M, ["stop"]), ["enter"]), s(p(M, ["prevent", "stop"]), ["space"])]
+			}, v(E.value), 41, B)) : (t(), u("span", {
 				key: 2,
 				role: "button",
 				tabindex: "0",
-				"aria-label": a(w).mergeTag.editValue,
-				onClick: f(M, ["stop"]),
-				onKeydown: [o(f(M, ["stop"]), ["enter"]), o(f(M, ["prevent", "stop"]), ["space"])]
-			}, _(r.node.attrs.value), 41, z)), T.value ? (t(), l("button", {
+				"aria-label": o(S).mergeTag.editValue,
+				onClick: p(M, ["stop"]),
+				onKeydown: [s(p(M, ["stop"]), ["enter"]), s(p(M, ["prevent", "stop"]), ["space"])]
+			}, v(r.node.attrs.value), 41, V)), T.value ? (t(), u("button", {
 				key: 3,
 				type: "button",
-				"aria-label": a(w).mergeTag.deleteMergeTag,
+				"aria-label": o(S).mergeTag.deleteMergeTag,
 				class: "tpl-merge-tag-delete tpl:flex tpl:size-5 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-none tpl:bg-transparent tpl:p-0 tpl:opacity-60 tpl:transition-all tpl:hover:opacity-100 tpl:text-[var(--tpl-primary)]",
 				contenteditable: "false",
-				onClick: c[1] ||= f((...e) => r.deleteNode && r.deleteNode(...e), ["stop", "prevent"])
-			}, [...c[2] ||= [g("svg", {
+				onClick: a[1] ||= p((...e) => r.deleteNode && r.deleteNode(...e), ["stop", "prevent"])
+			}, [...a[2] ||= [_("svg", {
 				width: "10",
 				height: "10",
 				viewBox: "0 0 24 24",
@@ -167,41 +167,41 @@ var P = E.create({
 				stroke: "currentColor",
 				"stroke-width": "3",
 				"aria-hidden": "true"
-			}, [g("line", {
+			}, [_("line", {
 				x1: "18",
 				y1: "6",
 				x2: "6",
 				y2: "18"
-			}), g("line", {
+			}), _("line", {
 				x1: "6",
 				y1: "6",
 				x2: "18",
 				y2: "18"
-			})], -1)]], 8, B)) : u("", !0)]),
+			})], -1)]], 8, H)) : d("", !0)]),
 			_: 1
 		}, 8, ["class", "style"]));
 	}
 });
 //#endregion
 //#region src/extensions/isNodeSelected.ts
-function H(e, t) {
+function W(e, t) {
 	let { $from: n, $to: r } = e.state.selection;
 	return n.pos === r.pos ? n.pos > 0 && n.nodeBefore?.type.name === t || n.nodeAfter?.type.name === t : !1;
 }
 //#endregion
 //#region src/extensions/renderVueNodeView.ts
-function U(e) {
-	return D(e);
+function G(e) {
+	return k(e);
 }
 //#endregion
 //#region src/extensions/LogicMergeTagNode.ts
-var W = w.create({
+var K = T.create({
 	name: "logicMergeTagNode",
 	group: "inline",
 	inline: !0,
 	atom: !0,
 	addOptions() {
-		return { syntax: x.liquid };
+		return { syntax: S.liquid };
 	},
 	addAttributes() {
 		return {
@@ -221,15 +221,15 @@ var W = w.create({
 		return [{ tag: "span[data-logic-merge-tag]" }];
 	},
 	renderHTML({ node: e, HTMLAttributes: t }) {
-		if (!y(e.attrs.value, this.options.syntax)) return [
+		if (!b(e.attrs.value, this.options.syntax)) return [
 			"span",
 			{},
 			e.attrs.value
 		];
-		let n = v(e.attrs.value, this.options.syntax);
+		let n = y(e.attrs.value, this.options.syntax);
 		return [
 			"span",
-			A(t, {
+			M(t, {
 				"data-logic-merge-tag": e.attrs.value,
 				"data-keyword": n
 			}),
@@ -237,22 +237,22 @@ var W = w.create({
 		];
 	},
 	addNodeView() {
-		return U(V);
+		return G(U);
 	},
 	addKeyboardShortcuts() {
 		return {
-			Backspace: () => H(this.editor, this.name),
-			Delete: () => H(this.editor, this.name)
+			Backspace: () => W(this.editor, this.name),
+			Delete: () => W(this.editor, this.name)
 		};
 	},
 	addInputRules() {
 		let e = RegExp(this.options.syntax.logic.source + "$", "");
-		return [new T({
+		return [new E({
 			find: e,
 			handler: ({ state: e, range: t, match: n }) => {
 				let r = n[0];
-				if (!y(r, this.options.syntax)) return;
-				let i = v(r, this.options.syntax), a = this.type.create({
+				if (!b(r, this.options.syntax)) return;
+				let i = y(r, this.options.syntax), a = this.type.create({
 					value: r,
 					keyword: i
 				});
@@ -262,12 +262,12 @@ var W = w.create({
 	},
 	addPasteRules() {
 		let e = new RegExp(this.options.syntax.logic.source, "g");
-		return [new k({
+		return [new j({
 			find: e,
 			handler: ({ state: e, range: t, match: n }) => {
 				let r = n[0];
-				if (!y(r, this.options.syntax)) return;
-				let i = v(r, this.options.syntax), a = this.type.create({
+				if (!b(r, this.options.syntax)) return;
+				let i = y(r, this.options.syntax), a = this.type.create({
 					value: r,
 					keyword: i
 				});
@@ -275,11 +275,11 @@ var W = w.create({
 			}
 		})];
 	}
-}), G = [
+}), q = ["aria-invalid"], J = [
 	"aria-label",
 	"data-tooltip",
 	"onKeydown"
-], K = ["aria-label"], q = /* @__PURE__ */ r({
+], Y = ["aria-label"], X = /* @__PURE__ */ r({
 	__name: "MergeTagNodeView",
 	props: {
 		node: {},
@@ -287,53 +287,78 @@ var W = w.create({
 		updateAttributes: { type: Function }
 	},
 	setup(r) {
-		let s = r, { getMergeTagLabel: u } = C(), { t: p } = S(), v = c(() => u(s.node.attrs.value)), y = n(!1), b = n(""), x = n(null);
-		function w() {
-			b.value = s.node.attrs.value, y.value = !0, d(() => {
-				x.value?.focus(), x.value?.select();
+		let d = r, { getMergeTagLabel: m, getMergeTagDisplayLabel: y, findMergeTag: b, canRepickMergeTag: x, showRawValue: S, isMergeTagValue: T, requestMergeTag: E } = w(), { t: D, format: k } = C(), A = l(() => y(d.node.attrs.value, d.node.attrs.label)), j = l(() => x(d.node.attrs.value)), M = n(!1), N = n(""), P = n(null), F = !1;
+		a(() => {
+			F = !0;
+		});
+		let I = l(() => N.value.trim() === "" || T(N.value.trim()));
+		async function L() {
+			let e = await E({
+				reason: "edit",
+				current: b(d.node.attrs.value)
+			});
+			!F && e && d.updateAttributes({
+				value: e.value,
+				label: e.label
+			});
+		}
+		function R() {
+			N.value = d.node.attrs.value, M.value = !0, f(() => {
+				P.value?.focus(), P.value?.select();
 			});
 		}
-		function T() {
-			let e = b.value.trim();
-			e && e !== s.node.attrs.value && s.updateAttributes({
+		function z() {
+			if (j.value) {
+				L();
+				return;
+			}
+			R();
+		}
+		function B() {
+			let e = N.value.trim();
+			e && e !== d.node.attrs.value && T(e) && d.updateAttributes({
 				value: e,
-				label: u(e)
-			}), y.value = !1;
+				label: m(e)
+			}), M.value = !1;
 		}
-		function E(e) {
-			e.key === "Enter" ? (e.preventDefault(), T()) : e.key === "Escape" && (y.value = !1);
+		function V(e) {
+			if (e.key === "Enter") {
+				if (e.preventDefault(), !I.value) return;
+				B();
+			} else e.key === "Escape" && (M.value = !1);
 		}
-		return (n, s) => (t(), m(a(O), {
+		return (n, a) => (t(), h(o(O), {
 			as: "span",
 			class: "tpl-merge-tag-node tpl:group tpl:mx-0.5 tpl:inline-flex tpl:items-center tpl:gap-1 tpl:rounded tpl:px-1.5 tpl:py-0.5 tpl:text-[0.9em] tpl:font-medium tpl:select-none tpl:text-[var(--tpl-primary)]",
 			style: { "background-color": "color-mix(in srgb, var(--tpl-primary) 20%, transparent)" },
 			contenteditable: "false"
 		}, {
-			default: e(() => [y.value ? i((t(), l("input", {
+			default: e(() => [M.value ? i((t(), u("input", {
 				key: 0,
 				ref_key: "inputRef",
-				ref: x,
-				"onUpdate:modelValue": s[0] ||= (e) => b.value = e,
+				ref: P,
+				"onUpdate:modelValue": a[0] ||= (e) => N.value = e,
 				type: "text",
-				class: "tpl:w-32 tpl:rounded tpl:border-none tpl:bg-transparent tpl:px-0.5 tpl:py-0 tpl:text-[1em] tpl:font-medium tpl:outline-none tpl:text-[var(--tpl-primary)]",
-				onBlur: T,
-				onKeydown: E
-			}, null, 544)), [[h, b.value]]) : (t(), l("span", {
+				"aria-invalid": I.value ? void 0 : "true",
+				class: c(["tpl:w-32 tpl:rounded tpl:bg-transparent tpl:px-0.5 tpl:py-0 tpl:text-[1em] tpl:font-medium tpl:outline-none tpl:text-[var(--tpl-primary)]", I.value ? "tpl:border-none" : "tpl:border tpl:border-[var(--tpl-danger)]"]),
+				onBlur: B,
+				onKeydown: V
+			}, null, 42, q)), [[g, N.value]]) : (t(), u("span", {
 				key: 1,
 				role: "button",
 				tabindex: "0",
-				"aria-label": a(p).mergeTag.editValue,
-				class: "tpl-tooltip tpl:cursor-pointer",
-				"data-tooltip": r.node.attrs.value,
-				onClick: f(w, ["stop"]),
-				onKeydown: [o(f(w, ["stop"]), ["enter"]), o(f(w, ["prevent", "stop"]), ["space"])]
-			}, _(v.value), 41, G)), g("button", {
+				"aria-label": j.value ? o(k)(o(D).mergeTag.changeTag, { label: A.value }) : o(D).mergeTag.editValue,
+				class: c(["tpl:cursor-pointer", o(S) ? "tpl-tooltip" : ""]),
+				"data-tooltip": o(S) ? r.node.attrs.value : void 0,
+				onClick: p(z, ["stop"]),
+				onKeydown: [s(p(z, ["stop"]), ["enter"]), s(p(z, ["prevent", "stop"]), ["space"])]
+			}, v(A.value), 43, J)), _("button", {
 				type: "button",
-				"aria-label": a(p).mergeTag.deleteMergeTag,
+				"aria-label": o(D).mergeTag.deleteMergeTag,
 				class: "tpl-merge-tag-delete tpl:flex tpl:size-5 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:rounded-full tpl:border-none tpl:bg-transparent tpl:p-0 tpl:opacity-60 tpl:transition-all tpl:hover:opacity-100 tpl:text-[var(--tpl-primary)]",
 				contenteditable: "false",
-				onClick: s[1] ||= f((...e) => r.deleteNode && r.deleteNode(...e), ["stop", "prevent"])
-			}, [...s[2] ||= [g("svg", {
+				onClick: a[1] ||= p((...e) => r.deleteNode && r.deleteNode(...e), ["stop", "prevent"])
+			}, [...a[2] ||= [_("svg", {
 				width: "10",
 				height: "10",
 				viewBox: "0 0 24 24",
@@ -341,29 +366,29 @@ var W = w.create({
 				stroke: "currentColor",
 				"stroke-width": "3",
 				"aria-hidden": "true"
-			}, [g("line", {
+			}, [_("line", {
 				x1: "18",
 				y1: "6",
 				x2: "6",
 				y2: "18"
-			}), g("line", {
+			}), _("line", {
 				x1: "6",
 				y1: "6",
 				x2: "18",
 				y2: "18"
-			})], -1)]], 8, K)]),
+			})], -1)]], 8, Y)]),
 			_: 1
 		}));
 	}
-}), J = w.create({
+}), Z = T.create({
 	name: "mergeTagNode",
 	group: "inline",
 	inline: !0,
 	atom: !0,
 	addOptions() {
 		return {
-			mergeTags: [],
-			syntax: x.liquid
+			mergeTags: () => [],
+			syntax: S.liquid
 		};
 	},
 	addAttributes() {
@@ -384,10 +409,10 @@ var W = w.create({
 		return [{ tag: "span[data-merge-tag]" }];
 	},
 	renderHTML({ node: e, HTMLAttributes: t }) {
-		let n = b(e.attrs.value, this.options.mergeTags);
+		let n = x(e.attrs.value, this.options.mergeTags());
 		return [
 			"span",
-			A(t, {
+			M(t, {
 				"data-merge-tag": e.attrs.value,
 				"data-label": n
 			}),
@@ -395,7 +420,7 @@ var W = w.create({
 		];
 	},
 	addNodeView() {
-		return U(q);
+		return G(X);
 	},
 	addCommands() {
 		return { insertMergeTag: (e) => ({ commands: t }) => t.insertContent({
@@ -408,16 +433,16 @@ var W = w.create({
 	},
 	addKeyboardShortcuts() {
 		return {
-			Backspace: () => H(this.editor, this.name),
-			Delete: () => H(this.editor, this.name)
+			Backspace: () => W(this.editor, this.name),
+			Delete: () => W(this.editor, this.name)
 		};
 	},
 	addInputRules() {
 		let e = RegExp(this.options.syntax.value.source + "$", "");
-		return [new T({
+		return [new E({
 			find: e,
 			handler: ({ state: e, range: t, match: n }) => {
-				let r = n[0], i = b(r, this.options.mergeTags), a = this.type.create({
+				let r = n[0], i = x(r, this.options.mergeTags()), a = this.type.create({
 					label: i,
 					value: r
 				});
@@ -427,10 +452,10 @@ var W = w.create({
 	},
 	addPasteRules() {
 		let e = new RegExp(this.options.syntax.value.source, "g");
-		return [new k({
+		return [new j({
 			find: e,
 			handler: ({ state: e, range: t, match: n }) => {
-				let r = n[0], i = b(r, this.options.mergeTags), a = this.type.create({
+				let r = n[0], i = x(r, this.options.mergeTags()), a = this.type.create({
 					label: i,
 					value: r
 				});
@@ -440,6 +465,66 @@ var W = w.create({
 	}
 });
 //#endregion
-export { P as FontSize, F as LetterSpacing, I as LineBoundaryKeys, L as LineHeight, W as LogicMergeTagNode, J as MergeTagNode, N as MergeTagSuggestion, M as filterMergeTags, j as handleSuggestionKeyDown };
+//#region src/extensions/MergeTagSuggestion.ts
+function Q(e, t) {
+	return () => {
+		let n = N(e, t);
+		return {
+			onStart: (e) => {
+				n.open({
+					items: e.items,
+					getRect: e.clientRect ?? null,
+					anchorEl: e.editor.view?.dom ?? null,
+					onCommand: (t) => e.command(t)
+				});
+			},
+			onUpdate: (e) => {
+				n.update({
+					items: e.items,
+					getRect: e.clientRect ?? null,
+					onCommand: (t) => e.command(t)
+				});
+			},
+			onKeyDown: (e) => e.event.key === "Escape" || n.handleKeyDown(e.event),
+			onExit: () => n.close()
+		};
+	};
+}
+var $ = D.create({
+	name: "mergeTagSuggestion",
+	addOptions() {
+		return {
+			mergeTags: () => [],
+			char: "{{",
+			emptyText: "No matching merge tags",
+			popoverRoot: null
+		};
+	},
+	addProseMirrorPlugins() {
+		let e = this.options.mergeTags(), t = this.options.emptyText, n = this.options.popoverRoot, r = {
+			char: this.options.char,
+			allowSpaces: !1,
+			startOfLine: !1,
+			allowedPrefixes: null,
+			items: ({ query: t }) => P(e, t),
+			command: ({ editor: e, range: t, props: n }) => {
+				e.chain().focus().insertContentAt(t, {
+					type: "mergeTagNode",
+					attrs: {
+						label: n.label,
+						value: n.value
+					}
+				}).run();
+			},
+			render: Q(t, n)
+		};
+		return [A({
+			editor: this.editor,
+			...r
+		})];
+	}
+});
+//#endregion
+export { I as FontSize, L as LetterSpacing, R as LineBoundaryKeys, z as LineHeight, K as LogicMergeTagNode, Z as MergeTagNode, $ as MergeTagSuggestion, P as filterMergeTags, F as handleSuggestionKeyDown };
 
-//# sourceMappingURL=extensions-B8_jnIkD.js.map
+//# sourceMappingURL=extensions-Bhu8UEE5.js.map