@cocoar/vue-markdown-editor 1.16.0 → 1.17.0-beta.3

package/dist/CoarMarkdownEditor.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CoarMarkdownEditor.vue.d.ts","sourceRoot":"","sources":["../src/CoarMarkdownEditor.vue"],"names":[],"mappings":"AA+1CA,OAAO,EAGL,KAAK,QAAQ,EACd,MAAM,KAAK,CAAC;AAkCb,MAAM,MAAM,6BAA6B,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;AAC1E,MAAM,MAAM,iCAAiC,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEpF;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GAAG,QAAQ,GAAG,eAAe,GAAG,YAAY,GAClD,WAAW,GACX,UAAU,GACV,YAAY,GAAG,aAAa,GAAG,UAAU,GACzC,QAAQ,GAAG,SAAS,GACpB,YAAY,GAAG,gBAAgB,GAC/B,WAAW,GAAG,OAAO,GAAG,UAAU,GAClC,iBAAiB,GACjB,MAAM,GAAG,MAAM,CAAC;AAEpB;iFACiF;AACjF,eAAO,MAAM,8BAA8B,EAAE,SAAS,sBAAsB,EAU3E,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yFAAyF;IACzF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,6BAA6B,CAAC;IAC5C,eAAe,CAAC,EAAE,iCAAiC,CAAC;IACpD;;;;OAIG;IACH,KAAK,CAAC,EAAE,sBAAsB,EAAE,CAAC;CAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAu+BkC,QAAQ,CAAC,6BAA6B,CAAC;;;;cACnC,QAAQ,CAAC,iCAAiC,CAAC;;;;cACtD,QAAQ,CAAC,sBAAsB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAF3B,QAAQ,CAAC,6BAA6B,CAAC;;;;cACnC,QAAQ,CAAC,iCAAiC,CAAC;;;;cACtD,QAAQ,CAAC,sBAAsB,EAAE,CAAC;;;;;;;;;;;;;;;;;AAZ9D,wBAmDG"}
+{"version":3,"file":"CoarMarkdownEditor.vue.d.ts","sourceRoot":"","sources":["../src/CoarMarkdownEditor.vue"],"names":[],"mappings":"AAu4CA,OAAO,EAGL,KAAK,QAAQ,EACd,MAAM,KAAK,CAAC;AAkCb,MAAM,MAAM,6BAA6B,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;AAC1E,MAAM,MAAM,iCAAiC,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEpF;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GAAG,QAAQ,GAAG,eAAe,GAAG,YAAY,GAClD,WAAW,GACX,UAAU,GACV,YAAY,GAAG,aAAa,GAAG,UAAU,GACzC,QAAQ,GAAG,SAAS,GACpB,YAAY,GAAG,gBAAgB,GAC/B,WAAW,GAAG,OAAO,GAAG,UAAU,GAClC,iBAAiB,GACjB,MAAM,GAAG,MAAM,CAAC;AAEpB;iFACiF;AACjF,eAAO,MAAM,8BAA8B,EAAE,SAAS,sBAAsB,EAU3E,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yFAAyF;IACzF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,6BAA6B,CAAC;IAC5C,eAAe,CAAC,EAAE,iCAAiC,CAAC;IACpD;;;;OAIG;IACH,KAAK,CAAC,EAAE,sBAAsB,EAAE,CAAC;CAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA+/BkC,QAAQ,CAAC,6BAA6B,CAAC;;;;cACnC,QAAQ,CAAC,iCAAiC,CAAC;;;;cACtD,QAAQ,CAAC,sBAAsB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAF3B,QAAQ,CAAC,6BAA6B,CAAC;;;;cACnC,QAAQ,CAAC,iCAAiC,CAAC;;;;cACtD,QAAQ,CAAC,sBAAsB,EAAE,CAAC;;;;;;;;;;;;;;;;;AAZ9D,wBAmDG"}

package/dist/index.js

