@kungal/editor-vue 0.6.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @kungal/editor-vue
 
+## 0.8.0
+
+### Minor Changes
+
+- c0908c5: Make `<KunEditor>` headless — ship zero CSS.
+
+  **BREAKING** (pre-1.0): the `@kungal/editor-vue/style.css` export is removed. The
+  component now renders only stable class hooks (`.kun-editor__*`,
+  `.kun-mention-dropdown*`) and `data-*` state; all styling is the host's.
+
+  Migration: copy the reference stylesheet
+  `apps/docs/app/assets/css/kun-editor.css` (themed with KunUI tokens) into your
+  app and import it, or write your own targeting the same hooks. Also import each
+  enabled peer's CSS (e.g. `katex/dist/katex.min.css`). The reference stylesheet
+  carries the two structural rules the editor needs (ProseMirror `white-space`,
+  popover positioning / show-hide).
+
+  Also drops the unused `@kungal/ui-vue` peer dependency — the editor no longer
+  references any UI kit, so it installs in any Vue 3 app.
+
+### Patch Changes
+
+- @kungal/editor-core@0.8.0
+
+## 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

package/README.md

@@ -2,18 +2,22 @@
 
 The **Vue 3 render layer** of KunEditor: the `<KunEditor>` component (dual
 WYSIWYG preview + markdown-source), its toolbar and the Vue plugin views
