autumnnote-vue 1.14.0 → 1.16.0

package/README.md

@@ -29,7 +29,7 @@ import 'autumnnote/dist/autumnnote.css';
 const editorRef = ref(null);
 
 function handleSave() {
-  const html = editorRef.value.editor.value.getHTML();
+  const html = editorRef.value.editor?.getHTML();
   console.log(html);
 }
 </script>
@@ -55,17 +55,17 @@ function handleSave() {
 
 ## Accessing the editor instance
 
-The component uses `defineExpose({ editor })` where `editor` is a Vue `ref<Context | null>`. Access the instance via:
+The component exposes the current `Context` as `editor`. Vue automatically unwraps the internal shallow ref on the public component instance:
 
 ```js
-editorRef.value.editor.value.getHTML();
-editorRef.value.editor.value.setHTML('<p>Hello <strong>world</strong></p>');
-editorRef.value.editor.value.getMarkdown();
-editorRef.value.editor.value.invoke('toolbar.rebuild');
-editorRef.value.editor.value.on('change', (html) => console.log(html));
+editorRef.value.editor?.getHTML();
+editorRef.value.editor?.setHTML('<p>Hello <strong>world</strong></p>');
+editorRef.value.editor?.getMarkdown();
+editorRef.value.editor?.invoke('toolbar.rebuild');
+editorRef.value.editor?.on('change', (html) => console.log(html));
 ```
 
-The `editor` ref is `null` before mount — use it inside `onMounted` or after the component is mounted.
+The exposed `editor` property is `null` before mount — use it inside `onMounted` or after the component is mounted.
 
 ## Reinitialising with new options
 

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("autumnnote"),u={__name:"AutumnNote",props:{options:{type:Object,default:()=>({})}},setup(r,{expose:l}){const c=r,n=e.ref(null),t=e.ref(null);return e.onMounted(()=>{t.value=s.create(n.value,c.options)}),e.onUnmounted(()=>{var o;(o=t.value)==null||o.destroy(),t.value=null}),l({editor:t}),(o,a)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"container",ref:n},null,512))}};exports.AutumnNoteEditor=u;exports.default=u;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("vue"),l=require("autumnnote");l=s(l);var u={__name:`AutumnNote`,props:{options:{type:Object,default:()=>({})},modelValue:{type:String,default:void 0},defaultValue:{type:String,default:``}},emits:[`update:modelValue`,`change`],setup(e,{expose:t,emit:n}){let r=e,i=n,a=(0,c.ref)(null),o=(0,c.shallowRef)(null),s=null,u=e=>{if(r.options.onChange?.(e),i(`change`,e),e===s){s=null;return}i(`update:modelValue`,e)};return(0,c.onMounted)(()=>{o.value=l.default.create(a.value,{...r.options,onChange:u});let e=r.modelValue??r.defaultValue;e&&(r.modelValue!=null&&(s=r.modelValue),o.value.setHTML(e),o.value.clearHistory())}),(0,c.watch)(()=>r.options,e=>o.value?.updateOptions({...e,onChange:u}),{deep:!0}),(0,c.watch)(()=>r.modelValue,e=>{e==null||!o.value||o.value.getHTML()===e||(s=e,o.value.setHTML(e),o.value.clearHistory())}),(0,c.onUnmounted)(()=>{o.value?.destroy(),o.value=null}),t({editor:o}),(e,t)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,{ref_key:`container`,ref:a},null,512))}};exports.AutumnNoteEditor=u,exports.default=u;

package/dist/index.js

