@cocoar/vue-markdown-editor 3.0.0 → 3.1.0

package/dist/index.js

@@ -1,31 +1,31 @@
-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, createTextVNode as c, createVNode as l, defineComponent as u, getCurrentInstance as d, h as f, inject as p, markRaw as m, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as ee, onMounted as _, openBlock as v, ref as y, render as b, renderList as x, shallowRef as te, toDisplayString as S, unref as C, useId as w, useTemplateRef as T, vModelText as E, vShow as D, watch as O, withCtx as k, withDirectives as A, withKeys as j, withModifiers as M } from "vue";
-import { Editor as N, commandsCtx as P, defaultValueCtx as F, editorViewCtx as I, editorViewOptionsCtx as L, rootCtx as ne } from "@milkdown/core";
-import { Milkdown as re, MilkdownProvider as R, useEditor as z, useInstance as ie } from "@milkdown/vue";
-import { CoarButton as B, CoarCodeBlock as ae, CoarContextMenu as oe, CoarFormField as V, CoarIcon as H, CoarMenuDivider as se, CoarMenuItem as U, CoarSelect as W, CoarSidebar as ce, CoarSidebarDivider as le, CoarSidebarGroup as ue, CoarSidebarItem as G, CoarTextInput as K, FORM_FIELD_INJECTION_KEY as de, menuPreset as fe, useContextMenu as pe, useDialog as me, useOverlay as he } from "@cocoar/vue-ui";
-import { codeBlockSchema as q, commonmark as ge, createCodeBlockCommand as _e, insertHrCommand as ve, insertImageCommand as ye, liftListItemCommand as be, sinkListItemCommand as xe, toggleEmphasisCommand as Se, toggleInlineCodeCommand as Ce, toggleStrongCommand as we, turnIntoTextCommand as Te, wrapInBlockquoteCommand as Ee, wrapInBulletListCommand as De, wrapInHeadingCommand as J, wrapInOrderedListCommand as Oe } from "@milkdown/preset-commonmark";
-import { Plugin as ke, PluginKey as Ae, TextSelection as je } from "@milkdown/prose/state";
-import { $markSchema as Me, $nodeSchema as Ne, $prose as Pe, $remark as Fe, $view as Ie, replaceAll as Le } from "@milkdown/utils";
-import { isColorSpanClose as Re, parse as ze, parseColorSpanOpen as Be, parseEmbedDirective as Ve, parseFrontmatter as He, sanitizeColor as Y, serializeColorSpanClose as Ue, serializeColorSpanOpen as We, serializeEmbedDirective as Ge, toEmbedProps as Ke } from "@cocoar/vue-markdown-core";
-import { CoarMarkdown as qe, EmbedRenderer as Je, EmbedRenderer as Ye, MARKDOWN_EMBEDS_KEY as Xe, resolveEmbed as Ze, resolveEmbed as Qe } from "@cocoar/vue-markdown";
-import { addColAfterCommand as $e, addColBeforeCommand as et, addRowAfterCommand as tt, addRowBeforeCommand as nt, deleteSelectedCellsCommand as rt, gfm as it, insertTableCommand as at, moveColCommand as ot, moveRowCommand as st, selectColCommand as ct, selectRowCommand as lt, selectTableCommand as ut, toggleStrikethroughCommand as dt } from "@milkdown/preset-gfm";
-import { Decoration as ft, DecorationSet as pt } from "@milkdown/prose/view";
-import { history as mt, redoCommand as ht, undoCommand as gt } from "@milkdown/plugin-history";
-import { clipboard as _t } from "@milkdown/plugin-clipboard";
-import { listener as vt, listenerCtx as yt } 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, createTextVNode as c, createVNode as l, defineComponent as u, getCurrentInstance as d, h as f, inject as p, markRaw as m, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as ee, onMounted as _, openBlock as v, provide as y, ref as b, render as x, renderList as S, renderSlot as C, shallowRef as te, toDisplayString as w, unref as T, useId as E, useTemplateRef as D, vModelText as ne, vShow as O, watch as k, withCtx as A, withDirectives as j, withKeys as M, withModifiers as N } from "vue";
+import { Editor as re, commandsCtx as P, defaultValueCtx as ie, editorViewCtx as F, editorViewOptionsCtx as I, rootCtx as ae } from "@milkdown/core";
+import { Milkdown as L, MilkdownProvider as oe, useEditor as se, useInstance as ce } from "@milkdown/vue";
+import { CoarButton as R, CoarCodeBlock as z, CoarContextMenu as le, CoarFormField as B, CoarIcon as V, CoarMenuDivider as ue, CoarMenuItem as de, CoarSelect as fe, CoarSidebar as pe, CoarSidebarDivider as H, CoarSidebarGroup as me, CoarSidebarItem as U, CoarTextInput as W, FORM_FIELD_INJECTION_KEY as G, menuPreset as he, useContextMenu as ge, useDialog as _e, useOverlay as ve } from "@cocoar/vue-ui";
+import { codeBlockSchema as ye, commonmark as K, createCodeBlockCommand as be, insertHrCommand as xe, insertImageCommand as Se, liftListItemCommand as Ce, sinkListItemCommand as q, toggleEmphasisCommand as we, toggleInlineCodeCommand as Te, toggleStrongCommand as Ee, turnIntoTextCommand as De, wrapInBlockquoteCommand as Oe, wrapInBulletListCommand as ke, wrapInHeadingCommand as J, wrapInOrderedListCommand as Ae } from "@milkdown/preset-commonmark";
+import { Plugin as je, PluginKey as Me, TextSelection as Ne } from "@milkdown/prose/state";
+import { $markSchema as Pe, $nodeSchema as Fe, $prose as Ie, $remark as Le, $view as Re, replaceAll as ze } from "@milkdown/utils";
+import { isColorSpanClose as Be, parse as Ve, parseColorSpanOpen as He, parseEmbedDirective as Ue, parseFrontmatter as We, sanitizeColor as Y, serializeColorSpanClose as Ge, serializeColorSpanOpen as Ke, serializeEmbedDirective as qe, toEmbedProps as Je } from "@cocoar/vue-markdown-core";
+import { CoarMarkdown as Ye, EmbedRenderer as Xe, EmbedRenderer as Ze, MARKDOWN_EMBEDS_KEY as Qe, resolveEmbed as $e, resolveEmbed as et } from "@cocoar/vue-markdown";
+import { addColAfterCommand as tt, addColBeforeCommand as nt, addRowAfterCommand as rt, addRowBeforeCommand as it, deleteSelectedCellsCommand as at, gfm as ot, insertTableCommand as st, moveColCommand as ct, moveRowCommand as lt, selectColCommand as ut, selectRowCommand as dt, selectTableCommand as ft, toggleStrikethroughCommand as pt } from "@milkdown/preset-gfm";
+import { Decoration as mt, DecorationSet as ht } from "@milkdown/prose/view";
+import { history as gt, redoCommand as _t, undoCommand as vt } from "@milkdown/plugin-history";
+import { clipboard as yt } from "@milkdown/plugin-clipboard";
+import { listener as bt, listenerCtx as xt } from "@milkdown/plugin-listener";
 //#region \0rolldown/runtime.js
