@m3ui-vue/m3ui-vue 0.1.11 → 0.2.1

package/dist/plugin.d.ts

@@ -1,9 +1,11 @@
 import type { App } from 'vue';
 import type { Palette } from './composables/useColorPalette';
+import type { M3Locale } from './composables/useLocale';
 export interface M3UIOptions {
     palette?: string;
     customPalettes?: Palette[];
+    locale?: Partial<M3Locale>;
 }
 export declare function createM3UI(options?: M3UIOptions): {
-    install(_app: App): void;
+    install(app: App): void;
 };

package/dist/rich-text-editor.d.ts

@@ -1 +1,2 @@
 export { default as MRichTextEditor } from './components/MRichTextEditor.vue';
+export type { RichTextEditorLabels } from './components/MRichTextEditor.vue';

package/dist/rich-text-editor.js

@@ -1,32 +1,60 @@
-import { i as e, n as t, o as n, r, t as i } from "./MMenuItem-_n5OG5MT.js";
-import { t as a } from "./MIcon-CaEooCmZ.js";
-import { t as o } from "./_plugin-vue_export-helper-B3ysoDQm.js";
-import { Fragment as s, computed as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as _, onMounted as v, openBlock as y, ref as b, renderList as x, shallowRef as S, toDisplayString as C, watch as w, withCtx as T, withKeys as E } from "vue";
+import { d as e, i as t, n, o as r, r as i, t as a } from "./MMenuItem-DpoEsH91.js";
+import { t as o } from "./MIcon-CaEooCmZ.js";
+import { t as s } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { Fragment as c, computed as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, normalizeClass as g, normalizeStyle as _, onBeforeUnmount as v, onMounted as y, openBlock as b, ref as x, renderList as S, shallowRef as C, toDisplayString as w, watch as T, withCtx as E, withKeys as D } from "vue";
 //#region src/components/MRichTextEditor.vue?vue&type=script&setup=true&lang.ts
