@templatical/editor 0.14.0 → 0.15.1

package/dist/{x-DiPIbccg.js → x-CQSvXnGR.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./createLucideIcon-Bad2kKE0.js";
+import { t as e } from "./createLucideIcon-Dx-EjR9r.js";
 var t = e("x", [["path", {
 	d: "M18 6 6 18",
 	key: "1bl5f8"

package/package.json

@@ -1,40 +1,40 @@
 {
   "name": "@templatical/editor",
   "description": "Vue 3 visual drag-and-drop email editor powered by Templatical",
-  "version": "0.14.0",
+  "version": "0.15.1",
   "bugs": "https://github.com/templatical/sdk/issues",
   "devDependencies": {
-    "@lucide/vue": "^1.23.0",
-    "@tiptap/core": "^3.27.1",
-    "@tiptap/extension-color": "^3.27.1",
-    "@tiptap/extension-font-family": "^3.27.1",
-    "@tiptap/extension-highlight": "^3.27.1",
-    "@tiptap/extension-link": "^3.27.1",
-    "@tiptap/extension-subscript": "^3.27.1",
-    "@tiptap/extension-superscript": "^3.27.1",
-    "@tiptap/extension-text-align": "^3.27.1",
-    "@tiptap/extension-text-style": "^3.27.1",
-    "@tiptap/extension-underline": "^3.27.1",
-    "@tiptap/starter-kit": "^3.27.1",
-    "@tiptap/suggestion": "^3.27.1",
-    "@tiptap/vue-3": "^3.27.1",
+    "@lucide/vue": "^1.24.0",
+    "@tiptap/core": "^3.27.3",
+    "@tiptap/extension-color": "^3.27.3",
+    "@tiptap/extension-font-family": "^3.27.3",
+    "@tiptap/extension-highlight": "^3.27.3",
+    "@tiptap/extension-link": "^3.27.3",
+    "@tiptap/extension-subscript": "^3.27.3",
+    "@tiptap/extension-superscript": "^3.27.3",
+    "@tiptap/extension-text-align": "^3.27.3",
+    "@tiptap/extension-text-style": "^3.27.3",
+    "@tiptap/extension-underline": "^3.27.3",
+    "@tiptap/starter-kit": "^3.27.3",
+    "@tiptap/suggestion": "^3.27.3",
+    "@tiptap/vue-3": "^3.27.3",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vue/test-utils": "^2.4.11",
     "@vueuse/core": "^14.3.0",
-    "es-module-lexer": "^2.3.0",
+    "es-module-lexer": "^2.3.1",
     "happy-dom": "^20.10.6",
-    "liquidjs": "^10.27.1",
+    "liquidjs": "^10.27.2",
     "tailwindcss": "^4.3.2",
     "typescript": "^6.0.3",
     "vanilla-colorful": "^0.7.2",
-    "vite": "^8.1.3",
-    "vitest": "^4.1.9",
+    "vite": "^8.1.4",
+    "vitest": "^4.1.10",
     "vue": "^3.5.39",
     "vue-draggable-plus": "^0.6.1",
-    "vue-tsc": "^3.3.6",
-    "@templatical/core": "0.14.0",
-    "@templatical/quality": "0.14.0",
-    "@templatical/types": "0.14.0"
+    "vue-tsc": "^3.3.7",
+    "@templatical/core": "0.15.1",
+    "@templatical/quality": "0.15.1",
+    "@templatical/types": "0.15.1"
   },
   "exports": {
     ".": {
@@ -62,9 +62,9 @@
   "license": "SEE LICENSE IN LICENSE",
   "module": "./dist/templatical-editor.js",
   "peerDependencies": {
-    "@templatical/media-library": "0.14.0",
-    "@templatical/quality": "0.14.0",
-    "@templatical/renderer": "0.14.0"
+    "@templatical/media-library": "0.15.1",
+    "@templatical/quality": "0.15.1",
+    "@templatical/renderer": "0.15.1"
   },
   "peerDependenciesMeta": {
     "@templatical/renderer": {

package/dist/CountdownBlock-DtAokAVw.js

@@ -1,92 +0,0 @@
-import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
-import { A as t, M as n, X as r, b as i, d as a, f as o, h as s, l as c, m as l, ot as u, rt as d, st as f } from "./vue.runtime.esm-bundler-BPa483TZ.js";
-import { c as p } from "./dist-DuCzdgDA.js";
-import { t as m } from "./useI18n-BWqM8i78.js";
-//#region src/components/blocks/CountdownBlock.vue?vue&type=script&setup=true&lang.ts
-var h = {
-	key: 0,
-	class: "tpl:flex tpl:items-center tpl:justify-center tpl:py-8 tpl:text-sm tpl:text-[var(--tpl-text-dim)]"
-}, g = {
-	key: 1,
-	class: "tpl:flex tpl:items-center tpl:justify-center tpl:py-4 tpl:text-xs tpl:text-[var(--tpl-text-dim)] tpl:opacity-50"
-}, _ = { class: "tpl:text-center" }, v = /*@__PURE__*/ i({
-	__name: "CountdownBlock",
-	props: {
-		block: {},
-		viewport: {}
-	},
-	setup(e) {
-		let i = e, { t: v } = m(), y = r(Date.now());
-		p(() => {
-			y.value = Date.now();
-		}, 1e3);
-		let b = a(() => {
-			if (!i.block.targetDate) return null;
-			let e = new Date(i.block.targetDate);
-			return isNaN(e.getTime()) ? null : e.getTime();
-		}), x = a(() => b.value ? y.value >= b.value : !1), S = a(() => {
-			if (!b.value || x.value) return {
-				days: 0,
-				hours: 0,
-				minutes: 0,
-				seconds: 0
-			};
-			let e = b.value - y.value, t = Math.floor(e / 1e3);
-			return {
-				days: Math.floor(t / 86400),
-				hours: Math.floor(t % 86400 / 3600),
-				minutes: Math.floor(t % 3600 / 60),
-				seconds: t % 60
-			};
-		}), C = a(() => {
-			let e = [];
-			return i.block.showDays && e.push({
-				value: String(S.value.days).padStart(2, "0"),
-				label: i.block.labelDays
-			}), i.block.showHours && e.push({
-				value: String(S.value.hours).padStart(2, "0"),
-				label: i.block.labelHours
-			}), i.block.showMinutes && e.push({
-				value: String(S.value.minutes).padStart(2, "0"),
-				label: i.block.labelMinutes
-			}), i.block.showSeconds && e.push({
-				value: String(S.value.seconds).padStart(2, "0"),
-				label: i.block.labelSeconds
-			}), e;
-		}), w = a(() => ({
-			backgroundColor: i.block.backgroundColor,
-			fontFamily: i.block.fontFamily || "inherit"
-		})), T = a(() => ({
-			fontSize: `${i.block.digitFontSize}px`,
-			fontWeight: "bold",
-			color: i.block.digitColor,
-			lineHeight: "1.2"
-		})), E = a(() => ({
-			fontSize: `${i.block.labelFontSize}px`,
-			color: i.block.labelColor,
-			marginTop: "4px"
-		})), D = a(() => ({
-			fontSize: `${i.block.digitFontSize}px`,
-			color: i.block.digitColor,
-			fontFamily: i.block.fontFamily || "inherit"
-		}));
-		return (r, i) => e.block.targetDate ? x.value && e.block.hideOnExpiry ? (t(), s("div", g, f(d(v).countdown.hidden), 1)) : x.value ? (t(), s("div", {
-			key: 2,
-			style: u(w.value),
-			class: "tpl:py-4 tpl:text-center"
-		}, [o("span", { style: u({
-			fontSize: `${e.block.digitFontSize}px`,
-			color: e.block.digitColor
-		}) }, f(e.block.expiredMessage), 5)], 4)) : (t(), s("div", {
-			key: 3,
-			style: u(w.value),
-			class: "tpl:flex tpl:items-center tpl:justify-center tpl:gap-2 tpl:py-4"
-		}, [(t(!0), s(c, null, n(C.value, (n, r) => (t(), s(c, { key: n.label }, [r > 0 ? (t(), s("span", {
-			key: 0,
-			style: u(D.value),
-			class: "tpl:self-start"
-		}, f(e.block.separator), 5)) : l("", !0), o("div", _, [o("div", { style: u(T.value) }, f(n.value), 5), o("div", { style: u(E.value) }, f(n.label), 5)])], 64))), 128))], 4)) : (t(), s("div", h, f(d(v).countdown.setDate), 1));
-	}
-}), y = /* @__PURE__ */ e({ default: () => b }), b = v;
-//#endregion
-export { y as n, b as t };

package/dist/CountdownToolbar-Dtqgwy0g.js

@@ -1,210 +0,0 @@
-import { A as e, M as t, _ as n, at as r, b as i, d as a, f as o, h as s, l as c, p as l, rt as u, st as d, v as f, z as p } from "./vue.runtime.esm-bundler-BPa483TZ.js";
-import { t as m } from "./useI18n-BWqM8i78.js";
-import { f as h } from "./styleConstants-lGobwiLH.js";
-import { i as g, n as _, r as v, t as y } from "./NumberWithSuffix-D2mW_DhT.js";
-//#region src/components/toolbar/CheckboxItem.vue?vue&type=script&setup=true&lang.ts
-var b = { class: "tpl:flex tpl:cursor-pointer tpl:items-center tpl:gap-2 tpl:text-[12px] tpl:text-[var(--tpl-text)]" }, x = ["checked"], S = /* @__PURE__ */ i({
-	__name: "CheckboxItem",
-	props: {
-		modelValue: { type: Boolean },
-		label: {}
-	},
-	emits: ["update:modelValue"],
-	setup(t, { emit: r }) {
-		let i = r;
-		return (r, a) => (e(), s("label", b, [o("input", {
-			type: "checkbox",
-			class: "tpl:size-3.5 tpl:cursor-pointer tpl:accent-[var(--tpl-primary)]",
-			checked: t.modelValue,
-			onChange: a[0] ||= (e) => i("update:modelValue", e.target.checked)
-		}, null, 40, x), n(" " + d(t.label), 1)]));
-	}
-}), C = ["value"], w = ["value"], T = ["value"], E = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-2" }, D = ["value"], O = { value: "" }, k = ["value"], A = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-3" }, j = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-3" }, M = { class: "tpl:grid tpl:grid-cols-2 tpl:gap-2" }, N = [
-	"value",
-	"placeholder",
-	"onInput"
-], P = ["value", "placeholder"], F = ["value"], I = /* @__PURE__ */ i({
-	__name: "CountdownToolbar",
-	props: {
-		block: {},
-		fontFamilies: {}
-	},
-	emits: ["update"],
-	setup(n, { emit: i }) {
-		let b = i, { t: x } = m(), I = [
-			"UTC",
-			"America/New_York",
-			"America/Chicago",
-			"America/Denver",
-			"America/Los_Angeles",
-			"Europe/London",
-			"Europe/Berlin",
-			"Europe/Paris",
-			"Europe/Moscow",
-			"Asia/Dubai",
-			"Asia/Kolkata",
-			"Asia/Shanghai",
-			"Asia/Tokyo",
-			"Australia/Sydney",
-			"Pacific/Auckland"
-		], L = [
-			{
-				value: ":",
-				label: ":"
-			},
-			{
-				value: "-",
-				label: "-"
-			},
-			{
-				value: " ",
-				label: "␣"
-			}
-		], R = [
-			"Days",
-			"Hours",
-			"Minutes",
-			"Seconds"
-		], z = a(() => R.map((e) => ({
-			unit: e,
-			showKey: `show${e}`,
-			labelKey: `label${e}`,
-			translationKey: e.toLowerCase()
-		})));
-		function B(e, t) {
-			b("update", { [e]: t });
-		}
-		return (i, a) => (e(), s(c, null, [
-			f(_, { label: u(x).countdown.targetDate }, {
-				default: p(() => [o("input", {
-					type: "datetime-local",
-					class: r(u(h)),
-					value: n.block.targetDate,
-					onInput: a[0] ||= (e) => B("targetDate", e.target.value)
-				}, null, 42, C)]),
-				_: 1
-			}, 8, ["label"]),
-			f(_, { label: u(x).countdown.timezone }, {
-				default: p(() => [o("select", {
-					class: r(u(h)),
-					value: n.block.timezone,
-					onChange: a[1] ||= (e) => B("timezone", e.target.value)
-				}, [(e(), s(c, null, t(I, (e) => o("option", {
-					key: e,
-					value: e
-				}, d(e), 9, T)), 64))], 42, w)]),
-				_: 1
-			}, 8, ["label"]),
-			f(_, { label: u(x).countdown.display }, {
-				default: p(() => [o("div", E, [(e(!0), s(c, null, t(z.value, (t) => (e(), l(S, {
-					key: t.unit,
-					"model-value": n.block[t.showKey],
-					label: u(x).countdown[t.translationKey],
-					"onUpdate:modelValue": (e) => B(t.showKey, e)
-				}, null, 8, [
-					"model-value",
-					"label",
-					"onUpdate:modelValue"
-				]))), 128))])]),
-				_: 1
-			}, 8, ["label"]),
-			f(_, { label: u(x).countdown.separator }, {
-				default: p(() => [f(v, {
-					options: L,
-					"model-value": n.block.separator,
-					"onUpdate:modelValue": a[2] ||= (e) => B("separator", e)
-				}, null, 8, ["model-value"])]),
-				_: 1
-			}, 8, ["label"]),
-			f(_, { label: u(x).countdown.fontFamily }, {
-				default: p(() => [o("select", {
-					class: r(u(h)),
-					value: n.block.fontFamily || "",
-					onChange: a[3] ||= (e) => B("fontFamily", e.target.value || void 0)
-				}, [o("option", O, d(u(x).countdown.inheritFont), 1), (e(!0), s(c, null, t(n.fontFamilies, (t) => (e(), s("option", {
-					key: t.value,
-					value: t.value
-				}, d(t.label), 9, k))), 128))], 42, D)]),
-				_: 1
-			}, 8, ["label"]),
-			o("div", A, [f(_, { label: u(x).countdown.digitFontSize }, {
-				default: p(() => [f(y, {
-					"model-value": n.block.digitFontSize,
-					min: 12,
-					max: 72,
-					suffix: "px",
-					"onUpdate:modelValue": a[4] ||= (e) => B("digitFontSize", e)
-				}, null, 8, ["model-value"])]),
-				_: 1
-			}, 8, ["label"]), f(_, { label: u(x).countdown.labelFontSize }, {
-				default: p(() => [f(y, {
-					"model-value": n.block.labelFontSize,
-					min: 8,
-					max: 24,
-					suffix: "px",
-					"onUpdate:modelValue": a[5] ||= (e) => B("labelFontSize", e)
-				}, null, 8, ["model-value"])]),
-				_: 1
-			}, 8, ["label"])]),
-			o("div", j, [f(_, { label: u(x).countdown.digitColor }, {
-				default: p(() => [f(g, {
-					"model-value": n.block.digitColor,
-					"onUpdate:modelValue": a[6] ||= (e) => B("digitColor", e)
-				}, null, 8, ["model-value"])]),
-				_: 1
-			}, 8, ["label"]), f(_, { label: u(x).countdown.labelColor }, {
-				default: p(() => [f(g, {
-					"model-value": n.block.labelColor,
-					"onUpdate:modelValue": a[7] ||= (e) => B("labelColor", e)
-				}, null, 8, ["model-value"])]),
-				_: 1
-			}, 8, ["label"])]),
-			f(_, { label: u(x).countdown.background }, {
-				default: p(() => [f(g, {
-					"model-value": n.block.backgroundColor,
-					"onUpdate:modelValue": a[8] ||= (e) => B("backgroundColor", e)
-				}, null, 8, ["model-value"])]),
-				_: 1
-			}, 8, ["label"]),
-			f(_, { label: u(x).countdown.labels }, {
-				default: p(() => [o("div", M, [(e(!0), s(c, null, t(z.value, (t) => (e(), s("input", {
-					key: t.unit,
-					type: "text",
-					class: r(u(h)),
-					value: n.block[t.labelKey],
-					placeholder: u(x).countdown[t.translationKey],
-					onInput: (e) => B(t.labelKey, e.target.value)
-				}, null, 42, N))), 128))])]),
-				_: 1
-			}, 8, ["label"]),
-			f(_, { label: u(x).countdown.expiry }, {
-				default: p(() => [o("input", {
-					type: "text",
-					class: r(u(h)),
-					value: n.block.expiredMessage,
-					placeholder: u(x).countdown.expiredMessagePlaceholder,
-					onInput: a[9] ||= (e) => B("expiredMessage", e.target.value)
-				}, null, 42, P)]),
-				_: 1
-			}, 8, ["label"]),
-			f(_, { label: u(x).countdown.expiredImageUrl }, {
-				default: p(() => [o("input", {
-					type: "url",
-					class: r(u(h)),
-					value: n.block.expiredImageUrl,
-					placeholder: "https://...",
-					onInput: a[10] ||= (e) => B("expiredImageUrl", e.target.value)
-				}, null, 42, F)]),
-				_: 1
-			}, 8, ["label"]),
-			f(S, {
-				"model-value": n.block.hideOnExpiry,
-				label: u(x).countdown.hideOnExpiry,
-				class: "tpl:mb-3.5",
-				"onUpdate:modelValue": a[11] ||= (e) => B("hideOnExpiry", e)
-			}, null, 8, ["model-value", "label"])
-		], 64));
-	}
-});
-//#endregion
-export { I as default };

package/dist/cdn/chunks/TitleEditor-DO1-h3RY.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TitleEditor-DO1-h3RY.js","names":[],"sources":["../../../src/components/blocks/TitleEditor.vue","../../../src/components/blocks/TitleEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables\";\nimport { useRichTextEditor } from \"../../composables/useRichTextEditor\";\nimport { usePopoverRoot } from \"../../composables/usePopoverRoot\";\nimport type { TitleBlock as TitleBlockType } from \"@templatical/types\";\nimport {\n  Bold,\n  Braces,\n  Italic,\n  Link,\n  LoaderCircle,\n  ScanLine,\n} from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\nimport {\n  THEME_STYLES_KEY,\n  UI_THEME_KEY,\n  MERGE_TAG_PICKER_KEY,\n  LOGIC_TAG_PICKER_KEY,\n} from \"../../keys\";\nimport RichTextLinkDialog from \"./RichTextLinkDialog.vue\";\nimport RichTextEditorContent from \"./RichTextEditorContent.vue\";\n\nconst props = defineProps<{\n  block: TitleBlockType;\n  toolbarPosition: { top: number; left: number };\n}>();\n\nconst emit = defineEmits<{\n  (e: \"done\"): void;\n}>();\n\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst tplUiTheme = inject(UI_THEME_KEY, null);\nconst popoverRoot = usePopoverRoot();\n// Hide the floating toolbar while either built-in picker modal is open — see\n// ParagraphToolbar.vue for the same rationale.\nconst picker = inject(MERGE_TAG_PICKER_KEY, null);\nconst logicPicker = inject(LOGIC_TAG_PICKER_KEY, null);\nconst pickerIsOpen = computed(\n  () => (picker?.isOpen.value ?? false) || (logicPicker?.isOpen.value ?? false),\n);\n\nconst { t } = useI18n();\n\nconst {\n  editor,\n  EditorContent,\n  isLoading,\n  initError,\n  retry,\n  showLinkDialog,\n  linkUrl,\n  linkDialogRef,\n  canRequestMergeTag,\n  canInsertLogicTag,\n  openLinkDialog,\n  insertLink,\n  removeLink,\n  closeLinkDialog,\n  handleLinkKeydown,\n  handleAddMergeTag,\n  handleAddLogicTag,\n} = useRichTextEditor({\n  blockId: () => props.block.id,\n  blockContent: () => props.block.content,\n  onDone: () => emit(\"done\"),\n  editorName: \"TitleEditor\",\n  async loadExtensions({\n    mergeTags,\n    syntax,\n    triggerChar,\n    autocompleteEnabled,\n    suggestionEmptyText,\n  }) {\n    const [\n      { Editor: TiptapEditor, EditorContent: EC },\n      { default: StarterKit },\n      { default: LinkExt },\n      { MergeTagNode, MergeTagSuggestion, LogicMergeTagNode },\n    ] = await Promise.all([\n      import(\"@tiptap/vue-3\"),\n      import(\"@tiptap/starter-kit\"),\n      import(\"@tiptap/extension-link\"),\n      import(\"../../extensions\"),\n    ]);\n\n    return {\n      TiptapEditor,\n      EC,\n      extensions: [\n        StarterKit.configure({\n          heading: false,\n          codeBlock: false,\n          blockquote: false,\n          horizontalRule: false,\n          bulletList: false,\n          orderedList: false,\n          listItem: false,\n          strike: false,\n        }),\n        LinkExt.configure({\n          openOnClick: false,\n          HTMLAttributes: {\n            target: \"_blank\",\n            rel: \"noopener noreferrer\",\n          },\n        }),\n        MergeTagNode.configure({ mergeTags, syntax }),\n        LogicMergeTagNode.configure({ syntax }),\n        ...(autocompleteEnabled && triggerChar && mergeTags.length > 0\n          ? [\n              MergeTagSuggestion.configure({\n                mergeTags,\n                char: triggerChar,\n                emptyText: suggestionEmptyText,\n                popoverRoot,\n              }),\n            ]\n          : []),\n      ],\n    };\n  },\n});\n</script>\n\n<template>\n  <div class=\"tpl-text-editor-wrapper tpl:relative\">\n    <Teleport v-if=\"popoverRoot && !pickerIsOpen\" :to=\"popoverRoot\">\n      <div\n        :data-tpl-theme=\"tplUiTheme\"\n        role=\"toolbar\"\n        :aria-label=\"t.titleEditor.toolbar\"\n        class=\"tpl tpl-text-toolbar tpl:fixed tpl:z-popover tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2 tpl:shadow-lg\"\n        :style=\"{\n          ...themeStyles,\n          top: `${toolbarPosition.top}px`,\n          left: `${toolbarPosition.left}px`,\n          transform: 'translateY(-100%)',\n        }\"\n      >\n        <template v-if=\"!isLoading && editor\">\n          <!-- Bold -->\n          <button\n            type=\"button\"\n            class=\"tpl-text-toolbar-btn\"\n            :class=\"{\n              'tpl-text-toolbar-btn--active': editor?.isActive('bold'),\n            }\"\n            :aria-label=\"t.titleEditor.bold\"\n            :title=\"t.titleEditor.bold\"\n            @click=\"editor?.chain().focus().toggleBold().run()\"\n          >\n            <Bold :size=\"16\" :stroke-width=\"2.5\" />\n          </button>\n          <!-- Italic -->\n          <button\n            type=\"button\"\n            class=\"tpl-text-toolbar-btn\"\n            :class=\"{\n              'tpl-text-toolbar-btn--active': editor?.isActive('italic'),\n            }\"\n            :aria-label=\"t.titleEditor.italic\"\n            :title=\"t.titleEditor.italic\"\n            @click=\"editor?.chain().focus().toggleItalic().run()\"\n          >\n            <Italic :size=\"16\" :stroke-width=\"2\" />\n          </button>\n          <span\n            class=\"tpl:mx-1.5 tpl:h-6 tpl:w-px tpl:bg-[var(--tpl-border)]\"\n            aria-hidden=\"true\"\n          ></span>\n          <!-- Link -->\n          <button\n            type=\"button\"\n            class=\"tpl-text-toolbar-btn\"\n            :class=\"{\n              'tpl-text-toolbar-btn--active': editor?.isActive('link'),\n            }\"\n            :aria-label=\"t.titleEditor.addLink\"\n            :title=\"t.titleEditor.addLink\"\n            @click=\"openLinkDialog\"\n          >\n            <Link :size=\"16\" :stroke-width=\"2\" />\n          </button>\n          <!-- Add Merge Tag -->\n          <span\n            v-if=\"canRequestMergeTag\"\n            class=\"tpl:mx-1.5 tpl:h-6 tpl:w-px tpl:bg-[var(--tpl-border)]\"\n          ></span>\n          <button\n            v-if=\"canRequestMergeTag\"\n            type=\"button\"\n            class=\"tpl:flex tpl:h-8 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-bg-active)]\"\n            :aria-label=\"t.mergeTag.insert\"\n            :title=\"t.mergeTag.insert\"\n            @click=\"handleAddMergeTag\"\n          >\n            <ScanLine :size=\"16\" :stroke-width=\"2\" />\n            {{ t.mergeTag.insertShort }}\n          </button>\n          <!-- Insert Logic -->\n          <span\n            v-if=\"canInsertLogicTag\"\n            class=\"tpl:mx-1.5 tpl:h-6 tpl:w-px tpl:bg-[var(--tpl-border)]\"\n          ></span>\n          <button\n            v-if=\"canInsertLogicTag\"\n            type=\"button\"\n            class=\"tpl:flex tpl:h-8 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-bg-active)]\"\n            :aria-label=\"t.logicTag.insert\"\n            :title=\"t.logicTag.insert\"\n            data-testid=\"insert-logic-button\"\n            @click=\"handleAddLogicTag\"\n          >\n            <Braces :size=\"16\" :stroke-width=\"2\" />\n            {{ t.logicTag.insertShort }}\n          </button>\n        </template>\n        <template v-else>\n          <div\n            class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:px-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n          >\n            <LoaderCircle class=\"tpl-spinner\" :size=\"14\" :stroke-width=\"2\" />\n            {{ t.errors.editorLoading }}\n          </div>\n        </template>\n      </div>\n    </Teleport>\n\n    <RichTextEditorContent\n      :editor=\"editor\"\n      :editor-content=\"EditorContent\"\n      :is-loading=\"isLoading\"\n      :init-error=\"initError\"\n      @retry=\"retry\"\n    />\n\n    <RichTextLinkDialog\n      :visible=\"showLinkDialog\"\n      :is-editing-link=\"editor?.isActive('link') ?? false\"\n      v-model:dialog-ref=\"linkDialogRef\"\n      v-model:link-url=\"linkUrl\"\n      @close=\"closeLinkDialog\"\n      @insert=\"insertLink\"\n      @remove=\"removeLink\"\n      @keydown=\"handleLinkKeydown\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { useI18n } from \"../../composables\";\nimport { useRichTextEditor } from \"../../composables/useRichTextEditor\";\nimport { usePopoverRoot } from \"../../composables/usePopoverRoot\";\nimport type { TitleBlock as TitleBlockType } from \"@templatical/types\";\nimport {\n  Bold,\n  Braces,\n  Italic,\n  Link,\n  LoaderCircle,\n  ScanLine,\n} from \"@lucide/vue\";\nimport { computed, inject } from \"vue\";\nimport {\n  THEME_STYLES_KEY,\n  UI_THEME_KEY,\n  MERGE_TAG_PICKER_KEY,\n  LOGIC_TAG_PICKER_KEY,\n} from \"../../keys\";\nimport RichTextLinkDialog from \"./RichTextLinkDialog.vue\";\nimport RichTextEditorContent from \"./RichTextEditorContent.vue\";\n\nconst props = defineProps<{\n  block: TitleBlockType;\n  toolbarPosition: { top: number; left: number };\n}>();\n\nconst emit = defineEmits<{\n  (e: \"done\"): void;\n}>();\n\nconst themeStyles = inject(THEME_STYLES_KEY, null);\nconst tplUiTheme = inject(UI_THEME_KEY, null);\nconst popoverRoot = usePopoverRoot();\n// Hide the floating toolbar while either built-in picker modal is open — see\n// ParagraphToolbar.vue for the same rationale.\nconst picker = inject(MERGE_TAG_PICKER_KEY, null);\nconst logicPicker = inject(LOGIC_TAG_PICKER_KEY, null);\nconst pickerIsOpen = computed(\n  () => (picker?.isOpen.value ?? false) || (logicPicker?.isOpen.value ?? false),\n);\n\nconst { t } = useI18n();\n\nconst {\n  editor,\n  EditorContent,\n  isLoading,\n  initError,\n  retry,\n  showLinkDialog,\n  linkUrl,\n  linkDialogRef,\n  canRequestMergeTag,\n  canInsertLogicTag,\n  openLinkDialog,\n  insertLink,\n  removeLink,\n  closeLinkDialog,\n  handleLinkKeydown,\n  handleAddMergeTag,\n  handleAddLogicTag,\n} = useRichTextEditor({\n  blockId: () => props.block.id,\n  blockContent: () => props.block.content,\n  onDone: () => emit(\"done\"),\n  editorName: \"TitleEditor\",\n  async loadExtensions({\n    mergeTags,\n    syntax,\n    triggerChar,\n    autocompleteEnabled,\n    suggestionEmptyText,\n  }) {\n    const [\n      { Editor: TiptapEditor, EditorContent: EC },\n      { default: StarterKit },\n      { default: LinkExt },\n      { MergeTagNode, MergeTagSuggestion, LogicMergeTagNode },\n    ] = await Promise.all([\n      import(\"@tiptap/vue-3\"),\n      import(\"@tiptap/starter-kit\"),\n      import(\"@tiptap/extension-link\"),\n      import(\"../../extensions\"),\n    ]);\n\n    return {\n      TiptapEditor,\n      EC,\n      extensions: [\n        StarterKit.configure({\n          heading: false,\n          codeBlock: false,\n          blockquote: false,\n          horizontalRule: false,\n          bulletList: false,\n          orderedList: false,\n          listItem: false,\n          strike: false,\n        }),\n        LinkExt.configure({\n          openOnClick: false,\n          HTMLAttributes: {\n            target: \"_blank\",\n            rel: \"noopener noreferrer\",\n          },\n        }),\n        MergeTagNode.configure({ mergeTags, syntax }),\n        LogicMergeTagNode.configure({ syntax }),\n        ...(autocompleteEnabled && triggerChar && mergeTags.length > 0\n          ? [\n              MergeTagSuggestion.configure({\n                mergeTags,\n                char: triggerChar,\n                emptyText: suggestionEmptyText,\n                popoverRoot,\n              }),\n            ]\n          : []),\n      ],\n    };\n  },\n});\n</script>\n\n<template>\n  <div class=\"tpl-text-editor-wrapper tpl:relative\">\n    <Teleport v-if=\"popoverRoot && !pickerIsOpen\" :to=\"popoverRoot\">\n      <div\n        :data-tpl-theme=\"tplUiTheme\"\n        role=\"toolbar\"\n        :aria-label=\"t.titleEditor.toolbar\"\n        class=\"tpl tpl-text-toolbar tpl:fixed tpl:z-popover tpl:flex tpl:items-center tpl:gap-1 tpl:rounded-lg tpl:border tpl:border-[var(--tpl-border)] tpl:bg-[var(--tpl-bg)] tpl:px-3 tpl:py-2 tpl:shadow-lg\"\n        :style=\"{\n          ...themeStyles,\n          top: `${toolbarPosition.top}px`,\n          left: `${toolbarPosition.left}px`,\n          transform: 'translateY(-100%)',\n        }\"\n      >\n        <template v-if=\"!isLoading && editor\">\n          <!-- Bold -->\n          <button\n            type=\"button\"\n            class=\"tpl-text-toolbar-btn\"\n            :class=\"{\n              'tpl-text-toolbar-btn--active': editor?.isActive('bold'),\n            }\"\n            :aria-label=\"t.titleEditor.bold\"\n            :title=\"t.titleEditor.bold\"\n            @click=\"editor?.chain().focus().toggleBold().run()\"\n          >\n            <Bold :size=\"16\" :stroke-width=\"2.5\" />\n          </button>\n          <!-- Italic -->\n          <button\n            type=\"button\"\n            class=\"tpl-text-toolbar-btn\"\n            :class=\"{\n              'tpl-text-toolbar-btn--active': editor?.isActive('italic'),\n            }\"\n            :aria-label=\"t.titleEditor.italic\"\n            :title=\"t.titleEditor.italic\"\n            @click=\"editor?.chain().focus().toggleItalic().run()\"\n          >\n            <Italic :size=\"16\" :stroke-width=\"2\" />\n          </button>\n          <span\n            class=\"tpl:mx-1.5 tpl:h-6 tpl:w-px tpl:bg-[var(--tpl-border)]\"\n            aria-hidden=\"true\"\n          ></span>\n          <!-- Link -->\n          <button\n            type=\"button\"\n            class=\"tpl-text-toolbar-btn\"\n            :class=\"{\n              'tpl-text-toolbar-btn--active': editor?.isActive('link'),\n            }\"\n            :aria-label=\"t.titleEditor.addLink\"\n            :title=\"t.titleEditor.addLink\"\n            @click=\"openLinkDialog\"\n          >\n            <Link :size=\"16\" :stroke-width=\"2\" />\n          </button>\n          <!-- Add Merge Tag -->\n          <span\n            v-if=\"canRequestMergeTag\"\n            class=\"tpl:mx-1.5 tpl:h-6 tpl:w-px tpl:bg-[var(--tpl-border)]\"\n          ></span>\n          <button\n            v-if=\"canRequestMergeTag\"\n            type=\"button\"\n            class=\"tpl:flex tpl:h-8 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-bg-active)]\"\n            :aria-label=\"t.mergeTag.insert\"\n            :title=\"t.mergeTag.insert\"\n            @click=\"handleAddMergeTag\"\n          >\n            <ScanLine :size=\"16\" :stroke-width=\"2\" />\n            {{ t.mergeTag.insertShort }}\n          </button>\n          <!-- Insert Logic -->\n          <span\n            v-if=\"canInsertLogicTag\"\n            class=\"tpl:mx-1.5 tpl:h-6 tpl:w-px tpl:bg-[var(--tpl-border)]\"\n          ></span>\n          <button\n            v-if=\"canInsertLogicTag\"\n            type=\"button\"\n            class=\"tpl:flex tpl:h-8 tpl:cursor-pointer tpl:items-center tpl:justify-center tpl:gap-1.5 tpl:rounded tpl:border-none tpl:bg-transparent tpl:px-2.5 tpl:text-xs tpl:font-medium tpl:text-[var(--tpl-text)] tpl:transition-all tpl:duration-150 tpl:hover:bg-[var(--tpl-bg-active)]\"\n            :aria-label=\"t.logicTag.insert\"\n            :title=\"t.logicTag.insert\"\n            data-testid=\"insert-logic-button\"\n            @click=\"handleAddLogicTag\"\n          >\n            <Braces :size=\"16\" :stroke-width=\"2\" />\n            {{ t.logicTag.insertShort }}\n          </button>\n        </template>\n        <template v-else>\n          <div\n            class=\"tpl:flex tpl:items-center tpl:gap-2 tpl:px-2 tpl:text-xs tpl:text-[var(--tpl-text-dim)]\"\n          >\n            <LoaderCircle class=\"tpl-spinner\" :size=\"14\" :stroke-width=\"2\" />\n            {{ t.errors.editorLoading }}\n          </div>\n        </template>\n      </div>\n    </Teleport>\n\n    <RichTextEditorContent\n      :editor=\"editor\"\n      :editor-content=\"EditorContent\"\n      :is-loading=\"isLoading\"\n      :init-error=\"initError\"\n      @retry=\"retry\"\n    />\n\n    <RichTextLinkDialog\n      :visible=\"showLinkDialog\"\n      :is-editing-link=\"editor?.isActive('link') ?? false\"\n      v-model:dialog-ref=\"linkDialogRef\"\n      v-model:link-url=\"linkUrl\"\n      @close=\"closeLinkDialog\"\n      @insert=\"insertLink\"\n      @remove=\"removeLink\"\n      @keydown=\"handleLinkKeydown\"\n    />\n  </div>\n</template>\n"],"mappings":"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"}