-var bt = Object.create, xt = Object.defineProperty, St = Object.getOwnPropertyDescriptor, Ct = Object.getOwnPropertyNames, wt = Object.getPrototypeOf, Tt = Object.prototype.hasOwnProperty, Et = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), Dt = (e, t, n, r) => {
-	if (t && typeof t == "object" || typeof t == "function") for (var i = Ct(t), a = 0, o = i.length, s; a < o; a++) s = i[a], !Tt.call(e, s) && s !== n && xt(e, s, {
+var St = Object.create, Ct = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, Tt = Object.getOwnPropertyNames, Et = Object.getPrototypeOf, Dt = Object.prototype.hasOwnProperty, Ot = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), kt = (e, t, n, r) => {
+	if (t && typeof t == "object" || typeof t == "function") for (var i = Tt(t), a = 0, o = i.length, s; a < o; a++) s = i[a], !Dt.call(e, s) && s !== n && Ct(e, s, {
 		get: ((e) => t[e]).bind(null, s),
-		enumerable: !(r = St(t, s)) || r.enumerable
+		enumerable: !(r = wt(t, s)) || r.enumerable
 	});
 	return e;
-}, Ot = (e, t, n) => (n = e == null ? {} : bt(wt(e)), Dt(t || !e || !e.__esModule ? xt(n, "default", {
+}, At = (e, t, n) => (n = e == null ? {} : St(Et(e)), kt(t || !e || !e.__esModule ? Ct(n, "default", {
 	value: e,
 	enumerable: !0
 }) : n, e));
 //#endregion
 //#region src/toolbar-helpers.ts
-function kt(e, t) {
+function jt(e, t) {
 	switch (e) {
 		case "table":
 		case "tableOps":
@@ -35,16 +35,16 @@ function kt(e, t) {
 		default: return !0;
 	}
 }
-function At(e, t) {
+function Mt(e, t) {
 	return t === void 0 ? !0 : "has" in t ? t.has(e) : t.includes(e);
 }
-function jt(e) {
+function Nt(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/flavor.ts
-var Mt = {
+var Pt = {
 	commonmark: {
 		gfm: !1,
 		textColor: !1,
@@ -61,8 +61,8 @@ var Mt = {
 		embeds: !0
 	}
 };
-function Nt(e) {
-	return e === void 0 ? { ...Mt.cocoar } : typeof e == "string" ? { ...Mt[e] ?? Mt.cocoar } : {
+function Ft(e) {
+	return e === void 0 ? { ...Pt.cocoar } : typeof e == "string" ? { ...Pt[e] ?? Pt.cocoar } : {
 		gfm: e.gfm ?? !1,
 		textColor: e.textColor ?? !1,
 		embeds: e.embeds ?? !1
@@ -70,7 +70,7 @@ function Nt(e) {
 }
 //#endregion
 //#region src/code-block-view/CodeBlockShell.vue?vue&type=script&setup=true&lang.ts
-var Pt = { class: "coar-md-code-render" }, Ft = { class: "coar-md-code-edit" }, It = { class: "coar-md-code-lang-row" }, Lt = /* @__PURE__ */ u({
+var It = { class: "coar-md-code-render" }, Lt = { class: "coar-md-code-edit" }, Rt = { class: "coar-md-code-lang-row" }, zt = /* @__PURE__ */ u({
 	__name: "CodeBlockShell",
 	props: {
 		text: {},
@@ -113,13 +113,13 @@ var Pt = { class: "coar-md-code-render" }, Ft = { class: "coar-md-code-edit" },
 				value: "bash",
 				label: "Bash"
 			}
-		], a = T("contentMount");
-		return O([a, () => n.contentDOM], ([e, t]) => {
+		], a = D("contentMount");
+		return k([a, () => n.contentDOM], ([e, t]) => {
 			e && t && t.parentElement !== e && e.appendChild(t);
 		}, {
 			immediate: !0,
 			flush: "post"
-		}), (t, n) => (v(), o("div", { class: h(["coar-md-code-host", { "coar-md-code-host--editing": e.editing }]) }, [A(s("div", Pt, [l(C(ae), {
+		}), (t, n) => (v(), o("div", { class: h(["coar-md-code-host", { "coar-md-code-host--editing": e.editing }]) }, [j(s("div", It, [l(T(z), {
 			code: e.text,
 			language: e.language || "text",
 			collapsible: !1,
@@ -128,11 +128,11 @@ var Pt = { class: "coar-md-code-render" }, Ft = { class: "coar-md-code-edit" },
 			class: "coar-md-code-edit-btn",
 			type: "button",
 			title: "Edit code block",
-			onMousedown: n[0] ||= M((e) => r("enterEdit"), ["prevent"])
-		}, [l(C(H), {
+			onMousedown: n[0] ||= N((e) => r("enterEdit"), ["prevent"])
+		}, [l(T(V), {
 			name: "pencil",
 			size: "xs"
-		}), n[2] ||= s("span", null, "Edit", -1)], 32)], 512), [[D, !e.editing]]), A(s("div", Ft, [s("div", It, [l(C(W), {
+		}), n[2] ||= s("span", null, "Edit", -1)], 32)], 512), [[O, !e.editing]]), j(s("div", Lt, [s("div", Rt, [l(T(fe), {
 			class: "coar-md-code-lang-select",
 			"model-value": e.language,
 			options: i,
@@ -142,21 +142,21 @@ var Pt = { class: "coar-md-code-render" }, Ft = { class: "coar-md-code-edit" },
 			ref_key: "contentMount",
 			ref: a,
 			class: "coar-md-code-content"
-		}, null, 512)], 512), [[D, e.editing]])], 2));
+		}, null, 512)], 512), [[O, e.editing]])], 2));
 	}
-}), Rt = /* @__PURE__ */ new Set(), zt = class {
+}), Bt = /* @__PURE__ */ new Set(), Vt = class {
 	dom;
 	contentDOM;
 	app;
-	text = y("");
-	language = y("");
-	editing = y(!1);
+	text = b("");
+	language = b("");
+	editing = b(!1);
 	constructor(e, t, n) {
-		this.node = e, this.view = t, this.getPos = n, Rt.add(this), this.dom = document.createElement("div"), this.dom.className = "coar-md-code-host-mount";
+		this.node = e, this.view = t, this.getPos = n, Bt.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 = r({
 			name: "CodeBlockShellRoot",
-			setup: () => () => f(Lt, {
+			setup: () => () => f(zt, {
 				text: this.text.value,
 				language: this.language.value,
 				editing: this.editing.value,
@@ -178,7 +178,7 @@ var Pt = { class: "coar-md-code-render" }, Ft = { class: "coar-md-code-edit" },
 		this.editing.value = !1;
 	}
 	destroy() {
-		Rt.delete(this), this.app.unmount();
+		Bt.delete(this), this.app.unmount();
 	}
 	notifySelectionChanged() {
 		let e = this.getPos();
@@ -196,17 +196,17 @@ var Pt = { class: "coar-md-code-render" }, Ft = { class: "coar-md-code-edit" },
 		let e = this.getPos();
 		if (e == null) return;
 		let { tr: t } = this.view.state;
-		t.setSelection(je.create(this.view.state.doc, e + 1)), this.view.dispatch(t), this.view.focus();
+		t.setSelection(Ne.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));
 	};
-}, Bt = [Ie(q.node, () => (e, t, n) => new zt(e, t, n)), Pe(() => new ke({ view: () => ({ update(e, t) {
-	e.state.selection.eq(t.selection) || Rt.forEach((t) => {
+}, Ht = [Re(ye.node, () => (e, t, n) => new Vt(e, t, n)), Ie(() => new je({ view: () => ({ update(e, t) {
+	e.state.selection.eq(t.selection) || Bt.forEach((t) => {
 		t.view === e && t.notifySelectionChanged();
 	});
-} }) }))].flat(), Vt = function() {
+} }) }))].flat(), Ut = function() {
 	let e = this.data();
 	return (e.toMarkdownExtensions ??= []).push({ handlers: { colorTextSpan(e, t, n) {
 		let r = Y(e.color ?? "") ?? "";
@@ -218,45 +218,45 @@ var Pt = { class: "coar-md-code-render" }, Ft = { class: "coar-md-code-edit" },
 			before: ">",
 			after: "<"
 		});
-		return `${We(r)}${i}${Ue()}`;
+		return `${Ke(r)}${i}${Ge()}`;
 	} } }), (e) => {
 		t(e);
 	};
 	function t(e) {
 		if (Array.isArray(e.children)) {
-			let n = Wt(e.children);
+			let n = Kt(e.children);
 			e.children = n;
 			for (let e of n) t(e);
 		}
 	}
 };
-function Ht(e) {
+function Wt(e) {
 	return !!e && e.type === "html" && typeof e.value == "string";
 }
-function Ut(e, t) {
+function Gt(e, t) {
 	let n = 1;
 	for (let r = t + 1; r < e.length; r++) {
 		let t = e[r];
-		if (Ht(t)) {
-			if (Be(t.value)) {
+		if (Wt(t)) {
+			if (He(t.value)) {
 				n++;
 				continue;
 			}
-			if (Re(t.value) && (n--, n === 0)) return r;
+			if (Be(t.value) && (n--, n === 0)) return r;
 		}
 	}
 	return null;
 }
-function Wt(e) {
+function Kt(e) {
 	let t = [], n = 0;
 	for (; n < e.length;) {
 		let r = e[n];
-		if (Ht(r)) {
-			let i = Be(r.value);
+		if (Wt(r)) {
+			let i = He(r.value);
 			if (i) {
-				let r = Ut(e, n);
+				let r = Gt(e, n);
 				if (r !== null) {
-					let a = Wt(e.slice(n + 1, r)), o = {
+					let a = Kt(e.slice(n + 1, r)), o = {
 						type: "colorTextSpan",
 						color: i.color,
 						children: a,
@@ -271,7 +271,7 @@ function Wt(e) {
 	}
 	return t;
 }
-var Gt = [Fe("textColor", () => Vt), Me("text_color", () => ({
+var qt = [Le("textColor", () => Ut), Pe("text_color", () => ({
 	attrs: { color: { default: "" } },
 	inclusive: !0,
 	parseDOM: [{
@@ -318,7 +318,7 @@ var Gt = [Fe("textColor", () => Vt), Me("text_color", () => ({
 			n.length !== 0 && e.withMark(t, "colorTextSpan", void 0, { color: n });
 		}
 	}
-}))].flat(), Kt = [
+}))].flat(), Jt = [
 	{
 		name: "Default",
 		value: ""
@@ -355,26 +355,26 @@ var Gt = [Fe("textColor", () => Vt), Me("text_color", () => ({
 		name: "Gray",
 		value: "#6b7280"
 	}
-], qt = {
+], Yt = {
 	class: "coar-md-placeholder",
 	"aria-hidden": "true"
-}, Jt = /* @__PURE__ */ u({
+}, Xt = /* @__PURE__ */ u({
 	__name: "PlaceholderOverlay",
 	props: { source: {} },
 	setup(e) {
-		let t = e, r = n(() => ze(t.source));
-		return (e, t) => (v(), o("div", qt, [l(C(qe), { doc: r.value }, null, 8, ["doc"])]));
+		let t = e, r = n(() => Ve(t.source));
+		return (e, t) => (v(), o("div", Yt, [l(T(Ye), { doc: r.value }, null, 8, ["doc"])]));
 	}
 });
-function Yt(e) {
+function Zt(e) {
 	return e !== null && e < -2;
 }
-function Xt(e) {
+function Qt(e) {
 	return e === -2 || e === -1 || e === 32;
 }
 //#endregion
 //#region ../../node_modules/.pnpm/fault@2.0.1/node_modules/fault/index.js
-var Zt = /* @__PURE__ */ Ot((/* @__PURE__ */ Et(((e, t) => {
+var $t = /* @__PURE__ */ At((/* @__PURE__ */ Ot(((e, t) => {
 	(function() {
 		var e = t === void 0 ? function() {
 			return this || (0, eval)("this");
@@ -428,7 +428,7 @@ var Zt = /* @__PURE__ */ Ot((/* @__PURE__ */ Et(((e, t) => {
 			return a;
 		}
 	})();
-})))(), 1), Qt = Object.assign(X(Error), {
+})))(), 1), en = Object.assign(X(Error), {
 	eval: X(EvalError),
 	range: X(RangeError),
 	reference: X(ReferenceError),
@@ -439,44 +439,44 @@ var Zt = /* @__PURE__ */ Ot((/* @__PURE__ */ Et(((e, t) => {
 function X(e) {
 	return t.displayName = e.displayName || e.name, t;
 	function t(t, ...n) {
-		return new e(t && (0, Zt.default)(t, ...n));
+		return new e(t && (0, $t.default)(t, ...n));
 	}
 }
 //#endregion
 //#region ../../node_modules/.pnpm/micromark-extension-frontmatter@2.0.0/node_modules/micromark-extension-frontmatter/lib/to-matters.js
-var $t = {}.hasOwnProperty, en = {
+var tn = {}.hasOwnProperty, nn = {
 	yaml: "-",
 	toml: "+"
 };
-function tn(e) {
+function rn(e) {
 	let t = [], n = -1, r = Array.isArray(e) ? e : e ? [e] : ["yaml"];
-	for (; ++n < r.length;) t[n] = nn(r[n]);
+	for (; ++n < r.length;) t[n] = an(r[n]);
 	return t;
 }
-function nn(e) {
+function an(e) {
 	let t = e;
 	if (typeof t == "string") {
-		if (!$t.call(en, t)) throw Qt("Missing matter definition for `%s`", t);
+		if (!tn.call(nn, t)) throw en("Missing matter definition for `%s`", t);
 		t = {
 			type: t,
-			marker: en[t]
+			marker: nn[t]
 		};
-	} else if (typeof t != "object") throw Qt("Expected matter to be an object, not `%j`", t);
-	if (!$t.call(t, "type")) throw Qt("Missing `type` in matter `%j`", t);
-	if (!$t.call(t, "fence") && !$t.call(t, "marker")) throw Qt("Missing `marker` or `fence` in matter `%j`", t);
+	} else if (typeof t != "object") throw en("Expected matter to be an object, not `%j`", t);
+	if (!tn.call(t, "type")) throw en("Missing `type` in matter `%j`", t);
+	if (!tn.call(t, "fence") && !tn.call(t, "marker")) throw en("Missing `marker` or `fence` in matter `%j`", t);
 	return t;
 }
 //#endregion
 //#region ../../node_modules/.pnpm/micromark-extension-frontmatter@2.0.0/node_modules/micromark-extension-frontmatter/lib/syntax.js
-function rn(e) {
-	let t = tn(e), n = {}, r = -1;
+function on(e) {
+	let t = rn(e), n = {}, r = -1;
 	for (; ++r < t.length;) {
-		let e = t[r], i = on(e, "open").charCodeAt(0), a = an(e), o = n[i];
+		let e = t[r], i = cn(e, "open").charCodeAt(0), a = sn(e), o = n[i];
 		Array.isArray(o) ? o.push(a) : n[i] = [a];
 	}
 	return { flow: n };
 }
-function an(e) {
+function sn(e) {
 	let t = e.anywhere, n = e.type, r = n + "Fence", i = r + "Sequence", a = n + "Value", o = {
 		tokenize: u,
 		partial: !0
@@ -490,22 +490,22 @@ function an(e) {
 		return p;
 		function p(a) {
 			let o = f.now();
-			return o.column === 1 && (o.line === 1 || t) && (s = on(e, "open"), c = 0, a === s.charCodeAt(c)) ? (l.enter(n), l.enter(r), l.enter(i), m(a)) : d(a);
+			return o.column === 1 && (o.line === 1 || t) && (s = cn(e, "open"), c = 0, a === s.charCodeAt(c)) ? (l.enter(n), l.enter(r), l.enter(i), m(a)) : d(a);
 		}
 		function m(e) {
-			return c === s.length ? (l.exit(i), Xt(e) ? (l.enter("whitespace"), h(e)) : g(e)) : e === s.charCodeAt(c++) ? (l.consume(e), m) : d(e);
+			return c === s.length ? (l.exit(i), Qt(e) ? (l.enter("whitespace"), h(e)) : g(e)) : e === s.charCodeAt(c++) ? (l.consume(e), m) : d(e);
 		}
 		function h(e) {
-			return Xt(e) ? (l.consume(e), h) : (l.exit("whitespace"), g(e));
+			return Qt(e) ? (l.consume(e), h) : (l.exit("whitespace"), g(e));
 		}
 		function g(t) {
-			return Yt(t) ? (l.exit(r), l.enter("lineEnding"), l.consume(t), l.exit("lineEnding"), s = on(e, "close"), c = 0, l.attempt(o, y, ee)) : d(t);
+			return Zt(t) ? (l.exit(r), l.enter("lineEnding"), l.consume(t), l.exit("lineEnding"), s = cn(e, "close"), c = 0, l.attempt(o, y, ee)) : d(t);
 		}
 		function ee(e) {
-			return e === null || Yt(e) ? v(e) : (l.enter(a), _(e));
+			return e === null || Zt(e) ? v(e) : (l.enter(a), _(e));
 		}
 		function _(e) {
-			return e === null || Yt(e) ? (l.exit(a), v(e)) : (l.consume(e), _);
+			return e === null || Zt(e) ? (l.exit(a), v(e)) : (l.consume(e), _);
 		}
 		function v(e) {
 			return e === null ? d(e) : (l.enter("lineEnding"), l.consume(e), l.exit("lineEnding"), l.attempt(o, y, ee));
@@ -521,42 +521,42 @@ function an(e) {
 			return t === s.charCodeAt(a) ? (e.enter(r), e.enter(i), c(t)) : n(t);
 		}
 		function c(t) {
-			return a === s.length ? (e.exit(i), Xt(t) ? (e.enter("whitespace"), l(t)) : u(t)) : t === s.charCodeAt(a++) ? (e.consume(t), c) : n(t);
+			return a === s.length ? (e.exit(i), Qt(t) ? (e.enter("whitespace"), l(t)) : u(t)) : t === s.charCodeAt(a++) ? (e.consume(t), c) : n(t);
 		}
 		function l(t) {
-			return Xt(t) ? (e.consume(t), l) : (e.exit("whitespace"), u(t));
+			return Qt(t) ? (e.consume(t), l) : (e.exit("whitespace"), u(t));
 		}
 		function u(i) {
-			return i === null || Yt(i) ? (e.exit(r), t(i)) : n(i);
+			return i === null || Zt(i) ? (e.exit(r), t(i)) : n(i);
 		}
 	}
 }
-function on(e, t) {
-	return e.marker ? sn(e.marker, t).repeat(3) : sn(e.fence, t);
+function cn(e, t) {
+	return e.marker ? ln(e.marker, t).repeat(3) : ln(e.fence, t);
 }
-function sn(e, t) {
+function ln(e, t) {
 	return typeof e == "string" ? e : e[t];
 }
 //#endregion
 //#region ../../node_modules/.pnpm/escape-string-regexp@5.0.0/node_modules/escape-string-regexp/index.js
-function cn(e) {
+function un(e) {
 	if (typeof e != "string") throw TypeError("Expected a string");
 	return e.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d");
 }
 //#endregion
 //#region ../../node_modules/.pnpm/mdast-util-frontmatter@2.0.1/node_modules/mdast-util-frontmatter/lib/index.js
-function ln(e) {
-	let t = tn(e), n = {}, r = {}, i = -1;
+function dn(e) {
+	let t = rn(e), n = {}, r = {}, i = -1;
 	for (; ++i < t.length;) {
 		let e = t[i];
-		n[e.type] = un(e), r[e.type] = dn, r[e.type + "Value"] = fn;
+		n[e.type] = fn(e), r[e.type] = pn, r[e.type + "Value"] = mn;
 	}
 	return {
 		enter: n,
 		exit: r
 	};
 }
-function un(e) {
+function fn(e) {
 	return t;
 	function t(t) {
 		this.enter({
@@ -565,23 +565,23 @@ function un(e) {
 		}, t), this.buffer();
 	}
 }
-function dn(e) {
+function pn(e) {
 	let t = this.resume(), n = this.stack[this.stack.length - 1];
 	"value" in n, this.exit(e), n.value = t.replace(/^(\r?\n|\r)|(\r?\n|\r)$/g, "");
 }
-function fn(e) {
+function mn(e) {
 	this.config.enter.data.call(this, e), this.config.exit.data.call(this, e);
 }
-function pn(e) {
-	let t = [], n = {}, r = tn(e), i = -1;
+function hn(e) {
+	let t = [], n = {}, r = rn(e), i = -1;
 	for (; ++i < r.length;) {
 		let e = r[i];
-		n[e.type] = mn(e);
-		let a = hn(e, "open");
+		n[e.type] = gn(e);
+		let a = _n(e, "open");
 		t.push({
 			atBreak: !0,
 			character: a.charAt(0),
-			after: cn(a.charAt(1))
+			after: un(a.charAt(1))
 		});
 	}
 	return {
@@ -589,29 +589,29 @@ function pn(e) {
 		handlers: n
 	};
 }
-function mn(e) {
-	let t = hn(e, "open"), n = hn(e, "close");
+function gn(e) {
+	let t = _n(e, "open"), n = _n(e, "close");
 	return r;
 	function r(e) {
 		return t + (e.value ? "\n" + e.value : "") + "\n" + n;
 	}
 }
-function hn(e, t) {
-	return e.marker ? gn(e.marker, t).repeat(3) : gn(e.fence, t);
+function _n(e, t) {
+	return e.marker ? vn(e.marker, t).repeat(3) : vn(e.fence, t);
 }
-function gn(e, t) {
+function vn(e, t) {
 	return typeof e == "string" ? e : e[t];
 }
 //#endregion
 //#region ../../node_modules/.pnpm/remark-frontmatter@5.0.0/node_modules/remark-frontmatter/lib/index.js
-var _n = "yaml";
-function vn(e) {
-	let t = this, n = e || _n, r = t.data(), i = r.micromarkExtensions ||= [], a = r.fromMarkdownExtensions ||= [], o = r.toMarkdownExtensions ||= [];
-	i.push(rn(n)), a.push(ln(n)), o.push(pn(n));
+var yn = "yaml";
+function bn(e) {
+	let t = this, n = e || yn, r = t.data(), i = r.micromarkExtensions ||= [], a = r.fromMarkdownExtensions ||= [], o = r.toMarkdownExtensions ||= [];
+	i.push(on(n)), a.push(dn(n)), o.push(hn(n));
 }
 //#endregion
 //#region src/frontmatter/index.ts
-var yn = Fe("coarRemarkFrontmatter", () => vn, ["yaml"]), bn = Ne("frontmatter", () => ({
+var xn = Le("coarRemarkFrontmatter", () => bn, ["yaml"]), Sn = Fe("frontmatter", () => ({
 	group: "block",
 	atom: !0,
 	marks: "",
@@ -639,8 +639,8 @@ var yn = Fe("coarRemarkFrontmatter", () => vn, ["yaml"]), bn = Ne("frontmatter",
 		}
 	}
 }));
-function xn(e, t) {
-	let { entries: n } = He(t);
+function Cn(e, t) {
+	let { entries: n } = We(t);
 	if (e.replaceChildren(), n.length === 0) {
 		let n = document.createElement("pre");
 		n.className = "coar-markdown-frontmatter__raw", n.textContent = t, e.appendChild(n);
@@ -655,14 +655,14 @@ function xn(e, t) {
 		i.className = "coar-markdown-frontmatter__value", i.textContent = t.value, n.append(r, document.createTextNode(": "), i), e.appendChild(n);
 	}
 }
-var Sn = class {
+var wn = class {
 	dom;
 	node;
 	constructor(e) {
 		this.node = e, this.dom = document.createElement("div"), this.dom.className = "coar-markdown-frontmatter", this.dom.setAttribute("data-type", "frontmatter"), this.dom.setAttribute("aria-label", "Document metadata"), this.dom.contentEditable = "false", this.dom.draggable = !1, this.renderCard();
 	}
 	renderCard() {
-		xn(this.dom, this.node.attrs.value ?? "");
+		Cn(this.dom, this.node.attrs.value ?? "");
 	}
 	update(e) {
 		if (e.type !== this.node.type) return !1;
@@ -675,25 +675,25 @@ var Sn = class {
 	stopEvent() {
 		return !1;
 	}
-}, Cn = [
-	yn,
-	bn,
-	Ie(bn.node, () => (e) => new Sn(e))
+}, Tn = [
+	xn,
+	Sn,
+	Re(Sn.node, () => (e) => new wn(e))
 ].flat();
 //#endregion
 //#region src/embed/index.ts
-function wn(e, t) {
+function En(e, t) {
 	let n = e.position?.start?.offset, r = e.position?.end?.offset;
 	if (t && typeof n == "number" && typeof r == "number") return t.slice(n, r).trim();
 	let i = e.children;
 	return Array.isArray(i) && i.length === 1 && i[0]?.type === "text" && typeof i[0].value == "string" ? i[0].value.trim() : null;
 }
-function Tn(e, t) {
+function Dn(e, t) {
 	Array.isArray(e.children) && (e.children = e.children.map((e) => {
 		if (e.type === "paragraph") {
-			let n = wn(e, t);
+			let n = En(e, t);
 			if (n) {
-				let t = Ve(n);
+				let t = Ue(n);
 				if (t) return {
 					type: "embed",
 					embedKey: t.key,
@@ -702,21 +702,21 @@ function Tn(e, t) {
 				};
 			}
 		}
-		return Tn(e, t), e;
+		return Dn(e, t), e;
 	}));
 }
-var En = function() {
+var On = function() {
 	let e = this.data();
 	return (e.toMarkdownExtensions ??= []).push({ handlers: { embed(e) {
 		let t = typeof e.embedKey == "string" ? e.embedKey : "";
-		return t.length === 0 ? "" : Ge({
+		return t.length === 0 ? "" : qe({
 			key: t,
-			props: Ke(e.props)
+			props: Je(e.props)
 		});
 	} } }), (e, t) => {
-		Tn(e, typeof t?.value == "string" ? t.value : "");
+		Dn(e, typeof t?.value == "string" ? t.value : "");
 	};
-}, Dn = Fe("coarEmbed", () => En), On = Ne("embed", () => ({
+}, kn = Le("coarEmbed", () => On), An = Fe("embed", () => ({
 	group: "block",
 	atom: !0,
 	marks: "",
@@ -765,7 +765,7 @@ var En = function() {
 			});
 		}
 	}
-})), kn = class {
+})), jn = class {
 	dom;
 	node;
 	view;
@@ -784,19 +784,19 @@ var En = function() {
 		this.view.dispatch(n);
 	}
 	renderPreview() {
-		let e = this.node.attrs.embedKey ?? "", t = this.node.attrs.props ?? {}, n = this.options.resolveRegistry(), r = Qe(n, e), i = r?.editor ? f(r.editor, { controller: {
+		let e = this.node.attrs.embedKey ?? "", t = this.node.attrs.props ?? {}, n = this.options.resolveRegistry(), r = et(n, e), i = r?.editor ? f(r.editor, { controller: {
 			props: t,
 			update: (e) => this.updateProps(e),
 			patch: (e) => this.updateProps({
 				...t,
 				...e
 			})
-		} }) : f(Ye, {
+		} }) : f(Ze, {
 			embedKey: e,
 			embedProps: t,
 			registry: n
 		});
-		this.options.appContext && (i.appContext = this.options.appContext), b(i, this.dom);
+		this.options.appContext && (i.appContext = this.options.appContext), x(i, this.dom);
 	}
 	update(e) {
 		return e.type === this.node.type ? (this.node = e, this.renderPreview(), !0) : !1;
@@ -814,35 +814,35 @@ var En = function() {
 		return !0;
 	}
 	destroy() {
-		b(null, this.dom);
+		x(null, this.dom);
 	}
-}, An = (e) => Ie(On.node, () => (t, n, r) => new kn(t, n, r, e));
-function jn(e) {
+}, Mn = (e) => Re(An.node, () => (t, n, r) => new jn(t, n, r, e));
+function Nn(e) {
 	return [
-		Dn,
-		On,
-		An(e)
+		kn,
+		An,
+		Mn(e)
 	].flat();
 }
 //#endregion
 //#region src/text-color/ColorPickerPanel.vue?vue&type=script&setup=true&lang.ts
-var Mn = { class: "coar-md-color-grid" }, Nn = [
+var Pn = { class: "coar-md-color-grid" }, Fn = [
 	"title",
 	"aria-label",
 	"onMousedown"
-], Pn = { class: "coar-md-color-custom" }, Fn = /* @__PURE__ */ u({
+], In = { class: "coar-md-color-custom" }, Ln = /* @__PURE__ */ u({
 	__name: "ColorPickerPanel",
 	props: {
 		currentColor: {},
 		pick: { type: Function }
 	},
 	setup(t) {
-		let n = y(t.currentColor ?? "#000000");
+		let n = b(t.currentColor ?? "#000000");
 		return (r, c) => (v(), o("div", {
 			class: "coar-md-color-picker",
 			role: "menu",
-			onMousedown: c[2] ||= M(() => {}, ["stop"])
-		}, [s("div", Mn, [(v(!0), o(e, null, x(C(Kt), (e) => (v(), o("button", {
+			onMousedown: c[2] ||= N(() => {}, ["stop"])
+		}, [s("div", Pn, [(v(!0), o(e, null, S(T(Jt), (e) => (v(), o("button", {
 			key: e.value || "default",
 			type: "button",
 			class: h([
@@ -853,35 +853,35 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 			style: g(e.value ? { "--coar-md-swatch": e.value } : void 0),
 			title: e.name,
 			"aria-label": e.name,
-			onMousedown: M((n) => t.pick(e.value === "" ? null : e.value), ["prevent"])
-		}, [e.value === "" ? (v(), i(C(H), {
+			onMousedown: N((n) => t.pick(e.value === "" ? null : e.value), ["prevent"])
+		}, [e.value === "" ? (v(), i(T(V), {
 			key: 0,
 			name: "ban",
 			size: "s"
-		})) : a("", !0)], 46, Nn))), 128))]), s("div", Pn, [c[3] ||= s("label", {
+		})) : a("", !0)], 46, Fn))), 128))]), s("div", In, [c[3] ||= s("label", {
 			class: "coar-md-color-custom-label",
 			for: "coar-md-color-custom-input"
-		}, " Custom ", -1), A(s("input", {
+		}, " Custom ", -1), j(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), [[E, n.value]])])], 32));
+		}, null, 544), [[ne, n.value]])])], 32));
 	}
-}), In = [
+}), Rn = [
 	"aria-label",
 	"onMouseover",
 	"onFocus",
 	"onClick"
-], Ln = { class: "coar-md-table-picker__label" }, Rn = /* @__PURE__ */ u({
+], zn = { class: "coar-md-table-picker__label" }, Bn = /* @__PURE__ */ u({
 	__name: "TableSizePicker",
 	props: {
 		pick: { type: Function },
 		max: {}
 	},
 	setup(t) {
-		let r = t.max ?? 8, i = Array.from({ length: r }, (e, t) => t + 1), a = y(0), l = y(0), u = n(() => a.value > 0 ? `${l.value} × ${a.value}` : "Pick size");
+		let r = t.max ?? 8, i = Array.from({ length: r }, (e, t) => t + 1), a = b(0), l = b(0), u = n(() => a.value > 0 ? `${l.value} × ${a.value}` : "Pick size");
 		function d(e, t) {
 			a.value = e, l.value = t;
 		}
@@ -897,8 +897,8 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 		}, [
 			s("div", {
 				class: "coar-md-table-picker__grid",
-				style: g({ gridTemplateColumns: `repeat(${C(r)}, 1fr)` })
-			}, [(v(!0), o(e, null, x(C(i), (n) => (v(), o(e, { key: n }, [(v(!0), o(e, null, x(C(i), (e) => (v(), o("button", {
+				style: g({ gridTemplateColumns: `repeat(${T(r)}, 1fr)` })
+			}, [(v(!0), o(e, null, S(T(i), (n) => (v(), o(e, { key: n }, [(v(!0), o(e, null, S(T(i), (e) => (v(), o("button", {
 				key: `${n}-${e}`,
 				type: "button",
 				class: h(["coar-md-table-picker__cell", { "coar-md-table-picker__cell--on": p(n, e) }]),
@@ -906,8 +906,8 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 				onMouseover: (t) => d(n, e),
 				onFocus: (t) => d(n, e),
 				onClick: (r) => t.pick(n, e)
-			}, null, 42, In))), 128))], 64))), 128))], 4),
-			s("div", Ln, S(u.value), 1),
+			}, null, 42, Rn))), 128))], 64))), 128))], 4),
+			s("div", zn, w(u.value), 1),
 			a[0] ||= s("div", { class: "coar-md-table-picker__hint" }, [
 				c(" or type "),
 				s("code", null, "|3x4|"),
@@ -915,31 +915,31 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 			], -1)
 		], 32));
 	}
-}), zn = (e, t) => {
+}), Vn = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, Bn = /* @__PURE__ */ zn(Rn, [["__scopeId", "data-v-68fa1760"]]), Vn = {
+}, Hn = /* @__PURE__ */ Vn(Bn, [["__scopeId", "data-v-68fa1760"]]), Un = {
 	key: 0,
 	class: "coar-md-th"
-}, Hn = [
+}, Wn = [
 	"aria-label",
 	"onMouseenter",
 	"onMousedown"
-], Un = [
+], Gn = [
 	"aria-label",
 	"onMouseenter",
 	"onMousedown"
-], Z = 14, Wn = 4, Gn = /* @__PURE__ */ zn(/* @__PURE__ */ u({
+], Z = 14, Kn = 4, qn = /* @__PURE__ */ Vn(/* @__PURE__ */ u({
 	__name: "TableHandles",
 	props: { area: {} },
 	emits: ["menuToggle"],
 	setup(r, { emit: s }) {
-		let c = r, u = s, [, d] = ie(), f = te(null), p = y(null), m = y(null), b = y(null), S = pe();
-		O(S.isOpen, (e) => {
+		let c = r, u = s, [, d] = ce(), f = te(null), p = b(null), m = b(null), y = b(null), x = ge();
+		k(x.isOpen, (e) => {
 			!e && m.value && (m.value = null, p.value = null, u("menuToggle", !1));
 		});
-		function w(e) {
+		function C(e) {
 			return {
 				left: e.left,
 				top: e.top,
@@ -947,22 +947,22 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 				height: e.height
 			};
 		}
-		function T(e) {
+		function w(e) {
 			let t = Array.from(e.querySelectorAll("tr")), n = t[0];
 			if (!n) return null;
 			let r = Array.from(n.children);
 			return r.length === 0 ? null : {
 				table: e,
-				rect: w(e.getBoundingClientRect()),
-				cols: r.map((e) => w(e.getBoundingClientRect())),
-				rows: t.map((e) => w(e.getBoundingClientRect()))
+				rect: C(e.getBoundingClientRect()),
+				cols: r.map((e) => C(e.getBoundingClientRect())),
+				rows: t.map((e) => C(e.getBoundingClientRect()))
 			};
 		}
 		function E(e, t, n) {
 			return t >= e.rect.left - Z - 4 && t <= e.rect.left + e.rect.width + Z + 4 && n >= e.rect.top - Z - 4 && n <= e.rect.top + e.rect.height + Z + 4;
 		}
 		let D = !1;
-		function A(e, t) {
+		function ne(e, t) {
 			let n = c.area?.querySelectorAll("table");
 			if (!n) return null;
 			for (let r of Array.from(n)) {
@@ -971,39 +971,39 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 			}
 			return null;
 		}
-		function j(e) {
-			m.value || z || b.value || D || (D = !0, requestAnimationFrame(() => {
+		function O(e) {
+			m.value || L || y.value || D || (D = !0, requestAnimationFrame(() => {
 				D = !1;
 				let t = e.clientX, n = e.clientY;
 				if (f.value && E(f.value, t, n)) return;
-				let r = A(t, n);
-				r ? f.value = T(r) : (f.value = null, p.value = null);
+				let r = ne(t, n);
+				r ? f.value = w(r) : (f.value = null, p.value = null);
 			}));
 		}
-		function M() {
+		function j() {
 			if (f.value) {
-				let e = T(f.value.table);
-				f.value = e, e || (p.value = null, S.close());
+				let e = w(f.value.table);
+				f.value = e, e || (p.value = null, x.close());
 			}
 		}
 		_(() => {
-			document.addEventListener("mousemove", j, !0), window.addEventListener("scroll", M, !0), window.addEventListener("resize", M);
+			document.addEventListener("mousemove", O, !0), window.addEventListener("scroll", j, !0), window.addEventListener("resize", j);
 		}), ee(() => {
-			document.removeEventListener("mousemove", j, !0), document.removeEventListener("mousemove", H, !0), document.removeEventListener("mouseup", W, !0), window.removeEventListener("scroll", M, !0), window.removeEventListener("resize", M);
+			document.removeEventListener("mousemove", O, !0), document.removeEventListener("mousemove", z, !0), document.removeEventListener("mouseup", B, !0), window.removeEventListener("scroll", j, !0), window.removeEventListener("resize", j);
 		});
-		function N(e, t) {
+		function M(e, t) {
 			let n = f.value, r = d();
 			if (!n || !r) return null;
 			let i = null;
 			return r.action((r) => {
-				let a = r.get(I), o = e === "col" ? n.table.querySelector("tr")?.children[t] : n.table.querySelectorAll("tr")[t]?.children[0];
+				let a = r.get(F), o = e === "col" ? n.table.querySelector("tr")?.children[t] : n.table.querySelectorAll("tr")[t]?.children[0];
 				o && (i = a.posAtDOM(o, 0));
 			}), i;
 		}
-		function F(e, t, ...n) {
-			let r = d(), i = N(e, t);
+		function N(e, t, ...n) {
+			let r = d(), i = M(e, t);
 			if (!r || i == null) return;
-			let a = e === "col" ? ct : lt;
+			let a = e === "col" ? ut : dt;
 			r.action((e) => {
 				let r = e.get(P);
 				r.call(a.key, {
@@ -1011,29 +1011,29 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 					pos: i
 				});
 				for (let e of n) r.call(e.key);
-			}), S.close(), f.value = null;
+			}), x.close(), f.value = null;
 		}
-		function L() {
-			m.value && F(m.value.kind, m.value.index, rt);
+		function re() {
+			m.value && N(m.value.kind, m.value.index, at);
 		}
-		function ne() {
+		function ie() {
 			if (!m.value) return;
 			let { kind: e, index: t } = m.value;
-			F(e, t, e === "col" ? et : nt);
+			N(e, t, e === "col" ? nt : it);
 		}
-		function re() {
+		function I() {
 			if (!m.value) return;
 			let { kind: e, index: t } = m.value;
-			F(e, t, e === "col" ? $e : tt);
+			N(e, t, e === "col" ? tt : rt);
 		}
-		function R(e, t) {
-			return p.value?.kind === e && p.value.index === t || m.value?.kind === e && m.value.index === t || b.value?.kind === e && b.value.from === t;
+		function ae(e, t) {
+			return p.value?.kind === e && p.value.index === t || m.value?.kind === e && m.value.index === t || y.value?.kind === e && y.value.from === t;
 		}
-		let z = null;
-		function B(e, t, n) {
-			let r = d(), i = N(e, t);
+		let L = null;
+		function oe(e, t, n) {
+			let r = d(), i = M(e, t);
 			if (!r || i == null || t === n) return;
-			let a = e === "col" ? ct : lt, o = e === "col" ? ot : st;
+			let a = e === "col" ? ut : dt, o = e === "col" ? ct : lt;
 			r.action((e) => {
 				let r = e.get(P);
 				r.call(a.key, {
@@ -1044,11 +1044,11 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 					to: n,
 					pos: i
 				});
-				let s = e.get(I), { state: c } = s;
-				c.selection.empty || s.dispatch(c.tr.setSelection(je.create(c.doc, c.selection.from)));
+				let s = e.get(F), { state: c } = s;
+				c.selection.empty || s.dispatch(c.tr.setSelection(Ne.create(c.doc, c.selection.from)));
 			}), f.value = null, p.value = null;
 		}
-		function ae(e, t, n) {
+		function se(e, t, n) {
 			let r = f.value;
 			if (!r) return 0;
 			if (e === "col") {
@@ -1058,45 +1058,45 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 			let i = r.rows.findIndex((e) => n < e.top + e.height);
 			return i === -1 ? r.rows.length - 1 : i;
 		}
-		function V(e, t, n) {
-			n.preventDefault(), n.stopPropagation(), z = {
+		function R(e, t, n) {
+			n.preventDefault(), n.stopPropagation(), L = {
 				kind: e,
 				from: t,
 				x: n.clientX,
 				y: n.clientY,
 				ev: n
-			}, document.addEventListener("mousemove", H, !0), document.addEventListener("mouseup", W, !0);
-		}
-		function H(e) {
-			if (z) {
-				if (!b.value) {
-					if (Math.hypot(e.clientX - z.x, e.clientY - z.y) < Wn) return;
-					b.value = {
-						kind: z.kind,
-						from: z.from,
-						target: z.from
+			}, document.addEventListener("mousemove", z, !0), document.addEventListener("mouseup", B, !0);
+		}
+		function z(e) {
+			if (L) {
+				if (!y.value) {
+					if (Math.hypot(e.clientX - L.x, e.clientY - L.y) < Kn) return;
+					y.value = {
+						kind: L.kind,
+						from: L.from,
+						target: L.from
 					};
 				}
-				b.value = {
-					...b.value,
-					target: ae(b.value.kind, e.clientX, e.clientY)
+				y.value = {
+					...y.value,
+					target: se(y.value.kind, e.clientX, e.clientY)
 				};
 			}
 		}
-		function W() {
-			if (document.removeEventListener("mousemove", H, !0), document.removeEventListener("mouseup", W, !0), b.value) {
-				let { kind: e, from: t, target: n } = b.value;
-				b.value = null, B(e, t, n);
-			} else z && ce(z.kind, z.from, z.ev);
-			z = null;
+		function B() {
+			if (document.removeEventListener("mousemove", z, !0), document.removeEventListener("mouseup", B, !0), y.value) {
+				let { kind: e, from: t, target: n } = y.value;
+				y.value = null, oe(e, t, n);
+			} else L && V(L.kind, L.from, L.ev);
+			L = null;
 		}
-		function ce(e, t, n) {
+		function V(e, t, n) {
 			n.preventDefault(), n.stopPropagation(), m.value = {
 				kind: e,
 				index: t
-			}, u("menuToggle", !0), S.open(n), requestAnimationFrame(M);
+			}, u("menuToggle", !0), x.open(n), requestAnimationFrame(j);
 		}
-		let le = n(() => {
+		let fe = n(() => {
 			let e = f.value;
 			return e ? [{
 				key: "top",
@@ -1111,7 +1111,7 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 				width: e.rect.width,
 				height: Z
 			}] : [];
-		}), ue = n(() => {
+		}), pe = n(() => {
 			let e = f.value;
 			return e ? [{
 				key: "left",
@@ -1126,10 +1126,10 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 				width: Z,
 				height: e.rect.height
 			}] : [];
-		}), G = n(() => {
-			let e = f.value, t = p.value ?? m.value ?? (b.value ? {
-				kind: b.value.kind,
-				index: b.value.from
+		}), H = n(() => {
+			let e = f.value, t = p.value ?? m.value ?? (y.value ? {
+				kind: y.value.kind,
+				index: y.value.from
 			} : null);
 			if (!e || !t) return null;
 			if (t.kind === "col") {
@@ -1148,8 +1148,8 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 				width: `${e.rect.width}px`,
 				height: `${n.height}px`
 			};
-		}), K = n(() => {
-			let e = f.value, t = b.value;
+		}), me = n(() => {
+			let e = f.value, t = y.value;
 			if (!e || !t) return null;
 			if (t.kind === "col") {
 				let n = e.cols[t.target], r = t.target >= t.from ? n.left + n.width : n.left;
@@ -1168,18 +1168,18 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 				height: "2px"
 			};
 		});
-		return (n, r) => (v(), i(t, { to: "body" }, [f.value ? (v(), o("div", Vn, [
-			G.value ? (v(), o("div", {
+		return (n, r) => (v(), i(t, { to: "body" }, [f.value ? (v(), o("div", Un, [
+			H.value ? (v(), o("div", {
 				key: 0,
 				class: "coar-md-th__hl",
-				style: g(G.value)
+				style: g(H.value)
 			}, null, 4)) : a("", !0),
-			K.value ? (v(), o("div", {
+			me.value ? (v(), o("div", {
 				key: 1,
 				class: "coar-md-th__drop",
-				style: g(K.value)
+				style: g(me.value)
 			}, null, 4)) : a("", !0),
-			(v(!0), o(e, null, x(le.value, (t) => (v(), o("div", {
+			(v(!0), o(e, null, S(fe.value, (t) => (v(), o("div", {
 				key: t.key,
 				class: "coar-md-th__bar coar-md-th__bar--col",
 				style: g({
@@ -1188,10 +1188,10 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 					width: `${t.width}px`,
 					height: `${t.height}px`
 				})
-			}, [(v(!0), o(e, null, x(f.value.cols, (e, t) => (v(), o("button", {
+			}, [(v(!0), o(e, null, S(f.value.cols, (e, t) => (v(), o("button", {
 				key: `c${t}`,
 				type: "button",
-				class: h(["coar-md-th__grip", { "coar-md-th__grip--active": R("col", t) }]),
+				class: h(["coar-md-th__grip", { "coar-md-th__grip--active": ae("col", t) }]),
 				style: g({
 					left: `${e.left - f.value.rect.left}px`,
 					width: `${e.width}px`
@@ -1202,9 +1202,9 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 					index: t
 				},
 				onMouseleave: r[0] ||= (e) => p.value = null,
-				onMousedown: (e) => V("col", t, e)
-			}, null, 46, Hn))), 128))], 4))), 128)),
-			(v(!0), o(e, null, x(ue.value, (t) => (v(), o("div", {
+				onMousedown: (e) => R("col", t, e)
+			}, null, 46, Wn))), 128))], 4))), 128)),
+			(v(!0), o(e, null, S(pe.value, (t) => (v(), o("div", {
 				key: t.key,
 				class: "coar-md-th__bar coar-md-th__bar--row",
 				style: g({
@@ -1213,10 +1213,10 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 					width: `${t.width}px`,
 					height: `${t.height}px`
 				})
-			}, [(v(!0), o(e, null, x(f.value.rows, (e, t) => (v(), o("button", {
+			}, [(v(!0), o(e, null, S(f.value.rows, (e, t) => (v(), o("button", {
 				key: `r${t}`,
 				type: "button",
-				class: h(["coar-md-th__grip", { "coar-md-th__grip--active": R("row", t) }]),
+				class: h(["coar-md-th__grip", { "coar-md-th__grip--active": ae("row", t) }]),
 				style: g({
 					top: `${e.top - f.value.rect.top}px`,
 					height: `${e.height}px`
@@ -1227,31 +1227,31 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 					index: t
 				},
 				onMouseleave: r[1] ||= (e) => p.value = null,
-				onMousedown: (e) => V("row", t, e)
-			}, null, 46, Un))), 128))], 4))), 128))
-		])) : a("", !0), l(C(oe), { menu: C(S) }, {
-			default: k(() => [
-				l(C(U), {
+				onMousedown: (e) => R("row", t, e)
+			}, null, 46, Gn))), 128))], 4))), 128))
+		])) : a("", !0), l(T(le), { menu: T(x) }, {
+			default: A(() => [
+				l(T(de), {
 					label: m.value?.kind === "col" ? "Insert column left" : "Insert row above",
 					icon: m.value?.kind === "col" ? "table-column-plus-left" : "table-row-plus-above",
-					onClicked: ne
+					onClicked: ie
 				}, null, 8, ["label", "icon"]),
-				l(C(U), {
+				l(T(de), {
 					label: m.value?.kind === "col" ? "Insert column right" : "Insert row below",
 					icon: m.value?.kind === "col" ? "table-column-plus-right" : "table-row-plus-below",
-					onClicked: re
+					onClicked: I
 				}, null, 8, ["label", "icon"]),
-				l(C(se)),
-				l(C(U), {
+				l(T(ue)),
+				l(T(de), {
 					label: m.value?.kind === "col" ? "Delete column" : "Delete row",
 					icon: "trash-2",
-					onClicked: L
+					onClicked: re
 				}, null, 8, ["label"])
 			]),
 			_: 1
 		}, 8, ["menu"])]));
 	}
-}), [["__scopeId", "data-v-24e26df4"]]), Kn = ["onKeydown"], qn = { ref: "urlField" }, Jn = { class: "coar-md-image-dialog__actions" }, Yn = /* @__PURE__ */ zn(/* @__PURE__ */ u({
+}), [["__scopeId", "data-v-24e26df4"]]), Jn = ["onKeydown"], Yn = { ref: "urlField" }, Xn = { class: "coar-md-image-dialog__actions" }, Zn = /* @__PURE__ */ Vn(/* @__PURE__ */ u({
 	__name: "ImageInsertDialog",
 	props: {
 		close: { type: Function },
@@ -1260,7 +1260,7 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 		initialTitle: {}
 	},
 	setup(e) {
-		let t = e, r = y(t.initialUrl ?? ""), i = y(t.initialAlt ?? ""), a = y(t.initialTitle ?? ""), u = T("urlField"), d = n(() => r.value.trim().length > 0);
+		let t = e, r = b(t.initialUrl ?? ""), i = b(t.initialAlt ?? ""), a = b(t.initialTitle ?? ""), u = D("urlField"), d = n(() => r.value.trim().length > 0);
 		function f() {
 			d.value && t.close({
 				url: r.value.trim(),
@@ -1275,13 +1275,13 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 			u.value?.querySelector("input")?.focus();
 		}), (e, t) => (v(), o("div", {
 			class: "coar-md-image-dialog",
-			onKeydown: j(M(f, ["prevent"]), ["enter"])
+			onKeydown: M(N(f, ["prevent"]), ["enter"])
 		}, [
-			s("div", qn, [l(C(V), {
+			s("div", Yn, [l(T(B), {
 				label: "Image URL",
 				required: ""
 			}, {
-				default: k(() => [l(C(K), {
+				default: A(() => [l(T(W), {
 					modelValue: r.value,
 					"onUpdate:modelValue": t[0] ||= (e) => r.value = e,
 					placeholder: "https://example.com/image.png",
@@ -1289,8 +1289,8 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 				}, null, 8, ["modelValue"])]),
 				_: 1
 			})], 512),
-			l(C(V), { label: "Alt text" }, {
-				default: k(() => [l(C(K), {
+			l(T(B), { label: "Alt text" }, {
+				default: A(() => [l(T(W), {
 					modelValue: i.value,
 					"onUpdate:modelValue": t[1] ||= (e) => i.value = e,
 					placeholder: "Describe the image",
@@ -1298,8 +1298,8 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 				}, null, 8, ["modelValue"])]),
 				_: 1
 			}),
-			l(C(V), { label: "Title (optional)" }, {
-				default: k(() => [l(C(K), {
+			l(T(B), { label: "Title (optional)" }, {
+				default: A(() => [l(T(W), {
 					modelValue: a.value,
 					"onUpdate:modelValue": t[2] ||= (e) => a.value = e,
 					placeholder: "Shown on hover",
@@ -1307,39 +1307,39 @@ var Mn = { class: "coar-md-color-grid" }, Nn = [
 				}, null, 8, ["modelValue"])]),
 				_: 1
 			}),
-			s("div", Jn, [l(C(B), {
+			s("div", Xn, [l(T(R), {
 				variant: "tertiary",
 				type: "button",
 				onClick: p
 			}, {
-				default: k(() => [...t[3] ||= [c("Cancel", -1)]]),
+				default: A(() => [...t[3] ||= [c("Cancel", -1)]]),
 				_: 1
-			}), l(C(B), {
+			}), l(T(R), {
 				variant: "primary",
 				type: "button",
 				disabled: !d.value,
 				onClick: f
 			}, {
-				default: k(() => [...t[4] ||= [c("Insert", -1)]]),
+				default: A(() => [...t[4] ||= [c("Insert", -1)]]),
 				_: 1
 			}, 8, ["disabled"])])
-		], 40, Kn));
+		], 40, Jn));
 	}
-}), [["__scopeId", "data-v-a0456b93"]]), Q = new Ae("coar-image-upload-placeholder");
-function Xn() {
+}), [["__scopeId", "data-v-a0456b93"]]), Q = new Me("coar-image-upload-placeholder");
+function Qn() {
 	let e = document.createElement("span");
 	return e.className = "coar-md-image-uploading", e.setAttribute("aria-label", "Uploading image…"), e.setAttribute("role", "img"), e;
 }
-function Zn(e, t) {
+function $n(e, t) {
 	let n = Q.getState(e.state);
 	if (!n) return null;
 	let r = n.find(void 0, void 0, (e) => e.id === t);
 	return r.length ? r[0].from : null;
 }
-function Qn(e) {
+function er(e) {
 	return e ? Array.from(e.files).filter((e) => e.type.startsWith("image/")) : [];
 }
-function $n(e, t, n, r) {
+function tr(e, t, n, r) {
 	let i = r.getUploader();
 	if (!i) return;
 	let a = { token: Symbol("coar-image-upload") };
@@ -1348,7 +1348,7 @@ function $n(e, t, n, r) {
 		id: a,
 		pos: n
 	})), i(t).then(({ url: n, alt: r }) => {
-		let i = Zn(e, a);
+		let i = $n(e, a);
 		if (i === null) return;
 		let o = e.state.schema.nodes.image;
 		if (!o) return;
@@ -1361,21 +1361,21 @@ function $n(e, t, n, r) {
 		});
 		e.dispatch(c);
 	}).catch((n) => {
-		Zn(e, a) !== null && e.dispatch(e.state.tr.setMeta(Q, {
+		$n(e, a) !== null && e.dispatch(e.state.tr.setMeta(Q, {
 			type: "remove",
 			id: a
 		})), (r.onError ?? ((e) => console.error("[CoarMarkdownEditor] image upload failed", e)))(n, t);
 	});
 }
-function er(e) {
-	return Pe(() => new ke({
+function nr(e) {
+	return Ie(() => new je({
 		key: Q,
 		state: {
-			init: () => pt.empty,
+			init: () => ht.empty,
 			apply(e, t) {
 				let n = t.map(e.mapping, e.doc), r = e.getMeta(Q);
 				if (r?.type === "add") {
-					let t = ft.widget(r.pos, Xn(), { id: r.id });
+					let t = mt.widget(r.pos, Qn(), { id: r.id });
 					n = n.add(e.doc, [t]);
 				} else r?.type === "remove" && (n = n.remove(n.find(void 0, void 0, (e) => e.id === r.id)));
 				return n;
@@ -1387,29 +1387,29 @@ function er(e) {
 			},
 			handlePaste(t, n) {
 				if (!e.getUploader()) return !1;
-				let r = Qn(n.clipboardData);
+				let r = er(n.clipboardData);
 				if (r.length === 0) return !1;
 				n.preventDefault();
 				let i = t.state.selection.from;
-				return r.forEach((n) => $n(t, n, i, e)), !0;
+				return r.forEach((n) => tr(t, n, i, e)), !0;
 			},
 			handleDrop(t, n, r, i) {
 				if (i || !e.getUploader()) return !1;
-				let a = Qn(n.dataTransfer);
+				let a = er(n.dataTransfer);
 				if (a.length === 0) return !1;
 				n.preventDefault();
 				let o = t.posAtCoords({
 					left: n.clientX,
 					top: n.clientY
 				})?.pos ?? t.state.selection.from;
-				return a.forEach((n) => $n(t, n, o, e)), !0;
+				return a.forEach((n) => tr(t, n, o, e)), !0;
 			}
 		}
 	}));
 }
 //#endregion
-//#region src/CoarMarkdownEditor.vue?vue&type=script&lang.ts
-var tr = [
+//#region src/editor-group.ts
+var rr = Symbol.for("coar:markdown-editor-group"), ir = [
 	"bold",
 	"italic",
 	"strikethrough",
@@ -1431,26 +1431,26 @@ var tr = [
 	"undo",
 	"redo"
 ], $ = {
-	bold: { command: we },
-	italic: { command: Se },
-	strike: { command: dt },
-	code: { command: Ce },
-	bulletList: { command: De },
-	orderedList: { command: Oe },
-	blockquote: { command: Ee },
-	hr: { command: ve },
-	codeBlock: { command: _e },
-	table: { command: at },
-	undo: { command: gt },
-	redo: { command: ht },
-	paragraph: { command: Te },
-	addRowBefore: { command: nt },
-	addRowAfter: { command: tt },
-	addColBefore: { command: et },
-	addColAfter: { command: $e },
-	deleteCell: { command: rt },
-	indent: { command: xe },
-	outdent: { command: be },
+	bold: { command: Ee },
+	italic: { command: we },
+	strike: { command: pt },
+	code: { command: Te },
+	bulletList: { command: ke },
+	orderedList: { command: Ae },
+	blockquote: { command: Oe },
+	hr: { command: xe },
+	codeBlock: { command: be },
+	table: { command: st },
+	undo: { command: vt },
+	redo: { command: _t },
+	paragraph: { command: De },
+	addRowBefore: { command: it },
+	addRowAfter: { command: rt },
+	addColBefore: { command: nt },
+	addColAfter: { command: tt },
+	deleteCell: { command: at },
+	indent: { command: q },
+	outdent: { command: Ce },
 	h1: {
 		command: J,
 		payload: 1
@@ -1475,7 +1475,7 @@ var tr = [
 		command: J,
 		payload: 6
 	}
-}, nr = u({
+}, ar = u({
 	props: {
 		initialValue: {
 			type: String,
@@ -1549,29 +1549,33 @@ var tr = [
 			type: Object,
 			default: void 0
 		},
+		editorGroupId: {
+			type: String,
+			required: !0
+		},
 		onMarkdownChange: {
 			type: Function,
 			required: !0
 		}
 	},
 	setup(e) {
-		let t = d()?.appContext ?? null, n = y(e.initialValue), r = y("rendered"), i = Nt(e.flavor);
-		z((r) => {
-			let a = N.make().config((t) => {
-				t.set(ne, r), t.set(F, e.initialValue), t.update(L, (t) => ({
+		let t = d()?.appContext ?? null, n = b(e.initialValue), r = b("rendered"), i = Ft(e.flavor);
+		se((r) => {
+			let a = re.make().config((t) => {
+				t.set(ae, r), t.set(ie, e.initialValue), t.update(I, (t) => ({
 					...t,
 					editable: () => !e.readonly
-				})), t.get(yt).markdownUpdated((t, r) => {
+				})), t.get(xt).markdownUpdated((t, r) => {
 					r !== n.value && (n.value = r, e.onMarkdownChange(r));
 				});
-			}).use(ge);
-			return i.gfm && a.use(it), a.use(Cn).use(mt).use(_t).use(vt), i.textColor && a.use(Gt), i.embeds && a.use(jn({
+			}).use(K);
+			return i.gfm && a.use(ot), a.use(Tn).use(gt).use(yt).use(bt), i.textColor && a.use(qt), i.embeds && a.use(Nn({
 				resolveRegistry: () => e.embeds,
 				appContext: t
-			})), a.use(Bt).use(er({ getUploader: () => e.uploadImage })), a;
+			})), a.use(Ht).use(nr({ getUploader: () => e.uploadImage })), a;
 		});
-		let [a, o] = ie(), s = y(null);
-		return O(() => e.externalValue.value, (e) => {
+		let [a, o] = ce(), s = b(null);
+		return k(() => e.externalValue.value, (e) => {
 			if (e === n.value) return;
 			if (r.value === "source") {
 				n.value = e;
@@ -1582,26 +1586,26 @@ var tr = [
 				s.value = e;
 				return;
 			}
-			s.value = null, n.value = e, t.action(Le(e));
-		}), O(r, (e) => {
+			s.value = null, n.value = e, t.action(ze(e));
+		}), k(r, (e) => {
 			if (e !== "rendered") return;
 			let t = o();
-			t && t.action(Le(n.value));
-		}), O(a, (e) => {
+			t && t.action(ze(n.value));
+		}), k(a, (e) => {
 			if (e || s.value === null) return;
 			let t = o();
 			if (!t) return;
 			let r = s.value;
-			s.value = null, r !== n.value && (n.value = r, t.action(Le(r)));
-		}, { immediate: !0 }), O(() => e.readonly, () => {
+			s.value = null, r !== n.value && (n.value = r, t.action(ze(r)));
+		}, { immediate: !0 }), k(() => e.readonly, () => {
 			let t = o();
 			t && t.action((t) => {
-				t.update(L, (t) => ({
+				t.update(I, (t) => ({
 					...t,
 					editable: () => !e.readonly
-				})), t.get(I).update(t.get(I).props);
+				})), t.get(F).update(t.get(F).props);
 			});
-		}), () => f(rr, {
+		}), () => f(or, {
 			readonly: e.readonly,
 			disabled: e.disabled,
 			toolbarMode: e.toolbarMode,
@@ -1615,6 +1619,7 @@ var tr = [
 			placeholder: e.placeholder,
 			pickImage: e.pickImage,
 			embeds: e.embeds,
+			editorGroupId: e.editorGroupId,
 			flavor: e.flavor,
 			isEmpty: n.value.trim() === "",
 			sourceToggle: e.sourceToggle,
@@ -1628,7 +1633,7 @@ var tr = [
 			}
 		});
 	}
-}), rr = u({
+}), or = u({
 	props: {
 		readonly: {
 			type: Boolean,
@@ -1702,6 +1707,10 @@ var tr = [
 			type: String,
 			default: ""
 		},
+		editorGroupId: {
+			type: String,
+			required: !0
+		},
 		onToggleView: {
 			type: Function,
 			default: void 0
@@ -1712,10 +1721,10 @@ var tr = [
 		}
 	},
 	setup(e) {
-		let [, r] = ie(), i = y(null), a = y(null), o = y(!1), s = y(!1), c = y({
+		let [, r] = ce(), i = p(rr, void 0), a = b(null), o = b(null), s = b(!1), c = b(!1), l = b({
 			left: "0px",
 			top: "0px"
-		}), l = y("text"), u = y(!1), d = {
+		}), u = b("text"), d = b(!1), h = {
 			strong: !1,
 			emphasis: !1,
 			strike_through: !1,
@@ -1730,13 +1739,13 @@ var tr = [
 			cell_alignment: null,
 			code_block: !1,
 			list_item_depth: 0
-		}, p = he(), h = me(), g = null, v = null, b = y({ ...d });
-		function x(t) {
+		}, g = ve(), v = _e(), y = null, x = null, S = b({ ...h });
+		function C(t) {
 			if (e.readonly) return;
 			let n = r();
 			n && (n.action((e) => {
 				e.get(P).call(t.command.key, t.payload);
-			}), B());
+			}), z());
 		}
 		async function te(t) {
 			if (e.readonly) return;
@@ -1748,20 +1757,20 @@ var tr = [
 			}
 			let a = r();
 			a && (a.action((e) => {
-				let n = e.get(I), r = n.state.schema.nodes.embed;
+				let n = e.get(F), r = n.state.schema.nodes.embed;
 				if (!r) return;
 				let a = r.create({
 					embedKey: t,
 					props: i
 				});
 				n.dispatch(n.state.tr.replaceSelectionWith(a).scrollIntoView()), n.focus();
-			}), B());
+			}), z());
 		}
-		function S(t) {
+		function w(t) {
 			if (e.readonly) return;
 			let n = r();
 			n && (n.action((e) => {
-				let n = e.get(I), { state: r } = n, { $from: i } = r.selection, a = -1, o = null, s = -1;
+				let n = e.get(F), { state: r } = n, { $from: i } = r.selection, a = -1, o = null, s = -1;
 				for (let e = i.depth; e > 0; e--) {
 					let t = i.node(e);
 					t.type.name === "table" && (o = t, a = i.before(e)), (t.type.name === "table_cell" || t.type.name === "table_header") && s < 0 && (s = e);
@@ -1778,47 +1787,47 @@ var tr = [
 						});
 					});
 				}), l.docChanged && n.dispatch(l);
-			}), B());
+			}), z());
 		}
-		function C() {
+		function T() {
 			if (e.readonly) return;
 			let t = r();
 			t && (t.action((e) => {
 				let t = e.get(P);
-				t.call(ut.key), t.call(rt.key);
-			}), B());
+				t.call(ft.key), t.call(at.key);
+			}), z());
 		}
-		function w(t) {
+		function E(t) {
 			if (e.readonly) return;
-			let n = t === "bullet_list" ? $.bulletList : $.orderedList, r = jt({
+			let n = t === "bullet_list" ? $.bulletList : $.orderedList, r = Nt({
 				target: t,
-				inBulletList: b.value.bullet_list,
-				inOrderedList: b.value.ordered_list
+				inBulletList: S.value.bullet_list,
+				inOrderedList: S.value.ordered_list
 			});
 			if (r === "lift") {
-				x({ command: be });
+				C({ command: Ce });
 				return;
 			}
-			r === "switch" && x({ command: be }), x(n);
+			r === "switch" && C({ command: Ce }), C(n);
 		}
-		let T = n(() => {
+		let D = n(() => {
 			if (!e.tools) return;
 			let t = /* @__PURE__ */ new Set(), n = (e) => {
 				typeof e == "string" && e !== "divider" && !e.startsWith("embed:") && t.add(e);
 			};
 			for (let t of e.tools) typeof t == "string" ? n(t) : t && typeof t == "object" && Array.isArray(t.flyout) && t.flyout.forEach(n);
 			return t;
-		}), E = n(() => Nt(e.flavor));
-		function D(e) {
-			return kt(e, E.value) ? At(e, T.value) : !1;
+		}), ne = n(() => Ft(e.flavor));
+		function O(e) {
+			return jt(e, ne.value) ? Mt(e, D.value) : !1;
 		}
-		function O(t) {
+		function A(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(I), { state: n } = t, r = n.schema.marks.text_color;
+				let t = e.get(F), { state: n } = t, r = n.schema.marks.text_color;
 				if (!r) return;
 				let { from: a, to: o, empty: s } = n.selection;
 				if (s) {
@@ -1828,17 +1837,17 @@ var tr = [
 					let e = n.tr.removeMark(a, o, r);
 					i && (e = e.addMark(a, o, r.create({ color: i }))), t.dispatch(e);
 				}
-			}), A(), B();
+			}), M(), z();
 		}
-		function k(e) {
+		function j(e) {
 			if (e) {
-				if (g && !g.isClosed) {
-					A();
+				if (y && !y.isClosed) {
+					M();
 					return;
 				}
-				g = p.open({
+				y = g.open({
 					spec: {
-						...fe,
+						...he,
 						anchor: {
 							kind: "element",
 							element: e
@@ -1846,39 +1855,39 @@ var tr = [
 					},
 					content: {
 						kind: "component",
-						component: m(Fn)
+						component: m(Ln)
 					},
 					inputs: {
-						currentColor: b.value.text_color,
-						pick: (e) => O(e)
+						currentColor: S.value.text_color,
+						pick: (e) => A(e)
 					}
-				}), g.afterClosed.then(() => {
-					g?.isClosed && (g = null);
+				}), y.afterClosed.then(() => {
+					y?.isClosed && (y = null);
 				});
 			}
 		}
-		function A() {
-			g && !g.isClosed && g.close(), g = null;
+		function M() {
+			y && !y.isClosed && y.close(), y = null;
 		}
-		function j(t, n) {
-			if (N(), e.readonly) return;
+		function N(t, n) {
+			if (ie(), e.readonly) return;
 			let i = r();
 			i && (i.action((e) => {
-				e.get(P).call(at.key, {
+				e.get(P).call(st.key, {
 					row: t,
 					col: n
 				});
-			}), B());
+			}), z());
 		}
-		function M(t) {
+		function re(t) {
 			if (!(!t || e.readonly)) {
-				if (v && !v.isClosed) {
-					N();
+				if (x && !x.isClosed) {
+					ie();
 					return;
 				}
-				v = p.open({
+				x = g.open({
 					spec: {
-						...fe,
+						...he,
 						anchor: {
 							kind: "element",
 							element: t
@@ -1886,70 +1895,70 @@ var tr = [
 					},
 					content: {
 						kind: "component",
-						component: m(Bn)
+						component: m(Hn)
 					},
-					inputs: { pick: (e, t) => j(e, t) }
-				}), v.afterClosed.then(() => {
-					v?.isClosed && (v = null);
+					inputs: { pick: (e, t) => N(e, t) }
+				}), x.afterClosed.then(() => {
+					x?.isClosed && (x = null);
 				});
 			}
 		}
-		function N() {
-			v && !v.isClosed && v.close(), v = null;
+		function ie() {
+			x && !x.isClosed && x.close(), x = null;
 		}
-		function F(t) {
+		function I(t) {
 			if (e.readonly || !t.url) return;
 			let n = r();
 			n && n.action((e) => {
-				e.get(P).call(ye.key, {
+				e.get(P).call(Se.key, {
 					src: t.url,
 					alt: t.alt || void 0,
 					title: t.title || void 0
 				});
 			});
 		}
-		function L() {
+		function ae() {
 			let e = r();
 			if (!e) return "";
 			let t = "";
 			return e.action((e) => {
-				let { state: n } = e.get(I), { from: r, to: i } = n.selection;
+				let { state: n } = e.get(F), { from: r, to: i } = n.selection;
 				t = n.doc.textBetween(r, i, " ");
 			}), t;
 		}
-		function ne() {
+		function oe() {
 			if (e.readonly) return;
 			let t = e.pickImage;
 			if (t) {
 				t({
-					insertImage: F,
-					selectedText: L()
+					insertImage: I,
+					selectedText: ae()
 				});
 				return;
 			}
-			h.open(Yn, {
+			v.open(Zn, {
 				title: "Insert image",
 				size: "s"
 			}).result.then((e) => {
 				let t = e;
-				t?.url && F(t);
+				t?.url && I(t);
 			});
 		}
-		function R() {
+		function se() {
 			if (e.readonly) return;
 			let t = r();
 			t && t.action((e) => {
-				let t = e.get(I), { state: n } = t, r = n.tr, { from: i, to: a, empty: o } = n.selection;
+				let t = e.get(F), { 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(P).call(Te.key);
+				}), t.dispatch(r), e.get(P).call(De.key);
 			});
 		}
-		function z() {
+		function R() {
 			if (e.readonly) return;
 			let t = r();
 			t && t.action((e) => {
-				let n = e.get(I), { $from: r } = n.state.selection;
+				let n = e.get(F), { $from: r } = n.state.selection;
 				for (let e = r.depth; e > 0; e--) {
 					let t = r.node(e);
 					if (t.type.name === "list_item") {
@@ -1958,9 +1967,9 @@ var tr = [
 						return;
 					}
 				}
-				e.get(P).call(De.key), queueMicrotask(() => {
+				e.get(P).call(ke.key), queueMicrotask(() => {
 					t.action((e) => {
-						let t = e.get(I), { $from: n } = t.state.selection;
+						let t = e.get(F), { $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;
@@ -1969,11 +1978,11 @@ var tr = [
 				});
 			});
 		}
-		function B() {
+		function z() {
 			let e = r();
 			if (e) try {
 				e.action((e) => {
-					let t = e.get(I).state, { from: n, to: r, empty: i, $from: a } = t.selection, o = t.storedMarks, s = { ...d }, c = (e) => {
+					let t = e.get(F).state, { from: n, to: r, empty: i, $from: a } = t.selection, o = t.storedMarks, s = { ...h }, c = (e) => {
 						let s = t.schema.marks[e];
 						if (!s) return !1;
 						if (i) {
@@ -2012,35 +2021,35 @@ var tr = [
 							(e === "left" || e === "center" || e === "right") && (s.cell_alignment = e);
 						} else n === "code_block" ? s.code_block = !0 : n === "list_item" && (s.list_item_depth += 1, t.attrs.checked != null && (s.task_list = !0));
 					}
-					b.value = s;
+					S.value = s;
 				});
 			} catch {
-				b.value = { ...d };
+				S.value = { ...h };
 			}
 		}
-		function ae(t) {
+		function le(t) {
 			if (e.readonly) return;
 			let n = t.target, i = n.closest("li[data-item-type=\"task\"]");
 			if (i) {
 				let e = i.getBoundingClientRect();
 				if (t.clientX - e.left < 18) {
-					t.preventDefault(), oe(i);
+					t.preventDefault(), B(i);
 					return;
 				}
 			}
 			if (n.closest(".ProseMirror")) return;
 			let a = r();
 			a && (t.preventDefault(), a.action((e) => {
-				let t = e.get(I);
+				let t = e.get(F);
 				t.focus();
-				let n = t.state.tr.setSelection(je.atEnd(t.state.doc));
+				let n = t.state.tr.setSelection(Ne.atEnd(t.state.doc));
 				t.dispatch(n);
 			}));
 		}
-		function oe(e) {
+		function B(e) {
 			let t = r();
 			t && t.action((t) => {
-				let n = t.get(I), r = n.posAtDOM(e, 0);
+				let n = t.get(F), r = n.posAtDOM(e, 0);
 				if (r < 0) return;
 				let i = n.state.doc.resolve(r);
 				for (let e = i.depth; e >= 0; e--) {
@@ -2053,13 +2062,13 @@ var tr = [
 				}
 			});
 		}
-		function V() {
+		function ue() {
 			let e = r();
 			if (!e) return "text";
 			try {
 				let t = "text";
 				return e.action((e) => {
-					let { $from: n } = e.get(I).state.selection;
+					let { $from: n } = e.get(F).state.selection;
 					for (let e = n.depth; e > 0; e--) if (n.node(e).type.name === "table") {
 						t = "table";
 						break;
@@ -2069,78 +2078,87 @@ var tr = [
 				return "text";
 			}
 		}
-		function se(e) {
+		function de(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), c.value = {
+			t = Math.max(108, Math.min(t, window.innerWidth - 108)), n < 50 && (n = e.bottom + 8), l.value = {
 				left: `${t}px`,
 				top: `${n}px`
 			};
 		}
-		function U() {
-			if (e.readonly || e.toolbarMode === "fixed") {
-				o.value = !1;
+		function fe() {
+			if (e.readonly || e.toolbarMode === "fixed" || e.toolbarMode === "external") {
+				s.value = !1;
 				return;
 			}
 			let t = window.getSelection();
 			if (!t || t.isCollapsed || !t.rangeCount) {
-				o.value = !1, u.value = !1;
+				s.value = !1, d.value = !1;
 				return;
 			}
-			let n = t.getRangeAt(0), r = i.value?.querySelector(".coar-md-area .milkdown");
+			let n = t.getRangeAt(0), r = a.value?.querySelector(".coar-md-area .milkdown");
 			if (!r || !r.contains(n.commonAncestorContainer)) {
-				o.value = !1, u.value = !1;
+				s.value = !1, d.value = !1;
 				return;
 			}
-			se(n.getBoundingClientRect()), l.value = V(), o.value = !0, u.value = !1;
+			de(n.getBoundingClientRect()), u.value = ue(), s.value = !0, d.value = !1;
 		}
-		function W(e) {
-			let t = e.target;
-			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)) && (o.value = !1, u.value = !1);
+		function W(t) {
+			let n = t.target;
+			n.closest(".coar-md-floating-toolbar") || n.closest(".coar-md-float-submenu") || n.closest(".coar-md-external-toolbar") || n.closest(".coar-md-color-picker") || n.closest(".coar-overlay-outlet") || (!a.value || !a.value.contains(n)) && (s.value = !1, d.value = !1, i?.deactivate(e.editorGroupId));
 		}
-		let K = null;
-		function de(e = 20) {
+		let G = null;
+		function ge(e = 20) {
 			let t = r();
 			if (!t) {
-				e > 0 && setTimeout(() => de(e - 1), 50);
+				e > 0 && setTimeout(() => ge(e - 1), 50);
 				return;
 			}
 			try {
 				t.action((e) => {
-					let t = e.get(yt);
-					K = () => queueMicrotask(B), t.selectionUpdated(K);
+					let t = e.get(xt);
+					G = () => queueMicrotask(z), t.selectionUpdated(G);
 				});
 			} catch {
-				e > 0 && setTimeout(() => de(e - 1), 50);
+				e > 0 && setTimeout(() => ge(e - 1), 50);
 			}
 		}
-		function pe() {
-			if (!K) return;
+		function ye() {
+			if (!G) return;
 			let e = r();
 			if (e) {
 				try {
 					e.action((e) => {
-						let t = e.get(yt).listeners.selectionUpdated, n = t.indexOf(K);
+						let t = e.get(xt).listeners.selectionUpdated, n = t.indexOf(G);
 						n >= 0 && t.splice(n, 1);
 					});
 				} catch {}
-				K = null;
+				G = null;
 			}
 		}
+		let K, be = !1;
+		function xe(t) {
+			K?.(), K = void 0, t === "external" && (K = i?.register({
+				id: e.editorGroupId,
+				render: () => Te()
+			}));
+		}
 		_(() => {
-			document.addEventListener("selectionchange", U), document.addEventListener("mousedown", W, !0), de();
+			be = !0, document.addEventListener("selectionchange", fe), document.addEventListener("mousedown", W, !0), ge(), xe(e.toolbarMode);
+		}), k(() => e.toolbarMode, (e) => {
+			be && xe(e);
 		}), ee(() => {
-			document.removeEventListener("selectionchange", U), document.removeEventListener("mousedown", W, !0), pe(), A();
+			be = !1, document.removeEventListener("selectionchange", fe), document.removeEventListener("mousedown", W, !0), ye(), K?.(), M();
 		});
 		function q(e, t, n, r = {}) {
-			return f(G, {
+			return f(U, {
 				icon: e,
 				label: t,
 				active: r.active ?? !1,
 				disabled: r.disabled ?? !1,
-				onClick: r.disabled ? () => {} : r.onClick ?? (() => x(n))
+				onClick: r.disabled ? () => {} : r.onClick ?? (() => C(n))
 			});
 		}
-		let ge = [
+		let we = [
 			"bold",
 			"italic",
 			"strikethrough",
@@ -2167,101 +2185,101 @@ var tr = [
 			"undo",
 			"redo"
 		];
-		function _e() {
-			let t = b.value, n = t.heading != null, r = E.value;
+		function Te() {
+			let t = S.value, n = t.heading != null, r = ne.value;
 			function i(e) {
-				e.length !== 0 && e[e.length - 1]?.type !== le && e.push(f(le));
+				e.length !== 0 && e[e.length - 1]?.type !== H && e.push(f(H));
 			}
 			function a(e) {
-				if (!kt(e, r)) return [];
+				if (!jt(e, r)) return [];
 				switch (e) {
 					case "bold": return [q("bold", "Bold", $.bold, { active: t.strong })];
 					case "italic": return [q("italic", "Italic", $.italic, { active: t.emphasis })];
 					case "strikethrough": return [q("strikethrough", "Strikethrough", $.strike, { active: t.strike_through })];
 					case "inlineCode": return [q("code", "Inline Code", $.code, { active: t.inlineCode })];
-					case "textColor": return [f(G, {
+					case "textColor": return [f(U, {
 						icon: "palette",
 						label: "Text Color",
 						active: t.text_color !== null,
 						onClick: (e) => {
-							k(e.currentTarget ?? e.target);
+							j(e.currentTarget ?? e.target);
 						}
 					})];
-					case "headings": return [f(ue, {
+					case "headings": return [f(me, {
 						icon: "hash",
 						label: n ? `Heading ${t.heading}` : "Headings",
 						mode: "flyout",
 						openOnHover: !0
 					}, { default: () => [
-						f(G, {
+						f(U, {
 							icon: "pilcrow",
 							label: "Paragraph",
 							active: !n,
-							onClick: () => x($.paragraph)
+							onClick: () => C($.paragraph)
 						}),
-						f(G, {
+						f(U, {
 							icon: "heading",
 							label: "Heading 1",
 							active: t.heading === 1,
-							onClick: () => x($.h1)
+							onClick: () => C($.h1)
 						}),
-						f(G, {
+						f(U, {
 							icon: "heading",
 							label: "Heading 2",
 							active: t.heading === 2,
-							onClick: () => x($.h2)
+							onClick: () => C($.h2)
 						}),
-						f(G, {
+						f(U, {
 							icon: "heading",
 							label: "Heading 3",
 							active: t.heading === 3,
-							onClick: () => x($.h3)
+							onClick: () => C($.h3)
 						}),
-						f(G, {
+						f(U, {
 							icon: "heading",
 							label: "Heading 4",
 							active: t.heading === 4,
-							onClick: () => x($.h4)
+							onClick: () => C($.h4)
 						}),
-						f(G, {
+						f(U, {
 							icon: "heading",
 							label: "Heading 5",
 							active: t.heading === 5,
-							onClick: () => x($.h5)
+							onClick: () => C($.h5)
 						}),
-						f(G, {
+						f(U, {
 							icon: "heading",
 							label: "Heading 6",
 							active: t.heading === 6,
-							onClick: () => x($.h6)
+							onClick: () => C($.h6)
 						})
 					] })];
 					case "bulletList": return [q("list", "Bullet List", $.bulletList, {
 						active: t.bullet_list,
-						onClick: () => w("bullet_list")
+						onClick: () => E("bullet_list")
 					})];
 					case "orderedList": return [q("list-ordered", "Ordered List", $.orderedList, {
 						active: t.ordered_list,
-						onClick: () => w("ordered_list")
+						onClick: () => E("ordered_list")
 					})];
 					case "taskList": return [q("clipboard-check", "Task List", $.bulletList, {
 						active: t.task_list,
-						onClick: z
+						onClick: R
 					})];
 					case "outdent": return [q("indent-decrease", "Outdent", $.outdent, { disabled: t.list_item_depth < 2 })];
 					case "indent": return [q("indent-increase", "Indent", $.indent, { disabled: t.list_item_depth < 1 })];
 					case "blockquote": return [q("text-quote", "Blockquote", $.blockquote, { active: t.blockquote })];
 					case "horizontalRule": return [q("minus", "Horizontal Rule", $.hr)];
 					case "codeBlock": return [q("square-code", "Code Block", $.codeBlock, { active: t.code_block })];
-					case "table": return [f(G, {
+					case "table": return [f(U, {
 						icon: "table",
 						label: "Insert Table",
 						active: t.table,
 						onClick: (e) => {
-							M(e.currentTarget ?? e.target);
+							re(e.currentTarget ?? e.target);
 						}
 					})];
-					case "image": return [q("image", "Insert Image", $.bold, { onClick: ne })];
+					case "image": return [q("image", "Insert Image", $.bold, { onClick: oe })];
 					case "tableOps": return t.table ? [
 						q("table-row-plus-above", "Insert Row Above", $.addRowBefore),
 						q("table-row-plus-below", "Insert Row Below", $.addRowAfter),
@@ -2269,20 +2287,20 @@ var tr = [
 						q("table-column-plus-right", "Insert Column Right", $.addColAfter),
 						q("align-left", "Align Left", $.deleteCell, {
 							active: t.cell_alignment === "left",
-							onClick: () => S("left")
+							onClick: () => w("left")
 						}),
 						q("align-center", "Align Center", $.deleteCell, {
 							active: t.cell_alignment === "center",
-							onClick: () => S("center")
+							onClick: () => w("center")
 						}),
 						q("align-right", "Align Right", $.deleteCell, {
 							active: t.cell_alignment === "right",
-							onClick: () => S("right")
+							onClick: () => w("right")
 						}),
 						q("trash-2", "Delete Cell", $.deleteCell),
-						q("table", "Delete Table", $.deleteCell, { onClick: C })
+						q("table", "Delete Table", $.deleteCell, { onClick: T })
 					] : [];
-					case "clearFormatting": return [q("eraser", "Clear Formatting", $.bold, { onClick: R })];
+					case "clearFormatting": return [q("eraser", "Clear Formatting", $.bold, { onClick: se })];
 					case "undo": return [q("undo-2", "Undo", $.undo)];
 					case "redo": return [q("redo-2", "Redo", $.redo)];
 					default: return [];
@@ -2291,7 +2309,7 @@ var tr = [
 			function o(t) {
 				if (!r.embeds) return [];
 				let n = e.embeds?.[t];
-				return n?.insert ? [f(G, {
+				return n?.insert ? [f(U, {
 					icon: n.insert.icon ?? "layout-grid",
 					label: n.insert.label ?? t,
 					onClick: () => {
@@ -2303,7 +2321,7 @@ var tr = [
 				if (typeof e == "string") return e === "divider" ? [] : e.startsWith("embed:") ? o(e.slice(6)) : a(e);
 				if (e && typeof e == "object" && Array.isArray(e.flyout)) {
 					let t = e.flyout.flatMap((e) => s(e));
-					return t.length === 0 ? [] : [f(ue, {
+					return t.length === 0 ? [] : [f(me, {
 						icon: e.icon ?? "plus",
 						label: e.label ?? "",
 						mode: "flyout",
@@ -2315,15 +2333,15 @@ var tr = [
 			let c = [];
 			if (e.sourceToggle) {
 				let t = e.viewMode === "source";
-				if (c.push(f(G, {
+				if (c.push(f(U, {
 					icon: t ? "eye" : "code",
 					label: t ? "Rendered" : "Source",
 					active: t,
 					onClick: () => e.onToggleView?.(t ? "rendered" : "source")
-				})), t) return ve(c);
+				})), t) return Ee(c);
 				i(c);
 			}
-			let l = e.tools ?? ge;
+			let l = e.tools ?? we;
 			for (let e of l) {
 				if (e === "divider") {
 					i(c);
@@ -2331,22 +2349,22 @@ var tr = [
 				}
 				for (let t of s(e)) c.push(t);
 			}
-			return c[c.length - 1]?.type === le && c.pop(), ve(c);
+			return c[c.length - 1]?.type === H && c.pop(), Ee(c);
 		}
-		function ve(t) {
+		function Ee(t) {
 			return f("div", {
 				key: "sidebar",
-				class: "coar-md-sidebar-wrap",
+				class: ["coar-md-sidebar-wrap", { "coar-md-sidebar-wrap--external": e.toolbarMode === "external" }],
 				onMousedown: (e) => e.preventDefault()
-			}, [f(ce, {
+			}, [f(pe, {
 				collapsed: !0,
-				side: e.toolbarPosition,
+				side: e.toolbarMode === "external" ? i?.position.value ?? e.toolbarPosition : e.toolbarPosition,
 				size: "s",
 				variant: "primary",
 				borderless: !0
 			}, { default: () => t })]);
 		}
-		function xe() {
+		function Oe() {
 			let e = (e, t, n, r = {}) => f("button", {
 				class: [
 					"coar-md-float-btn",
@@ -2357,20 +2375,20 @@ var tr = [
 				type: "button",
 				disabled: r.disabled ?? !1,
 				onMousedown: (e) => {
-					e.preventDefault(), !r.disabled && (r.onClick ?? (() => x(n)))();
+					e.preventDefault(), !r.disabled && (r.onClick ?? (() => C(n)))();
 				}
-			}, [f(H, {
+			}, [f(V, {
 				name: e,
 				size: "s"
-			})]), n = () => f("div", { class: "coar-md-float-sep" }), r = b.value;
+			})]), n = () => f("div", { class: "coar-md-float-sep" }), r = S.value;
 			function i(e, t, n) {
-				D(t) && e.push(n);
+				O(t) && e.push(n);
 			}
 			function a(e) {
 				e.length !== 0 && e[e.length - 1]?.props?.class !== "coar-md-float-sep" && e.push(n());
 			}
 			let o = [];
-			if (i(o, "bold", e("bold", "Bold", $.bold, { isActive: r.strong })), i(o, "italic", e("italic", "Italic", $.italic, { isActive: r.emphasis })), i(o, "strikethrough", e("strikethrough", "Strikethrough", $.strike, { isActive: r.strike_through })), i(o, "inlineCode", e("code", "Inline Code", $.code, { isActive: r.inlineCode })), D("textColor")) {
+			if (i(o, "bold", e("bold", "Bold", $.bold, { isActive: r.strong })), i(o, "italic", e("italic", "Italic", $.italic, { isActive: r.emphasis })), i(o, "strikethrough", e("strikethrough", "Strikethrough", $.strike, { isActive: r.strike_through })), i(o, "inlineCode", e("code", "Inline Code", $.code, { isActive: r.inlineCode })), O("textColor")) {
 				let e = r.text_color !== null;
 				o.push(f("button", {
 					class: ["coar-md-float-btn", e ? "coar-md-float-btn--active" : ""],
@@ -2378,24 +2396,24 @@ var tr = [
 					title: e ? `Text Color (${r.text_color})` : "Text Color",
 					style: e ? `--coar-md-color-indicator: ${r.text_color};` : void 0,
 					onMousedown: (e) => {
-						e.preventDefault(), k(e.currentTarget);
+						e.preventDefault(), j(e.currentTarget);
 					}
-				}, [f(H, {
+				}, [f(V, {
 					name: "palette",
 					size: "s"
 				})]));
 			}
-			D("headings") && (a(o), o.push(f("div", { class: "coar-md-float-dropdown" }, [f("button", {
-				class: ["coar-md-float-btn", u.value || r.heading != null ? "coar-md-float-btn--active" : ""],
+			O("headings") && (a(o), o.push(f("div", { class: "coar-md-float-dropdown" }, [f("button", {
+				class: ["coar-md-float-btn", d.value || r.heading != null ? "coar-md-float-btn--active" : ""],
 				title: r.heading == null ? "Headings" : `Heading ${r.heading}`,
 				type: "button",
 				onMousedown: (e) => {
-					e.preventDefault(), u.value = !u.value;
+					e.preventDefault(), d.value = !d.value;
 				}
-			}, [f(H, {
+			}, [f(V, {
 				name: "heading",
 				size: "s"
-			})]), u.value ? f("div", { class: "coar-md-float-submenu" }, [
+			})]), d.value ? f("div", { class: "coar-md-float-submenu" }, [
 				{
 					label: "Paragraph",
 					cmd: $.paragraph,
@@ -2442,24 +2460,24 @@ var tr = [
 				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(), x(t), u.value = !1;
+					e.preventDefault(), C(t), d.value = !1;
 				}
-			}, [f(H, {
+			}, [f(V, {
 				name: n,
 				size: "xs"
 			}), f("span", null, e)]))) : null]))), a(o), i(o, "bulletList", e("list", "Bullet List", $.bulletList, {
 				isActive: r.bullet_list,
-				onClick: () => w("bullet_list")
+				onClick: () => E("bullet_list")
 			})), i(o, "orderedList", e("list-ordered", "Ordered List", $.orderedList, {
 				isActive: r.ordered_list,
-				onClick: () => w("ordered_list")
+				onClick: () => E("ordered_list")
 			})), i(o, "taskList", e("clipboard-check", "Task List", $.bulletList, {
 				isActive: r.task_list,
-				onClick: z
-			})), i(o, "outdent", e("indent-decrease", "Outdent", $.outdent, { disabled: r.list_item_depth < 2 })), i(o, "indent", e("indent-increase", "Indent", $.indent, { disabled: r.list_item_depth < 1 })), a(o), i(o, "blockquote", e("text-quote", "Blockquote", $.blockquote, { isActive: r.blockquote })), D("clearFormatting") && (a(o), o.push(e("eraser", "Clear Formatting", $.bold, { onClick: R }))), o[o.length - 1]?.props?.class === "coar-md-float-sep" && o.pop();
+				onClick: R
+			})), i(o, "outdent", e("indent-decrease", "Outdent", $.outdent, { disabled: r.list_item_depth < 2 })), i(o, "indent", e("indent-increase", "Indent", $.indent, { disabled: r.list_item_depth < 1 })), a(o), i(o, "blockquote", e("text-quote", "Blockquote", $.blockquote, { isActive: r.blockquote })), O("clearFormatting") && (a(o), o.push(e("eraser", "Clear Formatting", $.bold, { onClick: se }))), o[o.length - 1]?.props?.class === "coar-md-float-sep" && o.pop();
 			let s = {
 				text: o,
-				table: D("tableOps") ? [
+				table: O("tableOps") ? [
 					e("table-row-plus-above", "Insert Row Above", $.addRowBefore),
 					e("table-row-plus-below", "Insert Row Below", $.addRowAfter),
 					n(),
@@ -2468,31 +2486,31 @@ var tr = [
 					n(),
 					e("align-left", "Align Left", $.deleteCell, {
 						isActive: r.cell_alignment === "left",
-						onClick: () => S("left")
+						onClick: () => w("left")
 					}),
 					e("align-center", "Align Center", $.deleteCell, {
 						isActive: r.cell_alignment === "center",
-						onClick: () => S("center")
+						onClick: () => w("center")
 					}),
 					e("align-right", "Align Right", $.deleteCell, {
 						isActive: r.cell_alignment === "right",
-						onClick: () => S("right")
+						onClick: () => w("right")
 					}),
 					n(),
 					e("trash-2", "Delete Cell", $.deleteCell),
-					e("table", "Delete Table", $.deleteCell, { onClick: C }),
-					...D("bold") || D("italic") || D("inlineCode") ? [n()] : [],
-					...D("bold") ? [e("bold", "Bold", $.bold)] : [],
-					...D("italic") ? [e("italic", "Italic", $.italic)] : [],
-					...D("inlineCode") ? [e("code", "Code", $.code)] : []
+					e("table", "Delete Table", $.deleteCell, { onClick: T }),
+					...O("bold") || O("italic") || O("inlineCode") ? [n()] : [],
+					...O("bold") ? [e("bold", "Bold", $.bold)] : [],
+					...O("italic") ? [e("italic", "Italic", $.italic)] : [],
+					...O("inlineCode") ? [e("code", "Code", $.code)] : []
 				] : o,
-				"col-selection": D("tableOps") ? [
+				"col-selection": O("tableOps") ? [
 					e("table-column-plus-left", "Insert Column Left", $.addColBefore),
 					e("table-column-plus-right", "Insert Column Right", $.addColAfter),
 					n(),
 					e("trash-2", "Delete Column", $.deleteCell)
 				] : o,
-				"row-selection": D("tableOps") ? [
+				"row-selection": O("tableOps") ? [
 					e("table-row-plus-above", "Insert Row Above", $.addRowBefore),
 					e("table-row-plus-below", "Insert Row Below", $.addRowAfter),
 					n(),
@@ -2501,33 +2519,33 @@ var tr = [
 			};
 			return f(t, { to: "body" }, f("div", {
 				class: "coar-md-floating-toolbar",
-				style: `left:${c.value.left};top:${c.value.top};`
-			}, s[l.value] || o));
+				style: `left:${l.value.left};top:${l.value.top};`
+			}, s[u.value] || o));
 		}
 		return () => {
-			let t = e.toolbarMode === "fixed" || e.toolbarMode === "both", n = e.sourceToggle && e.viewMode === "source", r = !e.readonly && !n && (e.toolbarMode === "floating" || e.toolbarMode === "both"), c = [], l = e.toolbarPosition === "left" || e.toolbarPosition === "top", u = e.toolbarPosition === "right" || e.toolbarPosition === "bottom";
-			t && l && c.push(_e());
-			let d = e.isEmpty && e.placeholder.length > 0 && !n;
-			return c.push(f("div", {
+			let t = e.toolbarMode === "fixed" || e.toolbarMode === "both", n = e.sourceToggle && e.viewMode === "source", r = !e.readonly && !n && (e.toolbarMode === "floating" || e.toolbarMode === "both"), l = [], u = e.toolbarPosition === "left" || e.toolbarPosition === "top", d = e.toolbarPosition === "right" || e.toolbarPosition === "bottom";
+			t && u && l.push(Te());
+			let p = e.isEmpty && e.placeholder.length > 0 && !n;
+			return l.push(f("div", {
 				key: "area",
-				ref: a,
+				ref: o,
 				class: [
 					"coar-md-area",
 					"coar-markdown",
 					{ "coar-md-area--source": n }
 				],
-				onMousedown: n ? void 0 : ae
+				onMousedown: n ? void 0 : le
 			}, [
-				f(re),
-				d ? f(Jt, {
+				f(L),
+				p ? f(Xt, {
 					key: "placeholder",
 					source: e.placeholder
 				}) : null,
-				!e.readonly && !n && E.value.gfm ? f(Gn, {
+				!e.readonly && !n && ne.value.gfm ? f(qn, {
 					key: "table-handles",
-					area: a.value,
+					area: o.value,
 					onMenuToggle: (e) => {
-						s.value = e;
+						c.value = e;
 					}
 				}) : null,
 				n ? f("textarea", {
@@ -2540,7 +2558,7 @@ var tr = [
 					placeholder: e.placeholder || void 0,
 					onInput: (t) => e.onSourceInput?.(t.target.value)
 				}) : null,
-				e.sourceToggle && !t ? f("button", {
+				e.sourceToggle && e.toolbarMode !== "fixed" && e.toolbarMode !== "both" && e.toolbarMode !== "external" ? f("button", {
 					key: "source-corner",
 					class: "coar-md-source-corner",
 					type: "button",
@@ -2549,11 +2567,11 @@ var tr = [
 					onMousedown: (t) => {
 						t.preventDefault(), e.onToggleView?.(n ? "rendered" : "source");
 					}
-				}, [f(H, {
+				}, [f(V, {
 					name: n ? "eye" : "code",
 					size: "s"
 				})]) : null
-			])), t && u && c.push(_e()), o.value && r && !s.value && c.push(xe()), f("div", {
+			])), t && d && l.push(Te()), s.value && r && !c.value && l.push(Oe()), f("div", {
 				class: {
 					"coar-md-root": !0,
 					[`coar-md-root--toolbar-${e.toolbarPosition}`]: !0,
@@ -2561,18 +2579,24 @@ var tr = [
 					"coar-md-root--readonly": e.readonly && !e.disabled,
 					"coar-md-root--error": e.hasError
 				},
-				ref: i,
+				ref: a,
 				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
-			}, c);
+				"data-name": e.name,
+				onMousedown: () => i?.activate(e.editorGroupId),
+				onFocusin: () => i?.activate(e.editorGroupId),
+				onFocusout: (t) => {
+					let n = t.relatedTarget;
+					n instanceof Node && a.value?.contains(n) || i?.deactivate(e.editorGroupId);
+				}
+			}, l);
 		};
 	}
-}), ir = u({
+}), sr = u({
 	name: "CoarMarkdownEditor",
 	props: {
 		modelValue: {
@@ -2643,32 +2667,91 @@ var tr = [
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
 		let r = e.modelValue, i = te({ value: e.modelValue });
-		O(() => e.modelValue, (e) => {
+		k(() => e.modelValue, (e) => {
 			i.value = { value: e };
 		});
-		let a = p(de, void 0), o = `coar-markdown-editor-${w()}`, s = n(() => e.id || a?.inputId.value || o), c = n(() => e.error || (a?.hasError.value ?? !1)), l = n(() => a?.messageId.value), u = n(() => e.disabled || (a?.disabled.value ?? !1)), d = n(() => e.readonly || u.value);
-		return () => f(R, null, () => f(nr, {
+		let a = p(G, void 0), o = `coar-markdown-editor-${E()}`, s = `coar-markdown-editor-group-member-${E()}`, c = n(() => e.id || a?.inputId.value || o), l = n(() => e.error || (a?.hasError.value ?? !1)), u = n(() => a?.messageId.value), d = n(() => e.disabled || (a?.disabled.value ?? !1)), m = n(() => e.readonly || d.value);
+		return () => f(oe, null, () => f(ar, {
 			initialValue: r,
 			externalValue: i.value,
-			readonly: d.value,
-			disabled: u.value,
+			readonly: m.value,
+			disabled: d.value,
 			sourceToggle: e.sourceToggle,
 			toolbarMode: e.toolbarMode,
 			toolbarPosition: e.toolbarPosition,
 			tools: e.tools,
 			flavor: e.flavor,
-			inputId: s.value,
-			hasError: c.value,
-			describedBy: l.value,
+			inputId: c.value,
+			hasError: l.value,
+			describedBy: u.value,
 			name: e.name,
 			required: e.required,
 			placeholder: e.placeholder,
 			uploadImage: e.uploadImage,
 			pickImage: e.pickImage,
 			embeds: e.embeds,
+			editorGroupId: s,
 			onMarkdownChange: (e) => t("update:modelValue", e)
 		}));
 	}
+}), cr = /* @__PURE__ */ u({
+	__name: "CoarMarkdownEditorGroup",
+	setup(e) {
+		let t = b("top"), n = b(null), r = te(null), i = [];
+		function a(e) {
+			let t = i.find((t) => t.id === e);
+			t && (n.value = e, r.value = t);
+		}
+		function o(e) {
+			n.value === e && (n.value = null);
+		}
+		function s(e) {
+			return i.some((t) => t.id === e.id) || i.push(e), r.value === null && (r.value = e), () => {
+				let t = i.findIndex((t) => t.id === e.id);
+				t >= 0 && i.splice(t, 1), n.value === e.id && (n.value = null), r.value?.id === e.id && (r.value = i[0] ?? null);
+			};
+		}
+		return y(rr, {
+			position: t,
+			activeId: n,
+			activeController: r,
+			register: s,
+			activate: a,
+			deactivate: o
+		}), (e, t) => C(e.$slots, "default");
+	}
+}), lr = u({
+	name: "CoarMarkdownToolbar",
+	props: {
+		position: {
+			type: String,
+			default: "top"
+		},
+		label: {
+			type: String,
+			default: "Markdown formatting"
+		}
+	},
+	setup(e) {
+		let t = p(rr, void 0);
+		return k(() => e.position, (e) => {
+			t && (t.position.value = e);
+		}, { immediate: !0 }), () => {
+			let n = t?.activeController.value?.render(), r = t?.activeId.value == null;
+			return f("div", {
+				class: [
+					"coar-md-external-toolbar",
+					`coar-md-external-toolbar--${e.position}`,
+					{ "coar-md-external-toolbar--disabled": r }
+				],
+				role: "toolbar",
+				"aria-label": e.label,
+				"aria-disabled": r ? "true" : void 0,
+				inert: r ? "" : void 0,
+				"data-active-editor": t?.activeId.value ?? void 0
+			}, n == null ? [] : [n]);
+		};
+	}
 });
 //#endregion
-export { tr as COAR_MARKDOWN_EDITOR_ALL_TOOLS, ir as CoarMarkdownEditor, Je as EmbedRenderer, Xe as MARKDOWN_EMBEDS_KEY, Nt as resolveCapabilities, Ze as resolveEmbed };
+export { ir as COAR_MARKDOWN_EDITOR_ALL_TOOLS, sr as CoarMarkdownEditor, cr as CoarMarkdownEditorGroup, lr as CoarMarkdownToolbar, Xe as EmbedRenderer, Qe as MARKDOWN_EMBEDS_KEY, Ft as resolveCapabilities, $e as resolveEmbed };