-(mention dropdown, tooltip, sticker/emoji picker). Consumes
-[`@kungal/editor-core`](../editor-core) for the plugin brain and pairs with
-[`@kungal/ui-vue`](https://github.com/kungal/kun-ui) for the chrome.
+(mention dropdown, sticker/emoji picker). Consumes
+[`@kungal/editor-core`](../editor-core) for the plugin brain.
 
-Works in any Vue 3 app; `@kungal/editor-nuxt` adds Nuxt auto-import sugar.
+**Headless — ships zero CSS.** The component only renders stable class hooks
+(`.kun-editor__*`, `.kun-mention-dropdown*`) + `data-*` state; you own the look.
+Copy the reference stylesheet [`apps/docs/app/assets/css/kun-editor.css`](../../apps/docs/app/assets/css/kun-editor.css)
+(themed with KunUI tokens), or write your own. It works in any Vue 3 app;
+`@kungal/editor-nuxt` adds Nuxt auto-import sugar.
 
 ## Usage
 
 ```vue
 <script setup lang="ts">
 import { KunEditor, type KunEditorAdapters } from '@kungal/editor-vue'
-import '@kungal/editor-vue/style.css'
+// Headless: bring your own styles. See apps/docs for the KunUI-themed reference.
+import '~/assets/kun-editor.css'
 
 const markdown = ref('')
 
@@ -38,21 +42,21 @@ no other config.
 Install the Milkdown stack **once in the host** (single ProseMirror instance):
 
 ```bash
-pnpm add @kungal/editor-vue @kungal/editor-core \
-  @kungal/ui-vue vue \
+pnpm add @kungal/editor-vue @kungal/editor-core vue \
   @milkdown/kit @milkdown/prose @milkdown/vue
 ```
 
-Enable optional plugins by also installing their peers: `katex` (LaTeX),
-`codemirror` + `@codemirror/view` + `@codemirror/language-data` (code blocks).
+Enable optional plugins by also installing their peers: `katex` (LaTeX, also
+import `katex/dist/katex.min.css`), the `@codemirror/*` packages + `codemirror`
+(code blocks and the markdown-source view).
 
 ## 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 —
@@ -70,8 +74,12 @@ The **sticker / emoji picker** is a toolbar popover: a built-in emoji tab
 host supplies `stickerSource`, inserting each sticker as an image node. Turn the
 whole picker off with `features.sticker: false`.
 
-Still to come in P3: the CodeMirror markdown-source view (currently a
-`<textarea>`). See
+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":"AAqbA,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":"AAgZA,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":"AAoNA,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;AA+LJ,QAAA,MAAM,YAAY;;;;;cAtMH,iBAAiB;cAEjB,iBAAiB;YAEnB,eAAe;cAEb,OAAO;6EAoMpB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"KunEditor.vue.d.ts","sourceRoot":"","sources":["../../src/components/KunEditor.vue"],"names":[],"mappings":"AA6JA,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":"AA2FA,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/MentionDropdown.vue.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"MentionDropdown.vue.d.ts","sourceRoot":"","sources":["../../src/components/MentionDropdown.vue"],"names":[],"mappings":"AAulBA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

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

@@ -1 +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"}
+{"version":3,"file":"StickerPicker.vue.d.ts","sourceRoot":"","sources":["../../src/components/StickerPicker.vue"],"names":[],"mappings":"AA8aA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/index.js

@@ -5,28 +5,32 @@ import { Editor as k, defaultValueCtx as A, editorViewCtx as j, editorViewOption
 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 te, insertKunSpoilerCommand as R, mentionId as ne, toggleLatexCommand as re } from "@kungal/editor-core/preset";
-import { TextSelection as ie } from "@milkdown/kit/prose/state";
-import { createCodeBlockCommand as ae, insertHrCommand as oe, 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"), se = [
+var J = Symbol("kun-editor-context"), fe = [
 	"data-active",
 	"onMousedown",
 	"onMouseenter"
-], ce = ["src", "alt"], le = {
+], pe = ["src", "alt"], me = {
 	key: 1,
 	class: "kun-mention-dropdown__avatar kun-mention-dropdown__avatar--fallback"
-}, ue = { class: "kun-mention-dropdown__name" }, de = {
+}, he = { class: "kun-mention-dropdown__name" }, ge = {
 	key: 1,
 	class: "kun-mention-dropdown__hint"
-}, fe = {
+}, _e = {
 	key: 2,
 	class: "kun-mention-dropdown__hint"
-}, pe = {
+}, ve = {
 	key: 3,
 	class: "kun-mention-dropdown__hint"
-}, me = /* @__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 ? {
@@ -69,13 +73,13 @@ var J = Symbol("kun-editor-context"), se = [
 		}, I = (e) => {
 			let t = _.value;
 			if (!t || !k) return;
-			let n = t.state.schema.nodes[ne];
+			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(ie.create(o.doc, s + 1)), t.dispatch(o.scrollIntoView()), t.focus(), S.hide();
+			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());
@@ -132,9 +136,9 @@ var J = Symbol("kun-editor-context"), se = [
 			src: e.avatar,
 			alt: e.name,
 			class: "kun-mention-dropdown__avatar"
-		}, null, 8, ce)) : (d(), i("span", le, h(e.name.charAt(0)), 1)), a("span", ue, h(e.name), 1)], 40, se))), 128)) : O.value ? (d(), i("div", de, h(g.value.searching), 1)) : w.value ? (d(), i("div", fe, h(g.value.empty), 1)) : (d(), i("div", pe, 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));
 	}
-}), he = /* @__PURE__ */ s({
+}), be = /* @__PURE__ */ s({
 	__name: "MilkdownEditor",
 	props: {
 		modelValue: {},
@@ -152,8 +156,8 @@ var J = Symbol("kun-editor-context"), se = [
 				}), t.update(M, (e) => ({
 					...e,
 					editable: () => !r.readonly
-				})), c && t.set(s.key, { view: o({ component: me }) });
-			}).use(te(r.adapters, r.features, { locale: r.locale }));
+				})), c && t.set(s.key, { view: o({ component: ye }) });
+			}).use(R(r.adapters, r.features, { locale: r.locale }));
 			return c && t.use(s), t;
 		});
 		return v(() => r.modelValue, (e) => {
@@ -177,21 +181,21 @@ var J = Symbol("kun-editor-context"), se = [
 	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),
 	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\"/>")
-}, ge = /* @__PURE__ */ "😀.😃.😄.😁.😆.😅.🤣.😂.🙂.🙃.😉.😊.😇.🥰.😍.🤩.😘.😗.😚.😋.😛.😜.🤪.😝.🤗.🤭.🤔.🤐.😐.😑.😶.😏.😒.🙄.😬.😌.😔.😪.🤤.😴.😷.🤒.🤕.🥵.🥶.🥴.😵.🤯.🤠.🥳.😎.🤓.🧐.😕.😟.🙁.😮.😯.😲.😳.🥺.😦.😧.😨.😰.😥.😢.😭.😱.😖.😣.😞.😓.😩.😫.🥱.😤.😡.😠.🤬.😈.👿.💀.💩.🤡.👻.👽.🤖.😺.😸.👍.👎.👌.🤌.🤏.✌️.🤞.🤟.🤘.👋.🤚.🖐️.✋.👏.🙌.🤝.🙏.💪.👀.👁️.❤️.🧡.💛.💚.💙.💜.🖤.🤍.💔.💕.💞.💓.💗.💖.💘.💝.💯.✨.⭐.🌟.🔥.💥.💫.⚡.☀️.🌈.🎉.🎊.🎁.🏆.🐶.🐱.🐭.🦊.🐻.🐼.🐨.🦄.🐢.🐳.🍎.🍑.🍓.🍉.🍰.🍺.🍵.☕.🍜.🍙.✅.❌.❓.❗.💤.👑.🎮.🎵.📌.🔖".split("."), _e = [
+}, xe = /* @__PURE__ */ "😀.😃.😄.😁.😆.😅.🤣.😂.🙂.🙃.😉.😊.😇.🥰.😍.🤩.😘.😗.😚.😋.😛.😜.🤪.😝.🤗.🤭.🤔.🤐.😐.😑.😶.😏.😒.🙄.😬.😌.😔.😪.🤤.😴.😷.🤒.🤕.🥵.🥶.🥴.😵.🤯.🤠.🥳.😎.🤓.🧐.😕.😟.🙁.😮.😯.😲.😳.🥺.😦.😧.😨.😰.😥.😢.😭.😱.😖.😣.😞.😓.😩.😫.🥱.😤.😡.😠.🤬.😈.👿.💀.💩.🤡.👻.👽.🤖.😺.😸.👍.👎.👌.🤌.🤏.✌️.🤞.🤟.🤘.👋.🤚.🖐️.✋.👏.🙌.🤝.🙏.💪.👀.👁️.❤️.🧡.💛.💚.💙.💜.🖤.🤍.💔.💕.💞.💓.💗.💖.💘.💝.💯.✨.⭐.🌟.🔥.💥.💫.⚡.☀️.🌈.🎉.🎊.🎁.🏆.🐶.🐱.🐭.🦊.🐻.🐼.🐨.🦄.🐢.🐳.🍎.🍑.🍓.🍉.🍰.🍺.🍵.☕.🍜.🍙.✅.❌.❓.❗.💤.👑.🎮.🎵.📌.🔖".split("."), Se = [
 	"title",
 	"aria-label",
 	"aria-expanded"
-], ve = ["innerHTML"], Q = { class: "kun-editor__picker-panel" }, ye = {
+], Ce = ["innerHTML"], we = { class: "kun-editor__picker-panel" }, Te = {
 	key: 0,
 	class: "kun-editor__picker-tabs",
 	role: "tablist"
-}, be = ["data-active"], xe = ["data-active"], Se = { class: "kun-editor__emoji-grid" }, Ce = ["onClick"], we = {
+}, Ee = ["data-active"], De = ["data-active"], Oe = { class: "kun-editor__emoji-grid" }, ke = ["onClick"], Ae = {
 	key: 1,
 	class: "kun-editor__sticker-body"
-}, Te = { class: "kun-editor__pack-name" }, Ee = { class: "kun-editor__sticker-grid" }, De = ["title", "onClick"], Oe = ["src", "alt"], ke = {
+}, 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"
-}, Ae = /* @__PURE__ */ s({
+}, 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 ? {
@@ -247,28 +251,28 @@ var J = Symbol("kun-editor-context"), se = [
 		}, [a("span", {
 			class: "kun-editor__icon",
 			innerHTML: g(Z).smile
-		}, null, 8, ve)], 8, _e), b(a("div", Q, [
-			v ? (d(), i("div", ye, [a("button", {
+		}, 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, be), a("button", {
+			}, 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, xe)])) : r("", !0),
-			b(a("div", Se, [(d(!0), i(e, null, m(g(ge), (e, t) => (d(), i("button", {
+			}, 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, Ce))), 128))], 512), [[_, !v || w.value === "emoji"]]),
-			v ? b((d(), i("div", we, [E.value.length ? (d(!0), i(e, { key: 0 }, m(E.value, (t) => (d(), i("div", {
+			}, 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", Te, h(t.name), 1), a("div", Ee, [(d(!0), i(e, null, m(t.stickers, (e, t) => (d(), i("button", {
+			}, [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",
@@ -278,21 +282,21 @@ var J = Symbol("kun-editor-context"), se = [
 				src: e.src,
 				alt: e.name,
 				loading: "lazy"
-			}, null, 8, Oe)], 8, De))), 128))])]))), 128)) : (d(), i("div", ke, h(O.value ? x.value.failed : x.value.empty), 1))], 512)), [[_, w.value === "sticker"]]) : r("", !0)
+			}, 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));
 	}
