@kungal/editor-vue 0.19.0 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @kungal/editor-vue
 
+## 0.20.0
+
+### Minor Changes
+
+- 62e14f5: Split view: sync scrolling between the panes, with an off switch.
+
+  Scrolling the markdown source pane now scrolls the WYSIWYG preview to the same
+  position (and vice-versa) — proportional/percentage sync (source↔preview line
+  mapping is impractical across two separate renderers), with an active-pane +
+  idle-timeout guard so the echoed scroll doesn't feed back into a loop.
+
+  Turn it off two ways (for downstream customization):
+
+  - **`scrollSync` prop** on `<KunEditor>` (default `true`) — pass
+    `:scroll-sync="false"` to disable entirely.
+  - **A runtime toggle** in the view switch: `KunEditorViewSwitchApi` gains
+    `scrollSync` / `toggleScrollSync()` (+ `labels.scrollSync`). The default view
+    switch shows a 同步滚动 toggle in split mode; `<KunEditorViewSwitch>` (editor-nuxt)
+    shows a KunUI link/unlink toggle button. Or replace the whole control via the
+    `#view-switch` slot.
+
+  Sync needs each pane to scroll internally, so the reference `kun-editor.css` now
+  gives split panes a bounded height (`--kun-editor-split-height`, default `60vh`,
+  overridable) with `overflow: auto`. editor-vue still ships zero CSS.
+
+  Verified in the docs production build (headless + KunUI view switches): with the
+  panes overflowing, scrolling the source drives the preview to the same ratio;
+  toggling off makes them scroll independently; toggling on resumes; 0 console
+  errors.
+
+### Patch Changes
+
+- @kungal/editor-core@0.20.0
+
 ## 0.19.0
 
 ### Minor Changes

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

