@cocoar/vue-markdown-editor 2.7.0 → 2.8.0

package/dist/index.js

@@ -1,26 +1,39 @@
-import { Fragment as e, Teleport as t, computed as n, createApp as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, h as u, inject as d, markRaw as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as ee, onMounted as te, openBlock as h, ref as g, renderList as _, shallowRef as ne, unref as v, useId as y, useTemplateRef as b, vModelText as x, vShow as S, watch as C, withDirectives as w, withModifiers as T } from "vue";
-import { Editor as E, commandsCtx as D, defaultValueCtx as O, editorViewCtx as k, editorViewOptionsCtx as A, rootCtx as j } from "@milkdown/core";
-import { Milkdown as re, MilkdownProvider as M, useEditor as N, useInstance as P } from "@milkdown/vue";
-import { CoarCodeBlock as F, CoarIcon as I, CoarSelect as L, CoarSidebar as ie, CoarSidebarDivider as R, CoarSidebarGroup as ae, CoarSidebarItem as z, FORM_FIELD_INJECTION_KEY as B, menuPreset as oe, useOverlay as se } from "@cocoar/vue-ui";
-import { codeBlockSchema as V, commonmark as ce, createCodeBlockCommand as le, insertHrCommand as ue, liftListItemCommand as H, sinkListItemCommand as de, toggleEmphasisCommand as fe, toggleInlineCodeCommand as pe, toggleStrongCommand as me, turnIntoTextCommand as U, wrapInBlockquoteCommand as he, wrapInBulletListCommand as W, wrapInHeadingCommand as G, wrapInOrderedListCommand as ge } from "@milkdown/preset-commonmark";
-import { Plugin as _e, TextSelection as K } from "@milkdown/prose/state";
-import { $markSchema as ve, $prose as ye, $remark as be, $view as xe, replaceAll as q } from "@milkdown/utils";
-import { isColorSpanClose as Se, parseColorSpanOpen as J, sanitizeColor as Y, serializeColorSpanClose as Ce, serializeColorSpanOpen as we } from "@cocoar/vue-markdown-core";
-import { addColAfterCommand as Te, addColBeforeCommand as Ee, addRowAfterCommand as De, addRowBeforeCommand as Oe, deleteSelectedCellsCommand as ke, gfm as Ae, insertTableCommand as je, toggleStrikethroughCommand as Me } from "@milkdown/preset-gfm";
-import { history as Ne, redoCommand as Pe, undoCommand as Fe } from "@milkdown/plugin-history";
-import { clipboard as Ie } from "@milkdown/plugin-clipboard";
-import { listener as Le, listenerCtx as X } from "@milkdown/plugin-listener";
+import { Fragment as e, Teleport as t, computed as n, createApp as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, h as u, inject as d, markRaw as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as h, onMounted as g, openBlock as _, ref as v, renderList as y, shallowRef as b, unref as x, useId as ee, useTemplateRef as te, vModelText as S, vShow as C, watch as w, withDirectives as T, withModifiers as E } from "vue";
+import { Editor as ne, commandsCtx as D, defaultValueCtx as re, editorViewCtx as O, editorViewOptionsCtx as k, rootCtx as A } from "@milkdown/core";
+import { Milkdown as ie, MilkdownProvider as j, useEditor as M, useInstance as ae } from "@milkdown/vue";
+import { CoarCodeBlock as N, CoarIcon as P, CoarSelect as oe, CoarSidebar as se, CoarSidebarDivider as F, CoarSidebarGroup as ce, CoarSidebarItem as I, FORM_FIELD_INJECTION_KEY as L, menuPreset as le, useOverlay as ue } from "@cocoar/vue-ui";
+import { codeBlockSchema as R, commonmark as z, createCodeBlockCommand as de, insertHrCommand as fe, liftListItemCommand as B, sinkListItemCommand as pe, toggleEmphasisCommand as me, toggleInlineCodeCommand as he, toggleStrongCommand as ge, turnIntoTextCommand as _e, wrapInBlockquoteCommand as ve, wrapInBulletListCommand as ye, wrapInHeadingCommand as V, wrapInOrderedListCommand as be } from "@milkdown/preset-commonmark";
+import { Plugin as xe, TextSelection as Se } from "@milkdown/prose/state";
+import { $markSchema as Ce, $nodeSchema as we, $prose as Te, $remark as Ee, $view as De, replaceAll as H } from "@milkdown/utils";
+import { isColorSpanClose as Oe, parse as ke, parseColorSpanOpen as Ae, parseFrontmatter as je, sanitizeColor as U, serializeColorSpanClose as Me, serializeColorSpanOpen as Ne } from "@cocoar/vue-markdown-core";
+import { CoarMarkdown as Pe } from "@cocoar/vue-markdown";
+import { addColAfterCommand as Fe, addColBeforeCommand as Ie, addRowAfterCommand as Le, addRowBeforeCommand as Re, deleteSelectedCellsCommand as ze, gfm as Be, insertTableCommand as Ve, toggleStrikethroughCommand as He } from "@milkdown/preset-gfm";
+import { history as Ue, redoCommand as We, undoCommand as Ge } from "@milkdown/plugin-history";
+import { clipboard as Ke } from "@milkdown/plugin-clipboard";
+import { listener as qe, listenerCtx as Je } from "@milkdown/plugin-listener";
+//#region \0rolldown/runtime.js
+var Ye = Object.create, Xe = Object.defineProperty, Ze = Object.getOwnPropertyDescriptor, Qe = Object.getOwnPropertyNames, $e = Object.getPrototypeOf, et = Object.prototype.hasOwnProperty, tt = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), nt = (e, t, n, r) => {
+	if (t && typeof t == "object" || typeof t == "function") for (var i = Qe(t), a = 0, o = i.length, s; a < o; a++) s = i[a], !et.call(e, s) && s !== n && Xe(e, s, {
+		get: ((e) => t[e]).bind(null, s),
+		enumerable: !(r = Ze(t, s)) || r.enumerable
+	});
+	return e;
+}, rt = (e, t, n) => (n = e == null ? {} : Ye($e(e)), nt(t || !e || !e.__esModule ? Xe(n, "default", {
+	value: e,
+	enumerable: !0
+}) : n, e));
+//#endregion
 //#region src/toolbar-helpers.ts