@@ -1,10 +1,10 @@
-import { Fragment as e, Teleport as t, computed as n, createApp as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, h as u, inject as d, markRaw as f, normalizeClass as p, normalizeStyle as m, onBeforeUnmount as ee, onMounted as te, openBlock as h, ref as g, renderList as _, shallowRef as v, unref as y, useId as ne, useTemplateRef as b, vModelText as x, vShow as S, watch as C, withDirectives as w, withModifiers as T } from "vue";
+import { 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 H, createCodeBlockCommand as ce, insertHrCommand as le, liftListItemCommand as U, sinkListItemCommand as ue, toggleEmphasisCommand as de, toggleInlineCodeCommand as fe, toggleStrongCommand as pe, turnIntoTextCommand as W, wrapInBlockquoteCommand as me, wrapInBulletListCommand as G, wrapInHeadingCommand as K, wrapInOrderedListCommand as he } from "@milkdown/preset-commonmark";
-import { Plugin as ge, TextSelection as q } from "@milkdown/prose/state";
-import { $markSchema as _e, $prose as ve, $remark as ye, $view as be, replaceAll as xe } from "@milkdown/utils";
+import { 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";
@@ -69,7 +69,7 @@ var Be = { class: "coar-md-code-render" }, Ve = { class: "coar-md-code-edit" },
 		}, {
 			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(y(F), {
+		}), (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), {
 			code: e.text,
 			language: e.language || "text",
 			collapsible: !1,
@@ -79,10 +79,10 @@ var Be = { class: "coar-md-code-render" }, Ve = { class: "coar-md-code-edit" },
 			type: "button",
 			title: "Edit code block",
 			onMousedown: n[0] ||= T((e) => r("enterEdit"), ["prevent"])
-		}, [c(y(I), {
+		}, [c(v(I), {
 			name: "pencil",
 			size: "xs"
-		}), n[2] ||= s("span", null, "Edit", -1)], 32)], 512), [[S, !e.editing]]), w(s("div", Ve, [s("div", He, [c(y(L), {
+		}), n[2] ||= s("span", null, "Edit", -1)], 32)], 512), [[S, !e.editing]]), w(s("div", Ve, [s("div", He, [c(v(L), {
 			class: "coar-md-code-lang-select",
 			"model-value": e.language,
 			options: i,
@@ -146,13 +146,13 @@ 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(q.create(this.view.state.doc, e + 1)), this.view.dispatch(t), this.view.focus();
+		t.setSelection(K.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 = [be(V.node, () => (e, t, n) => new We(e, t, n)), ve(() => new ge({ view: () => ({ update(e, t) {
+}, 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) => {
 		t.view === e && t.notifySelectionChanged();
 	});
@@ -221,7 +221,7 @@ function Je(e) {
 	}
 	return t;
 }
-var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
+var Ye = [be("textColor", () => Ke), ve("text_color", () => ({
 	attrs: { color: { default: "" } },
 	inclusive: !0,
 	parseDOM: [{
@@ -321,7 +321,7 @@ var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
 			class: "coar-md-color-picker",
 			role: "menu",
 			onMousedown: c[2] ||= T(() => {}, ["stop"])
-		}, [s("div", Ze, [(h(!0), o(e, null, _(y(Xe), (e) => (h(), o("button", {
+		}, [s("div", Ze, [(h(!0), o(e, null, _(v(Xe), (e) => (h(), o("button", {
 			key: e.value || "default",
 			type: "button",
 			class: p([
@@ -333,7 +333,7 @@ var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
 			title: e.name,
 			"aria-label": e.name,
 			onMousedown: T((n) => t.pick(e.value === "" ? null : e.value), ["prevent"])
-		}, [e.value === "" ? (h(), i(y(I), {
+		}, [e.value === "" ? (h(), i(v(I), {
 			key: 0,
 			name: "ban",
 			size: "s"
@@ -369,48 +369,48 @@ var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
 	"undo",
 	"redo"
 ], $ = {
-	bold: { command: pe },
-	italic: { command: de },
+	bold: { command: me },
+	italic: { command: fe },
 	strike: { command: Me },
-	code: { command: fe },
-	bulletList: { command: G },
-	orderedList: { command: he },
-	blockquote: { command: me },
-	hr: { command: le },
-	codeBlock: { command: ce },
+	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: W },
+	paragraph: { command: U },
 	addRowBefore: { command: Oe },
 	addRowAfter: { command: De },
 	addColBefore: { command: Ee },
 	addColAfter: { command: Te },
 	deleteCell: { command: ke },
-	indent: { command: ue },
-	outdent: { command: U },
+	indent: { command: de },
+	outdent: { command: H },
 	h1: {
-		command: K,
+		command: G,
 		payload: 1
 	},
 	h2: {
-		command: K,
+		command: G,
 		payload: 2
 	},
 	h3: {
-		command: K,
+		command: G,
 		payload: 3
 	},
 	h4: {
-		command: K,
+		command: G,
 		payload: 4
 	},
 	h5: {
-		command: K,
+		command: G,
 		payload: 5
 	},
 	h6: {
-		command: K,
+		command: G,
 		payload: 6
 	}
 }, nt = l({
@@ -477,14 +477,24 @@ var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
 			})), r.get(X).markdownUpdated((n, r) => {
 				r !== t.value && (t.value = r, e.onMarkdownChange(r));
 			});
-		}).use(H).use(Ae).use(Ne).use(Ie).use(Le).use(Ye).use(Ge));
-		let [, n] = P();
+		}).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) => {
 			if (e === t.value) return;
-			let r = n();
-			r && (t.value = e, r.action(xe(e)));
-		}), C(() => e.readonly, () => {
-			let t = n();
+			let n = r();
+			if (!n) {
+				i.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();
+			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();
 			t && t.action((t) => {
 				t.update(A, (t) => ({
 					...t,
@@ -581,16 +591,16 @@ var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
 				inOrderedList: m.value.ordered_list
 			});
 			if (r === "lift") {
-				h({ command: U });
+				h({ command: H });
 				return;
 			}
-			r === "switch" && h({ command: U }), h(n);
+			r === "switch" && h({ command: H }), h(n);
 		}
-		let v = n(() => e.tools ? new Set(e.tools) : void 0);
-		function y(e) {
-			return Re(e, v.value);
+		let ne = n(() => e.tools ? new Set(e.tools) : void 0);
+		function v(e) {
+			return Re(e, ne.value);
 		}
-		function ne(t) {
+		function y(t) {
 			if (e.readonly) return;
 			let n = r();
 			if (!n) return;
@@ -628,7 +638,7 @@ var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
 					},
 					inputs: {
 						currentColor: m.value.text_color,
-						pick: (e) => ne(e)
+						pick: (e) => y(e)
 					}
 				}), p.afterClosed.then(() => {
 					p?.isClosed && (p = null);
@@ -645,7 +655,7 @@ var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
 				let t = e.get(k), { state: n } = t, r = n.tr, { from: i, to: a, empty: o } = n.selection;
 				o ? r = r.setStoredMarks([]) : Object.values(n.schema.marks).forEach((e) => {
 					r = r.removeMark(i, a, e);
-				}), t.dispatch(r), e.get(D).call(W.key);
+				}), t.dispatch(r), e.get(D).call(U.key);
 			});
 		}
 		function C() {
@@ -661,7 +671,7 @@ var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
 						return;
 					}
 				}
-				e.get(D).call(G.key), queueMicrotask(() => {
+				e.get(D).call(W.key), queueMicrotask(() => {
 					t.action((e) => {
 						let t = e.get(k), { $from: n } = t.state.selection;
 						for (let e = n.depth; e > 0; e--) if (n.node(e).type.name === "list_item") {
@@ -728,7 +738,7 @@ var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
 			a && (t.preventDefault(), a.action((e) => {
 				let t = e.get(k);
 				t.focus();
-				let n = t.state.tr.setSelection(q.atEnd(t.state.doc));
+				let n = t.state.tr.setSelection(K.atEnd(t.state.doc));
 				t.dispatch(n);
 			}));
 		}
@@ -838,7 +848,7 @@ var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
 		function V() {
 			let t = m.value, n = t.heading != null;
 			function r(e, t, n) {
-				y(t) && e.push(n);
+				v(t) && e.push(n);
 			}
 			function i(e) {
 				e.length !== 0 && e[e.length - 1]?.type !== R && e.push(u(R));
@@ -908,7 +918,7 @@ var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
 			})), r(a, "taskList", B("clipboard-check", "Task List", $.bulletList, {
 				active: t.task_list,
 				onClick: C
-			})), r(a, "outdent", B("indent-decrease", "Outdent", $.outdent, { disabled: t.list_item_depth < 2 })), r(a, "indent", B("indent-increase", "Indent", $.indent, { disabled: t.list_item_depth < 1 })), r(a, "blockquote", B("text-quote", "Blockquote", $.blockquote, { active: t.blockquote })), r(a, "horizontalRule", B("minus", "Horizontal Rule", $.hr)), i(a), r(a, "codeBlock", B("square-code", "Code Block", $.codeBlock, { active: t.code_block })), r(a, "table", B("table", "Insert Table", $.table, { active: t.table })), t.table && y("tableOps") && (i(a), a.push(B("between-vertical-start", "Insert Row Above", $.addRowBefore)), a.push(B("between-vertical-end", "Insert Row Below", $.addRowAfter)), a.push(B("between-horizontal-start", "Insert Column Left", $.addColBefore)), a.push(B("between-horizontal-end", "Insert Column Right", $.addColAfter)), a.push(B("trash-2", "Delete Cell", $.deleteCell))), y("clearFormatting") && (i(a), a.push(B("eraser", "Clear Formatting", $.bold, { onClick: S }))), i(a), r(a, "undo", B("undo-2", "Undo", $.undo)), r(a, "redo", B("redo-2", "Redo", $.redo)), a[a.length - 1]?.type === R && a.pop(), u("div", {
+			})), 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", {
 				key: "sidebar",
 				class: "coar-md-sidebar-wrap",
 				onMousedown: (e) => e.preventDefault()
@@ -920,7 +930,7 @@ var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
 				borderless: !0
 			}, { default: () => a })]);
 		}
-		function H() {
+		function ce() {
 			let e = (e, t, n, r = {}) => u("button", {
 				class: [
 					"coar-md-float-btn",
@@ -938,13 +948,13 @@ var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
 				size: "s"
 			})]), n = () => u("div", { class: "coar-md-float-sep" }), r = m.value;
 			function i(e, t, n) {
-				y(t) && e.push(n);
+				v(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 })), y("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 })), v("textColor")) {
 				let e = r.text_color !== null;
 				l.push(u("button", {
 					class: ["coar-md-float-btn", e ? "coar-md-float-btn--active" : ""],
@@ -959,7 +969,7 @@ var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
 					size: "s"
 				})]));
 			}
-			y("headings") && (a(l), l.push(u("div", { class: "coar-md-float-dropdown" }, [u("button", {
+			v("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",
@@ -1030,10 +1040,10 @@ var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
 			})), 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 })), y("clearFormatting") && (a(l), l.push(e("eraser", "Clear Formatting", $.bold, { onClick: S }))), l[l.length - 1]?.props?.class === "coar-md-float-sep" && l.pop();
+			})), 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();
 			let d = {
 				text: l,
-				table: y("tableOps") ? [
+				table: v("tableOps") ? [
 					e("between-vertical-start", "Insert Row Above", $.addRowBefore),
 					e("between-vertical-end", "Insert Row Below", $.addRowAfter),
 					n(),
@@ -1041,18 +1051,18 @@ var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
 					e("between-horizontal-end", "Insert Column Right", $.addColAfter),
 					n(),
 					e("trash-2", "Delete", $.deleteCell),
-					...y("bold") || y("italic") || y("inlineCode") ? [n()] : [],
-					...y("bold") ? [e("bold", "Bold", $.bold)] : [],
-					...y("italic") ? [e("italic", "Italic", $.italic)] : [],
-					...y("inlineCode") ? [e("code", "Code", $.code)] : []
+					...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)] : []
 				] : l,
-				"col-selection": y("tableOps") ? [
+				"col-selection": v("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": y("tableOps") ? [
+				"row-selection": v("tableOps") ? [
 					e("between-vertical-start", "Insert Row Above", $.addRowBefore),
 					e("between-vertical-end", "Insert Row Below", $.addRowAfter),
 					n(),
@@ -1070,7 +1080,7 @@ var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
 				key: "area",
 				class: ["coar-md-area", "coar-markdown"],
 				onMousedown: T
-			}, [u(re)])), t && s && r.push(V()), a.value && n && r.push(H()), u("div", {
+			}, [u(re)])), t && s && r.push(V()), a.value && n && r.push(ce()), u("div", {
 				class: {
 					"coar-md-root": !0,
 					[`coar-md-root--toolbar-${e.toolbarPosition}`]: !0,
@@ -1135,11 +1145,11 @@ var Ye = [ye("textColor", () => Ke), _e("text_color", () => ({
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let r = e.modelValue, i = v({ value: e.modelValue });
+		let r = e.modelValue, i = ne({ value: e.modelValue });
 		C(() => e.modelValue, (e) => {
 			i.value = { value: e };
 		});
-		let a = d(B, void 0), o = `coar-markdown-editor-${ne()}`, s = n(() => e.id || a?.inputId.value || o), c = n(() => e.error || (a?.hasError.value ?? !1)), l = n(() => a?.messageId.value), f = n(() => e.disabled || (a?.disabled.value ?? !1)), p = n(() => e.readonly || f.value);
+		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, {
 			initialValue: r,
 			externalValue: i.value,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocoar/vue-markdown-editor",
-  "version": "1.16.0",
+  "version": "1.17.0-beta.3",
   "description": "WYSIWYG Markdown editor for Vue 3 based on Milkdown, with Cocoar Design System styling",
   "license": "Apache-2.0",
   "repository": {
@@ -39,12 +39,13 @@
   "scripts": {
     "build": "vite build",
     "test": "vitest run",
-    "lint": "eslint src/"
+    "lint": "eslint src/",
+    "typecheck": "vue-tsc --noEmit"
   },
   "peerDependencies": {
-    "@cocoar/vue-markdown": "1.16.0",
-    "@cocoar/vue-markdown-core": "1.16.0",
-    "@cocoar/vue-ui": "1.16.0",
+    "@cocoar/vue-markdown": "1.17.0-beta.3",
+    "@cocoar/vue-markdown-core": "1.17.0-beta.3",
+    "@cocoar/vue-ui": "1.17.0-beta.3",
     "vue": "^3.5.0"
   },
   "dependencies": {