@kungal/editor-vue 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @kungal/editor-vue
 
+## 0.5.0
+
+### Minor Changes
+
+- 53a2769: P3 — add the formatting toolbar to `<KunEditor>`.
+
+  A self-contained `EditorToolbar` (WYSIWYG mode, hidden when read-only) with:
+  bold / italic / strikethrough / inline code, H1–H3, bullet & ordered lists,
+  blockquote, code block, divider, spoiler and LaTeX — plus an image-upload button
+  that appears only when the host supplies `uploadImage`.
+
+  Ported from the forum's `Menu.vue` + `_buttonList.ts`, but kept dependency-free:
+  inline SVG icons (no `@kungal/ui-vue`), themed via CSS variables so a KunUI host
+  still gets matching colours. It reaches the editor with `useInstance()` and fires
+  commands via `callCommand`; command keys are read at click time (they're only
+  populated once the editor is created). Verified end-to-end in a browser via
+  `apps/playground`.
+
+### Patch Changes
+
+- @kungal/editor-core@0.5.0
+
+## 0.4.0
+
+### Minor Changes
+
+- 56f4a77: P3 — wire the `@mention` autocomplete dropdown.
+
+  Typing `@` in `<KunEditor>` now opens a debounced, keyboard-navigable dropdown
+  (ported from the forum's `MentionDropdown.vue`) that resolves users through the
+  injected `searchMentionUsers` adapter and inserts a mention chip serializing to
+  `[@name](kungal-user:id)`. Without the adapter the mention schema still
+  round-trips — there's just no autocomplete.
+
+  The adapter reaches the dropdown via a `provide()` on `<KunEditor>`: because
+  @prosemirror-adapter/vue renders plugin views as portals that are _siblings_ of
+  the editor (children of `<ProsemirrorAdapterProvider>`), only an ancestor of the
+  provider can inject into them. Verified end-to-end in a real browser via the new
+  `apps/playground` dev app.
+
+### Patch Changes
+
+- @kungal/editor-core@0.4.0
+
 ## 0.3.0
 
 ### Minor Changes

package/README.md

@@ -54,9 +54,19 @@ editor**: a WYSIWYG view built from `@kungal/editor-core/preset`
 …), plus a markdown-source view, over one `v-model`. The prop/emit surface
 (`v-model`, `adapters`, `features`, `locale`, `readonly`) is stable.
 
-Still to come in P3 (they build on `@kungal/ui-vue`, hence staged): the rich
-formatting toolbar, the `@mention` autocomplete dropdown, the sticker/emoji
-picker, and the CodeMirror markdown-source view (currently a `<textarea>`). See
+A **formatting toolbar** is wired: bold / italic / strikethrough / inline code,
+H1–H3, bullet & ordered lists, blockquote, code block, divider, spoiler, LaTeX —
+plus an image-upload button when `uploadImage` is supplied. It's self-contained
+(inline SVG, no `@kungal/ui-vue` dependency), themed through CSS variables so a
+KunUI host still gets matching colours.
+
+The **`@mention` autocomplete dropdown** is wired: type `@`, and — when the host
+supplies `searchMentionUsers` — a debounced, keyboard-navigable dropdown offers
+users and inserts a mention chip (`[@name](kungal-user:id)`). Without the adapter
+the mention schema still round-trips; there's just no autocomplete.
+
+Still to come in P3: the sticker/emoji picker (over `stickerSource`) and the
+CodeMirror markdown-source view (currently a `<textarea>`). See
 [`../../docs/architecture.md`](../../docs/architecture.md) § migration.
 
 ## Build

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