-}), je = {
+}), Le = {
 	class: "kun-editor__format-toolbar",
 	role: "toolbar"
-}, Me = {
+}, Re = {
 	key: 0,
 	class: "kun-editor__toolbar-divider",
 	"aria-hidden": "true"
-}, Ne = [
+}, ze = [
 	"title",
 	"aria-label",
 	"onClick"
-], Pe = ["innerHTML"], Fe = ["title", "aria-label"], Ie = ["innerHTML"], Le = /* @__PURE__ */ s({
+], Be = ["innerHTML"], Ve = ["title", "aria-label"], He = ["innerHTML"], Q = /* @__PURE__ */ s({
 	__name: "EditorToolbar",
 	setup(n) {
 		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) => {
@@ -331,7 +335,7 @@ var J = Symbol("kun-editor-context"), se = [
 				{
 					svg: Z.strike,
 					title: y.value.strike,
-					run: () => v(q.key)
+					run: () => v(ce.key)
 				},
 				{
 					svg: Z.code,
@@ -375,22 +379,22 @@ var J = Symbol("kun-editor-context"), se = [
 				{
 					svg: Z.codeBlock,
 					title: y.value.codeBlock,
-					run: () => v(ae.key, "")
+					run: () => v(oe.key, "")
 				},
 				{
 					svg: Z.hr,
 					title: y.value.hr,
-					run: () => v(oe.key)
+					run: () => v(se.key)
 				}
 			],
 			[{
 				svg: Z.spoiler,
 				title: y.value.spoiler,
-				run: () => v(R.key)
+				run: () => v(te.key)
 			}, {
 				svg: Z.latex,
 				title: y.value.latex,
-				run: () => v(re.key)
+				run: () => v(ie.key)
 			}]
 		]), x = p(null), S = () => x.value?.click(), C = async (e) => {
 			let t = e.target, n = t.files?.[0];
@@ -407,8 +411,8 @@ var J = Symbol("kun-editor-context"), se = [
 				f()?.(_.value ? "Image upload failed" : "图片上传失败", "error");
 			}
 		};
-		return (t, n) => (d(), i("div", je, [
-			(d(!0), i(e, null, m(b.value, (t, n) => (d(), i(e, { key: n }, [n > 0 ? (d(), i("span", Me)) : r("", !0), (d(!0), i(e, null, m(t, (e, t) => (d(), i("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",
@@ -418,7 +422,7 @@ var J = Symbol("kun-editor-context"), se = [
 			}, [a("span", {
 				class: "kun-editor__icon",
 				innerHTML: e.svg
-			}, null, 8, Pe)], 8, Ne))), 128))], 64))), 128)),
+			}, null, 8, Be)], 8, ze))), 128))], 64))), 128)),
 			u.value ? (d(), i(e, { key: 0 }, [
 				n[0] ||= a("span", {
 					class: "kun-editor__toolbar-divider",
@@ -433,7 +437,7 @@ var J = Symbol("kun-editor-context"), se = [
 				}, [a("span", {
 					class: "kun-editor__icon",
 					innerHTML: g(Z).image
-				}, null, 8, Ie)], 8, Fe),
+				}, null, 8, He)], 8, Ve),
 				a("input", {
 					ref_key: "fileInput",
 					ref: x,
@@ -446,20 +450,52 @@ var J = Symbol("kun-editor-context"), se = [
 			h.value ? (d(), i(e, { key: 1 }, [n[1] ||= a("span", {
 				class: "kun-editor__toolbar-divider",
 				"aria-hidden": "true"
-			}, null, -1), o(Ae)], 64)) : r("", !0)
+			}, null, -1), o(Ie)], 64)) : r("", !0)
 		]));
 	}
