@kungal/editor-vue 0.30.0 → 0.31.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @kungal/editor-vue
 
+## 0.31.0
+
+### Minor Changes
+
+- 6b3a2f7: Add a loading placeholder and make `<KunEditor>` SSR-safe.
+
+  Under SSR the editor area went blank for a moment while Milkdown hydrated (and it
+  could throw a hydration mismatch, since Milkdown/CodeMirror need the DOM). Now:
+
+  - The editor body mounts **client-side only**; the server and the first client
+    paint render just a **skeleton placeholder**, which hydrates cleanly before the
+    editor swaps in — no mismatch, and the area never collapses to nothing. So
+    `<KunEditor>` no longer needs to be wrapped in `<ClientOnly>`.
+  - The placeholder also covers Milkdown's own create gap, using its `loading` state
+    (`useEditor().loading`), then disappears when the editor is ready.
+  - **`@update:loading`** event — so a host can react (e.g. disable a submit button
+    until ready).
+  - **`#loading` slot** to supply your own placeholder (e.g. a `<KunSkeleton>`), or
+    restyle the default via the `.kun-editor__loading` / `.kun-editor__skeleton`
+    class hooks (a shimmer added to the reference stylesheet).
+
+  Verified in the docs production build: the server HTML contains only the skeleton
+  (no editor DOM); the page hydrates with 0 console errors (mismatch gone); the
+  placeholder shows on first paint and on every remount and is removed once the
+  editor is ready.
+
+### Patch Changes
+
+- @kungal/editor-core@0.31.0
+
 ## 0.30.0
 
 ### Patch Changes

package/dist/components/KunEditor.vue.d.ts

