@seafile/comment-editor 0.0.1-alpha.3 → 0.0.1-alpha.5
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/editor/comment-editor.css +138 -0
- package/dist/basic-sdk/{comment/components → editor}/comment-editor.js +27 -20
- package/dist/basic-sdk/hooks/use-comment.js +8 -169
- package/dist/basic-sdk/index.js +3 -10
- package/dist/index.js +0 -12
- package/dist/pages/seafile-comment-editor.js +16 -10
- 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-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-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 -90
- 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/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,83 +0,0 @@
|
|
|
1
|
-
.comment-drawer .comments-panel-body__header .comments-participants-container {
|
|
2
|
-
width: fit-content;
|
|
3
|
-
max-width: 100%;
|
|
4
|
-
height: 42px;
|
|
5
|
-
padding-top: 6px;
|
|
6
|
-
display: flex;
|
|
7
|
-
align-items: center;
|
|
8
|
-
position: relative;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.comment-drawer .comments-panel-body__header .comments-participants-editor-target {
|
|
12
|
-
position: absolute;
|
|
13
|
-
left: -1px;
|
|
14
|
-
top: 0;
|
|
15
|
-
z-index: -1;
|
|
16
|
-
height: 100%;
|
|
17
|
-
width: 1px;
|
|
18
|
-
background-color: transparent;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.comment-drawer .comments-panel-body__header .comment-participant-avatar {
|
|
22
|
-
border-radius: 50%;
|
|
23
|
-
vertical-align: middle;
|
|
24
|
-
margin-right: -0.5rem;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.comment-drawer .comments-panel-body__header .comment-participant-avatar img {
|
|
28
|
-
width: 28px;
|
|
29
|
-
height: 28px;
|
|
30
|
-
border: 2px solid #fff;
|
|
31
|
-
line-height: 2rem;
|
|
32
|
-
border-radius: 50%;
|
|
33
|
-
display: inline-block;
|
|
34
|
-
background: #ced4da no-repeat center/cover;
|
|
35
|
-
position: relative;
|
|
36
|
-
text-align: center;
|
|
37
|
-
color: #868e96;
|
|
38
|
-
font-weight: 600;
|
|
39
|
-
vertical-align: bottom;
|
|
40
|
-
font-size: .875rem;
|
|
41
|
-
user-select: none;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.comment-drawer .comments-panel-body__header .add-comments-participants {
|
|
45
|
-
position: relative;
|
|
46
|
-
bottom: -3px;
|
|
47
|
-
cursor: pointer;
|
|
48
|
-
margin-right: -0.5rem;
|
|
49
|
-
height: 20px;
|
|
50
|
-
width: 20px;
|
|
51
|
-
background-color: #fff;
|
|
52
|
-
border: 1px solid #fff;
|
|
53
|
-
border-radius: 50%;
|
|
54
|
-
display: flex;
|
|
55
|
-
align-items: center;
|
|
56
|
-
justify-content: center;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.comment-drawer .add-comments-participants .sdocfont {
|
|
60
|
-
font-size: 16px;
|
|
61
|
-
color: #ff8000;
|
|
62
|
-
border-radius: 50%;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.comment-drawer .comment-participants-more {
|
|
66
|
-
position: absolute;
|
|
67
|
-
top: 0;
|
|
68
|
-
left: 0;
|
|
69
|
-
width: 28px;
|
|
70
|
-
height: 28px;
|
|
71
|
-
border-radius: 50%;
|
|
72
|
-
display: flex;
|
|
73
|
-
align-items: center;
|
|
74
|
-
justify-content: center;
|
|
75
|
-
overflow: hidden;
|
|
76
|
-
background-color: rgba(0, 0, 0, .6);
|
|
77
|
-
border: 2px solid #fff;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.comment-drawer .comment-participants-more .sdocfont {
|
|
81
|
-
color: #fff;
|
|
82
|
-
font-size: 12px;
|
|
83
|
-
}
|
|
@@ -1,67 +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 _slateReact = require("@seafile/slate-react");
|
|
12
|
-
var _tooltip = _interopRequireDefault(require("../../../components/tooltip"));
|
|
13
|
-
var _useParticipants = require("../../hooks/use-participants");
|
|
14
|
-
var _commentParticipantsEditor = _interopRequireDefault(require("../comment-participants-editor"));
|
|
15
|
-
var _participantAvatar = _interopRequireDefault(require("./participant-avatar"));
|
|
16
|
-
require("./index.css");
|
|
17
|
-
const CommentAllParticipants = () => {
|
|
18
|
-
const popoverRef = (0, _react.useRef)();
|
|
19
|
-
const {
|
|
20
|
-
participants
|
|
21
|
-
} = (0, _useParticipants.useParticipantsContext)();
|
|
22
|
-
const editor = (0, _slateReact.useSlateStatic)();
|
|
23
|
-
const {
|
|
24
|
-
t
|
|
25
|
-
} = (0, _reactI18next.useTranslation)('sdoc-editor');
|
|
26
|
-
const addParticipantId = 'sdoc-add-participants';
|
|
27
|
-
const commentsParticipantsId = 'sdoc-comments-participants';
|
|
28
|
-
const [isDidMount, setDidMount] = (0, _react.useState)(false);
|
|
29
|
-
(0, _react.useEffect)(() => {
|
|
30
|
-
setDidMount(true);
|
|
31
|
-
}, []);
|
|
32
|
-
const toggle = (0, _react.useCallback)(() => {
|
|
33
|
-
popoverRef.current && popoverRef.current.toggle();
|
|
34
|
-
|
|
35
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
36
|
-
}, [popoverRef.current]);
|
|
37
|
-
const participantsCount = participants.length;
|
|
38
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
39
|
-
className: "comments-participants-container"
|
|
40
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
41
|
-
className: "comments-participants-editor-target",
|
|
42
|
-
id: commentsParticipantsId
|
|
43
|
-
}), participants.slice(0, 14).map((participant, index) => {
|
|
44
|
-
const {
|
|
45
|
-
username
|
|
46
|
-
} = participant;
|
|
47
|
-
return /*#__PURE__*/_react.default.createElement(_participantAvatar.default, {
|
|
48
|
-
key: username,
|
|
49
|
-
participant: participant,
|
|
50
|
-
index: index,
|
|
51
|
-
showMore: participantsCount > 13 && index === 13
|
|
52
|
-
});
|
|
53
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
54
|
-
className: "add-comments-participants",
|
|
55
|
-
id: addParticipantId,
|
|
56
|
-
onClick: toggle
|
|
57
|
-
}, /*#__PURE__*/_react.default.createElement("i", {
|
|
58
|
-
className: "sdocfont sdoc-add"
|
|
59
|
-
})), isDidMount && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
60
|
-
target: addParticipantId
|
|
61
|
-
}, t('Add_participants'))), isDidMount && /*#__PURE__*/_react.default.createElement(_commentParticipantsEditor.default, {
|
|
62
|
-
target: commentsParticipantsId,
|
|
63
|
-
ref: popoverRef,
|
|
64
|
-
editor: editor
|
|
65
|
-
}));
|
|
66
|
-
};
|
|
67
|
-
var _default = exports.default = CommentAllParticipants;
|
|
@@ -1,43 +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 _classnames = _interopRequireDefault(require("classnames"));
|
|
11
|
-
var _tooltip = _interopRequireDefault(require("../../../components/tooltip"));
|
|
12
|
-
const ParticipantAvatar = _ref => {
|
|
13
|
-
let {
|
|
14
|
-
participant,
|
|
15
|
-
index,
|
|
16
|
-
showMore
|
|
17
|
-
} = _ref;
|
|
18
|
-
const [showTooltip, setShowTooltip] = (0, _react.useState)(false);
|
|
19
|
-
(0, _react.useEffect)(() => {
|
|
20
|
-
setShowTooltip(true);
|
|
21
|
-
}, []);
|
|
22
|
-
const {
|
|
23
|
-
name,
|
|
24
|
-
avatar_url
|
|
25
|
-
} = participant;
|
|
26
|
-
const id = `comment-participant-avatar-${index}-${Math.floor(Math.random() * 1000)}`;
|
|
27
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
28
|
-
className: (0, _classnames.default)('comment-participant-avatar', {
|
|
29
|
-
'position-relative': showMore
|
|
30
|
-
}),
|
|
31
|
-
id: id
|
|
32
|
-
}, /*#__PURE__*/_react.default.createElement("img", {
|
|
33
|
-
src: avatar_url,
|
|
34
|
-
alt: ""
|
|
35
|
-
}), showTooltip && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
36
|
-
target: id
|
|
37
|
-
}, name), showMore && /*#__PURE__*/_react.default.createElement("div", {
|
|
38
|
-
className: "comment-participants-more"
|
|
39
|
-
}, /*#__PURE__*/_react.default.createElement("i", {
|
|
40
|
-
className: "sdocfont sdoc-more"
|
|
41
|
-
})));
|
|
42
|
-
};
|
|
43
|
-
var _default = exports.default = ParticipantAvatar;
|
|
@@ -1,80 +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 _isHotkey = _interopRequireDefault(require("is-hotkey"));
|
|
13
|
-
var _utils = require("../utils");
|
|
14
|
-
require("./comment-list.css");
|
|
15
|
-
const CommentDeletePopover = _ref => {
|
|
16
|
-
let {
|
|
17
|
-
type,
|
|
18
|
-
setIsShowDeletePopover,
|
|
19
|
-
deleteConfirm,
|
|
20
|
-
targetId,
|
|
21
|
-
parentDom
|
|
22
|
-
} = _ref;
|
|
23
|
-
const popoverRef = (0, _react.useRef)(null);
|
|
24
|
-
const hide = (0, _react.useCallback)(event => {
|
|
25
|
-
if (popoverRef.current && !(0, _utils.getEventClassName)(event).includes('popover') && !popoverRef.current.contains(event.target)) {
|
|
26
|
-
setIsShowDeletePopover(false);
|
|
27
|
-
event.preventDefault();
|
|
28
|
-
event.stopPropagation();
|
|
29
|
-
return false;
|
|
30
|
-
}
|
|
31
|
-
}, [setIsShowDeletePopover]);
|
|
32
|
-
const onHotKey = (0, _react.useCallback)(event => {
|
|
33
|
-
if ((0, _isHotkey.default)('esc', event)) {
|
|
34
|
-
event.preventDefault();
|
|
35
|
-
setIsShowDeletePopover(false);
|
|
36
|
-
}
|
|
37
|
-
}, [setIsShowDeletePopover]);
|
|
38
|
-
(0, _react.useEffect)(() => {
|
|
39
|
-
document.addEventListener('click', hide, true);
|
|
40
|
-
document.addEventListener('keydown', onHotKey);
|
|
41
|
-
return () => {
|
|
42
|
-
document.removeEventListener('click', hide, true);
|
|
43
|
-
document.removeEventListener('keydown', onHotKey);
|
|
44
|
-
};
|
|
45
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
46
|
-
}, []);
|
|
47
|
-
const {
|
|
48
|
-
t
|
|
49
|
-
} = (0, _reactI18next.useTranslation)('sdoc-editor');
|
|
50
|
-
const onDeleteCancel = (0, _react.useCallback)(event => {
|
|
51
|
-
event.stopPropagation();
|
|
52
|
-
setIsShowDeletePopover(false);
|
|
53
|
-
}, [setIsShowDeletePopover]);
|
|
54
|
-
const handleConfirm = (0, _react.useCallback)(event => {
|
|
55
|
-
event.stopPropagation();
|
|
56
|
-
deleteConfirm();
|
|
57
|
-
}, [deleteConfirm]);
|
|
58
|
-
return /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
|
|
59
|
-
container: parentDom,
|
|
60
|
-
target: targetId,
|
|
61
|
-
onClick: event => event.stopPropagation(),
|
|
62
|
-
placement: "left",
|
|
63
|
-
className: "comment-delete-popover",
|
|
64
|
-
isOpen: true
|
|
65
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
66
|
-
className: "comment-delete-popover-container",
|
|
67
|
-
ref: popoverRef
|
|
68
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
69
|
-
className: "delete-tip"
|
|
70
|
-
}, t(`Are_you_sure_to_delete_this_${type === 'comment' ? 'comment' : 'reply'}`)), /*#__PURE__*/_react.default.createElement("div", {
|
|
71
|
-
className: "delete-control mt-5"
|
|
72
|
-
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
73
|
-
className: "btn btn-secondary mr-2",
|
|
74
|
-
onClick: onDeleteCancel
|
|
75
|
-
}, t('Cancel')), /*#__PURE__*/_react.default.createElement("button", {
|
|
76
|
-
className: "btn btn-primary",
|
|
77
|
-
onClick: handleConfirm
|
|
78
|
-
}, t('Confirm')))));
|
|
79
|
-
};
|
|
80
|
-
var _default = exports.default = CommentDeletePopover;
|
|
@@ -1,160 +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 _slate = require("@seafile/slate");
|
|
12
|
-
var _slateReact = require("@seafile/slate-react");
|
|
13
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
14
|
-
var _dayjs = _interopRequireDefault(require("dayjs"));
|
|
15
|
-
var _useComment = require("../../hooks/use-comment");
|
|
16
|
-
var _mdToHtml = _interopRequireDefault(require("../../slate-convert/md-to-html"));
|
|
17
|
-
var _constants = require("../constants");
|
|
18
|
-
var _helper = require("../helper");
|
|
19
|
-
const CommentItemCollapseWrapper = _ref => {
|
|
20
|
-
var _topLevelComment$deta;
|
|
21
|
-
let {
|
|
22
|
-
element,
|
|
23
|
-
topLevelComment,
|
|
24
|
-
latestReply,
|
|
25
|
-
editor,
|
|
26
|
-
replyCount,
|
|
27
|
-
setCurrentCommentGroup,
|
|
28
|
-
t
|
|
29
|
-
} = _ref;
|
|
30
|
-
const scrollRef = (0, _react.useRef)(document.querySelector('.sdoc-scroll-container'));
|
|
31
|
-
const {
|
|
32
|
-
notificationsInfo
|
|
33
|
-
} = (0, _useComment.useComment)();
|
|
34
|
-
const [commentContent, setCommentContent] = (0, _react.useState)('');
|
|
35
|
-
const [replyContent, setReplyContent] = (0, _react.useState)('');
|
|
36
|
-
const isUnseen = notificationsInfo.notifications_map[`sdoc_notification_${topLevelComment.id}`] ? true : false;
|
|
37
|
-
const isReplayUnseen = (0, _react.useMemo)(() => {
|
|
38
|
-
if (!latestReply) return false;
|
|
39
|
-
const isUnseen = notificationsInfo.notifications_map[`sdoc_notification_${topLevelComment.id}_${latestReply.id}`] ? true : false;
|
|
40
|
-
return isUnseen;
|
|
41
|
-
}, [latestReply, notificationsInfo.notifications_map, topLevelComment.id]);
|
|
42
|
-
(0, _react.useEffect)(() => {
|
|
43
|
-
const initCommentContent = async () => {
|
|
44
|
-
const htmlString = await _mdToHtml.default.process(topLevelComment.comment);
|
|
45
|
-
setCommentContent(String(htmlString));
|
|
46
|
-
};
|
|
47
|
-
initCommentContent();
|
|
48
|
-
}, [topLevelComment.comment]);
|
|
49
|
-
(0, _react.useEffect)(() => {
|
|
50
|
-
const initReplyContent = async () => {
|
|
51
|
-
if (!latestReply) {
|
|
52
|
-
setReplyContent('');
|
|
53
|
-
return;
|
|
54
|
-
}
|
|
55
|
-
let mdString = '';
|
|
56
|
-
if (latestReply.reply) {
|
|
57
|
-
mdString = latestReply.reply;
|
|
58
|
-
} else {
|
|
59
|
-
mdString = '';
|
|
60
|
-
}
|
|
61
|
-
const htmlString = await _mdToHtml.default.process(mdString);
|
|
62
|
-
setReplyContent(String(htmlString));
|
|
63
|
-
};
|
|
64
|
-
initReplyContent();
|
|
65
|
-
}, [latestReply, t]);
|
|
66
|
-
const handleScrollToArticle = (0, _react.useCallback)(e => {
|
|
67
|
-
e.stopPropagation();
|
|
68
|
-
const dom = _slateReact.ReactEditor.toDOMNode(editor, element);
|
|
69
|
-
const headerHeight = 56 + 37;
|
|
70
|
-
scrollRef.current.scrollTo({
|
|
71
|
-
top: dom.offsetTop - headerHeight,
|
|
72
|
-
behavior: 'smooth'
|
|
73
|
-
});
|
|
74
|
-
}, [editor, element, scrollRef]);
|
|
75
|
-
const onItemClick = (0, _react.useCallback)(event => {
|
|
76
|
-
event.stopPropagation();
|
|
77
|
-
if (event.target.className === _constants.COMMENT_URL_CLASSNAME) return;
|
|
78
|
-
setCurrentCommentGroup(topLevelComment.id);
|
|
79
|
-
}, [setCurrentCommentGroup, topLevelComment.id]);
|
|
80
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
81
|
-
id: `comment-item-wrapper_${topLevelComment.id}`,
|
|
82
|
-
className: (0, _classnames.default)('comment-collapse-wrapper', 'comment-ui-container', {
|
|
83
|
-
'sdoc-resolved': topLevelComment.resolved,
|
|
84
|
-
'd-flex flex-column': element
|
|
85
|
-
}),
|
|
86
|
-
onClick: onItemClick
|
|
87
|
-
}, topLevelComment.detail.element_id_list && /*#__PURE__*/_react.default.createElement("div", {
|
|
88
|
-
className: (0, _classnames.default)('comment-item-selected-text-container', {
|
|
89
|
-
'detail-context-comment': ((_topLevelComment$deta = topLevelComment.detail.element_id_list) === null || _topLevelComment$deta === void 0 ? void 0 : _topLevelComment$deta.length) > 0
|
|
90
|
-
}),
|
|
91
|
-
onClick: handleScrollToArticle
|
|
92
|
-
}, /*#__PURE__*/_react.default.createElement("i", {
|
|
93
|
-
className: "sdocfont sdoc-comment-quote mr-2"
|
|
94
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
95
|
-
className: "comment-item-selected-text"
|
|
96
|
-
}, topLevelComment.detail.element_id_list.map((elementId, index) => {
|
|
97
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
98
|
-
className: "context-comment-item-selected-text",
|
|
99
|
-
key: index
|
|
100
|
-
}, (0, _helper.getCommentedTextsByElementId)(elementId, topLevelComment.detail.text_comment_id));
|
|
101
|
-
}))), element && /*#__PURE__*/_react.default.createElement("div", {
|
|
102
|
-
className: "comment-item-selected-text-container",
|
|
103
|
-
onClick: handleScrollToArticle
|
|
104
|
-
}, /*#__PURE__*/_react.default.createElement("i", {
|
|
105
|
-
className: "sdocfont sdoc-comment-quote mr-2"
|
|
106
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
107
|
-
className: "comment-item-selected-text"
|
|
108
|
-
}, _slate.Node.string(element))), /*#__PURE__*/_react.default.createElement("div", {
|
|
109
|
-
className: "comment-item-list"
|
|
110
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
111
|
-
className: "comment-item"
|
|
112
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
113
|
-
className: "comment-header"
|
|
114
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
115
|
-
className: "comment-author"
|
|
116
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
117
|
-
className: "comment-author__avatar"
|
|
118
|
-
}, /*#__PURE__*/_react.default.createElement("img", {
|
|
119
|
-
alt: "",
|
|
120
|
-
src: topLevelComment.avatar_url
|
|
121
|
-
})), /*#__PURE__*/_react.default.createElement("span", {
|
|
122
|
-
className: "comment-author__info"
|
|
123
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
124
|
-
className: "name"
|
|
125
|
-
}, topLevelComment.user_name), /*#__PURE__*/_react.default.createElement("span", {
|
|
126
|
-
className: "time"
|
|
127
|
-
}, (0, _dayjs.default)(topLevelComment.updated_at).format('MM-DD HH:mm'), (topLevelComment === null || topLevelComment === void 0 ? void 0 : topLevelComment.resolved) && /*#__PURE__*/_react.default.createElement("span", {
|
|
128
|
-
className: "comment-success-resolved sdocfont sdoc-mark-as-resolved"
|
|
129
|
-
})))), (isUnseen || isReplayUnseen) && /*#__PURE__*/_react.default.createElement("div", {
|
|
130
|
-
className: "sdoc-unread-message-tip"
|
|
131
|
-
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
132
|
-
className: "comment-content"
|
|
133
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
134
|
-
dangerouslySetInnerHTML: {
|
|
135
|
-
__html: commentContent
|
|
136
|
-
}
|
|
137
|
-
})), replyCount !== 0 && /*#__PURE__*/_react.default.createElement("div", {
|
|
138
|
-
className: "comment-footer"
|
|
139
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
140
|
-
className: "comments-count"
|
|
141
|
-
}, /*#__PURE__*/_react.default.createElement("i", {
|
|
142
|
-
className: "sdocfont sdoc-comments"
|
|
143
|
-
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
144
|
-
className: "comments-count-number"
|
|
145
|
-
}, replyCount)), /*#__PURE__*/_react.default.createElement("div", {
|
|
146
|
-
className: "comment-author"
|
|
147
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
148
|
-
className: "comment-author__avatar"
|
|
149
|
-
}, /*#__PURE__*/_react.default.createElement("img", {
|
|
150
|
-
alt: "",
|
|
151
|
-
src: latestReply.avatar_url
|
|
152
|
-
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
153
|
-
className: "comment-author__latest-reply"
|
|
154
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
155
|
-
dangerouslySetInnerHTML: {
|
|
156
|
-
__html: replyContent
|
|
157
|
-
}
|
|
158
|
-
})))))));
|
|
159
|
-
};
|
|
160
|
-
var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(CommentItemCollapseWrapper);
|
|
@@ -1,154 +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 _dayjs = _interopRequireDefault(require("dayjs"));
|
|
13
|
-
var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
|
|
14
|
-
var _context = _interopRequireDefault(require("../../context"));
|
|
15
|
-
var _useComment = require("../../hooks/use-comment");
|
|
16
|
-
var _mdToHtml = _interopRequireDefault(require("../../slate-convert/md-to-html"));
|
|
17
|
-
var _commentEditor = _interopRequireDefault(require("./comment-editor"));
|
|
18
|
-
const CommentItemContent = _ref => {
|
|
19
|
-
let {
|
|
20
|
-
isActive,
|
|
21
|
-
container,
|
|
22
|
-
comment,
|
|
23
|
-
updateComment,
|
|
24
|
-
updateCommentState,
|
|
25
|
-
onShowDeletePopover,
|
|
26
|
-
t,
|
|
27
|
-
targetId
|
|
28
|
-
} = _ref;
|
|
29
|
-
const [isDropdownOpen, setDropdownOpen] = (0, _react.useState)(false);
|
|
30
|
-
const [isEditing, setIsEditing] = (0, _react.useState)(false);
|
|
31
|
-
const {
|
|
32
|
-
notificationsInfo
|
|
33
|
-
} = (0, _useComment.useComment)();
|
|
34
|
-
const [editorContent, setEditorContent] = (0, _react.useState)('');
|
|
35
|
-
const isUnseen = notificationsInfo.notifications_map[`sdoc_notification_${comment.id}`] ? true : false;
|
|
36
|
-
(0, _react.useEffect)(() => {
|
|
37
|
-
transferHtml(comment.comment);
|
|
38
|
-
}, [comment.comment]);
|
|
39
|
-
const transferHtml = async mdString => {
|
|
40
|
-
const htmlString = await _mdToHtml.default.process(mdString);
|
|
41
|
-
setEditorContent(String(htmlString));
|
|
42
|
-
};
|
|
43
|
-
const updateContent = (0, _react.useCallback)(content => {
|
|
44
|
-
const commentId = comment.id;
|
|
45
|
-
if (comment.comment !== content) {
|
|
46
|
-
const time = (0, _dayjs.default)().format('YYYY-MM-DD HH:mm:ss');
|
|
47
|
-
const newComment = {
|
|
48
|
-
comment: content,
|
|
49
|
-
detail: {
|
|
50
|
-
...comment.detail,
|
|
51
|
-
comment: content
|
|
52
|
-
},
|
|
53
|
-
updated_at: time
|
|
54
|
-
};
|
|
55
|
-
updateComment(commentId, newComment);
|
|
56
|
-
}
|
|
57
|
-
setIsEditing(false);
|
|
58
|
-
}, [comment, updateComment]);
|
|
59
|
-
const updateCommentResolved = (0, _react.useCallback)(state => {
|
|
60
|
-
const commentId = comment.id;
|
|
61
|
-
const newComment = {
|
|
62
|
-
resolved: state
|
|
63
|
-
};
|
|
64
|
-
updateCommentState(commentId, newComment);
|
|
65
|
-
}, [comment.id, updateCommentState]);
|
|
66
|
-
const markAsResolved = (0, _react.useCallback)(event => {
|
|
67
|
-
event.stopPropagation();
|
|
68
|
-
updateCommentResolved(true);
|
|
69
|
-
}, [updateCommentResolved]);
|
|
70
|
-
const resubmit = (0, _react.useCallback)(event => {
|
|
71
|
-
event.stopPropagation();
|
|
72
|
-
updateCommentResolved(false);
|
|
73
|
-
}, [updateCommentResolved]);
|
|
74
|
-
const menuId = (0, _react.useMemo)(() => `comment_${comment.id}`, [comment]);
|
|
75
|
-
const user = _context.default.getUserInfo();
|
|
76
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
77
|
-
className: "comment-item"
|
|
78
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
79
|
-
className: "comment-header"
|
|
80
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
81
|
-
className: "comment-author"
|
|
82
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
83
|
-
className: "comment-author__avatar"
|
|
84
|
-
}, /*#__PURE__*/_react.default.createElement("img", {
|
|
85
|
-
alt: "",
|
|
86
|
-
src: comment.avatar_url
|
|
87
|
-
})), /*#__PURE__*/_react.default.createElement("span", {
|
|
88
|
-
className: "comment-author__info"
|
|
89
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
90
|
-
className: "name"
|
|
91
|
-
}, comment.user_name), /*#__PURE__*/_react.default.createElement("span", {
|
|
92
|
-
className: "time"
|
|
93
|
-
}, (0, _dayjs.default)(comment.updated_at).format('MM-DD HH:mm'), (comment === null || comment === void 0 ? void 0 : comment.resolved) && /*#__PURE__*/_react.default.createElement("span", {
|
|
94
|
-
className: "comment-success-resolved sdocfont sdoc-mark-as-resolved"
|
|
95
|
-
})))), isUnseen && !isActive && /*#__PURE__*/_react.default.createElement("span", {
|
|
96
|
-
className: "sdoc-unread-message-tip"
|
|
97
|
-
}), isActive && [comment === null || comment === void 0 ? void 0 : comment.user_email, comment === null || comment === void 0 ? void 0 : comment.author].includes(user.username) && /*#__PURE__*/_react.default.createElement("div", {
|
|
98
|
-
className: "d-flex comment-item-operation-wrapper"
|
|
99
|
-
}, (!comment.resolved || (comment === null || comment === void 0 ? void 0 : comment.isContextComment)) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
100
|
-
id: `tooltip_${menuId}`,
|
|
101
|
-
className: "comment-operation mr-2",
|
|
102
|
-
onClick: markAsResolved
|
|
103
|
-
}, /*#__PURE__*/_react.default.createElement("i", {
|
|
104
|
-
className: "sdocfont sdoc-confirm"
|
|
105
|
-
})), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
106
|
-
target: `tooltip_${menuId}`
|
|
107
|
-
}, t('Resolved_tip'))), /*#__PURE__*/_react.default.createElement(_reactstrap.Dropdown, {
|
|
108
|
-
id: targetId,
|
|
109
|
-
isOpen: isDropdownOpen,
|
|
110
|
-
toggle: () => setDropdownOpen(!isDropdownOpen)
|
|
111
|
-
}, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
|
|
112
|
-
tag: "div",
|
|
113
|
-
className: "comment-operation"
|
|
114
|
-
}, /*#__PURE__*/_react.default.createElement("i", {
|
|
115
|
-
className: "sdocfont sdoc-more"
|
|
116
|
-
})), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {
|
|
117
|
-
className: "sdoc-dropdown-menu",
|
|
118
|
-
container: container
|
|
119
|
-
}, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
|
|
120
|
-
className: "sdoc-dropdown-menu-item",
|
|
121
|
-
tag: "div",
|
|
122
|
-
onClick: event => {
|
|
123
|
-
event.stopPropagation();
|
|
124
|
-
setIsEditing(true);
|
|
125
|
-
}
|
|
126
|
-
}, t('Edit')), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
|
|
127
|
-
className: "sdoc-dropdown-menu-item",
|
|
128
|
-
tag: "div",
|
|
129
|
-
onClick: event => {
|
|
130
|
-
event.stopPropagation();
|
|
131
|
-
onShowDeletePopover(true);
|
|
132
|
-
}
|
|
133
|
-
}, t('Delete')), !comment.resolved && /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
|
|
134
|
-
className: "sdoc-dropdown-menu-item",
|
|
135
|
-
tag: "div",
|
|
136
|
-
onClick: markAsResolved
|
|
137
|
-
}, t('Mark_as_Resolved')), comment.resolved && /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
|
|
138
|
-
className: "sdoc-dropdown-menu-item",
|
|
139
|
-
tag: "div",
|
|
140
|
-
onClick: resubmit
|
|
141
|
-
}, t('Resubmit')))))), /*#__PURE__*/_react.default.createElement("div", {
|
|
142
|
-
className: "comment-content"
|
|
143
|
-
}, !isEditing && /*#__PURE__*/_react.default.createElement("div", {
|
|
144
|
-
dangerouslySetInnerHTML: {
|
|
145
|
-
__html: editorContent
|
|
146
|
-
}
|
|
147
|
-
})), isEditing && /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
|
|
148
|
-
className: "pb-3",
|
|
149
|
-
content: comment.comment,
|
|
150
|
-
updateContent: updateContent,
|
|
151
|
-
setIsEditing: setIsEditing
|
|
152
|
-
}));
|
|
153
|
-
};
|
|
154
|
-
var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(CommentItemContent);
|