@kungal/editor-vue 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @kungal/editor-vue
 
+## 0.7.0
+
+### Minor Changes
+
+- 4968c96: P3 (complete) — replace the source-mode `<textarea>` with a CodeMirror editor.
+
+  The "Markdown" tab is now a real CodeMirror editor with markdown syntax
+  highlighting, reusing the code block's `kunCM` theme (from
+  `@kungal/editor-core`) so the source view and code blocks match. Edits sync back
+  through `v-model` to the WYSIWYG view; the view is mounted on demand (CodeMirror
+  measures poorly while hidden).
+
+  Adds `@codemirror/lang-markdown` alongside the CodeMirror packages the editor
+  already needs (declared as optional peers; externalized from the build so the
+  host dedupes them). This finishes the P3 dual-view editor: WYSIWYG + toolbar +
+  @mention dropdown + sticker/emoji picker + CodeMirror source.
+
+### Patch Changes
+
+- @kungal/editor-core@0.7.0
+
+## 0.6.0
+
+### Minor Changes
+
+- a4cbd3a: P3 — add the sticker / emoji picker to the toolbar.
+
+  A merged popover (ported from the forum's sticker + emoji Containers):
+
+  - **Emoji tab** — a built-in curated unicode set, inserted as plain text. No
+    adapter, always available.
+  - **Sticker tab** — appears only when the host supplies the `stickerSource`
+    adapter; loads packs lazily on first open and inserts each sticker as an image
+    node (`insertImageCommand`). Stickers are images, so an image-free editor gets
+    emoji only.
+
+  Self-contained (no `@kungal/ui-vue`): a plain trigger button + a click-outside
+  popover, themed via CSS variables. Gated by `features.sticker` (default on). The
+  `KunEditorContext` now also carries `features` so views can read the flags.
+  Verified end-to-end in a browser via `apps/playground` (emoji → text; sticker →
+  image node in the v-model markdown).
+
+### Patch Changes
+
+- @kungal/editor-core@0.6.0
+
 ## 0.5.0
 
 ### Minor Changes

package/README.md

@@ -48,11 +48,11 @@ Enable optional plugins by also installing their peers: `katex` (LaTeX),
 
 ## Status
 
-**P3 in progress.** `<KunEditor>` now renders a **real Milkdown dual-view
-editor**: a WYSIWYG view built from `@kungal/editor-core/preset`
-(`createKunEditorPlugins` — spoiler / katex / code-block / mention / upload /
-…), plus a markdown-source view, over one `v-model`. The prop/emit surface
-(`v-model`, `adapters`, `features`, `locale`, `readonly`) is stable.
+**P3 complete.** `<KunEditor>` is a **real Milkdown dual-view editor**: a WYSIWYG
+view built from `@kungal/editor-core/preset` (`createKunEditorPlugins` — spoiler /
+katex / code-block / mention / upload / …) and a CodeMirror markdown-source view,
+over one `v-model`. The prop/emit surface (`v-model`, `adapters`, `features`,
+`locale`, `readonly`) is stable.
 
 A **formatting toolbar** is wired: bold / italic / strikethrough / inline code,
 H1–H3, bullet & ordered lists, blockquote, code block, divider, spoiler, LaTeX —
@@ -65,8 +65,17 @@ supplies `searchMentionUsers` — a debounced, keyboard-navigable dropdown offer
 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
+The **sticker / emoji picker** is a toolbar popover: a built-in emoji tab
+(unicode, inserted as text — no adapter) plus a sticker tab that appears when the
+host supplies `stickerSource`, inserting each sticker as an image node. Turn the
+whole picker off with `features.sticker: false`.
+
+The **markdown-source view** (the "Markdown" tab) is a CodeMirror editor with
+markdown highlighting, sharing the code block's `kunCM` theme. Edits sync back
+through `v-model` to the WYSIWYG view.
+
+Next: **P4** — adopt in the forum, replacing its in-repo `components/kun/milkdown`
+with real adapters. See
 [`../../docs/architecture.md`](../../docs/architecture.md) § migration.
 
 ## Build

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

@@ -1 +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"}
+{"version":3,"file":"EditorToolbar.vue.d.ts","sourceRoot":"","sources":["../../src/components/EditorToolbar.vue"],"names":[],"mappings":"AAqbA,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":"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"}
+{"version":3,"file":"KunEditor.vue.d.ts","sourceRoot":"","sources":["../../src/components/KunEditor.vue"],"names":[],"mappings":"AAuMA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EAChB,MAAM,qBAAqB,CAAA;AAM5B,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;AAuMJ,QAAA,MAAM,YAAY;;;;;cA9MH,iBAAiB;cAEjB,iBAAiB;YAEnB,eAAe;cAEb,OAAO;6EA4MpB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    modelValue: string;
+    readonly: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (markdown: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((markdown: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=MarkdownSource.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownSource.vue.d.ts","sourceRoot":"","sources":["../../src/components/MarkdownSource.vue"],"names":[],"mappings":"AAkGA,KAAK,WAAW,GAAG;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAC;AA2EF,QAAA,MAAM,YAAY;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/StickerPicker.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=StickerPicker.vue.d.ts.map

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

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

package/dist/context.d.ts

@@ -1,9 +1,11 @@
 import type { InjectionKey } from 'vue';
-import type { KunEditorAdapters, KunEditorLocale } from '@kungal/editor-core';
+import type { KunEditorAdapters, KunEditorFeatures, 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.). */
+    /** Which optional plugins/views are enabled. */
+    readonly features: KunEditorFeatures;
+    /** UI language, for view chrome (dropdown hints, picker tabs, etc.). */
     readonly locale: KunEditorLocale;
 }
 export declare const KUN_EDITOR_CONTEXT: InjectionKey<KunEditorContext>;

package/dist/context.d.ts.map

@@ -1 +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"}
+{"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,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EAChB,MAAM,qBAAqB,CAAA;AAE5B,MAAM,WAAW,gBAAgB;IAC/B,6EAA6E;IAC7E,QAAQ,CAAC,QAAQ,EAAE,iBAAiB,CAAA;IACpC,gDAAgD;IAChD,QAAQ,CAAC,QAAQ,EAAE,iBAAiB,CAAA;IACpC,wEAAwE;IACxE,QAAQ,CAAC,MAAM,EAAE,eAAe,CAAA;CACjC;AAED,eAAO,MAAM,kBAAkB,EAAE,YAAY,CAAC,gBAAgB,CAChC,CAAA"}

package/dist/emoji.d.ts

@@ -0,0 +1,2 @@
+export declare const EMOJI: readonly string[];
+//# sourceMappingURL=emoji.d.ts.map

package/dist/emoji.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji.d.ts","sourceRoot":"","sources":["../src/emoji.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,KAAK,EAAE,SAAS,MAAM,EAsBlC,CAAA"}

package/dist/index.js

@@ -1,32 +1,36 @@
 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 { Editor as k, defaultValueCtx as A, editorViewCtx as j, editorViewOptionsCtx as M, rootCtx as N } from "@milkdown/kit/core";
+import { listenerCtx as P } from "@milkdown/kit/plugin/listener";
+import { SlashProvider as ee, 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";
+import { createKunEditorPlugins as R, insertKunSpoilerCommand as te, kunCM as ne, mentionId as re, toggleLatexCommand as ie } from "@kungal/editor-core/preset";
+import { TextSelection as ae } from "@milkdown/kit/prose/state";
+import { createCodeBlockCommand as oe, insertHrCommand as se, 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 ce } from "@milkdown/kit/preset/gfm";
+import { EditorState as le } from "@codemirror/state";
+import { EditorView as q } from "@codemirror/view";
+import { markdown as ue } from "@codemirror/lang-markdown";
+import { basicSetup as de } from "codemirror";
 //#region src/context.ts
-var J = Symbol("kun-editor-context"), oe = [
+var J = Symbol("kun-editor-context"), fe = [
 	"data-active",
 	"onMousedown",
 	"onMouseenter"
-], se = ["src", "alt"], ce = {
+], pe = ["src", "alt"], me = {
 	key: 1,
 	class: "kun-mention-dropdown__avatar kun-mention-dropdown__avatar--fallback"
-}, le = { class: "kun-mention-dropdown__name" }, ue = {
+}, he = { class: "kun-mention-dropdown__name" }, ge = {
 	key: 1,
 	class: "kun-mention-dropdown__hint"
-}, de = {
+}, _e = {
 	key: 2,
 	class: "kun-mention-dropdown__hint"
-}, fe = {
+}, ve = {
 	key: 3,
 	class: "kun-mention-dropdown__hint"
-}, pe = /* @__PURE__ */ s({
+}, ye = /* @__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 ? {
@@ -53,30 +57,30 @@ var J = Symbol("kun-editor-context"), oe = [
 				}
 				t === A && (T.value = n ?? [], E.value = 0, O.value = !1);
 			}, 180);
-		}, F = (e) => {
+		}, P = (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);
+		}, F = (e) => {
+			let t = P(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) => {
+		}, I = (e) => {
 			let t = _.value;
 			if (!t || !k) return;
-			let n = t.state.schema.nodes[te];
+			let n = t.state.schema.nodes[re];
 			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) => {
+			o.insertText(" ", s), o.setSelection(ae.create(o.doc, s + 1)), t.dispatch(o.scrollIntoView()), t.focus(), S.hide();
+		}, L = (e) => {
 			if (!C.value || !T.value.length) {
 				C.value && e.key === "Escape" && (e.preventDefault(), S.hide());
 				return;
@@ -92,7 +96,7 @@ var J = Symbol("kun-editor-context"), oe = [
 				case "Enter":
 				case "Tab": {
 					let t = T.value[E.value];
-					t && (e.preventDefault(), e.stopPropagation(), L(t));
+					t && (e.preventDefault(), e.stopPropagation(), I(t));
 					break;
 				}
 				case "Escape":
@@ -101,20 +105,20 @@ var J = Symbol("kun-editor-context"), oe = [
 			}
 		};
 		return u(() => {
-			S = new P({
+			S = new ee({
 				content: b.value,
 				trigger: "@",
-				shouldShow: I,
+				shouldShow: F,
 				debounce: 0
 			}), S.onShow = () => {
 				C.value = !0;
 			}, S.onHide = () => {
 				C.value = !1, M();
-			}, S.update(_.value, y.value), window.addEventListener("keydown", R, !0);
+			}, S.update(_.value, y.value), window.addEventListener("keydown", L, !0);
 		}), v([_, y], () => {
 			S?.update(_.value, y.value);
 		}), l(() => {
-			j && clearTimeout(j), window.removeEventListener("keydown", R, !0), S?.destroy();
+			j && clearTimeout(j), window.removeEventListener("keydown", L, !0), S?.destroy();
 		}), (t, n) => (d(), i("div", {
 			ref_key: "divRef",
 			ref: b,
@@ -125,16 +129,16 @@ var J = Symbol("kun-editor-context"), oe = [
 			type: "button",
 			class: "kun-mention-dropdown__item",
 			"data-active": t === E.value,
-			onMousedown: x((t) => L(e), ["prevent"]),
+			onMousedown: x((t) => I(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));
+		}, null, 8, pe)) : (d(), i("span", me, h(e.name.charAt(0)), 1)), a("span", he, h(e.name), 1)], 40, fe))), 128)) : O.value ? (d(), i("div", ge, h(g.value.searching), 1)) : w.value ? (d(), i("div", _e, h(g.value.empty), 1)) : (d(), i("div", ve, h(g.value.prompt), 1))], 512));
 	}
-}), me = /* @__PURE__ */ s({
+}), be = /* @__PURE__ */ s({
 	__name: "MilkdownEditor",
 	props: {
 		modelValue: {},
@@ -147,12 +151,12 @@ var J = Symbol("kun-editor-context"), oe = [
 	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.set(N, e), t.set(A, r.modelValue), t.get(P).markdownUpdated((e, t, n) => {
 					t !== n && (a = t, i("update:modelValue", t));
-				}), t.update(j, (e) => ({
+				}), t.update(M, (e) => ({
 					...e,
 					editable: () => !r.readonly
-				})), c && t.set(s.key, { view: o({ component: pe }) });
+				})), c && t.set(s.key, { view: o({ component: ye }) });
 			}).use(R(r.adapters, r.features, { locale: r.locale }));
 			return c && t.use(s), t;
 		});
@@ -175,25 +179,130 @@ var J = Symbol("kun-editor-context"), oe = [
 	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 = {
+	latex: X("Σ", 15),
+	smile: Y("<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\"/>")
+}, xe = /* @__PURE__ */ "😀.😃.😄.😁.😆.😅.🤣.😂.🙂.🙃.😉.😊.😇.🥰.😍.🤩.😘.😗.😚.😋.😛.😜.🤪.😝.🤗.🤭.🤔.🤐.😐.😑.😶.😏.😒.🙄.😬.😌.😔.😪.🤤.😴.😷.🤒.🤕.🥵.🥶.🥴.😵.🤯.🤠.🥳.😎.🤓.🧐.😕.😟.🙁.😮.😯.😲.😳.🥺.😦.😧.😨.😰.😥.😢.😭.😱.😖.😣.😞.😓.😩.😫.🥱.😤.😡.😠.🤬.😈.👿.💀.💩.🤡.👻.👽.🤖.😺.😸.👍.👎.👌.🤌.🤏.✌️.🤞.🤟.🤘.👋.🤚.🖐️.✋.👏.🙌.🤝.🙏.💪.👀.👁️.❤️.🧡.💛.💚.💙.💜.🖤.🤍.💔.💕.💞.💓.💗.💖.💘.💝.💯.✨.⭐.🌟.🔥.💥.💫.⚡.☀️.🌈.🎉.🎊.🎁.🏆.🐶.🐱.🐭.🦊.🐻.🐼.🐨.🦄.🐢.🐳.🍎.🍑.🍓.🍉.🍰.🍺.🍵.☕.🍜.🍙.✅.❌.❓.❗.💤.👑.🎮.🎵.📌.🔖".split("."), Se = [
+	"title",
+	"aria-label",
+	"aria-expanded"
+], Ce = ["innerHTML"], we = { class: "kun-editor__picker-panel" }, Te = {
+	key: 0,
+	class: "kun-editor__picker-tabs",
+	role: "tablist"
+}, Ee = ["data-active"], De = ["data-active"], Oe = { class: "kun-editor__emoji-grid" }, ke = ["onClick"], Ae = {
+	key: 1,
+	class: "kun-editor__sticker-body"
+}, je = { class: "kun-editor__pack-name" }, Me = { class: "kun-editor__sticker-grid" }, Ne = ["title", "onClick"], Pe = ["src", "alt"], Fe = {
+	key: 1,
+	class: "kun-editor__picker-hint"
+}, Ie = /* @__PURE__ */ s({
+	__name: "StickerPicker",
+	setup(n) {
+		let [, o] = T(), s = c(J), f = s?.adapters.stickerSource, v = !!f, y = t(() => (s?.locale ?? "zh-cn").toLowerCase().startsWith("en")), x = t(() => y.value ? {
+			trigger: "Emoji & stickers",
+			emoji: "Emoji",
+			sticker: "Stickers",
+			empty: "No stickers",
+			failed: "Failed to load stickers"
+		} : {
+			trigger: "表情与贴纸",
+			emoji: "表情",
+			sticker: "贴纸",
+			empty: "暂无贴纸",
+			failed: "贴纸加载失败"
+		}), S = p(!1), C = p(null), w = p("emoji"), E = p([]), D = p(!1), O = p(!1), k = async () => {
+			if (!(D.value || !f)) {
+				D.value = !0;
+				try {
+					E.value = await f();
+				} catch {
+					O.value = !0;
+				}
+			}
+		}, A = () => {
+			S.value = !S.value, S.value && v && k();
+		}, M = (e) => {
+			S.value && C.value && !C.value.contains(e.target) && (S.value = !1);
+		};
+		u(() => document.addEventListener("click", M)), l(() => document.removeEventListener("click", M));
+		let N = (e) => {
+			o()?.action((t) => {
+				let n = t.get(j), { state: r } = n;
+				n.dispatch(r.tr.insertText(e, r.selection.from));
+			});
+		}, P = (e, t) => {
+			o()?.action(I(z.key, {
+				src: e,
+				title: t,
+				alt: t
+			}));
+		};
+		return (t, n) => (d(), i("div", {
+			ref_key: "rootRef",
+			ref: C,
+			class: "kun-editor__picker"
+		}, [a("button", {
+			type: "button",
+			class: "kun-editor__tool",
+			title: x.value.trigger,
+			"aria-label": x.value.trigger,
+			"aria-expanded": S.value,
+			onClick: A
+		}, [a("span", {
+			class: "kun-editor__icon",
+			innerHTML: g(Z).smile
+		}, null, 8, Ce)], 8, Se), b(a("div", we, [
+			v ? (d(), i("div", Te, [a("button", {
+				type: "button",
+				class: "kun-editor__picker-tab",
+				"data-active": w.value === "emoji",
+				onClick: n[0] ||= (e) => w.value = "emoji"
+			}, h(x.value.emoji), 9, Ee), a("button", {
+				type: "button",
+				class: "kun-editor__picker-tab",
+				"data-active": w.value === "sticker",
+				onClick: n[1] ||= (e) => w.value = "sticker"
+			}, h(x.value.sticker), 9, De)])) : r("", !0),
+			b(a("div", Oe, [(d(!0), i(e, null, m(g(xe), (e, t) => (d(), i("button", {
+				key: t,
+				type: "button",
+				class: "kun-editor__emoji",
+				onClick: (t) => N(e)
+			}, h(e), 9, ke))), 128))], 512), [[_, !v || w.value === "emoji"]]),
+			v ? b((d(), i("div", Ae, [E.value.length ? (d(!0), i(e, { key: 0 }, m(E.value, (t) => (d(), i("div", {
+				key: t.name,
+				class: "kun-editor__pack"
+			}, [a("div", je, h(t.name), 1), a("div", Me, [(d(!0), i(e, null, m(t.stickers, (e, t) => (d(), i("button", {
+				key: t,
+				type: "button",
+				class: "kun-editor__sticker",
+				title: e.name,
+				onClick: (t) => P(e.src, e.name)
+			}, [a("img", {
+				src: e.src,
+				alt: e.name,
+				loading: "lazy"
+			}, null, 8, Pe)], 8, Ne))), 128))])]))), 128)) : (d(), i("div", Fe, h(O.value ? x.value.failed : x.value.empty), 1))], 512)), [[_, w.value === "sticker"]]) : r("", !0)
+		], 512), [[_, S.value]])], 512));
+	}
+}), Le = {
 	class: "kun-editor__format-toolbar",
 	role: "toolbar"
-}, ge = {
+}, Re = {
 	key: 0,
 	class: "kun-editor__toolbar-divider",
 	"aria-hidden": "true"
-}, _e = [
+}, ze = [
 	"title",
 	"aria-label",
 	"onClick"
-], ve = ["innerHTML"], ye = ["title", "aria-label"], be = ["innerHTML"], xe = /* @__PURE__ */ s({
+], Be = ["innerHTML"], Ve = ["title", "aria-label"], He = ["innerHTML"], Q = /* @__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;
+		let [, s] = T(), l = c(J), u = t(() => l?.adapters.uploadImage), f = () => l?.adapters.notify, h = t(() => l?.features.sticker !== !1), _ = t(() => (l?.locale ?? "zh-cn").toLowerCase().startsWith("en")), v = (e, t) => {
+			s()?.action(I(e, t));
+		}, y = t(() => {
+			let e = _.value;
 			return {
 				bold: e ? "Bold" : "加粗",
 				italic: e ? "Italic" : "斜体",
@@ -211,143 +320,182 @@ var J = Symbol("kun-editor-context"), oe = [
 				latex: e ? "Math (LaTeX)" : "公式",
 				image: e ? "Upload image" : "上传图片"
 			};
-		}), v = t(() => [
+		}), b = t(() => [
 			[
 				{
 					svg: Z.bold,
-					title: _.value.bold,
-					run: () => h(H.key)
+					title: y.value.bold,
+					run: () => v(H.key)
 				},
 				{
 					svg: Z.italic,
-					title: _.value.italic,
-					run: () => h(B.key)
+					title: y.value.italic,
+					run: () => v(B.key)
 				},
 				{
 					svg: Z.strike,
-					title: _.value.strike,
-					run: () => h(q.key)
+					title: y.value.strike,
+					run: () => v(ce.key)
 				},
 				{
 					svg: Z.code,
-					title: _.value.code,
-					run: () => h(V.key)
+					title: y.value.code,
+					run: () => v(V.key)
 				}
 			],
 			[
 				{
 					svg: Z.h1,
-					title: _.value.h1,
-					run: () => h(G.key, 1)
+					title: y.value.h1,
+					run: () => v(G.key, 1)
 				},
 				{
 					svg: Z.h2,
-					title: _.value.h2,
-					run: () => h(G.key, 2)
+					title: y.value.h2,
+					run: () => v(G.key, 2)
 				},
 				{
 					svg: Z.h3,
-					title: _.value.h3,
-					run: () => h(G.key, 3)
+					title: y.value.h3,
+					run: () => v(G.key, 3)
 				}
 			],
 			[
 				{
 					svg: Z.bulletList,
-					title: _.value.bulletList,
-					run: () => h(W.key)
+					title: y.value.bulletList,
+					run: () => v(W.key)
 				},
 				{
 					svg: Z.orderedList,
-					title: _.value.orderedList,
-					run: () => h(K.key)
+					title: y.value.orderedList,
+					run: () => v(K.key)
 				},
 				{
 					svg: Z.quote,
-					title: _.value.quote,
-					run: () => h(U.key)
+					title: y.value.quote,
+					run: () => v(U.key)
 				},
 				{
 					svg: Z.codeBlock,
-					title: _.value.codeBlock,
-					run: () => h(ie.key, "")
+					title: y.value.codeBlock,
+					run: () => v(oe.key, "")
 				},
 				{
 					svg: Z.hr,
-					title: _.value.hr,
-					run: () => h(ae.key)
+					title: y.value.hr,
+					run: () => v(se.key)
 				}
 			],
 			[{
 				svg: Z.spoiler,
-				title: _.value.spoiler,
-				run: () => h(ee.key)
+				title: y.value.spoiler,
+				run: () => v(te.key)
 			}, {
 				svg: Z.latex,
-				title: _.value.latex,
-				run: () => h(ne.key)
+				title: y.value.latex,
+				run: () => v(ie.key)
 			}]
-		]), y = p(null), b = () => y.value?.click(), x = async (e) => {
+		]), x = p(null), S = () => x.value?.click(), C = async (e) => {
 			let t = e.target, n = t.files?.[0];
 			t.value = "";
-			let r = l.value;
+			let r = u.value;
 			if (!(!n || !r)) try {
 				let e = await r(n);
-				h(z.key, {
+				v(z.key, {
 					src: e,
 					title: n.name,
 					alt: n.name
 				});
 			} catch {
-				u()?.(f.value ? "Image upload failed" : "图片上传失败", "error");
+				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", {
+		return (t, n) => (d(), i("div", Le, [
+			(d(!0), i(e, null, m(b.value, (t, n) => (d(), i(e, { key: n }, [n > 0 ? (d(), i("span", Re)) : r("", !0), (d(!0), i(e, null, m(t, (e, t) => (d(), i("button", {
+				key: t,
 				type: "button",
 				class: "kun-editor__tool",
-				title: _.value.image,
-				"aria-label": _.value.image,
-				onClick: b
+				title: e.title,
+				"aria-label": e.title,
+				onClick: (t) => e.run()
 			}, [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)]));
+				innerHTML: e.svg
+			}, null, 8, Be)], 8, ze))), 128))], 64))), 128)),
+			u.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: y.value.image,
+					"aria-label": y.value.image,
+					onClick: S
+				}, [a("span", {
+					class: "kun-editor__icon",
+					innerHTML: g(Z).image
+				}, null, 8, He)], 8, Ve),
+				a("input", {
+					ref_key: "fileInput",
+					ref: x,
+					type: "file",
+					accept: ".jpg,.jpeg,.png,.webp,.gif",
+					hidden: "",
+					onChange: C
+				}, null, 544)
+			], 64)) : r("", !0),
+			h.value ? (d(), i(e, { key: 1 }, [n[1] ||= a("span", {
+				class: "kun-editor__toolbar-divider",
+				"aria-hidden": "true"
+			}, null, -1), o(Ie)], 64)) : r("", !0)
+		]));
+	}
+}), Ue = /* @__PURE__ */ s({
+	__name: "MarkdownSource",
+	props: {
+		modelValue: {},
+		readonly: { type: Boolean }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, a = p(null), o = null, s = (e) => le.create({
+			doc: e,
+			extensions: [
+				ne(),
+				q.lineWrapping,
+				de,
+				ue(),
+				q.editable.of(!n.readonly),
+				q.updateListener.of((e) => {
+					e.docChanged && r("update:modelValue", e.state.doc.toString());
+				})
+			]
+		});
+		return u(() => {
+			a.value && (o = new q({
+				state: s(n.modelValue),
+				parent: a.value
+			}));
+		}), l(() => {
+			o?.destroy(), o = null;
+		}), v(() => n.modelValue, (e) => {
+			o && o.state.doc.toString() !== e && o.setState(s(e));
+		}), (e, t) => (d(), i("div", {
+			ref_key: "host",
+			ref: a,
+			class: "kun-editor__source"
+		}, null, 512));
 	}
-}), Q = {
+}), We = {
 	class: "kun-editor",
 	"data-kun-editor": ""
-}, Se = {
+}, Ge = {
 	class: "kun-editor__toolbar",
 	role: "tablist"
-}, Ce = ["aria-selected", "data-active"], we = ["aria-selected", "data-active"], Te = { class: "kun-editor__wysiwyg" }, Ee = [
-	"value",
-	"readonly",
-	"lang"
-], $ = /* @__PURE__ */ s({
+}, Ke = ["aria-selected", "data-active"], qe = ["aria-selected", "data-active"], Je = { class: "kun-editor__wysiwyg" }, $ = /* @__PURE__ */ s({
 	__name: "KunEditor",
 	props: {
 		modelValue: {},
@@ -360,69 +508,70 @@ var J = Symbol("kun-editor-context"), oe = [
 		}
 	},
 	emits: ["update:modelValue"],
-	setup(e, { emit: n }) {
-		let r = e, s = n;
+	setup(e, { emit: s }) {
+		let c = e, l = s;
 		f(J, {
 			get adapters() {
-				return r.adapters;
+				return c.adapters;
+			},
+			get features() {
+				return c.features;
 			},
 			get locale() {
-				return r.locale;
+				return c.locale;
 			}
 		});
-		let c = p("wysiwyg"), l = t(() => r.locale.toLowerCase().startsWith("en")), u = t(() => l.value ? {
+		let u = p("wysiwyg"), m = t(() => c.locale.toLowerCase().startsWith("en")), v = t(() => m.value ? {
 			wysiwyg: "Preview",
 			source: "Markdown"
 		} : {
 			wysiwyg: "预览",
 			source: "Markdown"
-		}), 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", {
+		}), x = (e) => l("update:modelValue", e);
+		return (t, s) => (d(), i("div", We, [
+			a("div", Ge, [a("button", {
 				type: "button",
 				class: "kun-editor__tab",
-				"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", {
+				"aria-selected": u.value === "wysiwyg",
+				"data-active": u.value === "wysiwyg",
+				onClick: s[0] ||= (e) => u.value = "wysiwyg"
+			}, h(v.value.wysiwyg), 9, Ke), a("button", {
 				type: "button",
 				class: "kun-editor__tab",
-				"aria-selected": c.value === "source",
-				"data-active": c.value === "source",
-				onClick: n[1] ||= (e) => c.value = "source"
-			}, h(u.value.source), 9, we)]),
+				"aria-selected": u.value === "source",
+				"data-active": u.value === "source",
+				onClick: s[1] ||= (e) => u.value = "source"
+			}, h(v.value.source), 9, qe)]),
 			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, {
+					default: y(() => [b(o(Q, null, null, 512), [[_, u.value === "wysiwyg" && !e.readonly]]), b(a("div", Je, [o(be, {
 						"model-value": e.modelValue,
 						adapters: e.adapters,
 						features: e.features,
 						locale: e.locale,
 						readonly: e.readonly,
-						"onUpdate:modelValue": m
+						"onUpdate:modelValue": x
 					}, null, 8, [
 						"model-value",
 						"adapters",
 						"features",
 						"locale",
 						"readonly"
-					])], 512), [[_, c.value === "wysiwyg"]])]),
+					])], 512), [[_, u.value === "wysiwyg"]])]),
 					_: 1
 				})]),
 				_: 1
 			}),
