@seafile/comment-editor 0.0.1-alpha.2 → 0.0.1-alpha.20
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/dist/basic-sdk/assets/css/layout.css +1 -45
- package/dist/basic-sdk/comment/utils.js +39 -0
- package/dist/basic-sdk/context.js +2 -1
- package/dist/basic-sdk/editor/comment-editor.css +138 -0
- package/dist/basic-sdk/{comment/components → editor}/comment-editor.js +40 -28
- package/dist/basic-sdk/extension/plugins/image/helpers.js +1 -1
- package/dist/basic-sdk/extension/plugins/image/use-copy-image.js +1 -1
- package/dist/basic-sdk/extension/plugins/image/use-upload-image.js +1 -1
- package/dist/basic-sdk/extension/plugins/text-style/menu/index.js +1 -2
- package/dist/basic-sdk/hooks/use-comment.js +16 -183
- package/dist/basic-sdk/index.js +3 -10
- package/dist/index.js +0 -12
- package/dist/pages/seafile-comment-editor.js +34 -14
- package/package.json +1 -1
- package/dist/assets/css/plugin-editor.css +0 -7
- package/dist/assets/css/simple-viewer.css +0 -6
- package/dist/basic-sdk/comment/components/comment-all-participants/index.css +0 -83
- package/dist/basic-sdk/comment/components/comment-all-participants/index.js +0 -67
- package/dist/basic-sdk/comment/components/comment-all-participants/participant-avatar.js +0 -43
- package/dist/basic-sdk/comment/components/comment-context-menu/index.css +0 -16
- package/dist/basic-sdk/comment/components/comment-context-menu/index.js +0 -43
- package/dist/basic-sdk/comment/components/comment-context-menu/menu-item.js +0 -57
- package/dist/basic-sdk/comment/components/comment-delete-popover.js +0 -80
- package/dist/basic-sdk/comment/components/comment-item-collapse-wrapper.js +0 -160
- package/dist/basic-sdk/comment/components/comment-item-content.js +0 -154
- package/dist/basic-sdk/comment/components/comment-item-reply.js +0 -124
- package/dist/basic-sdk/comment/components/comment-item-resolved-reply.js +0 -38
- package/dist/basic-sdk/comment/components/comment-item-wrapper.js +0 -364
- package/dist/basic-sdk/comment/components/comment-list.css +0 -422
- package/dist/basic-sdk/comment/components/comment-list.js +0 -216
- package/dist/basic-sdk/comment/components/comment-operation/index.css +0 -26
- package/dist/basic-sdk/comment/components/comment-operation/index.js +0 -31
- package/dist/basic-sdk/comment/components/comment-participants-editor/index.css +0 -132
- package/dist/basic-sdk/comment/components/comment-participants-editor/index.js +0 -69
- package/dist/basic-sdk/comment/components/comment-participants-editor/searched-collaborators.js +0 -62
- package/dist/basic-sdk/comment/components/comment-participants-editor/selected-participants.js +0 -48
- package/dist/basic-sdk/comment/components/editor-comment.js +0 -183
- package/dist/basic-sdk/comment/components/elements-comment-count/element-comment-count.js +0 -64
- package/dist/basic-sdk/comment/components/elements-comment-count/index.css +0 -29
- package/dist/basic-sdk/comment/components/elements-comment-count/index.js +0 -49
- package/dist/basic-sdk/comment/components/global-comment/global-comment-body-header.js +0 -88
- package/dist/basic-sdk/comment/components/global-comment/global-comment-header.js +0 -89
- package/dist/basic-sdk/comment/components/global-comment/index.css +0 -328
- package/dist/basic-sdk/comment/components/global-comment/index.js +0 -217
- package/dist/basic-sdk/comment/components/index.js +0 -21
- package/dist/basic-sdk/comment/components/style.css +0 -40
- package/dist/basic-sdk/comment/helper.js +0 -184
- package/dist/basic-sdk/comment/hooks/comment-hooks/use-comment-context.js +0 -20
- package/dist/basic-sdk/comment/hooks/comment-hooks/use-comment-list.js +0 -45
- package/dist/basic-sdk/comment/hooks/comment-hooks/use-comment-mount.js +0 -57
- package/dist/basic-sdk/comment/hooks/notification-hooks/index.js +0 -25
- package/dist/basic-sdk/comment/hooks/notification-hooks/use-notification-context.js +0 -20
- package/dist/basic-sdk/comment/hooks/notification-hooks/use-notification-mount.js +0 -70
- package/dist/basic-sdk/comment/hooks/use-participants.js +0 -26
- package/dist/basic-sdk/comment/index.js +0 -21
- package/dist/basic-sdk/comment/reducer/comment-reducer.js +0 -353
- package/dist/basic-sdk/comment/reducer/notification-reducer.js +0 -89
- package/dist/basic-sdk/comment/utils/get-event-transfer.js +0 -77
- package/dist/basic-sdk/comment/utils/index.js +0 -281
- package/dist/basic-sdk/comment/utils/notification-utils.js +0 -62
- package/dist/basic-sdk/layout/comment-layout/index.css +0 -15
- package/dist/basic-sdk/layout/comment-layout/index.js +0 -87
- package/dist/basic-sdk/layout/comment-layout/resize-width/index.css +0 -38
- package/dist/basic-sdk/layout/comment-layout/resize-width/index.js +0 -132
- package/dist/basic-sdk/layout/editor-container.js +0 -32
- package/dist/basic-sdk/layout/index.js +0 -13
- package/dist/basic-sdk/socket/helpers.js +0 -299
- package/dist/basic-sdk/socket/index.js +0 -20
- package/dist/basic-sdk/socket/socket-client.js +0 -211
- package/dist/basic-sdk/socket/socket-manager.js +0 -386
- package/dist/basic-sdk/socket/with-socket-io.js +0 -73
- /package/dist/basic-sdk/comment/{constants/index.js → constants.js} +0 -0
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
.sdoc-comments-participants-popover .popover {
|
|
2
|
-
max-width: 282px;
|
|
3
|
-
margin-top: 0px;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.sdoc-comments-participants-popover .sdoc-comments-participants-editor-container {
|
|
7
|
-
min-height: 160px;
|
|
8
|
-
width: 280px;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.sdoc-comments-participants-popover .sdoc-selected-participants {
|
|
12
|
-
background-color: #f6f6f6;
|
|
13
|
-
padding: 5px;
|
|
14
|
-
border-bottom: 1px solid #dde2ea;
|
|
15
|
-
border-radius: 3px 3px 0 0;
|
|
16
|
-
min-height: 34px;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.sdoc-comments-participants-popover .sdoc-selected-participant {
|
|
20
|
-
display: inline-flex;
|
|
21
|
-
align-items: center;
|
|
22
|
-
height: 20px;
|
|
23
|
-
margin-right: 10px;
|
|
24
|
-
padding: 0 8px 0 2px;
|
|
25
|
-
font-size: 13px;
|
|
26
|
-
border-radius: 10px;
|
|
27
|
-
background: #eaeaea;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.sdoc-comments-participants-popover .sdoc-selected-participant img {
|
|
31
|
-
width: 16px;
|
|
32
|
-
height: 16px;
|
|
33
|
-
border-radius: 50%;
|
|
34
|
-
vertical-align: middle;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.sdoc-comments-participants-popover .sdoc-selected-participant .sdoc-selected-participant-name {
|
|
38
|
-
margin-left: 4px;
|
|
39
|
-
flex: 1 1;
|
|
40
|
-
color: #16181b;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.sdoc-comments-participants-popover .sdoc-selected-participant .sdoc-selected-participant-delete {
|
|
44
|
-
width: 20px;
|
|
45
|
-
height: 20px;
|
|
46
|
-
display: flex;
|
|
47
|
-
justify-content: flex-end;
|
|
48
|
-
align-items: center;
|
|
49
|
-
padding-top: 1px;
|
|
50
|
-
cursor: pointer;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.sdoc-comments-participants-popover .sdoc-selected-participant .sdoc-selected-participant-delete .sdocfont {
|
|
54
|
-
display: inline-block;
|
|
55
|
-
font-size: 12px;
|
|
56
|
-
color: #909090;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.sdoc-comments-participants-popover .sdoc-selected-participant .sdoc-selected-participant-delete:hover .sdocfont {
|
|
60
|
-
color: #5a5a5a;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.sdoc-comments-participants-popover .sdoc-search-collaborators {
|
|
64
|
-
padding: 10px;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.sdoc-comments-participants-popover .sdoc-search-collaborators input {
|
|
68
|
-
height: 28px;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.sdoc-comments-participants-popover .sdoc-searched-collaborators {
|
|
72
|
-
display: flex;
|
|
73
|
-
flex-direction: column;
|
|
74
|
-
align-items: center;
|
|
75
|
-
max-height: 200px;
|
|
76
|
-
padding: 10px;
|
|
77
|
-
overflow: auto;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.sdoc-comments-participants-popover .sdoc-searched-collaborators.sdoc-searched-collaborators-empty-tip {
|
|
81
|
-
opacity: .5;
|
|
82
|
-
font-size: 14px;
|
|
83
|
-
align-items: flex-start;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.sdoc-comments-participants-popover .sdoc-searched-collaborator {
|
|
87
|
-
display: flex;
|
|
88
|
-
align-items: center;
|
|
89
|
-
width: 100%;
|
|
90
|
-
padding: 0.25rem 0;
|
|
91
|
-
clear: both;
|
|
92
|
-
font-weight: 400;
|
|
93
|
-
color: #212529;
|
|
94
|
-
height: 30px;
|
|
95
|
-
border-radius: 2px;
|
|
96
|
-
font-size: 14px;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.sdoc-comments-participants-popover .sdoc-searched-collaborator:hover {
|
|
100
|
-
cursor: pointer;
|
|
101
|
-
background-color: #f8f9fa;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.sdoc-comments-participants-popover .sdoc-searched-collaborator img {
|
|
105
|
-
width: 16px;
|
|
106
|
-
height: 16px;
|
|
107
|
-
margin-left: 10px;
|
|
108
|
-
border-radius: 50%;
|
|
109
|
-
vertical-align: middle;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.sdoc-comments-participants-popover .sdoc-searched-collaborator .sdoc-selected-participant-name {
|
|
113
|
-
flex: 1;
|
|
114
|
-
overflow: hidden;
|
|
115
|
-
text-overflow: ellipsis;
|
|
116
|
-
white-space: nowrap;
|
|
117
|
-
margin-left: 4px;
|
|
118
|
-
color: #16181b;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.sdoc-comments-participants-popover .sdoc-searched-collaborator .sdoc-searched-collaborator-operation {
|
|
122
|
-
width: 20px;
|
|
123
|
-
height: 20px;
|
|
124
|
-
display: flex;
|
|
125
|
-
align-items: center;
|
|
126
|
-
justify-content: center;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.sdoc-comments-participants-popover .sdoc-searched-collaborator .sdoc-searched-collaborator-operation .sdocfont {
|
|
130
|
-
font-size: 12px;
|
|
131
|
-
color: #798d99;
|
|
132
|
-
}
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.default = void 0;
|
|
9
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
-
var _reactI18next = require("react-i18next");
|
|
11
|
-
var _reactstrap = require("reactstrap");
|
|
12
|
-
var _useComment = require("../../../hooks/use-comment");
|
|
13
|
-
var _mouseEvent = require("../../../utils/mouse-event");
|
|
14
|
-
var _utils = require("../../utils");
|
|
15
|
-
var _searchedCollaborators = _interopRequireDefault(require("./searched-collaborators"));
|
|
16
|
-
var _selectedParticipants = _interopRequireDefault(require("./selected-participants"));
|
|
17
|
-
require("./index.css");
|
|
18
|
-
const CommentParticipantsEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
19
|
-
let {
|
|
20
|
-
target,
|
|
21
|
-
editor
|
|
22
|
-
} = _ref;
|
|
23
|
-
const popoverRef = (0, _react.useRef)();
|
|
24
|
-
const {
|
|
25
|
-
collaborators
|
|
26
|
-
} = (0, _useComment.useComment)();
|
|
27
|
-
const {
|
|
28
|
-
t
|
|
29
|
-
} = (0, _reactI18next.useTranslation)('sdoc-editor');
|
|
30
|
-
const [searchValue, setSearchValue] = (0, _react.useState)('');
|
|
31
|
-
const [searchedCollaborators, setSearchedCollaborators] = (0, _react.useState)([]);
|
|
32
|
-
(0, _react.useImperativeHandle)(ref, () => ({
|
|
33
|
-
toggle: () => {
|
|
34
|
-
popoverRef.current && popoverRef.current.toggle();
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
38
|
-
}), [popoverRef.current]);
|
|
39
|
-
const onChangeSearch = (0, _react.useCallback)(event => {
|
|
40
|
-
const newSearchValue = event.target.value;
|
|
41
|
-
if (searchValue === newSearchValue) return;
|
|
42
|
-
const searchedCollaborators = (0, _utils.searchCollaborators)(collaborators, newSearchValue, editor);
|
|
43
|
-
setSearchValue(newSearchValue);
|
|
44
|
-
setSearchedCollaborators(searchedCollaborators);
|
|
45
|
-
}, [searchValue, collaborators, editor]);
|
|
46
|
-
return /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
|
|
47
|
-
target: target,
|
|
48
|
-
className: "sdoc-comments-participants-popover",
|
|
49
|
-
placement: "bottom-start",
|
|
50
|
-
hideArrow: true,
|
|
51
|
-
trigger: "legacy",
|
|
52
|
-
fade: false,
|
|
53
|
-
ref: popoverRef
|
|
54
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
55
|
-
className: "sdoc-comments-participants-editor-container",
|
|
56
|
-
onClick: event => (0, _mouseEvent.eventStopPropagation)(event)
|
|
57
|
-
}, /*#__PURE__*/_react.default.createElement(_selectedParticipants.default, null), /*#__PURE__*/_react.default.createElement("div", {
|
|
58
|
-
className: "sdoc-search-collaborators"
|
|
59
|
-
}, /*#__PURE__*/_react.default.createElement("input", {
|
|
60
|
-
className: "form-control",
|
|
61
|
-
type: "text",
|
|
62
|
-
placeholder: t('Search_collaborator'),
|
|
63
|
-
value: searchValue,
|
|
64
|
-
onChange: onChangeSearch
|
|
65
|
-
})), /*#__PURE__*/_react.default.createElement(_searchedCollaborators.default, {
|
|
66
|
-
collaborators: searchValue ? searchedCollaborators : collaborators
|
|
67
|
-
})));
|
|
68
|
-
});
|
|
69
|
-
var _default = exports.default = CommentParticipantsEditor;
|
package/dist/basic-sdk/comment/components/comment-participants-editor/searched-collaborators.js
DELETED
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _reactI18next = require("react-i18next");
|
|
10
|
-
var _mouseEvent = require("../../../utils/mouse-event");
|
|
11
|
-
var _useParticipants = require("../../hooks/use-participants");
|
|
12
|
-
const SearchedCollaborators = _ref => {
|
|
13
|
-
let {
|
|
14
|
-
collaborators
|
|
15
|
-
} = _ref;
|
|
16
|
-
const {
|
|
17
|
-
participants,
|
|
18
|
-
deleteParticipant,
|
|
19
|
-
addParticipants
|
|
20
|
-
} = (0, _useParticipants.useParticipantsContext)();
|
|
21
|
-
const {
|
|
22
|
-
t
|
|
23
|
-
} = (0, _reactI18next.useTranslation)('sdoc-editor');
|
|
24
|
-
const onSelectParticipant = (0, _react.useCallback)((event, participant, isSelected) => {
|
|
25
|
-
(0, _mouseEvent.eventStopPropagation)(event);
|
|
26
|
-
if (isSelected) {
|
|
27
|
-
deleteParticipant(participant.username);
|
|
28
|
-
return;
|
|
29
|
-
}
|
|
30
|
-
addParticipants(participant.username);
|
|
31
|
-
}, [deleteParticipant, addParticipants]);
|
|
32
|
-
if (!Array.isArray(collaborators) || collaborators.length === 0) {
|
|
33
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
34
|
-
className: "sdoc-searched-collaborators sdoc-searched-collaborators-empty-tip"
|
|
35
|
-
}, t('No_collaborators_available'));
|
|
36
|
-
}
|
|
37
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
38
|
-
className: "sdoc-searched-collaborators"
|
|
39
|
-
}, collaborators.map(collaborator => {
|
|
40
|
-
const {
|
|
41
|
-
name,
|
|
42
|
-
username,
|
|
43
|
-
avatar_url
|
|
44
|
-
} = collaborator;
|
|
45
|
-
const isSelected = participants.find(participant => participant.username === username);
|
|
46
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
47
|
-
key: username,
|
|
48
|
-
className: "sdoc-searched-collaborator",
|
|
49
|
-
onClick: event => onSelectParticipant(event, collaborator, isSelected)
|
|
50
|
-
}, /*#__PURE__*/_react.default.createElement("img", {
|
|
51
|
-
src: avatar_url,
|
|
52
|
-
alt: ""
|
|
53
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
54
|
-
className: "sdoc-selected-participant-name"
|
|
55
|
-
}, name), /*#__PURE__*/_react.default.createElement("div", {
|
|
56
|
-
className: "sdoc-searched-collaborator-operation"
|
|
57
|
-
}, isSelected && /*#__PURE__*/_react.default.createElement("i", {
|
|
58
|
-
className: "sdocfont sdoc-check-mark"
|
|
59
|
-
})));
|
|
60
|
-
}));
|
|
61
|
-
};
|
|
62
|
-
var _default = exports.default = SearchedCollaborators;
|
package/dist/basic-sdk/comment/components/comment-participants-editor/selected-participants.js
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _reactI18next = require("react-i18next");
|
|
10
|
-
var _useParticipants = require("../../hooks/use-participants");
|
|
11
|
-
const SelectedParticipants = () => {
|
|
12
|
-
const {
|
|
13
|
-
participants,
|
|
14
|
-
deleteParticipant
|
|
15
|
-
} = (0, _useParticipants.useParticipantsContext)();
|
|
16
|
-
const {
|
|
17
|
-
t
|
|
18
|
-
} = (0, _reactI18next.useTranslation)('sdoc-editor');
|
|
19
|
-
const onDeleteParticipant = (0, _react.useCallback)(participant => {
|
|
20
|
-
deleteParticipant(participant.username);
|
|
21
|
-
}, [deleteParticipant]);
|
|
22
|
-
if (!Array.isArray(participants) || participants.length === 0) return null;
|
|
23
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
24
|
-
className: "sdoc-selected-participants"
|
|
25
|
-
}, participants.map(participant => {
|
|
26
|
-
const {
|
|
27
|
-
name,
|
|
28
|
-
username,
|
|
29
|
-
avatar_url
|
|
30
|
-
} = participant;
|
|
31
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
32
|
-
key: username,
|
|
33
|
-
className: "sdoc-selected-participant"
|
|
34
|
-
}, /*#__PURE__*/_react.default.createElement("img", {
|
|
35
|
-
src: avatar_url,
|
|
36
|
-
alt: ""
|
|
37
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
38
|
-
className: "sdoc-selected-participant-name"
|
|
39
|
-
}, name), /*#__PURE__*/_react.default.createElement("div", {
|
|
40
|
-
className: "sdoc-selected-participant-delete",
|
|
41
|
-
onClick: () => onDeleteParticipant(participant),
|
|
42
|
-
title: t('Delete')
|
|
43
|
-
}, /*#__PURE__*/_react.default.createElement("i", {
|
|
44
|
-
className: "sdocfont sdoc-sm-close"
|
|
45
|
-
})));
|
|
46
|
-
}));
|
|
47
|
-
};
|
|
48
|
-
var _default = exports.default = SelectedParticipants;
|
|
@@ -1,183 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.default = void 0;
|
|
9
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
-
var _slate = require("@seafile/slate");
|
|
11
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
12
|
-
var _constants = require("../../constants");
|
|
13
|
-
var _helpers = require("../../extension/plugins/ai/ai-module/helpers");
|
|
14
|
-
var _useSelectionElement = require("../../hooks/use-selection-element");
|
|
15
|
-
var _useSelectionUpdate = _interopRequireDefault(require("../../hooks/use-selection-update"));
|
|
16
|
-
var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
|
|
17
|
-
var _helper = require("../helper");
|
|
18
|
-
var _useCommentContext = require("../hooks/comment-hooks/use-comment-context");
|
|
19
|
-
var _commentList = _interopRequireDefault(require("./comment-list"));
|
|
20
|
-
var _elementsCommentCount = _interopRequireDefault(require("./elements-comment-count"));
|
|
21
|
-
const EditorComment = _ref => {
|
|
22
|
-
let {
|
|
23
|
-
editor
|
|
24
|
-
} = _ref;
|
|
25
|
-
(0, _useSelectionUpdate.default)();
|
|
26
|
-
const {
|
|
27
|
-
element_comments_map
|
|
28
|
-
} = (0, _useCommentContext.useCommentContext)().commentsInfo;
|
|
29
|
-
const currentSelectionElement = (0, _useSelectionElement.useSelectionElement)({
|
|
30
|
-
editor
|
|
31
|
-
}); // The slate node of the current cursor line
|
|
32
|
-
const [activeElementIds, setActiveElementIds] = (0, _react.useState)([]); // The elements currently activated by clicking
|
|
33
|
-
const [isShowComments, setIsShowComments] = (0, _react.useState)(false);
|
|
34
|
-
const [commentDetail, setCommentDetail] = (0, _react.useState)({});
|
|
35
|
-
const [isContextComment, setIsContextComment] = (0, _react.useState)(false);
|
|
36
|
-
const [isClickedContextComment, setIsClickedContextComment] = (0, _react.useState)(false);
|
|
37
|
-
const commentedDomRef = (0, _react.useRef)(null);
|
|
38
|
-
const hiddenComment = (0, _react.useCallback)(() => {
|
|
39
|
-
setCommentDetail({});
|
|
40
|
-
setIsShowComments(false);
|
|
41
|
-
setIsContextComment(false);
|
|
42
|
-
(0, _helpers.removeMarks)(editor);
|
|
43
|
-
setIsClickedContextComment(false);
|
|
44
|
-
}, [editor]);
|
|
45
|
-
const onSelectElement = (0, _react.useCallback)(function (elementId) {
|
|
46
|
-
let isClickInContext = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
47
|
-
if (!isClickInContext) {
|
|
48
|
-
hiddenComment();
|
|
49
|
-
const activeElementIds = [elementId];
|
|
50
|
-
setActiveElementIds(activeElementIds);
|
|
51
|
-
const unresolvedComments = element_comments_map[elementId].filter(item => !item.resolved);
|
|
52
|
-
setCommentDetail({
|
|
53
|
-
...unresolvedComments
|
|
54
|
-
});
|
|
55
|
-
setIsClickedContextComment(false);
|
|
56
|
-
}
|
|
57
|
-
setIsShowComments(true);
|
|
58
|
-
if (isClickInContext) {
|
|
59
|
-
const clickedComments = [];
|
|
60
|
-
for (const comments of Object.values(editor.element_comments_map)) {
|
|
61
|
-
for (const comment of comments) {
|
|
62
|
-
if (elementId.includes(comment.detail.text_comment_id)) {
|
|
63
|
-
clickedComments.push(comment);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
setCommentDetail({
|
|
68
|
-
...clickedComments
|
|
69
|
-
});
|
|
70
|
-
setIsClickedContextComment(true);
|
|
71
|
-
}
|
|
72
|
-
}, [editor, element_comments_map, hiddenComment]);
|
|
73
|
-
(0, _react.useEffect)(() => {
|
|
74
|
-
const handleHoverContextComment = event => {
|
|
75
|
-
const parentDom = event.target.parentElement;
|
|
76
|
-
if (!parentDom) return;
|
|
77
|
-
const matchedAttributes = Array.from(parentDom.classList).filter(cls => cls.startsWith('sdoc_comment_'));
|
|
78
|
-
if (matchedAttributes.length === 0) return;
|
|
79
|
-
const isHover = event.type === 'mouseover';
|
|
80
|
-
matchedAttributes.forEach(className => {
|
|
81
|
-
const el = document.querySelectorAll(`.${className}`);
|
|
82
|
-
el.forEach(el => {
|
|
83
|
-
el.style.textDecoration = isHover ? 'underline #eb8205' : '';
|
|
84
|
-
el.style.textDecorationThickness = isHover ? '2px' : '';
|
|
85
|
-
});
|
|
86
|
-
});
|
|
87
|
-
};
|
|
88
|
-
document.addEventListener('mouseover', handleHoverContextComment);
|
|
89
|
-
document.addEventListener('mouseout', handleHoverContextComment);
|
|
90
|
-
return () => {
|
|
91
|
-
document.removeEventListener('mouseover', handleHoverContextComment);
|
|
92
|
-
document.removeEventListener('mouseout', handleHoverContextComment);
|
|
93
|
-
};
|
|
94
|
-
}, []);
|
|
95
|
-
const onSetCommentDetail = (0, _react.useCallback)(comment => {
|
|
96
|
-
setCommentDetail(comment);
|
|
97
|
-
}, []);
|
|
98
|
-
|
|
99
|
-
// Comments are updated to modify the current comment
|
|
100
|
-
(0, _react.useEffect)(() => {
|
|
101
|
-
if (isContextComment && activeElementIds) {
|
|
102
|
-
const unresolvedComments = element_comments_map[activeElementIds[0].element.id].filter(item => !item.resolved);
|
|
103
|
-
if (unresolvedComments.length === 0) {
|
|
104
|
-
setIsShowComments(false);
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
if (activeElementIds && !Array.isArray(activeElementIds)) {
|
|
108
|
-
const unresolvedComments = element_comments_map[activeElementIds.id].filter(item => !item.resolved);
|
|
109
|
-
if (unresolvedComments.length === 0) {
|
|
110
|
-
setIsShowComments(false);
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
114
|
-
}, [element_comments_map]);
|
|
115
|
-
(0, _react.useEffect)(() => {
|
|
116
|
-
// Close when the currently selected element changes
|
|
117
|
-
if (isShowComments) {
|
|
118
|
-
hiddenComment();
|
|
119
|
-
}
|
|
120
|
-
if (isContextComment) {
|
|
121
|
-
(0, _helpers.removeMarks)(editor);
|
|
122
|
-
}
|
|
123
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
124
|
-
}, [currentSelectionElement, editor.selection]);
|
|
125
|
-
(0, _react.useEffect)(() => {
|
|
126
|
-
const handleAddContextComment = () => {
|
|
127
|
-
// Add temporary marks for selection
|
|
128
|
-
_slate.Editor.addMark(editor, 'comment', true);
|
|
129
|
-
setTimeout(() => {
|
|
130
|
-
const activeElementIds = (0, _helper.getSelectedElemIds)(editor);
|
|
131
|
-
const lastSelectedDom = (0, _helper.getDomById)(activeElementIds[activeElementIds.length - 1]);
|
|
132
|
-
commentedDomRef.current = lastSelectedDom;
|
|
133
|
-
setActiveElementIds(activeElementIds);
|
|
134
|
-
setIsShowComments(true);
|
|
135
|
-
setCommentDetail({});
|
|
136
|
-
setIsContextComment(true);
|
|
137
|
-
}, 0);
|
|
138
|
-
};
|
|
139
|
-
const handleClickCommentedText = event => {
|
|
140
|
-
var _parentDom$className;
|
|
141
|
-
const parentDom = event.target.parentElement;
|
|
142
|
-
if (parentDom !== null && parentDom !== void 0 && (_parentDom$className = parentDom.className) !== null && _parentDom$className !== void 0 && _parentDom$className.split(/\s+/).some(cls => cls.startsWith('sdoc_comment'))) {
|
|
143
|
-
commentedDomRef.current = parentDom;
|
|
144
|
-
const matchedAttributes = parentDom.className.split(' ').filter(cls => cls.startsWith('sdoc_comment_'));
|
|
145
|
-
const clickedCommmentIdArray = matchedAttributes.map(item => item.replace('sdoc_comment_', ''));
|
|
146
|
-
onSelectElement(clickedCommmentIdArray, true);
|
|
147
|
-
}
|
|
148
|
-
};
|
|
149
|
-
const eventBus = _eventBus.default.getInstance();
|
|
150
|
-
const unsubscribeAddContextComment = eventBus.subscribe(_constants.INTERNAL_EVENT.ADD_CONTEXT_COMMENT, handleAddContextComment);
|
|
151
|
-
document.addEventListener('click', handleClickCommentedText);
|
|
152
|
-
return () => {
|
|
153
|
-
unsubscribeAddContextComment();
|
|
154
|
-
document.removeEventListener('click', handleClickCommentedText);
|
|
155
|
-
};
|
|
156
|
-
}, [editor, onSelectElement]);
|
|
157
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
158
|
-
className: "sdoc-comment-container"
|
|
159
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
160
|
-
className: "comment-container-main"
|
|
161
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
162
|
-
className: (0, _classnames.default)('comment-container-right', {
|
|
163
|
-
'isContextComment': isContextComment
|
|
164
|
-
})
|
|
165
|
-
}, /*#__PURE__*/_react.default.createElement(_elementsCommentCount.default, {
|
|
166
|
-
elementCommentsMap: element_comments_map,
|
|
167
|
-
activeElementIds: activeElementIds,
|
|
168
|
-
editor: editor,
|
|
169
|
-
onSelectElement: onSelectElement
|
|
170
|
-
}), isShowComments && /*#__PURE__*/_react.default.createElement(_commentList.default, {
|
|
171
|
-
activeElementIds: activeElementIds,
|
|
172
|
-
commentDetail: commentDetail,
|
|
173
|
-
onSetCommentDetail: onSetCommentDetail,
|
|
174
|
-
isContextComment: isContextComment,
|
|
175
|
-
isClickedContextComment: isClickedContextComment,
|
|
176
|
-
setIsClickedContextComment: setIsClickedContextComment,
|
|
177
|
-
onSelectElement: onSelectElement,
|
|
178
|
-
commentedDom: commentedDomRef.current,
|
|
179
|
-
closeComment: hiddenComment,
|
|
180
|
-
editor: editor
|
|
181
|
-
})));
|
|
182
|
-
};
|
|
183
|
-
var _default = exports.default = EditorComment;
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _constants = require("../../../constants");
|
|
10
|
-
var _core = require("../../../extension/core");
|
|
11
|
-
var _useScrollContext = require("../../../hooks/use-scroll-context");
|
|
12
|
-
var _mouseEvent = require("../../../utils/mouse-event");
|
|
13
|
-
var _helper = require("../../helper");
|
|
14
|
-
const ElementCommentCount = _ref => {
|
|
15
|
-
let {
|
|
16
|
-
elementId,
|
|
17
|
-
isElementSelected,
|
|
18
|
-
commentsCount,
|
|
19
|
-
editor,
|
|
20
|
-
onSelectElement
|
|
21
|
-
} = _ref;
|
|
22
|
-
const element = (0, _core.getNodeById)(editor.children, elementId);
|
|
23
|
-
const [top, setTop] = (0, _react.useState)(-9999);
|
|
24
|
-
const scrollRef = (0, _useScrollContext.useScrollContext)();
|
|
25
|
-
const onClick = (0, _react.useCallback)(event => {
|
|
26
|
-
(0, _mouseEvent.eventStopPropagation)(event);
|
|
27
|
-
onSelectElement(elementId);
|
|
28
|
-
}, [elementId, onSelectElement]);
|
|
29
|
-
const updatePosition = (0, _react.useCallback)(() => {
|
|
30
|
-
if (!element) return;
|
|
31
|
-
const scrollTop = scrollRef.current.scrollTop || 0;
|
|
32
|
-
const newTop = (0, _helper.getElementCommentCountTop)(editor, element, scrollTop);
|
|
33
|
-
setTop(newTop);
|
|
34
|
-
}, [editor, element, scrollRef]);
|
|
35
|
-
(0, _react.useEffect)(() => {
|
|
36
|
-
updatePosition();
|
|
37
|
-
|
|
38
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
39
|
-
}, []);
|
|
40
|
-
(0, _react.useEffect)(() => {
|
|
41
|
-
const scrollDom = scrollRef.current;
|
|
42
|
-
scrollDom.addEventListener('scroll', updatePosition);
|
|
43
|
-
return () => {
|
|
44
|
-
scrollDom.removeEventListener('scroll', updatePosition);
|
|
45
|
-
};
|
|
46
|
-
}, [editor, elementId, element, scrollRef, isElementSelected, updatePosition]);
|
|
47
|
-
if (!element) return null;
|
|
48
|
-
let style = {
|
|
49
|
-
top
|
|
50
|
-
};
|
|
51
|
-
if (isElementSelected) {
|
|
52
|
-
style['zIndex'] = _constants.Z_INDEX.ACTIVE_COMMENT_COUNT;
|
|
53
|
-
}
|
|
54
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
55
|
-
className: "element-comments-count",
|
|
56
|
-
style: style,
|
|
57
|
-
onClick: onClick
|
|
58
|
-
}, /*#__PURE__*/_react.default.createElement("i", {
|
|
59
|
-
className: "sdocfont sdoc-comment-count"
|
|
60
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
61
|
-
className: "element-comments-count-value"
|
|
62
|
-
}, commentsCount));
|
|
63
|
-
};
|
|
64
|
-
var _default = exports.default = ElementCommentCount;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
.sdoc-comment-container .comment-container-right .element-comments-count {
|
|
2
|
-
position: absolute;
|
|
3
|
-
left: -22px;
|
|
4
|
-
height: 16px;
|
|
5
|
-
width: 16px;
|
|
6
|
-
display: flex;
|
|
7
|
-
align-items: center;
|
|
8
|
-
justify-content: center;
|
|
9
|
-
color: #999;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.sdoc-comment-container .comment-container-right .element-comments-count:hover {
|
|
13
|
-
color: #333;
|
|
14
|
-
cursor: pointer;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.sdoc-comment-container .comment-container-right .element-comments-count-value {
|
|
18
|
-
width: 16px;
|
|
19
|
-
height: 14px;
|
|
20
|
-
position: absolute;
|
|
21
|
-
left: 0;
|
|
22
|
-
top: 0;
|
|
23
|
-
cursor: pointer;
|
|
24
|
-
pointer-events: none;
|
|
25
|
-
font-size: 12px;
|
|
26
|
-
color: #fff;
|
|
27
|
-
line-height: 13px;
|
|
28
|
-
text-align: center;
|
|
29
|
-
}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var _utils = require("../../utils");
|
|
10
|
-
var _elementCommentCount = _interopRequireDefault(require("./element-comment-count"));
|
|
11
|
-
require("./index.css");
|
|
12
|
-
const ElementsCommentCount = _ref => {
|
|
13
|
-
let {
|
|
14
|
-
elementCommentsMap,
|
|
15
|
-
selectionElement,
|
|
16
|
-
editor,
|
|
17
|
-
onSelectElement
|
|
18
|
-
} = _ref;
|
|
19
|
-
if (!elementCommentsMap) return null;
|
|
20
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
21
|
-
className: "elements-comments-count"
|
|
22
|
-
}, Object.keys(elementCommentsMap).map(originElementId => {
|
|
23
|
-
var _comments$0$detail$el, _comments$0$detail;
|
|
24
|
-
const comments = elementCommentsMap[originElementId];
|
|
25
|
-
if (!Array.isArray(comments) || comments.length === 0) return null;
|
|
26
|
-
let elementId = originElementId;
|
|
27
|
-
const elementIdList = (_comments$0$detail$el = (_comments$0$detail = comments[0].detail) === null || _comments$0$detail === void 0 ? void 0 : _comments$0$detail.element_id_list) !== null && _comments$0$detail$el !== void 0 ? _comments$0$detail$el : [];
|
|
28
|
-
if (elementIdList.length > 1) {
|
|
29
|
-
const existedId = elementIdList.find(id => (0, _utils.getCommentElementById)(id, editor));
|
|
30
|
-
if (existedId) {
|
|
31
|
-
elementId = existedId;
|
|
32
|
-
} else {
|
|
33
|
-
return null;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
const unresolvedComment = comments.filter(item => !item.resolved);
|
|
37
|
-
const unresolvedCommentCount = unresolvedComment.length;
|
|
38
|
-
if (unresolvedCommentCount === 0) return null;
|
|
39
|
-
return /*#__PURE__*/_react.default.createElement(_elementCommentCount.default, {
|
|
40
|
-
key: `${originElementId}-${elementId}`,
|
|
41
|
-
elementId: elementId,
|
|
42
|
-
isElementSelected: selectionElement && selectionElement.id === elementId,
|
|
43
|
-
commentsCount: unresolvedCommentCount,
|
|
44
|
-
editor: editor,
|
|
45
|
-
onSelectElement: onSelectElement
|
|
46
|
-
});
|
|
47
|
-
}));
|
|
48
|
-
};
|
|
49
|
-
var _default = exports.default = ElementsCommentCount;
|