@@ -0,0 +1,4 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=EditorToolbar.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditorToolbar.vue.d.ts","sourceRoot":"","sources":["../../src/components/EditorToolbar.vue"],"names":[],"mappings":"AA0ZA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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":"AA2LA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EAChB,MAAM,qBAAqB,CAAA;AAG5B,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;CACnB,CAAC;AAuKJ,QAAA,MAAM,YAAY;;;;;cA9KH,iBAAiB;cAEjB,iBAAiB;YAEnB,eAAe;cAEb,OAAO;6EA4KpB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"KunEditor.vue.d.ts","sourceRoot":"","sources":["../../src/components/KunEditor.vue"],"names":[],"mappings":"AAiNA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EAChB,MAAM,qBAAqB,CAAA;AAK5B,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;CACnB,CAAC;AA4LJ,QAAA,MAAM,YAAY;;;;;cAnMH,iBAAiB;cAEjB,iBAAiB;YAEnB,eAAe;cAEb,OAAO;6EAiMpB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -0,0 +1,4 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=MentionDropdown.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MentionDropdown.vue.d.ts","sourceRoot":"","sources":["../../src/components/MentionDropdown.vue"],"names":[],"mappings":"AA8pBA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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":"AAsGA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EAChB,MAAM,qBAAqB,CAAA;AAG5B,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;CAClB,CAAC;AAoFF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"MilkdownEditor.vue.d.ts","sourceRoot":"","sources":["../../src/components/MilkdownEditor.vue"],"names":[],"mappings":"AAkIA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EAChB,MAAM,qBAAqB,CAAA;AAI5B,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;CAClB,CAAC;AA2GF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/context.d.ts

@@ -0,0 +1,10 @@
+import type { InjectionKey } from 'vue';
+import type { KunEditorAdapters, KunEditorLocale } from '@kungal/editor-core';
+export interface KunEditorContext {
+    /** The host policy bundle (searchMentionUsers, stickerSource, notify, …). */
+    readonly adapters: KunEditorAdapters;
+    /** UI language, for view chrome (dropdown hints, etc.). */
+    readonly locale: KunEditorLocale;
+}
+export declare const KUN_EDITOR_CONTEXT: InjectionKey<KunEditorContext>;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,KAAK,CAAA;AACvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAE7E,MAAM,WAAW,gBAAgB;IAC/B,6EAA6E;IAC7E,QAAQ,CAAC,QAAQ,EAAE,iBAAiB,CAAA;IACpC,2DAA2D;IAC3D,QAAQ,CAAC,MAAM,EAAE,eAAe,CAAA;CACjC;AAED,eAAO,MAAM,kBAAkB,EAAE,YAAY,CAAC,gBAAgB,CAChC,CAAA"}

package/dist/index.js