-			b(a("textarea", {
-				class: "kun-editor__source",
-				value: e.modelValue,
+			u.value === "source" ? (d(), n(Ue, {
+				key: 0,
+				"model-value": e.modelValue,
 				readonly: e.readonly,
-				lang: e.locale,
-				spellcheck: "false",
-				onInput: v
-			}, null, 40, Ee), [[_, c.value === "source"]])
+				"onUpdate:modelValue": x
+			}, null, 8, ["model-value", "readonly"])) : r("", !0)
 		]));
 	}
-}), De = { install(e) {
+}), Ye = { install(e) {
 	e.component("KunEditor", $);
 } };
 //#endregion
-export { $ as KunEditor, De as KunEditorPlugin };
+export { $ as KunEditor, Ye as KunEditorPlugin };

package/dist/style.css

@@ -1,2 +1,2 @@
-.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}
+.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__picker{display:inline-flex;position:relative}.kun-editor__picker-panel{z-index:30;background:var(--color-background,#fff);border:1px solid var(--color-default-200,#e4e4e7);border-radius:.5rem;width:18rem;padding:.5rem;position:absolute;top:calc(100% + .25rem);left:0;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.kun-editor__picker-tabs{gap:.25rem;margin-bottom:.5rem;display:flex}.kun-editor__picker-tab{font:inherit;cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:.25rem .5rem}.kun-editor__picker-tab[data-active=true]{border-bottom-color:var(--color-primary,#006fee);color:var(--color-primary,#006fee)}.kun-editor__emoji-grid{grid-template-columns:repeat(8,1fr);gap:.125rem;max-height:16rem;display:grid;overflow-y:auto}.kun-editor__emoji{aspect-ratio:1;cursor:pointer;background:0 0;border:none;border-radius:.375rem;font-size:1.25rem;line-height:1}.kun-editor__emoji:hover{background:var(--color-default-100,#f4f4f5)}.kun-editor__sticker-body{max-height:16rem;overflow-y:auto}.kun-editor__pack-name{color:var(--color-default-500,#71717a);padding:.25rem .125rem;font-size:.75rem}.kun-editor__sticker-grid{grid-template-columns:repeat(5,1fr);gap:.25rem;display:grid}.kun-editor__sticker{aspect-ratio:1;cursor:pointer;background:0 0;border:none;border-radius:.375rem;padding:.125rem}.kun-editor__sticker:hover{background:var(--color-default-100,#f4f4f5)}.kun-editor__sticker img{object-fit:contain;width:100%;height:100%}.kun-editor__picker-hint{color:var(--color-default-400,#a1a1aa);text-align:center;padding:1rem;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__source .cm-editor{border:1px solid var(--color-default-200,#e4e4e7);border-radius:.5rem;overflow:hidden}.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}
 /*$vite$:1*/

package/dist/toolbar-icons.d.ts

@@ -14,5 +14,6 @@ export declare const TOOLBAR_ICONS: {
     readonly image: string;
     readonly spoiler: string;
     readonly latex: string;
+    readonly smile: string;
 };
 //# sourceMappingURL=toolbar-icons.d.ts.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kungal/editor-vue",
-  "version": "0.5.0",
+  "version": "0.7.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,26 +44,48 @@
   },
   "dependencies": {
     "@prosemirror-adapter/vue": "^0.4.6",
-    "@kungal/editor-core": "0.5.0"
+    "@kungal/editor-core": "0.7.0"
   },
   "peerDependencies": {
+    "@codemirror/lang-markdown": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.0",
     "@kungal/ui-vue": "^2.7.0",
     "@milkdown/kit": "^7.21.2",
     "@milkdown/prose": "^7.21.2",
     "@milkdown/vue": "^7.21.2",
+    "codemirror": "^6.0.0",
     "vue": "^3.5.0"
   },
+  "peerDependenciesMeta": {
+    "@codemirror/lang-markdown": {
+      "optional": true
+    },
+    "@codemirror/state": {
+      "optional": true
+    },
+    "@codemirror/view": {
+      "optional": true
+    },
+    "codemirror": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.39.4",
     "@milkdown/kit": "^7.21.2",
     "@milkdown/prose": "^7.21.2",
     "@milkdown/vue": "7.21.2",
     "@types/node": "^22.10.0",
     "@vitejs/plugin-vue": "^6.0.7",
+    "codemirror": "^6.0.2",
     "typescript": "^5.7.0",
     "vite": "^8.0.16",
     "vue": "^3.5.35",
     "vue-tsc": "^3.3.3",
-    "@kungal/editor-core": "0.5.0"
+    "@kungal/editor-core": "0.7.0"
   },
   "scripts": {
     "build": "vite build && vue-tsc -p tsconfig.build.json",