autumnnote-vue 1.5.0 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +142 -0
  2. package/index.d.ts +30 -0
  3. package/package.json +41 -5
package/README.md ADDED
@@ -0,0 +1,142 @@
1
+ # autumnnote-vue
2
+
3
+ [![npm version](https://img.shields.io/npm/v/autumnnote-vue?color=e8751a)](https://www.npmjs.com/package/autumnnote-vue)
4
+ [![npm downloads](https://img.shields.io/npm/dm/autumnnote-vue?color=e8751a)](https://www.npmjs.com/package/autumnnote-vue)
5
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
6
+
7
+ Official **Vue 3 wrapper** for [AutumnNote](https://cmm-cmm.github.io/Autumn-Note/) — the zero-dependency WYSIWYG rich-text editor built with vanilla JavaScript.
8
+
9
+ ## Installation
10
+
11
+ ```bash
12
+ npm install autumnnote autumnnote-vue
13
+ ```
14
+
15
+ Import the stylesheet once in your app:
16
+
17
+ ```js
18
+ import 'autumnnote/dist/autumnnote.css';
19
+ ```
20
+
21
+ ## Quick Start
22
+
23
+ ```vue
24
+ <script setup>
25
+ import { ref } from 'vue';
26
+ import AutumnNoteEditor from 'autumnnote-vue';
27
+ import 'autumnnote/dist/autumnnote.css';
28
+
29
+ const editorRef = ref(null);
30
+
31
+ function handleSave() {
32
+ const html = editorRef.value.editor.value.getHTML();
33
+ console.log(html);
34
+ }
35
+ </script>
36
+
37
+ <template>
38
+ <AutumnNoteEditor
39
+ ref="editorRef"
40
+ :options="{
41
+ placeholder: 'Start typing…',
42
+ height: 300,
43
+ bubbleToolbar: true,
44
+ }"
45
+ />
46
+ <button @click="handleSave">Save</button>
47
+ </template>
48
+ ```
49
+
50
+ ## Props
51
+
52
+ | Prop | Type | Description |
53
+ |---|---|---|
54
+ | `options` | `AsnOptions` | Editor configuration. See [all options](https://cmm-cmm.github.io/Autumn-Note/docs.html#options). |
55
+
56
+ ## Accessing the editor instance
57
+
58
+ The component uses `defineExpose({ editor })` where `editor` is a Vue `ref<Context | null>`. Access the instance via:
59
+
60
+ ```js
61
+ editorRef.value.editor.value.getHTML();
62
+ editorRef.value.editor.value.setHTML('<p>Hello <strong>world</strong></p>');
63
+ editorRef.value.editor.value.getMarkdown();
64
+ editorRef.value.editor.value.invoke('toolbar.rebuild');
65
+ editorRef.value.editor.value.on('change', (html) => console.log(html));
66
+ ```
67
+
68
+ The `editor` ref is `null` before mount — use it inside `onMounted` or after the component is mounted.
69
+
70
+ ## Reinitialising with new options
71
+
72
+ The editor initialises once in `onMounted`. To reinitialise with a new configuration, toggle `v-if` — Vue will unmount and remount the component:
73
+
74
+ ```vue
75
+ <script setup>
76
+ import { ref } from 'vue';
77
+
78
+ const ready = ref(true);
79
+ const options = ref({ theme: 'light' });
80
+
81
+ async function switchToDark() {
82
+ options.value = { theme: 'dark' };
83
+ ready.value = false;
84
+ await nextTick();
85
+ ready.value = true;
86
+ }
87
+ </script>
88
+
89
+ <template>
90
+ <AutumnNoteEditor v-if="ready" :options="options" />
91
+ </template>
92
+ ```
93
+
94
+ ## Dark mode
95
+
96
+ ```vue
97
+ <AutumnNoteEditor :options="{ theme: 'dark', placeholder: 'Start typing…' }" />
98
+ ```
99
+
100
+ ## Using plugins
101
+
102
+ ```js
103
+ import AutumnNote from 'autumnnote';
104
+
105
+ // Register globally before any component mounts
106
+ AutumnNote.use(MyPlugin, { limit: 500 });
107
+ ```
108
+
109
+ ```vue
110
+ <AutumnNoteEditor :options="{ toolbar: [[boldBtn, 'myButton']] }" />
111
+ ```
112
+
113
+ ## TypeScript
114
+
115
+ The package ships hand-crafted TypeScript declarations (`index.d.ts`). No `@types` package needed:
116
+
117
+ ```vue
118
+ <script setup lang="ts">
119
+ import { ref } from 'vue';
120
+ import type { Context, AsnOptions } from 'autumnnote';
121
+ import AutumnNoteEditor from 'autumnnote-vue';
122
+
123
+ const editorRef = ref<{ editor: { value: Context | null } } | null>(null);
124
+ const options: AsnOptions = { height: 300, bubbleToolbar: true };
125
+ </script>
126
+
127
+ <template>
128
+ <AutumnNoteEditor ref="editorRef" :options="options" />
129
+ </template>
130
+ ```
131
+
132
+ ## Links
133
+
134
+ - [Documentation](https://cmm-cmm.github.io/Autumn-Note/docs.html)
135
+ - [Playground](https://cmm-cmm.github.io/Autumn-Note/playground.html)
136
+ - [GitHub](https://github.com/cmm-cmm/Autumn-Note)
137
+ - [npm — autumnnote](https://www.npmjs.com/package/autumnnote)
138
+ - [npm — autumnnote-react](https://www.npmjs.com/package/autumnnote-react)
139
+
140
+ ## License
141
+
142
+ MIT © [Minh Pham](https://github.com/cmm-cmm)
package/index.d.ts ADDED
@@ -0,0 +1,30 @@
1
+ import type { Context, AsnOptions } from 'autumnnote';
2
+ import type { DefineComponent, Ref } from 'vue';
3
+
4
+ export interface AutumnNoteEditorProps {
5
+ /** Editor configuration object. All AsnOptions fields are accepted. */
6
+ options?: AsnOptions;
7
+ }
8
+
9
+ export interface AutumnNoteEditorExpose {
10
+ /** Reactive ref holding the AutumnNote Context instance (available after mount). */
11
+ editor: Ref<Context | null>;
12
+ }
13
+
14
+ /**
15
+ * Vue 3 component that mounts an AutumnNote WYSIWYG editor.
16
+ *
17
+ * Access the editor instance via the exposed `editor` ref:
18
+ * ```vue
19
+ * <AutumnNoteEditor ref="editorRef" :options="{ height: 300 }" />
20
+ * // editorRef.value.editor.value?.getHTML()
21
+ * ```
22
+ * Use `v-if` to force remount on options change.
23
+ */
24
+ declare const AutumnNoteEditor: DefineComponent<
25
+ AutumnNoteEditorProps,
26
+ AutumnNoteEditorExpose
27
+ >;
28
+
29
+ export { AutumnNoteEditor };
30
+ export default AutumnNoteEditor;
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "autumnnote-vue",
3
- "version": "1.5.0",
4
- "description": "Vue 3 wrapper for Autumn Note WYSIWYG editor",
3
+ "version": "1.6.0",
4
+ "description": "Official Vue 3 wrapper for AutumnNote — zero-dependency WYSIWYG editor. Mount the editor with a single component and access the full Context API via ref.",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
7
7
  "module": "dist/index.js",
8
- "types": "dist/index.d.ts",
8
+ "types": "index.d.ts",
9
9
  "exports": {
10
10
  ".": {
11
11
  "import": "./dist/index.js",
@@ -13,8 +13,44 @@
13
13
  }
14
14
  },
15
15
  "files": [
16
- "dist"
16
+ "dist",
17
+ "index.d.ts"
17
18
  ],
19
+ "keywords": [
20
+ "wysiwyg",
21
+ "wysiwyg-editor",
22
+ "rich-text",
23
+ "rich-text-editor",
24
+ "vue",
25
+ "vue3",
26
+ "vue-wysiwyg",
27
+ "vue-editor",
28
+ "vue-rich-text",
29
+ "vue-component",
30
+ "contenteditable",
31
+ "no-jquery",
32
+ "vanilla-js",
33
+ "dark-mode",
34
+ "markdown",
35
+ "mention",
36
+ "bubble-toolbar",
37
+ "toolbar",
38
+ "autumnnote",
39
+ "summernote-alternative",
40
+ "quill-alternative",
41
+ "tinymce-alternative"
42
+ ],
43
+ "homepage": "https://cmm-cmm.github.io/Autumn-Note/",
44
+ "repository": {
45
+ "type": "git",
46
+ "url": "git+https://github.com/cmm-cmm/Autumn-Note.git",
47
+ "directory": "packages/vue"
48
+ },
49
+ "bugs": {
50
+ "url": "https://github.com/cmm-cmm/Autumn-Note/issues"
51
+ },
52
+ "author": "Minh Pham",
53
+ "license": "MIT",
18
54
  "peerDependencies": {
19
55
  "autumnnote": ">=1.4.0",
20
56
  "vue": "^3.0.0"
@@ -23,7 +59,7 @@
23
59
  "@vitejs/plugin-vue": "^5.0.0",
24
60
  "vite": "^6.0.0",
25
61
  "vue": "^3.4.0",
26
- "autumnnote": "1.5.0"
62
+ "autumnnote": "1.6.0"
27
63
  },
28
64
  "scripts": {
29
65
  "build": "vite build"