@kungal/editor-vue 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @kungal/editor-vue
 
+## 0.3.0
+
+### Minor Changes
+
+- 62b2dad: P3 (in progress) — `<KunEditor>` is now a real Milkdown dual-view editor.
+
+  Replaces the P0 textarea scaffold with a WYSIWYG view built from
+  `@kungal/editor-core/preset` (`createKunEditorPlugins` — spoiler / katex /
+  code-block / mention / upload / stop-link), plus a markdown-source view, bound to
+  one `v-model`. Wires the Milkdown + ProseMirror adapter providers and handles
+  external-value sync without cursor-resetting feedback loops.
+
+  The public prop/emit surface is unchanged (`v-model`, `adapters`, `features`,
+  `locale`, `readonly`), so P0 integrations keep working. View state is
+  per-instance (fixes the forum's module-level `activeTab` singleton that would
+  cross-wire two editors on a page).
+
+  Still to come in P3 (they build on `@kungal/ui-vue`): the rich formatting
+  toolbar, the `@mention` autocomplete dropdown, the sticker/emoji picker, and the
+  CodeMirror markdown-source view (currently a `<textarea>`).
+
+### Patch Changes
+
+- @kungal/editor-core@0.3.0
+
 ## 0.2.0
 
 ### Patch Changes

package/README.md

@@ -48,12 +48,16 @@ Enable optional plugins by also installing their peers: `katex` (LaTeX),
 
 ## Status
 
-Scaffold. The `<KunEditor>` prop/emit surface (`v-model`, `adapters`,
-`features`, `locale`, `readonly`) is stable; the Milkdown wiring is ported from
-the forum's `DualEditorProvider` + `Editor.vue` — see
-[`../../docs/architecture.md`](../../docs/architecture.md) § migration. Until
-then the component renders a textarea fallback that keeps `v-model` live so you
-can integrate against the real contract today.
+**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.
+
+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
+[`../../docs/architecture.md`](../../docs/architecture.md) § migration.
 
 ## Build
 

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

@@ -1,6 +1,6 @@
 import type { KunEditorAdapters, KunEditorFeatures, KunEditorLocale } from '@kungal/editor-core';
 type __VLS_Props = {
-    /** Bound markdown (v-model:markdown). */
+    /** Bound markdown (v-model). */
     modelValue: string;
     /** Policy: where uploads go, how mentions resolve, how toasts show. */
     adapters?: KunEditorAdapters;
@@ -8,7 +8,7 @@ type __VLS_Props = {
     features?: KunEditorFeatures;
     /** UI language for toolbar labels / placeholders. */
     locale?: KunEditorLocale;
-    /** Read-only render (no toolbar, no editing). */
+    /** Read-only render (no editing). */
     readonly?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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":"AA2EA,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EAChB,MAAM,qBAAqB,CAAA;AAE5B,KAAK,WAAW,GAAG;IACf,yCAAyC;IACzC,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,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;AAsEJ,QAAA,MAAM,YAAY;;;;;cA7EH,iBAAiB;cAEjB,iBAAiB;YAEnB,eAAe;cAEb,OAAO;6EA2EpB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"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"}

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

@@ -0,0 +1,16 @@
+import type { KunEditorAdapters, KunEditorFeatures, KunEditorLocale } from '@kungal/editor-core';
+type __VLS_Props = {
+    modelValue: string;
+    adapters: KunEditorAdapters;
+    features: KunEditorFeatures;
+    locale: KunEditorLocale;
+    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=MilkdownEditor.vue.d.ts.map

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

@@ -0,0 +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"}

package/dist/index.js

@@ -1,13 +1,46 @@
-import { createElementBlock as e, createElementVNode as t, defineComponent as n, openBlock as r } from "vue";
-//#region src/components/KunEditor.vue?vue&type=script&setup=true&lang.ts
-var i = {
+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({
+	__name: "MilkdownEditor",
+	props: {
+		modelValue: {},
+		adapters: {},
+		features: {},
+		locale: {},
+		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)));
+	}
+}), E = {
 	class: "kun-editor",
 	"data-kun-editor": ""
-}, a = [
+}, D = {
+	class: "kun-editor__toolbar",
+	role: "tablist"
+}, O = ["aria-selected", "data-active"], k = ["aria-selected", "data-active"], A = { class: "kun-editor__wysiwyg" }, j = [
 	"value",
 	"readonly",
 	"lang"
-], o = /* @__PURE__ */ n({
+], M = /* @__PURE__ */ a({
 	__name: "KunEditor",
 	props: {
 		modelValue: {},
@@ -20,20 +53,60 @@ var i = {
 		}
 	},
 	emits: ["update:modelValue"],
-	setup(n, { emit: o }) {
-		let s = n, c = o, l = (e) => {
-			c("update:modelValue", e.target.value);
-		};
-		return s.adapters, s.features, s.locale, (o, s) => (r(), e("div", i, [t("textarea", {
-			class: "kun-editor__fallback",
-			value: n.modelValue,
-			readonly: n.readonly,
-			lang: n.locale,
-			onInput: l
-		}, null, 40, a)]));
+	setup(t, { emit: a }) {
+		let d = t, m = a, g = s("wysiwyg"), v = e(() => d.locale.toLowerCase().startsWith("en")), y = e(() => v.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", {
+				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", {
+				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
+					}, null, 8, [
+						"model-value",
+						"adapters",
+						"features",
+						"locale",
+						"readonly"
+					])], 512), [[u, g.value === "wysiwyg"]])]),
+					_: 1
+				})]),
+				_: 1
+			}),
+			p(r("textarea", {
+				class: "kun-editor__source",
+				value: t.modelValue,
+				readonly: t.readonly,
+				lang: t.locale,
+				spellcheck: "false",
+				onInput: x
+			}, null, 40, j), [[u, g.value === "source"]])
+		]));
 	}
-}), s = { install(e) {
-	e.component("KunEditor", o);
+}), N = { install(e) {
+	e.component("KunEditor", M);
 } };
 //#endregion
-export { o as KunEditor, s as KunEditorPlugin };
+export { M as KunEditor, N as KunEditorPlugin };

package/dist/style.css

@@ -0,0 +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}
+/*$vite$:1*/

package/package.json

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