@@ -13,6 +13,9 @@ type __VLS_Props = {
     readonly?: boolean;
     /** Placeholder text shown while the editor is empty. */
     placeholder?: string;
+    /** Sync scrolling between the split panes. Default `true`; set `false` to
+     * disable (or toggle it at runtime via the view-switch API). */
+    scrollSync?: boolean;
 };
 type ViewMode = 'wysiwyg' | 'source' | 'split';
 declare var __VLS_1: {
@@ -23,9 +26,12 @@ declare var __VLS_1: {
         source: string;
         split: string;
         swap: string;
+        scrollSync: string;
     };
     swapped: boolean;
     swap: () => void;
+    scrollSync: boolean;
+    toggleScrollSync: () => void;
 }, __VLS_22: {
     run: <T>(key: import("@milkdown/kit/core").CmdKey<T>, payload?: T) => void;
     insertText: (text: string) => void;
@@ -58,6 +64,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, KunEditorEx
     locale: KunEditorLocale;
     readonly: boolean;
     placeholder: string;
+    scrollSync: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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":"AA6NA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EAChB,MAAM,qBAAqB,CAAA;AAM5B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE/C,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,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAC;AAqCJ,KAAK,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AAkQ9C,QAAA,IAAI,OAAO;;iBAhQS,QAAQ;;;;;;;;;CAgQP,EAAE,QAAQ;iEAnU/B,CAjNuE;;;;;;;;;;;;;;;CAohBP,CAAE;AAClE,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;AAOhD,QAAA,MAAM,UAAU;;;;;cA1TD,iBAAiB;cAEjB,iBAAiB;YAEnB,eAAe;cAEb,OAAO;iBAEJ,MAAM;6EAuTtB,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":"AA6TA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EAChB,MAAM,qBAAqB,CAAA;AAM5B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE/C,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,wDAAwD;IACxD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;oEACgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAC;AAsCJ,KAAK,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;AAsW9C,QAAA,IAAI,OAAO;;iBApWS,QAAQ;;;;;;;;;;;;CAoWP,EAAE,QAAQ;iEA3a/B,CAjTuE;;;;;;;;;;;;;;;CA4tBP,CAAE;AAClE,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;AAQhD,QAAA,MAAM,UAAU;;;;;cAnaD,iBAAiB;cAEjB,iBAAiB;YAEnB,eAAe;cAEb,OAAO;iBAEJ,MAAM;gBAGP,OAAO;6EA6ZtB,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/index.js

@@ -1,39 +1,39 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, guardReactiveProps as c, inject as l, normalizeProps as u, onBeforeUnmount as d, onMounted as f, openBlock as p, provide as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, vShow as b, watch as x, withCtx as S, withDirectives as C, withModifiers as w } from "vue";
-import { Milkdown as T, MilkdownProvider as E, useEditor as D, useInstance as O } from "@milkdown/vue";
-import { ProsemirrorAdapterProvider as k, usePluginViewContext as A, usePluginViewFactory as j } from "@prosemirror-adapter/vue";
-import { Editor as M, defaultValueCtx as N, editorViewCtx as P, editorViewOptionsCtx as F, rootCtx as I } from "@milkdown/kit/core";
-import { listenerCtx as L } from "@milkdown/kit/plugin/listener";
-import { SlashProvider as ee, slashFactory as te } from "@milkdown/kit/plugin/slash";
-import { callCommand as R, replaceAll as ne } from "@milkdown/kit/utils";
-import { createKunEditorPlugins as re, insertKunSpoilerCommand as ie, insertMentionCommand as z, insertQuoteCommand as B, kunCM as ae, mentionId as oe, setHeadingCommand as se, startImageUpload as V } from "@kungal/editor-core/preset";
-import { TextSelection as ce } from "@milkdown/kit/prose/state";
-import { createCodeBlockCommand as H, insertHrCommand as U, insertImageCommand as W, toggleEmphasisCommand as G, toggleInlineCodeCommand as le, toggleStrongCommand as ue, wrapInBlockquoteCommand as de, wrapInBulletListCommand as fe, wrapInOrderedListCommand as pe } from "@milkdown/kit/preset/commonmark";
-import { toggleStrikethroughCommand as me } from "@milkdown/kit/preset/gfm";
-import { EditorState as he } from "@codemirror/state";
-import { EditorView as K } from "@codemirror/view";
-import { markdown as ge } from "@codemirror/lang-markdown";
-import { basicSetup as _e } from "codemirror";
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, guardReactiveProps as c, inject as l, nextTick as u, normalizeProps as d, onBeforeUnmount as f, onMounted as p, openBlock as m, provide as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, vShow as x, watch as S, withCtx as C, withDirectives as w, withModifiers as T } from "vue";
+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 { Editor as N, 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 { callCommand as V, replaceAll as H } from "@milkdown/kit/utils";
+import { createKunEditorPlugins as U, insertKunSpoilerCommand as W, insertMentionCommand as G, insertQuoteCommand as K, kunCM as ee, mentionId as te, setHeadingCommand as ne, startImageUpload as q } from "@kungal/editor-core/preset";
+import { TextSelection as re } from "@milkdown/kit/prose/state";
+import { createCodeBlockCommand as ie, insertHrCommand as ae, insertImageCommand as oe, toggleEmphasisCommand as se, toggleInlineCodeCommand as ce, toggleStrongCommand as le, wrapInBlockquoteCommand as ue, wrapInBulletListCommand as de, wrapInOrderedListCommand as fe } from "@milkdown/kit/preset/commonmark";
+import { toggleStrikethroughCommand as pe } from "@milkdown/kit/preset/gfm";
+import { EditorState as me } from "@codemirror/state";
+import { EditorView as J } from "@codemirror/view";
+import { markdown as he } from "@codemirror/lang-markdown";
+import { basicSetup as ge } from "codemirror";
 //#region src/context.ts
-var q = Symbol("kun-editor-context"), ve = [
+var Y = Symbol("kun-editor-context"), _e = [
 	"data-active",
 	"onMousedown",
 	"onMouseenter"
-], ye = ["src", "alt"], be = {
+], ve = ["src", "alt"], ye = {
 	key: 1,
 	class: "kun-mention-dropdown__avatar kun-mention-dropdown__avatar--fallback"
-}, xe = { class: "kun-mention-dropdown__name" }, Se = {
+}, be = { class: "kun-mention-dropdown__name" }, xe = {
 	key: 1,
 	class: "kun-mention-dropdown__hint"
-}, Ce = {
+}, Se = {
 	key: 2,
 	class: "kun-mention-dropdown__hint"
-}, we = {
+}, Ce = {
 	key: 3,
 	class: "kun-mention-dropdown__hint"
-}, Te = /* @__PURE__ */ s({
+}, we = /* @__PURE__ */ s({
 	__name: "MentionDropdown",
 	setup(n) {
-		let r = /(?:^|\s)@([^\s@]{0,30})$/, o = l(q), s = o?.adapters.searchMentionUsers, c = t(() => (o?.locale ?? "zh-cn").toLowerCase().startsWith("en")), u = t(() => c.value ? {
+		let r = /(?:^|\s)@([^\s@]{0,30})$/, o = l(Y), s = o?.adapters.searchMentionUsers, c = t(() => (o?.locale ?? "zh-cn").toLowerCase().startsWith("en")), u = t(() => c.value ? {
 			searching: "Searching…",
 			empty: "No matching users",
 			prompt: "Type a username to search"
@@ -41,21 +41,21 @@ var q = Symbol("kun-editor-context"), ve = [
 			searching: "搜索中…",
 			empty: "无匹配用户",
 			prompt: "输入用户名以搜索"
-		}), { view: m, prevState: _ } = A(), y = h(null), b, S = h(!1), C = h(""), T = h([]), E = h(0), D = h(!1), O = null, k = 0, j = null, M = () => {
-			j &&= (clearTimeout(j), null), C.value = "", T.value = [], E.value = 0, D.value = !1, O = null;
+		}), { view: d, prevState: h } = j(), v = g(null), b, x = g(!1), C = g(""), w = g([]), E = g(0), D = g(!1), O = null, k = 0, A = null, M = () => {
+			A &&= (clearTimeout(A), null), C.value = "", w.value = [], E.value = 0, D.value = !1, O = null;
 		}, N = (e) => {
-			if (j &&= (clearTimeout(j), null), !e || !s) {
-				T.value = [], D.value = !1;
+			if (A &&= (clearTimeout(A), null), !e || !s) {
+				w.value = [], D.value = !1;
 				return;
 			}
-			D.value = !0, j = setTimeout(async () => {
+			D.value = !0, A = setTimeout(async () => {
 				let t = ++k, n = [];
 				try {
 					n = await s(e);
 				} catch {
 					n = [];
 				}
-				t === k && (T.value = n ?? [], E.value = 0, D.value = !1);
+				t === k && (w.value = n ?? [], E.value = 0, D.value = !1);
 			}, 180);
 		}, P = (e) => {
 			let { selection: t } = e.state;
@@ -71,21 +71,21 @@ var q = Symbol("kun-editor-context"), ve = [
 				to: n
 			}, t !== C.value && (C.value = t, N(t)), !0;
 		}, I = (e) => {
-			let t = m.value;
+			let t = d.value;
 			if (!t || !O) return;
-			let n = t.state.schema.nodes[oe];
+			let n = t.state.schema.nodes[te];
 			if (!n) return;
 			let r = n.create({
 				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(ce.create(o.doc, s + 1)), t.dispatch(o.scrollIntoView()), t.focus(), b.hide();
+			o.insertText(" ", s), o.setSelection(re.create(o.doc, s + 1)), t.dispatch(o.scrollIntoView()), t.focus(), b.hide();
 		}, L = (e) => {
-			if (!S.value || !T.value.length) {
-				S.value && e.key === "Escape" && (e.preventDefault(), b.hide());
+			if (!x.value || !w.value.length) {
+				x.value && e.key === "Escape" && (e.preventDefault(), b.hide());
 				return;
 			}
-			let t = T.value.length - 1;
+			let t = w.value.length - 1;
 			switch (e.key) {
 				case "ArrowDown":
 					e.preventDefault(), e.stopPropagation(), E.value = E.value >= t ? 0 : E.value + 1;
@@ -95,7 +95,7 @@ var q = Symbol("kun-editor-context"), ve = [
 					break;
 				case "Enter":
 				case "Tab": {
-					let t = T.value[E.value];
+					let t = w.value[E.value];
 					t && (e.preventDefault(), e.stopPropagation(), I(t));
 					break;
 				}
@@ -104,41 +104,41 @@ var q = Symbol("kun-editor-context"), ve = [
 					break;
 			}
 		};
-		return f(() => {
-			b = new ee({
-				content: y.value,
+		return p(() => {
+			b = new z({
+				content: v.value,
 				trigger: "@",
 				shouldShow: F,
 				debounce: 0
 			}), b.onShow = () => {
-				S.value = !0;
+				x.value = !0;
 			}, b.onHide = () => {
-				S.value = !1, M();
-			}, b.update(m.value, _.value), window.addEventListener("keydown", L, !0);
-		}), x([m, _], () => {
-			b?.update(m.value, _.value);
-		}), d(() => {
-			j && clearTimeout(j), window.removeEventListener("keydown", L, !0), b?.destroy();
-		}), (t, n) => (p(), i("div", {
+				x.value = !1, M();
+			}, b.update(d.value, h.value), window.addEventListener("keydown", L, !0);
+		}), S([d, h], () => {
+			b?.update(d.value, h.value);
+		}), f(() => {
+			A && clearTimeout(A), window.removeEventListener("keydown", L, !0), b?.destroy();
+		}), (t, n) => (m(), i("div", {
 			ref_key: "divRef",
-			ref: y,
+			ref: v,
 			class: "kun-mention-dropdown",
 			"data-show": "false"
-		}, [T.value.length ? (p(!0), i(e, { key: 0 }, g(T.value, (e, t) => (p(), i("button", {
+		}, [w.value.length ? (m(!0), i(e, { key: 0 }, _(w.value, (e, t) => (m(), i("button", {
 			key: e.id,
 			type: "button",
 			class: "kun-mention-dropdown__item",
 			"data-active": t === E.value,
-			onMousedown: w((t) => I(e), ["prevent"]),
+			onMousedown: T((t) => I(e), ["prevent"]),
 			onMouseenter: (e) => E.value = t
-		}, [e.avatar ? (p(), i("img", {
+		}, [e.avatar ? (m(), i("img", {
 			key: 0,
 			src: e.avatar,
 			alt: e.name,
 			class: "kun-mention-dropdown__avatar"
-		}, null, 8, ye)) : (p(), i("span", be, v(e.name.charAt(0)), 1)), a("span", xe, v(e.name), 1)], 40, ve))), 128)) : D.value ? (p(), i("div", Se, v(u.value.searching), 1)) : C.value ? (p(), i("div", Ce, v(u.value.empty), 1)) : (p(), i("div", we, v(u.value.prompt), 1))], 512));
+		}, null, 8, ve)) : (m(), i("span", ye, y(e.name.charAt(0)), 1)), a("span", be, y(e.name), 1)], 40, _e))), 128)) : D.value ? (m(), i("div", xe, y(u.value.searching), 1)) : C.value ? (m(), i("div", Se, y(u.value.empty), 1)) : (m(), i("div", Ce, y(u.value.prompt), 1))], 512));
 	}
-}), Ee = /* @__PURE__ */ s({
+}), Te = /* @__PURE__ */ s({
 	__name: "MilkdownEditor",
 	props: {
 		modelValue: {},
@@ -150,76 +150,76 @@ var q = Symbol("kun-editor-context"), ve = [
 	},
 	emits: ["update:modelValue"],
 	setup(e, { expose: t, emit: r }) {
-		let i = e, a = r, o = i.modelValue, s = j(), c = te("kunMention"), l = i.features.mention !== !1 && !!i.adapters.searchMentionUsers && !!s, u = D((e) => {
-			let t = M.make().config((t) => {
-				t.set(I, e), t.set(N, i.modelValue), t.get(L).markdownUpdated((e, t, n) => {
+		let i = e, a = r, o = i.modelValue, s = M(), c = B("kunMention"), l = i.features.mention !== !1 && !!i.adapters.searchMentionUsers && !!s, u = O((e) => {
+			let t = N.make().config((t) => {
+				t.set(L, e), t.set(P, i.modelValue), t.get(R).markdownUpdated((e, t, n) => {
 					t !== n && (o = t, a("update:modelValue", t));
-				}), t.update(F, (e) => ({
+				}), t.update(I, (e) => ({
 					...e,
 					editable: () => !i.readonly
-				})), l && t.set(c.key, { view: s({ component: Te }) });
-			}).use(re(i.adapters, i.features, {
+				})), l && t.set(c.key, { view: s({ component: we }) });
+			}).use(U(i.adapters, i.features, {
 				locale: i.locale,
 				placeholder: i.placeholder
 			}));
 			return l && t.use(c), t;
 		});
-		x(() => i.modelValue, (e) => {
-			e !== o && (o = e, u.get()?.action(ne(e)));
-		}), x(() => i.readonly, () => {
+		S(() => i.modelValue, (e) => {
+			e !== o && (o = e, u.get()?.action(H(e)));
+		}), S(() => i.readonly, () => {
 			u.get()?.action((e) => {
-				let t = e.get(P);
+				let t = e.get(F);
 				t.dispatch(t.state.tr);
 			});
 		});
 		let d = () => {
-			u.get()?.action((e) => e.get(P).focus());
+			u.get()?.action((e) => e.get(F).focus());
 		};
 		return t({
 			insertQuote: (e) => {
-				u.get()?.action(R(B.key, e)), d();
+				u.get()?.action(V(K.key, e)), d();
 			},
 			insertMention: (e) => {
-				u.get()?.action(R(z.key, e)), d();
+				u.get()?.action(V(G.key, e)), d();
 			},
 			focus: d
-		}), (e, t) => (p(), n(y(T)));
+		}), (e, t) => (m(), n(b(E)));
 	}
-}), J = (e) => `<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${e}</svg>`, Y = (e, t = 13) => `<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><text x="12" y="12" dominant-baseline="central" text-anchor="middle" font-size="${t}" font-weight="700" font-family="ui-sans-serif, system-ui, sans-serif" fill="currentColor">${e}</text></svg>`, X = {
-	bold: J("<path d=\"M6 4h8a4 4 0 0 1 0 8H6z\"/><path d=\"M6 12h9a4 4 0 0 1 0 8H6z\"/>"),
-	italic: J("<line x1=\"19\" y1=\"4\" x2=\"10\" y2=\"4\"/><line x1=\"14\" y1=\"20\" x2=\"5\" y2=\"20\"/><line x1=\"15\" y1=\"4\" x2=\"9\" y2=\"20\"/>"),
-	strike: J("<path d=\"M16 4H9a3 3 0 0 0-2.83 4\"/><path d=\"M14 12a4 4 0 0 1 0 8H6\"/><line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"/>"),
-	code: J("<path d=\"m18 16 4-4-4-4\"/><path d=\"m6 8-4 4 4 4\"/><path d=\"m14.5 4-5 16\"/>"),
-	h1: Y("H1", 11),
-	h2: Y("H2", 11),
-	h3: Y("H3", 11),
-	bulletList: J("<line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"/><line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"/><line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"/><circle cx=\"3.5\" cy=\"6\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"3.5\" cy=\"12\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"3.5\" cy=\"18\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\"/>"),
-	orderedList: J("<line x1=\"10\" y1=\"6\" x2=\"21\" y2=\"6\"/><line x1=\"10\" y1=\"12\" x2=\"21\" y2=\"12\"/><line x1=\"10\" y1=\"18\" x2=\"21\" y2=\"18\"/><path d=\"M4 6h1v4\"/><path d=\"M4 10h2\"/><path d=\"M6 18H4c0-1 2-1.5 2-2.5S5 14 4 14.5\"/>"),
-	quote: J("<path d=\"M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z\" fill=\"currentColor\" stroke=\"none\"/>"),
-	codeBlock: J("<rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\"/><path d=\"m9 10-2 2 2 2\"/><path d=\"m15 10 2 2-2 2\"/>"),
-	hr: J("<line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"/>"),
-	image: J("<rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"1.8\" fill=\"currentColor\" stroke=\"none\"/><path d=\"m21 15-4.5-4.5a2 2 0 0 0-2.8 0L5 19\"/>"),
-	spoiler: J("<path d=\"M9.9 4.24A9.1 9.1 0 0 1 12 4c7 0 10 8 10 8a13.2 13.2 0 0 1-1.67 2.68\"/><path d=\"M6.6 6.6A13.5 13.5 0 0 0 2 12s3 8 10 8a9.7 9.7 0 0 0 5.4-1.6\"/><line x1=\"2\" y1=\"2\" x2=\"22\" y2=\"22\"/>"),
-	latex: Y("Σ", 15),
-	smile: J("<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/>")
-}, Z = /* @__PURE__ */ "😀.😃.😄.😁.😆.😅.🤣.😂.🙂.🙃.😉.😊.😇.🥰.😍.🤩.😘.😗.😚.😋.😛.😜.🤪.😝.🤗.🤭.🤔.🤐.😐.😑.😶.😏.😒.🙄.😬.😌.😔.😪.🤤.😴.😷.🤒.🤕.🥵.🥶.🥴.😵.🤯.🤠.🥳.😎.🤓.🧐.😕.😟.🙁.😮.😯.😲.😳.🥺.😦.😧.😨.😰.😥.😢.😭.😱.😖.😣.😞.😓.😩.😫.🥱.😤.😡.😠.🤬.😈.👿.💀.💩.🤡.👻.👽.🤖.😺.😸.👍.👎.👌.🤌.🤏.✌️.🤞.🤟.🤘.👋.🤚.🖐️.✋.👏.🙌.🤝.🙏.💪.👀.👁️.❤️.🧡.💛.💚.💙.💜.🖤.🤍.💔.💕.💞.💓.💗.💖.💘.💝.💯.✨.⭐.🌟.🔥.💥.💫.⚡.☀️.🌈.🎉.🎊.🎁.🏆.🐶.🐱.🐭.🦊.🐻.🐼.🐨.🦄.🐢.🐳.🍎.🍑.🍓.🍉.🍰.🍺.🍵.☕.🍜.🍙.✅.❌.❓.❗.💤.👑.🎮.🎵.📌.🔖".split("."), De = [
+}), X = (e) => `<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${e}</svg>`, Z = (e, t = 13) => `<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><text x="12" y="12" dominant-baseline="central" text-anchor="middle" font-size="${t}" font-weight="700" font-family="ui-sans-serif, system-ui, sans-serif" fill="currentColor">${e}</text></svg>`, Q = {
+	bold: X("<path d=\"M6 4h8a4 4 0 0 1 0 8H6z\"/><path d=\"M6 12h9a4 4 0 0 1 0 8H6z\"/>"),
+	italic: X("<line x1=\"19\" y1=\"4\" x2=\"10\" y2=\"4\"/><line x1=\"14\" y1=\"20\" x2=\"5\" y2=\"20\"/><line x1=\"15\" y1=\"4\" x2=\"9\" y2=\"20\"/>"),
+	strike: X("<path d=\"M16 4H9a3 3 0 0 0-2.83 4\"/><path d=\"M14 12a4 4 0 0 1 0 8H6\"/><line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"/>"),
+	code: X("<path d=\"m18 16 4-4-4-4\"/><path d=\"m6 8-4 4 4 4\"/><path d=\"m14.5 4-5 16\"/>"),
+	h1: Z("H1", 11),
+	h2: Z("H2", 11),
+	h3: Z("H3", 11),
+	bulletList: X("<line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"/><line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"/><line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"/><circle cx=\"3.5\" cy=\"6\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"3.5\" cy=\"12\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\"/><circle cx=\"3.5\" cy=\"18\" r=\"1.2\" fill=\"currentColor\" stroke=\"none\"/>"),
+	orderedList: X("<line x1=\"10\" y1=\"6\" x2=\"21\" y2=\"6\"/><line x1=\"10\" y1=\"12\" x2=\"21\" y2=\"12\"/><line x1=\"10\" y1=\"18\" x2=\"21\" y2=\"18\"/><path d=\"M4 6h1v4\"/><path d=\"M4 10h2\"/><path d=\"M6 18H4c0-1 2-1.5 2-2.5S5 14 4 14.5\"/>"),
+	quote: X("<path d=\"M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z\" fill=\"currentColor\" stroke=\"none\"/>"),
+	codeBlock: X("<rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\"/><path d=\"m9 10-2 2 2 2\"/><path d=\"m15 10 2 2-2 2\"/>"),
+	hr: X("<line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"/>"),
+	image: X("<rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"1.8\" fill=\"currentColor\" stroke=\"none\"/><path d=\"m21 15-4.5-4.5a2 2 0 0 0-2.8 0L5 19\"/>"),
+	spoiler: X("<path d=\"M9.9 4.24A9.1 9.1 0 0 1 12 4c7 0 10 8 10 8a13.2 13.2 0 0 1-1.67 2.68\"/><path d=\"M6.6 6.6A13.5 13.5 0 0 0 2 12s3 8 10 8a9.7 9.7 0 0 0 5.4-1.6\"/><line x1=\"2\" y1=\"2\" x2=\"22\" y2=\"22\"/>"),
+	latex: Z("Σ", 15),
+	smile: X("<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/>")
+}, $ = /* @__PURE__ */ "😀.😃.😄.😁.😆.😅.🤣.😂.🙂.🙃.😉.😊.😇.🥰.😍.🤩.😘.😗.😚.😋.😛.😜.🤪.😝.🤗.🤭.🤔.🤐.😐.😑.😶.😏.😒.🙄.😬.😌.😔.😪.🤤.😴.😷.🤒.🤕.🥵.🥶.🥴.😵.🤯.🤠.🥳.😎.🤓.🧐.😕.😟.🙁.😮.😯.😲.😳.🥺.😦.😧.😨.😰.😥.😢.😭.😱.😖.😣.😞.😓.😩.😫.🥱.😤.😡.😠.🤬.😈.👿.💀.💩.🤡.👻.👽.🤖.😺.😸.👍.👎.👌.🤌.🤏.✌️.🤞.🤟.🤘.👋.🤚.🖐️.✋.👏.🙌.🤝.🙏.💪.👀.👁️.❤️.🧡.💛.💚.💙.💜.🖤.🤍.💔.💕.💞.💓.💗.💖.💘.💝.💯.✨.⭐.🌟.🔥.💥.💫.⚡.☀️.🌈.🎉.🎊.🎁.🏆.🐶.🐱.🐭.🦊.🐻.🐼.🐨.🦄.🐢.🐳.🍎.🍑.🍓.🍉.🍰.🍺.🍵.☕.🍜.🍙.✅.❌.❓.❗.💤.👑.🎮.🎵.📌.🔖".split("."), Ee = [
 	"title",
 	"aria-label",
 	"aria-expanded"
-], Oe = ["innerHTML"], ke = { class: "kun-editor__picker-panel" }, Ae = {
+], De = ["innerHTML"], Oe = { class: "kun-editor__picker-panel" }, ke = {
 	key: 0,
 	class: "kun-editor__picker-tabs",
 	role: "tablist"
-}, je = ["data-active"], Me = ["data-active"], Ne = { class: "kun-editor__emoji-grid" }, Pe = ["onClick"], Fe = {
+}, Ae = ["data-active"], je = ["data-active"], Me = { class: "kun-editor__emoji-grid" }, Ne = ["onClick"], Pe = {
 	key: 1,
 	class: "kun-editor__sticker-body"
-}, Ie = { class: "kun-editor__pack-name" }, Le = { class: "kun-editor__sticker-grid" }, Re = ["title", "onClick"], ze = ["src", "alt"], Be = {
+}, Fe = { class: "kun-editor__pack-name" }, Ie = { class: "kun-editor__sticker-grid" }, Le = ["title", "onClick"], Re = ["src", "alt"], ze = {
 	key: 1,
 	class: "kun-editor__picker-hint"
-}, Ve = /* @__PURE__ */ s({
+}, Be = /* @__PURE__ */ s({
 	__name: "StickerPicker",
 	setup(n) {
-		let [, o] = O(), s = l(q), c = s?.adapters.stickerSource, u = !!c, m = t(() => (s?.locale ?? "zh-cn").toLowerCase().startsWith("en")), _ = t(() => m.value ? {
+		let [, o] = k(), s = l(Y), c = s?.adapters.stickerSource, u = !!c, d = t(() => (s?.locale ?? "zh-cn").toLowerCase().startsWith("en")), h = t(() => d.value ? {
 			trigger: "Emoji & stickers",
 			emoji: "Emoji",
 			sticker: "Stickers",
@@ -231,7 +231,7 @@ var q = Symbol("kun-editor-context"), ve = [
 			sticker: "贴纸",
 			empty: "暂无贴纸",
 			failed: "贴纸加载失败"
-		}), x = h(!1), S = h(null), w = h("emoji"), T = h([]), E = h(!1), D = h(!1), k = async () => {
+		}), v = g(!1), S = g(null), C = g("emoji"), T = g([]), E = g(!1), D = g(!1), O = async () => {
 			if (!(E.value || !c)) {
 				E.value = !0;
 				try {
@@ -241,59 +241,59 @@ var q = Symbol("kun-editor-context"), ve = [
 				}
 			}
 		}, A = () => {
-			x.value = !x.value, x.value && u && k();
+			v.value = !v.value, v.value && u && O();
 		}, j = (e) => {
-			x.value && S.value && !S.value.contains(e.target) && (x.value = !1);
+			v.value && S.value && !S.value.contains(e.target) && (v.value = !1);
 		};
-		f(() => document.addEventListener("click", j)), d(() => document.removeEventListener("click", j));
+		p(() => document.addEventListener("click", j)), f(() => document.removeEventListener("click", j));
 		let M = (e) => {
 			o()?.action((t) => {
-				let n = t.get(P), { 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(R(W.key, {
+			o()?.action(V(oe.key, {
 				src: e,
 				title: t,
 				alt: t
 			}));
 		};
-		return (t, n) => (p(), i("div", {
+		return (t, n) => (m(), i("div", {
 			ref_key: "rootRef",
 			ref: S,
 			class: "kun-editor__picker"
 		}, [a("button", {
 			type: "button",
 			class: "kun-editor__tool",
-			title: _.value.trigger,
-			"aria-label": _.value.trigger,
-			"aria-expanded": x.value,
+			title: h.value.trigger,
+			"aria-label": h.value.trigger,
+			"aria-expanded": v.value,
 			onClick: A
 		}, [a("span", {
 			class: "kun-editor__icon",
-			innerHTML: y(X).smile
-		}, null, 8, Oe)], 8, De), C(a("div", ke, [
-			u ? (p(), i("div", Ae, [a("button", {
+			innerHTML: b(Q).smile
+		}, null, 8, De)], 8, Ee), w(a("div", Oe, [
+			u ? (m(), i("div", ke, [a("button", {
 				type: "button",
 				class: "kun-editor__picker-tab",
-				"data-active": w.value === "emoji",
-				onClick: n[0] ||= (e) => w.value = "emoji"
-			}, v(_.value.emoji), 9, je), a("button", {
+				"data-active": C.value === "emoji",
+				onClick: n[0] ||= (e) => C.value = "emoji"
+			}, y(h.value.emoji), 9, Ae), a("button", {
 				type: "button",
 				class: "kun-editor__picker-tab",
-				"data-active": w.value === "sticker",
-				onClick: n[1] ||= (e) => w.value = "sticker"
-			}, v(_.value.sticker), 9, Me)])) : r("", !0),
-			C(a("div", Ne, [(p(!0), i(e, null, g(y(Z), (e, t) => (p(), i("button", {
+				"data-active": C.value === "sticker",
+				onClick: n[1] ||= (e) => C.value = "sticker"
+			}, y(h.value.sticker), 9, je)])) : r("", !0),
+			w(a("div", Me, [(m(!0), i(e, null, _(b($), (e, t) => (m(), i("button", {
 				key: t,
 				type: "button",
 				class: "kun-editor__emoji",
 				onClick: (t) => M(e)
-			}, v(e), 9, Pe))), 128))], 512), [[b, !u || w.value === "emoji"]]),
-			u ? C((p(), i("div", Fe, [T.value.length ? (p(!0), i(e, { key: 0 }, g(T.value, (t) => (p(), i("div", {
+			}, y(e), 9, Ne))), 128))], 512), [[x, !u || C.value === "emoji"]]),
+			u ? w((m(), i("div", Pe, [T.value.length ? (m(!0), i(e, { key: 0 }, _(T.value, (t) => (m(), i("div", {
 				key: t.name,
 				class: "kun-editor__pack"
-			}, [a("div", Ie, v(t.name), 1), a("div", Le, [(p(!0), i(e, null, g(t.stickers, (e, t) => (p(), i("button", {
+			}, [a("div", Fe, y(t.name), 1), a("div", Ie, [(m(!0), i(e, null, _(t.stickers, (e, t) => (m(), i("button", {
 				key: t,
 				type: "button",
 				class: "kun-editor__sticker",
@@ -303,26 +303,26 @@ var q = Symbol("kun-editor-context"), ve = [
 				src: e.src,
 				alt: e.name,
 				loading: "lazy"
-			}, null, 8, ze)], 8, Re))), 128))])]))), 128)) : (p(), i("div", Be, v(D.value ? _.value.failed : _.value.empty), 1))], 512)), [[b, w.value === "sticker"]]) : r("", !0)
-		], 512), [[b, x.value]])], 512));
+			}, null, 8, Re)], 8, Le))), 128))])]))), 128)) : (m(), i("div", ze, y(D.value ? h.value.failed : h.value.empty), 1))], 512)), [[x, C.value === "sticker"]]) : r("", !0)
+		], 512), [[x, v.value]])], 512));
 	}
-}), He = {
+}), Ve = {
 	class: "kun-editor__format-toolbar",
 	role: "toolbar"
-}, Ue = ["aria-label"], We = {
+}, He = ["aria-label"], Ue = {
 	value: "",
 	disabled: "",
 	selected: ""
-}, Ge = ["value"], Ke = [
+}, We = ["value"], Ge = [
 	"title",
 	"aria-label",
 	"onClick"
-], qe = ["innerHTML"], Je = ["title", "aria-label"], Ye = ["innerHTML"], Q = /* @__PURE__ */ s({
+], Ke = ["innerHTML"], qe = ["title", "aria-label"], Je = ["innerHTML"], Ye = /* @__PURE__ */ s({
 	__name: "EditorToolbar",
 	setup(n) {
-		let [, s] = O(), c = l(q), u = t(() => c?.adapters.uploadImage), d = t(() => c?.features.sticker !== !1), f = t(() => (c?.locale ?? "zh-cn").toLowerCase().startsWith("en")), m = (e, t) => {
-			s()?.action(R(e, t));
-		}, _ = t(() => {
+		let [, s] = k(), c = l(Y), 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(V(e, t));
+		}, h = t(() => {
 			let e = f.value;
 			return {
 				textSize: e ? "Text size" : "文本大小",
@@ -338,7 +338,7 @@ var q = Symbol("kun-editor-context"), ve = [
 				spoiler: e ? "Spoiler" : "隐藏文本",
 				image: e ? "Upload image" : "上传图片"
 			};
-		}), b = t(() => {
+		}), v = t(() => {
 			let e = f.value;
 			return [
 				"正文",
@@ -354,87 +354,87 @@ var q = Symbol("kun-editor-context"), ve = [
 			}));
 		}), x = (e) => {
 			let t = e.target;
-			m(se.key, Number(t.value)), t.selectedIndex = 0;
+			p(ne.key, Number(t.value)), t.selectedIndex = 0;
 		}, S = t(() => [
 			[
 				{
-					svg: X.bold,
-					title: _.value.bold,
-					run: () => m(ue.key)
+					svg: Q.bold,
+					title: h.value.bold,
+					run: () => p(le.key)
 				},
 				{
-					svg: X.italic,
-					title: _.value.italic,
-					run: () => m(G.key)
+					svg: Q.italic,
+					title: h.value.italic,
+					run: () => p(se.key)
 				},
 				{
-					svg: X.strike,
-					title: _.value.strike,
-					run: () => m(me.key)
+					svg: Q.strike,
+					title: h.value.strike,
+					run: () => p(pe.key)
 				},
 				{
-					svg: X.code,
-					title: _.value.code,
-					run: () => m(le.key)
+					svg: Q.code,
+					title: h.value.code,
+					run: () => p(ce.key)
 				}
 			],
 			[
 				{
-					svg: X.bulletList,
-					title: _.value.bulletList,
-					run: () => m(fe.key)
+					svg: Q.bulletList,
+					title: h.value.bulletList,
+					run: () => p(de.key)
 				},
 				{
-					svg: X.orderedList,
-					title: _.value.orderedList,
-					run: () => m(pe.key)
+					svg: Q.orderedList,
+					title: h.value.orderedList,
+					run: () => p(fe.key)
 				},
 				{
-					svg: X.quote,
-					title: _.value.quote,
-					run: () => m(de.key)
+					svg: Q.quote,
+					title: h.value.quote,
+					run: () => p(ue.key)
 				},
 				{
-					svg: X.codeBlock,
-					title: _.value.codeBlock,
-					run: () => m(H.key, "")
+					svg: Q.codeBlock,
+					title: h.value.codeBlock,
+					run: () => p(ie.key, "")
 				},
 				{
-					svg: X.hr,
-					title: _.value.hr,
-					run: () => m(U.key)
+					svg: Q.hr,
+					title: h.value.hr,
+					run: () => p(ae.key)
 				}
 			],
 			[{
-				svg: X.spoiler,
-				title: _.value.spoiler,
-				run: () => m(ie.key)
+				svg: Q.spoiler,
+				title: h.value.spoiler,
+				run: () => p(W.key)
 			}]
-		]), C = h(null), w = () => C.value?.click(), T = (e) => {
+		]), C = g(null), w = () => C.value?.click(), T = (e) => {
 			let t = e.target, n = t.files?.[0];
 			t.value = "";
 			let r = u.value;
 			!n || !r || s()?.action((e) => {
-				V(e.get(P), n, {
+				q(e.get(F), n, {
 					uploadImage: r,
 					notify: c?.adapters.notify,
 					locale: c?.locale
 				});
 			});
 		};
-		return (t, n) => (p(), i("div", He, [
+		return (t, n) => (m(), i("div", Ve, [
 			a("select", {
 				class: "kun-editor__heading-select",
-				"aria-label": _.value.textSize,
+				"aria-label": h.value.textSize,
 				onChange: x
-			}, [a("option", We, v(_.value.textSize), 1), (p(!0), i(e, null, g(b.value, (e) => (p(), i("option", {
+			}, [a("option", Ue, y(h.value.textSize), 1), (m(!0), i(e, null, _(v.value, (e) => (m(), i("option", {
 				key: e.level,
 				value: e.level
-			}, v(e.label), 9, Ge))), 128))], 40, Ue),
-			(p(!0), i(e, null, g(S.value, (t, r) => (p(), i(e, { key: r }, [n[0] ||= a("span", {
+			}, y(e.label), 9, We))), 128))], 40, He),
+			(m(!0), i(e, null, _(S.value, (t, r) => (m(), i(e, { key: r }, [n[0] ||= a("span", {
 				class: "kun-editor__toolbar-divider",
 				"aria-hidden": "true"
-			}, null, -1), (p(!0), i(e, null, g(t, (e, t) => (p(), i("button", {
+			}, null, -1), (m(!0), i(e, null, _(t, (e, t) => (m(), i("button", {
 				key: t,
 				type: "button",
 				class: "kun-editor__tool",
@@ -444,8 +444,8 @@ var q = Symbol("kun-editor-context"), ve = [
 			}, [a("span", {
 				class: "kun-editor__icon",
 				innerHTML: e.svg
-			}, null, 8, qe)], 8, Ke))), 128))], 64))), 128)),
-			u.value ? (p(), i(e, { key: 0 }, [
+			}, null, 8, Ke)], 8, Ge))), 128))], 64))), 128)),
+			u.value ? (m(), i(e, { key: 0 }, [
 				n[1] ||= a("span", {
 					class: "kun-editor__toolbar-divider",
 					"aria-hidden": "true"
@@ -453,13 +453,13 @@ var q = Symbol("kun-editor-context"), ve = [
 				a("button", {
 					type: "button",
 					class: "kun-editor__tool",
-					title: _.value.image,
-					"aria-label": _.value.image,
+					title: h.value.image,
+					"aria-label": h.value.image,
 					onClick: w
 				}, [a("span", {
 					class: "kun-editor__icon",
-					innerHTML: y(X).image
-				}, null, 8, Ye)], 8, Je),
+					innerHTML: b(Q).image
+				}, null, 8, Je)], 8, qe),
 				a("input", {
 					ref_key: "fileInput",
 					ref: C,
@@ -469,31 +469,31 @@ var q = Symbol("kun-editor-context"), ve = [
 					onChange: T
 				}, null, 544)
 			], 64)) : r("", !0),
-			d.value ? (p(), i(e, { key: 1 }, [n[2] ||= a("span", {
+			d.value ? (m(), i(e, { key: 1 }, [n[2] ||= a("span", {
 				class: "kun-editor__toolbar-divider",
 				"aria-hidden": "true"
-			}, null, -1), o(Ve)], 64)) : r("", !0)
+			}, null, -1), o(Be)], 64)) : r("", !0)
 		]));
 	}
 }), Xe = /* @__PURE__ */ s({
 	__name: "ToolbarHost",
 	setup(e) {
-		let [, t] = O(), n = l(q, void 0), r = (e, n) => {
-			t()?.action(R(e, n));
+		let [, t] = k(), n = l(Y, void 0), r = (e, n) => {
+			t()?.action(V(e, n));
 		}, i = () => {
-			t()?.action((e) => e.get(P).focus());
+			t()?.action((e) => e.get(F).focus());
 		}, a = {
 			run: r,
 			insertText: (e) => {
 				t()?.action((t) => {
-					let n = t.get(P);
+					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) => {
-					V(t.get(P), e, {
+					q(t.get(F), e, {
 						uploadImage: r,
 						notify: n?.adapters.notify,
 						locale: n?.locale
@@ -501,10 +501,10 @@ var q = Symbol("kun-editor-context"), ve = [
 				});
 			},
 			insertQuote: (e) => {
-				r(B.key, e), i();
+				r(K.key, e), i();
 			},
 			insertMention: (e) => {
-				r(z.key, e), i();
+				r(G.key, e), i();
 			},
 			focus: i,
 			get adapters() {
@@ -517,7 +517,7 @@ var q = Symbol("kun-editor-context"), ve = [
 				return n?.locale ?? "zh-cn";
 			}
 		};
-		return (e, t) => _(e.$slots, "default", u(c(a)));
+		return (e, t) => v(e.$slots, "default", d(c(a)));
 	}
 }), Ze = /* @__PURE__ */ s({
 	__name: "MarkdownSource",
@@ -527,29 +527,29 @@ var q = Symbol("kun-editor-context"), ve = [
 	},
 	emits: ["update:modelValue"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, a = h(null), o = null, s = (e) => he.create({
+		let n = e, r = t, a = g(null), o = null, s = (e) => me.create({
 			doc: e,
 			extensions: [
-				ae(),
-				K.lineWrapping,
-				_e,
-				ge(),
-				K.editable.of(!n.readonly),
-				K.updateListener.of((e) => {
+				ee(),
+				J.lineWrapping,
+				ge,
+				he(),
+				J.editable.of(!n.readonly),
+				J.updateListener.of((e) => {
 					e.docChanged && r("update:modelValue", e.state.doc.toString());
 				})
 			]
 		});
-		return f(() => {
-			a.value && (o = new K({
+		return p(() => {
+			a.value && (o = new J({
 				state: s(n.modelValue),
 				parent: a.value
 			}));
-		}), d(() => {
+		}), f(() => {
 			o?.destroy(), o = null;
-		}), x(() => n.modelValue, (e) => {
+		}), S(() => n.modelValue, (e) => {
 			o && o.state.doc.toString() !== e && o.setState(s(e));
-		}), (e, t) => (p(), i("div", {
+		}), (e, t) => (m(), i("div", {
 			ref_key: "host",
 			ref: a,
 			class: "kun-editor__source"
@@ -558,7 +558,11 @@ var q = Symbol("kun-editor-context"), ve = [
 }), Qe = ["data-mode"], $e = {
 	class: "kun-editor__toolbar",
 	role: "tablist"
-}, et = ["aria-selected", "data-active"], tt = ["aria-selected", "data-active"], nt = ["aria-selected", "data-active"], rt = ["title", "aria-label"], it = ["data-swap"], at = { class: "kun-editor__wysiwyg kun-editor__pane" }, $ = /* @__PURE__ */ s({
+}, et = ["aria-selected", "data-active"], tt = ["aria-selected", "data-active"], nt = ["aria-selected", "data-active"], rt = ["title", "aria-label"], it = [
+	"data-active",
+	"title",
+	"aria-pressed"
+], at = ["data-swap"], ot = { class: "kun-editor__wysiwyg kun-editor__pane" }, st = /* @__PURE__ */ s({
 	__name: "KunEditor",
 	props: {
 		modelValue: {},
@@ -569,105 +573,150 @@ var q = Symbol("kun-editor-context"), ve = [
 			type: Boolean,
 			default: !1
 		},
-		placeholder: { default: "" }
+		placeholder: { default: "" },
+		scrollSync: {
+			type: Boolean,
+			default: !0
+		}
 	},
 	emits: ["update:modelValue"],
-	setup(e, { expose: s, emit: l }) {
-		let d = e, f = l;
-		m(q, {
+	setup(s, { expose: l, emit: p }) {
+		let _ = s, T = p;
+		h(Y, {
 			get adapters() {
-				return d.adapters;
+				return _.adapters;
 			},
 			get features() {
-				return d.features;
+				return _.features;
 			},
 			get locale() {
-				return d.locale;
+				return _.locale;
 			}
 		});
-		let g = h("wysiwyg"), x = (e) => {
-			g.value = e;
-		}, w = h(!1), T = () => {
-			w.value = !w.value;
-		}, D = t(() => d.locale.toLowerCase().startsWith("en")), O = t(() => D.value ? {
+		let E = g("wysiwyg"), O = (e) => {
+			E.value = e;
+		}, k = g(!1), j = () => {
+			k.value = !k.value;
+		}, M = g(_.scrollSync);
+		S(() => _.scrollSync, (e) => {
+			M.value = e;
+		});
+		let N = () => {
+			M.value = !M.value;
+		}, P = t(() => _.locale.toLowerCase().startsWith("en")), F = t(() => P.value ? {
 			wysiwyg: "Preview",
 			source: "Markdown",
 			split: "Split",
-			swap: "Swap sides"
+			swap: "Swap sides",
+			scrollSync: "Sync scroll"
 		} : {
 			wysiwyg: "预览",
 			source: "Markdown",
 			split: "分栏",
-			swap: "左右互换"
-		}), A = t(() => d.readonly || g.value === "split"), j = (e) => f("update:modelValue", e), M = h(null);
-		return s({
-			insertQuote: (e) => M.value?.insertQuote(e),
-			insertMention: (e) => M.value?.insertMention(e),
-			focus: () => M.value?.focus()
-		}), (t, s) => (p(), i("div", {
+			swap: "左右互换",
+			scrollSync: "同步滚动"
+		}), I = g(null), L = null, R = null, z = null, B = () => {
+			L?.(), L = null, R = null;
+		}, V = () => {
+			B();
+			let e = I.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 (R && R !== e) return;
+				R = 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), z && clearTimeout(z), z = setTimeout(() => {
+					R = null;
+				}, 120);
+			}, i = r(t, n), a = r(n, t);
+			t.addEventListener("scroll", i, { passive: !0 }), n.addEventListener("scroll", a, { passive: !0 }), L = () => {
+				t.removeEventListener("scroll", i), n.removeEventListener("scroll", a);
+			};
+		};
+		S([E, M], ([e, t]) => {
+			B(), e === "split" && t && u(V);
+		}), f(B);
+		let H = t(() => _.readonly || E.value === "split"), U = (e) => T("update:modelValue", e), W = g(null);
+		return l({
+			insertQuote: (e) => W.value?.insertQuote(e),
+			insertMention: (e) => W.value?.insertMention(e),
+			focus: () => W.value?.focus()
+		}), (t, l) => (m(), i("div", {
+			ref_key: "rootEl",
+			ref: I,
 			class: "kun-editor",
 			"data-kun-editor": "",
-			"data-mode": g.value
-		}, [_(t.$slots, "view-switch", {
-			mode: g.value,
-			setMode: x,
-			labels: O.value,
-			swapped: w.value,
-			swap: T
+			"data-mode": E.value
+		}, [v(t.$slots, "view-switch", {
+			mode: E.value,
+			setMode: O,
+			labels: F.value,
+			swapped: k.value,
+			swap: j,
+			scrollSync: M.value,
+			toggleScrollSync: N
 		}, () => [a("div", $e, [
 			a("button", {
 				type: "button",
 				class: "kun-editor__tab",
-				"aria-selected": g.value === "wysiwyg",
-				"data-active": g.value === "wysiwyg",
-				onClick: s[0] ||= (e) => x("wysiwyg")
-			}, v(O.value.wysiwyg), 9, et),
+				"aria-selected": E.value === "wysiwyg",
+				"data-active": E.value === "wysiwyg",
+				onClick: l[0] ||= (e) => O("wysiwyg")
+			}, y(F.value.wysiwyg), 9, et),
 			a("button", {
 				type: "button",
 				class: "kun-editor__tab",
-				"aria-selected": g.value === "source",
-				"data-active": g.value === "source",
-				onClick: s[1] ||= (e) => x("source")
-			}, v(O.value.source), 9, tt),
+				"aria-selected": E.value === "source",
+				"data-active": E.value === "source",
+				onClick: l[1] ||= (e) => O("source")
+			}, y(F.value.source), 9, tt),
 			a("button", {
 				type: "button",
 				class: "kun-editor__tab",
-				"aria-selected": g.value === "split",
-				"data-active": g.value === "split",
-				onClick: s[2] ||= (e) => x("split")
-			}, v(O.value.split), 9, nt),
-			g.value === "split" ? (p(), i("button", {
-				key: 0,
+				"aria-selected": E.value === "split",
+				"data-active": E.value === "split",
+				onClick: l[2] ||= (e) => O("split")
+			}, y(F.value.split), 9, nt),
+			E.value === "split" ? (m(), i(e, { key: 0 }, [a("button", {
 				type: "button",
 				class: "kun-editor__tab kun-editor__swap",
-				title: O.value.swap,
-				"aria-label": O.value.swap,
-				onClick: s[3] ||= (e) => T()
-			}, " ⇄ ", 8, rt)) : r("", !0)
-		])]), o(y(E), null, {
-			default: S(() => [o(y(k), null, {
-				default: S(() => [C(a("div", null, [o(Xe, null, {
-					default: S((e) => [_(t.$slots, "toolbar", u(c(e)), () => [o(Q)])]),
+				title: F.value.swap,
+				"aria-label": F.value.swap,
+				onClick: l[3] ||= (e) => j()
+			}, " ⇄ ", 8, rt), a("button", {
+				type: "button",
+				class: "kun-editor__tab",
+				"data-active": M.value,
+				title: F.value.scrollSync,
+				"aria-pressed": M.value,
+				onClick: l[4] ||= (e) => N()
+			}, y(F.value.scrollSync), 9, it)], 64)) : r("", !0)
+		])]), o(b(D), null, {
+			default: C(() => [o(b(A), null, {
+				default: C(() => [w(a("div", null, [o(Xe, null, {
+					default: C((e) => [v(t.$slots, "toolbar", d(c(e)), () => [o(Ye)])]),
 					_: 3
-				})], 512), [[b, g.value === "wysiwyg" && !e.readonly]]), a("div", {
+				})], 512), [[x, E.value === "wysiwyg" && !s.readonly]]), a("div", {
 					class: "kun-editor__panes",
-					"data-swap": w.value
-				}, [g.value === "source" || g.value === "split" ? (p(), n(Ze, {
+					"data-swap": k.value
+				}, [E.value === "source" || E.value === "split" ? (m(), n(Ze, {
 					key: 0,
 					class: "kun-editor__pane",
-					"model-value": e.modelValue,
-					readonly: e.readonly,
-					"onUpdate:modelValue": j
-				}, null, 8, ["model-value", "readonly"])) : r("", !0), C(a("div", at, [o(Ee, {
+					"model-value": s.modelValue,
+					readonly: s.readonly,
+					"onUpdate:modelValue": U
+				}, null, 8, ["model-value", "readonly"])) : r("", !0), w(a("div", ot, [o(Te, {
 					ref_key: "inner",
-					ref: M,
-					"model-value": e.modelValue,
-					adapters: e.adapters,
-					features: e.features,
-					locale: e.locale,
-					readonly: A.value,
-					placeholder: e.placeholder,
-					"onUpdate:modelValue": j
+					ref: W,
+					"model-value": s.modelValue,
+					adapters: s.adapters,
+					features: s.features,
+					locale: s.locale,
+					readonly: H.value,
+					placeholder: s.placeholder,
+					"onUpdate:modelValue": U
 				}, null, 8, [
 					"model-value",
 					"adapters",
@@ -675,14 +724,14 @@ var q = Symbol("kun-editor-context"), ve = [
 					"locale",
 					"readonly",
 					"placeholder"
-				])], 512), [[b, g.value === "wysiwyg" || g.value === "split"]])], 8, it)]),
+				])], 512), [[x, E.value === "wysiwyg" || E.value === "split"]])], 8, at)]),
 				_: 3
 			})]),
 			_: 3
 		})], 8, Qe));
 	}
-}), ot = { install(e) {
-	e.component("KunEditor", $);
+}), ct = { install(e) {
+	e.component("KunEditor", st);
 } };
 //#endregion
-export { Z as EMOJI, $ as KunEditor, ot as KunEditorPlugin };
+export { $ as EMOJI, st as KunEditor, ct as KunEditorPlugin };

package/dist/types.d.ts

@@ -41,11 +41,16 @@ export interface KunEditorViewSwitchApi {
         source: string;
         split: string;
         swap: string;
+        scrollSync: string;
     };
     /** Whether the split panes are swapped (source on the right). */
     swapped: boolean;
     /** Toggle the split panes' left/right order. */
     swap: () => void;
+    /** Whether split-pane scroll sync is on. */
+    scrollSync: boolean;
+    /** Toggle split-pane scroll sync. */
+    toggleScrollSync: () => void;
 }
 export interface KunEditorExpose {
     /**

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EAChB,MAAM,qBAAqB,CAAA;AAM5B,MAAM,WAAW,mBAAmB;IAClC,8EAA8E;IAC9E,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;IAC7C,uDAAuD;IACvD,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC;;;;OAIG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACjC,0EAA0E;IAC1E,WAAW,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAChE,6CAA6C;IAC7C,aAAa,EAAE,CAAC,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAClE,gCAAgC;IAChC,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,yEAAyE;IACzE,QAAQ,CAAC,QAAQ,EAAE,iBAAiB,CAAA;IACpC,8EAA8E;IAC9E,QAAQ,CAAC,QAAQ,EAAE,iBAAiB,CAAA;IACpC,yCAAyC;IACzC,QAAQ,CAAC,MAAM,EAAE,eAAe,CAAA;CACjC;AAMD,MAAM,WAAW,sBAAsB;IACrC,uEAAuE;IACvE,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,8BAA8B;IAC9B,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAA;IACvD,qDAAqD;IACrD,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IACxE,iEAAiE;IACjE,OAAO,EAAE,OAAO,CAAA;IAChB,gDAAgD;IAChD,IAAI,EAAE,MAAM,IAAI,CAAA;CACjB;AASD,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,WAAW,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IAC5D;;;OAGG;IACH,aAAa,CAAC,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IAC9D,gCAAgC;IAChC,KAAK,IAAI,IAAI,CAAA;CACd"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EAChB,MAAM,qBAAqB,CAAA;AAM5B,MAAM,WAAW,mBAAmB;IAClC,8EAA8E;IAC9E,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;IAC7C,uDAAuD;IACvD,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC;;;;OAIG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACjC,0EAA0E;IAC1E,WAAW,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAChE,6CAA6C;IAC7C,aAAa,EAAE,CAAC,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAClE,gCAAgC;IAChC,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,yEAAyE;IACzE,QAAQ,CAAC,QAAQ,EAAE,iBAAiB,CAAA;IACpC,8EAA8E;IAC9E,QAAQ,CAAC,QAAQ,EAAE,iBAAiB,CAAA;IACpC,yCAAyC;IACzC,QAAQ,CAAC,MAAM,EAAE,eAAe,CAAA;CACjC;AAMD,MAAM,WAAW,sBAAsB;IACrC,uEAAuE;IACvE,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,8BAA8B;IAC9B,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAA;IACvD,qDAAqD;IACrD,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAA;QACf,MAAM,EAAE,MAAM,CAAA;QACd,KAAK,EAAE,MAAM,CAAA;QACb,IAAI,EAAE,MAAM,CAAA;QACZ,UAAU,EAAE,MAAM,CAAA;KACnB,CAAA;IACD,iEAAiE;IACjE,OAAO,EAAE,OAAO,CAAA;IAChB,gDAAgD;IAChD,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,4CAA4C;IAC5C,UAAU,EAAE,OAAO,CAAA;IACnB,qCAAqC;IACrC,gBAAgB,EAAE,MAAM,IAAI,CAAA;CAC7B;AASD,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,WAAW,CAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IAC5D;;;OAGG;IACH,aAAa,CAAC,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IAC9D,gCAAgC;IAChC,KAAK,IAAI,IAAI,CAAA;CACd"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kungal/editor-vue",
-  "version": "0.19.0",
+  "version": "0.20.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.19.0"
+    "@kungal/editor-core": "0.20.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.19.0"
+    "@kungal/editor-core": "0.20.0"
   },
   "scripts": {
     "build": "vite build && vue-tsc -p tsconfig.build.json",