-var D = {
+var O = {
 	key: 0,
 	class: "flex flex-wrap items-center gap-0.5 border-b border-outline-variant bg-surface-container px-2 py-1.5"
-}, O = {
+}, k = {
 	type: "button",
 	class: "flex h-8 cursor-pointer items-center gap-1 rounded px-2 text-label-large text-on-surface-variant hover:bg-on-surface/8"
-}, k = ["title", "onClick"], A = {
+}, A = ["title", "onClick"], j = {
 	key: 0,
 	class: "mx-1 h-6 w-px bg-outline-variant"
-}, j = /*#__PURE__*/ o(/* @__PURE__ */ m({
+}, M = ["title"], N = ["title"], P = /*#__PURE__*/ s(/* @__PURE__ */ h({
 	__name: "MRichTextEditor",
 	props: {
 		modelValue: {},
-		placeholder: { default: "Escribe aquí..." },
+		placeholder: {},
 		disabled: {
 			type: Boolean,
 			default: !1
 		},
-		minHeight: { default: "200px" }
+		minHeight: { default: "200px" },
+		labels: {}
 	},
 	emits: ["update:modelValue"],
-	setup(o, { emit: m }) {
-		let j = o, M = m, N = b(!1), P = S(null), F = b(null), I = b([]);
-		v(async () => {
+	setup(s, { emit: h }) {
+		let P = e(), F = s, I = l(() => ({
+			bold: P.bold,
+			italic: P.italic,
+			underline: P.underline,
+			strikethrough: P.strikethrough,
+			highlight: P.highlight,
+			bulletList: P.bulletList,
+			orderedList: P.orderedList,
+			blockquote: P.blockquote,
+			code: P.code,
+			alignLeft: P.alignLeft,
+			alignCenter: P.alignCenter,
+			alignRight: P.alignRight,
+			undo: P.undo,
+			redo: P.redo,
+			link: P.link,
+			image: P.image,
+			paragraph: P.paragraph,
+			heading1: P.heading1,
+			heading2: P.heading2,
+			heading3: P.heading3,
+			insertLink: P.insertLink,
+			insertImage: P.insertImage,
+			imageUrlLabel: P.imageUrlLabel,
+			cancel: P.cancel,
+			insert: P.insert,
+			...F.labels
+		})), L = h, R = x(!1), z = C(null), B = x(null), V = x([]);
+		y(async () => {
 			let [{ Editor: e }, { default: t }, { default: n }, { default: r }, { default: i }, { default: a }, { default: o }, { default: s }, { TextStyle: c }, { default: l }] = await Promise.all([
 				import("@tiptap/vue-3"),
 				import("@tiptap/starter-kit"),
@@ -39,9 +67,9 @@ var D = {
 				import("@tiptap/extension-text-style"),
 				import("@tiptap/extension-color")
 			]), u = new e({
-				element: F.value,
-				content: j.modelValue,
-				editable: !j.disabled,
+				element: B.value,
+				content: F.modelValue,
+				editable: !F.disabled,
 				extensions: [
 					t,
 					n,
@@ -49,41 +77,41 @@ var D = {
 					i.configure({ openOnClick: !1 }),
 					a,
 					o.configure({ multicolor: !0 }),
-					s.configure({ placeholder: j.placeholder }),
+					s.configure({ placeholder: F.placeholder ?? "Start writing..." }),
 					c,
 					l
 				],
-				onUpdate: ({ editor: e }) => M("update:modelValue", e.getHTML())
+				onUpdate: ({ editor: e }) => L("update:modelValue", e.getHTML())
 			});
-			P.value = u, I.value = [
+			z.value = u, V.value = [
 				[
 					{
 						icon: "format_bold",
-						label: "Negrita",
+						label: I.value.bold,
 						action: () => u.chain().focus().toggleBold().run(),
 						active: () => !!u.isActive("bold")
 					},
 					{
 						icon: "format_italic",
-						label: "Cursiva",
+						label: I.value.italic,
 						action: () => u.chain().focus().toggleItalic().run(),
 						active: () => !!u.isActive("italic")
 					},
 					{
 						icon: "format_underlined",
-						label: "Subrayado",
+						label: I.value.underline,
 						action: () => u.chain().focus().toggleUnderline().run(),
 						active: () => !!u.isActive("underline")
 					},
 					{
 						icon: "format_strikethrough",
-						label: "Tachado",
+						label: I.value.strikethrough,
 						action: () => u.chain().focus().toggleStrike().run(),
 						active: () => !!u.isActive("strike")
 					},
 					{
 						icon: "ink_highlighter",
-						label: "Resaltar",
+						label: I.value.highlight,
 						action: () => u.chain().focus().toggleHighlight().run(),
 						active: () => !!u.isActive("highlight")
 					}
@@ -91,25 +119,25 @@ var D = {
 				[
 					{
 						icon: "format_list_bulleted",
-						label: "Lista",
+						label: I.value.bulletList,
 						action: () => u.chain().focus().toggleBulletList().run(),
 						active: () => !!u.isActive("bulletList")
 					},
 					{
 						icon: "format_list_numbered",
-						label: "Lista numerada",
+						label: I.value.orderedList,
 						action: () => u.chain().focus().toggleOrderedList().run(),
 						active: () => !!u.isActive("orderedList")
 					},
 					{
 						icon: "format_quote",
-						label: "Cita",
+						label: I.value.blockquote,
 						action: () => u.chain().focus().toggleBlockquote().run(),
 						active: () => !!u.isActive("blockquote")
 					},
 					{
 						icon: "code",
-						label: "Código",
+						label: I.value.code,
 						action: () => u.chain().focus().toggleCode().run(),
 						active: () => !!u.isActive("code")
 					}
@@ -117,171 +145,171 @@ var D = {
 				[
 					{
 						icon: "format_align_left",
-						label: "Izquierda",
+						label: I.value.alignLeft,
 						action: () => u.chain().focus().setTextAlign("left").run(),
 						active: () => !!u.isActive({ textAlign: "left" })
 					},
 					{
 						icon: "format_align_center",
-						label: "Centro",
+						label: I.value.alignCenter,
 						action: () => u.chain().focus().setTextAlign("center").run(),
 						active: () => !!u.isActive({ textAlign: "center" })
 					},
 					{
 						icon: "format_align_right",
-						label: "Derecha",
+						label: I.value.alignRight,
 						action: () => u.chain().focus().setTextAlign("right").run(),
 						active: () => !!u.isActive({ textAlign: "right" })
 					}
 				],
 				[{
 					icon: "undo",
-					label: "Deshacer",
+					label: I.value.undo,
 					action: () => u.chain().focus().undo().run()
 				}, {
 					icon: "redo",
-					label: "Rehacer",
+					label: I.value.redo,
 					action: () => u.chain().focus().redo().run()
 				}]
-			], _(() => u.destroy()), w(() => j.modelValue, (e) => {
+			], v(() => u.destroy()), T(() => F.modelValue, (e) => {
 				u.getHTML() !== e && u.commands.setContent(e);
-			}), w(() => j.disabled, (e) => u.setEditable(!e)), N.value = !0;
+			}), T(() => F.disabled, (e) => u.setEditable(!e)), R.value = !0;
 		});
-		let L = b(!1), R = b(""), z = b(!1), B = b(""), V = c(() => {
-			let e = P.value;
-			return e ? e.isActive("heading", { level: 1 }) ? "Título 1" : e.isActive("heading", { level: 2 }) ? "Título 2" : e.isActive("heading", { level: 3 }) ? "Título 3" : "Párrafo" : "Párrafo";
+		let H = x(!1), U = x(""), W = x(!1), G = x(""), K = l(() => {
+			let e = z.value;
+			return e ? e.isActive("heading", { level: 1 }) ? I.value.heading1 : e.isActive("heading", { level: 2 }) ? I.value.heading2 : e.isActive("heading", { level: 3 }) ? I.value.heading3 : I.value.paragraph : I.value.paragraph;
 		});
-		function H(e) {
-			e === 0 ? P.value?.chain().focus().setParagraph().run() : P.value?.chain().focus().toggleHeading({ level: e }).run();
+		function q(e) {
+			e === 0 ? z.value?.chain().focus().setParagraph().run() : z.value?.chain().focus().toggleHeading({ level: e }).run();
 		}
-		function U() {
-			R.value = "", L.value = !0;
+		function J() {
+			U.value = "", H.value = !0;
 		}
-		function W() {
-			R.value && P.value?.chain().focus().setLink({ href: R.value }).run(), L.value = !1;
+		function Y() {
+			U.value && z.value?.chain().focus().setLink({ href: U.value }).run(), H.value = !1;
 		}
-		function G() {
-			B.value = "", z.value = !0;
+		function X() {
+			G.value = "", W.value = !0;
 		}
-		function K() {
-			B.value && P.value?.chain().focus().setImage({ src: B.value }).run(), z.value = !1;
+		function Z() {
+			G.value && z.value?.chain().focus().setImage({ src: G.value }).run(), W.value = !1;
 		}
-		return (c, m) => (y(), u("div", { class: h(["overflow-hidden rounded-lg border transition-colors duration-150", o.disabled ? "border-outline-variant/50 opacity-60" : "border-outline-variant focus-within:border-primary"]) }, [
-			N.value ? (y(), u("div", D, [
-				p(t, { align: "left" }, {
-					trigger: T(() => [d("button", O, [f(C(V.value) + " ", 1), p(a, {
+		return (e, l) => (b(), d("div", { class: g(["overflow-hidden rounded-lg border transition-colors duration-150", s.disabled ? "border-outline-variant/50 opacity-60" : "border-outline-variant focus-within:border-primary"]) }, [
+			R.value ? (b(), d("div", O, [
+				m(n, { align: "left" }, {
+					trigger: E(() => [f("button", k, [p(w(K.value) + " ", 1), m(o, {
 						name: "arrow_drop_down",
 						size: 20
 					})])]),
-					default: T(() => [
-						p(i, { onClick: m[0] ||= (e) => H(0) }, {
-							default: T(() => [...m[10] ||= [f("Párrafo", -1)]]),
+					default: E(() => [
+						m(a, { onClick: l[0] ||= (e) => q(0) }, {
+							default: E(() => [p(w(I.value.paragraph), 1)]),
 							_: 1
 						}),
-						p(i, { onClick: m[1] ||= (e) => H(1) }, {
-							default: T(() => [...m[11] ||= [f("Título 1", -1)]]),
+						m(a, { onClick: l[1] ||= (e) => q(1) }, {
+							default: E(() => [p(w(I.value.heading1), 1)]),
 							_: 1
 						}),
-						p(i, { onClick: m[2] ||= (e) => H(2) }, {
-							default: T(() => [...m[12] ||= [f("Título 2", -1)]]),
+						m(a, { onClick: l[2] ||= (e) => q(2) }, {
+							default: E(() => [p(w(I.value.heading2), 1)]),
 							_: 1
 						}),
-						p(i, { onClick: m[3] ||= (e) => H(3) }, {
-							default: T(() => [...m[13] ||= [f("Título 3", -1)]]),
+						m(a, { onClick: l[3] ||= (e) => q(3) }, {
+							default: E(() => [p(w(I.value.heading3), 1)]),
 							_: 1
 						})
 					]),
 					_: 1
 				}),
-				m[14] ||= d("div", { class: "mx-1 h-6 w-px bg-outline-variant" }, null, -1),
-				(y(!0), u(s, null, x(I.value, (e, t) => (y(), u(s, { key: t }, [(y(!0), u(s, null, x(e, (e) => (y(), u("button", {
+				l[10] ||= f("div", { class: "mx-1 h-6 w-px bg-outline-variant" }, null, -1),
+				(b(!0), d(c, null, S(V.value, (e, t) => (b(), d(c, { key: t }, [(b(!0), d(c, null, S(e, (e) => (b(), d("button", {
 					key: e.icon,
 					type: "button",
 					title: e.label,
-					class: h(["flex h-8 w-8 cursor-pointer items-center justify-center rounded transition-colors duration-100", e.active?.() ? "bg-secondary-container text-on-secondary-container" : "text-on-surface-variant hover:bg-on-surface/8"]),
+					class: g(["flex h-8 w-8 cursor-pointer items-center justify-center rounded transition-colors duration-100", e.active?.() ? "bg-secondary-container text-on-secondary-container" : "text-on-surface-variant hover:bg-on-surface/8"]),
 					onClick: e.action
-				}, [p(a, {
+				}, [m(o, {
 					name: e.icon,
 					size: 20
-				}, null, 8, ["name"])], 10, k))), 128)), t < I.value.length - 1 ? (y(), u("div", A)) : l("", !0)], 64))), 128)),
-				m[15] ||= d("div", { class: "mx-1 h-6 w-px bg-outline-variant" }, null, -1),
-				d("button", {
+				}, null, 8, ["name"])], 10, A))), 128)), t < V.value.length - 1 ? (b(), d("div", j)) : u("", !0)], 64))), 128)),
+				l[11] ||= f("div", { class: "mx-1 h-6 w-px bg-outline-variant" }, null, -1),
+				f("button", {
 					type: "button",
-					title: "Enlace",
+					title: I.value.link,
 					class: "flex h-8 w-8 cursor-pointer items-center justify-center rounded text-on-surface-variant transition-colors hover:bg-on-surface/8",
-					onClick: U
-				}, [p(a, {
+					onClick: J
+				}, [m(o, {
 					name: "link",
 					size: 20
-				})]),
-				d("button", {
+				})], 8, M),
+				f("button", {
 					type: "button",
-					title: "Imagen",
+					title: I.value.image,
 					class: "flex h-8 w-8 cursor-pointer items-center justify-center rounded text-on-surface-variant transition-colors hover:bg-on-surface/8",
-					onClick: G
-				}, [p(a, {
+					onClick: X
+				}, [m(o, {
 					name: "image",
 					size: 20
-				})])
-			])) : l("", !0),
-			d("div", {
+				})], 8, N)
+			])) : u("", !0),
+			f("div", {
 				ref_key: "editorContainer",
-				ref: F,
+				ref: B,
 				class: "rte-content bg-surface px-4 py-3 text-body-large text-on-surface",
-				style: g({ minHeight: o.minHeight })
+				style: _({ minHeight: s.minHeight })
 			}, null, 4),
-			p(e, {
-				modelValue: L.value,
-				"onUpdate:modelValue": m[6] ||= (e) => L.value = e,
-				title: "Insertar enlace"
+			m(t, {
+				modelValue: H.value,
+				"onUpdate:modelValue": l[6] ||= (e) => H.value = e,
+				title: I.value.insertLink
 			}, {
-				actions: T(() => [p(n, {
+				actions: E(() => [m(r, {
 					variant: "text",
-					onClick: m[5] ||= (e) => L.value = !1
+					onClick: l[5] ||= (e) => H.value = !1
 				}, {
-					default: T(() => [...m[16] ||= [f("Cancelar", -1)]]),
+					default: E(() => [p(w(I.value.cancel), 1)]),
 					_: 1
-				}), p(n, { onClick: W }, {
-					default: T(() => [...m[17] ||= [f("Insertar", -1)]]),
+				}), m(r, { onClick: Y }, {
+					default: E(() => [p(w(I.value.insert), 1)]),
 					_: 1
 				})]),
-				default: T(() => [p(r, {
-					modelValue: R.value,
-					"onUpdate:modelValue": m[4] ||= (e) => R.value = e,
+				default: E(() => [m(i, {
+					modelValue: U.value,
+					"onUpdate:modelValue": l[4] ||= (e) => U.value = e,
 					label: "URL",
 					placeholder: " ",
-					onKeydown: E(W, ["enter"])
+					onKeydown: D(Y, ["enter"])
 				}, null, 8, ["modelValue"])]),
 				_: 1
-			}, 8, ["modelValue"]),
-			p(e, {
-				modelValue: z.value,
-				"onUpdate:modelValue": m[9] ||= (e) => z.value = e,
-				title: "Insertar imagen"
+			}, 8, ["modelValue", "title"]),
+			m(t, {
+				modelValue: W.value,
+				"onUpdate:modelValue": l[9] ||= (e) => W.value = e,
+				title: I.value.insertImage
 			}, {
-				actions: T(() => [p(n, {
+				actions: E(() => [m(r, {
 					variant: "text",
-					onClick: m[8] ||= (e) => z.value = !1
+					onClick: l[8] ||= (e) => W.value = !1
 				}, {
-					default: T(() => [...m[18] ||= [f("Cancelar", -1)]]),
+					default: E(() => [p(w(I.value.cancel), 1)]),
 					_: 1
-				}), p(n, { onClick: K }, {
-					default: T(() => [...m[19] ||= [f("Insertar", -1)]]),
+				}), m(r, { onClick: Z }, {
+					default: E(() => [p(w(I.value.insert), 1)]),
 					_: 1
 				})]),
-				default: T(() => [p(r, {
-					modelValue: B.value,
-					"onUpdate:modelValue": m[7] ||= (e) => B.value = e,
-					label: "URL de la imagen",
+				default: E(() => [m(i, {
+					modelValue: G.value,
+					"onUpdate:modelValue": l[7] ||= (e) => G.value = e,
+					label: I.value.imageUrlLabel,
 					placeholder: " ",
-					onKeydown: E(K, ["enter"])
-				}, null, 8, ["modelValue"])]),
+					onKeydown: D(Z, ["enter"])
+				}, null, 8, ["modelValue", "label"])]),
 				_: 1
-			}, 8, ["modelValue"])
+			}, 8, ["modelValue", "title"])
 		], 2));
 	}
-}), [["__scopeId", "data-v-c59a60e3"]]);
+}), [["__scopeId", "data-v-e6829e5c"]]);
 //#endregion
-export { j as MRichTextEditor };
+export { P as MRichTextEditor };
 
 //# sourceMappingURL=rich-text-editor.js.map

package/dist/rich-text-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"rich-text-editor.js","names":[],"sources":["../src/components/MRichTextEditor.vue","../src/components/MRichTextEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch, onMounted, onBeforeUnmount, shallowRef, computed } from 'vue'\nimport MIcon from './MIcon.vue'\nimport MMenu from './MMenu.vue'\nimport MMenuItem from './MMenuItem.vue'\nimport MDialog from './MDialog.vue'\nimport MTextField from './MTextField.vue'\nimport MButton from './MButton.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string\n    placeholder?: string\n    disabled?: boolean\n    minHeight?: string\n  }>(),\n  { placeholder: 'Escribe aquí...', disabled: false, minHeight: '200px' },\n)\n\nconst emit = defineEmits<{ 'update:modelValue': [string] }>()\n\nconst ready = ref(false)\nconst editorRef = shallowRef<any>(null)\nconst editorContainer = ref<HTMLElement | null>(null)\n\ninterface ToolBtn {\n  icon: string\n  label: string\n  action: () => void\n  active?: () => boolean\n}\n\nconst toolGroups = ref<ToolBtn[][]>([])\n\nonMounted(async () => {\n  const [\n    { Editor },\n    { default: StarterKit },\n    { default: Underline },\n    { default: TextAlign },\n    { default: Link },\n    { default: Image },\n    { default: Highlight },\n    { default: Placeholder },\n    { TextStyle },\n    { default: Color },\n  ] = await Promise.all([\n    import('@tiptap/vue-3'),\n    import('@tiptap/starter-kit'),\n    import('@tiptap/extension-underline'),\n    import('@tiptap/extension-text-align'),\n    import('@tiptap/extension-link'),\n    import('@tiptap/extension-image'),\n    import('@tiptap/extension-highlight'),\n    import('@tiptap/extension-placeholder'),\n    import('@tiptap/extension-text-style'),\n    import('@tiptap/extension-color'),\n  ])\n\n  const editor = new Editor({\n    element: editorContainer.value!,\n    content: props.modelValue,\n    editable: !props.disabled,\n    extensions: [\n      StarterKit,\n      Underline,\n      TextAlign.configure({ types: ['heading', 'paragraph'] }),\n      Link.configure({ openOnClick: false }),\n      Image,\n      Highlight.configure({ multicolor: true }),\n      Placeholder.configure({ placeholder: props.placeholder }),\n      TextStyle,\n      Color,\n    ],\n    onUpdate: ({ editor: e }) => emit('update:modelValue', e.getHTML()),\n  })\n\n  editorRef.value = editor\n\n  toolGroups.value = [\n    [\n      { icon: 'format_bold', label: 'Negrita', action: () => editor.chain().focus().toggleBold().run(), active: () => !!editor.isActive('bold') },\n      { icon: 'format_italic', label: 'Cursiva', action: () => editor.chain().focus().toggleItalic().run(), active: () => !!editor.isActive('italic') },\n      { icon: 'format_underlined', label: 'Subrayado', action: () => editor.chain().focus().toggleUnderline().run(), active: () => !!editor.isActive('underline') },\n      { icon: 'format_strikethrough', label: 'Tachado', action: () => editor.chain().focus().toggleStrike().run(), active: () => !!editor.isActive('strike') },\n      { icon: 'ink_highlighter', label: 'Resaltar', action: () => editor.chain().focus().toggleHighlight().run(), active: () => !!editor.isActive('highlight') },\n    ],\n    [\n      { icon: 'format_list_bulleted', label: 'Lista', action: () => editor.chain().focus().toggleBulletList().run(), active: () => !!editor.isActive('bulletList') },\n      { icon: 'format_list_numbered', label: 'Lista numerada', action: () => editor.chain().focus().toggleOrderedList().run(), active: () => !!editor.isActive('orderedList') },\n      { icon: 'format_quote', label: 'Cita', action: () => editor.chain().focus().toggleBlockquote().run(), active: () => !!editor.isActive('blockquote') },\n      { icon: 'code', label: 'Código', action: () => editor.chain().focus().toggleCode().run(), active: () => !!editor.isActive('code') },\n    ],\n    [\n      { icon: 'format_align_left', label: 'Izquierda', action: () => editor.chain().focus().setTextAlign('left').run(), active: () => !!editor.isActive({ textAlign: 'left' }) },\n      { icon: 'format_align_center', label: 'Centro', action: () => editor.chain().focus().setTextAlign('center').run(), active: () => !!editor.isActive({ textAlign: 'center' }) },\n      { icon: 'format_align_right', label: 'Derecha', action: () => editor.chain().focus().setTextAlign('right').run(), active: () => !!editor.isActive({ textAlign: 'right' }) },\n    ],\n    [\n      { icon: 'undo', label: 'Deshacer', action: () => editor.chain().focus().undo().run() },\n      { icon: 'redo', label: 'Rehacer', action: () => editor.chain().focus().redo().run() },\n    ],\n  ]\n\n  onBeforeUnmount(() => editor.destroy())\n\n  watch(() => props.modelValue, (val) => {\n    if (editor.getHTML() !== val) editor.commands.setContent(val)\n  })\n\n  watch(() => props.disabled, (v) => editor.setEditable(!v))\n\n  ready.value = true\n})\n\nconst linkDialogOpen = ref(false)\nconst linkUrl = ref('')\nconst imageDialogOpen = ref(false)\nconst imageUrl = ref('')\n\nconst headingLabel = computed(() => {\n  const e = editorRef.value\n  if (!e) return 'Párrafo'\n  if (e.isActive('heading', { level: 1 })) return 'Título 1'\n  if (e.isActive('heading', { level: 2 })) return 'Título 2'\n  if (e.isActive('heading', { level: 3 })) return 'Título 3'\n  return 'Párrafo'\n})\n\nfunction setHeading(level: 0 | 1 | 2 | 3) {\n  if (level === 0) editorRef.value?.chain().focus().setParagraph().run()\n  else editorRef.value?.chain().focus().toggleHeading({ level }).run()\n}\n\nfunction openLinkDialog() {\n  linkUrl.value = ''\n  linkDialogOpen.value = true\n}\n\nfunction confirmLink() {\n  if (linkUrl.value) editorRef.value?.chain().focus().setLink({ href: linkUrl.value }).run()\n  linkDialogOpen.value = false\n}\n\nfunction openImageDialog() {\n  imageUrl.value = ''\n  imageDialogOpen.value = true\n}\n\nfunction confirmImage() {\n  if (imageUrl.value) editorRef.value?.chain().focus().setImage({ src: imageUrl.value }).run()\n  imageDialogOpen.value = false\n}\n</script>\n\n<template>\n  <div\n    class=\"overflow-hidden rounded-lg border transition-colors duration-150\"\n    :class=\"disabled ? 'border-outline-variant/50 opacity-60' : 'border-outline-variant focus-within:border-primary'\"\n  >\n    <!-- Toolbar -->\n    <div v-if=\"ready\" class=\"flex flex-wrap items-center gap-0.5 border-b border-outline-variant bg-surface-container px-2 py-1.5\">\n      <!-- Heading menu -->\n      <MMenu align=\"left\">\n        <template #trigger>\n          <button\n            type=\"button\"\n            class=\"flex h-8 cursor-pointer items-center gap-1 rounded px-2 text-label-large text-on-surface-variant hover:bg-on-surface/8\"\n          >\n            {{ headingLabel }}\n            <MIcon name=\"arrow_drop_down\" :size=\"20\" />\n          </button>\n        </template>\n        <MMenuItem @click=\"setHeading(0)\">Párrafo</MMenuItem>\n        <MMenuItem @click=\"setHeading(1)\">Título 1</MMenuItem>\n        <MMenuItem @click=\"setHeading(2)\">Título 2</MMenuItem>\n        <MMenuItem @click=\"setHeading(3)\">Título 3</MMenuItem>\n      </MMenu>\n\n      <div class=\"mx-1 h-6 w-px bg-outline-variant\" />\n\n      <template v-for=\"(group, gi) in toolGroups\" :key=\"gi\">\n        <button\n          v-for=\"btn in group\"\n          :key=\"btn.icon\"\n          type=\"button\"\n          :title=\"btn.label\"\n          class=\"flex h-8 w-8 cursor-pointer items-center justify-center rounded transition-colors duration-100\"\n          :class=\"btn.active?.() ? 'bg-secondary-container text-on-secondary-container' : 'text-on-surface-variant hover:bg-on-surface/8'\"\n          @click=\"btn.action\"\n        >\n          <MIcon :name=\"btn.icon\" :size=\"20\" />\n        </button>\n        <div v-if=\"gi < toolGroups.length - 1\" class=\"mx-1 h-6 w-px bg-outline-variant\" />\n      </template>\n\n      <div class=\"mx-1 h-6 w-px bg-outline-variant\" />\n\n      <button\n        type=\"button\"\n        title=\"Enlace\"\n        class=\"flex h-8 w-8 cursor-pointer items-center justify-center rounded text-on-surface-variant transition-colors hover:bg-on-surface/8\"\n        @click=\"openLinkDialog\"\n      >\n        <MIcon name=\"link\" :size=\"20\" />\n      </button>\n      <button\n        type=\"button\"\n        title=\"Imagen\"\n        class=\"flex h-8 w-8 cursor-pointer items-center justify-center rounded text-on-surface-variant transition-colors hover:bg-on-surface/8\"\n        @click=\"openImageDialog\"\n      >\n        <MIcon name=\"image\" :size=\"20\" />\n      </button>\n    </div>\n\n    <!-- Editor content -->\n    <div\n      ref=\"editorContainer\"\n      class=\"rte-content bg-surface px-4 py-3 text-body-large text-on-surface\"\n      :style=\"{ minHeight: minHeight }\"\n    />\n\n    <!-- Link dialog -->\n    <MDialog v-model=\"linkDialogOpen\" title=\"Insertar enlace\">\n      <MTextField v-model=\"linkUrl\" label=\"URL\" placeholder=\" \" @keydown.enter=\"confirmLink\" />\n      <template #actions>\n        <MButton variant=\"text\" @click=\"linkDialogOpen = false\">Cancelar</MButton>\n        <MButton @click=\"confirmLink\">Insertar</MButton>\n      </template>\n    </MDialog>\n\n    <!-- Image dialog -->\n    <MDialog v-model=\"imageDialogOpen\" title=\"Insertar imagen\">\n      <MTextField v-model=\"imageUrl\" label=\"URL de la imagen\" placeholder=\" \" @keydown.enter=\"confirmImage\" />\n      <template #actions>\n        <MButton variant=\"text\" @click=\"imageDialogOpen = false\">Cancelar</MButton>\n        <MButton @click=\"confirmImage\">Insertar</MButton>\n      </template>\n    </MDialog>\n  </div>\n</template>\n\n<style scoped>\n.rte-content :deep(.tiptap) {\n  outline: none;\n  min-height: inherit;\n}\n\n.rte-content :deep(.tiptap p.is-editor-empty:first-child::before) {\n  content: attr(data-placeholder);\n  float: left;\n  color: var(--color-on-surface-variant);\n  opacity: 0.5;\n  pointer-events: none;\n  height: 0;\n}\n\n.rte-content :deep(h1) { font-size: var(--text-headline-large); line-height: var(--text-headline-large--line-height); font-weight: 600; margin: 0.75em 0 0.25em; }\n.rte-content :deep(h2) { font-size: var(--text-headline-medium); line-height: var(--text-headline-medium--line-height); font-weight: 600; margin: 0.75em 0 0.25em; }\n.rte-content :deep(h3) { font-size: var(--text-headline-small); line-height: var(--text-headline-small--line-height); font-weight: 600; margin: 0.75em 0 0.25em; }\n.rte-content :deep(p) { margin: 0.5em 0; }\n.rte-content :deep(ul) { list-style-type: disc; padding-left: 1.5em; margin: 0.5em 0; }\n.rte-content :deep(ol) { list-style-type: decimal; padding-left: 1.5em; margin: 0.5em 0; }\n.rte-content :deep(blockquote) { border-left: 3px solid var(--color-primary); padding-left: 1em; margin: 0.5em 0; color: var(--color-on-surface-variant); }\n.rte-content :deep(code) { background: var(--color-surface-container-highest); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.875em; }\n.rte-content :deep(pre) { background: var(--color-surface-container-highest); padding: 1em; border-radius: 8px; overflow-x: auto; margin: 0.5em 0; }\n.rte-content :deep(pre code) { background: none; padding: 0; }\n.rte-content :deep(a) { color: var(--color-primary); text-decoration: underline; }\n.rte-content :deep(mark) { background: var(--color-tertiary-container); color: var(--color-on-tertiary-container); padding: 0.1em 0.2em; border-radius: 2px; }\n.rte-content :deep(img) { max-width: 100%; height: auto; border-radius: 8px; margin: 0.5em 0; }\n</style>\n","<script setup lang=\"ts\">\nimport { ref, watch, onMounted, onBeforeUnmount, shallowRef, computed } from 'vue'\nimport MIcon from './MIcon.vue'\nimport MMenu from './MMenu.vue'\nimport MMenuItem from './MMenuItem.vue'\nimport MDialog from './MDialog.vue'\nimport MTextField from './MTextField.vue'\nimport MButton from './MButton.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string\n    placeholder?: string\n    disabled?: boolean\n    minHeight?: string\n  }>(),\n  { placeholder: 'Escribe aquí...', disabled: false, minHeight: '200px' },\n)\n\nconst emit = defineEmits<{ 'update:modelValue': [string] }>()\n\nconst ready = ref(false)\nconst editorRef = shallowRef<any>(null)\nconst editorContainer = ref<HTMLElement | null>(null)\n\ninterface ToolBtn {\n  icon: string\n  label: string\n  action: () => void\n  active?: () => boolean\n}\n\nconst toolGroups = ref<ToolBtn[][]>([])\n\nonMounted(async () => {\n  const [\n    { Editor },\n    { default: StarterKit },\n    { default: Underline },\n    { default: TextAlign },\n    { default: Link },\n    { default: Image },\n    { default: Highlight },\n    { default: Placeholder },\n    { TextStyle },\n    { default: Color },\n  ] = await Promise.all([\n    import('@tiptap/vue-3'),\n    import('@tiptap/starter-kit'),\n    import('@tiptap/extension-underline'),\n    import('@tiptap/extension-text-align'),\n    import('@tiptap/extension-link'),\n    import('@tiptap/extension-image'),\n    import('@tiptap/extension-highlight'),\n    import('@tiptap/extension-placeholder'),\n    import('@tiptap/extension-text-style'),\n    import('@tiptap/extension-color'),\n  ])\n\n  const editor = new Editor({\n    element: editorContainer.value!,\n    content: props.modelValue,\n    editable: !props.disabled,\n    extensions: [\n      StarterKit,\n      Underline,\n      TextAlign.configure({ types: ['heading', 'paragraph'] }),\n      Link.configure({ openOnClick: false }),\n      Image,\n      Highlight.configure({ multicolor: true }),\n      Placeholder.configure({ placeholder: props.placeholder }),\n      TextStyle,\n      Color,\n    ],\n    onUpdate: ({ editor: e }) => emit('update:modelValue', e.getHTML()),\n  })\n\n  editorRef.value = editor\n\n  toolGroups.value = [\n    [\n      { icon: 'format_bold', label: 'Negrita', action: () => editor.chain().focus().toggleBold().run(), active: () => !!editor.isActive('bold') },\n      { icon: 'format_italic', label: 'Cursiva', action: () => editor.chain().focus().toggleItalic().run(), active: () => !!editor.isActive('italic') },\n      { icon: 'format_underlined', label: 'Subrayado', action: () => editor.chain().focus().toggleUnderline().run(), active: () => !!editor.isActive('underline') },\n      { icon: 'format_strikethrough', label: 'Tachado', action: () => editor.chain().focus().toggleStrike().run(), active: () => !!editor.isActive('strike') },\n      { icon: 'ink_highlighter', label: 'Resaltar', action: () => editor.chain().focus().toggleHighlight().run(), active: () => !!editor.isActive('highlight') },\n    ],\n    [\n      { icon: 'format_list_bulleted', label: 'Lista', action: () => editor.chain().focus().toggleBulletList().run(), active: () => !!editor.isActive('bulletList') },\n      { icon: 'format_list_numbered', label: 'Lista numerada', action: () => editor.chain().focus().toggleOrderedList().run(), active: () => !!editor.isActive('orderedList') },\n      { icon: 'format_quote', label: 'Cita', action: () => editor.chain().focus().toggleBlockquote().run(), active: () => !!editor.isActive('blockquote') },\n      { icon: 'code', label: 'Código', action: () => editor.chain().focus().toggleCode().run(), active: () => !!editor.isActive('code') },\n    ],\n    [\n      { icon: 'format_align_left', label: 'Izquierda', action: () => editor.chain().focus().setTextAlign('left').run(), active: () => !!editor.isActive({ textAlign: 'left' }) },\n      { icon: 'format_align_center', label: 'Centro', action: () => editor.chain().focus().setTextAlign('center').run(), active: () => !!editor.isActive({ textAlign: 'center' }) },\n      { icon: 'format_align_right', label: 'Derecha', action: () => editor.chain().focus().setTextAlign('right').run(), active: () => !!editor.isActive({ textAlign: 'right' }) },\n    ],\n    [\n      { icon: 'undo', label: 'Deshacer', action: () => editor.chain().focus().undo().run() },\n      { icon: 'redo', label: 'Rehacer', action: () => editor.chain().focus().redo().run() },\n    ],\n  ]\n\n  onBeforeUnmount(() => editor.destroy())\n\n  watch(() => props.modelValue, (val) => {\n    if (editor.getHTML() !== val) editor.commands.setContent(val)\n  })\n\n  watch(() => props.disabled, (v) => editor.setEditable(!v))\n\n  ready.value = true\n})\n\nconst linkDialogOpen = ref(false)\nconst linkUrl = ref('')\nconst imageDialogOpen = ref(false)\nconst imageUrl = ref('')\n\nconst headingLabel = computed(() => {\n  const e = editorRef.value\n  if (!e) return 'Párrafo'\n  if (e.isActive('heading', { level: 1 })) return 'Título 1'\n  if (e.isActive('heading', { level: 2 })) return 'Título 2'\n  if (e.isActive('heading', { level: 3 })) return 'Título 3'\n  return 'Párrafo'\n})\n\nfunction setHeading(level: 0 | 1 | 2 | 3) {\n  if (level === 0) editorRef.value?.chain().focus().setParagraph().run()\n  else editorRef.value?.chain().focus().toggleHeading({ level }).run()\n}\n\nfunction openLinkDialog() {\n  linkUrl.value = ''\n  linkDialogOpen.value = true\n}\n\nfunction confirmLink() {\n  if (linkUrl.value) editorRef.value?.chain().focus().setLink({ href: linkUrl.value }).run()\n  linkDialogOpen.value = false\n}\n\nfunction openImageDialog() {\n  imageUrl.value = ''\n  imageDialogOpen.value = true\n}\n\nfunction confirmImage() {\n  if (imageUrl.value) editorRef.value?.chain().focus().setImage({ src: imageUrl.value }).run()\n  imageDialogOpen.value = false\n}\n</script>\n\n<template>\n  <div\n    class=\"overflow-hidden rounded-lg border transition-colors duration-150\"\n    :class=\"disabled ? 'border-outline-variant/50 opacity-60' : 'border-outline-variant focus-within:border-primary'\"\n  >\n    <!-- Toolbar -->\n    <div v-if=\"ready\" class=\"flex flex-wrap items-center gap-0.5 border-b border-outline-variant bg-surface-container px-2 py-1.5\">\n      <!-- Heading menu -->\n      <MMenu align=\"left\">\n        <template #trigger>\n          <button\n            type=\"button\"\n            class=\"flex h-8 cursor-pointer items-center gap-1 rounded px-2 text-label-large text-on-surface-variant hover:bg-on-surface/8\"\n          >\n            {{ headingLabel }}\n            <MIcon name=\"arrow_drop_down\" :size=\"20\" />\n          </button>\n        </template>\n        <MMenuItem @click=\"setHeading(0)\">Párrafo</MMenuItem>\n        <MMenuItem @click=\"setHeading(1)\">Título 1</MMenuItem>\n        <MMenuItem @click=\"setHeading(2)\">Título 2</MMenuItem>\n        <MMenuItem @click=\"setHeading(3)\">Título 3</MMenuItem>\n      </MMenu>\n\n      <div class=\"mx-1 h-6 w-px bg-outline-variant\" />\n\n      <template v-for=\"(group, gi) in toolGroups\" :key=\"gi\">\n        <button\n          v-for=\"btn in group\"\n          :key=\"btn.icon\"\n          type=\"button\"\n          :title=\"btn.label\"\n          class=\"flex h-8 w-8 cursor-pointer items-center justify-center rounded transition-colors duration-100\"\n          :class=\"btn.active?.() ? 'bg-secondary-container text-on-secondary-container' : 'text-on-surface-variant hover:bg-on-surface/8'\"\n          @click=\"btn.action\"\n        >\n          <MIcon :name=\"btn.icon\" :size=\"20\" />\n        </button>\n        <div v-if=\"gi < toolGroups.length - 1\" class=\"mx-1 h-6 w-px bg-outline-variant\" />\n      </template>\n\n      <div class=\"mx-1 h-6 w-px bg-outline-variant\" />\n\n      <button\n        type=\"button\"\n        title=\"Enlace\"\n        class=\"flex h-8 w-8 cursor-pointer items-center justify-center rounded text-on-surface-variant transition-colors hover:bg-on-surface/8\"\n        @click=\"openLinkDialog\"\n      >\n        <MIcon name=\"link\" :size=\"20\" />\n      </button>\n      <button\n        type=\"button\"\n        title=\"Imagen\"\n        class=\"flex h-8 w-8 cursor-pointer items-center justify-center rounded text-on-surface-variant transition-colors hover:bg-on-surface/8\"\n        @click=\"openImageDialog\"\n      >\n        <MIcon name=\"image\" :size=\"20\" />\n      </button>\n    </div>\n\n    <!-- Editor content -->\n    <div\n      ref=\"editorContainer\"\n      class=\"rte-content bg-surface px-4 py-3 text-body-large text-on-surface\"\n      :style=\"{ minHeight: minHeight }\"\n    />\n\n    <!-- Link dialog -->\n    <MDialog v-model=\"linkDialogOpen\" title=\"Insertar enlace\">\n      <MTextField v-model=\"linkUrl\" label=\"URL\" placeholder=\" \" @keydown.enter=\"confirmLink\" />\n      <template #actions>\n        <MButton variant=\"text\" @click=\"linkDialogOpen = false\">Cancelar</MButton>\n        <MButton @click=\"confirmLink\">Insertar</MButton>\n      </template>\n    </MDialog>\n\n    <!-- Image dialog -->\n    <MDialog v-model=\"imageDialogOpen\" title=\"Insertar imagen\">\n      <MTextField v-model=\"imageUrl\" label=\"URL de la imagen\" placeholder=\" \" @keydown.enter=\"confirmImage\" />\n      <template #actions>\n        <MButton variant=\"text\" @click=\"imageDialogOpen = false\">Cancelar</MButton>\n        <MButton @click=\"confirmImage\">Insertar</MButton>\n      </template>\n    </MDialog>\n  </div>\n</template>\n\n<style scoped>\n.rte-content :deep(.tiptap) {\n  outline: none;\n  min-height: inherit;\n}\n\n.rte-content :deep(.tiptap p.is-editor-empty:first-child::before) {\n  content: attr(data-placeholder);\n  float: left;\n  color: var(--color-on-surface-variant);\n  opacity: 0.5;\n  pointer-events: none;\n  height: 0;\n}\n\n.rte-content :deep(h1) { font-size: var(--text-headline-large); line-height: var(--text-headline-large--line-height); font-weight: 600; margin: 0.75em 0 0.25em; }\n.rte-content :deep(h2) { font-size: var(--text-headline-medium); line-height: var(--text-headline-medium--line-height); font-weight: 600; margin: 0.75em 0 0.25em; }\n.rte-content :deep(h3) { font-size: var(--text-headline-small); line-height: var(--text-headline-small--line-height); font-weight: 600; margin: 0.75em 0 0.25em; }\n.rte-content :deep(p) { margin: 0.5em 0; }\n.rte-content :deep(ul) { list-style-type: disc; padding-left: 1.5em; margin: 0.5em 0; }\n.rte-content :deep(ol) { list-style-type: decimal; padding-left: 1.5em; margin: 0.5em 0; }\n.rte-content :deep(blockquote) { border-left: 3px solid var(--color-primary); padding-left: 1em; margin: 0.5em 0; color: var(--color-on-surface-variant); }\n.rte-content :deep(code) { background: var(--color-surface-container-highest); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.875em; }\n.rte-content :deep(pre) { background: var(--color-surface-container-highest); padding: 1em; border-radius: 8px; overflow-x: auto; margin: 0.5em 0; }\n.rte-content :deep(pre code) { background: none; padding: 0; }\n.rte-content :deep(a) { color: var(--color-primary); text-decoration: underline; }\n.rte-content :deep(mark) { background: var(--color-tertiary-container); color: var(--color-on-tertiary-container); padding: 0.1em 0.2em; border-radius: 2px; }\n.rte-content :deep(img) { max-width: 100%; height: auto; border-radius: 8px; margin: 0.5em 0; }\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"rich-text-editor.js","names":[],"sources":["../src/components/MRichTextEditor.vue","../src/components/MRichTextEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch, onMounted, onBeforeUnmount, shallowRef, computed } from 'vue'\nimport MIcon from './MIcon.vue'\nimport MMenu from './MMenu.vue'\nimport MMenuItem from './MMenuItem.vue'\nimport MDialog from './MDialog.vue'\nimport MTextField from './MTextField.vue'\nimport MButton from './MButton.vue'\nimport { useLocale } from '../composables/useLocale'\n\nexport interface RichTextEditorLabels {\n  bold?: string\n  italic?: string\n  underline?: string\n  strikethrough?: string\n  highlight?: string\n  bulletList?: string\n  orderedList?: string\n  blockquote?: string\n  code?: string\n  alignLeft?: string\n  alignCenter?: string\n  alignRight?: string\n  undo?: string\n  redo?: string\n  link?: string\n  image?: string\n  paragraph?: string\n  heading1?: string\n  heading2?: string\n  heading3?: string\n  insertLink?: string\n  insertImage?: string\n  imageUrlLabel?: string\n  cancel?: string\n  insert?: string\n}\n\nconst locale = useLocale()\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string\n    placeholder?: string\n    disabled?: boolean\n    minHeight?: string\n    labels?: RichTextEditorLabels\n  }>(),\n  { disabled: false, minHeight: '200px' },\n)\n\nconst l = computed<Required<RichTextEditorLabels>>(() => ({\n  bold: locale.bold,\n  italic: locale.italic,\n  underline: locale.underline,\n  strikethrough: locale.strikethrough,\n  highlight: locale.highlight,\n  bulletList: locale.bulletList,\n  orderedList: locale.orderedList,\n  blockquote: locale.blockquote,\n  code: locale.code,\n  alignLeft: locale.alignLeft,\n  alignCenter: locale.alignCenter,\n  alignRight: locale.alignRight,\n  undo: locale.undo,\n  redo: locale.redo,\n  link: locale.link,\n  image: locale.image,\n  paragraph: locale.paragraph,\n  heading1: locale.heading1,\n  heading2: locale.heading2,\n  heading3: locale.heading3,\n  insertLink: locale.insertLink,\n  insertImage: locale.insertImage,\n  imageUrlLabel: locale.imageUrlLabel,\n  cancel: locale.cancel,\n  insert: locale.insert,\n  ...props.labels,\n}))\n\nconst emit = defineEmits<{ 'update:modelValue': [string] }>()\n\nconst ready = ref(false)\nconst editorRef = shallowRef<any>(null)\nconst editorContainer = ref<HTMLElement | null>(null)\n\ninterface ToolBtn {\n  icon: string\n  label: string\n  action: () => void\n  active?: () => boolean\n}\n\nconst toolGroups = ref<ToolBtn[][]>([])\n\nonMounted(async () => {\n  const [\n    { Editor },\n    { default: StarterKit },\n    { default: Underline },\n    { default: TextAlign },\n    { default: Link },\n    { default: Image },\n    { default: Highlight },\n    { default: Placeholder },\n    { TextStyle },\n    { default: Color },\n  ] = await Promise.all([\n    import('@tiptap/vue-3'),\n    import('@tiptap/starter-kit'),\n    import('@tiptap/extension-underline'),\n    import('@tiptap/extension-text-align'),\n    import('@tiptap/extension-link'),\n    import('@tiptap/extension-image'),\n    import('@tiptap/extension-highlight'),\n    import('@tiptap/extension-placeholder'),\n    import('@tiptap/extension-text-style'),\n    import('@tiptap/extension-color'),\n  ])\n\n  const editor = new Editor({\n    element: editorContainer.value!,\n    content: props.modelValue,\n    editable: !props.disabled,\n    extensions: [\n      StarterKit,\n      Underline,\n      TextAlign.configure({ types: ['heading', 'paragraph'] }),\n      Link.configure({ openOnClick: false }),\n      Image,\n      Highlight.configure({ multicolor: true }),\n      Placeholder.configure({ placeholder: props.placeholder ?? 'Start writing...' }),\n      TextStyle,\n      Color,\n    ],\n    onUpdate: ({ editor: e }) => emit('update:modelValue', e.getHTML()),\n  })\n\n  editorRef.value = editor\n\n  toolGroups.value = [\n    [\n      { icon: 'format_bold', label: l.value.bold, action: () => editor.chain().focus().toggleBold().run(), active: () => !!editor.isActive('bold') },\n      { icon: 'format_italic', label: l.value.italic, action: () => editor.chain().focus().toggleItalic().run(), active: () => !!editor.isActive('italic') },\n      { icon: 'format_underlined', label: l.value.underline, action: () => editor.chain().focus().toggleUnderline().run(), active: () => !!editor.isActive('underline') },\n      { icon: 'format_strikethrough', label: l.value.strikethrough, action: () => editor.chain().focus().toggleStrike().run(), active: () => !!editor.isActive('strike') },\n      { icon: 'ink_highlighter', label: l.value.highlight, action: () => editor.chain().focus().toggleHighlight().run(), active: () => !!editor.isActive('highlight') },\n    ],\n    [\n      { icon: 'format_list_bulleted', label: l.value.bulletList, action: () => editor.chain().focus().toggleBulletList().run(), active: () => !!editor.isActive('bulletList') },\n      { icon: 'format_list_numbered', label: l.value.orderedList, action: () => editor.chain().focus().toggleOrderedList().run(), active: () => !!editor.isActive('orderedList') },\n      { icon: 'format_quote', label: l.value.blockquote, action: () => editor.chain().focus().toggleBlockquote().run(), active: () => !!editor.isActive('blockquote') },\n      { icon: 'code', label: l.value.code, action: () => editor.chain().focus().toggleCode().run(), active: () => !!editor.isActive('code') },\n    ],\n    [\n      { icon: 'format_align_left', label: l.value.alignLeft, action: () => editor.chain().focus().setTextAlign('left').run(), active: () => !!editor.isActive({ textAlign: 'left' }) },\n      { icon: 'format_align_center', label: l.value.alignCenter, action: () => editor.chain().focus().setTextAlign('center').run(), active: () => !!editor.isActive({ textAlign: 'center' }) },\n      { icon: 'format_align_right', label: l.value.alignRight, action: () => editor.chain().focus().setTextAlign('right').run(), active: () => !!editor.isActive({ textAlign: 'right' }) },\n    ],\n    [\n      { icon: 'undo', label: l.value.undo, action: () => editor.chain().focus().undo().run() },\n      { icon: 'redo', label: l.value.redo, action: () => editor.chain().focus().redo().run() },\n    ],\n  ]\n\n  onBeforeUnmount(() => editor.destroy())\n\n  watch(() => props.modelValue, (val) => {\n    if (editor.getHTML() !== val) editor.commands.setContent(val)\n  })\n\n  watch(() => props.disabled, (v) => editor.setEditable(!v))\n\n  ready.value = true\n})\n\nconst linkDialogOpen = ref(false)\nconst linkUrl = ref('')\nconst imageDialogOpen = ref(false)\nconst imageUrl = ref('')\n\nconst headingLabel = computed(() => {\n  const e = editorRef.value\n  if (!e) return l.value.paragraph\n  if (e.isActive('heading', { level: 1 })) return l.value.heading1\n  if (e.isActive('heading', { level: 2 })) return l.value.heading2\n  if (e.isActive('heading', { level: 3 })) return l.value.heading3\n  return l.value.paragraph\n})\n\nfunction setHeading(level: 0 | 1 | 2 | 3) {\n  if (level === 0) editorRef.value?.chain().focus().setParagraph().run()\n  else editorRef.value?.chain().focus().toggleHeading({ level }).run()\n}\n\nfunction openLinkDialog() {\n  linkUrl.value = ''\n  linkDialogOpen.value = true\n}\n\nfunction confirmLink() {\n  if (linkUrl.value) editorRef.value?.chain().focus().setLink({ href: linkUrl.value }).run()\n  linkDialogOpen.value = false\n}\n\nfunction openImageDialog() {\n  imageUrl.value = ''\n  imageDialogOpen.value = true\n}\n\nfunction confirmImage() {\n  if (imageUrl.value) editorRef.value?.chain().focus().setImage({ src: imageUrl.value }).run()\n  imageDialogOpen.value = false\n}\n</script>\n\n<template>\n  <div\n    class=\"overflow-hidden rounded-lg border transition-colors duration-150\"\n    :class=\"disabled ? 'border-outline-variant/50 opacity-60' : 'border-outline-variant focus-within:border-primary'\"\n  >\n    <!-- Toolbar -->\n    <div v-if=\"ready\" class=\"flex flex-wrap items-center gap-0.5 border-b border-outline-variant bg-surface-container px-2 py-1.5\">\n      <!-- Heading menu -->\n      <MMenu align=\"left\">\n        <template #trigger>\n          <button\n            type=\"button\"\n            class=\"flex h-8 cursor-pointer items-center gap-1 rounded px-2 text-label-large text-on-surface-variant hover:bg-on-surface/8\"\n          >\n            {{ headingLabel }}\n            <MIcon name=\"arrow_drop_down\" :size=\"20\" />\n          </button>\n        </template>\n        <MMenuItem @click=\"setHeading(0)\">{{ l.paragraph }}</MMenuItem>\n        <MMenuItem @click=\"setHeading(1)\">{{ l.heading1 }}</MMenuItem>\n        <MMenuItem @click=\"setHeading(2)\">{{ l.heading2 }}</MMenuItem>\n        <MMenuItem @click=\"setHeading(3)\">{{ l.heading3 }}</MMenuItem>\n      </MMenu>\n\n      <div class=\"mx-1 h-6 w-px bg-outline-variant\" />\n\n      <template v-for=\"(group, gi) in toolGroups\" :key=\"gi\">\n        <button\n          v-for=\"btn in group\"\n          :key=\"btn.icon\"\n          type=\"button\"\n          :title=\"btn.label\"\n          class=\"flex h-8 w-8 cursor-pointer items-center justify-center rounded transition-colors duration-100\"\n          :class=\"btn.active?.() ? 'bg-secondary-container text-on-secondary-container' : 'text-on-surface-variant hover:bg-on-surface/8'\"\n          @click=\"btn.action\"\n        >\n          <MIcon :name=\"btn.icon\" :size=\"20\" />\n        </button>\n        <div v-if=\"gi < toolGroups.length - 1\" class=\"mx-1 h-6 w-px bg-outline-variant\" />\n      </template>\n\n      <div class=\"mx-1 h-6 w-px bg-outline-variant\" />\n\n      <button\n        type=\"button\"\n        :title=\"l.link\"\n        class=\"flex h-8 w-8 cursor-pointer items-center justify-center rounded text-on-surface-variant transition-colors hover:bg-on-surface/8\"\n        @click=\"openLinkDialog\"\n      >\n        <MIcon name=\"link\" :size=\"20\" />\n      </button>\n      <button\n        type=\"button\"\n        :title=\"l.image\"\n        class=\"flex h-8 w-8 cursor-pointer items-center justify-center rounded text-on-surface-variant transition-colors hover:bg-on-surface/8\"\n        @click=\"openImageDialog\"\n      >\n        <MIcon name=\"image\" :size=\"20\" />\n      </button>\n    </div>\n\n    <!-- Editor content -->\n    <div\n      ref=\"editorContainer\"\n      class=\"rte-content bg-surface px-4 py-3 text-body-large text-on-surface\"\n      :style=\"{ minHeight: minHeight }\"\n    />\n\n    <!-- Link dialog -->\n    <MDialog v-model=\"linkDialogOpen\" :title=\"l.insertLink\">\n      <MTextField v-model=\"linkUrl\" label=\"URL\" placeholder=\" \" @keydown.enter=\"confirmLink\" />\n      <template #actions>\n        <MButton variant=\"text\" @click=\"linkDialogOpen = false\">{{ l.cancel }}</MButton>\n        <MButton @click=\"confirmLink\">{{ l.insert }}</MButton>\n      </template>\n    </MDialog>\n\n    <!-- Image dialog -->\n    <MDialog v-model=\"imageDialogOpen\" :title=\"l.insertImage\">\n      <MTextField v-model=\"imageUrl\" :label=\"l.imageUrlLabel\" placeholder=\" \" @keydown.enter=\"confirmImage\" />\n      <template #actions>\n        <MButton variant=\"text\" @click=\"imageDialogOpen = false\">{{ l.cancel }}</MButton>\n        <MButton @click=\"confirmImage\">{{ l.insert }}</MButton>\n      </template>\n    </MDialog>\n  </div>\n</template>\n\n<style scoped>\n.rte-content :deep(.tiptap) {\n  outline: none;\n  min-height: inherit;\n}\n\n.rte-content :deep(.tiptap p.is-editor-empty:first-child::before) {\n  content: attr(data-placeholder);\n  float: left;\n  color: var(--color-on-surface-variant);\n  opacity: 0.5;\n  pointer-events: none;\n  height: 0;\n}\n\n.rte-content :deep(h1) { font-size: var(--text-headline-large); line-height: var(--text-headline-large--line-height); font-weight: 600; margin: 0.75em 0 0.25em; }\n.rte-content :deep(h2) { font-size: var(--text-headline-medium); line-height: var(--text-headline-medium--line-height); font-weight: 600; margin: 0.75em 0 0.25em; }\n.rte-content :deep(h3) { font-size: var(--text-headline-small); line-height: var(--text-headline-small--line-height); font-weight: 600; margin: 0.75em 0 0.25em; }\n.rte-content :deep(p) { margin: 0.5em 0; }\n.rte-content :deep(ul) { list-style-type: disc; padding-left: 1.5em; margin: 0.5em 0; }\n.rte-content :deep(ol) { list-style-type: decimal; padding-left: 1.5em; margin: 0.5em 0; }\n.rte-content :deep(blockquote) { border-left: 3px solid var(--color-primary); padding-left: 1em; margin: 0.5em 0; color: var(--color-on-surface-variant); }\n.rte-content :deep(code) { background: var(--color-surface-container-highest); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.875em; }\n.rte-content :deep(pre) { background: var(--color-surface-container-highest); padding: 1em; border-radius: 8px; overflow-x: auto; margin: 0.5em 0; }\n.rte-content :deep(pre code) { background: none; padding: 0; }\n.rte-content :deep(a) { color: var(--color-primary); text-decoration: underline; }\n.rte-content :deep(mark) { background: var(--color-tertiary-container); color: var(--color-on-tertiary-container); padding: 0.1em 0.2em; border-radius: 2px; }\n.rte-content :deep(img) { max-width: 100%; height: auto; border-radius: 8px; margin: 0.5em 0; }\n</style>\n","<script setup lang=\"ts\">\nimport { ref, watch, onMounted, onBeforeUnmount, shallowRef, computed } from 'vue'\nimport MIcon from './MIcon.vue'\nimport MMenu from './MMenu.vue'\nimport MMenuItem from './MMenuItem.vue'\nimport MDialog from './MDialog.vue'\nimport MTextField from './MTextField.vue'\nimport MButton from './MButton.vue'\nimport { useLocale } from '../composables/useLocale'\n\nexport interface RichTextEditorLabels {\n  bold?: string\n  italic?: string\n  underline?: string\n  strikethrough?: string\n  highlight?: string\n  bulletList?: string\n  orderedList?: string\n  blockquote?: string\n  code?: string\n  alignLeft?: string\n  alignCenter?: string\n  alignRight?: string\n  undo?: string\n  redo?: string\n  link?: string\n  image?: string\n  paragraph?: string\n  heading1?: string\n  heading2?: string\n  heading3?: string\n  insertLink?: string\n  insertImage?: string\n  imageUrlLabel?: string\n  cancel?: string\n  insert?: string\n}\n\nconst locale = useLocale()\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: string\n    placeholder?: string\n    disabled?: boolean\n    minHeight?: string\n    labels?: RichTextEditorLabels\n  }>(),\n  { disabled: false, minHeight: '200px' },\n)\n\nconst l = computed<Required<RichTextEditorLabels>>(() => ({\n  bold: locale.bold,\n  italic: locale.italic,\n  underline: locale.underline,\n  strikethrough: locale.strikethrough,\n  highlight: locale.highlight,\n  bulletList: locale.bulletList,\n  orderedList: locale.orderedList,\n  blockquote: locale.blockquote,\n  code: locale.code,\n  alignLeft: locale.alignLeft,\n  alignCenter: locale.alignCenter,\n  alignRight: locale.alignRight,\n  undo: locale.undo,\n  redo: locale.redo,\n  link: locale.link,\n  image: locale.image,\n  paragraph: locale.paragraph,\n  heading1: locale.heading1,\n  heading2: locale.heading2,\n  heading3: locale.heading3,\n  insertLink: locale.insertLink,\n  insertImage: locale.insertImage,\n  imageUrlLabel: locale.imageUrlLabel,\n  cancel: locale.cancel,\n  insert: locale.insert,\n  ...props.labels,\n}))\n\nconst emit = defineEmits<{ 'update:modelValue': [string] }>()\n\nconst ready = ref(false)\nconst editorRef = shallowRef<any>(null)\nconst editorContainer = ref<HTMLElement | null>(null)\n\ninterface ToolBtn {\n  icon: string\n  label: string\n  action: () => void\n  active?: () => boolean\n}\n\nconst toolGroups = ref<ToolBtn[][]>([])\n\nonMounted(async () => {\n  const [\n    { Editor },\n    { default: StarterKit },\n    { default: Underline },\n    { default: TextAlign },\n    { default: Link },\n    { default: Image },\n    { default: Highlight },\n    { default: Placeholder },\n    { TextStyle },\n    { default: Color },\n  ] = await Promise.all([\n    import('@tiptap/vue-3'),\n    import('@tiptap/starter-kit'),\n    import('@tiptap/extension-underline'),\n    import('@tiptap/extension-text-align'),\n    import('@tiptap/extension-link'),\n    import('@tiptap/extension-image'),\n    import('@tiptap/extension-highlight'),\n    import('@tiptap/extension-placeholder'),\n    import('@tiptap/extension-text-style'),\n    import('@tiptap/extension-color'),\n  ])\n\n  const editor = new Editor({\n    element: editorContainer.value!,\n    content: props.modelValue,\n    editable: !props.disabled,\n    extensions: [\n      StarterKit,\n      Underline,\n      TextAlign.configure({ types: ['heading', 'paragraph'] }),\n      Link.configure({ openOnClick: false }),\n      Image,\n      Highlight.configure({ multicolor: true }),\n      Placeholder.configure({ placeholder: props.placeholder ?? 'Start writing...' }),\n      TextStyle,\n      Color,\n    ],\n    onUpdate: ({ editor: e }) => emit('update:modelValue', e.getHTML()),\n  })\n\n  editorRef.value = editor\n\n  toolGroups.value = [\n    [\n      { icon: 'format_bold', label: l.value.bold, action: () => editor.chain().focus().toggleBold().run(), active: () => !!editor.isActive('bold') },\n      { icon: 'format_italic', label: l.value.italic, action: () => editor.chain().focus().toggleItalic().run(), active: () => !!editor.isActive('italic') },\n      { icon: 'format_underlined', label: l.value.underline, action: () => editor.chain().focus().toggleUnderline().run(), active: () => !!editor.isActive('underline') },\n      { icon: 'format_strikethrough', label: l.value.strikethrough, action: () => editor.chain().focus().toggleStrike().run(), active: () => !!editor.isActive('strike') },\n      { icon: 'ink_highlighter', label: l.value.highlight, action: () => editor.chain().focus().toggleHighlight().run(), active: () => !!editor.isActive('highlight') },\n    ],\n    [\n      { icon: 'format_list_bulleted', label: l.value.bulletList, action: () => editor.chain().focus().toggleBulletList().run(), active: () => !!editor.isActive('bulletList') },\n      { icon: 'format_list_numbered', label: l.value.orderedList, action: () => editor.chain().focus().toggleOrderedList().run(), active: () => !!editor.isActive('orderedList') },\n      { icon: 'format_quote', label: l.value.blockquote, action: () => editor.chain().focus().toggleBlockquote().run(), active: () => !!editor.isActive('blockquote') },\n      { icon: 'code', label: l.value.code, action: () => editor.chain().focus().toggleCode().run(), active: () => !!editor.isActive('code') },\n    ],\n    [\n      { icon: 'format_align_left', label: l.value.alignLeft, action: () => editor.chain().focus().setTextAlign('left').run(), active: () => !!editor.isActive({ textAlign: 'left' }) },\n      { icon: 'format_align_center', label: l.value.alignCenter, action: () => editor.chain().focus().setTextAlign('center').run(), active: () => !!editor.isActive({ textAlign: 'center' }) },\n      { icon: 'format_align_right', label: l.value.alignRight, action: () => editor.chain().focus().setTextAlign('right').run(), active: () => !!editor.isActive({ textAlign: 'right' }) },\n    ],\n    [\n      { icon: 'undo', label: l.value.undo, action: () => editor.chain().focus().undo().run() },\n      { icon: 'redo', label: l.value.redo, action: () => editor.chain().focus().redo().run() },\n    ],\n  ]\n\n  onBeforeUnmount(() => editor.destroy())\n\n  watch(() => props.modelValue, (val) => {\n    if (editor.getHTML() !== val) editor.commands.setContent(val)\n  })\n\n  watch(() => props.disabled, (v) => editor.setEditable(!v))\n\n  ready.value = true\n})\n\nconst linkDialogOpen = ref(false)\nconst linkUrl = ref('')\nconst imageDialogOpen = ref(false)\nconst imageUrl = ref('')\n\nconst headingLabel = computed(() => {\n  const e = editorRef.value\n  if (!e) return l.value.paragraph\n  if (e.isActive('heading', { level: 1 })) return l.value.heading1\n  if (e.isActive('heading', { level: 2 })) return l.value.heading2\n  if (e.isActive('heading', { level: 3 })) return l.value.heading3\n  return l.value.paragraph\n})\n\nfunction setHeading(level: 0 | 1 | 2 | 3) {\n  if (level === 0) editorRef.value?.chain().focus().setParagraph().run()\n  else editorRef.value?.chain().focus().toggleHeading({ level }).run()\n}\n\nfunction openLinkDialog() {\n  linkUrl.value = ''\n  linkDialogOpen.value = true\n}\n\nfunction confirmLink() {\n  if (linkUrl.value) editorRef.value?.chain().focus().setLink({ href: linkUrl.value }).run()\n  linkDialogOpen.value = false\n}\n\nfunction openImageDialog() {\n  imageUrl.value = ''\n  imageDialogOpen.value = true\n}\n\nfunction confirmImage() {\n  if (imageUrl.value) editorRef.value?.chain().focus().setImage({ src: imageUrl.value }).run()\n  imageDialogOpen.value = false\n}\n</script>\n\n<template>\n  <div\n    class=\"overflow-hidden rounded-lg border transition-colors duration-150\"\n    :class=\"disabled ? 'border-outline-variant/50 opacity-60' : 'border-outline-variant focus-within:border-primary'\"\n  >\n    <!-- Toolbar -->\n    <div v-if=\"ready\" class=\"flex flex-wrap items-center gap-0.5 border-b border-outline-variant bg-surface-container px-2 py-1.5\">\n      <!-- Heading menu -->\n      <MMenu align=\"left\">\n        <template #trigger>\n          <button\n            type=\"button\"\n            class=\"flex h-8 cursor-pointer items-center gap-1 rounded px-2 text-label-large text-on-surface-variant hover:bg-on-surface/8\"\n          >\n            {{ headingLabel }}\n            <MIcon name=\"arrow_drop_down\" :size=\"20\" />\n          </button>\n        </template>\n        <MMenuItem @click=\"setHeading(0)\">{{ l.paragraph }}</MMenuItem>\n        <MMenuItem @click=\"setHeading(1)\">{{ l.heading1 }}</MMenuItem>\n        <MMenuItem @click=\"setHeading(2)\">{{ l.heading2 }}</MMenuItem>\n        <MMenuItem @click=\"setHeading(3)\">{{ l.heading3 }}</MMenuItem>\n      </MMenu>\n\n      <div class=\"mx-1 h-6 w-px bg-outline-variant\" />\n\n      <template v-for=\"(group, gi) in toolGroups\" :key=\"gi\">\n        <button\n          v-for=\"btn in group\"\n          :key=\"btn.icon\"\n          type=\"button\"\n          :title=\"btn.label\"\n          class=\"flex h-8 w-8 cursor-pointer items-center justify-center rounded transition-colors duration-100\"\n          :class=\"btn.active?.() ? 'bg-secondary-container text-on-secondary-container' : 'text-on-surface-variant hover:bg-on-surface/8'\"\n          @click=\"btn.action\"\n        >\n          <MIcon :name=\"btn.icon\" :size=\"20\" />\n        </button>\n        <div v-if=\"gi < toolGroups.length - 1\" class=\"mx-1 h-6 w-px bg-outline-variant\" />\n      </template>\n\n      <div class=\"mx-1 h-6 w-px bg-outline-variant\" />\n\n      <button\n        type=\"button\"\n        :title=\"l.link\"\n        class=\"flex h-8 w-8 cursor-pointer items-center justify-center rounded text-on-surface-variant transition-colors hover:bg-on-surface/8\"\n        @click=\"openLinkDialog\"\n      >\n        <MIcon name=\"link\" :size=\"20\" />\n      </button>\n      <button\n        type=\"button\"\n        :title=\"l.image\"\n        class=\"flex h-8 w-8 cursor-pointer items-center justify-center rounded text-on-surface-variant transition-colors hover:bg-on-surface/8\"\n        @click=\"openImageDialog\"\n      >\n        <MIcon name=\"image\" :size=\"20\" />\n      </button>\n    </div>\n\n    <!-- Editor content -->\n    <div\n      ref=\"editorContainer\"\n      class=\"rte-content bg-surface px-4 py-3 text-body-large text-on-surface\"\n      :style=\"{ minHeight: minHeight }\"\n    />\n\n    <!-- Link dialog -->\n    <MDialog v-model=\"linkDialogOpen\" :title=\"l.insertLink\">\n      <MTextField v-model=\"linkUrl\" label=\"URL\" placeholder=\" \" @keydown.enter=\"confirmLink\" />\n      <template #actions>\n        <MButton variant=\"text\" @click=\"linkDialogOpen = false\">{{ l.cancel }}</MButton>\n        <MButton @click=\"confirmLink\">{{ l.insert }}</MButton>\n      </template>\n    </MDialog>\n\n    <!-- Image dialog -->\n    <MDialog v-model=\"imageDialogOpen\" :title=\"l.insertImage\">\n      <MTextField v-model=\"imageUrl\" :label=\"l.imageUrlLabel\" placeholder=\" \" @keydown.enter=\"confirmImage\" />\n      <template #actions>\n        <MButton variant=\"text\" @click=\"imageDialogOpen = false\">{{ l.cancel }}</MButton>\n        <MButton @click=\"confirmImage\">{{ l.insert }}</MButton>\n      </template>\n    </MDialog>\n  </div>\n</template>\n\n<style scoped>\n.rte-content :deep(.tiptap) {\n  outline: none;\n  min-height: inherit;\n}\n\n.rte-content :deep(.tiptap p.is-editor-empty:first-child::before) {\n  content: attr(data-placeholder);\n  float: left;\n  color: var(--color-on-surface-variant);\n  opacity: 0.5;\n  pointer-events: none;\n  height: 0;\n}\n\n.rte-content :deep(h1) { font-size: var(--text-headline-large); line-height: var(--text-headline-large--line-height); font-weight: 600; margin: 0.75em 0 0.25em; }\n.rte-content :deep(h2) { font-size: var(--text-headline-medium); line-height: var(--text-headline-medium--line-height); font-weight: 600; margin: 0.75em 0 0.25em; }\n.rte-content :deep(h3) { font-size: var(--text-headline-small); line-height: var(--text-headline-small--line-height); font-weight: 600; margin: 0.75em 0 0.25em; }\n.rte-content :deep(p) { margin: 0.5em 0; }\n.rte-content :deep(ul) { list-style-type: disc; padding-left: 1.5em; margin: 0.5em 0; }\n.rte-content :deep(ol) { list-style-type: decimal; padding-left: 1.5em; margin: 0.5em 0; }\n.rte-content :deep(blockquote) { border-left: 3px solid var(--color-primary); padding-left: 1em; margin: 0.5em 0; color: var(--color-on-surface-variant); }\n.rte-content :deep(code) { background: var(--color-surface-container-highest); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.875em; }\n.rte-content :deep(pre) { background: var(--color-surface-container-highest); padding: 1em; border-radius: 8px; overflow-x: auto; margin: 0.5em 0; }\n.rte-content :deep(pre code) { background: none; padding: 0; }\n.rte-content :deep(a) { color: var(--color-primary); text-decoration: underline; }\n.rte-content :deep(mark) { background: var(--color-tertiary-container); color: var(--color-on-tertiary-container); padding: 0.1em 0.2em; border-radius: 2px; }\n.rte-content :deep(img) { max-width: 100%; height: auto; border-radius: 8px; margin: 0.5em 0; }\n</style>\n"],"mappings":"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"}