@@ -1,24 +1,50 @@
-import { ref as n, onMounted as a, onUnmounted as c, openBlock as s, createElementBlock as p } from "vue";
-import m from "autumnnote";
-const _ = {
-  __name: "AutumnNote",
-  props: {
-    options: { type: Object, default: () => ({}) }
-  },
-  setup(r, { expose: u }) {
-    const l = r, o = n(null), e = n(null);
-    return a(() => {
-      e.value = m.create(o.value, l.options);
-    }), c(() => {
-      var t;
-      (t = e.value) == null || t.destroy(), e.value = null;
-    }), u({ editor: e }), (t, i) => (s(), p("div", {
-      ref_key: "container",
-      ref: o
-    }, null, 512));
-  }
-};
-export {
-  _ as AutumnNoteEditor,
-  _ as default
+import { createElementBlock as e, onMounted as t, onUnmounted as n, openBlock as r, ref as i, shallowRef as a, watch as o } from "vue";
+import s from "autumnnote";
+//#region src/AutumnNote.vue
+var c = {
+	__name: "AutumnNote",
+	props: {
+		options: {
+			type: Object,
+			default: () => ({})
+		},
+		modelValue: {
+			type: String,
+			default: void 0
+		},
+		defaultValue: {
+			type: String,
+			default: ""
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(c, { expose: l, emit: u }) {
+		let d = c, f = u, p = i(null), m = a(null), h = null, g = (e) => {
+			if (d.options.onChange?.(e), f("change", e), e === h) {
+				h = null;
+				return;
+			}
+			f("update:modelValue", e);
+		};
+		return t(() => {
+			m.value = s.create(p.value, {
+				...d.options,
+				onChange: g
+			});
+			let e = d.modelValue ?? d.defaultValue;
+			e && (d.modelValue != null && (h = d.modelValue), m.value.setHTML(e), m.value.clearHistory());
+		}), o(() => d.options, (e) => m.value?.updateOptions({
+			...e,
+			onChange: g
+		}), { deep: !0 }), o(() => d.modelValue, (e) => {
+			e == null || !m.value || m.value.getHTML() === e || (h = e, m.value.setHTML(e), m.value.clearHistory());
+		}), n(() => {
+			m.value?.destroy(), m.value = null;
+		}), l({ editor: m }), (t, n) => (r(), e("div", {
+			ref_key: "container",
+			ref: p
+		}, null, 512));
+	}
 };
+//#endregion
+export { c as AutumnNoteEditor, c as default };

package/index.d.ts

@@ -1,25 +1,29 @@
 import type { Context, AsnOptions } from 'autumnnote';
-import type { DefineComponent, Ref } from 'vue';
+import type { DefineComponent } from 'vue';
 
 export interface AutumnNoteEditorProps {
   /** Editor configuration object. All AsnOptions fields are accepted. */
   options?: AsnOptions;
+  /** Controlled HTML value used by v-model. */
+  modelValue?: string;
+  /** Initial HTML value for uncontrolled usage. */
+  defaultValue?: string;
 }
 
 export interface AutumnNoteEditorExpose {
-  /** Reactive ref holding the AutumnNote Context instance (available after mount). */
-  editor: Ref<Context | null>;
+  /** AutumnNote Context instance, or null before the component mounts. */
+  editor: Context | null;
 }
 
 /**
  * Vue 3 component that mounts an AutumnNote WYSIWYG editor.
  *
- * Access the editor instance via the exposed `editor` ref:
+ * Access the editor instance via the exposed `editor` property:
  * ```vue
  * <AutumnNoteEditor ref="editorRef" :options="{ height: 300 }" />
- * // editorRef.value.editor.value?.getHTML()
+ * // editorRef.value.editor?.getHTML()
  * ```
- * Use `v-if` to force remount on options change.
+ * Supports `v-model` and applies runtime-safe option changes without remounting.
  */
 declare const AutumnNoteEditor: DefineComponent<
   AutumnNoteEditorProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autumnnote-vue",
-  "version": "1.14.0",
+  "version": "1.16.0",
   "description": "Official Vue 3 wrapper for Autumn Note — zero-dependency WYSIWYG editor. Mount the editor with a single component and access the full Context API via ref.",
   "type": "module",
   "main": "dist/index.cjs",
@@ -8,9 +8,9 @@
   "types": "index.d.ts",
   "exports": {
     ".": {
+      "types": "./index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./index.d.ts"
+      "require": "./dist/index.cjs"
     }
   },
   "files": [
@@ -54,15 +54,17 @@
   "license": "MIT",
   "peerDependencies": {
     "autumnnote": ">=1.4.0",
-    "vue": "^3.0.0"
+    "vue": ">=3.4.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.0",
-    "vite": "^6.0.0",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "vite": "^8.1.5",
     "vue": "^3.4.0",
-    "autumnnote": "1.14.0"
+    "autumnnote": "1.16.0"
   },
   "scripts": {
-    "build": "vite build"
+    "build": "vite build",
+    "test": "vitest run",
+    "typecheck": "tsc --project tsconfig.test.json"
   }
 }