@cocoar/vue-markdown-editor 1.14.0 → 1.16.0

package/dist/index.js

@@ -1,25 +1,26 @@
-import { Teleport as e, computed as t, createApp as n, createElementBlock as r, createElementVNode as i, createVNode as a, defineComponent as o, h as s, inject as c, normalizeClass as l, onBeforeUnmount as u, onMounted as d, openBlock as f, ref as p, shallowRef as m, unref as h, useId as g, useTemplateRef as _, vShow as v, watch as y, withDirectives as b, withModifiers as x } from "vue";
-import { Editor as S, commandsCtx as C, defaultValueCtx as w, editorViewCtx as T, editorViewOptionsCtx as E, rootCtx as D } from "@milkdown/core";
-import { Milkdown as ee, MilkdownProvider as O, useEditor as k, useInstance as A } from "@milkdown/vue";
-import { CoarCodeBlock as j, CoarIcon as M, CoarSelect as N, CoarSidebar as te, CoarSidebarDivider as P, CoarSidebarGroup as F, CoarSidebarItem as I, FORM_FIELD_INJECTION_KEY as L } from "@cocoar/vue-ui";
-import { codeBlockSchema as R, commonmark as z, createCodeBlockCommand as B, insertHrCommand as V, liftListItemCommand as H, sinkListItemCommand as ne, toggleEmphasisCommand as re, toggleInlineCodeCommand as ie, toggleStrongCommand as ae, turnIntoTextCommand as U, wrapInBlockquoteCommand as W, wrapInBulletListCommand as G, wrapInHeadingCommand as K, wrapInOrderedListCommand as q } from "@milkdown/preset-commonmark";
-import { Plugin as J, TextSelection as Y } from "@milkdown/prose/state";
-import { $prose as X, $view as oe, replaceAll as se } from "@milkdown/utils";
-import { addColAfterCommand as ce, addColBeforeCommand as le, addRowAfterCommand as ue, addRowBeforeCommand as de, deleteSelectedCellsCommand as fe, gfm as pe, insertTableCommand as me, toggleStrikethroughCommand as he } from "@milkdown/preset-gfm";
-import { history as ge, redoCommand as _e, undoCommand as ve } from "@milkdown/plugin-history";
-import { clipboard as ye } from "@milkdown/plugin-clipboard";
-import { listener as be, listenerCtx as Z } from "@milkdown/plugin-listener";
+import { Fragment as e, Teleport as t, computed as n, createApp as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, h as u, inject as d, markRaw as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as ee, onMounted as te, openBlock as h, ref as g, renderList as _, shallowRef as v, unref as y, useId as ne, useTemplateRef as b, vModelText as x, vShow as S, watch as C, withDirectives as w, withModifiers as T } from "vue";
+import { Editor as E, commandsCtx as D, defaultValueCtx as O, editorViewCtx as k, editorViewOptionsCtx as A, rootCtx as j } from "@milkdown/core";
+import { Milkdown as re, MilkdownProvider as M, useEditor as N, useInstance as P } from "@milkdown/vue";
+import { CoarCodeBlock as F, CoarIcon as I, CoarSelect as L, CoarSidebar as ie, CoarSidebarDivider as R, CoarSidebarGroup as ae, CoarSidebarItem as z, FORM_FIELD_INJECTION_KEY as B, menuPreset as oe, useOverlay as se } from "@cocoar/vue-ui";
+import { codeBlockSchema as V, commonmark as H, createCodeBlockCommand as ce, insertHrCommand as le, liftListItemCommand as U, sinkListItemCommand as ue, toggleEmphasisCommand as de, toggleInlineCodeCommand as fe, toggleStrongCommand as pe, turnIntoTextCommand as W, wrapInBlockquoteCommand as me, wrapInBulletListCommand as G, wrapInHeadingCommand as K, wrapInOrderedListCommand as he } from "@milkdown/preset-commonmark";
+import { Plugin as ge, TextSelection as q } from "@milkdown/prose/state";
+import { $markSchema as _e, $prose as ve, $remark as ye, $view as be, replaceAll as xe } from "@milkdown/utils";
+import { isColorSpanClose as Se, parseColorSpanOpen as J, sanitizeColor as Y, serializeColorSpanClose as Ce, serializeColorSpanOpen as we } from "@cocoar/vue-markdown-core";
+import { addColAfterCommand as Te, addColBeforeCommand as Ee, addRowAfterCommand as De, addRowBeforeCommand as Oe, deleteSelectedCellsCommand as ke, gfm as Ae, insertTableCommand as je, toggleStrikethroughCommand as Me } from "@milkdown/preset-gfm";
+import { history as Ne, redoCommand as Pe, undoCommand as Fe } from "@milkdown/plugin-history";
+import { clipboard as Ie } from "@milkdown/plugin-clipboard";
+import { listener as Le, listenerCtx as X } from "@milkdown/plugin-listener";
 //#region src/toolbar-helpers.ts
