tinymce-inline-comments 0.1.2 β†’ 0.1.3

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 (2) hide show
  1. package/README.md +59 -28
  2. package/package.json +4 -1
package/README.md CHANGED
@@ -1,43 +1,69 @@
1
1
  # tinymce-inline-comments
2
2
 
3
+ ![npm](https://img.shields.io/npm/v/tinymce-inline-comments)
4
+ ![license](https://img.shields.io/npm/l/tinymce-inline-comments)
5
+ ![downloads](https://img.shields.io/npm/dw/tinymce-inline-comments)
6
+
3
7
  A **headless, Google Docs–style inline comments plugin for TinyMCE**.
4
8
 
5
9
  This plugin enables **inline annotations** on selected text and emits
6
- **comment lifecycle events** (add / select / delete), while keeping
7
- all **UI, backend APIs, permissions, and threading logic in your app**.
10
+ **comment lifecycle events** (`add`, `select`, `delete`) while keeping
11
+ **UI, backend APIs, permissions, mentions, and threading logic fully in your app**.
8
12
 
9
13
  Designed for:
10
14
 
11
- - Contract editors
12
- - Legal documents
15
+ - Contract & legal editors
13
16
  - Review & approval workflows
14
17
  - Collaborative document tools
18
+ - Enterprise-grade editors
15
19
 
16
20
  ---
17
21
 
18
- ## Links
22
+ ## πŸ”— Links
19
23
 
20
- - **GitHub Repository:**
24
+ - **GitHub Repository**
21
25
  https://github.com/chiraagb/tinymce-inline-comments
22
26
 
23
- - **Issues & Feature Requests:**
27
+ - **Issues & Feature Requests**
24
28
  https://github.com/chiraagb/tinymce-inline-comments/issues
25
29
 
30
+ - **Live Demo (CodeSandbox)**
31
+ https://codesandbox.io/s/c85wj6
32
+
26
33
  ---
27
34
 
28
- ## Features
35
+ ## ✨ Why Headless?
36
+
37
+ Most comment plugins tightly couple **UI + storage + editor logic**.
38
+
39
+ This plugin does **only one thing**:
40
+
41
+ > Manage inline annotations and emit meaningful editor events.
42
+
43
+ You control everything else.
44
+
45
+ **Benefits:**
46
+
47
+ - Works with _any_ backend
48
+ - Works with _any_ UI framework
49
+ - No assumptions about permissions or workflows
50
+ - Easy to extend for enterprise use
51
+
52
+ ---
53
+
54
+ ## ✨ Features
29
55
 
30
56
  - Inline comment annotations using `<span>`
31
57
  - Selection-based comments
32
- - Event-driven (no backend coupling)
58
+ - Event-driven architecture (no backend coupling)
33
59
  - Annotation delete / unwrap API
34
60
  - Framework-agnostic
35
61
  - React / Vue / Angular / Vanilla JS friendly
36
- - Thread-ready architecture
62
+ - Thread-ready architecture (`annotationId` as thread key)
37
63
 
38
64
  ---
39
65
 
40
- ## Installation
66
+ ## πŸ“¦ Installation
41
67
 
42
68
  ```bash
43
69
  npm install tinymce-inline-comments
@@ -45,7 +71,7 @@ npm install tinymce-inline-comments
45
71
 
46
72
  ---
47
73
 
48
- ## Basic Usage (React Example)
74
+ ## πŸš€ Basic Usage (React Example)
49
75
 
50
76
  ```tsx
51
77
  import { Editor } from "@tinymce/tinymce-react";
@@ -86,7 +112,7 @@ import { registerInlineComments } from "tinymce-inline-comments";
86
112
 
87
113
  ---
88
114
 
89
- ## Events
115
+ ## πŸ”” Events
90
116
 
91
117
  ### `inline-comments:add`
92
118
 
@@ -125,7 +151,7 @@ Fired when an annotation is removed.
125
151
 
126
152
  ---
127
153
 
128
- ## API
154
+ ## 🧠 API
129
155
 
130
156
  ### `editor.removeInlineComment(annotationId: string)`
131
157
 
@@ -137,7 +163,7 @@ editor.removeInlineComment(annotationId);
137
163
 
138
164
  ---
139
165
 
140
- ## Architecture (Important)
166
+ ## πŸ— Architecture
141
167
 
142
168
  This plugin is intentionally **headless**.
143
169
 
@@ -150,15 +176,9 @@ This plugin is intentionally **headless**.
150
176
  | Threaded comments | Your app |
151
177
  | Inline annotations | This plugin |
152
178
 
153
- This design makes the plugin:
154
-
155
- - Enterprise-safe
156
- - Highly reusable
157
- - Easy to extend
158
-
159
179
  ---
160
180
 
161
- ## Threaded Comments (Recommended Pattern)
181
+ ## 🧡 Threaded Comments (Recommended Pattern)
162
182
 
163
183
  Use `annotationId` as the thread key:
164
184
 
@@ -176,16 +196,27 @@ The plugin does **not** enforce a data model.
176
196
 
177
197
  ---
178
198
 
179
- ## Notes
199
+ ## πŸ”΄ Live Demo(React)
200
+
201
+ Try the plugin in a real TinyMCE editor:
202
+
203
+ πŸ‘‰ **CodeSandbox Demo**
204
+ [https://codesandbox.io/s/c85wj6](https://codesandbox.io/s/c85wj6)
205
+
206
+ > Select text β†’ click the comment icon β†’ click highlighted text to select.
207
+
208
+ ---
209
+
210
+ ## ⚠️ Notes
180
211
 
181
- - The plugin does **not** store comments
182
- - The plugin does **not** make API calls
183
- - The plugin does **not** manage UI state
212
+ - This plugin does **not** store comments
213
+ - This plugin does **not** make API calls
214
+ - This plugin does **not** manage UI state
184
215
 
185
- This is by design.
216
+ This is intentional.
186
217
 
187
218
  ---
188
219
 
189
- ## License
220
+ ## πŸ“„ License
190
221
 
191
222
  MIT Β© Chirag Bhandakkar
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tinymce-inline-comments",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "description": "Headless inline comments plugin for TinyMCE",
5
5
  "main": "dist/inline-comments.umd.js",
6
6
  "module": "dist/inline-comments.es.js",
@@ -12,6 +12,9 @@
12
12
  "author": "Chirag Bhandakkar",
13
13
  "keywords": [
14
14
  "tinymce",
15
+ "tinymce-plugin",
16
+ "inline-comments",
17
+ "tinymce-inline-comments",
15
18
  "comments",
16
19
  "annotations"
17
20
  ],