@@ -77,17 +77,21 @@ declare var __VLS_1: {
     adapters: KunEditorAdapters;
     features: KunEditorFeatures;
     locale: KunEditorLocale;
-};
+}, __VLS_48: {};
 type __VLS_Slots = {} & {
     'view-switch'?: (props: typeof __VLS_1) => any;
 } & {
     toolbar?: (props: typeof __VLS_22) => any;
+} & {
+    loading?: (props: typeof __VLS_48) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, KunEditorExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (markdown: string) => any;
+    "update:loading": (loading: boolean) => any;
     "update:headings": (headings: KunHeading[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((markdown: string) => any) | undefined;
+    "onUpdate:loading"?: ((loading: boolean) => any) | undefined;
     "onUpdate:headings"?: ((headings: KunHeading[]) => any) | undefined;
 }>, {
     adapters: KunEditorAdapters;

package/dist/components/KunEditor.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KunEditor.vue.d.ts","sourceRoot":"","sources":["../../src/components/KunEditor.vue"],"names":[],"mappings":"AAkYA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,UAAU,EACX,MAAM,qBAAqB,CAAA;AAO5B,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAUjE,KAAK,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE9C,KAAK,WAAW,GAAG;IACf,gCAAgC;IAChC,UAAU,EAAE,MAAM,CAAA;IAClB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAC5B,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAC5B,qDAAqD;IACrD,MAAM,CAAC,EAAE,eAAe,CAAA;IACxB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,eAAe,CAAC,EAAE,KAAK,GAAG,OAAO,CAAA;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAA;IAClB;oEACgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,gBAAgB,EAAE,CAAA;CAChD,CAAC;AA0bJ,QAAA,IAAI,OAAO;;iBAtXS,QAAQ;;;;;;;;;;;;;CAsXP,EAAE,QAAQ;iEAxf/B,CAnWE;;;;;WAmWF,CA5UQ;aA4UR,CA5UwB;;;;YA4UxB,CAxUkD;;;;;;;;;;;;;;CAg0BmC,CAAE;AACvF,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAClD;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAShD,QAAA,MAAM,UAAU;;;;;;;cAreD,iBAAiB;cAEjB,iBAAiB;YAEnB,eAAe;cAEb,OAAO;iBAEJ,MAAM;qBAMF,KAAK,GAAG,OAAO;sBAgBd,OAAO,GAAG,gBAAgB,EAAE;WAVvC,QAAQ,EAAE;gBAGL,OAAO;6EAmdtB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"KunEditor.vue.d.ts","sourceRoot":"","sources":["../../src/components/KunEditor.vue"],"names":[],"mappings":"AAsbA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,UAAU,EACX,MAAM,qBAAqB,CAAA;AAO5B,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAUjE,KAAK,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE9C,KAAK,WAAW,GAAG;IACf,gCAAgC;IAChC,UAAU,EAAE,MAAM,CAAA;IAClB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAC5B,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,iBAAiB,CAAA;IAC5B,qDAAqD;IACrD,MAAM,CAAC,EAAE,eAAe,CAAA;IACxB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,eAAe,CAAC,EAAE,KAAK,GAAG,OAAO,CAAA;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAA;IAClB;oEACgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,gBAAgB,EAAE,CAAA;CAChD,CAAC;AAgfJ,QAAA,IAAI,OAAO;;iBAzZS,QAAQ;;;;;;;;;;;;;CAyZP,EAAE,QAAQ;iEAtjB/B,CAzY4C;;;;;WAyY5C,CAjX8B;aAiX9B,CAjX8C;;;;YAiX9C,CA5WyB;;;;;;;;;;;;;;CAk6BiB,EAA4C,QAAQ,IAAY,CAAE;AAC5G,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,GAClD;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,GAC7C;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,QAAQ,KAAK,GAAG,CAAA;CAAE,CAAC;AAShD,QAAA,MAAM,UAAU;;;;;;;;;cA5hBD,iBAAiB;cAEjB,iBAAiB;YAEnB,eAAe;cAEb,OAAO;iBAEJ,MAAM;qBAMF,KAAK,GAAG,OAAO;sBAgBd,OAAO,GAAG,gBAAgB,EAAE;WAVvC,QAAQ,EAAE;gBAGL,OAAO;6EA0gBtB,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AAWzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/components/MilkdownEditor.vue.d.ts

@@ -18,8 +18,10 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, KunEditorExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (markdown: string) => any;
+    "update:loading": (loading: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((markdown: string) => any) | undefined;
+    "onUpdate:loading"?: ((loading: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/MilkdownEditor.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MilkdownEditor.vue.d.ts","sourceRoot":"","sources":["../../src/components/MilkdownEditor.vue"],"names":[],"mappings":"AAwSA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EAChB,MAAM,qBAAqB,CAAA;AAI5B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE/C,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,MAAM,EAAE,eAAe,CAAA;IACvB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,KAAK,GAAG,OAAO,CAAA;IAChC,gBAAgB,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,MAAM,EAAE,OAAO,CAAA;CAChB,CAAC;AA2OF,QAAA,MAAM,YAAY;;;;kFAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"MilkdownEditor.vue.d.ts","sourceRoot":"","sources":["../../src/components/MilkdownEditor.vue"],"names":[],"mappings":"AA+SA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EAChB,MAAM,qBAAqB,CAAA;AAI5B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE/C,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,QAAQ,EAAE,iBAAiB,CAAA;IAC3B,MAAM,EAAE,eAAe,CAAA;IACvB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,KAAK,GAAG,OAAO,CAAA;IAChC,gBAAgB,EAAE,OAAO,CAAA;IACzB;;;;OAIG;IACH,MAAM,EAAE,OAAO,CAAA;CAChB,CAAC;AAkPF,QAAA,MAAM,YAAY;;;;;;kFAIhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/index.js

@@ -2,14 +2,14 @@ import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r
 import { Milkdown as E, MilkdownProvider as D, useEditor as O, useInstance as k } from "@milkdown/vue";
 import { ProsemirrorAdapterProvider as A, usePluginViewContext as j, usePluginViewFactory as M } from "@prosemirror-adapter/vue";
 import { parseHeadings as N, parseHeadings as ee } from "@kungal/editor-core";
-import { Editor as P, defaultValueCtx as F, editorViewCtx as I, editorViewOptionsCtx as te, rootCtx as L } from "@milkdown/kit/core";
+import { Editor as te, defaultValueCtx as P, editorViewCtx as F, editorViewOptionsCtx as I, rootCtx as L } from "@milkdown/kit/core";
 import { listenerCtx as R } from "@milkdown/kit/plugin/listener";
-import { SlashProvider as z, slashFactory as B } from "@milkdown/kit/plugin/slash";
-import { TooltipProvider as V, tooltipFactory as H } from "@milkdown/kit/plugin/tooltip";
-import { callCommand as U, replaceAll as ne } from "@milkdown/kit/utils";
-import { TextSelection as W } from "@milkdown/kit/prose/state";
-import { createCodeBlockCommand as G, insertHrCommand as K, insertImageCommand as q, toggleEmphasisCommand as re, toggleInlineCodeCommand as ie, toggleStrongCommand as ae, wrapInBlockquoteCommand as oe, wrapInBulletListCommand as se, wrapInOrderedListCommand as ce } from "@milkdown/kit/preset/commonmark";
-import { createKunEditorPlugins as le, insertKunSpoilerCommand as ue, insertLinkCommand as J, insertMentionCommand as de, insertQuoteCommand as fe, kunCM as pe, mentionId as me, setHeadingCommand as he, startImageUpload as ge } from "@kungal/editor-core/preset";
+import { SlashProvider as z, slashFactory as ne } from "@milkdown/kit/plugin/slash";
+import { TooltipProvider as B, tooltipFactory as re } from "@milkdown/kit/plugin/tooltip";
+import { callCommand as V, replaceAll as H } from "@milkdown/kit/utils";
+import { TextSelection as U } from "@milkdown/kit/prose/state";
+import { createCodeBlockCommand as W, insertHrCommand as ie, insertImageCommand as G, toggleEmphasisCommand as K, toggleInlineCodeCommand as q, toggleStrongCommand as J, wrapInBlockquoteCommand as ae, wrapInBulletListCommand as oe, wrapInOrderedListCommand as se } from "@milkdown/kit/preset/commonmark";
+import { createKunEditorPlugins as ce, insertKunSpoilerCommand as le, insertLinkCommand as ue, insertMentionCommand as de, insertQuoteCommand as fe, kunCM as pe, mentionId as me, setHeadingCommand as he, startImageUpload as ge } from "@kungal/editor-core/preset";
 import { toggleStrikethroughCommand as _e } from "@milkdown/kit/preset/gfm";
 import { Annotation as ve, EditorState as ye } from "@codemirror/state";
 import { EditorView as Y } from "@codemirror/view";
@@ -64,7 +64,7 @@ var X = Symbol("kun-editor-context"), Se = [
 			if (!t.empty) return null;
 			let { $from: n } = t, i = n.parent.textBetween(Math.max(0, n.parentOffset - 100), n.parentOffset, void 0, "").match(r);
 			return i ? i[1] ?? "" : null;
-		}, P = (e) => {
+		}, te = (e) => {
 			let t = ee(e);
 			if (t === null) return !1;
 			let n = e.state.selection.$from.pos;
@@ -72,7 +72,7 @@ var X = Symbol("kun-editor-context"), Se = [
 				from: n - (t.length + 1),
 				to: n
 			}, t !== C.value && (C.value = t, N(t)), !0;
-		}, F = (e) => {
+		}, P = (e) => {
 			let t = d.value;
 			if (!t || !O) return;
 			let n = t.state.schema.nodes[me];
@@ -81,8 +81,8 @@ var X = Symbol("kun-editor-context"), Se = [
 				userId: e.id,
 				name: e.name
 			}), { from: i, to: a } = O, o = t.state.tr.replaceWith(i, a, r), s = i + r.nodeSize;
-			o.insertText(" ", s), o.setSelection(W.create(o.doc, s + 1)), t.dispatch(o.scrollIntoView()), t.focus(), b.hide();
-		}, I = (e) => {
+			o.insertText(" ", s), o.setSelection(U.create(o.doc, s + 1)), t.dispatch(o.scrollIntoView()), t.focus(), b.hide();
+		}, F = (e) => {
 			if (!x.value || !w.value.length) {
 				x.value && e.key === "Escape" && (e.preventDefault(), b.hide());
 				return;
@@ -98,7 +98,7 @@ var X = Symbol("kun-editor-context"), Se = [
 				case "Enter":
 				case "Tab": {
 					let t = w.value[E.value];
-					t && (e.preventDefault(), e.stopPropagation(), F(t));
+					t && (e.preventDefault(), e.stopPropagation(), P(t));
 					break;
 				}
 				case "Escape":
@@ -110,17 +110,17 @@ var X = Symbol("kun-editor-context"), Se = [
 			b = new z({
 				content: v.value,
 				trigger: "@",
-				shouldShow: P,
+				shouldShow: te,
 				debounce: 0
 			}), b.onShow = () => {
 				x.value = !0;
 			}, b.onHide = () => {
 				x.value = !1, M();
-			}, b.update(d.value, h.value), window.addEventListener("keydown", I, !0);
+			}, b.update(d.value, h.value), window.addEventListener("keydown", F, !0);
 		}), S([d, h], () => {
 			b?.update(d.value, h.value);
 		}), f(() => {
-			A && clearTimeout(A), window.removeEventListener("keydown", I, !0), b?.destroy();
+			A && clearTimeout(A), window.removeEventListener("keydown", F, !0), b?.destroy();
 		}), (t, n) => (m(), i("div", {
 			ref_key: "divRef",
 			ref: v,
@@ -131,7 +131,7 @@ var X = Symbol("kun-editor-context"), Se = [
 			type: "button",
 			class: "kun-mention-dropdown__item",
 			"data-active": t === E.value,
-			onMousedown: T((t) => F(e), ["prevent"]),
+			onMousedown: T((t) => P(e), ["prevent"]),
 			onMouseenter: (e) => E.value = t
 		}, [e.avatar ? (m(), i("img", {
 			key: 0,
@@ -170,25 +170,25 @@ var X = Symbol("kun-editor-context"), Se = [
 	__name: "SelectionTooltip",
 	setup(n) {
 		let { view: r, prevState: o } = j(), [, s] = k(), c = l(X), u = t(() => (c?.locale ?? "zh-cn").toLowerCase().startsWith("en")), d = g(null), h, v = (e, t) => {
-			s()?.action(U(e, t));
+			s()?.action(V(e, t));
 		}, y = async () => {
 			let e = r.value, { from: t, to: n } = e?.state.selection ?? {
 				from: 0,
 				to: 0
 			}, i = e ? e.state.doc.textBetween(t, n, " ") : "", a = c?.adapters.linkPrompt, o = (a ? await a({ text: i }) : window.prompt(u.value ? "Link URL" : "链接 URL"))?.trim();
-			o && v(J.key, { href: o });
+			o && v(ue.key, { href: o });
 		}, b = t(() => {
 			let e = u.value;
 			return {
 				bold: {
 					svg: $.bold,
 					title: e ? "Bold" : "加粗",
-					run: () => v(ae.key)
+					run: () => v(J.key)
 				},
 				italic: {
 					svg: $.italic,
 					title: e ? "Italic" : "斜体",
-					run: () => v(re.key)
+					run: () => v(K.key)
 				},
 				strike: {
 					svg: $.strike,
@@ -198,7 +198,7 @@ var X = Symbol("kun-editor-context"), Se = [
 				code: {
 					svg: $.code,
 					title: e ? "Inline code" : "行内代码",
-					run: () => v(ie.key)
+					run: () => v(q.key)
 				},
 				link: {
 					svg: $.link,
@@ -222,7 +222,7 @@ var X = Symbol("kun-editor-context"), Se = [
 			return n;
 		});
 		return p(() => {
-			h = new V({
+			h = new B({
 				content: d.value,
 				offset: 8
 			}), h.update(r.value, o.value);
@@ -260,46 +260,46 @@ var X = Symbol("kun-editor-context"), Se = [
 		selectionToolbar: { type: Boolean },
 		active: { type: Boolean }
 	},
-	emits: ["update:modelValue"],
+	emits: ["update:modelValue", "update:loading"],
 	setup(e, { expose: t, emit: r }) {
-		let i = e, a = r, o = i.modelValue, s = !1, c = M(), l = B("kunMention"), u = i.features.mention !== !1 && !!i.adapters.searchMentionUsers && !!c, d = H("kunSelectionTooltip"), f = i.selectionToolbar && !!c, p = O((e) => {
-			let t = P.make().config((t) => {
-				t.set(L, e), t.set(F, i.modelValue), t.get(R).markdownUpdated((e, t, n) => {
+		let i = e, a = r, o = i.modelValue, s = !1, c = M(), l = ne("kunMention"), u = i.features.mention !== !1 && !!i.adapters.searchMentionUsers && !!c, d = re("kunSelectionTooltip"), f = i.selectionToolbar && !!c, p = O((e) => {
+			let t = te.make().config((t) => {
+				t.set(L, e), t.set(P, i.modelValue), t.get(R).markdownUpdated((e, t, n) => {
 					!i.active || s || t === n || (o = t, a("update:modelValue", t));
-				}), t.update(te, (e) => ({
+				}), t.update(I, (e) => ({
 					...e,
 					editable: () => !i.readonly
 				})), u && t.set(l.key, { view: c({ component: ke }) }), f && t.set(d.key, { view: c({ component: Ne }) });
-			}).use(le(i.adapters, i.features, {
+			}).use(ce(i.adapters, i.features, {
 				locale: i.locale,
 				placeholder: i.placeholder,
 				placeholderMode: i.placeholderMode
 			}));
 			return u && t.use(l), f && t.use(d), t;
 		});
-		S(() => i.modelValue, (e) => {
+		S(p.loading, (e) => a("update:loading", e), { immediate: !0 }), S(() => i.modelValue, (e) => {
 			if (e === o) return;
 			o = e;
 			let t = p.get();
-			t && (s = !0, t.action(ne(e)), s = !1);
+			t && (s = !0, t.action(H(e)), s = !1);
 		}), S(() => i.readonly, () => {
 			p.get()?.action((e) => {
-				let t = e.get(I);
+				let t = e.get(F);
 				t.dispatch(t.state.tr);
 			});
 		});
 		let h = () => {
-			p.get()?.action((e) => e.get(I).focus());
+			p.get()?.action((e) => e.get(F).focus());
 		};
 		return t({
 			insertQuote: (e) => {
-				p.get()?.action(U(fe.key, e)), h();
+				p.get()?.action(V(fe.key, e)), h();
 			},
 			insertMention: (e) => {
-				p.get()?.action(U(de.key, e)), h();
+				p.get()?.action(V(de.key, e)), h();
 			},
 			insertImage: (e) => {
-				p.get()?.action(U(q.key, {
+				p.get()?.action(V(G.key, {
 					src: e.src,
 					alt: e.alt ?? "",
 					title: e.title ?? ""
@@ -308,7 +308,7 @@ var X = Symbol("kun-editor-context"), Se = [
 			uploadImage: (e) => {
 				let t = i.adapters.uploadImage, n = p.get();
 				!t || !n || n.action((n) => {
-					ge(n.get(I), e, {
+					ge(n.get(F), e, {
 						uploadImage: t,
 						notify: i.adapters.notify,
 						locale: i.locale
@@ -318,14 +318,14 @@ var X = Symbol("kun-editor-context"), Se = [
 			focus: h,
 			scrollToHeading: (e) => {
 				p.get()?.action((t) => {
-					let n = t.get(I), r = 0, i = -1;
+					let n = t.get(F), r = 0, i = -1;
 					if (n.state.doc.forEach((t, n) => {
 						t.type.name === "heading" && (r === e && (i = n), r += 1);
 					}), !(i < 0) && (n.nodeDOM(i)?.scrollIntoView({
 						behavior: "smooth",
 						block: "start"
 					}), n.editable)) {
-						let e = W.near(n.state.doc.resolve(i + 1));
+						let e = U.near(n.state.doc.resolve(i + 1));
 						n.dispatch(n.state.tr.setSelection(e)), n.focus();
 					}
 				});
@@ -378,11 +378,11 @@ var X = Symbol("kun-editor-context"), Se = [
 		p(() => document.addEventListener("click", j)), f(() => document.removeEventListener("click", j));
 		let M = (e) => {
 			o()?.action((t) => {
-				let n = t.get(I), { state: r } = n;
+				let n = t.get(F), { state: r } = n;
 				n.dispatch(r.tr.insertText(e, r.selection.from));
 			});
 		}, N = (e, t) => {
-			o()?.action(U(q.key, {
+			o()?.action(V(G.key, {
 				src: e,
 				title: t,
 				alt: t
@@ -451,15 +451,15 @@ var X = Symbol("kun-editor-context"), Se = [
 	__name: "EditorToolbar",
 	setup(n) {
 		let [, s] = k(), c = l(X), u = t(() => c?.adapters.uploadImage), d = t(() => c?.features.sticker !== !1), f = t(() => (c?.locale ?? "zh-cn").toLowerCase().startsWith("en")), p = (e, t) => {
-			s()?.action(U(e, t));
+			s()?.action(V(e, t));
 		}, h = async () => {
 			let e = "";
 			s()?.action((t) => {
-				let n = t.get(I), { from: r, to: i } = n.state.selection;
+				let n = t.get(F), { from: r, to: i } = n.state.selection;
 				e = n.state.doc.textBetween(r, i, " ");
 			});
 			let t = c?.adapters.linkPrompt, n = (t ? await t({ text: e }) : window.prompt(f.value ? "Link URL" : "链接 URL"))?.trim();
-			n && p(J.key, { href: n });
+			n && p(ue.key, { href: n });
 		}, v = t(() => {
 			let e = f.value;
 			return {
@@ -499,12 +499,12 @@ var X = Symbol("kun-editor-context"), Se = [
 				{
 					svg: $.bold,
 					title: v.value.bold,
-					run: () => p(ae.key)
+					run: () => p(J.key)
 				},
 				{
 					svg: $.italic,
 					title: v.value.italic,
-					run: () => p(re.key)
+					run: () => p(K.key)
 				},
 				{
 					svg: $.strike,
@@ -514,7 +514,7 @@ var X = Symbol("kun-editor-context"), Se = [
 				{
 					svg: $.code,
 					title: v.value.code,
-					run: () => p(ie.key)
+					run: () => p(q.key)
 				},
 				{
 					svg: $.link,
@@ -526,40 +526,40 @@ var X = Symbol("kun-editor-context"), Se = [
 				{
 					svg: $.bulletList,
 					title: v.value.bulletList,
-					run: () => p(se.key)
+					run: () => p(oe.key)
 				},
 				{
 					svg: $.orderedList,
 					title: v.value.orderedList,
-					run: () => p(ce.key)
+					run: () => p(se.key)
 				},
 				{
 					svg: $.quote,
 					title: v.value.quote,
-					run: () => p(oe.key)
+					run: () => p(ae.key)
 				},
 				{
 					svg: $.codeBlock,
 					title: v.value.codeBlock,
-					run: () => p(G.key, "")
+					run: () => p(W.key, "")
 				},
 				{
 					svg: $.hr,
 					title: v.value.hr,
-					run: () => p(K.key)
+					run: () => p(ie.key)
 				}
 			],
 			[{
 				svg: $.spoiler,
 				title: v.value.spoiler,
-				run: () => p(ue.key)
+				run: () => p(le.key)
 			}]
 		]), w = g(null), T = () => w.value?.click(), E = (e) => {
 			let t = e.target, n = t.files?.[0];
 			t.value = "";
 			let r = u.value;
 			!n || !r || s()?.action((e) => {
-				ge(e.get(I), n, {
+				ge(e.get(F), n, {
 					uploadImage: r,
 					notify: c?.adapters.notify,
 					locale: c?.locale
@@ -623,21 +623,21 @@ var X = Symbol("kun-editor-context"), Se = [
 	__name: "ToolbarHost",
 	setup(e) {
 		let [, t] = k(), n = l(X, void 0), r = (e, n) => {
-			t()?.action(U(e, n));
+			t()?.action(V(e, n));
 		}, i = () => {
-			t()?.action((e) => e.get(I).focus());
+			t()?.action((e) => e.get(F).focus());
 		}, a = {
 			run: r,
 			insertText: (e) => {
 				t()?.action((t) => {
-					let n = t.get(I);
+					let n = t.get(F);
 					n.dispatch(n.state.tr.insertText(e));
 				}), i();
 			},
 			uploadImage: (e) => {
 				let r = n?.adapters.uploadImage, i = t();
 				!r || !i || i.action((t) => {
-					ge(t.get(I), e, {
+					ge(t.get(F), e, {
 						uploadImage: r,
 						notify: n?.adapters.notify,
 						locale: n?.locale
@@ -645,10 +645,10 @@ var X = Symbol("kun-editor-context"), Se = [
 				});
 			},
 			insertLink: (e) => {
-				r(J.key, e), i();
+				r(ue.key, e), i();
 			},
 			insertImage: (e) => {
-				r(q.key, {
+				r(G.key, {
 					src: e.src,
 					alt: e.alt ?? "",
 					title: e.title ?? ""
@@ -757,7 +757,11 @@ var X = Symbol("kun-editor-context"), Se = [
 	"data-active",
 	"title",
 	"aria-pressed"
-], pt = ["data-swap"], mt = { class: "kun-editor__wysiwyg kun-editor__pane" }, ht = /* @__PURE__ */ s({
+], pt = ["data-swap"], mt = { class: "kun-editor__wysiwyg kun-editor__pane" }, ht = {
+	key: 1,
+	class: "kun-editor__loading",
+	"aria-hidden": "true"
+}, gt = /* @__PURE__ */ s({
 	__name: "KunEditor",
 	props: {
 		modelValue: {},
@@ -784,44 +788,54 @@ var X = Symbol("kun-editor-context"), Se = [
 			default: !0
 		}
 	},
-	emits: ["update:modelValue", "update:headings"],
-	setup(s, { expose: l, emit: p }) {
-		let T = [
+	emits: [
+		"update:modelValue",
+		"update:headings",
+		"update:loading"
+	],
+	setup(s, { expose: l, emit: T }) {
+		let E = [
 			"bold",
 			"italic",
 			"strike",
 			"code",
 			"link"
-		], E = s, O = p;
-		S(() => E.modelValue, (e) => O("update:headings", ee(e)), { immediate: !0 }), h(X, {
+		], O = s, k = T, j = g(!1);
+		p(() => {
+			j.value = !0;
+		});
+		let M = g(!0), N = (e) => {
+			M.value = e, k("update:loading", e);
+		};
+		S(() => O.modelValue, (e) => k("update:headings", ee(e)), { immediate: !0 }), h(X, {
 			get adapters() {
-				return E.adapters;
+				return O.adapters;
 			},
 			get features() {
-				return E.features;
+				return O.features;
 			},
 			get locale() {
-				return E.locale;
+				return O.locale;
 			},
 			get selectionToolbarItems() {
-				return Array.isArray(E.selectionToolbar) ? E.selectionToolbar : T;
+				return Array.isArray(O.selectionToolbar) ? O.selectionToolbar : E;
 			}
 		});
-		let k = t(() => E.selectionToolbar !== !1), j = g(E.views.includes("wysiwyg") ? "wysiwyg" : E.views[0] ?? "wysiwyg"), M = (e) => {
-			j.value = e;
+		let te = t(() => O.selectionToolbar !== !1), P = g(O.views.includes("wysiwyg") ? "wysiwyg" : O.views[0] ?? "wysiwyg"), F = (e) => {
+			P.value = e;
 		};
-		S(() => E.views, (e) => {
-			e.includes(j.value) || (j.value = e[0] ?? "wysiwyg");
+		S(() => O.views, (e) => {
+			e.includes(P.value) || (P.value = e[0] ?? "wysiwyg");
 		});
-		let N = g(!1), P = () => {
-			N.value = !N.value;
-		}, F = g(E.scrollSync);
-		S(() => E.scrollSync, (e) => {
-			F.value = e;
+		let I = g(!1), L = () => {
+			I.value = !I.value;
+		}, R = g(O.scrollSync);
+		S(() => O.scrollSync, (e) => {
+			R.value = e;
 		});
-		let I = () => {
-			F.value = !F.value;
-		}, te = t(() => E.locale.toLowerCase().startsWith("en")), L = t(() => te.value ? {
+		let z = () => {
+			R.value = !R.value;
+		}, ne = t(() => O.locale.toLowerCase().startsWith("en")), B = t(() => ne.value ? {
 			wysiwyg: "Preview",
 			source: "Markdown",
 			split: "Split",
@@ -833,103 +847,104 @@ var X = Symbol("kun-editor-context"), Se = [
 			split: "分栏",
 			swap: "左右互换",
 			scrollSync: "同步滚动"
-		}), R = g(null), z = null, B = null, V = null, H = () => {
-			z?.(), z = null, B = null;
-		}, U = () => {
-			H();
-			let e = R.value;
+		}), re = g(null), V = null, H = null, U = null, W = () => {
+			V?.(), V = null, H = null;
+		}, ie = () => {
+			W();
+			let e = re.value;
 			if (!e) return;
 			let t = e.querySelector(".cm-scroller"), n = e.querySelector(".kun-editor__wysiwyg");
 			if (!t || !n) return;
 			let r = (e, t) => () => {
-				if (B && B !== e) return;
-				B = e;
+				if (H && H !== e) return;
+				H = e;
 				let n = e.scrollHeight - e.clientHeight, r = n > 0 ? e.scrollTop / n : 0, i = t.scrollHeight - t.clientHeight;
-				t.scrollTop = r * (i > 0 ? i : 0), V && clearTimeout(V), V = setTimeout(() => {
-					B = null;
+				t.scrollTop = r * (i > 0 ? i : 0), U && clearTimeout(U), U = setTimeout(() => {
+					H = null;
 				}, 120);
 			}, i = r(t, n), a = r(n, t);
-			t.addEventListener("scroll", i, { passive: !0 }), n.addEventListener("scroll", a, { passive: !0 }), z = () => {
+			t.addEventListener("scroll", i, { passive: !0 }), n.addEventListener("scroll", a, { passive: !0 }), V = () => {
 				t.removeEventListener("scroll", i), n.removeEventListener("scroll", a);
 			};
 		};
-		S([j, F], ([e, t]) => {
-			H(), e === "split" && t && u(U);
-		}), f(H);
-		let ne = t(() => E.readonly || j.value === "split"), W = (e) => O("update:modelValue", e), G = g(null), K = g(null);
+		S([P, R], ([e, t]) => {
+			W(), e === "split" && t && u(ie);
+		}), f(W);
+		let G = t(() => O.readonly || P.value === "split"), K = (e) => k("update:modelValue", e), q = g(null), J = g(null);
 		return l({
-			insertQuote: (e) => G.value?.insertQuote(e),
-			insertMention: (e) => G.value?.insertMention(e),
-			insertImage: (e) => G.value?.insertImage(e),
-			uploadImage: (e) => G.value?.uploadImage(e),
-			focus: () => G.value?.focus(),
+			insertQuote: (e) => q.value?.insertQuote(e),
+			insertMention: (e) => q.value?.insertMention(e),
+			insertImage: (e) => q.value?.insertImage(e),
+			uploadImage: (e) => q.value?.uploadImage(e),
+			focus: () => q.value?.focus(),
 			scrollToHeading: (e) => {
-				j.value === "source" || j.value === "split" ? K.value?.scrollToHeading(e) : G.value?.scrollToHeading(e);
+				P.value === "source" || P.value === "split" ? J.value?.scrollToHeading(e) : q.value?.scrollToHeading(e);
 			}
 		}), (t, l) => (m(), i("div", {
 			ref_key: "rootEl",
-			ref: R,
+			ref: re,
 			class: "kun-editor",
 			"data-kun-editor": "",
-			"data-mode": j.value
-		}, [v(t.$slots, "view-switch", {
-			mode: j.value,
-			setMode: M,
-			labels: L.value,
+			"data-mode": P.value
+		}, [j.value ? (m(), i(e, { key: 0 }, [v(t.$slots, "view-switch", {
+			mode: P.value,
+			setMode: F,
+			labels: B.value,
 			views: s.views,
-			swapped: N.value,
-			swap: P,
-			scrollSync: F.value,
-			toggleScrollSync: I
+			swapped: I.value,
+			swap: L,
+			scrollSync: R.value,
+			toggleScrollSync: z
 		}, () => [s.views.length > 1 ? (m(), i("div", lt, [(m(!0), i(e, null, _(s.views, (e) => (m(), i("button", {
 			key: e,
 			type: "button",
 			class: "kun-editor__tab",
-			"aria-selected": j.value === e,
-			"data-active": j.value === e,
-			onClick: (t) => M(e)
-		}, y(L.value[e]), 9, ut))), 128)), j.value === "split" ? (m(), i(e, { key: 0 }, [a("button", {
+			"aria-selected": P.value === e,
+			"data-active": P.value === e,
+			onClick: (t) => F(e)
+		}, y(B.value[e]), 9, ut))), 128)), P.value === "split" ? (m(), i(e, { key: 0 }, [a("button", {
 			type: "button",
 			class: "kun-editor__tab kun-editor__swap",
-			title: L.value.swap,
-			"aria-label": L.value.swap,
-			onClick: l[0] ||= (e) => P()
+			title: B.value.swap,
+			"aria-label": B.value.swap,
+			onClick: l[0] ||= (e) => L()
 		}, " ⇄ ", 8, dt), a("button", {
 			type: "button",
 			class: "kun-editor__tab",
-			"data-active": F.value,
-			title: L.value.scrollSync,
-			"aria-pressed": F.value,
-			onClick: l[1] ||= (e) => I()
-		}, y(L.value.scrollSync), 9, ft)], 64)) : r("", !0)])) : r("", !0)]), o(b(D), null, {
+			"data-active": R.value,
+			title: B.value.scrollSync,
+			"aria-pressed": R.value,
+			onClick: l[1] ||= (e) => z()
+		}, y(B.value.scrollSync), 9, ft)], 64)) : r("", !0)])) : r("", !0)]), o(b(D), null, {
 			default: C(() => [o(b(A), null, {
 				default: C(() => [w(a("div", null, [o(ot, null, {
 					default: C((e) => [v(t.$slots, "toolbar", d(c(e)), () => [o(at)])]),
 					_: 3
-				})], 512), [[x, j.value === "wysiwyg" && !s.readonly]]), a("div", {
+				})], 512), [[x, P.value === "wysiwyg" && !s.readonly]]), a("div", {
 					class: "kun-editor__panes",
-					"data-swap": N.value
-				}, [j.value === "source" || j.value === "split" ? (m(), n(st, {
+					"data-swap": I.value
+				}, [P.value === "source" || P.value === "split" ? (m(), n(st, {
 					key: 0,
 					ref_key: "source",
-					ref: K,
+					ref: J,
 					class: "kun-editor__pane",
 					"model-value": s.modelValue,
 					readonly: s.readonly,
-					"onUpdate:modelValue": W
+					"onUpdate:modelValue": K
 				}, null, 8, ["model-value", "readonly"])) : r("", !0), w(a("div", mt, [o(Pe, {
 					ref_key: "inner",
-					ref: G,
+					ref: q,
 					"model-value": s.modelValue,
 					adapters: s.adapters,
 					features: s.features,
 					locale: s.locale,
-					readonly: ne.value,
+					readonly: G.value,
 					placeholder: s.placeholder,
 					"placeholder-mode": s.placeholderMode,
-					active: j.value === "wysiwyg" && !s.readonly,
-					"selection-toolbar": k.value,
-					"onUpdate:modelValue": W
+					active: P.value === "wysiwyg" && !s.readonly,
+					"selection-toolbar": te.value,
+					"onUpdate:modelValue": K,
+					"onUpdate:loading": N
 				}, null, 8, [
 					"model-value",
 					"adapters",
@@ -940,14 +955,18 @@ var X = Symbol("kun-editor-context"), Se = [
 					"placeholder-mode",
 					"active",
 					"selection-toolbar"
-				])], 512), [[x, j.value === "wysiwyg" || j.value === "split"]])], 8, pt)]),
+				])], 512), [[x, P.value === "wysiwyg" || P.value === "split"]])], 8, pt)]),
 				_: 3
 			})]),
 			_: 3
-		})], 8, ct));
+		})], 64)) : r("", !0), !j.value || M.value ? (m(), i("div", ht, [v(t.$slots, "loading", {}, () => [
+			l[2] ||= a("div", { class: "kun-editor__skeleton" }, null, -1),
+			l[3] ||= a("div", { class: "kun-editor__skeleton" }, null, -1),
+			l[4] ||= a("div", { class: "kun-editor__skeleton" }, null, -1)
+		])])) : r("", !0)], 8, ct));
 	}
-}), gt = { install(e) {
-	e.component("KunEditor", ht);
+}), _t = { install(e) {
+	e.component("KunEditor", gt);
 } };
 //#endregion
-export { Fe as EMOJI, ht as KunEditor, gt as KunEditorPlugin, N as parseHeadings };
+export { Fe as EMOJI, gt as KunEditor, _t as KunEditorPlugin, N as parseHeadings };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kungal/editor-vue",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "KunEditor Vue 3 layer — the headless <KunEditor> component (dual WYSIWYG / markdown-source), toolbar and plugin views. Ships zero CSS and no UI-kit dependency; consumes @kungal/editor-core, and pairs with @kungal/editor-nuxt for optional KunUI chrome.",
   "type": "module",
   "keywords": [
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@prosemirror-adapter/vue": "^0.4.6",
-    "@kungal/editor-core": "0.30.0"
+    "@kungal/editor-core": "0.31.0"
   },
   "peerDependencies": {
     "@codemirror/lang-markdown": "^6.0.0",
@@ -80,7 +80,7 @@
     "vite": "^8.0.16",
     "vue": "^3.5.35",
     "vue-tsc": "^3.3.3",
-    "@kungal/editor-core": "0.30.0"
+    "@kungal/editor-core": "0.31.0"
   },
   "scripts": {
     "build": "vite build && vue-tsc -p tsconfig.build.json",