@richhtmleditor/comments 1.0.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.
- package/README.md +121 -0
- package/dist/anchors.d.ts +7 -0
- package/dist/anchors.d.ts.map +1 -0
- package/dist/anchors.js +60 -0
- package/dist/anchors.js.map +1 -0
- package/dist/comment-popover.d.ts +36 -0
- package/dist/comment-popover.d.ts.map +1 -0
- package/dist/comment-popover.js +267 -0
- package/dist/comment-popover.js.map +1 -0
- package/dist/export.d.ts +5 -0
- package/dist/export.d.ts.map +1 -0
- package/dist/export.js +30 -0
- package/dist/export.js.map +1 -0
- package/dist/index.d.ts +11 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +419 -0
- package/dist/index.js.map +1 -0
- package/dist/selection-comment-chip.d.ts +10 -0
- package/dist/selection-comment-chip.d.ts.map +1 -0
- package/dist/selection-comment-chip.js +118 -0
- package/dist/selection-comment-chip.js.map +1 -0
- package/dist/styles.d.ts +3 -0
- package/dist/styles.d.ts.map +1 -0
- package/dist/styles.js +62 -0
- package/dist/styles.js.map +1 -0
- package/dist/types.d.ts +22 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/types.js +2 -0
- package/dist/types.js.map +1 -0
- package/package.json +39 -0
package/dist/styles.js
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
/** Shared comment UI styles injected once per editor host. */
|
|
2
|
+
export const COMMENT_UI_STYLES = `
|
|
3
|
+
.de-comments-panel{position:absolute;top:0;right:0;width:min(280px,100%);max-height:100%;overflow:auto;
|
|
4
|
+
background:var(--de-surface,#fff);border-left:1px solid var(--de-border,#e2e8f0);padding:12px;
|
|
5
|
+
font:13px/1.45 system-ui,sans-serif;z-index:4;box-shadow:-4px 0 16px rgba(15,23,42,.06)}
|
|
6
|
+
.de-comments-panel__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
|
|
7
|
+
.de-comments-panel__title{margin:0;font-size:14px;font-weight:600}
|
|
8
|
+
.de-comments-panel__close{border:0;background:transparent;cursor:pointer;font-size:18px;line-height:1;padding:2px 6px}
|
|
9
|
+
.de-comments-panel__empty{color:var(--de-muted,#64748b);margin:0}
|
|
10
|
+
.de-comments-thread{border:1px solid var(--de-border,#e2e8f0);border-radius:8px;padding:8px;margin:0 0 8px;cursor:pointer}
|
|
11
|
+
.de-comments-thread--resolved{opacity:.65}
|
|
12
|
+
.de-comments-thread--active{border-color:#2563eb;box-shadow:0 0 0 1px #2563eb33}
|
|
13
|
+
.de-comments-thread__excerpt{margin:0 0 6px;font-size:12px;color:var(--de-muted,#64748b)}
|
|
14
|
+
.de-comments-thread__msg{margin:0 0 4px}
|
|
15
|
+
.de-comments-thread__meta{font-size:11px;color:var(--de-muted,#94a3b8)}
|
|
16
|
+
.de-comments-thread__actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
|
|
17
|
+
.de-comments-thread__btn{font-size:11px;border:1px solid var(--de-border,#cbd5e1);background:#f8fafc;border-radius:6px;padding:3px 8px;cursor:pointer}
|
|
18
|
+
.de-comments-thread__reply{display:flex;flex-direction:column;gap:6px;margin-top:8px}
|
|
19
|
+
.de-comments-thread__reply textarea{min-height:48px;resize:vertical;border:1px solid var(--de-border,#cbd5e1);border-radius:8px;padding:6px 8px;font:inherit}
|
|
20
|
+
.de-comments-compose{display:flex;flex-direction:column;gap:6px;margin-top:10px}
|
|
21
|
+
.de-comments-compose textarea{min-height:64px;resize:vertical;border:1px solid var(--de-border,#cbd5e1);border-radius:8px;padding:8px;font:inherit}
|
|
22
|
+
.de-comments-compose button{align-self:flex-start;border:0;background:#2563eb;color:#fff;border-radius:8px;padding:6px 12px;cursor:pointer;font:inherit}
|
|
23
|
+
.de-comments-compose{position:relative}
|
|
24
|
+
.de-comments-mentions{position:absolute;left:0;right:0;bottom:calc(100% + 4px);background:#fff;border:1px solid var(--de-border,#cbd5e1);border-radius:8px;box-shadow:0 8px 20px rgba(15,23,42,.12);padding:4px;z-index:6}
|
|
25
|
+
.de-comments-mentions__item{display:block;width:100%;text-align:left;border:0;background:transparent;padding:6px 8px;border-radius:6px;cursor:pointer;font:inherit}
|
|
26
|
+
.de-comments-mentions__item:hover{background:#f1f5f9}
|
|
27
|
+
.de-content .de-comment-anchor,
|
|
28
|
+
.de-comment-anchor{background:rgba(251,191,36,.38)!important;border-bottom:2px solid #f59e0b!important;border-radius:2px;cursor:pointer}
|
|
29
|
+
.de-content .de-comment-anchor--resolved,
|
|
30
|
+
.de-comment-anchor--resolved{background:rgba(148,163,184,.22)!important;border-bottom-color:#94a3b8!important}
|
|
31
|
+
.de-selection-comment-chip{position:absolute;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:8px;
|
|
32
|
+
border:1px solid #f59e0b;background:#fffbf0;box-shadow:0 4px 14px rgba(245,158,11,.18);z-index:23;
|
|
33
|
+
font:600 12px/1.2 system-ui,sans-serif;color:#ea580c;cursor:pointer}
|
|
34
|
+
.de-selection-comment-chip:hover{background:#fef3c7}
|
|
35
|
+
.de-selection-comment-chip__icon{font-size:13px;line-height:1}
|
|
36
|
+
.de-comment-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.28);display:flex;align-items:center;justify-content:center;
|
|
37
|
+
padding:16px;z-index:30;box-sizing:border-box}
|
|
38
|
+
.de-comment-modal{width:min(420px,100%);padding:16px 18px 18px;border-radius:12px;border:1px solid #e2e8f0;background:#fff;
|
|
39
|
+
box-shadow:0 20px 48px rgba(15,23,42,.2);font:13px/1.45 system-ui,sans-serif}
|
|
40
|
+
.de-comment-modal__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px}
|
|
41
|
+
.de-comment-modal__title{margin:0;font-size:16px;font-weight:700;color:#0f172a}
|
|
42
|
+
.de-comment-modal__close{border:0;background:transparent;cursor:pointer;font-size:22px;line-height:1;color:#94a3b8;padding:2px 6px}
|
|
43
|
+
.de-comment-modal__quote{display:flex;align-items:stretch;gap:10px;margin:0 0 14px;padding:10px 12px;background:#f1f5f9;border-radius:8px}
|
|
44
|
+
.de-comment-modal__quote-bar{flex:0 0 4px;border-radius:4px;background:#0d9488}
|
|
45
|
+
.de-comment-modal__quote-text{font-size:14px;color:#334155;line-height:1.45;word-break:break-word}
|
|
46
|
+
.de-comment-modal__label{display:block;margin:0 0 8px;font-size:14px;font-weight:700;color:#0f172a}
|
|
47
|
+
.de-comment-modal__input{display:block;width:100%;min-height:96px;resize:vertical;border:1px solid #0f172a;border-radius:8px;
|
|
48
|
+
padding:10px 12px;font:inherit;box-sizing:border-box}
|
|
49
|
+
.de-comment-modal__input:focus{outline:2px solid #0d9488;outline-offset:1px}
|
|
50
|
+
.de-comment-modal__actions{display:flex;justify-content:flex-end;margin-top:14px}
|
|
51
|
+
.de-comment-modal__btn{border-radius:8px;padding:8px 16px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
|
|
52
|
+
.de-comment-modal__btn--submit{border:0;background:#0d9488;color:#fff}
|
|
53
|
+
.de-comment-hover-tip{position:absolute;width:min(280px,calc(100% - 16px));padding:10px 12px;border-radius:8px;
|
|
54
|
+
border:1px solid #f59e0b;background:#fffbeb;box-shadow:0 10px 28px rgba(15,23,42,.14);
|
|
55
|
+
z-index:22;font:12px/1.45 system-ui,sans-serif;pointer-events:auto}
|
|
56
|
+
.de-comment-hover-tip--resolved{border-color:#94a3b8;background:#f8fafc}
|
|
57
|
+
.de-comment-hover-tip__title{margin:0 0 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#64748b}
|
|
58
|
+
.de-comment-hover-tip__highlight{margin:0 0 8px;padding:6px 8px;border-radius:6px;background:rgba(251,191,36,.35);
|
|
59
|
+
border-bottom:2px solid #f59e0b;font-size:13px;font-weight:600;color:#0f172a;word-break:break-word}
|
|
60
|
+
.de-comment-hover-tip__msg{margin:0 0 4px;color:#0f172a}
|
|
61
|
+
`.trim();
|
|
62
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,8DAA8D;AAC9D,MAAM,CAAC,MAAM,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DhC,CAAC,IAAI,EAAE,CAAC"}
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export type CommentStatus = "open" | "resolved";
|
|
2
|
+
export type CommentThread = {
|
|
3
|
+
id: string;
|
|
4
|
+
excerpt: string;
|
|
5
|
+
status: CommentStatus;
|
|
6
|
+
/** Links to a <span data-de-comment-id> anchor in document HTML when present. */
|
|
7
|
+
anchorId?: string;
|
|
8
|
+
messages: Array<{
|
|
9
|
+
id: string;
|
|
10
|
+
author: string;
|
|
11
|
+
body: string;
|
|
12
|
+
createdAt: string;
|
|
13
|
+
}>;
|
|
14
|
+
};
|
|
15
|
+
export type CommentsPluginOptions = {
|
|
16
|
+
author?: string;
|
|
17
|
+
initialThreads?: CommentThread[];
|
|
18
|
+
onChange?: (threads: CommentThread[]) => void;
|
|
19
|
+
/** Users available for @mention autocomplete in the compose box. */
|
|
20
|
+
mentionUsers?: string[];
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,UAAU,CAAC;AAEhD,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,aAAa,CAAC;IACtB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAClF,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IAC9C,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB,CAAC"}
|
package/dist/types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}
|
package/package.json
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@richhtmleditor/comments",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Review and comments workflow plugin for Rich HTML Editor (enterprise).",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.js",
|
|
12
|
+
"default": "./dist/index.js"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist",
|
|
17
|
+
"README.md"
|
|
18
|
+
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"build": "tsc -p tsconfig.json",
|
|
21
|
+
"prepack": "node ../../scripts/assert-pack-ready.mjs"
|
|
22
|
+
},
|
|
23
|
+
"dependencies": {
|
|
24
|
+
"@richhtmleditor/core": "^1.0.0"
|
|
25
|
+
},
|
|
26
|
+
"keywords": [
|
|
27
|
+
"richhtmleditor",
|
|
28
|
+
"comments",
|
|
29
|
+
"review",
|
|
30
|
+
"enterprise"
|
|
31
|
+
],
|
|
32
|
+
"license": "MIT",
|
|
33
|
+
"publishConfig": {
|
|
34
|
+
"access": "public"
|
|
35
|
+
},
|
|
36
|
+
"engines": {
|
|
37
|
+
"node": ">=18"
|
|
38
|
+
}
|
|
39
|
+
}
|