-}), Re = {
+}), 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));
+	}
+}), We = {
 	class: "kun-editor",
 	"data-kun-editor": ""
-}, ze = {
+}, Ge = {
 	class: "kun-editor__toolbar",
 	role: "tablist"
-}, Be = ["aria-selected", "data-active"], Ve = ["aria-selected", "data-active"], He = { class: "kun-editor__wysiwyg" }, Ue = [
-	"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: {},
@@ -472,72 +508,70 @@ var J = Symbol("kun-editor-context"), se = [
 		}
 	},
 	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 r.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", Re, [
-			a("div", ze, [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, Be), 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, Ve)]),
+				"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(Le, null, null, 512), [[_, c.value === "wysiwyg" && !e.readonly]]), b(a("div", He, [o(he, {
+					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, Ue), [[_, c.value === "source"]])
+				"onUpdate:modelValue": x
+			}, null, 8, ["model-value", "readonly"])) : r("", !0)
 		]));
 	}
-}), We = { install(e) {
+}), Ye = { install(e) {
 	e.component("KunEditor", $);
 } };
 //#endregion
-export { $ as KunEditor, We as KunEditorPlugin };
+export { $ as KunEditor, Ye as KunEditorPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kungal/editor-vue",
-  "version": "0.6.0",
+  "version": "0.8.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": [
@@ -24,10 +24,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": [
-    "*.css",
-    "*.vue"
-  ],
+  "sideEffects": false,
   "files": [
     "CHANGELOG.md",
     "dist"
@@ -39,31 +36,51 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    },
-    "./style.css": "./dist/style.css"
+    }
   },
   "dependencies": {
     "@prosemirror-adapter/vue": "^0.4.6",
-    "@kungal/editor-core": "0.6.0"
+    "@kungal/editor-core": "0.8.0"
   },
   "peerDependencies": {
-    "@kungal/ui-vue": "^2.7.0",
+    "@codemirror/lang-markdown": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.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.6.0"
+    "@kungal/editor-core": "0.8.0"
   },
   "scripts": {
     "build": "vite build && vue-tsc -p tsconfig.build.json",

package/dist/style.css

@@ -1,2 +0,0 @@
-.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{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*/