@@ -1,13 +1,140 @@
-import { computed as e, createBlock as t, createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, openBlock as o, ref as s, toDisplayString as c, unref as l, vShow as u, watch as d, withCtx as f, withDirectives as p } from "vue";
-import { Milkdown as m, MilkdownProvider as h, useEditor as g } from "@milkdown/vue";
-import { ProsemirrorAdapterProvider as _ } from "@prosemirror-adapter/vue";
-import { Editor as v, defaultValueCtx as y, editorViewOptionsCtx as b, rootCtx as x } from "@milkdown/kit/core";
-import { listenerCtx as S } from "@milkdown/kit/plugin/listener";
-import { replaceAll as C } from "@milkdown/kit/utils";
-import { createKunEditorPlugins as w } from "@kungal/editor-core/preset";
-//#endregion
-//#region src/components/MilkdownEditor.vue
-var T = /* @__PURE__ */ a({
+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, inject as c, onBeforeUnmount as l, onMounted as u, openBlock as d, provide as f, ref as p, renderList as m, toDisplayString as h, unref as g, vShow as _, watch as v, withCtx as y, withDirectives as b, withModifiers as x } from "vue";
+import { Milkdown as S, MilkdownProvider as C, useEditor as w, useInstance as T } from "@milkdown/vue";
+import { ProsemirrorAdapterProvider as E, usePluginViewContext as D, usePluginViewFactory as O } from "@prosemirror-adapter/vue";
+import { Editor as k, defaultValueCtx as A, editorViewOptionsCtx as j, rootCtx as M } from "@milkdown/kit/core";
+import { listenerCtx as N } from "@milkdown/kit/plugin/listener";
+import { SlashProvider as P, slashFactory as F } from "@milkdown/kit/plugin/slash";
+import { callCommand as I, replaceAll as L } from "@milkdown/kit/utils";
+import { createKunEditorPlugins as R, insertKunSpoilerCommand as ee, mentionId as te, toggleLatexCommand as ne } from "@kungal/editor-core/preset";
+import { TextSelection as re } from "@milkdown/kit/prose/state";
+import { createCodeBlockCommand as ie, insertHrCommand as ae, insertImageCommand as z, toggleEmphasisCommand as B, toggleInlineCodeCommand as V, toggleStrongCommand as H, wrapInBlockquoteCommand as U, wrapInBulletListCommand as W, wrapInHeadingCommand as G, wrapInOrderedListCommand as K } from "@milkdown/kit/preset/commonmark";
+import { toggleStrikethroughCommand as q } from "@milkdown/kit/preset/gfm";
+//#region src/context.ts
+var J = Symbol("kun-editor-context"), oe = [
+	"data-active",
+	"onMousedown",
+	"onMouseenter"
+], se = ["src", "alt"], ce = {
+	key: 1,
+	class: "kun-mention-dropdown__avatar kun-mention-dropdown__avatar--fallback"
+}, le = { class: "kun-mention-dropdown__name" }, ue = {
+	key: 1,
+	class: "kun-mention-dropdown__hint"
+}, de = {
+	key: 2,
+	class: "kun-mention-dropdown__hint"
+}, fe = {
+	key: 3,
+	class: "kun-mention-dropdown__hint"
+}, pe = /* @__PURE__ */ s({
+	__name: "MentionDropdown",
+	setup(n) {
+		let r = /(?:^|\s)@([^\s@]{0,30})$/, o = c(J), s = o?.adapters.searchMentionUsers, f = t(() => (o?.locale ?? "zh-cn").toLowerCase().startsWith("en")), g = t(() => f.value ? {
+			searching: "Searching…",
+			empty: "No matching users",
+			prompt: "Type a username to search"
+		} : {
+			searching: "搜索中…",
+			empty: "无匹配用户",
+			prompt: "输入用户名以搜索"
+		}), { view: _, prevState: y } = D(), b = p(null), S, C = p(!1), w = p(""), T = p([]), E = p(0), O = p(!1), k = null, A = 0, j = null, M = () => {
+			j &&= (clearTimeout(j), null), w.value = "", T.value = [], E.value = 0, O.value = !1, k = null;
+		}, N = (e) => {
+			if (j &&= (clearTimeout(j), null), !e || !s) {
+				T.value = [], O.value = !1;
+				return;
+			}
+			O.value = !0, j = setTimeout(async () => {
+				let t = ++A, n = [];
+				try {
+					n = await s(e);
+				} catch {
+					n = [];
+				}
+				t === A && (T.value = n ?? [], E.value = 0, O.value = !1);
+			}, 180);
+		}, F = (e) => {
+			let { selection: t } = e.state;
+			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;
+		}, I = (e) => {
+			let t = F(e);
+			if (t === null) return !1;
+			let n = e.state.selection.$from.pos;
+			return k = {
+				from: n - (t.length + 1),
+				to: n
+			}, t !== w.value && (w.value = t, N(t)), !0;
+		}, L = (e) => {
+			let t = _.value;
+			if (!t || !k) return;
+			let n = t.state.schema.nodes[te];
+			if (!n) return;
+			let r = n.create({
+				userId: e.id,
+				name: e.name
+			}), { from: i, to: a } = k, o = t.state.tr.replaceWith(i, a, r), s = i + r.nodeSize;
+			o.insertText(" ", s), o.setSelection(re.create(o.doc, s + 1)), t.dispatch(o.scrollIntoView()), t.focus(), S.hide();
+		}, R = (e) => {
+			if (!C.value || !T.value.length) {
+				C.value && e.key === "Escape" && (e.preventDefault(), S.hide());
+				return;
+			}
+			let t = T.value.length - 1;
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), e.stopPropagation(), E.value = E.value >= t ? 0 : E.value + 1;
+					break;
+				case "ArrowUp":
+					e.preventDefault(), e.stopPropagation(), E.value = E.value <= 0 ? t : E.value - 1;
+					break;
+				case "Enter":
+				case "Tab": {
+					let t = T.value[E.value];
+					t && (e.preventDefault(), e.stopPropagation(), L(t));
+					break;
+				}
+				case "Escape":
+					e.preventDefault(), e.stopPropagation(), S.hide();
+					break;
+			}
+		};
+		return u(() => {
+			S = new P({
+				content: b.value,
+				trigger: "@",
+				shouldShow: I,
+				debounce: 0
+			}), S.onShow = () => {
+				C.value = !0;
+			}, S.onHide = () => {
+				C.value = !1, M();
+			}, S.update(_.value, y.value), window.addEventListener("keydown", R, !0);
+		}), v([_, y], () => {
+			S?.update(_.value, y.value);
+		}), l(() => {
+			j && clearTimeout(j), window.removeEventListener("keydown", R, !0), S?.destroy();
+		}), (t, n) => (d(), i("div", {
+			ref_key: "divRef",
+			ref: b,
+			class: "kun-mention-dropdown",
+			"data-show": "false"
+		}, [T.value.length ? (d(!0), i(e, { key: 0 }, m(T.value, (e, t) => (d(), i("button", {
+			key: e.id,
+			type: "button",
+			class: "kun-mention-dropdown__item",
+			"data-active": t === E.value,
+			onMousedown: x((t) => L(e), ["prevent"]),
+			onMouseenter: (e) => E.value = t
+		}, [e.avatar ? (d(), i("img", {
+			key: 0,
+			src: e.avatar,
+			alt: e.name,
+			class: "kun-mention-dropdown__avatar"
+		}, null, 8, se)) : (d(), i("span", ce, h(e.name.charAt(0)), 1)), a("span", le, h(e.name), 1)], 40, oe))), 128)) : O.value ? (d(), i("div", ue, h(g.value.searching), 1)) : w.value ? (d(), i("div", de, h(g.value.empty), 1)) : (d(), i("div", fe, h(g.value.prompt), 1))], 512));
+	}
+}), me = /* @__PURE__ */ s({
 	__name: "MilkdownEditor",
 	props: {
 		modelValue: {},
@@ -17,30 +144,210 @@ var T = /* @__PURE__ */ a({
 		readonly: { type: Boolean }
 	},
 	emits: ["update:modelValue"],
-	setup(e, { emit: n }) {
-		let r = e, i = n, a = r.modelValue, s = g((e) => v.make().config((t) => {
-			t.set(x, e), t.set(y, r.modelValue), t.get(S).markdownUpdated((e, t, n) => {
-				t !== n && (a = t, i("update:modelValue", t));
-			}), t.update(b, (e) => ({
-				...e,
-				editable: () => !r.readonly
-			}));
-		}).use(w(r.adapters, r.features, { locale: r.locale })));
-		return d(() => r.modelValue, (e) => {
-			e !== a && (a = e, s.get()?.action(C(e)));
-		}), (e, n) => (o(), t(l(m)));
+	setup(e, { emit: t }) {
+		let r = e, i = t, a = r.modelValue, o = O(), s = F("kunMention"), c = r.features.mention !== !1 && !!r.adapters.searchMentionUsers && !!o, l = w((e) => {
+			let t = k.make().config((t) => {
+				t.set(M, e), t.set(A, r.modelValue), t.get(N).markdownUpdated((e, t, n) => {
+					t !== n && (a = t, i("update:modelValue", t));
+				}), t.update(j, (e) => ({
+					...e,
+					editable: () => !r.readonly
+				})), c && t.set(s.key, { view: o({ component: pe }) });
+			}).use(R(r.adapters, r.features, { locale: r.locale }));
+			return c && t.use(s), t;
+		});
+		return v(() => r.modelValue, (e) => {
+			e !== a && (a = e, l.get()?.action(L(e)));
+		}), (e, t) => (d(), n(g(S)));
 	}
-}), E = {
+}), Y = (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>`, X = (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>`, Z = {
+	bold: Y("<path d=\"M6 4h8a4 4 0 0 1 0 8H6z\"/><path d=\"M6 12h9a4 4 0 0 1 0 8H6z\"/>"),
+	italic: Y("<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: Y("<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: Y("<path d=\"m18 16 4-4-4-4\"/><path d=\"m6 8-4 4 4 4\"/><path d=\"m14.5 4-5 16\"/>"),
+	h1: X("H1", 11),
+	h2: X("H2", 11),
+	h3: X("H3", 11),
+	bulletList: Y("<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: Y("<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: Y("<path d=\"M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z\" fill=\"currentColor\" stroke=\"none\"/>"),
+	codeBlock: Y("<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: Y("<line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"/>"),
+	image: Y("<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: Y("<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: X("Σ", 15)
+}, he = {
+	class: "kun-editor__format-toolbar",
+	role: "toolbar"
+}, ge = {
+	key: 0,
+	class: "kun-editor__toolbar-divider",
+	"aria-hidden": "true"
+}, _e = [
+	"title",
+	"aria-label",
+	"onClick"
+], ve = ["innerHTML"], ye = ["title", "aria-label"], be = ["innerHTML"], xe = /* @__PURE__ */ s({
+	__name: "EditorToolbar",
+	setup(n) {
+		let [, o] = T(), s = c(J), l = t(() => s?.adapters.uploadImage), u = () => s?.adapters.notify, f = t(() => (s?.locale ?? "zh-cn").toLowerCase().startsWith("en")), h = (e, t) => {
+			o()?.action(I(e, t));
+		}, _ = t(() => {
+			let e = f.value;
+			return {
+				bold: e ? "Bold" : "加粗",
+				italic: e ? "Italic" : "斜体",
+				strike: e ? "Strikethrough" : "删除线",
+				code: e ? "Inline code" : "行内代码",
+				h1: e ? "Heading 1" : "一级标题",
+				h2: e ? "Heading 2" : "二级标题",
+				h3: e ? "Heading 3" : "三级标题",
+				bulletList: e ? "Bullet list" : "无序列表",
+				orderedList: e ? "Ordered list" : "有序列表",
+				quote: e ? "Blockquote" : "引用块",
+				codeBlock: e ? "Code block" : "代码块",
+				hr: e ? "Divider" : "分隔线",
+				spoiler: e ? "Spoiler" : "隐藏文本",
+				latex: e ? "Math (LaTeX)" : "公式",
+				image: e ? "Upload image" : "上传图片"
+			};
+		}), v = t(() => [
+			[
+				{
+					svg: Z.bold,
+					title: _.value.bold,
+					run: () => h(H.key)
+				},
+				{
+					svg: Z.italic,
+					title: _.value.italic,
+					run: () => h(B.key)
+				},
+				{
+					svg: Z.strike,
+					title: _.value.strike,
+					run: () => h(q.key)
+				},
+				{
+					svg: Z.code,
+					title: _.value.code,
+					run: () => h(V.key)
+				}
+			],
+			[
+				{
+					svg: Z.h1,
+					title: _.value.h1,
+					run: () => h(G.key, 1)
+				},
+				{
+					svg: Z.h2,
+					title: _.value.h2,
+					run: () => h(G.key, 2)
+				},
+				{
+					svg: Z.h3,
+					title: _.value.h3,
+					run: () => h(G.key, 3)
+				}
+			],
+			[
+				{
+					svg: Z.bulletList,
+					title: _.value.bulletList,
+					run: () => h(W.key)
+				},
+				{
+					svg: Z.orderedList,
+					title: _.value.orderedList,
+					run: () => h(K.key)
+				},
+				{
+					svg: Z.quote,
+					title: _.value.quote,
+					run: () => h(U.key)
+				},
+				{
+					svg: Z.codeBlock,
+					title: _.value.codeBlock,
+					run: () => h(ie.key, "")
+				},
+				{
+					svg: Z.hr,
+					title: _.value.hr,
+					run: () => h(ae.key)
+				}
+			],
+			[{
+				svg: Z.spoiler,
+				title: _.value.spoiler,
+				run: () => h(ee.key)
+			}, {
+				svg: Z.latex,
+				title: _.value.latex,
+				run: () => h(ne.key)
+			}]
+		]), y = p(null), b = () => y.value?.click(), x = async (e) => {
+			let t = e.target, n = t.files?.[0];
+			t.value = "";
+			let r = l.value;
+			if (!(!n || !r)) try {
+				let e = await r(n);
+				h(z.key, {
+					src: e,
+					title: n.name,
+					alt: n.name
+				});
+			} catch {
+				u()?.(f.value ? "Image upload failed" : "图片上传失败", "error");
+			}
+		};
+		return (t, n) => (d(), i("div", he, [(d(!0), i(e, null, m(v.value, (t, n) => (d(), i(e, { key: n }, [n > 0 ? (d(), i("span", ge)) : r("", !0), (d(!0), i(e, null, m(t, (e, t) => (d(), i("button", {
+			key: t,
+			type: "button",
+			class: "kun-editor__tool",
+			title: e.title,
+			"aria-label": e.title,
+			onClick: (t) => e.run()
+		}, [a("span", {
+			class: "kun-editor__icon",
+			innerHTML: e.svg
+		}, null, 8, ve)], 8, _e))), 128))], 64))), 128)), l.value ? (d(), i(e, { key: 0 }, [
+			n[0] ||= a("span", {
+				class: "kun-editor__toolbar-divider",
+				"aria-hidden": "true"
+			}, null, -1),
+			a("button", {
+				type: "button",
+				class: "kun-editor__tool",
+				title: _.value.image,
+				"aria-label": _.value.image,
+				onClick: b
+			}, [a("span", {
+				class: "kun-editor__icon",
+				innerHTML: g(Z).image
+			}, null, 8, be)], 8, ye),
+			a("input", {
+				ref_key: "fileInput",
+				ref: y,
+				type: "file",
+				accept: ".jpg,.jpeg,.png,.webp,.gif",
+				hidden: "",
+				onChange: x
+			}, null, 544)
+		], 64)) : r("", !0)]));
+	}
+}), Q = {
 	class: "kun-editor",
 	"data-kun-editor": ""
-}, D = {
+}, Se = {
 	class: "kun-editor__toolbar",
 	role: "tablist"
-}, O = ["aria-selected", "data-active"], k = ["aria-selected", "data-active"], A = { class: "kun-editor__wysiwyg" }, j = [
+}, Ce = ["aria-selected", "data-active"], we = ["aria-selected", "data-active"], Te = { class: "kun-editor__wysiwyg" }, Ee = [
 	"value",
 	"readonly",
 	"lang"
-], M = /* @__PURE__ */ a({
+], $ = /* @__PURE__ */ s({
 	__name: "KunEditor",
 	props: {
 		modelValue: {},
@@ -53,60 +360,69 @@ var T = /* @__PURE__ */ a({
 		}
 	},
 	emits: ["update:modelValue"],
-	setup(t, { emit: a }) {
-		let d = t, m = a, g = s("wysiwyg"), v = e(() => d.locale.toLowerCase().startsWith("en")), y = e(() => v.value ? {
+	setup(e, { emit: n }) {
+		let r = e, s = n;
+		f(J, {
+			get adapters() {
+				return r.adapters;
+			},
+			get locale() {
+				return r.locale;
+			}
+		});
+		let c = p("wysiwyg"), l = t(() => r.locale.toLowerCase().startsWith("en")), u = t(() => l.value ? {
 			wysiwyg: "Preview",
 			source: "Markdown"
 		} : {
 			wysiwyg: "预览",
 			source: "Markdown"
-		}), b = (e) => m("update:modelValue", e), x = (e) => m("update:modelValue", e.target.value);
-		return (e, a) => (o(), n("div", E, [
-			r("div", D, [r("button", {
+		}), m = (e) => s("update:modelValue", e), v = (e) => s("update:modelValue", e.target.value);
+		return (t, n) => (d(), i("div", Q, [
+			a("div", Se, [a("button", {
 				type: "button",
 				class: "kun-editor__tab",
-				"aria-selected": g.value === "wysiwyg",
-				"data-active": g.value === "wysiwyg",
-				onClick: a[0] ||= (e) => g.value = "wysiwyg"
-			}, c(y.value.wysiwyg), 9, O), r("button", {
+				"aria-selected": c.value === "wysiwyg",
+				"data-active": c.value === "wysiwyg",
+				onClick: n[0] ||= (e) => c.value = "wysiwyg"
+			}, h(u.value.wysiwyg), 9, Ce), a("button", {
 				type: "button",
 				class: "kun-editor__tab",
-				"aria-selected": g.value === "source",
-				"data-active": g.value === "source",
-				onClick: a[1] ||= (e) => g.value = "source"
-			}, c(y.value.source), 9, k)]),
-			i(l(h), null, {
-				default: f(() => [i(l(_), null, {
-					default: f(() => [p(r("div", A, [i(T, {
-						"model-value": t.modelValue,
-						adapters: t.adapters,
-						features: t.features,
-						locale: t.locale,
-						readonly: t.readonly,
-						"onUpdate:modelValue": b
+				"aria-selected": c.value === "source",
+				"data-active": c.value === "source",
+				onClick: n[1] ||= (e) => c.value = "source"
+			}, h(u.value.source), 9, we)]),
+			o(g(C), null, {
+				default: y(() => [o(g(E), null, {
+					default: y(() => [b(o(xe, null, null, 512), [[_, c.value === "wysiwyg" && !e.readonly]]), b(a("div", Te, [o(me, {
+						"model-value": e.modelValue,
+						adapters: e.adapters,
+						features: e.features,
+						locale: e.locale,
+						readonly: e.readonly,
+						"onUpdate:modelValue": m
 					}, null, 8, [
 						"model-value",
 						"adapters",
 						"features",
 						"locale",
 						"readonly"
-					])], 512), [[u, g.value === "wysiwyg"]])]),
+					])], 512), [[_, c.value === "wysiwyg"]])]),
 					_: 1
 				})]),
 				_: 1
 			}),
-			p(r("textarea", {
+			b(a("textarea", {
 				class: "kun-editor__source",
-				value: t.modelValue,
-				readonly: t.readonly,
-				lang: t.locale,
+				value: e.modelValue,
+				readonly: e.readonly,
+				lang: e.locale,
 				spellcheck: "false",
-				onInput: x
-			}, null, 40, j), [[u, g.value === "source"]])
+				onInput: v
+			}, null, 40, Ee), [[_, c.value === "source"]])
 		]));
 	}
-}), N = { install(e) {
-	e.component("KunEditor", M);
+}), De = { install(e) {
+	e.component("KunEditor", $);
 } };
 //#endregion
-export { M as KunEditor, N as KunEditorPlugin };
+export { $ as KunEditor, De as KunEditorPlugin };

package/dist/style.css

@@ -1,2 +1,2 @@
-.kun-editor{flex-direction:column;gap:.5rem;display:flex}.kun-editor__toolbar{gap:.25rem;display:flex}.kun-editor__tab{border:1px solid var(--color-default-200,#e4e4e7);font:inherit;cursor:pointer;background:0 0;border-radius:.5rem;padding:.25rem .75rem}.kun-editor__tab[data-active=true]{background:var(--color-primary,#006fee);border-color:var(--color-primary,#006fee);color:#fff}.kun-editor__wysiwyg .milkdown{outline:none}.kun-editor__wysiwyg .ProseMirror{border:1px solid var(--color-default-200,#e4e4e7);border-radius:.5rem;outline:none;min-height:8rem;padding:.75rem}.kun-editor__source{border:1px solid var(--color-default-200,#e4e4e7);resize:vertical;border-radius:.5rem;width:100%;min-height:8rem;padding:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875rem}
+.kun-mention-dropdown{z-index:30;background:var(--color-background,#fff);border:1px solid var(--color-default-200,#e4e4e7);border-radius:.5rem;min-width:12rem;max-width:20rem;max-height:16rem;padding:.25rem;display:none;position:absolute;overflow-y:auto;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.kun-mention-dropdown[data-show=true]{display:block}.kun-mention-dropdown__item{width:100%;font:inherit;text-align:left;cursor:pointer;background:0 0;border:none;border-radius:.375rem;align-items:center;gap:.5rem;padding:.375rem .5rem;display:flex}.kun-mention-dropdown__item:hover,.kun-mention-dropdown__item[data-active=true]{background:var(--color-default-100,#f4f4f5)}.kun-mention-dropdown__avatar{object-fit:cover;border-radius:9999px;flex-shrink:0;width:1.5rem;height:1.5rem}.kun-mention-dropdown__avatar--fallback{background:var(--color-default-200,#e4e4e7);color:var(--color-default-600,#52525b);justify-content:center;align-items:center;font-size:.75rem;display:flex}.kun-mention-dropdown__name{text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;overflow:hidden}.kun-mention-dropdown__hint{color:var(--color-default-400,#a1a1aa);padding:.375rem .5rem;font-size:.875rem}.kun-editor__format-toolbar{flex-wrap:wrap;align-items:center;gap:.125rem;display:flex}.kun-editor__toolbar-divider{background:var(--color-default-200,#e4e4e7);align-self:stretch;width:1px;margin:.25rem}.kun-editor__tool{width:1.75rem;height:1.75rem;color:var(--color-foreground,#27272a);cursor:pointer;background:0 0;border:none;border-radius:.375rem;justify-content:center;align-items:center;padding:0;display:inline-flex}.kun-editor__tool:hover{background:var(--color-default-100,#f4f4f5)}.kun-editor__icon{display:inline-flex}.kun-editor{flex-direction:column;gap:.5rem;display:flex}.kun-editor__toolbar{gap:.25rem;display:flex}.kun-editor__tab{border:1px solid var(--color-default-200,#e4e4e7);font:inherit;cursor:pointer;background:0 0;border-radius:.5rem;padding:.25rem .75rem}.kun-editor__tab[data-active=true]{background:var(--color-primary,#006fee);border-color:var(--color-primary,#006fee);color:#fff}.kun-editor__wysiwyg .milkdown{outline:none}.kun-editor__wysiwyg .ProseMirror{border:1px solid var(--color-default-200,#e4e4e7);white-space:pre-wrap;word-wrap:break-word;border-radius:.5rem;outline:none;min-height:8rem;padding:.75rem}.kun-editor__source{border:1px solid var(--color-default-200,#e4e4e7);resize:vertical;border-radius:.5rem;width:100%;min-height:8rem;padding:.75rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875rem}
 /*$vite$:1*/

package/dist/toolbar-icons.d.ts

@@ -0,0 +1,18 @@
+export declare const TOOLBAR_ICONS: {
+    readonly bold: string;
+    readonly italic: string;
+    readonly strike: string;
+    readonly code: string;
+    readonly h1: string;
+    readonly h2: string;
+    readonly h3: string;
+    readonly bulletList: string;
+    readonly orderedList: string;
+    readonly quote: string;
+    readonly codeBlock: string;
+    readonly hr: string;
+    readonly image: string;
+    readonly spoiler: string;
+    readonly latex: string;
+};
+//# sourceMappingURL=toolbar-icons.d.ts.map

package/dist/toolbar-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-icons.d.ts","sourceRoot":"","sources":["../src/toolbar-icons.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;CAgBhB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kungal/editor-vue",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "KunEditor Vue 3 layer — the <KunEditor> component (dual WYSIWYG / markdown-source), toolbar and plugin views. Consumes @kungal/editor-core; pairs with @kungal/ui-vue.",
   "type": "module",
   "keywords": [
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@prosemirror-adapter/vue": "^0.4.6",
-    "@kungal/editor-core": "0.3.0"
+    "@kungal/editor-core": "0.5.0"
   },
   "peerDependencies": {
     "@kungal/ui-vue": "^2.7.0",
@@ -63,7 +63,7 @@
     "vite": "^8.0.16",
     "vue": "^3.5.35",
     "vue-tsc": "^3.3.3",
-    "@kungal/editor-core": "0.3.0"
+    "@kungal/editor-core": "0.5.0"
   },
   "scripts": {
     "build": "vite build && vue-tsc -p tsconfig.build.json",