@richhtmleditor/comments 1.1.0 → 1.1.2
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.
- package/README.md +121 -121
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,121 +1,121 @@
|
|
|
1
|
-
# @richhtmleditor/comments
|
|
2
|
-
|
|
3
|
-
Review and comments workflow plugin for Rich HTML Editor (enterprise). Anchored highlights, Add Comment modal, hover tooltips, comments panel, @mentions, and export HTML — requires `features.comments` from [`@richhtmleditor/enterprise`](https://www.npmjs.com/package/@richhtmleditor/enterprise), built on [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core).
|
|
4
|
-
|
|
5
|
-
**Current release: 1.
|
|
6
|
-
|
|
7
|
-
**Repository:** [github.com/rajkishorsahu89/richhtmleditor](https://github.com/rajkishorsahu89/richhtmleditor)
|
|
8
|
-
|
|
9
|
-
**Demo:** [richhtmleditor.vercel.app](https://richhtmleditor.vercel.app/) — [demo](https://richhtmleditor.vercel.app/demo) · [guide](https://richhtmleditor.vercel.app/guide) · [API](https://richhtmleditor.vercel.app/api). Doc Preview joint demo: [doc-preview-app.vercel.app/demo/enterprise](https://doc-preview-app.vercel.app/demo/enterprise)
|
|
10
|
-
|
|
11
|
-
### What's in 1.
|
|
12
|
-
|
|
13
|
-
- **`createCommentsPlugin`** — toolbar Comment and Comments panel buttons
|
|
14
|
-
- **Add Comment modal** — compose popover anchored to the current text selection
|
|
15
|
-
- **Anchored highlights** — `<span data-de-comment-id>` markers in document HTML
|
|
16
|
-
- **Hover tooltips** — preview thread excerpt and messages on anchor hover
|
|
17
|
-
- **Comments panel** — thread list with reply, resolve, and reopen
|
|
18
|
-
- **@mentions** — autocomplete in compose box (`mentionUsers` option)
|
|
19
|
-
- **Export HTML** — `buildCommentsExportHtml` and `editor.getCommentsExportHtml()` for publish bundles
|
|
20
|
-
|
|
21
|
-
> Requires `features.comments: true`. Demo keys: `RHE-ENT-DEMO-2026-FULL` or `RHE-ENT-DEMO-2026-COMMENTS`.
|
|
22
|
-
|
|
23
|
-
**Keywords:** `richhtmleditor` `comments` `review` `enterprise` `annotations` `wysiwyg`
|
|
24
|
-
|
|
25
|
-
## Install
|
|
26
|
-
|
|
27
|
-
```bash
|
|
28
|
-
npm install @richhtmleditor/comments @richhtmleditor/enterprise
|
|
29
|
-
# Requires @richhtmleditor/core (via framework wrapper or direct install).
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
## Usage
|
|
33
|
-
|
|
34
|
-
```ts
|
|
35
|
-
import { createEditor } from "@richhtmleditor/core";
|
|
36
|
-
import { createCommentsPlugin } from "@richhtmleditor/comments";
|
|
37
|
-
import { resolveEnterpriseFeatures } from "@richhtmleditor/enterprise/browser";
|
|
38
|
-
|
|
39
|
-
const gate = resolveEnterpriseFeatures({ token: "RHE-ENT-DEMO-2026-FULL" });
|
|
40
|
-
|
|
41
|
-
const editor = createEditor({
|
|
42
|
-
element: host,
|
|
43
|
-
toolbar: { preset: "full" },
|
|
44
|
-
features: gate.features,
|
|
45
|
-
plugins: [
|
|
46
|
-
createCommentsPlugin({
|
|
47
|
-
author: "Reviewer",
|
|
48
|
-
mentionUsers: ["reviewer", "approver", "legal", "publisher"],
|
|
49
|
-
onChange: (threads) => saveThreads(threads)
|
|
50
|
-
})
|
|
51
|
-
]
|
|
52
|
-
});
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
Select text in the document, click **Comment** (toolbar or selection chip), and add a comment in the compose popover. Anchors persist in exported HTML as `data-de-comment-id` spans.
|
|
56
|
-
|
|
57
|
-
## Usage — export with comments
|
|
58
|
-
|
|
59
|
-
```ts
|
|
60
|
-
import { buildCommentsExportHtml } from "@richhtmleditor/comments";
|
|
61
|
-
|
|
62
|
-
const commentsHtml = editor.getCommentsExportHtml?.()
|
|
63
|
-
?? buildCommentsExportHtml(threads);
|
|
64
|
-
|
|
65
|
-
const preview = editor.exportForPreview({
|
|
66
|
-
workflowState: "in_review",
|
|
67
|
-
commentsHtml
|
|
68
|
-
});
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
## API
|
|
72
|
-
|
|
73
|
-
### `createCommentsPlugin(options?)`
|
|
74
|
-
|
|
75
|
-
| Option | Type | Description |
|
|
76
|
-
| --- | --- | --- |
|
|
77
|
-
| `author` | `string` | Default author name for new messages (default `"Reviewer"`). |
|
|
78
|
-
| `initialThreads` | `CommentThread[]` | Pre-load comment threads. |
|
|
79
|
-
| `onChange` | `(threads: CommentThread[]) => void` | Fired when threads are added, replied, or resolved. |
|
|
80
|
-
| `mentionUsers` | `string[]` | Users for `@mention` autocomplete. |
|
|
81
|
-
|
|
82
|
-
### `CommentThread`
|
|
83
|
-
|
|
84
|
-
| Field | Type | Description |
|
|
85
|
-
| --- | --- | --- |
|
|
86
|
-
| `id` | `string` | Thread identifier. |
|
|
87
|
-
| `excerpt` | `string` | Quoted selection text. |
|
|
88
|
-
| `status` | `"open" \| "resolved"` | Thread state. |
|
|
89
|
-
| `anchorId` | `string?` | Links to `data-de-comment-id` in document HTML. |
|
|
90
|
-
| `messages` | `Array<{ id, author, body, createdAt }>` | Thread messages. |
|
|
91
|
-
|
|
92
|
-
### Toolbar tools registered
|
|
93
|
-
|
|
94
|
-
| Tool ID | Description |
|
|
95
|
-
| --- | --- |
|
|
96
|
-
| `commentAdd` | Comment on selected text (opens compose popover). |
|
|
97
|
-
| `commentPanel` | Toggle comments side panel. |
|
|
98
|
-
|
|
99
|
-
### Editor extensions (when plugin attached)
|
|
100
|
-
|
|
101
|
-
| Method | Description |
|
|
102
|
-
| --- | --- |
|
|
103
|
-
| `getCommentThreads()` | Current thread list. |
|
|
104
|
-
| `getCommentsExportHtml()` | HTML aside for `exportForPreview({ commentsHtml })`. |
|
|
105
|
-
|
|
106
|
-
### `buildCommentsExportHtml(threads)`
|
|
107
|
-
|
|
108
|
-
Standalone export helper — returns an HTML fragment for comment threads.
|
|
109
|
-
|
|
110
|
-
## Related packages
|
|
111
|
-
|
|
112
|
-
- [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core) — editor engine and `exportForPreview`.
|
|
113
|
-
- [`@richhtmleditor/enterprise`](https://www.npmjs.com/package/@richhtmleditor/enterprise) — licence gating for `features.comments`.
|
|
114
|
-
- [`@richhtmleditor/workflows`](https://www.npmjs.com/package/@richhtmleditor/workflows) — draft/review/approved states.
|
|
115
|
-
- [`@richhtmleditor/ai`](https://www.npmjs.com/package/@richhtmleditor/ai) — AI authoring plugin.
|
|
116
|
-
- [`@richhtmleditor/angular`](https://www.npmjs.com/package/@richhtmleditor/angular) — Angular wrapper.
|
|
117
|
-
- [`@richhtmleditor/react`](https://www.npmjs.com/package/@richhtmleditor/react) — React wrapper.
|
|
118
|
-
|
|
119
|
-
## License
|
|
120
|
-
|
|
121
|
-
[MIT](./LICENSE)
|
|
1
|
+
# @richhtmleditor/comments
|
|
2
|
+
|
|
3
|
+
Review and comments workflow plugin for Rich HTML Editor (enterprise). Anchored highlights, Add Comment modal, hover tooltips, comments panel, @mentions, and export HTML — requires `features.comments` from [`@richhtmleditor/enterprise`](https://www.npmjs.com/package/@richhtmleditor/enterprise), built on [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core).
|
|
4
|
+
|
|
5
|
+
**Current release: 1.1.2** — Depends on `@richhtmleditor/core` **^1.1.2**.
|
|
6
|
+
|
|
7
|
+
**Repository:** [github.com/rajkishorsahu89/richhtmleditor](https://github.com/rajkishorsahu89/richhtmleditor)
|
|
8
|
+
|
|
9
|
+
**Demo:** [richhtmleditor.vercel.app](https://richhtmleditor.vercel.app/) — [demo](https://richhtmleditor.vercel.app/demo) · [guide](https://richhtmleditor.vercel.app/guide) · [API](https://richhtmleditor.vercel.app/api). Doc Preview joint demo: [doc-preview-app.vercel.app/demo/enterprise](https://doc-preview-app.vercel.app/demo/enterprise)
|
|
10
|
+
|
|
11
|
+
### What's in 1.1.2
|
|
12
|
+
|
|
13
|
+
- **`createCommentsPlugin`** — toolbar Comment and Comments panel buttons
|
|
14
|
+
- **Add Comment modal** — compose popover anchored to the current text selection
|
|
15
|
+
- **Anchored highlights** — `<span data-de-comment-id>` markers in document HTML
|
|
16
|
+
- **Hover tooltips** — preview thread excerpt and messages on anchor hover
|
|
17
|
+
- **Comments panel** — thread list with reply, resolve, and reopen
|
|
18
|
+
- **@mentions** — autocomplete in compose box (`mentionUsers` option)
|
|
19
|
+
- **Export HTML** — `buildCommentsExportHtml` and `editor.getCommentsExportHtml()` for publish bundles
|
|
20
|
+
|
|
21
|
+
> Requires `features.comments: true`. Demo keys: `RHE-ENT-DEMO-2026-FULL` or `RHE-ENT-DEMO-2026-COMMENTS`.
|
|
22
|
+
|
|
23
|
+
**Keywords:** `richhtmleditor` `comments` `review` `enterprise` `annotations` `wysiwyg`
|
|
24
|
+
|
|
25
|
+
## Install
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install @richhtmleditor/comments @richhtmleditor/enterprise
|
|
29
|
+
# Requires @richhtmleditor/core (via framework wrapper or direct install).
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Usage
|
|
33
|
+
|
|
34
|
+
```ts
|
|
35
|
+
import { createEditor } from "@richhtmleditor/core";
|
|
36
|
+
import { createCommentsPlugin } from "@richhtmleditor/comments";
|
|
37
|
+
import { resolveEnterpriseFeatures } from "@richhtmleditor/enterprise/browser";
|
|
38
|
+
|
|
39
|
+
const gate = resolveEnterpriseFeatures({ token: "RHE-ENT-DEMO-2026-FULL" });
|
|
40
|
+
|
|
41
|
+
const editor = createEditor({
|
|
42
|
+
element: host,
|
|
43
|
+
toolbar: { preset: "full" },
|
|
44
|
+
features: gate.features,
|
|
45
|
+
plugins: [
|
|
46
|
+
createCommentsPlugin({
|
|
47
|
+
author: "Reviewer",
|
|
48
|
+
mentionUsers: ["reviewer", "approver", "legal", "publisher"],
|
|
49
|
+
onChange: (threads) => saveThreads(threads)
|
|
50
|
+
})
|
|
51
|
+
]
|
|
52
|
+
});
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
Select text in the document, click **Comment** (toolbar or selection chip), and add a comment in the compose popover. Anchors persist in exported HTML as `data-de-comment-id` spans.
|
|
56
|
+
|
|
57
|
+
## Usage — export with comments
|
|
58
|
+
|
|
59
|
+
```ts
|
|
60
|
+
import { buildCommentsExportHtml } from "@richhtmleditor/comments";
|
|
61
|
+
|
|
62
|
+
const commentsHtml = editor.getCommentsExportHtml?.()
|
|
63
|
+
?? buildCommentsExportHtml(threads);
|
|
64
|
+
|
|
65
|
+
const preview = editor.exportForPreview({
|
|
66
|
+
workflowState: "in_review",
|
|
67
|
+
commentsHtml
|
|
68
|
+
});
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## API
|
|
72
|
+
|
|
73
|
+
### `createCommentsPlugin(options?)`
|
|
74
|
+
|
|
75
|
+
| Option | Type | Description |
|
|
76
|
+
| --- | --- | --- |
|
|
77
|
+
| `author` | `string` | Default author name for new messages (default `"Reviewer"`). |
|
|
78
|
+
| `initialThreads` | `CommentThread[]` | Pre-load comment threads. |
|
|
79
|
+
| `onChange` | `(threads: CommentThread[]) => void` | Fired when threads are added, replied, or resolved. |
|
|
80
|
+
| `mentionUsers` | `string[]` | Users for `@mention` autocomplete. |
|
|
81
|
+
|
|
82
|
+
### `CommentThread`
|
|
83
|
+
|
|
84
|
+
| Field | Type | Description |
|
|
85
|
+
| --- | --- | --- |
|
|
86
|
+
| `id` | `string` | Thread identifier. |
|
|
87
|
+
| `excerpt` | `string` | Quoted selection text. |
|
|
88
|
+
| `status` | `"open" \| "resolved"` | Thread state. |
|
|
89
|
+
| `anchorId` | `string?` | Links to `data-de-comment-id` in document HTML. |
|
|
90
|
+
| `messages` | `Array<{ id, author, body, createdAt }>` | Thread messages. |
|
|
91
|
+
|
|
92
|
+
### Toolbar tools registered
|
|
93
|
+
|
|
94
|
+
| Tool ID | Description |
|
|
95
|
+
| --- | --- |
|
|
96
|
+
| `commentAdd` | Comment on selected text (opens compose popover). |
|
|
97
|
+
| `commentPanel` | Toggle comments side panel. |
|
|
98
|
+
|
|
99
|
+
### Editor extensions (when plugin attached)
|
|
100
|
+
|
|
101
|
+
| Method | Description |
|
|
102
|
+
| --- | --- |
|
|
103
|
+
| `getCommentThreads()` | Current thread list. |
|
|
104
|
+
| `getCommentsExportHtml()` | HTML aside for `exportForPreview({ commentsHtml })`. |
|
|
105
|
+
|
|
106
|
+
### `buildCommentsExportHtml(threads)`
|
|
107
|
+
|
|
108
|
+
Standalone export helper — returns an HTML fragment for comment threads.
|
|
109
|
+
|
|
110
|
+
## Related packages
|
|
111
|
+
|
|
112
|
+
- [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core) — editor engine and `exportForPreview`.
|
|
113
|
+
- [`@richhtmleditor/enterprise`](https://www.npmjs.com/package/@richhtmleditor/enterprise) — licence gating for `features.comments`.
|
|
114
|
+
- [`@richhtmleditor/workflows`](https://www.npmjs.com/package/@richhtmleditor/workflows) — draft/review/approved states.
|
|
115
|
+
- [`@richhtmleditor/ai`](https://www.npmjs.com/package/@richhtmleditor/ai) — AI authoring plugin.
|
|
116
|
+
- [`@richhtmleditor/angular`](https://www.npmjs.com/package/@richhtmleditor/angular) — Angular wrapper.
|
|
117
|
+
- [`@richhtmleditor/react`](https://www.npmjs.com/package/@richhtmleditor/react) — React wrapper.
|
|
118
|
+
|
|
119
|
+
## License
|
|
120
|
+
|
|
121
|
+
[MIT](./LICENSE)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@richhtmleditor/comments",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "Review and comments workflow plugin for Rich HTML Editor (enterprise).",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"prepack": "node ../../scripts/assert-pack-ready.mjs"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@richhtmleditor/core": "^1.1.
|
|
24
|
+
"@richhtmleditor/core": "^1.1.1"
|
|
25
25
|
},
|
|
26
26
|
"keywords": [
|
|
27
27
|
"richhtmleditor",
|