@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.
Files changed (56) hide show
  1. package/dist/basic-sdk/assets/css/layout.css +1 -45
  2. package/dist/basic-sdk/comment/utils.js +39 -0
  3. package/dist/basic-sdk/editor/comment-editor.css +138 -0
  4. package/dist/basic-sdk/{comment/components → editor}/comment-editor.js +27 -20
  5. package/dist/basic-sdk/hooks/use-comment.js +8 -169
  6. package/dist/basic-sdk/index.js +3 -10
  7. package/dist/index.js +0 -12
  8. package/dist/pages/seafile-comment-editor.js +16 -10
  9. package/package.json +1 -1
  10. package/dist/assets/css/plugin-editor.css +0 -7
  11. package/dist/assets/css/simple-viewer.css +0 -6
  12. package/dist/basic-sdk/comment/components/comment-all-participants/index.css +0 -83
  13. package/dist/basic-sdk/comment/components/comment-all-participants/index.js +0 -67
  14. package/dist/basic-sdk/comment/components/comment-all-participants/participant-avatar.js +0 -43
  15. package/dist/basic-sdk/comment/components/comment-delete-popover.js +0 -80
  16. package/dist/basic-sdk/comment/components/comment-item-collapse-wrapper.js +0 -160
  17. package/dist/basic-sdk/comment/components/comment-item-content.js +0 -154
  18. package/dist/basic-sdk/comment/components/comment-item-reply.js +0 -124
  19. package/dist/basic-sdk/comment/components/comment-item-resolved-reply.js +0 -38
  20. package/dist/basic-sdk/comment/components/comment-item-wrapper.js +0 -364
  21. package/dist/basic-sdk/comment/components/comment-list.css +0 -422
  22. package/dist/basic-sdk/comment/components/comment-list.js +0 -216
  23. package/dist/basic-sdk/comment/components/comment-participants-editor/index.css +0 -132
  24. package/dist/basic-sdk/comment/components/comment-participants-editor/index.js +0 -69
  25. package/dist/basic-sdk/comment/components/comment-participants-editor/searched-collaborators.js +0 -62
  26. package/dist/basic-sdk/comment/components/comment-participants-editor/selected-participants.js +0 -48
  27. package/dist/basic-sdk/comment/components/editor-comment.js +0 -183
  28. package/dist/basic-sdk/comment/components/elements-comment-count/element-comment-count.js +0 -64
  29. package/dist/basic-sdk/comment/components/elements-comment-count/index.css +0 -29
  30. package/dist/basic-sdk/comment/components/elements-comment-count/index.js +0 -49
  31. package/dist/basic-sdk/comment/components/global-comment/global-comment-body-header.js +0 -88
  32. package/dist/basic-sdk/comment/components/global-comment/global-comment-header.js +0 -90
  33. package/dist/basic-sdk/comment/components/global-comment/index.css +0 -328
  34. package/dist/basic-sdk/comment/components/global-comment/index.js +0 -217
  35. package/dist/basic-sdk/comment/components/index.js +0 -21
  36. package/dist/basic-sdk/comment/components/style.css +0 -40
  37. package/dist/basic-sdk/comment/helper.js +0 -184
  38. package/dist/basic-sdk/comment/hooks/comment-hooks/use-comment-context.js +0 -20
  39. package/dist/basic-sdk/comment/hooks/comment-hooks/use-comment-list.js +0 -45
  40. package/dist/basic-sdk/comment/hooks/comment-hooks/use-comment-mount.js +0 -57
  41. package/dist/basic-sdk/comment/hooks/notification-hooks/index.js +0 -25
  42. package/dist/basic-sdk/comment/hooks/notification-hooks/use-notification-context.js +0 -20
  43. package/dist/basic-sdk/comment/hooks/notification-hooks/use-notification-mount.js +0 -70
  44. package/dist/basic-sdk/comment/hooks/use-participants.js +0 -26
  45. package/dist/basic-sdk/comment/index.js +0 -21
  46. package/dist/basic-sdk/comment/reducer/comment-reducer.js +0 -353
  47. package/dist/basic-sdk/comment/reducer/notification-reducer.js +0 -89
  48. package/dist/basic-sdk/comment/utils/get-event-transfer.js +0 -77
  49. package/dist/basic-sdk/comment/utils/index.js +0 -281
  50. package/dist/basic-sdk/comment/utils/notification-utils.js +0 -62
  51. package/dist/basic-sdk/socket/helpers.js +0 -299
  52. package/dist/basic-sdk/socket/index.js +0 -20
  53. package/dist/basic-sdk/socket/socket-client.js +0 -211
  54. package/dist/basic-sdk/socket/socket-manager.js +0 -386
  55. package/dist/basic-sdk/socket/with-socket-io.js +0 -73
  56. /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);