@gxp-dev/mod-ui 2.0.10 → 2.0.12

package/dist/components/compositions/elements/editor/HtmlEditor.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,1057 @@
+import { cn as e } from "../../../../lib/utils.js";
+import t from "../../../ui/button/Button.js";
+import "../../../ui/button/index.js";
+import n from "../../../ui/checkbox/Checkbox.js";
+import "../../../ui/checkbox/index.js";
+import r from "../../../ui/dialog/Dialog.js";
+import ee from "../../../ui/dialog/DialogContent.js";
+import te from "../../../ui/dialog/DialogFooter.js";
+import ne from "../../../ui/dialog/DialogHeader.js";
+import re from "../../../ui/dialog/DialogTitle.js";
+import "../../../ui/dialog/index.js";
+import i from "../../../ui/dropdown-menu/DropdownMenu.js";
+import a from "../../../ui/dropdown-menu/DropdownMenuContent.js";
+import o from "../../../ui/dropdown-menu/DropdownMenuItem.js";
+import s from "../../../ui/dropdown-menu/DropdownMenuLabel.js";
+import c from "../../../ui/dropdown-menu/DropdownMenuSeparator.js";
+import l from "../../../ui/dropdown-menu/DropdownMenuTrigger.js";
+import "../../../ui/dropdown-menu/index.js";
+import u from "../../../ui/input/Input.js";
+import "../../../ui/input/index.js";
+import d from "../../../ui/label/Label.js";
+import "../../../ui/label/index.js";
+import ie from "../../../ui/popover/Popover.js";
+import ae from "../../../ui/popover/PopoverContent.js";
+import oe from "../../../ui/popover/PopoverTrigger.js";
+import "../../../ui/popover/index.js";
+import se from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { Fragment as ce, computed as f, createBlock as p, createCommentVNode as le, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, nextTick as y, normalizeClass as b, normalizeStyle as x, onBeforeUnmount as ue, onMounted as de, openBlock as S, ref as C, renderList as fe, resolveDynamicComponent as pe, toDisplayString as w, unref as T, vModelText as me, watch as he, withCtx as E, withDirectives as ge } from "vue";
+import { AlignCenter as _e, AlignLeft as ve, AlignRight as ye, ArrowDown as be, ArrowLeft as xe, ArrowRight as Se, ArrowUp as Ce, Bold as we, Code as Te, Combine as Ee, Heading as De, Heading1 as Oe, Heading2 as ke, Heading3 as Ae, Heading4 as je, Heading5 as Me, Heading6 as Ne, Highlighter as Pe, ImageIcon as Fe, Italic as Ie, Link2 as Le, List as Re, ListOrdered as ze, Minus as Be, Palette as Ve, Quote as He, Redo as Ue, Scissors as We, Strikethrough as Ge, Table2 as Ke, Trash2 as D, Type as qe, Underline as Je, Undo as Ye, X as O } from "@lucide/vue";
+import { EditorContent as Xe, Extension as Ze, Node as Qe, useEditor as $e } from "@tiptap/vue-3";
+import et from "@tiptap/starter-kit";
+import tt from "@tiptap/extension-underline";
+import nt from "@tiptap/extension-text-align";
+import { BackgroundColor as rt, Color as it, FontFamily as at, TextStyle as ot } from "@tiptap/extension-text-style";
+import st from "@tiptap/extension-link";
+import ct from "@tiptap/extension-image";
+import { Table as lt, TableCell as ut, TableHeader as dt, TableRow as ft } from "@tiptap/extension-table";
+//#region src/components/compositions/elements/editor/HtmlEditor.vue?vue&type=script&setup=true&lang.ts
+var pt = ["data-element-name"], mt = { class: "flex flex-wrap items-center gap-0.5 border-b border-border/40 px-1.5 py-1" }, ht = { class: "flex flex-wrap items-center gap-0.5 px-1.5 py-1" }, gt = { class: "flex items-center gap-2" }, _t = ["value"], vt = { class: "flex items-center gap-2" }, yt = ["value"], bt = { class: "px-2 pb-2" }, xt = {
+	class: "grid gap-0.5",
+	style: { "grid-template-columns": "repeat(6, 1.25rem)" }
+}, St = ["onMouseover"], Ct = { class: "grid gap-4 py-2" }, wt = { class: "grid gap-1.5" }, Tt = { class: "grid gap-1.5" }, Et = { class: "flex items-center gap-2" }, Dt = { class: "flex gap-2" }, Ot = { class: "grid gap-4 py-2" }, kt = { class: "grid gap-1.5" }, At = { class: "grid gap-1.5" }, jt = { class: "grid gap-1.5" }, Mt = /* @__PURE__ */ v({
+	__name: "HtmlEditor",
+	props: {
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		minHeight: { default: "14rem" }
+	},
+	emits: ["update:modelValue"],
+	setup(v, { emit: Mt }) {
+		let k = v, Nt = Mt, Pt = Qe.create({
+			name: "video",
+			group: "block",
+			content: "block*",
+			addAttributes() {
+				return {
+					src: { default: null },
+					width: { default: "320" },
+					height: { default: "240" },
+					controls: {
+						default: !0,
+						parseHTML: (e) => e.hasAttribute("controls"),
+						renderHTML: (e) => e.controls ? { controls: "" } : {}
+					}
+				};
+			},
+			parseHTML() {
+				return [{ tag: "video" }];
+			},
+			renderHTML({ HTMLAttributes: e }) {
+				return [
+					"video",
+					e,
+					0
+				];
+			}
+		}), Ft = ct.extend({ addAttributes() {
+			return {
+				src: { default: "" },
+				alt: { default: void 0 },
+				title: { default: void 0 },
+				style: { default: void 0 }
+			};
+		} }), It = [
+			{
+				label: "Arial",
+				value: "Arial, sans-serif"
+			},
+			{
+				label: "Verdana",
+				value: "Verdana, sans-serif"
+			},
+			{
+				label: "Tahoma",
+				value: "Tahoma, sans-serif"
+			},
+			{
+				label: "Times New Roman",
+				value: "'Times New Roman', serif"
+			},
+			{
+				label: "Georgia",
+				value: "Georgia, serif"
+			},
+			{
+				label: "Courier New",
+				value: "'Courier New', monospace"
+			}
+		], A = f(() => !!(k.disabled || k.readonly)), j = $e({
+			content: k.modelValue ?? "",
+			editable: !A.value,
+			extensions: [
+				et,
+				tt,
+				nt.configure({ types: ["heading", "paragraph"] }),
+				ot,
+				it,
+				rt,
+				at.configure({ types: ["textStyle"] }),
+				st.configure({ openOnClick: !1 }),
+				Ft.configure({
+					inline: !1,
+					allowBase64: !0
+				}),
+				lt.configure({ resizable: !0 }),
+				ft,
+				dt,
+				ut,
+				Pt,
+				Ze.create({ name: "_noop" })
+			].filter((e) => e.name !== "_noop"),
+			editorProps: { attributes: { class: "focus:outline-none" } },
+			onUpdate: () => {
+				j.value && Nt("update:modelValue", j.value.getHTML());
+			},
+			onSelectionUpdate: () => {
+				Lt();
+			}
+		});
+		he(() => k.modelValue, (e) => {
+			let t = j.value;
+			if (!t) return;
+			let n = e ?? "";
+			n !== t.getHTML() && t.commands.setContent(n, { emitUpdate: !1 });
+		}), he(A, (e) => {
+			j.value?.setEditable(!e);
+		}), ue(() => {
+			j.value?.destroy();
+		}), de(() => {
+			y(() => {
+				let e = j.value;
+				e && k.modelValue && e.isEmpty && e.commands.setContent(k.modelValue, { emitUpdate: !1 });
+			});
+		});
+		let M = C(null), N = C("left"), P = C(null), F = C(""), I = C("");
+		function Lt() {
+			let e = j.value;
+			if (!e) return;
+			M.value = null;
+			for (let t = 1; t <= 6; t++) if (e.isActive("heading", { level: t })) {
+				M.value = t;
+				break;
+			}
+			e.isActive({ textAlign: "center" }) ? N.value = "center" : e.isActive({ textAlign: "right" }) ? N.value = "right" : N.value = "left", P.value = It.find((t) => e.isActive("textStyle", { fontFamily: t.value }))?.value ?? null;
+			let t = e.getAttributes("textStyle");
+			F.value = typeof t.color == "string" ? t.color : "", I.value = typeof t.backgroundColor == "string" ? t.backgroundColor : "";
+		}
+		function L(e, t) {
+			let n = j.value;
+			return n ? t ? n.isActive(e, t) : n.isActive(e) : !1;
+		}
+		function R(e) {
+			j.value?.chain().focus().setHeading({ level: e }).run(), M.value = e;
+		}
+		function Rt() {
+			j.value?.chain().focus().setParagraph().run(), M.value = null;
+		}
+		let zt = f(() => {
+			switch (M.value) {
+				case 1: return Oe;
+				case 2: return ke;
+				case 3: return Ae;
+				case 4: return je;
+				case 5: return Me;
+				case 6: return Ne;
+				default: return De;
+			}
+		}), Bt = f(() => N.value === "center" ? _e : N.value === "right" ? ye : ve);
+		function Vt(e) {
+			j.value?.chain().focus().setTextAlign(e).run(), N.value = e;
+		}
+		function Ht(e) {
+			j.value?.chain().focus().unsetFontFamily().setFontFamily(e).run(), P.value = e;
+		}
+		function Ut() {
+			j.value?.chain().focus().unsetFontFamily().run(), P.value = null;
+		}
+		function Wt(e) {
+			(j.value?.chain().focus())?.unsetColor()?.setColor(e)?.run(), F.value = e;
+		}
+		function Gt() {
+			(j.value?.chain().focus())?.unsetColor()?.run(), F.value = "";
+		}
+		function Kt(e) {
+			(j.value?.chain().focus())?.unsetBackgroundColor()?.setBackgroundColor(e)?.run(), I.value = e;
+		}
+		function qt() {
+			(j.value?.chain().focus())?.unsetBackgroundColor()?.run(), I.value = "";
+		}
+		function Jt(e) {
+			e === "bullet" ? j.value?.chain().focus().toggleBulletList().run() : j.value?.chain().focus().toggleOrderedList().run();
+		}
+		let z = C(2), B = C(2), Yt = f(() => {
+			let e = [];
+			for (let t = 1; t <= 4; t++) for (let n = 1; n <= 6; n++) e.push({
+				r: t,
+				c: n
+			});
+			return e;
+		});
+		function Xt() {
+			j.value?.chain().focus().insertTable({
+				rows: z.value,
+				cols: B.value,
+				withHeaderRow: !0
+			}).run();
+		}
+		let V = C(!1), H = C(""), U = C(""), W = C(!0), G = C(!1);
+		function Zt() {
+			let e = j.value;
+			if (e) {
+				if (G.value = e.isActive("link"), G.value) {
+					e.chain().focus().extendMarkRange("link").run();
+					let t = e.getAttributes("link");
+					H.value = typeof t.href == "string" ? t.href : "", W.value = t.target === "_blank";
+					let { from: n, to: r } = e.state.selection;
+					U.value = e.state.doc.textBetween(n, r, " ");
+				} else {
+					let { from: t, to: n } = e.state.selection;
+					U.value = e.state.doc.textBetween(t, n, " "), H.value = "https://", W.value = !0;
+				}
+				U.value ||= "Link", V.value = !0;
+			}
+		}
+		function Qt() {
+			let e = j.value;
+			if (!e || !H.value) return;
+			e.isActive("link") && e.chain().focus().unsetLink().run();
+			let t = W.value ? "_blank" : "_self", { from: n, to: r } = e.state.selection;
+			n === r ? e.chain().focus().insertContent(`<a href="${H.value}" target="${t}">${U.value}</a>`).run() : e.chain().focus().extendMarkRange("link").setLink({
+				href: H.value,
+				target: t
+			}).run(), V.value = !1;
+		}
+		function $t() {
+			j.value?.chain().focus().extendMarkRange("link").unsetLink().run(), V.value = !1;
+		}
+		let K = C(!1), q = C(""), J = C(""), Y = C(""), X = C(!1);
+		function en() {
+			let e = j.value;
+			if (e) {
+				if (X.value = e.isActive("image"), X.value) {
+					let t = e.getAttributes("image");
+					q.value = typeof t.src == "string" ? t.src : "", J.value = typeof t.alt == "string" ? t.alt : "", Y.value = typeof t.style == "string" ? t.style : "";
+				} else q.value = "", J.value = "", Y.value = "width: auto; height: auto; max-width: 100%;";
+				K.value = !0;
+			}
+		}
+		function tn() {
+			let e = j.value;
+			if (!e || !q.value) return;
+			let t = {
+				src: q.value,
+				alt: J.value || void 0,
+				style: Y.value || void 0
+			};
+			X.value ? e.chain().focus().updateAttributes("image", t).run() : e.chain().focus().setImage(t).run(), K.value = !1;
+		}
+		let Z = C(!1), Q = C("");
+		function nn() {
+			j.value && (Q.value = j.value.getHTML(), Z.value = !0);
+		}
+		function rn() {
+			j.value && (j.value.commands.setContent(Q.value), Nt("update:modelValue", Q.value), Z.value = !1);
+		}
+		let an = f(() => k.errors.length > 0), on = f(() => ({ minHeight: k.minHeight }));
+		function $(t) {
+			return e("h-7 w-7 p-0 shrink-0", t ? "bg-muted text-foreground" : "text-muted-foreground");
+		}
+		return (f, y) => (S(), p(T(se), {
+			label: v.label,
+			required: v.required,
+			"hide-label": v.hideLabel,
+			for: v.id,
+			"help-text": v.helpText,
+			errors: v.errors,
+			"data-testid": "html-editor"
+		}, {
+			default: E(() => [
+				h("div", {
+					class: b(T(e)("rounded-md border border-input bg-background shadow-sm overflow-hidden", an.value ? "border-destructive ring-1 ring-destructive" : "", A.value ? "opacity-60" : "")),
+					"data-element-name": v.name ?? void 0
+				}, [h("div", {
+					class: b(["flex flex-col border-b bg-muted/30", A.value ? "pointer-events-none" : ""]),
+					role: "toolbar",
+					"aria-label": "HTML formatting",
+					"data-testid": "html-editor-toolbar"
+				}, [h("div", mt, [
+					_(T(i), null, {
+						default: E(() => [_(T(l), { "as-child": "" }, {
+							default: E(() => [_(T(t), {
+								type: "button",
+								variant: "ghost",
+								class: b($(M.value !== null)),
+								title: "Heading"
+							}, {
+								default: E(() => [(S(), p(pe(zt.value), { class: "h-4 w-4" }))]),
+								_: 1
+							}, 8, ["class"])]),
+							_: 1
+						}), _(T(a), {
+							align: "start",
+							class: "w-44"
+						}, {
+							default: E(() => [
+								_(T(s), { class: "text-xs uppercase text-muted-foreground" }, {
+									default: E(() => [...y[46] ||= [g("Heading", -1)]]),
+									_: 1
+								}),
+								_(T(c)),
+								_(T(o), {
+									class: b(M.value === 1 ? "bg-muted" : ""),
+									onClick: y[0] ||= (e) => R(1)
+								}, {
+									default: E(() => [_(T(Oe), { class: "mr-2 h-4 w-4" }), y[47] ||= g("Heading 1 ", -1)]),
+									_: 1
+								}, 8, ["class"]),
+								_(T(o), {
+									class: b(M.value === 2 ? "bg-muted" : ""),
+									onClick: y[1] ||= (e) => R(2)
+								}, {
+									default: E(() => [_(T(ke), { class: "mr-2 h-4 w-4" }), y[48] ||= g("Heading 2 ", -1)]),
+									_: 1
+								}, 8, ["class"]),
+								_(T(o), {
+									class: b(M.value === 3 ? "bg-muted" : ""),
+									onClick: y[2] ||= (e) => R(3)
+								}, {
+									default: E(() => [_(T(Ae), { class: "mr-2 h-4 w-4" }), y[49] ||= g("Heading 3 ", -1)]),
+									_: 1
+								}, 8, ["class"]),
+								_(T(o), {
+									class: b(M.value === 4 ? "bg-muted" : ""),
+									onClick: y[3] ||= (e) => R(4)
+								}, {
+									default: E(() => [_(T(je), { class: "mr-2 h-4 w-4" }), y[50] ||= g("Heading 4 ", -1)]),
+									_: 1
+								}, 8, ["class"]),
+								_(T(o), {
+									class: b(M.value === 5 ? "bg-muted" : ""),
+									onClick: y[4] ||= (e) => R(5)
+								}, {
+									default: E(() => [_(T(Me), { class: "mr-2 h-4 w-4" }), y[51] ||= g("Heading 5 ", -1)]),
+									_: 1
+								}, 8, ["class"]),
+								_(T(o), {
+									class: b(M.value === 6 ? "bg-muted" : ""),
+									onClick: y[5] ||= (e) => R(6)
+								}, {
+									default: E(() => [_(T(Ne), { class: "mr-2 h-4 w-4" }), y[52] ||= g("Heading 6 ", -1)]),
+									_: 1
+								}, 8, ["class"]),
+								_(T(c)),
+								_(T(o), { onClick: Rt }, {
+									default: E(() => [_(T(O), { class: "mr-2 h-4 w-4" }), y[53] ||= g("Clear heading ", -1)]),
+									_: 1
+								})
+							]),
+							_: 1
+						})]),
+						_: 1
+					}),
+					y[54] ||= h("div", { class: "mx-0.5 h-5 w-px bg-border/60 shrink-0" }, null, -1),
+					_(T(t), {
+						type: "button",
+						variant: "ghost",
+						class: b($(L("bold"))),
+						title: "Bold",
+						onClick: y[6] ||= (e) => T(j)?.chain().focus().toggleBold().run()
+					}, {
+						default: E(() => [_(T(we), { class: "h-4 w-4" })]),
+						_: 1
+					}, 8, ["class"]),
+					_(T(t), {
+						type: "button",
+						variant: "ghost",
+						class: b($(L("italic"))),
+						title: "Italic",
+						onClick: y[7] ||= (e) => T(j)?.chain().focus().toggleItalic().run()
+					}, {
+						default: E(() => [_(T(Ie), { class: "h-4 w-4" })]),
+						_: 1
+					}, 8, ["class"]),
+					_(T(t), {
+						type: "button",
+						variant: "ghost",
+						class: b($(L("underline"))),
+						title: "Underline",
+						onClick: y[8] ||= (e) => T(j)?.chain().focus().toggleUnderline().run()
+					}, {
+						default: E(() => [_(T(Je), { class: "h-4 w-4" })]),
+						_: 1
+					}, 8, ["class"]),
+					_(T(t), {
+						type: "button",
+						variant: "ghost",
+						class: b($(L("strike"))),
+						title: "Strikethrough",
+						onClick: y[9] ||= (e) => T(j)?.chain().focus().toggleStrike().run()
+					}, {
+						default: E(() => [_(T(Ge), { class: "h-4 w-4" })]),
+						_: 1
+					}, 8, ["class"]),
+					y[55] ||= h("div", { class: "mx-0.5 h-5 w-px bg-border/60 shrink-0" }, null, -1),
+					_(T(t), {
+						type: "button",
+						variant: "ghost",
+						class: b($(L("blockquote"))),
+						title: "Blockquote",
+						onClick: y[10] ||= (e) => T(j)?.chain().focus().toggleBlockquote().run()
+					}, {
+						default: E(() => [_(T(He), { class: "h-4 w-4" })]),
+						_: 1
+					}, 8, ["class"]),
+					_(T(t), {
+						type: "button",
+						variant: "ghost",
+						class: b($(!1)),
+						title: "Horizontal rule",
+						onClick: y[11] ||= (e) => T(j)?.chain().focus().setHorizontalRule().run()
+					}, {
+						default: E(() => [_(T(Be), { class: "h-4 w-4" })]),
+						_: 1
+					}, 8, ["class"]),
+					y[56] ||= h("div", { class: "flex-1" }, null, -1),
+					_(T(t), {
+						type: "button",
+						variant: "ghost",
+						class: b($(!1)),
+						title: "Undo",
+						disabled: !T(j)?.can().chain().focus().undo().run(),
+						onClick: y[12] ||= (e) => T(j)?.chain().focus().undo().run()
+					}, {
+						default: E(() => [_(T(Ye), { class: "h-4 w-4" })]),
+						_: 1
+					}, 8, ["class", "disabled"]),
+					_(T(t), {
+						type: "button",
+						variant: "ghost",
+						class: b($(!1)),
+						title: "Redo",
+						disabled: !T(j)?.can().chain().focus().redo().run(),
+						onClick: y[13] ||= (e) => T(j)?.chain().focus().redo().run()
+					}, {
+						default: E(() => [_(T(Ue), { class: "h-4 w-4" })]),
+						_: 1
+					}, 8, ["class", "disabled"]),
+					y[57] ||= h("div", { class: "mx-0.5 h-5 w-px bg-border/60 shrink-0" }, null, -1),
+					_(T(t), {
+						type: "button",
+						variant: "ghost",
+						class: b($(!1)),
+						title: "Edit HTML source",
+						onClick: nn
+					}, {
+						default: E(() => [_(T(Te), { class: "h-4 w-4" })]),
+						_: 1
+					}, 8, ["class"])
+				]), h("div", ht, [
+					_(T(i), null, {
+						default: E(() => [_(T(l), { "as-child": "" }, {
+							default: E(() => [_(T(t), {
+								type: "button",
+								variant: "ghost",
+								class: b($(N.value !== "left")),
+								title: "Text alignment"
+							}, {
+								default: E(() => [(S(), p(pe(Bt.value), { class: "h-4 w-4" }))]),
+								_: 1
+							}, 8, ["class"])]),
+							_: 1
+						}), _(T(a), {
+							align: "start",
+							class: "w-36"
+						}, {
+							default: E(() => [
+								_(T(o), {
+									class: b(N.value === "left" ? "bg-muted" : ""),
+									onClick: y[14] ||= (e) => Vt("left")
+								}, {
+									default: E(() => [_(T(ve), { class: "mr-2 h-4 w-4" }), y[58] ||= g("Left ", -1)]),
+									_: 1
+								}, 8, ["class"]),
+								_(T(o), {
+									class: b(N.value === "center" ? "bg-muted" : ""),
+									onClick: y[15] ||= (e) => Vt("center")
+								}, {
+									default: E(() => [_(T(_e), { class: "mr-2 h-4 w-4" }), y[59] ||= g("Center ", -1)]),
+									_: 1
+								}, 8, ["class"]),
+								_(T(o), {
+									class: b(N.value === "right" ? "bg-muted" : ""),
+									onClick: y[16] ||= (e) => Vt("right")
+								}, {
+									default: E(() => [_(T(ye), { class: "mr-2 h-4 w-4" }), y[60] ||= g("Right ", -1)]),
+									_: 1
+								}, 8, ["class"])
+							]),
+							_: 1
+						})]),
+						_: 1
+					}),
+					y[81] ||= h("div", { class: "mx-0.5 h-5 w-px bg-border/60 shrink-0" }, null, -1),
+					_(T(i), null, {
+						default: E(() => [_(T(l), { "as-child": "" }, {
+							default: E(() => [_(T(t), {
+								type: "button",
+								variant: "ghost",
+								class: b($(P.value !== null)),
+								title: "Font family"
+							}, {
+								default: E(() => [_(T(qe), { class: "h-4 w-4" })]),
+								_: 1
+							}, 8, ["class"])]),
+							_: 1
+						}), _(T(a), {
+							align: "start",
+							class: "w-52"
+						}, {
+							default: E(() => [
+								_(T(s), { class: "text-xs uppercase text-muted-foreground" }, {
+									default: E(() => [...y[61] ||= [g("Font family", -1)]]),
+									_: 1
+								}),
+								_(T(c)),
+								(S(), m(ce, null, fe(It, (e) => _(T(o), {
+									key: e.value,
+									class: b(P.value === e.value ? "bg-muted" : ""),
+									style: x(`font-family: ${e.value}`),
+									onClick: (t) => Ht(e.value)
+								}, {
+									default: E(() => [g(w(e.label), 1)]),
+									_: 2
+								}, 1032, [
+									"class",
+									"style",
+									"onClick"
+								])), 64)),
+								_(T(c)),
+								_(T(o), { onClick: Ut }, {
+									default: E(() => [_(T(O), { class: "mr-2 h-4 w-4" }), y[62] ||= g("Use default ", -1)]),
+									_: 1
+								})
+							]),
+							_: 1
+						})]),
+						_: 1
+					}),
+					_(T(ie), null, {
+						default: E(() => [_(T(oe), { "as-child": "" }, {
+							default: E(() => [_(T(t), {
+								type: "button",
+								variant: "ghost",
+								class: b($(!!F.value)),
+								title: "Text color"
+							}, {
+								default: E(() => [_(T(Ve), {
+									class: "h-4 w-4",
+									style: x(F.value ? { color: F.value } : {})
+								}, null, 8, ["style"])]),
+								_: 1
+							}, 8, ["class"])]),
+							_: 1
+						}), _(T(ae), {
+							class: "w-52 p-3",
+							align: "start"
+						}, {
+							default: E(() => [
+								y[64] ||= h("p", { class: "mb-2 text-xs font-medium text-muted-foreground" }, "Text color", -1),
+								h("div", gt, [h("input", {
+									type: "color",
+									value: F.value || "#000000",
+									class: "h-8 w-8 cursor-pointer rounded border border-input p-0.5",
+									onInput: y[17] ||= (e) => Wt(e.target.value)
+								}, null, 40, _t), _(T(u), {
+									"model-value": F.value,
+									placeholder: "#000000",
+									class: "h-7 font-mono text-xs",
+									maxlength: "7",
+									onBlur: y[18] ||= (e) => Wt(e.target.value)
+								}, null, 8, ["model-value"])]),
+								_(T(t), {
+									type: "button",
+									variant: "ghost",
+									size: "sm",
+									class: "mt-2 w-full text-xs",
+									onClick: Gt
+								}, {
+									default: E(() => [_(T(O), { class: "mr-1 h-3 w-3" }), y[63] ||= g("Clear color ", -1)]),
+									_: 1
+								})
+							]),
+							_: 1
+						})]),
+						_: 1
+					}),
+					_(T(ie), null, {
+						default: E(() => [_(T(oe), { "as-child": "" }, {
+							default: E(() => [_(T(t), {
+								type: "button",
+								variant: "ghost",
+								class: b($(!!I.value)),
+								title: "Highlight color"
+							}, {
+								default: E(() => [_(T(Pe), {
+									class: "h-4 w-4",
+									style: x(I.value ? { color: I.value } : {})
+								}, null, 8, ["style"])]),
+								_: 1
+							}, 8, ["class"])]),
+							_: 1
+						}), _(T(ae), {
+							class: "w-52 p-3",
+							align: "start"
+						}, {
+							default: E(() => [
+								y[66] ||= h("p", { class: "mb-2 text-xs font-medium text-muted-foreground" }, "Highlight color", -1),
+								h("div", vt, [h("input", {
+									type: "color",
+									value: I.value || "#ffff00",
+									class: "h-8 w-8 cursor-pointer rounded border border-input p-0.5",
+									onInput: y[19] ||= (e) => Kt(e.target.value)
+								}, null, 40, yt), _(T(u), {
+									"model-value": I.value,
+									placeholder: "#ffff00",
+									class: "h-7 font-mono text-xs",
+									maxlength: "7",
+									onBlur: y[20] ||= (e) => Kt(e.target.value)
+								}, null, 8, ["model-value"])]),
+								_(T(t), {
+									type: "button",
+									variant: "ghost",
+									size: "sm",
+									class: "mt-2 w-full text-xs",
+									onClick: qt
+								}, {
+									default: E(() => [_(T(O), { class: "mr-1 h-3 w-3" }), y[65] ||= g("Clear highlight ", -1)]),
+									_: 1
+								})
+							]),
+							_: 1
+						})]),
+						_: 1
+					}),
+					y[82] ||= h("div", { class: "mx-0.5 h-5 w-px bg-border/60 shrink-0" }, null, -1),
+					_(T(t), {
+						type: "button",
+						variant: "ghost",
+						class: b($(L("link"))),
+						title: "Insert / edit link",
+						onClick: Zt
+					}, {
+						default: E(() => [_(T(Le), { class: "h-4 w-4" })]),
+						_: 1
+					}, 8, ["class"]),
+					_(T(t), {
+						type: "button",
+						variant: "ghost",
+						class: b($(L("image"))),
+						title: "Insert / edit image",
+						onClick: en
+					}, {
+						default: E(() => [_(T(Fe), { class: "h-4 w-4" })]),
+						_: 1
+					}, 8, ["class"]),
+					y[83] ||= h("div", { class: "mx-0.5 h-5 w-px bg-border/60 shrink-0" }, null, -1),
+					_(T(i), null, {
+						default: E(() => [_(T(l), { "as-child": "" }, {
+							default: E(() => [_(T(t), {
+								type: "button",
+								variant: "ghost",
+								class: b($(L("bulletList") || L("orderedList"))),
+								title: "Lists"
+							}, {
+								default: E(() => [(S(), p(pe(L("orderedList") ? T(ze) : T(Re)), { class: "h-4 w-4" }))]),
+								_: 1
+							}, 8, ["class"])]),
+							_: 1
+						}), _(T(a), {
+							align: "start",
+							class: "w-40"
+						}, {
+							default: E(() => [_(T(o), {
+								class: b(L("bulletList") ? "bg-muted" : ""),
+								onClick: y[21] ||= (e) => Jt("bullet")
+							}, {
+								default: E(() => [_(T(Re), { class: "mr-2 h-4 w-4" }), y[67] ||= g("Bullet list ", -1)]),
+								_: 1
+							}, 8, ["class"]), _(T(o), {
+								class: b(L("orderedList") ? "bg-muted" : ""),
+								onClick: y[22] ||= (e) => Jt("ordered")
+							}, {
+								default: E(() => [_(T(ze), { class: "mr-2 h-4 w-4" }), y[68] ||= g("Ordered list ", -1)]),
+								_: 1
+							}, 8, ["class"])]),
+							_: 1
+						})]),
+						_: 1
+					}),
+					y[84] ||= h("div", { class: "mx-0.5 h-5 w-px bg-border/60 shrink-0" }, null, -1),
+					_(T(i), null, {
+						default: E(() => [_(T(l), { "as-child": "" }, {
+							default: E(() => [_(T(t), {
+								type: "button",
+								variant: "ghost",
+								class: b($(L("table"))),
+								title: "Table"
+							}, {
+								default: E(() => [_(T(Ke), { class: "h-4 w-4" })]),
+								_: 1
+							}, 8, ["class"])]),
+							_: 1
+						}), _(T(a), {
+							align: "start",
+							class: "w-52"
+						}, {
+							default: E(() => [
+								L("table") ? le("", !0) : (S(), m(ce, { key: 0 }, [
+									_(T(s), { class: "text-xs uppercase text-muted-foreground" }, {
+										default: E(() => [g(" Insert " + w(z.value) + "×" + w(B.value) + " table ", 1)]),
+										_: 1
+									}),
+									h("div", bt, [h("div", xt, [(S(!0), m(ce, null, fe(Yt.value, (e) => (S(), m("button", {
+										key: `${e.r}-${e.c}`,
+										type: "button",
+										class: b(["h-5 w-5 rounded-sm border transition-colors", e.r <= z.value && e.c <= B.value ? "bg-primary border-primary" : "bg-muted/50 border-border hover:bg-muted"]),
+										onMouseover: (t) => {
+											z.value = e.r, B.value = e.c;
+										},
+										onClick: Xt
+									}, null, 42, St))), 128))])]),
+									_(T(c))
+								], 64)),
+								_(T(s), { class: "text-xs uppercase text-muted-foreground" }, {
+									default: E(() => [...y[69] ||= [g("Column", -1)]]),
+									_: 1
+								}),
+								_(T(o), {
+									disabled: !L("table"),
+									onClick: y[23] ||= (e) => T(j)?.chain().focus().addColumnBefore().run()
+								}, {
+									default: E(() => [_(T(xe), { class: "mr-2 h-4 w-4" }), y[70] ||= g("Add before ", -1)]),
+									_: 1
+								}, 8, ["disabled"]),
+								_(T(o), {
+									disabled: !L("table"),
+									onClick: y[24] ||= (e) => T(j)?.chain().focus().addColumnAfter().run()
+								}, {
+									default: E(() => [_(T(Se), { class: "mr-2 h-4 w-4" }), y[71] ||= g("Add after ", -1)]),
+									_: 1
+								}, 8, ["disabled"]),
+								_(T(o), {
+									disabled: !L("table"),
+									onClick: y[25] ||= (e) => T(j)?.chain().focus().deleteColumn().run()
+								}, {
+									default: E(() => [_(T(D), { class: "mr-2 h-4 w-4" }), y[72] ||= g("Delete column ", -1)]),
+									_: 1
+								}, 8, ["disabled"]),
+								_(T(c)),
+								_(T(s), { class: "text-xs uppercase text-muted-foreground" }, {
+									default: E(() => [...y[73] ||= [g("Row", -1)]]),
+									_: 1
+								}),
+								_(T(o), {
+									disabled: !L("table"),
+									onClick: y[26] ||= (e) => T(j)?.chain().focus().addRowBefore().run()
+								}, {
+									default: E(() => [_(T(Ce), { class: "mr-2 h-4 w-4" }), y[74] ||= g("Add before ", -1)]),
+									_: 1
+								}, 8, ["disabled"]),
+								_(T(o), {
+									disabled: !L("table"),
+									onClick: y[27] ||= (e) => T(j)?.chain().focus().addRowAfter().run()
+								}, {
+									default: E(() => [_(T(be), { class: "mr-2 h-4 w-4" }), y[75] ||= g("Add after ", -1)]),
+									_: 1
+								}, 8, ["disabled"]),
+								_(T(o), {
+									disabled: !L("table"),
+									onClick: y[28] ||= (e) => T(j)?.chain().focus().deleteRow().run()
+								}, {
+									default: E(() => [_(T(D), { class: "mr-2 h-4 w-4" }), y[76] ||= g("Delete row ", -1)]),
+									_: 1
+								}, 8, ["disabled"]),
+								_(T(c)),
+								_(T(s), { class: "text-xs uppercase text-muted-foreground" }, {
+									default: E(() => [...y[77] ||= [g("Cell", -1)]]),
+									_: 1
+								}),
+								_(T(o), {
+									disabled: !L("table"),
+									onClick: y[29] ||= (e) => T(j)?.chain().focus().mergeCells().run()
+								}, {
+									default: E(() => [_(T(Ee), { class: "mr-2 h-4 w-4" }), y[78] ||= g("Merge cells ", -1)]),
+									_: 1
+								}, 8, ["disabled"]),
+								_(T(o), {
+									disabled: !L("table"),
+									onClick: y[30] ||= (e) => T(j)?.chain().focus().splitCell().run()
+								}, {
+									default: E(() => [_(T(We), { class: "mr-2 h-4 w-4" }), y[79] ||= g("Split cell ", -1)]),
+									_: 1
+								}, 8, ["disabled"]),
+								_(T(c)),
+								_(T(o), {
+									disabled: !L("table"),
+									class: "text-destructive focus:text-destructive",
+									onClick: y[31] ||= (e) => T(j)?.chain().focus().deleteTable().run()
+								}, {
+									default: E(() => [_(T(D), { class: "mr-2 h-4 w-4" }), y[80] ||= g("Delete table ", -1)]),
+									_: 1
+								}, 8, ["disabled"])
+							]),
+							_: 1
+						})]),
+						_: 1
+					})
+				])], 2), T(j) ? (S(), p(T(Xe), {
+					key: 0,
+					editor: T(j),
+					style: x(on.value),
+					class: "html-editor-content prose prose-sm max-w-none px-3 py-2 dark:prose-invert [&_.ProseMirror]:min-h-full [&_.ProseMirror]:outline-none",
+					"data-testid": "html-editor-content",
+					onClick: y[32] ||= (e) => T(j)?.chain().focus().run()
+				}, null, 8, ["editor", "style"])) : le("", !0)], 10, pt),
+				_(T(r), {
+					open: V.value,
+					"onUpdate:open": y[37] ||= (e) => V.value = e
+				}, {
+					default: E(() => [_(T(ee), { class: "max-w-md" }, {
+						default: E(() => [
+							_(T(ne), null, {
+								default: E(() => [_(T(re), null, {
+									default: E(() => [g(w(G.value ? "Edit link" : "Insert link"), 1)]),
+									_: 1
+								})]),
+								_: 1
+							}),
+							h("div", Ct, [
+								h("div", wt, [_(T(d), { for: "html-editor-link-url" }, {
+									default: E(() => [...y[85] ||= [g("URL", -1)]]),
+									_: 1
+								}), _(T(u), {
+									id: "html-editor-link-url",
+									modelValue: H.value,
+									"onUpdate:modelValue": y[33] ||= (e) => H.value = e,
+									placeholder: "https://example.com"
+								}, null, 8, ["modelValue"])]),
+								h("div", Tt, [_(T(d), { for: "html-editor-link-text" }, {
+									default: E(() => [...y[86] ||= [g("Link text", -1)]]),
+									_: 1
+								}), _(T(u), {
+									id: "html-editor-link-text",
+									modelValue: U.value,
+									"onUpdate:modelValue": y[34] ||= (e) => U.value = e,
+									placeholder: "Link text"
+								}, null, 8, ["modelValue"])]),
+								h("div", Et, [_(T(n), {
+									id: "html-editor-link-target",
+									checked: W.value,
+									"onUpdate:checked": y[35] ||= (e) => W.value = !!e
+								}, null, 8, ["checked"]), _(T(d), {
+									for: "html-editor-link-target",
+									class: "cursor-pointer font-normal"
+								}, {
+									default: E(() => [...y[87] ||= [g("Open in new tab", -1)]]),
+									_: 1
+								})])
+							]),
+							_(T(te), { class: "flex-row items-center justify-between gap-2" }, {
+								default: E(() => [G.value ? (S(), p(T(t), {
+									key: 0,
+									type: "button",
+									variant: "destructive",
+									size: "sm",
+									onClick: $t
+								}, {
+									default: E(() => [_(T(D), { class: "mr-1.5 h-3.5 w-3.5" }), y[88] ||= g("Remove link ", -1)]),
+									_: 1
+								})) : le("", !0), h("div", Dt, [_(T(t), {
+									type: "button",
+									variant: "outline",
+									size: "sm",
+									onClick: y[36] ||= (e) => V.value = !1
+								}, {
+									default: E(() => [...y[89] ||= [g("Cancel", -1)]]),
+									_: 1
+								}), _(T(t), {
+									type: "button",
+									size: "sm",
+									onClick: Qt
+								}, {
+									default: E(() => [...y[90] ||= [g("Apply", -1)]]),
+									_: 1
+								})])]),
+								_: 1
+							})
+						]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["open"]),
+				_(T(r), {
+					open: K.value,
+					"onUpdate:open": y[42] ||= (e) => K.value = e
+				}, {
+					default: E(() => [_(T(ee), { class: "max-w-md" }, {
+						default: E(() => [
+							_(T(ne), null, {
+								default: E(() => [_(T(re), null, {
+									default: E(() => [g(w(X.value ? "Edit image" : "Insert image"), 1)]),
+									_: 1
+								})]),
+								_: 1
+							}),
+							h("div", Ot, [
+								h("div", kt, [_(T(d), { for: "html-editor-img-url" }, {
+									default: E(() => [...y[91] ||= [g("Image URL", -1)]]),
+									_: 1
+								}), _(T(u), {
+									id: "html-editor-img-url",
+									modelValue: q.value,
+									"onUpdate:modelValue": y[38] ||= (e) => q.value = e,
+									placeholder: "https://example.com/image.jpg"
+								}, null, 8, ["modelValue"])]),
+								h("div", At, [_(T(d), { for: "html-editor-img-alt" }, {
+									default: E(() => [...y[92] ||= [g("Alt text", -1)]]),
+									_: 1
+								}), _(T(u), {
+									id: "html-editor-img-alt",
+									modelValue: J.value,
+									"onUpdate:modelValue": y[39] ||= (e) => J.value = e,
+									placeholder: "Describe the image"
+								}, null, 8, ["modelValue"])]),
+								h("div", jt, [_(T(d), { for: "html-editor-img-style" }, {
+									default: E(() => [...y[93] ||= [g(" Style ", -1), h("span", { class: "ml-1 text-xs font-normal text-muted-foreground" }, "(optional)", -1)]]),
+									_: 1
+								}), _(T(u), {
+									id: "html-editor-img-style",
+									modelValue: Y.value,
+									"onUpdate:modelValue": y[40] ||= (e) => Y.value = e,
+									placeholder: "width: 100%; height: auto;"
+								}, null, 8, ["modelValue"])])
+							]),
+							_(T(te), null, {
+								default: E(() => [_(T(t), {
+									type: "button",
+									variant: "outline",
+									size: "sm",
+									onClick: y[41] ||= (e) => K.value = !1
+								}, {
+									default: E(() => [...y[94] ||= [g("Cancel", -1)]]),
+									_: 1
+								}), _(T(t), {
+									type: "button",
+									size: "sm",
+									onClick: tn
+								}, {
+									default: E(() => [g(w(X.value ? "Update" : "Insert"), 1)]),
+									_: 1
+								})]),
+								_: 1
+							})
+						]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["open"]),
+				_(T(r), {
+					open: Z.value,
+					"onUpdate:open": y[45] ||= (e) => Z.value = e
+				}, {
+					default: E(() => [_(T(ee), { class: "max-w-3xl" }, {
+						default: E(() => [
+							_(T(ne), null, {
+								default: E(() => [_(T(re), null, {
+									default: E(() => [...y[95] ||= [g("Edit HTML source", -1)]]),
+									_: 1
+								})]),
+								_: 1
+							}),
+							ge(h("textarea", {
+								"onUpdate:modelValue": y[43] ||= (e) => Q.value = e,
+								class: "h-96 w-full resize-y rounded-md border border-input bg-background p-3 font-mono text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+								spellcheck: "false",
+								"data-testid": "html-editor-source"
+							}, null, 512), [[me, Q.value]]),
+							_(T(te), null, {
+								default: E(() => [_(T(t), {
+									type: "button",
+									variant: "outline",
+									size: "sm",
+									onClick: y[44] ||= (e) => Z.value = !1
+								}, {
+									default: E(() => [...y[96] ||= [g("Cancel", -1)]]),
+									_: 1
+								}), _(T(t), {
+									type: "button",
+									size: "sm",
+									onClick: rn
+								}, {
+									default: E(() => [...y[97] ||= [g("Apply changes", -1)]]),
+									_: 1
+								})]),
+								_: 1
+							})
+						]),
+						_: 1
+					})]),
+					_: 1
+				}, 8, ["open"])
+			]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { Mt as default };
+
+//# sourceMappingURL=HtmlEditor.vue_vue_type_script_setup_true_lang.js.map