-function Re(e, t) {
+function it(e, t) {
 	return t === void 0 ? !0 : "has" in t ? t.has(e) : t.includes(e);
 }
-function ze(e) {
+function at(e) {
 	let { target: t, inBulletList: n, inOrderedList: r } = e;
 	return (t === "bullet_list" ? n : r) ? "lift" : (t === "bullet_list" ? r : n) ? "switch" : "wrap";
 }
 //#endregion
 //#region src/code-block-view/CodeBlockShell.vue?vue&type=script&setup=true&lang.ts
-var Be = { class: "coar-md-code-render" }, Ve = { class: "coar-md-code-edit" }, He = { class: "coar-md-code-lang-row" }, Ue = /* @__PURE__ */ l({
+var ot = { class: "coar-md-code-render" }, st = { class: "coar-md-code-edit" }, ct = { class: "coar-md-code-lang-row" }, lt = /* @__PURE__ */ l({
 	__name: "CodeBlockShell",
 	props: {
 		text: {},
@@ -63,13 +76,13 @@ var Be = { class: "coar-md-code-render" }, Ve = { class: "coar-md-code-edit" },
 				value: "bash",
 				label: "Bash"
 			}
-		], a = b("contentMount");
-		return C([a, () => n.contentDOM], ([e, t]) => {
+		], a = te("contentMount");
+		return w([a, () => n.contentDOM], ([e, t]) => {
 			e && t && t.parentElement !== e && e.appendChild(t);
 		}, {
 			immediate: !0,
 			flush: "post"
-		}), (t, n) => (h(), o("div", { class: p(["coar-md-code-host", { "coar-md-code-host--editing": e.editing }]) }, [w(s("div", Be, [c(v(F), {
+		}), (t, n) => (_(), o("div", { class: p(["coar-md-code-host", { "coar-md-code-host--editing": e.editing }]) }, [T(s("div", ot, [c(x(N), {
 			code: e.text,
 			language: e.language || "text",
 			collapsible: !1,
@@ -78,11 +91,11 @@ var Be = { class: "coar-md-code-render" }, Ve = { class: "coar-md-code-edit" },
 			class: "coar-md-code-edit-btn",
 			type: "button",
 			title: "Edit code block",
-			onMousedown: n[0] ||= T((e) => r("enterEdit"), ["prevent"])
-		}, [c(v(I), {
+			onMousedown: n[0] ||= E((e) => r("enterEdit"), ["prevent"])
+		}, [c(x(P), {
 			name: "pencil",
 			size: "xs"
-		}), n[2] ||= s("span", null, "Edit", -1)], 32)], 512), [[S, !e.editing]]), w(s("div", Ve, [s("div", He, [c(v(L), {
+		}), n[2] ||= s("span", null, "Edit", -1)], 32)], 512), [[C, !e.editing]]), T(s("div", st, [s("div", ct, [c(x(oe), {
 			class: "coar-md-code-lang-select",
 			"model-value": e.language,
 			options: i,
@@ -92,21 +105,21 @@ var Be = { class: "coar-md-code-render" }, Ve = { class: "coar-md-code-edit" },
 			ref_key: "contentMount",
 			ref: a,
 			class: "coar-md-code-content"
-		}, null, 512)], 512), [[S, e.editing]])], 2));
+		}, null, 512)], 512), [[C, e.editing]])], 2));
 	}
-}), Z = /* @__PURE__ */ new Set(), We = class {
+}), W = /* @__PURE__ */ new Set(), ut = class {
 	dom;
 	contentDOM;
 	app;
-	text = g("");
-	language = g("");
-	editing = g(!1);
+	text = v("");
+	language = v("");
+	editing = v(!1);
 	constructor(e, t, n) {
-		this.node = e, this.view = t, this.getPos = n, Z.add(this), this.dom = document.createElement("div"), this.dom.className = "coar-md-code-host-mount";
+		this.node = e, this.view = t, this.getPos = n, W.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: () => () => u(Ue, {
+			setup: () => () => u(lt, {
 				text: this.text.value,
 				language: this.language.value,
 				editing: this.editing.value,
@@ -128,7 +141,7 @@ var Be = { class: "coar-md-code-render" }, Ve = { class: "coar-md-code-edit" },
 		this.editing.value = !1;
 	}
 	destroy() {
-		Z.delete(this), this.app.unmount();
+		W.delete(this), this.app.unmount();
 	}
 	notifySelectionChanged() {
 		let e = this.getPos();
@@ -146,20 +159,20 @@ var Be = { class: "coar-md-code-render" }, Ve = { class: "coar-md-code-edit" },
 		let e = this.getPos();
 		if (e == null) return;
 		let { tr: t } = this.view.state;
-		t.setSelection(K.create(this.view.state.doc, e + 1)), this.view.dispatch(t), this.view.focus();
+		t.setSelection(Se.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));
 	};
-}, Ge = [xe(V.node, () => (e, t, n) => new We(e, t, n)), ye(() => new _e({ view: () => ({ update(e, t) {
-	e.state.selection.eq(t.selection) || Z.forEach((t) => {
+}, dt = [De(R.node, () => (e, t, n) => new ut(e, t, n)), Te(() => new xe({ view: () => ({ update(e, t) {
+	e.state.selection.eq(t.selection) || W.forEach((t) => {
 		t.view === e && t.notifySelectionChanged();
 	});
-} }) }))].flat(), Ke = function() {
+} }) }))].flat(), ft = function() {
 	let e = this.data();
 	return (e.toMarkdownExtensions ??= []).push({ handlers: { colorTextSpan(e, t, n) {
-		let r = Y(e.color ?? "") ?? "";
+		let r = U(e.color ?? "") ?? "";
 		if (r.length === 0) return n.containerPhrasing(e, {
 			before: "",
 			after: ""
@@ -168,45 +181,45 @@ var Be = { class: "coar-md-code-render" }, Ve = { class: "coar-md-code-edit" },
 			before: ">",
 			after: "<"
 		});
-		return `${we(r)}${i}${Ce()}`;
+		return `${Ne(r)}${i}${Me()}`;
 	} } }), (e) => {
 		t(e);
 	};
 	function t(e) {
 		if (Array.isArray(e.children)) {
-			let n = Je(e.children);
+			let n = ht(e.children);
 			e.children = n;
 			for (let e of n) t(e);
 		}
 	}
 };
-function Q(e) {
+function pt(e) {
 	return !!e && e.type === "html" && typeof e.value == "string";
 }
-function qe(e, t) {
+function mt(e, t) {
 	let n = 1;
 	for (let r = t + 1; r < e.length; r++) {
 		let t = e[r];
-		if (Q(t)) {
-			if (J(t.value)) {
+		if (pt(t)) {
+			if (Ae(t.value)) {
 				n++;
 				continue;
 			}
-			if (Se(t.value) && (n--, n === 0)) return r;
+			if (Oe(t.value) && (n--, n === 0)) return r;
 		}
 	}
 	return null;
 }
-function Je(e) {
+function ht(e) {
 	let t = [], n = 0;
 	for (; n < e.length;) {
 		let r = e[n];
-		if (Q(r)) {
-			let i = J(r.value);
+		if (pt(r)) {
+			let i = Ae(r.value);
 			if (i) {
-				let r = qe(e, n);
+				let r = mt(e, n);
 				if (r !== null) {
-					let a = Je(e.slice(n + 1, r)), o = {
+					let a = ht(e.slice(n + 1, r)), o = {
 						type: "colorTextSpan",
 						color: i.color,
 						children: a,
@@ -221,7 +234,7 @@ function Je(e) {
 	}
 	return t;
 }
-var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
+var gt = [Ee("textColor", () => ft), Ce("text_color", () => ({
 	attrs: { color: { default: "" } },
 	inclusive: !0,
 	parseDOM: [{
@@ -234,12 +247,12 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 			if (n.length !== 1) return !1;
 			let r = n[0], i = r.indexOf(":");
 			if (i < 0 || r.slice(0, i).trim().toLowerCase() !== "color") return !1;
-			let a = Y(r.slice(i + 1));
+			let a = U(r.slice(i + 1));
 			return a === null ? !1 : { color: a };
 		}
 	}],
 	toDOM: (e) => {
-		let t = Y(String(e.attrs.color ?? "")) ?? "";
+		let t = U(String(e.attrs.color ?? "")) ?? "";
 		return t.length === 0 ? [
 			"span",
 			{},
@@ -253,7 +266,7 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 	parseMarkdown: {
 		match: (e) => e.type === "colorTextSpan",
 		runner: (e, t, n) => {
-			let r = Y(typeof t.color == "string" ? t.color : typeof t.data?.color == "string" ? t.data.color : "") ?? "";
+			let r = U(typeof t.color == "string" ? t.color : typeof t.data?.color == "string" ? t.data.color : "") ?? "";
 			if (r.length === 0) {
 				e.next(t.children);
 				return;
@@ -264,11 +277,11 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 	toMarkdown: {
 		match: (e) => e.type.name === "text_color",
 		runner: (e, t) => {
-			let n = Y(String(t.attrs.color ?? "")) ?? "";
+			let n = U(String(t.attrs.color ?? "")) ?? "";
 			n.length !== 0 && e.withMark(t, "colorTextSpan", void 0, { color: n });
 		}
 	}
-}))].flat(), Xe = [
+}))].flat(), _t = [
 	{
 		name: "Default",
 		value: ""
@@ -305,23 +318,347 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 		name: "Gray",
 		value: "#6b7280"
 	}
-], Ze = { class: "coar-md-color-grid" }, Qe = [
+], vt = {
+	class: "coar-md-placeholder",
+	"aria-hidden": "true"
+}, yt = /* @__PURE__ */ l({
+	__name: "PlaceholderOverlay",
+	props: { source: {} },
+	setup(e) {
+		let t = e, r = n(() => ke(t.source));
+		return (e, t) => (_(), o("div", vt, [c(x(Pe), { doc: r.value }, null, 8, ["doc"])]));
+	}
+});
+function G(e) {
+	return e !== null && e < -2;
+}
+function K(e) {
+	return e === -2 || e === -1 || e === 32;
+}
+//#endregion
+//#region ../../node_modules/.pnpm/fault@2.0.1/node_modules/fault/index.js
+var bt = /* @__PURE__ */ rt((/* @__PURE__ */ tt(((e, t) => {
+	(function() {
+		var e = t === void 0 ? function() {
+			return this || (0, eval)("this");
+		}() : t.exports = i;
+		e.format = i, e.vsprintf = r, typeof console < "u" && typeof console.log == "function" && (e.printf = n);
+		function n() {
+			console.log(i.apply(null, arguments));
+		}
+		function r(e, t) {
+			return i.apply(null, [e].concat(t));
+		}
+		function i(e) {
+			for (var t = 1, n = [].slice.call(arguments), r = 0, i = e.length, a = "", o, s = !1, c, l, u = !1, d, f = function() {
+				return n[t++];
+			}, p = function() {
+				for (var t = ""; /\d/.test(e[r]);) t += e[r++], o = e[r];
+				return t.length > 0 ? parseInt(t) : null;
+			}; r < i; ++r) if (o = e[r], s) switch (s = !1, o == "." ? (u = !1, o = e[++r]) : o == "0" && e[r + 1] == "." ? (u = !0, r += 2, o = e[r]) : u = !0, d = p(), o) {
+				case "b":
+					a += parseInt(f(), 10).toString(2);
+					break;
+				case "c":
+					c = f(), typeof c == "string" || c instanceof String ? a += c : a += String.fromCharCode(parseInt(c, 10));
+					break;
+				case "d":
+					a += parseInt(f(), 10);
+					break;
+				case "f":
+					l = String(parseFloat(f()).toFixed(d || 6)), a += u ? l : l.replace(/^0/, "");
+					break;
+				case "j":
+					a += JSON.stringify(f());
+					break;
+				case "o":
+					a += "0" + parseInt(f(), 10).toString(8);
+					break;
+				case "s":
+					a += f();
+					break;
+				case "x":
+					a += "0x" + parseInt(f(), 10).toString(16);
+					break;
+				case "X":
+					a += "0x" + parseInt(f(), 10).toString(16).toUpperCase();
+					break;
+				default:
+					a += o;
+					break;
+			}
+			else o === "%" ? s = !0 : a += o;
+			return a;
+		}
+	})();
+})))(), 1), q = Object.assign(J(Error), {
+	eval: J(EvalError),
+	range: J(RangeError),
+	reference: J(ReferenceError),
+	syntax: J(SyntaxError),
+	type: J(TypeError),
+	uri: J(URIError)
+});
+function J(e) {
+	return t.displayName = e.displayName || e.name, t;
+	function t(t, ...n) {
+		return new e(t && (0, bt.default)(t, ...n));
+	}
+}
+//#endregion
+//#region ../../node_modules/.pnpm/micromark-extension-frontmatter@2.0.0/node_modules/micromark-extension-frontmatter/lib/to-matters.js
+var Y = {}.hasOwnProperty, xt = {
+	yaml: "-",
+	toml: "+"
+};
+function X(e) {
+	let t = [], n = -1, r = Array.isArray(e) ? e : e ? [e] : ["yaml"];
+	for (; ++n < r.length;) t[n] = St(r[n]);
+	return t;
+}
+function St(e) {
+	let t = e;
+	if (typeof t == "string") {
+		if (!Y.call(xt, t)) throw q("Missing matter definition for `%s`", t);
+		t = {
+			type: t,
+			marker: xt[t]
+		};
+	} else if (typeof t != "object") throw q("Expected matter to be an object, not `%j`", t);
+	if (!Y.call(t, "type")) throw q("Missing `type` in matter `%j`", t);
+	if (!Y.call(t, "fence") && !Y.call(t, "marker")) throw q("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 Ct(e) {
+	let t = X(e), n = {}, r = -1;
+	for (; ++r < t.length;) {
+		let e = t[r], i = Z(e, "open").charCodeAt(0), a = wt(e), o = n[i];
+		Array.isArray(o) ? o.push(a) : n[i] = [a];
+	}
+	return { flow: n };
+}
+function wt(e) {
+	let t = e.anywhere, n = e.type, r = n + "Fence", i = r + "Sequence", a = n + "Value", o = {
+		tokenize: u,
+		partial: !0
+	}, s, c = 0;
+	return {
+		tokenize: l,
+		concrete: !0
+	};
+	function l(l, u, d) {
+		let f = this;
+		return p;
+		function p(a) {
+			let o = f.now();
+			return o.column === 1 && (o.line === 1 || t) && (s = Z(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), K(e) ? (l.enter("whitespace"), h(e)) : g(e)) : e === s.charCodeAt(c++) ? (l.consume(e), m) : d(e);
+		}
+		function h(e) {
+			return K(e) ? (l.consume(e), h) : (l.exit("whitespace"), g(e));
+		}
+		function g(t) {
+			return G(t) ? (l.exit(r), l.enter("lineEnding"), l.consume(t), l.exit("lineEnding"), s = Z(e, "close"), c = 0, l.attempt(o, b, _)) : d(t);
+		}
+		function _(e) {
+			return e === null || G(e) ? y(e) : (l.enter(a), v(e));
+		}
+		function v(e) {
+			return e === null || G(e) ? (l.exit(a), y(e)) : (l.consume(e), v);
+		}
+		function y(e) {
+			return e === null ? d(e) : (l.enter("lineEnding"), l.consume(e), l.exit("lineEnding"), l.attempt(o, b, _));
+		}
+		function b(e) {
+			return l.exit(n), u(e);
+		}
+	}
+	function u(e, t, n) {
+		let a = 0;
+		return o;
+		function o(t) {
+			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), K(t) ? (e.enter("whitespace"), l(t)) : u(t)) : t === s.charCodeAt(a++) ? (e.consume(t), c) : n(t);
+		}
+		function l(t) {
+			return K(t) ? (e.consume(t), l) : (e.exit("whitespace"), u(t));
+		}
+		function u(i) {
+			return i === null || G(i) ? (e.exit(r), t(i)) : n(i);
+		}
+	}
+}
+function Z(e, t) {
+	return e.marker ? Tt(e.marker, t).repeat(3) : Tt(e.fence, t);
+}
+function Tt(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 Et(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 Dt(e) {
+	let t = X(e), n = {}, r = {}, i = -1;
+	for (; ++i < t.length;) {
+		let e = t[i];
+		n[e.type] = Ot(e), r[e.type] = kt, r[e.type + "Value"] = At;
+	}
+	return {
+		enter: n,
+		exit: r
+	};
+}
+function Ot(e) {
+	return t;
+	function t(t) {
+		this.enter({
+			type: e.type,
+			value: ""
+		}, t), this.buffer();
+	}
+}
+function kt(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 At(e) {
+	this.config.enter.data.call(this, e), this.config.exit.data.call(this, e);
+}
+function jt(e) {
+	let t = [], n = {}, r = X(e), i = -1;
+	for (; ++i < r.length;) {
+		let e = r[i];
+		n[e.type] = Mt(e);
+		let a = Q(e, "open");
+		t.push({
+			atBreak: !0,
+			character: a.charAt(0),
+			after: Et(a.charAt(1))
+		});
+	}
+	return {
+		unsafe: t,
+		handlers: n
+	};
+}
+function Mt(e) {
+	let t = Q(e, "open"), n = Q(e, "close");
+	return r;
+	function r(e) {
+		return t + (e.value ? "\n" + e.value : "") + "\n" + n;
+	}
+}
+function Q(e, t) {
+	return e.marker ? Nt(e.marker, t).repeat(3) : Nt(e.fence, t);
+}
+function Nt(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 Pt = "yaml";
+function Ft(e) {
+	let t = this, n = e || Pt, r = t.data(), i = r.micromarkExtensions ||= [], a = r.fromMarkdownExtensions ||= [], o = r.toMarkdownExtensions ||= [];
+	i.push(Ct(n)), a.push(Dt(n)), o.push(jt(n));
+}
+//#endregion
+//#region src/frontmatter/index.ts
+var It = Ee("coarRemarkFrontmatter", () => Ft, ["yaml"]), Lt = we("frontmatter", () => ({
+	group: "block",
+	atom: !0,
+	marks: "",
+	selectable: !1,
+	draggable: !1,
+	attrs: { value: { default: "" } },
+	parseDOM: [{
+		tag: "div[data-type=\"frontmatter\"]",
+		getAttrs: (e) => ({ value: e.getAttribute("data-value") ?? "" })
+	}],
+	toDOM: (e) => ["div", {
+		"data-type": "frontmatter",
+		"data-value": e.attrs.value ?? ""
+	}],
+	parseMarkdown: {
+		match: (e) => e.type === "yaml",
+		runner: (e, t, n) => {
+			e.addNode(n, { value: typeof t.value == "string" ? t.value : "" });
+		}
+	},
+	toMarkdown: {
+		match: (e) => e.type.name === "frontmatter",
+		runner: (e, t) => {
+			e.addNode("yaml", void 0, t.attrs.value ?? "");
+		}
+	}
+}));
+function Rt(e, t) {
+	let { entries: n } = je(t);
+	if (e.replaceChildren(), n.length === 0) {
+		let n = document.createElement("pre");
+		n.className = "coar-markdown-frontmatter__raw", n.textContent = t, e.appendChild(n);
+		return;
+	}
+	for (let t of n) {
+		let n = document.createElement("div");
+		n.className = "coar-markdown-frontmatter__entry";
+		let r = document.createElement("span");
+		r.className = "coar-markdown-frontmatter__key", r.textContent = t.key;
+		let i = document.createElement("span");
+		i.className = "coar-markdown-frontmatter__value", i.textContent = t.value, n.append(r, document.createTextNode(": "), i), e.appendChild(n);
+	}
+}
+var zt = 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() {
+		Rt(this.dom, this.node.attrs.value ?? "");
+	}
+	update(e) {
+		if (e.type !== this.node.type) return !1;
+		let t = e.attrs.value !== this.node.attrs.value;
+		return this.node = e, t && this.renderCard(), !0;
+	}
+	ignoreMutation() {
+		return !0;
+	}
+	stopEvent() {
+		return !1;
+	}
+}, Bt = [
+	It,
+	Lt,
+	De(Lt.node, () => (e) => new zt(e))
+].flat(), Vt = { class: "coar-md-color-grid" }, Ht = [
 	"title",
 	"aria-label",
 	"onMousedown"
-], $e = { class: "coar-md-color-custom" }, et = /* @__PURE__ */ l({
+], Ut = { class: "coar-md-color-custom" }, Wt = /* @__PURE__ */ l({
 	__name: "ColorPickerPanel",
 	props: {
 		currentColor: {},
 		pick: { type: Function }
 	},
 	setup(t) {
-		let n = g(t.currentColor ?? "#000000");
-		return (r, c) => (h(), o("div", {
+		let n = v(t.currentColor ?? "#000000");
+		return (r, c) => (_(), o("div", {
 			class: "coar-md-color-picker",
 			role: "menu",
-			onMousedown: c[2] ||= T(() => {}, ["stop"])
-		}, [s("div", Ze, [(h(!0), o(e, null, _(v(Xe), (e) => (h(), o("button", {
+			onMousedown: c[2] ||= E(() => {}, ["stop"])
+		}, [s("div", Vt, [(_(!0), o(e, null, y(x(_t), (e) => (_(), o("button", {
 			key: e.value || "default",
 			type: "button",
 			class: p([
@@ -332,23 +669,23 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 			style: m(e.value ? { "--coar-md-swatch": e.value } : void 0),
 			title: e.name,
 			"aria-label": e.name,
-			onMousedown: T((n) => t.pick(e.value === "" ? null : e.value), ["prevent"])
-		}, [e.value === "" ? (h(), i(v(I), {
+			onMousedown: E((n) => t.pick(e.value === "" ? null : e.value), ["prevent"])
+		}, [e.value === "" ? (_(), i(x(P), {
 			key: 0,
 			name: "ban",
 			size: "s"
-		})) : a("", !0)], 46, Qe))), 128))]), s("div", $e, [c[3] ||= s("label", {
+		})) : a("", !0)], 46, Ht))), 128))]), s("div", Ut, [c[3] ||= s("label", {
 			class: "coar-md-color-custom-label",
 			for: "coar-md-color-custom-input"
-		}, " Custom ", -1), w(s("input", {
+		}, " Custom ", -1), T(s("input", {
 			id: "coar-md-color-custom-input",
 			"onUpdate:modelValue": c[0] ||= (e) => n.value = e,
 			type: "color",
 			class: "coar-md-color-custom-input",
 			onChange: c[1] ||= (e) => t.pick(n.value)
-		}, null, 544), [[x, n.value]])])], 32));
+		}, null, 544), [[S, n.value]])])], 32));
 	}
-}), tt = [
+}), Gt = [
 	"bold",
 	"italic",
 	"strikethrough",
@@ -369,51 +706,51 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 	"undo",
 	"redo"
 ], $ = {
-	bold: { command: me },
-	italic: { command: fe },
-	strike: { command: Me },
-	code: { command: pe },
-	bulletList: { command: W },
-	orderedList: { command: ge },
-	blockquote: { command: he },
-	hr: { command: ue },
-	codeBlock: { command: le },
-	table: { command: je },
-	undo: { command: Fe },
-	redo: { command: Pe },
-	paragraph: { command: U },
-	addRowBefore: { command: Oe },
-	addRowAfter: { command: De },
-	addColBefore: { command: Ee },
-	addColAfter: { command: Te },
-	deleteCell: { command: ke },
-	indent: { command: de },
-	outdent: { command: H },
+	bold: { command: ge },
+	italic: { command: me },
+	strike: { command: He },
+	code: { command: he },
+	bulletList: { command: ye },
+	orderedList: { command: be },
+	blockquote: { command: ve },
+	hr: { command: fe },
+	codeBlock: { command: de },
+	table: { command: Ve },
+	undo: { command: Ge },
+	redo: { command: We },
+	paragraph: { command: _e },
+	addRowBefore: { command: Re },
+	addRowAfter: { command: Le },
+	addColBefore: { command: Ie },
+	addColAfter: { command: Fe },
+	deleteCell: { command: ze },
+	indent: { command: pe },
+	outdent: { command: B },
 	h1: {
-		command: G,
+		command: V,
 		payload: 1
 	},
 	h2: {
-		command: G,
+		command: V,
 		payload: 2
 	},
 	h3: {
-		command: G,
+		command: V,
 		payload: 3
 	},
 	h4: {
-		command: G,
+		command: V,
 		payload: 4
 	},
 	h5: {
-		command: G,
+		command: V,
 		payload: 5
 	},
 	h6: {
-		command: G,
+		command: V,
 		payload: 6
 	}
-}, nt = l({
+}, Kt = l({
 	props: {
 		initialValue: {
 			type: String,
@@ -463,45 +800,61 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 			type: Boolean,
 			required: !0
 		},
+		placeholder: {
+			type: String,
+			default: ""
+		},
+		sourceToggle: {
+			type: Boolean,
+			default: !1
+		},
 		onMarkdownChange: {
 			type: Function,
 			required: !0
 		}
 	},
 	setup(e) {
-		let t = g(e.initialValue);
-		N((n) => E.make().config((r) => {
-			r.set(j, n), r.set(O, e.initialValue), r.update(A, (t) => ({
+		let t = v(e.initialValue), n = v("rendered");
+		M((n) => ne.make().config((r) => {
+			r.set(A, n), r.set(re, e.initialValue), r.update(k, (t) => ({
 				...t,
 				editable: () => !e.readonly
-			})), r.get(X).markdownUpdated((n, r) => {
+			})), r.get(Je).markdownUpdated((n, r) => {
 				r !== t.value && (t.value = r, e.onMarkdownChange(r));
 			});
-		}).use(ce).use(Ae).use(Ne).use(Ie).use(Le).use(Ye).use(Ge));
-		let [n, r] = P(), i = g(null);
-		return C(() => e.externalValue.value, (e) => {
+		}).use(z).use(Be).use(Bt).use(Ue).use(Ke).use(qe).use(gt).use(dt));
+		let [r, i] = ae(), a = v(null);
+		return w(() => e.externalValue.value, (e) => {
 			if (e === t.value) return;
-			let n = r();
-			if (!n) {
-				i.value = e;
+			if (n.value === "source") {
+				t.value = e;
 				return;
 			}
-			i.value = null, t.value = e, n.action(q(e));
-		}), C(n, (e) => {
-			if (e || i.value === null) return;
-			let n = r();
+			let r = i();
+			if (!r) {
+				a.value = e;
+				return;
+			}
+			a.value = null, t.value = e, r.action(H(e));
+		}), w(n, (e) => {
+			if (e !== "rendered") return;
+			let n = i();
+			n && n.action(H(t.value));
+		}), w(r, (e) => {
+			if (e || a.value === null) return;
+			let n = i();
 			if (!n) return;
-			let a = i.value;
-			i.value = null, a !== t.value && (t.value = a, n.action(q(a)));
-		}, { immediate: !0 }), C(() => e.readonly, () => {
-			let t = r();
+			let r = a.value;
+			a.value = null, r !== t.value && (t.value = r, n.action(H(r)));
+		}, { immediate: !0 }), w(() => e.readonly, () => {
+			let t = i();
 			t && t.action((t) => {
-				t.update(A, (t) => ({
+				t.update(k, (t) => ({
 					...t,
 					editable: () => !e.readonly
-				})), t.get(k).update(t.get(k).props);
+				})), t.get(O).update(t.get(O).props);
 			});
-		}), () => u(rt, {
+		}), () => u(qt, {
 			readonly: e.readonly,
 			disabled: e.disabled,
 			toolbarMode: e.toolbarMode,
@@ -511,10 +864,21 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 			hasError: e.hasError,
 			describedBy: e.describedBy,
 			name: e.name,
-			required: e.required
+			required: e.required,
+			placeholder: e.placeholder,
+			isEmpty: t.value.trim() === "",
+			sourceToggle: e.sourceToggle,
+			viewMode: n.value,
+			sourceValue: t.value,
+			onToggleView: (e) => {
+				n.value = e;
+			},
+			onSourceInput: (n) => {
+				n !== t.value && (t.value = n, e.onMarkdownChange(n));
+			}
 		});
 	}
-}), rt = l({
+}), qt = l({
 	props: {
 		readonly: {
 			type: Boolean,
@@ -555,13 +919,41 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 		required: {
 			type: Boolean,
 			required: !0
+		},
+		placeholder: {
+			type: String,
+			default: ""
+		},
+		isEmpty: {
+			type: Boolean,
+			default: !1
+		},
+		sourceToggle: {
+			type: Boolean,
+			default: !1
+		},
+		viewMode: {
+			type: String,
+			default: "rendered"
+		},
+		sourceValue: {
+			type: String,
+			default: ""
+		},
+		onToggleView: {
+			type: Function,
+			default: void 0
+		},
+		onSourceInput: {
+			type: Function,
+			default: void 0
 		}
 	},
 	setup(e) {
-		let [, r] = P(), i = g(null), a = g(!1), o = g({
+		let [, r] = ae(), i = v(null), a = v(!1), o = v({
 			left: "0px",
 			top: "0px"
-		}), s = g("text"), c = g(!1), l = {
+		}), s = v("text"), c = v(!1), l = {
 			strong: !1,
 			emphasis: !1,
 			strike_through: !1,
@@ -575,38 +967,38 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 			table: !1,
 			code_block: !1,
 			list_item_depth: 0
-		}, d = se(), p = null, m = g({ ...l });
-		function h(t) {
+		}, d = ue(), p = null, m = v({ ...l });
+		function _(t) {
 			if (e.readonly) return;
 			let n = r();
 			n && (n.action((e) => {
 				e.get(D).call(t.command.key, t.payload);
-			}), w());
+			}), T());
 		}
-		function _(t) {
+		function y(t) {
 			if (e.readonly) return;
-			let n = t === "bullet_list" ? $.bulletList : $.orderedList, r = ze({
+			let n = t === "bullet_list" ? $.bulletList : $.orderedList, r = at({
 				target: t,
 				inBulletList: m.value.bullet_list,
 				inOrderedList: m.value.ordered_list
 			});
 			if (r === "lift") {
-				h({ command: H });
+				_({ command: B });
 				return;
 			}
-			r === "switch" && h({ command: H }), h(n);
+			r === "switch" && _({ command: B }), _(n);
 		}
-		let ne = n(() => e.tools ? new Set(e.tools) : void 0);
-		function v(e) {
-			return Re(e, ne.value);
+		let b = n(() => e.tools ? new Set(e.tools) : void 0);
+		function x(e) {
+			return it(e, b.value);
 		}
-		function y(t) {
+		function ee(t) {
 			if (e.readonly) return;
 			let n = r();
 			if (!n) return;
-			let i = t === null ? null : Y(t);
+			let i = t === null ? null : U(t);
 			n.action((e) => {
-				let t = e.get(k), { state: n } = t, r = n.schema.marks.text_color;
+				let t = e.get(O), { state: n } = t, r = n.schema.marks.text_color;
 				if (!r) return;
 				let { from: a, to: o, empty: s } = n.selection;
 				if (s) {
@@ -616,17 +1008,17 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 					let e = n.tr.removeMark(a, o, r);
 					i && (e = e.addMark(a, o, r.create({ color: i }))), t.dispatch(e);
 				}
-			}), x(), w();
+			}), S(), T();
 		}
-		function b(e) {
+		function te(e) {
 			if (e) {
 				if (p && !p.isClosed) {
-					x();
+					S();
 					return;
 				}
 				p = d.open({
 					spec: {
-						...oe,
+						...le,
 						anchor: {
 							kind: "element",
 							element: e
@@ -634,35 +1026,35 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 					},
 					content: {
 						kind: "component",
-						component: f(et)
+						component: f(Wt)
 					},
 					inputs: {
 						currentColor: m.value.text_color,
-						pick: (e) => y(e)
+						pick: (e) => ee(e)
 					}
 				}), p.afterClosed.then(() => {
 					p?.isClosed && (p = null);
 				});
 			}
 		}
-		function x() {
+		function S() {
 			p && !p.isClosed && p.close(), p = null;
 		}
-		function S() {
+		function C() {
 			if (e.readonly) return;
 			let t = r();
 			t && t.action((e) => {
-				let t = e.get(k), { state: n } = t, r = n.tr, { from: i, to: a, empty: o } = n.selection;
+				let t = e.get(O), { 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(D).call(U.key);
+				}), t.dispatch(r), e.get(D).call(_e.key);
 			});
 		}
-		function C() {
+		function w() {
 			if (e.readonly) return;
 			let t = r();
 			t && t.action((e) => {
-				let n = e.get(k), { $from: r } = n.state.selection;
+				let n = e.get(O), { $from: r } = n.state.selection;
 				for (let e = r.depth; e > 0; e--) {
 					let t = r.node(e);
 					if (t.type.name === "list_item") {
@@ -671,9 +1063,9 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 						return;
 					}
 				}
-				e.get(D).call(W.key), queueMicrotask(() => {
+				e.get(D).call(ye.key), queueMicrotask(() => {
 					t.action((e) => {
-						let t = e.get(k), { $from: n } = t.state.selection;
+						let t = e.get(O), { $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;
@@ -682,11 +1074,11 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 				});
 			});
 		}
-		function w() {
+		function T() {
 			let e = r();
 			if (e) try {
 				e.action((e) => {
-					let t = e.get(k).state, { from: n, to: r, empty: i, $from: a } = t.selection, o = t.storedMarks, s = { ...l }, c = (e) => {
+					let t = e.get(O).state, { from: n, to: r, empty: i, $from: a } = t.selection, o = t.storedMarks, s = { ...l }, c = (e) => {
 						let s = t.schema.marks[e];
 						if (!s) return !1;
 						if (i) {
@@ -700,7 +1092,7 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 					u && (s.text_color = (() => {
 						if (i) {
 							let e = (o ?? a.marks()).find((e) => e.type === u), t = typeof e?.attrs.color == "string" ? e.attrs.color : null;
-							return t ? Y(t) : null;
+							return t ? U(t) : null;
 						}
 						let e = null;
 						return t.doc.nodesBetween(n, r, (t) => {
@@ -708,7 +1100,7 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 							let n = t.marks.find((e) => e.type === u);
 							if (n) {
 								let t = typeof n.attrs.color == "string" ? n.attrs.color : null;
-								e = t ? Y(t) : null;
+								e = t ? U(t) : null;
 							}
 							return e === null;
 						}), e;
@@ -723,29 +1115,29 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 				m.value = { ...l };
 			}
 		}
-		function T(t) {
+		function E(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(), E(i);
+					t.preventDefault(), ne(i);
 					return;
 				}
 			}
 			if (n.closest(".ProseMirror")) return;
 			let a = r();
 			a && (t.preventDefault(), a.action((e) => {
-				let t = e.get(k);
+				let t = e.get(O);
 				t.focus();
-				let n = t.state.tr.setSelection(K.atEnd(t.state.doc));
+				let n = t.state.tr.setSelection(Se.atEnd(t.state.doc));
 				t.dispatch(n);
 			}));
 		}
-		function E(e) {
+		function ne(e) {
 			let t = r();
 			t && t.action((t) => {
-				let n = t.get(k), r = n.posAtDOM(e, 0);
+				let n = t.get(O), r = n.posAtDOM(e, 0);
 				if (r < 0) return;
 				let i = n.state.doc.resolve(r);
 				for (let e = i.depth; e >= 0; e--) {
@@ -758,13 +1150,13 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 				}
 			});
 		}
-		function O() {
+		function re() {
 			let e = r();
 			if (!e) return "text";
 			try {
 				let t = "text";
 				return e.action((e) => {
-					let { $from: n } = e.get(k).state.selection;
+					let { $from: n } = e.get(O).state.selection;
 					for (let e = n.depth; e > 0; e--) if (n.node(e).type.name === "table") {
 						t = "table";
 						break;
@@ -774,14 +1166,14 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 				return "text";
 			}
 		}
-		function A(e) {
+		function k(e) {
 			let t = e.left + e.width / 2, n = e.top - 8;
 			t = Math.max(108, Math.min(t, window.innerWidth - 108)), n < 50 && (n = e.bottom + 8), o.value = {
 				left: `${t}px`,
 				top: `${n}px`
 			};
 		}
-		function j() {
+		function A() {
 			if (e.readonly || e.toolbarMode === "fixed") {
 				a.value = !1;
 				return;
@@ -796,141 +1188,154 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 				a.value = !1, c.value = !1;
 				return;
 			}
-			A(n.getBoundingClientRect()), s.value = O(), a.value = !0, c.value = !1;
+			k(n.getBoundingClientRect()), s.value = re(), a.value = !0, c.value = !1;
 		}
-		function M(e) {
+		function j(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)) && (a.value = !1, c.value = !1);
 		}
-		let N = null;
-		function F(e = 20) {
+		let M = null;
+		function N(e = 20) {
 			let t = r();
 			if (!t) {
-				e > 0 && setTimeout(() => F(e - 1), 50);
+				e > 0 && setTimeout(() => N(e - 1), 50);
 				return;
 			}
 			try {
 				t.action((e) => {
-					let t = e.get(X);
-					N = () => queueMicrotask(w), t.selectionUpdated(N);
+					let t = e.get(Je);
+					M = () => queueMicrotask(T), t.selectionUpdated(M);
 				});
 			} catch {
-				e > 0 && setTimeout(() => F(e - 1), 50);
+				e > 0 && setTimeout(() => N(e - 1), 50);
 			}
 		}
-		function L() {
-			if (!N) return;
+		function oe() {
+			if (!M) return;
 			let e = r();
 			if (e) {
 				try {
 					e.action((e) => {
-						let t = e.get(X).listeners.selectionUpdated, n = t.indexOf(N);
+						let t = e.get(Je).listeners.selectionUpdated, n = t.indexOf(M);
 						n >= 0 && t.splice(n, 1);
 					});
 				} catch {}
-				N = null;
+				M = null;
 			}
 		}
-		te(() => {
-			document.addEventListener("selectionchange", j), document.addEventListener("mousedown", M, !0), F();
-		}), ee(() => {
-			document.removeEventListener("selectionchange", j), document.removeEventListener("mousedown", M, !0), L(), x();
+		g(() => {
+			document.addEventListener("selectionchange", A), document.addEventListener("mousedown", j, !0), N();
+		}), h(() => {
+			document.removeEventListener("selectionchange", A), document.removeEventListener("mousedown", j, !0), oe(), S();
 		});
-		function B(e, t, n, r = {}) {
-			return u(z, {
+		function L(e, t, n, r = {}) {
+			return u(I, {
 				icon: e,
 				label: t,
 				active: r.active ?? !1,
 				disabled: r.disabled ?? !1,
-				onClick: r.disabled ? () => {} : r.onClick ?? (() => h(n))
+				onClick: r.disabled ? () => {} : r.onClick ?? (() => _(n))
 			});
 		}
-		function V() {
+		function R() {
 			let t = m.value, n = t.heading != null;
 			function r(e, t, n) {
-				v(t) && e.push(n);
+				x(t) && e.push(n);
 			}
 			function i(e) {
-				e.length !== 0 && e[e.length - 1]?.type !== R && e.push(u(R));
+				e.length !== 0 && e[e.length - 1]?.type !== F && e.push(u(F));
 			}
 			let a = [];
-			return r(a, "bold", B("bold", "Bold", $.bold, { active: t.strong })), r(a, "italic", B("italic", "Italic", $.italic, { active: t.emphasis })), r(a, "strikethrough", B("strikethrough", "Strikethrough", $.strike, { active: t.strike_through })), r(a, "inlineCode", B("code", "Inline Code", $.code, { active: t.inlineCode })), r(a, "textColor", u(z, {
+			if (e.sourceToggle) {
+				let t = e.viewMode === "source";
+				if (a.push(u(I, {
+					icon: t ? "eye" : "code",
+					label: t ? "Rendered" : "Source",
+					active: t,
+					onClick: () => e.onToggleView?.(t ? "rendered" : "source")
+				})), t) return z(a);
+				i(a);
+			}
+			return r(a, "bold", L("bold", "Bold", $.bold, { active: t.strong })), r(a, "italic", L("italic", "Italic", $.italic, { active: t.emphasis })), r(a, "strikethrough", L("strikethrough", "Strikethrough", $.strike, { active: t.strike_through })), r(a, "inlineCode", L("code", "Inline Code", $.code, { active: t.inlineCode })), r(a, "textColor", u(I, {
 				icon: "palette",
 				label: "Text Color",
 				active: t.text_color !== null,
 				onClick: (e) => {
-					b(e.currentTarget ?? e.target);
+					te(e.currentTarget ?? e.target);
 				}
-			})), r(a, "headings", u(ae, {
+			})), r(a, "headings", u(ce, {
 				icon: "hash",
 				label: n ? `Heading ${t.heading}` : "Headings",
 				mode: "flyout",
 				openOnHover: !0
 			}, { default: () => [
-				u(z, {
+				u(I, {
 					icon: "pilcrow",
 					label: "Paragraph",
 					active: !n,
-					onClick: () => h($.paragraph)
+					onClick: () => _($.paragraph)
 				}),
-				u(z, {
+				u(I, {
 					icon: "heading",
 					label: "Heading 1",
 					active: t.heading === 1,
-					onClick: () => h($.h1)
+					onClick: () => _($.h1)
 				}),
-				u(z, {
+				u(I, {
 					icon: "heading",
 					label: "Heading 2",
 					active: t.heading === 2,
-					onClick: () => h($.h2)
+					onClick: () => _($.h2)
 				}),
-				u(z, {
+				u(I, {
 					icon: "heading",
 					label: "Heading 3",
 					active: t.heading === 3,
-					onClick: () => h($.h3)
+					onClick: () => _($.h3)
 				}),
-				u(z, {
+				u(I, {
 					icon: "heading",
 					label: "Heading 4",
 					active: t.heading === 4,
-					onClick: () => h($.h4)
+					onClick: () => _($.h4)
 				}),
-				u(z, {
+				u(I, {
 					icon: "heading",
 					label: "Heading 5",
 					active: t.heading === 5,
-					onClick: () => h($.h5)
+					onClick: () => _($.h5)
 				}),
-				u(z, {
+				u(I, {
 					icon: "heading",
 					label: "Heading 6",
 					active: t.heading === 6,
-					onClick: () => h($.h6)
+					onClick: () => _($.h6)
 				})
-			] })), i(a), r(a, "bulletList", B("list", "Bullet List", $.bulletList, {
+			] })), i(a), r(a, "bulletList", L("list", "Bullet List", $.bulletList, {
 				active: t.bullet_list,
-				onClick: () => _("bullet_list")
-			})), r(a, "orderedList", B("list-ordered", "Ordered List", $.orderedList, {
+				onClick: () => y("bullet_list")
+			})), r(a, "orderedList", L("list-ordered", "Ordered List", $.orderedList, {
 				active: t.ordered_list,
-				onClick: () => _("ordered_list")
-			})), r(a, "taskList", B("clipboard-check", "Task List", $.bulletList, {
+				onClick: () => y("ordered_list")
+			})), r(a, "taskList", L("clipboard-check", "Task List", $.bulletList, {
 				active: t.task_list,
-				onClick: C
-			})), r(a, "outdent", B("indent-decrease", "Outdent", $.outdent, { disabled: t.list_item_depth < 2 })), r(a, "indent", B("indent-increase", "Indent", $.indent, { disabled: t.list_item_depth < 1 })), r(a, "blockquote", B("text-quote", "Blockquote", $.blockquote, { active: t.blockquote })), r(a, "horizontalRule", B("minus", "Horizontal Rule", $.hr)), i(a), r(a, "codeBlock", B("square-code", "Code Block", $.codeBlock, { active: t.code_block })), r(a, "table", B("table", "Insert Table", $.table, { active: t.table })), t.table && v("tableOps") && (i(a), a.push(B("between-vertical-start", "Insert Row Above", $.addRowBefore)), a.push(B("between-vertical-end", "Insert Row Below", $.addRowAfter)), a.push(B("between-horizontal-start", "Insert Column Left", $.addColBefore)), a.push(B("between-horizontal-end", "Insert Column Right", $.addColAfter)), a.push(B("trash-2", "Delete Cell", $.deleteCell))), v("clearFormatting") && (i(a), a.push(B("eraser", "Clear Formatting", $.bold, { onClick: S }))), i(a), r(a, "undo", B("undo-2", "Undo", $.undo)), r(a, "redo", B("redo-2", "Redo", $.redo)), a[a.length - 1]?.type === R && a.pop(), u("div", {
+				onClick: w
+			})), r(a, "outdent", L("indent-decrease", "Outdent", $.outdent, { disabled: t.list_item_depth < 2 })), r(a, "indent", L("indent-increase", "Indent", $.indent, { disabled: t.list_item_depth < 1 })), r(a, "blockquote", L("text-quote", "Blockquote", $.blockquote, { active: t.blockquote })), r(a, "horizontalRule", L("minus", "Horizontal Rule", $.hr)), i(a), r(a, "codeBlock", L("square-code", "Code Block", $.codeBlock, { active: t.code_block })), r(a, "table", L("table", "Insert Table", $.table, { active: t.table })), t.table && x("tableOps") && (i(a), a.push(L("between-vertical-start", "Insert Row Above", $.addRowBefore)), a.push(L("between-vertical-end", "Insert Row Below", $.addRowAfter)), a.push(L("between-horizontal-start", "Insert Column Left", $.addColBefore)), a.push(L("between-horizontal-end", "Insert Column Right", $.addColAfter)), a.push(L("trash-2", "Delete Cell", $.deleteCell))), x("clearFormatting") && (i(a), a.push(L("eraser", "Clear Formatting", $.bold, { onClick: C }))), i(a), r(a, "undo", L("undo-2", "Undo", $.undo)), r(a, "redo", L("redo-2", "Redo", $.redo)), a[a.length - 1]?.type === F && a.pop(), z(a);
+		}
+		function z(t) {
+			return u("div", {
 				key: "sidebar",
 				class: "coar-md-sidebar-wrap",
 				onMousedown: (e) => e.preventDefault()
-			}, [u(ie, {
+			}, [u(se, {
 				collapsed: !0,
 				side: e.toolbarPosition,
 				size: "s",
 				variant: "primary",
 				borderless: !0
-			}, { default: () => a })]);
+			}, { default: () => t })]);
 		}
-		function ce() {
+		function de() {
 			let e = (e, t, n, r = {}) => u("button", {
 				class: [
 					"coar-md-float-btn",
@@ -941,20 +1346,20 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 				type: "button",
 				disabled: r.disabled ?? !1,
 				onMousedown: (e) => {
-					e.preventDefault(), !r.disabled && (r.onClick ?? (() => h(n)))();
+					e.preventDefault(), !r.disabled && (r.onClick ?? (() => _(n)))();
 				}
-			}, [u(I, {
+			}, [u(P, {
 				name: e,
 				size: "s"
 			})]), n = () => u("div", { class: "coar-md-float-sep" }), r = m.value;
 			function i(e, t, n) {
-				v(t) && e.push(n);
+				x(t) && e.push(n);
 			}
 			function a(e) {
 				e.length !== 0 && e[e.length - 1]?.props?.class !== "coar-md-float-sep" && e.push(n());
 			}
 			let l = [];
-			if (i(l, "bold", e("bold", "Bold", $.bold, { isActive: r.strong })), i(l, "italic", e("italic", "Italic", $.italic, { isActive: r.emphasis })), i(l, "strikethrough", e("strikethrough", "Strikethrough", $.strike, { isActive: r.strike_through })), i(l, "inlineCode", e("code", "Inline Code", $.code, { isActive: r.inlineCode })), v("textColor")) {
+			if (i(l, "bold", e("bold", "Bold", $.bold, { isActive: r.strong })), i(l, "italic", e("italic", "Italic", $.italic, { isActive: r.emphasis })), i(l, "strikethrough", e("strikethrough", "Strikethrough", $.strike, { isActive: r.strike_through })), i(l, "inlineCode", e("code", "Inline Code", $.code, { isActive: r.inlineCode })), x("textColor")) {
 				let e = r.text_color !== null;
 				l.push(u("button", {
 					class: ["coar-md-float-btn", e ? "coar-md-float-btn--active" : ""],
@@ -962,21 +1367,21 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 					title: e ? `Text Color (${r.text_color})` : "Text Color",
 					style: e ? `--coar-md-color-indicator: ${r.text_color};` : void 0,
 					onMousedown: (e) => {
-						e.preventDefault(), b(e.currentTarget);
+						e.preventDefault(), te(e.currentTarget);
 					}
-				}, [u(I, {
+				}, [u(P, {
 					name: "palette",
 					size: "s"
 				})]));
 			}
-			v("headings") && (a(l), l.push(u("div", { class: "coar-md-float-dropdown" }, [u("button", {
+			x("headings") && (a(l), l.push(u("div", { class: "coar-md-float-dropdown" }, [u("button", {
 				class: ["coar-md-float-btn", c.value || r.heading != null ? "coar-md-float-btn--active" : ""],
 				title: r.heading == null ? "Headings" : `Heading ${r.heading}`,
 				type: "button",
 				onMousedown: (e) => {
 					e.preventDefault(), c.value = !c.value;
 				}
-			}, [u(I, {
+			}, [u(P, {
 				name: "heading",
 				size: "s"
 			})]), c.value ? u("div", { class: "coar-md-float-submenu" }, [
@@ -1026,24 +1431,24 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 				class: ["coar-md-float-submenu-item", (i === 0 ? r.heading == null : r.heading === i) ? "coar-md-float-submenu-item--active" : ""],
 				type: "button",
 				onMousedown: (e) => {
-					e.preventDefault(), h(t), c.value = !1;
+					e.preventDefault(), _(t), c.value = !1;
 				}
-			}, [u(I, {
+			}, [u(P, {
 				name: n,
 				size: "xs"
 			}), u("span", null, e)]))) : null]))), a(l), i(l, "bulletList", e("list", "Bullet List", $.bulletList, {
 				isActive: r.bullet_list,
-				onClick: () => _("bullet_list")
+				onClick: () => y("bullet_list")
 			})), i(l, "orderedList", e("list-ordered", "Ordered List", $.orderedList, {
 				isActive: r.ordered_list,
-				onClick: () => _("ordered_list")
+				onClick: () => y("ordered_list")
 			})), i(l, "taskList", e("clipboard-check", "Task List", $.bulletList, {
 				isActive: r.task_list,
-				onClick: C
-			})), i(l, "outdent", e("indent-decrease", "Outdent", $.outdent, { disabled: r.list_item_depth < 2 })), i(l, "indent", e("indent-increase", "Indent", $.indent, { disabled: r.list_item_depth < 1 })), a(l), i(l, "blockquote", e("text-quote", "Blockquote", $.blockquote, { isActive: r.blockquote })), v("clearFormatting") && (a(l), l.push(e("eraser", "Clear Formatting", $.bold, { onClick: S }))), l[l.length - 1]?.props?.class === "coar-md-float-sep" && l.pop();
+				onClick: w
+			})), i(l, "outdent", e("indent-decrease", "Outdent", $.outdent, { disabled: r.list_item_depth < 2 })), i(l, "indent", e("indent-increase", "Indent", $.indent, { disabled: r.list_item_depth < 1 })), a(l), i(l, "blockquote", e("text-quote", "Blockquote", $.blockquote, { isActive: r.blockquote })), x("clearFormatting") && (a(l), l.push(e("eraser", "Clear Formatting", $.bold, { onClick: C }))), l[l.length - 1]?.props?.class === "coar-md-float-sep" && l.pop();
 			let d = {
 				text: l,
-				table: v("tableOps") ? [
+				table: x("tableOps") ? [
 					e("between-vertical-start", "Insert Row Above", $.addRowBefore),
 					e("between-vertical-end", "Insert Row Below", $.addRowAfter),
 					n(),
@@ -1051,18 +1456,18 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 					e("between-horizontal-end", "Insert Column Right", $.addColAfter),
 					n(),
 					e("trash-2", "Delete", $.deleteCell),
-					...v("bold") || v("italic") || v("inlineCode") ? [n()] : [],
-					...v("bold") ? [e("bold", "Bold", $.bold)] : [],
-					...v("italic") ? [e("italic", "Italic", $.italic)] : [],
-					...v("inlineCode") ? [e("code", "Code", $.code)] : []
+					...x("bold") || x("italic") || x("inlineCode") ? [n()] : [],
+					...x("bold") ? [e("bold", "Bold", $.bold)] : [],
+					...x("italic") ? [e("italic", "Italic", $.italic)] : [],
+					...x("inlineCode") ? [e("code", "Code", $.code)] : []
 				] : l,
-				"col-selection": v("tableOps") ? [
+				"col-selection": x("tableOps") ? [
 					e("between-horizontal-start", "Insert Column Left", $.addColBefore),
 					e("between-horizontal-end", "Insert Column Right", $.addColAfter),
 					n(),
 					e("trash-2", "Delete Column", $.deleteCell)
 				] : l,
-				"row-selection": v("tableOps") ? [
+				"row-selection": x("tableOps") ? [
 					e("between-vertical-start", "Insert Row Above", $.addRowBefore),
 					e("between-vertical-end", "Insert Row Below", $.addRowAfter),
 					n(),
@@ -1075,12 +1480,47 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 			}, d[s.value] || l));
 		}
 		return () => {
-			let t = e.toolbarMode === "fixed" || e.toolbarMode === "both", n = !e.readonly && (e.toolbarMode === "floating" || e.toolbarMode === "both"), r = [], o = e.toolbarPosition === "left" || e.toolbarPosition === "top", s = e.toolbarPosition === "right" || e.toolbarPosition === "bottom";
-			return t && o && r.push(V()), r.push(u("div", {
+			let t = e.toolbarMode === "fixed" || e.toolbarMode === "both", n = e.sourceToggle && e.viewMode === "source", r = !e.readonly && !n && (e.toolbarMode === "floating" || e.toolbarMode === "both"), o = [], s = e.toolbarPosition === "left" || e.toolbarPosition === "top", c = e.toolbarPosition === "right" || e.toolbarPosition === "bottom";
+			t && s && o.push(R());
+			let l = e.isEmpty && e.placeholder.length > 0 && !n;
+			return o.push(u("div", {
 				key: "area",
-				class: ["coar-md-area", "coar-markdown"],
-				onMousedown: T
-			}, [u(re)])), t && s && r.push(V()), a.value && n && r.push(ce()), u("div", {
+				class: [
+					"coar-md-area",
+					"coar-markdown",
+					{ "coar-md-area--source": n }
+				],
+				onMousedown: n ? void 0 : E
+			}, [
+				u(ie),
+				l ? u(yt, {
+					key: "placeholder",
+					source: e.placeholder
+				}) : null,
+				n ? u("textarea", {
+					key: "source",
+					class: "coar-md-source-area",
+					value: e.sourceValue,
+					readonly: e.readonly || void 0,
+					disabled: e.disabled || void 0,
+					spellcheck: "false",
+					placeholder: e.placeholder || void 0,
+					onInput: (t) => e.onSourceInput?.(t.target.value)
+				}) : null,
+				e.sourceToggle && !t ? u("button", {
+					key: "source-corner",
+					class: "coar-md-source-corner",
+					type: "button",
+					title: n ? "Show rendered" : "Edit source",
+					"aria-label": n ? "Show rendered" : "Edit source",
+					onMousedown: (t) => {
+						t.preventDefault(), e.onToggleView?.(n ? "rendered" : "source");
+					}
+				}, [u(P, {
+					name: n ? "eye" : "code",
+					size: "s"
+				})]) : null
+			])), t && c && o.push(R()), a.value && r && o.push(de()), u("div", {
 				class: {
 					"coar-md-root": !0,
 					[`coar-md-root--toolbar-${e.toolbarPosition}`]: !0,
@@ -1096,10 +1536,10 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 				"aria-readonly": e.readonly && !e.disabled ? "true" : void 0,
 				"aria-required": e.required ? "true" : void 0,
 				"data-name": e.name
-			}, r);
+			}, o);
 		};
 	}
-}), it = l({
+}), Jt = l({
 	name: "CoarMarkdownEditor",
 	props: {
 		modelValue: {
@@ -1130,6 +1570,14 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 			type: Boolean,
 			default: !1
 		},
+		placeholder: {
+			type: String,
+			default: ""
+		},
+		sourceToggle: {
+			type: Boolean,
+			default: !1
+		},
 		toolbarMode: {
 			type: String,
 			default: "floating"
@@ -1145,16 +1593,17 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let r = e.modelValue, i = ne({ value: e.modelValue });
-		C(() => e.modelValue, (e) => {
+		let r = e.modelValue, i = b({ value: e.modelValue });
+		w(() => e.modelValue, (e) => {
 			i.value = { value: e };
 		});
-		let a = d(B, void 0), o = `coar-markdown-editor-${y()}`, s = n(() => e.id || a?.inputId.value || o), c = n(() => e.error || (a?.hasError.value ?? !1)), l = n(() => a?.messageId.value), f = n(() => e.disabled || (a?.disabled.value ?? !1)), p = n(() => e.readonly || f.value);
-		return () => u(M, null, () => u(nt, {
+		let a = d(L, void 0), o = `coar-markdown-editor-${ee()}`, s = n(() => e.id || a?.inputId.value || o), c = n(() => e.error || (a?.hasError.value ?? !1)), l = n(() => a?.messageId.value), f = n(() => e.disabled || (a?.disabled.value ?? !1)), p = n(() => e.readonly || f.value);
+		return () => u(j, null, () => u(Kt, {
 			initialValue: r,
 			externalValue: i.value,
 			readonly: p.value,
 			disabled: f.value,
+			sourceToggle: e.sourceToggle,
 			toolbarMode: e.toolbarMode,
 			toolbarPosition: e.toolbarPosition,
 			tools: e.tools,
@@ -1163,9 +1612,10 @@ var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 			describedBy: l.value,
 			name: e.name,
 			required: e.required,
+			placeholder: e.placeholder,
 			onMarkdownChange: (e) => t("update:modelValue", e)
 		}));
 	}
 });
 //#endregion
-export { tt as COAR_MARKDOWN_EDITOR_ALL_TOOLS, it as CoarMarkdownEditor };
+export { Gt as COAR_MARKDOWN_EDITOR_ALL_TOOLS, Jt as CoarMarkdownEditor };