autumnnote-react 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 +139 -0
  2. package/index.d.ts +29 -0
  3. package/package.json +40 -5
package/README.md ADDED
@@ -0,0 +1,139 @@
1
+ # autumnnote-react
2
+
3
+ [![npm version](https://img.shields.io/npm/v/autumnnote-react?color=e8751a)](https://www.npmjs.com/package/autumnnote-react)
4
+ [![npm downloads](https://img.shields.io/npm/dm/autumnnote-react?color=e8751a)](https://www.npmjs.com/package/autumnnote-react)
5
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
6
+
7
+ Official **React 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-react
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
+ ```jsx
24
+ import { useRef } from 'react';
25
+ import AutumnNoteEditor from 'autumnnote-react';
26
+ import 'autumnnote/dist/autumnnote.css';
27
+
28
+ function MyEditor() {
29
+ const editorRef = useRef(null);
30
+
31
+ function handleSave() {
32
+ const html = editorRef.current.getHTML();
33
+ console.log(html);
34
+ }
35
+
36
+ return (
37
+ <>
38
+ <AutumnNoteEditor
39
+ ref={editorRef}
40
+ options={{
41
+ placeholder: 'Start typing…',
42
+ height: 300,
43
+ bubbleToolbar: true,
44
+ onChange: (html) => console.log('changed:', html),
45
+ }}
46
+ />
47
+ <button onClick={handleSave}>Save</button>
48
+ </>
49
+ );
50
+ }
51
+ ```
52
+
53
+ ## Props
54
+
55
+ | Prop | Type | Description |
56
+ |---|---|---|
57
+ | `options` | `AsnOptions` | Editor configuration. See [all options](https://cmm-cmm.github.io/Autumn-Note/docs.html#options). |
58
+ | `className` | `string` | CSS class applied to the wrapper `<div>`. |
59
+ | `style` | `CSSProperties` | Inline styles applied to the wrapper `<div>`. |
60
+ | `ref` | `React.Ref<Context>` | Forwarded ref — exposes the `Context` instance after mount. |
61
+
62
+ ## Accessing the editor instance
63
+
64
+ The component uses `forwardRef` + `useImperativeHandle` to expose the underlying `Context` object. All [instance methods](https://cmm-cmm.github.io/Autumn-Note/docs.html#instance-api) are available via the ref:
65
+
66
+ ```tsx
67
+ import { useRef } from 'react';
68
+ import type { Context } from 'autumnnote';
69
+
70
+ const editorRef = useRef<Context>(null);
71
+
72
+ // After mount:
73
+ editorRef.current?.getHTML();
74
+ editorRef.current?.setHTML('<p>Hello <strong>world</strong></p>');
75
+ editorRef.current?.getMarkdown();
76
+ editorRef.current?.invoke('toolbar.rebuild');
77
+ editorRef.current?.on('change', (html) => console.log(html));
78
+ ```
79
+
80
+ ## Reinitialising with new options
81
+
82
+ The editor initialises once on mount. To reinitialise with a new configuration, change the `key` prop — React will unmount and remount the component:
83
+
84
+ ```jsx
85
+ const [optionsKey, setOptionsKey] = useState(0);
86
+ const [options, setOptions] = useState({ theme: 'light' });
87
+
88
+ function switchToDark() {
89
+ setOptions({ theme: 'dark' });
90
+ setOptionsKey((k) => k + 1); // triggers remount
91
+ }
92
+
93
+ <AutumnNoteEditor key={optionsKey} options={options} />
94
+ ```
95
+
96
+ ## Dark mode
97
+
98
+ ```jsx
99
+ <AutumnNoteEditor
100
+ options={{ theme: 'dark', placeholder: 'Start typing…' }}
101
+ />
102
+ ```
103
+
104
+ ## Using plugins
105
+
106
+ ```jsx
107
+ import AutumnNote from 'autumnnote';
108
+
109
+ // Register globally before any create()
110
+ AutumnNote.use(MyPlugin, { limit: 500 });
111
+
112
+ <AutumnNoteEditor options={{ toolbar: [[boldBtn, 'myButton']] }} />
113
+ ```
114
+
115
+ ## TypeScript
116
+
117
+ The package ships hand-crafted TypeScript declarations (`index.d.ts`). No `@types` package needed:
118
+
119
+ ```tsx
120
+ import type { Context, AsnOptions } from 'autumnnote';
121
+ import AutumnNoteEditor from 'autumnnote-react';
122
+
123
+ const options: AsnOptions = { height: 300, bubbleToolbar: true };
124
+ const editorRef = useRef<Context>(null);
125
+
126
+ <AutumnNoteEditor ref={editorRef} options={options} />;
127
+ ```
128
+
129
+ ## Links
130
+
131
+ - [Documentation](https://cmm-cmm.github.io/Autumn-Note/docs.html)
132
+ - [Playground](https://cmm-cmm.github.io/Autumn-Note/playground.html)
133
+ - [GitHub](https://github.com/cmm-cmm/Autumn-Note)
134
+ - [npm — autumnnote](https://www.npmjs.com/package/autumnnote)
135
+ - [npm — autumnnote-vue](https://www.npmjs.com/package/autumnnote-vue)
136
+
137
+ ## License
138
+
139
+ MIT © [Minh Pham](https://github.com/cmm-cmm)
package/index.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ import type { Context, AsnOptions } from 'autumnnote';
2
+ import type { CSSProperties, ForwardRefExoticComponent, RefAttributes } from 'react';
3
+
4
+ export interface AutumnNoteEditorProps {
5
+ /** Editor configuration object. All AsnOptions fields are accepted. */
6
+ options?: AsnOptions;
7
+ /** CSS class applied to the container <div>. */
8
+ className?: string;
9
+ /** Inline styles applied to the container <div>. */
10
+ style?: CSSProperties;
11
+ }
12
+
13
+ /**
14
+ * React component that mounts an AutumnNote WYSIWYG editor.
15
+ *
16
+ * Access the editor instance via a forwarded ref:
17
+ * ```tsx
18
+ * const editorRef = useRef<Context>(null);
19
+ * <AutumnNoteEditor ref={editorRef} options={{ height: 300 }} />
20
+ * editorRef.current?.getHTML();
21
+ * ```
22
+ * To reinitialise with new options, change the `key` prop.
23
+ */
24
+ declare const AutumnNoteEditor: ForwardRefExoticComponent<
25
+ AutumnNoteEditorProps & RefAttributes<Context>
26
+ >;
27
+
28
+ export { AutumnNoteEditor };
29
+ export default AutumnNoteEditor;
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "autumnnote-react",
3
- "version": "1.5.0",
4
- "description": "React wrapper for Autumn Note WYSIWYG editor",
3
+ "version": "1.6.0",
4
+ "description": "Official React 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,43 @@
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
+ "react",
25
+ "react-wysiwyg",
26
+ "react-editor",
27
+ "react-rich-text",
28
+ "react-component",
29
+ "contenteditable",
30
+ "no-jquery",
31
+ "vanilla-js",
32
+ "dark-mode",
33
+ "markdown",
34
+ "mention",
35
+ "bubble-toolbar",
36
+ "toolbar",
37
+ "autumnnote",
38
+ "summernote-alternative",
39
+ "quill-alternative",
40
+ "tinymce-alternative"
41
+ ],
42
+ "homepage": "https://cmm-cmm.github.io/Autumn-Note/",
43
+ "repository": {
44
+ "type": "git",
45
+ "url": "git+https://github.com/cmm-cmm/Autumn-Note.git",
46
+ "directory": "packages/react"
47
+ },
48
+ "bugs": {
49
+ "url": "https://github.com/cmm-cmm/Autumn-Note/issues"
50
+ },
51
+ "author": "Minh Pham",
52
+ "license": "MIT",
18
53
  "peerDependencies": {
19
54
  "autumnnote": ">=1.4.0",
20
55
  "react": ">=16.8.0",
@@ -25,7 +60,7 @@
25
60
  "react": "^18.0.0",
26
61
  "react-dom": "^18.0.0",
27
62
  "vite": "^6.0.0",
28
- "autumnnote": "1.5.0"
63
+ "autumnnote": "1.6.0"
29
64
  },
30
65
  "scripts": {
31
66
  "build": "vite build"