-function xe(e, t) {
+function Re(e, t) {
 	return t === void 0 ? !0 : "has" in t ? t.has(e) : t.includes(e);
 }
-function Se(e) {
+function ze(e) {
 	let { target: t, inBulletList: n, inOrderedList: r } = e;
 	return (t === "bullet_list" ? n : r) ? "lift" : (t === "bullet_list" ? r : n) ? "switch" : "wrap";
 }
 //#endregion
 //#region src/code-block-view/CodeBlockShell.vue?vue&type=script&setup=true&lang.ts
-var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" }, Te = { class: "coar-md-code-lang-row" }, Ee = /* @__PURE__ */ o({
+var Be = { class: "coar-md-code-render" }, Ve = { class: "coar-md-code-edit" }, He = { class: "coar-md-code-lang-row" }, Ue = /* @__PURE__ */ l({
 	__name: "CodeBlockShell",
 	props: {
 		text: {},
@@ -29,7 +30,7 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 	},
 	emits: ["enterEdit", "languageChange"],
 	setup(e, { emit: t }) {
-		let n = e, o = t, s = [
+		let n = e, r = t, i = [
 			{
 				value: "",
 				label: "Plain text"
@@ -62,50 +63,50 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 				value: "bash",
 				label: "Bash"
 			}
-		], c = _("contentMount");
-		return y([c, () => n.contentDOM], ([e, t]) => {
+		], a = b("contentMount");
+		return C([a, () => n.contentDOM], ([e, t]) => {
 			e && t && t.parentElement !== e && e.appendChild(t);
 		}, {
 			immediate: !0,
 			flush: "post"
-		}), (t, n) => (f(), r("div", { class: l(["coar-md-code-host", { "coar-md-code-host--editing": e.editing }]) }, [b(i("div", Ce, [a(h(j), {
+		}), (t, n) => (h(), o("div", { class: p(["coar-md-code-host", { "coar-md-code-host--editing": e.editing }]) }, [w(s("div", Be, [c(y(F), {
 			code: e.text,
 			language: e.language || "text",
 			collapsible: !1,
 			"show-copy": !1
-		}, null, 8, ["code", "language"]), i("button", {
+		}, null, 8, ["code", "language"]), s("button", {
 			class: "coar-md-code-edit-btn",
 			type: "button",
 			title: "Edit code block",
-			onMousedown: n[0] ||= x((e) => o("enterEdit"), ["prevent"])
-		}, [a(h(M), {
+			onMousedown: n[0] ||= T((e) => r("enterEdit"), ["prevent"])
+		}, [c(y(I), {
 			name: "pencil",
 			size: "xs"
-		}), n[2] ||= i("span", null, "Edit", -1)], 32)], 512), [[v, !e.editing]]), b(i("div", we, [i("div", Te, [a(h(N), {
+		}), n[2] ||= s("span", null, "Edit", -1)], 32)], 512), [[S, !e.editing]]), w(s("div", Ve, [s("div", He, [c(y(L), {
 			class: "coar-md-code-lang-select",
 			"model-value": e.language,
-			options: s,
+			options: i,
 			size: "s",
-			"onUpdate:modelValue": n[1] ||= (e) => o("languageChange", String(e))
-		}, null, 8, ["model-value"])]), i("div", {
+			"onUpdate:modelValue": n[1] ||= (e) => r("languageChange", String(e))
+		}, null, 8, ["model-value"])]), s("div", {
 			ref_key: "contentMount",
-			ref: c,
+			ref: a,
 			class: "coar-md-code-content"
-		}, null, 512)], 512), [[v, e.editing]])], 2));
+		}, null, 512)], 512), [[S, e.editing]])], 2));
 	}
-}), Q = /* @__PURE__ */ new Set(), De = class {
+}), Z = /* @__PURE__ */ new Set(), We = class {
 	dom;
 	contentDOM;
 	app;
-	text = p("");
-	language = p("");
-	editing = p(!1);
-	constructor(e, t, r) {
-		this.node = e, this.view = t, this.getPos = r, Q.add(this), this.dom = document.createElement("div"), this.dom.className = "coar-md-code-host-mount";
+	text = g("");
+	language = g("");
+	editing = g(!1);
+	constructor(e, t, n) {
+		this.node = e, this.view = t, this.getPos = n, Z.add(this), this.dom = document.createElement("div"), this.dom.className = "coar-md-code-host-mount";
 		let i = document.createElement("pre"), a = document.createElement("code");
-		i.appendChild(a), this.contentDOM = a, this.text.value = e.textContent, this.language.value = e.attrs.language ?? "", this.app = n({
+		i.appendChild(a), this.contentDOM = a, this.text.value = e.textContent, this.language.value = e.attrs.language ?? "", this.app = r({
 			name: "CodeBlockShellRoot",
-			setup: () => () => s(Ee, {
+			setup: () => () => u(Ue, {
 				text: this.text.value,
 				language: this.language.value,
 				editing: this.editing.value,
@@ -127,7 +128,7 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 		this.editing.value = !1;
 	}
 	destroy() {
-		Q.delete(this), this.app.unmount();
+		Z.delete(this), this.app.unmount();
 	}
 	notifySelectionChanged() {
 		let e = this.getPos();
@@ -145,21 +146,214 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 		let e = this.getPos();
 		if (e == null) return;
 		let { tr: t } = this.view.state;
-		t.setSelection(Y.create(this.view.state.doc, e + 1)), this.view.dispatch(t), this.view.focus();
+		t.setSelection(q.create(this.view.state.doc, e + 1)), this.view.dispatch(t), this.view.focus();
 	};
 	handleLanguageChange = (e) => {
 		let t = this.getPos();
 		t != null && this.view.dispatch(this.view.state.tr.setNodeAttribute(t, "language", e));
 	};
-}, Oe = [oe(R.node, () => (e, t, n) => new De(e, t, n)), X(() => new J({ view: () => ({ update(e, t) {
-	e.state.selection.eq(t.selection) || Q.forEach((t) => {
+}, Ge = [be(V.node, () => (e, t, n) => new We(e, t, n)), ve(() => new ge({ view: () => ({ update(e, t) {
+	e.state.selection.eq(t.selection) || Z.forEach((t) => {
 		t.view === e && t.notifySelectionChanged();
 	});
-} }) }))].flat(), ke = [
+} }) }))].flat(), Ke = function() {
+	let e = this.data();
+	return (e.toMarkdownExtensions ??= []).push({ handlers: { colorTextSpan(e, t, n) {
+		let r = Y(e.color ?? "") ?? "";
+		if (r.length === 0) return n.containerPhrasing(e, {
+			before: "",
+			after: ""
+		});
+		let i = n.containerPhrasing(e, {
+			before: ">",
+			after: "<"
+		});
+		return `${we(r)}${i}${Ce()}`;
+	} } }), (e) => {
+		t(e);
+	};
+	function t(e) {
+		if (Array.isArray(e.children)) {
+			let n = Je(e.children);
+			e.children = n;
+			for (let e of n) t(e);
+		}
+	}
+};
+function Q(e) {
+	return !!e && e.type === "html" && typeof e.value == "string";
+}
+function qe(e, t) {
+	let n = 1;
+	for (let r = t + 1; r < e.length; r++) {
+		let t = e[r];
+		if (Q(t)) {
+			if (J(t.value)) {
+				n++;
+				continue;
+			}
+			if (Se(t.value) && (n--, n === 0)) return r;
+		}
+	}
+	return null;
+}
+function Je(e) {
+	let t = [], n = 0;
+	for (; n < e.length;) {
+		let r = e[n];
+		if (Q(r)) {
+			let i = J(r.value);
+			if (i) {
+				let r = qe(e, n);
+				if (r !== null) {
+					let a = Je(e.slice(n + 1, r)), o = {
+						type: "colorTextSpan",
+						color: i.color,
+						children: a,
+						data: { color: i.color }
+					};
+					t.push(o), n = r + 1;
+					continue;
+				}
+			}
+		}
+		t.push(r), n++;
+	}
+	return t;
+}
+var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
+	attrs: { color: { default: "" } },
+	inclusive: !0,
+	parseDOM: [{
+		tag: "span[style*=\"color\"]",
+		getAttrs(e) {
+			if (typeof e == "string") return !1;
+			let t = e;
+			for (let e of Array.from(t.attributes)) if (!(e.name === "style" || e.name === "class")) return !1;
+			let n = (t.getAttribute("style") ?? "").split(";").map((e) => e.trim()).filter((e) => e.length > 0);
+			if (n.length !== 1) return !1;
+			let r = n[0], i = r.indexOf(":");
+			if (i < 0 || r.slice(0, i).trim().toLowerCase() !== "color") return !1;
+			let a = Y(r.slice(i + 1));
+			return a === null ? !1 : { color: a };
+		}
+	}],
+	toDOM: (e) => {
+		let t = Y(String(e.attrs.color ?? "")) ?? "";
+		return t.length === 0 ? [
+			"span",
+			{},
+			0
+		] : [
+			"span",
+			{ style: `color: ${t}` },
+			0
+		];
+	},
+	parseMarkdown: {
+		match: (e) => e.type === "colorTextSpan",
+		runner: (e, t, n) => {
+			let r = Y(typeof t.color == "string" ? t.color : typeof t.data?.color == "string" ? t.data.color : "") ?? "";
+			if (r.length === 0) {
+				e.next(t.children);
+				return;
+			}
+			e.openMark(n, { color: r }), e.next(t.children), e.closeMark(n);
+		}
+	},
+	toMarkdown: {
+		match: (e) => e.type.name === "text_color",
+		runner: (e, t) => {
+			let n = Y(String(t.attrs.color ?? "")) ?? "";
+			n.length !== 0 && e.withMark(t, "colorTextSpan", void 0, { color: n });
+		}
+	}
+}))].flat(), Xe = [
+	{
+		name: "Default",
+		value: ""
+	},
+	{
+		name: "Red",
+		value: "#dc2626"
+	},
+	{
+		name: "Orange",
+		value: "#ea580c"
+	},
+	{
+		name: "Yellow",
+		value: "#ca8a04"
+	},
+	{
+		name: "Green",
+		value: "#16a34a"
+	},
+	{
+		name: "Blue",
+		value: "#2563eb"
+	},
+	{
+		name: "Purple",
+		value: "#7c3aed"
+	},
+	{
+		name: "Pink",
+		value: "#db2777"
+	},
+	{
+		name: "Gray",
+		value: "#6b7280"
+	}
+], Ze = { class: "coar-md-color-grid" }, Qe = [
+	"title",
+	"aria-label",
+	"onMousedown"
+], $e = { class: "coar-md-color-custom" }, et = /* @__PURE__ */ l({
+	__name: "ColorPickerPanel",
+	props: {
+		currentColor: {},
+		pick: { type: Function }
+	},
+	setup(t) {
+		let n = g(t.currentColor ?? "#000000");
+		return (r, c) => (h(), o("div", {
+			class: "coar-md-color-picker",
+			role: "menu",
+			onMousedown: c[2] ||= T(() => {}, ["stop"])
+		}, [s("div", Ze, [(h(!0), o(e, null, _(y(Xe), (e) => (h(), o("button", {
+			key: e.value || "default",
+			type: "button",
+			class: p([
+				"coar-md-color-swatch",
+				e.value === "" ? "coar-md-color-swatch--clear" : "",
+				e.value !== "" && t.currentColor === e.value ? "coar-md-color-swatch--active" : ""
+			]),
+			style: m(e.value ? { "--coar-md-swatch": e.value } : void 0),
+			title: e.name,
+			"aria-label": e.name,
+			onMousedown: T((n) => t.pick(e.value === "" ? null : e.value), ["prevent"])
+		}, [e.value === "" ? (h(), i(y(I), {
+			key: 0,
+			name: "ban",
+			size: "s"
+		})) : a("", !0)], 46, Qe))), 128))]), s("div", $e, [c[3] ||= s("label", {
+			class: "coar-md-color-custom-label",
+			for: "coar-md-color-custom-input"
+		}, " Custom ", -1), w(s("input", {
+			id: "coar-md-color-custom-input",
+			"onUpdate:modelValue": c[0] ||= (e) => n.value = e,
+			type: "color",
+			class: "coar-md-color-custom-input",
+			onChange: c[1] ||= (e) => t.pick(n.value)
+		}, null, 544), [[x, n.value]])])], 32));
+	}
+}), tt = [
 	"bold",
 	"italic",
 	"strikethrough",
 	"inlineCode",
+	"textColor",
 	"headings",
 	"bulletList",
 	"orderedList",
@@ -175,26 +369,26 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 	"undo",
 	"redo"
 ], $ = {
-	bold: { command: ae },
-	italic: { command: re },
-	strike: { command: he },
-	code: { command: ie },
+	bold: { command: pe },
+	italic: { command: de },
+	strike: { command: Me },
+	code: { command: fe },
 	bulletList: { command: G },
-	orderedList: { command: q },
-	blockquote: { command: W },
-	hr: { command: V },
-	codeBlock: { command: B },
-	table: { command: me },
-	undo: { command: ve },
-	redo: { command: _e },
-	paragraph: { command: U },
-	addRowBefore: { command: de },
-	addRowAfter: { command: ue },
-	addColBefore: { command: le },
-	addColAfter: { command: ce },
-	deleteCell: { command: fe },
-	indent: { command: ne },
-	outdent: { command: H },
+	orderedList: { command: he },
+	blockquote: { command: me },
+	hr: { command: le },
+	codeBlock: { command: ce },
+	table: { command: je },
+	undo: { command: Fe },
+	redo: { command: Pe },
+	paragraph: { command: W },
+	addRowBefore: { command: Oe },
+	addRowAfter: { command: De },
+	addColBefore: { command: Ee },
+	addColAfter: { command: Te },
+	deleteCell: { command: ke },
+	indent: { command: ue },
+	outdent: { command: U },
 	h1: {
 		command: K,
 		payload: 1
@@ -219,7 +413,7 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 		command: K,
 		payload: 6
 	}
-}, Ae = o({
+}, nt = l({
 	props: {
 		initialValue: {
 			type: String,
@@ -275,29 +469,29 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 		}
 	},
 	setup(e) {
-		let t = p(e.initialValue);
-		k((n) => S.make().config((r) => {
-			r.set(D, n), r.set(w, e.initialValue), r.update(E, (t) => ({
+		let t = g(e.initialValue);
+		N((n) => E.make().config((r) => {
+			r.set(j, n), r.set(O, e.initialValue), r.update(A, (t) => ({
 				...t,
 				editable: () => !e.readonly
-			})), r.get(Z).markdownUpdated((n, r) => {
+			})), r.get(X).markdownUpdated((n, r) => {
 				r !== t.value && (t.value = r, e.onMarkdownChange(r));
 			});
-		}).use(z).use(pe).use(ge).use(ye).use(be).use(Oe));
-		let [, n] = A();
-		return y(() => e.externalValue.value, (e) => {
+		}).use(H).use(Ae).use(Ne).use(Ie).use(Le).use(Ye).use(Ge));
+		let [, n] = P();
+		return C(() => e.externalValue.value, (e) => {
 			if (e === t.value) return;
 			let r = n();
-			r && (t.value = e, r.action(se(e)));
-		}), y(() => e.readonly, () => {
+			r && (t.value = e, r.action(xe(e)));
+		}), C(() => e.readonly, () => {
 			let t = n();
 			t && t.action((t) => {
-				t.update(E, (t) => ({
+				t.update(A, (t) => ({
 					...t,
 					editable: () => !e.readonly
-				})), t.get(T).update(t.get(T).props);
+				})), t.get(k).update(t.get(k).props);
 			});
-		}), () => s(je, {
+		}), () => u(rt, {
 			readonly: e.readonly,
 			disabled: e.disabled,
 			toolbarMode: e.toolbarMode,
@@ -310,7 +504,7 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 			required: e.required
 		});
 	}
-}), je = o({
+}), rt = l({
 	props: {
 		readonly: {
 			type: Boolean,
@@ -353,15 +547,16 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 			required: !0
 		}
 	},
-	setup(n) {
-		let [, r] = A(), i = p(null), a = p(!1), o = p({
+	setup(e) {
+		let [, r] = P(), i = g(null), a = g(!1), o = g({
 			left: "0px",
 			top: "0px"
-		}), c = p("text"), l = p(!1), f = {
+		}), s = g("text"), c = g(!1), l = {
 			strong: !1,
 			emphasis: !1,
 			strike_through: !1,
 			inlineCode: !1,
+			text_color: null,
 			bullet_list: !1,
 			ordered_list: !1,
 			task_list: !1,
@@ -370,46 +565,94 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 			table: !1,
 			code_block: !1,
 			list_item_depth: 0
-		}, m = p({ ...f });
-		function h(e) {
-			if (n.readonly) return;
-			let t = r();
-			t && (t.action((t) => {
-				t.get(C).call(e.command.key, e.payload);
-			}), x());
+		}, d = se(), p = null, m = g({ ...l });
+		function h(t) {
+			if (e.readonly) return;
+			let n = r();
+			n && (n.action((e) => {
+				e.get(D).call(t.command.key, t.payload);
+			}), w());
 		}
-		function g(e) {
-			if (n.readonly) return;
-			let t = e === "bullet_list" ? $.bulletList : $.orderedList, r = Se({
-				target: e,
+		function _(t) {
+			if (e.readonly) return;
+			let n = t === "bullet_list" ? $.bulletList : $.orderedList, r = ze({
+				target: t,
 				inBulletList: m.value.bullet_list,
 				inOrderedList: m.value.ordered_list
 			});
 			if (r === "lift") {
-				h({ command: H });
+				h({ command: U });
 				return;
 			}
-			r === "switch" && h({ command: H }), h(t);
+			r === "switch" && h({ command: U }), h(n);
 		}
-		let _ = t(() => n.tools ? new Set(n.tools) : void 0);
-		function v(e) {
-			return xe(e, _.value);
+		let v = n(() => e.tools ? new Set(e.tools) : void 0);
+		function y(e) {
+			return Re(e, v.value);
 		}
-		function y() {
-			if (n.readonly) return;
-			let e = r();
-			e && e.action((e) => {
-				let t = e.get(T), { state: n } = t, r = n.tr, { from: i, to: a, empty: o } = n.selection;
+		function ne(t) {
+			if (e.readonly) return;
+			let n = r();
+			if (!n) return;
+			let i = t === null ? null : Y(t);
+			n.action((e) => {
+				let t = e.get(k), { state: n } = t, r = n.schema.marks.text_color;
+				if (!r) return;
+				let { from: a, to: o, empty: s } = n.selection;
+				if (s) {
+					let e = (n.storedMarks ?? n.selection.$from.marks()).filter((e) => e.type !== r), a = i ? [...e, r.create({ color: i })] : e;
+					t.dispatch(n.tr.setStoredMarks(a));
+				} else {
+					let e = n.tr.removeMark(a, o, r);
+					i && (e = e.addMark(a, o, r.create({ color: i }))), t.dispatch(e);
+				}
+			}), x(), w();
+		}
+		function b(e) {
+			if (e) {
+				if (p && !p.isClosed) {
+					x();
+					return;
+				}
+				p = d.open({
+					spec: {
+						...oe,
+						anchor: {
+							kind: "element",
+							element: e
+						}
+					},
+					content: {
+						kind: "component",
+						component: f(et)
+					},
+					inputs: {
+						currentColor: m.value.text_color,
+						pick: (e) => ne(e)
+					}
+				}), p.afterClosed.then(() => {
+					p?.isClosed && (p = null);
+				});
+			}
+		}
+		function x() {
+			p && !p.isClosed && p.close(), p = null;
+		}
+		function S() {
+			if (e.readonly) return;
+			let t = r();
+			t && t.action((e) => {
+				let t = e.get(k), { state: n } = t, r = n.tr, { from: i, to: a, empty: o } = n.selection;
 				o ? r = r.setStoredMarks([]) : Object.values(n.schema.marks).forEach((e) => {
 					r = r.removeMark(i, a, e);
-				}), t.dispatch(r), e.get(C).call(U.key);
+				}), t.dispatch(r), e.get(D).call(W.key);
 			});
 		}
-		function b() {
-			if (n.readonly) return;
-			let e = r();
-			e && e.action((t) => {
-				let n = t.get(T), { $from: r } = n.state.selection;
+		function C() {
+			if (e.readonly) return;
+			let t = r();
+			t && t.action((e) => {
+				let n = e.get(k), { $from: r } = n.state.selection;
 				for (let e = r.depth; e > 0; e--) {
 					let t = r.node(e);
 					if (t.type.name === "list_item") {
@@ -418,9 +661,9 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 						return;
 					}
 				}
-				t.get(C).call(G.key), queueMicrotask(() => {
-					e.action((e) => {
-						let t = e.get(T), { $from: n } = t.state.selection;
+				e.get(D).call(G.key), queueMicrotask(() => {
+					t.action((e) => {
+						let t = e.get(k), { $from: n } = t.state.selection;
 						for (let e = n.depth; e > 0; e--) if (n.node(e).type.name === "list_item") {
 							t.dispatch(t.state.tr.setNodeAttribute(n.before(e), "checked", !1));
 							return;
@@ -429,11 +672,11 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 				});
 			});
 		}
-		function x() {
+		function w() {
 			let e = r();
 			if (e) try {
 				e.action((e) => {
-					let t = e.get(T).state, { from: n, to: r, empty: i, $from: a } = t.selection, o = t.storedMarks, s = { ...f }, c = (e) => {
+					let t = e.get(k).state, { from: n, to: r, empty: i, $from: a } = t.selection, o = t.storedMarks, s = { ...l }, c = (e) => {
 						let s = t.schema.marks[e];
 						if (!s) return !1;
 						if (i) {
@@ -443,6 +686,23 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 						return t.doc.rangeHasMark(n, r, s);
 					};
 					s.strong = c("strong"), s.emphasis = c("emphasis"), s.strike_through = c("strike_through"), s.inlineCode = c("inlineCode");
+					let u = t.schema.marks.text_color;
+					u && (s.text_color = (() => {
+						if (i) {
+							let e = (o ?? a.marks()).find((e) => e.type === u), t = typeof e?.attrs.color == "string" ? e.attrs.color : null;
+							return t ? Y(t) : null;
+						}
+						let e = null;
+						return t.doc.nodesBetween(n, r, (t) => {
+							if (e) return !1;
+							let n = t.marks.find((e) => e.type === u);
+							if (n) {
+								let t = typeof n.attrs.color == "string" ? n.attrs.color : null;
+								e = t ? Y(t) : null;
+							}
+							return e === null;
+						}), e;
+					})());
 					for (let e = a.depth; e > 0; e--) {
 						let t = a.node(e), n = t.type.name;
 						n === "bullet_list" ? s.bullet_list = !0 : n === "ordered_list" ? s.ordered_list = !0 : n === "blockquote" ? s.blockquote = !0 : n === "heading" ? s.heading = t.attrs.level ?? null : n === "table" ? s.table = !0 : n === "code_block" ? s.code_block = !0 : n === "list_item" && (s.list_item_depth += 1, t.attrs.checked != null && (s.task_list = !0));
@@ -450,32 +710,32 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 					m.value = s;
 				});
 			} catch {
-				m.value = { ...f };
+				m.value = { ...l };
 			}
 		}
-		function S(e) {
-			if (n.readonly) return;
-			let t = e.target, i = t.closest("li[data-item-type=\"task\"]");
+		function T(t) {
+			if (e.readonly) return;
+			let n = t.target, i = n.closest("li[data-item-type=\"task\"]");
 			if (i) {
-				let t = i.getBoundingClientRect();
-				if (e.clientX - t.left < 18) {
-					e.preventDefault(), w(i);
+				let e = i.getBoundingClientRect();
+				if (t.clientX - e.left < 18) {
+					t.preventDefault(), E(i);
 					return;
 				}
 			}
-			if (t.closest(".ProseMirror")) return;
+			if (n.closest(".ProseMirror")) return;
 			let a = r();
-			a && (e.preventDefault(), a.action((e) => {
-				let t = e.get(T);
+			a && (t.preventDefault(), a.action((e) => {
+				let t = e.get(k);
 				t.focus();
-				let n = t.state.tr.setSelection(Y.atEnd(t.state.doc));
+				let n = t.state.tr.setSelection(q.atEnd(t.state.doc));
 				t.dispatch(n);
 			}));
 		}
-		function w(e) {
+		function E(e) {
 			let t = r();
 			t && t.action((t) => {
-				let n = t.get(T), r = n.posAtDOM(e, 0);
+				let n = t.get(k), r = n.posAtDOM(e, 0);
 				if (r < 0) return;
 				let i = n.state.doc.resolve(r);
 				for (let e = i.depth; e >= 0; e--) {
@@ -488,13 +748,13 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 				}
 			});
 		}
-		function E() {
+		function O() {
 			let e = r();
 			if (!e) return "text";
 			try {
 				let t = "text";
 				return e.action((e) => {
-					let { $from: n } = e.get(T).state.selection;
+					let { $from: n } = e.get(k).state.selection;
 					for (let e = n.depth; e > 0; e--) if (n.node(e).type.name === "table") {
 						t = "table";
 						break;
@@ -504,70 +764,70 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 				return "text";
 			}
 		}
-		function D(e) {
+		function A(e) {
 			let t = e.left + e.width / 2, n = e.top - 8;
 			t = Math.max(108, Math.min(t, window.innerWidth - 108)), n < 50 && (n = e.bottom + 8), o.value = {
 				left: `${t}px`,
 				top: `${n}px`
 			};
 		}
-		function O() {
-			if (n.readonly || n.toolbarMode === "fixed") {
+		function j() {
+			if (e.readonly || e.toolbarMode === "fixed") {
 				a.value = !1;
 				return;
 			}
-			let e = window.getSelection();
-			if (!e || e.isCollapsed || !e.rangeCount) {
-				a.value = !1, l.value = !1;
+			let t = window.getSelection();
+			if (!t || t.isCollapsed || !t.rangeCount) {
+				a.value = !1, c.value = !1;
 				return;
 			}
-			let t = e.getRangeAt(0), r = i.value?.querySelector(".coar-md-area .milkdown");
-			if (!r || !r.contains(t.commonAncestorContainer)) {
-				a.value = !1, l.value = !1;
+			let n = t.getRangeAt(0), r = i.value?.querySelector(".coar-md-area .milkdown");
+			if (!r || !r.contains(n.commonAncestorContainer)) {
+				a.value = !1, c.value = !1;
 				return;
 			}
-			D(t.getBoundingClientRect()), c.value = E(), a.value = !0, l.value = !1;
+			A(n.getBoundingClientRect()), s.value = O(), a.value = !0, c.value = !1;
 		}
-		function k(e) {
+		function M(e) {
 			let t = e.target;
-			t.closest(".coar-md-floating-toolbar") || t.closest(".coar-md-float-submenu") || (!i.value || !i.value.contains(t)) && (a.value = !1, l.value = !1);
+			t.closest(".coar-md-floating-toolbar") || t.closest(".coar-md-float-submenu") || t.closest(".coar-md-color-picker") || t.closest(".coar-overlay-outlet") || (!i.value || !i.value.contains(t)) && (a.value = !1, c.value = !1);
 		}
-		let j = null;
-		function N(e = 20) {
+		let N = null;
+		function F(e = 20) {
 			let t = r();
 			if (!t) {
-				e > 0 && setTimeout(() => N(e - 1), 50);
+				e > 0 && setTimeout(() => F(e - 1), 50);
 				return;
 			}
 			try {
 				t.action((e) => {
-					let t = e.get(Z);
-					j = () => queueMicrotask(x), t.selectionUpdated(j);
+					let t = e.get(X);
+					N = () => queueMicrotask(w), t.selectionUpdated(N);
 				});
 			} catch {
-				e > 0 && setTimeout(() => N(e - 1), 50);
+				e > 0 && setTimeout(() => F(e - 1), 50);
 			}
 		}
 		function L() {
-			if (!j) return;
+			if (!N) return;
 			let e = r();
 			if (e) {
 				try {
 					e.action((e) => {
-						let t = e.get(Z).listeners.selectionUpdated, n = t.indexOf(j);
+						let t = e.get(X).listeners.selectionUpdated, n = t.indexOf(N);
 						n >= 0 && t.splice(n, 1);
 					});
 				} catch {}
-				j = null;
+				N = null;
 			}
 		}
-		d(() => {
-			document.addEventListener("selectionchange", O), document.addEventListener("mousedown", k, !0), N();
-		}), u(() => {
-			document.removeEventListener("selectionchange", O), document.removeEventListener("mousedown", k, !0), L();
+		te(() => {
+			document.addEventListener("selectionchange", j), document.addEventListener("mousedown", M, !0), F();
+		}), ee(() => {
+			document.removeEventListener("selectionchange", j), document.removeEventListener("mousedown", M, !0), L(), x();
 		});
-		function R(e, t, n, r = {}) {
-			return s(I, {
+		function B(e, t, n, r = {}) {
+			return u(z, {
 				icon: e,
 				label: t,
 				active: r.active ?? !1,
@@ -575,86 +835,93 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 				onClick: r.disabled ? () => {} : r.onClick ?? (() => h(n))
 			});
 		}
-		function z() {
-			let e = m.value, t = e.heading != null;
+		function V() {
+			let t = m.value, n = t.heading != null;
 			function r(e, t, n) {
-				v(t) && e.push(n);
+				y(t) && e.push(n);
 			}
 			function i(e) {
-				e.length !== 0 && e[e.length - 1]?.type !== P && e.push(s(P));
+				e.length !== 0 && e[e.length - 1]?.type !== R && e.push(u(R));
 			}
 			let a = [];
-			return r(a, "bold", R("bold", "Bold", $.bold, { active: e.strong })), r(a, "italic", R("italic", "Italic", $.italic, { active: e.emphasis })), r(a, "strikethrough", R("strikethrough", "Strikethrough", $.strike, { active: e.strike_through })), r(a, "inlineCode", R("code", "Inline Code", $.code, { active: e.inlineCode })), r(a, "headings", s(F, {
+			return r(a, "bold", B("bold", "Bold", $.bold, { active: t.strong })), r(a, "italic", B("italic", "Italic", $.italic, { active: t.emphasis })), r(a, "strikethrough", B("strikethrough", "Strikethrough", $.strike, { active: t.strike_through })), r(a, "inlineCode", B("code", "Inline Code", $.code, { active: t.inlineCode })), r(a, "textColor", u(z, {
+				icon: "palette",
+				label: "Text Color",
+				active: t.text_color !== null,
+				onClick: (e) => {
+					b(e.currentTarget ?? e.target);
+				}
+			})), r(a, "headings", u(ae, {
 				icon: "hash",
-				label: t ? `Heading ${e.heading}` : "Headings",
+				label: n ? `Heading ${t.heading}` : "Headings",
 				mode: "flyout",
 				openOnHover: !0
 			}, { default: () => [
-				s(I, {
+				u(z, {
 					icon: "pilcrow",
 					label: "Paragraph",
-					active: !t,
+					active: !n,
 					onClick: () => h($.paragraph)
 				}),
-				s(I, {
+				u(z, {
 					icon: "heading",
 					label: "Heading 1",
-					active: e.heading === 1,
+					active: t.heading === 1,
 					onClick: () => h($.h1)
 				}),
-				s(I, {
+				u(z, {
 					icon: "heading",
 					label: "Heading 2",
-					active: e.heading === 2,
+					active: t.heading === 2,
 					onClick: () => h($.h2)
 				}),
-				s(I, {
+				u(z, {
 					icon: "heading",
 					label: "Heading 3",
-					active: e.heading === 3,
+					active: t.heading === 3,
 					onClick: () => h($.h3)
 				}),
-				s(I, {
+				u(z, {
 					icon: "heading",
 					label: "Heading 4",
-					active: e.heading === 4,
+					active: t.heading === 4,
 					onClick: () => h($.h4)
 				}),
-				s(I, {
+				u(z, {
 					icon: "heading",
 					label: "Heading 5",
-					active: e.heading === 5,
+					active: t.heading === 5,
 					onClick: () => h($.h5)
 				}),
-				s(I, {
+				u(z, {
 					icon: "heading",
 					label: "Heading 6",
-					active: e.heading === 6,
+					active: t.heading === 6,
 					onClick: () => h($.h6)
 				})
-			] })), i(a), r(a, "bulletList", R("list", "Bullet List", $.bulletList, {
-				active: e.bullet_list,
-				onClick: () => g("bullet_list")
-			})), r(a, "orderedList", R("list-ordered", "Ordered List", $.orderedList, {
-				active: e.ordered_list,
-				onClick: () => g("ordered_list")
-			})), r(a, "taskList", R("clipboard-check", "Task List", $.bulletList, {
-				active: e.task_list,
-				onClick: b
-			})), r(a, "outdent", R("indent-decrease", "Outdent", $.outdent, { disabled: e.list_item_depth < 2 })), r(a, "indent", R("indent-increase", "Indent", $.indent, { disabled: e.list_item_depth < 1 })), r(a, "blockquote", R("text-quote", "Blockquote", $.blockquote, { active: e.blockquote })), r(a, "horizontalRule", R("minus", "Horizontal Rule", $.hr)), i(a), r(a, "codeBlock", R("square-code", "Code Block", $.codeBlock, { active: e.code_block })), r(a, "table", R("table", "Insert Table", $.table, { active: e.table })), e.table && v("tableOps") && (i(a), a.push(R("between-vertical-start", "Insert Row Above", $.addRowBefore)), a.push(R("between-vertical-end", "Insert Row Below", $.addRowAfter)), a.push(R("between-horizontal-start", "Insert Column Left", $.addColBefore)), a.push(R("between-horizontal-end", "Insert Column Right", $.addColAfter)), a.push(R("trash-2", "Delete Cell", $.deleteCell))), v("clearFormatting") && (i(a), a.push(R("eraser", "Clear Formatting", $.bold, { onClick: y }))), i(a), r(a, "undo", R("undo-2", "Undo", $.undo)), r(a, "redo", R("redo-2", "Redo", $.redo)), a[a.length - 1]?.type === P && a.pop(), s("div", {
+			] })), i(a), r(a, "bulletList", B("list", "Bullet List", $.bulletList, {
+				active: t.bullet_list,
+				onClick: () => _("bullet_list")
+			})), r(a, "orderedList", B("list-ordered", "Ordered List", $.orderedList, {
+				active: t.ordered_list,
+				onClick: () => _("ordered_list")
+			})), r(a, "taskList", B("clipboard-check", "Task List", $.bulletList, {
+				active: t.task_list,
+				onClick: C
+			})), r(a, "outdent", B("indent-decrease", "Outdent", $.outdent, { disabled: t.list_item_depth < 2 })), r(a, "indent", B("indent-increase", "Indent", $.indent, { disabled: t.list_item_depth < 1 })), r(a, "blockquote", B("text-quote", "Blockquote", $.blockquote, { active: t.blockquote })), r(a, "horizontalRule", B("minus", "Horizontal Rule", $.hr)), i(a), r(a, "codeBlock", B("square-code", "Code Block", $.codeBlock, { active: t.code_block })), r(a, "table", B("table", "Insert Table", $.table, { active: t.table })), t.table && y("tableOps") && (i(a), a.push(B("between-vertical-start", "Insert Row Above", $.addRowBefore)), a.push(B("between-vertical-end", "Insert Row Below", $.addRowAfter)), a.push(B("between-horizontal-start", "Insert Column Left", $.addColBefore)), a.push(B("between-horizontal-end", "Insert Column Right", $.addColAfter)), a.push(B("trash-2", "Delete Cell", $.deleteCell))), y("clearFormatting") && (i(a), a.push(B("eraser", "Clear Formatting", $.bold, { onClick: S }))), i(a), r(a, "undo", B("undo-2", "Undo", $.undo)), r(a, "redo", B("redo-2", "Redo", $.redo)), a[a.length - 1]?.type === R && a.pop(), u("div", {
 				key: "sidebar",
 				class: "coar-md-sidebar-wrap",
 				onMousedown: (e) => e.preventDefault()
-			}, [s(te, {
+			}, [u(ie, {
 				collapsed: !0,
-				side: n.toolbarPosition,
+				side: e.toolbarPosition,
 				size: "s",
 				variant: "primary",
 				borderless: !0
 			}, { default: () => a })]);
 		}
-		function B() {
-			let t = (e, t, n, r = {}) => s("button", {
+		function H() {
+			let e = (e, t, n, r = {}) => u("button", {
 				class: [
 					"coar-md-float-btn",
 					r.isActive ? "coar-md-float-btn--active" : "",
@@ -666,28 +933,43 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 				onMousedown: (e) => {
 					e.preventDefault(), !r.disabled && (r.onClick ?? (() => h(n)))();
 				}
-			}, [s(M, {
+			}, [u(I, {
 				name: e,
 				size: "s"
-			})]), n = () => s("div", { class: "coar-md-float-sep" }), r = m.value;
+			})]), n = () => u("div", { class: "coar-md-float-sep" }), r = m.value;
 			function i(e, t, n) {
-				v(t) && e.push(n);
+				y(t) && e.push(n);
 			}
 			function a(e) {
 				e.length !== 0 && e[e.length - 1]?.props?.class !== "coar-md-float-sep" && e.push(n());
 			}
-			let u = [];
-			i(u, "bold", t("bold", "Bold", $.bold, { isActive: r.strong })), i(u, "italic", t("italic", "Italic", $.italic, { isActive: r.emphasis })), i(u, "strikethrough", t("strikethrough", "Strikethrough", $.strike, { isActive: r.strike_through })), i(u, "inlineCode", t("code", "Inline Code", $.code, { isActive: r.inlineCode })), v("headings") && (a(u), u.push(s("div", { class: "coar-md-float-dropdown" }, [s("button", {
-				class: ["coar-md-float-btn", l.value || r.heading != null ? "coar-md-float-btn--active" : ""],
+			let l = [];
+			if (i(l, "bold", e("bold", "Bold", $.bold, { isActive: r.strong })), i(l, "italic", e("italic", "Italic", $.italic, { isActive: r.emphasis })), i(l, "strikethrough", e("strikethrough", "Strikethrough", $.strike, { isActive: r.strike_through })), i(l, "inlineCode", e("code", "Inline Code", $.code, { isActive: r.inlineCode })), y("textColor")) {
+				let e = r.text_color !== null;
+				l.push(u("button", {
+					class: ["coar-md-float-btn", e ? "coar-md-float-btn--active" : ""],
+					type: "button",
+					title: e ? `Text Color (${r.text_color})` : "Text Color",
+					style: e ? `--coar-md-color-indicator: ${r.text_color};` : void 0,
+					onMousedown: (e) => {
+						e.preventDefault(), b(e.currentTarget);
+					}
+				}, [u(I, {
+					name: "palette",
+					size: "s"
+				})]));
+			}
+			y("headings") && (a(l), l.push(u("div", { class: "coar-md-float-dropdown" }, [u("button", {
+				class: ["coar-md-float-btn", c.value || r.heading != null ? "coar-md-float-btn--active" : ""],
 				title: r.heading == null ? "Headings" : `Heading ${r.heading}`,
 				type: "button",
 				onMousedown: (e) => {
-					e.preventDefault(), l.value = !l.value;
+					e.preventDefault(), c.value = !c.value;
 				}
-			}, [s(M, {
+			}, [u(I, {
 				name: "heading",
 				size: "s"
-			})]), l.value ? s("div", { class: "coar-md-float-submenu" }, [
+			})]), c.value ? u("div", { class: "coar-md-float-submenu" }, [
 				{
 					label: "Paragraph",
 					cmd: $.paragraph,
@@ -730,84 +1012,84 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 					icon: "heading",
 					activeLevel: 6
 				}
-			].map(({ label: e, cmd: t, icon: n, activeLevel: i }) => s("button", {
+			].map(({ label: e, cmd: t, icon: n, activeLevel: i }) => u("button", {
 				class: ["coar-md-float-submenu-item", (i === 0 ? r.heading == null : r.heading === i) ? "coar-md-float-submenu-item--active" : ""],
 				type: "button",
 				onMousedown: (e) => {
-					e.preventDefault(), h(t), l.value = !1;
+					e.preventDefault(), h(t), c.value = !1;
 				}
-			}, [s(M, {
+			}, [u(I, {
 				name: n,
 				size: "xs"
-			}), s("span", null, e)]))) : null]))), a(u), i(u, "bulletList", t("list", "Bullet List", $.bulletList, {
+			}), u("span", null, e)]))) : null]))), a(l), i(l, "bulletList", e("list", "Bullet List", $.bulletList, {
 				isActive: r.bullet_list,
-				onClick: () => g("bullet_list")
-			})), i(u, "orderedList", t("list-ordered", "Ordered List", $.orderedList, {
+				onClick: () => _("bullet_list")
+			})), i(l, "orderedList", e("list-ordered", "Ordered List", $.orderedList, {
 				isActive: r.ordered_list,
-				onClick: () => g("ordered_list")
-			})), i(u, "taskList", t("clipboard-check", "Task List", $.bulletList, {
+				onClick: () => _("ordered_list")
+			})), i(l, "taskList", e("clipboard-check", "Task List", $.bulletList, {
 				isActive: r.task_list,
-				onClick: b
-			})), i(u, "outdent", t("indent-decrease", "Outdent", $.outdent, { disabled: r.list_item_depth < 2 })), i(u, "indent", t("indent-increase", "Indent", $.indent, { disabled: r.list_item_depth < 1 })), a(u), i(u, "blockquote", t("text-quote", "Blockquote", $.blockquote, { isActive: r.blockquote })), v("clearFormatting") && (a(u), u.push(t("eraser", "Clear Formatting", $.bold, { onClick: y }))), u[u.length - 1]?.props?.class === "coar-md-float-sep" && u.pop();
+				onClick: C
+			})), i(l, "outdent", e("indent-decrease", "Outdent", $.outdent, { disabled: r.list_item_depth < 2 })), i(l, "indent", e("indent-increase", "Indent", $.indent, { disabled: r.list_item_depth < 1 })), a(l), i(l, "blockquote", e("text-quote", "Blockquote", $.blockquote, { isActive: r.blockquote })), y("clearFormatting") && (a(l), l.push(e("eraser", "Clear Formatting", $.bold, { onClick: S }))), l[l.length - 1]?.props?.class === "coar-md-float-sep" && l.pop();
 			let d = {
-				text: u,
-				table: v("tableOps") ? [
-					t("between-vertical-start", "Insert Row Above", $.addRowBefore),
-					t("between-vertical-end", "Insert Row Below", $.addRowAfter),
+				text: l,
+				table: y("tableOps") ? [
+					e("between-vertical-start", "Insert Row Above", $.addRowBefore),
+					e("between-vertical-end", "Insert Row Below", $.addRowAfter),
 					n(),
-					t("between-horizontal-start", "Insert Column Left", $.addColBefore),
-					t("between-horizontal-end", "Insert Column Right", $.addColAfter),
+					e("between-horizontal-start", "Insert Column Left", $.addColBefore),
+					e("between-horizontal-end", "Insert Column Right", $.addColAfter),
 					n(),
-					t("trash-2", "Delete", $.deleteCell),
-					...v("bold") || v("italic") || v("inlineCode") ? [n()] : [],
-					...v("bold") ? [t("bold", "Bold", $.bold)] : [],
-					...v("italic") ? [t("italic", "Italic", $.italic)] : [],
-					...v("inlineCode") ? [t("code", "Code", $.code)] : []
-				] : u,
-				"col-selection": v("tableOps") ? [
-					t("between-horizontal-start", "Insert Column Left", $.addColBefore),
-					t("between-horizontal-end", "Insert Column Right", $.addColAfter),
+					e("trash-2", "Delete", $.deleteCell),
+					...y("bold") || y("italic") || y("inlineCode") ? [n()] : [],
+					...y("bold") ? [e("bold", "Bold", $.bold)] : [],
+					...y("italic") ? [e("italic", "Italic", $.italic)] : [],
+					...y("inlineCode") ? [e("code", "Code", $.code)] : []
+				] : l,
+				"col-selection": y("tableOps") ? [
+					e("between-horizontal-start", "Insert Column Left", $.addColBefore),
+					e("between-horizontal-end", "Insert Column Right", $.addColAfter),
 					n(),
-					t("trash-2", "Delete Column", $.deleteCell)
-				] : u,
-				"row-selection": v("tableOps") ? [
-					t("between-vertical-start", "Insert Row Above", $.addRowBefore),
-					t("between-vertical-end", "Insert Row Below", $.addRowAfter),
+					e("trash-2", "Delete Column", $.deleteCell)
+				] : l,
+				"row-selection": y("tableOps") ? [
+					e("between-vertical-start", "Insert Row Above", $.addRowBefore),
+					e("between-vertical-end", "Insert Row Below", $.addRowAfter),
 					n(),
-					t("trash-2", "Delete Row", $.deleteCell)
-				] : u
+					e("trash-2", "Delete Row", $.deleteCell)
+				] : l
 			};
-			return s(e, { to: "body" }, s("div", {
+			return u(t, { to: "body" }, u("div", {
 				class: "coar-md-floating-toolbar",
 				style: `left:${o.value.left};top:${o.value.top};`
-			}, d[c.value] || u));
+			}, d[s.value] || l));
 		}
 		return () => {
-			let e = n.toolbarMode === "fixed" || n.toolbarMode === "both", t = !n.readonly && (n.toolbarMode === "floating" || n.toolbarMode === "both"), r = [], o = n.toolbarPosition === "left" || n.toolbarPosition === "top", c = n.toolbarPosition === "right" || n.toolbarPosition === "bottom";
-			return e && o && r.push(z()), r.push(s("div", {
+			let t = e.toolbarMode === "fixed" || e.toolbarMode === "both", n = !e.readonly && (e.toolbarMode === "floating" || e.toolbarMode === "both"), r = [], o = e.toolbarPosition === "left" || e.toolbarPosition === "top", s = e.toolbarPosition === "right" || e.toolbarPosition === "bottom";
+			return t && o && r.push(V()), r.push(u("div", {
 				key: "area",
 				class: ["coar-md-area", "coar-markdown"],
-				onMousedown: S
-			}, [s(ee)])), e && c && r.push(z()), a.value && t && r.push(B()), s("div", {
+				onMousedown: T
+			}, [u(re)])), t && s && r.push(V()), a.value && n && r.push(H()), u("div", {
 				class: {
 					"coar-md-root": !0,
-					[`coar-md-root--toolbar-${n.toolbarPosition}`]: !0,
-					"coar-md-root--disabled": n.disabled,
-					"coar-md-root--readonly": n.readonly && !n.disabled,
-					"coar-md-root--error": n.hasError
+					[`coar-md-root--toolbar-${e.toolbarPosition}`]: !0,
+					"coar-md-root--disabled": e.disabled,
+					"coar-md-root--readonly": e.readonly && !e.disabled,
+					"coar-md-root--error": e.hasError
 				},
 				ref: i,
-				id: n.inputId,
-				"aria-invalid": n.hasError ? "true" : void 0,
-				"aria-describedby": n.describedBy,
-				"aria-disabled": n.disabled ? "true" : void 0,
-				"aria-readonly": n.readonly && !n.disabled ? "true" : void 0,
-				"aria-required": n.required ? "true" : void 0,
-				"data-name": n.name
+				id: e.inputId,
+				"aria-invalid": e.hasError ? "true" : void 0,
+				"aria-describedby": e.describedBy,
+				"aria-disabled": e.disabled ? "true" : void 0,
+				"aria-readonly": e.readonly && !e.disabled ? "true" : void 0,
+				"aria-required": e.required ? "true" : void 0,
+				"data-name": e.name
 			}, r);
 		};
 	}
-}), Me = o({
+}), it = l({
 	name: "CoarMarkdownEditor",
 	props: {
 		modelValue: {
@@ -852,13 +1134,13 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 		}
 	},
 	emits: ["update:modelValue"],
-	setup(e, { emit: n }) {
-		let r = e.modelValue, i = m({ value: e.modelValue });
-		y(() => e.modelValue, (e) => {
+	setup(e, { emit: t }) {
+		let r = e.modelValue, i = v({ value: e.modelValue });
+		C(() => e.modelValue, (e) => {
 			i.value = { value: e };
 		});
-		let a = c(L, void 0), o = `coar-markdown-editor-${g()}`, l = t(() => e.id || a?.inputId.value || o), u = t(() => e.error || (a?.hasError.value ?? !1)), d = t(() => a?.messageId.value), f = t(() => e.disabled || (a?.disabled.value ?? !1)), p = t(() => e.readonly || f.value);
-		return () => s(O, null, () => s(Ae, {
+		let a = d(B, void 0), o = `coar-markdown-editor-${ne()}`, s = n(() => e.id || a?.inputId.value || o), c = n(() => e.error || (a?.hasError.value ?? !1)), l = n(() => a?.messageId.value), f = n(() => e.disabled || (a?.disabled.value ?? !1)), p = n(() => e.readonly || f.value);
+		return () => u(M, null, () => u(nt, {
 			initialValue: r,
 			externalValue: i.value,
 			readonly: p.value,
@@ -866,14 +1148,14 @@ var Ce = { class: "coar-md-code-render" }, we = { class: "coar-md-code-edit" },
 			toolbarMode: e.toolbarMode,
 			toolbarPosition: e.toolbarPosition,
 			tools: e.tools,
-			inputId: l.value,
-			hasError: u.value,
-			describedBy: d.value,
+			inputId: s.value,
+			hasError: c.value,
+			describedBy: l.value,
 			name: e.name,
 			required: e.required,
-			onMarkdownChange: (e) => n("update:modelValue", e)
+			onMarkdownChange: (e) => t("update:modelValue", e)
 		}));
 	}
 });
 //#endregion
-export { ke as COAR_MARKDOWN_EDITOR_ALL_TOOLS, Me as CoarMarkdownEditor };
+export { tt as COAR_MARKDOWN_EDITOR_ALL_TOOLS, it as CoarMarkdownEditor };