@seafile/comment-editor 0.0.1-alpha.0 → 0.0.1-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -4
- package/dist/basic-sdk/assets/css/layout.css +1 -45
- package/dist/basic-sdk/assets/css/sdoc-comment-editor-plugin.css +4 -4
- package/dist/basic-sdk/comment/utils.js +39 -0
- package/dist/basic-sdk/constants/index.js +1 -2
- package/dist/basic-sdk/context.js +9 -8
- package/dist/basic-sdk/editor/comment-editor.css +138 -0
- package/dist/basic-sdk/editor/comment-editor.js +289 -0
- 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 +2 -1
- package/dist/basic-sdk/extension/plugins/link/menu/index.js +1 -1
- package/dist/basic-sdk/extension/plugins/mention/render-elem/participant-popover.js +3 -6
- package/dist/basic-sdk/extension/plugins/text-style/menu/index.js +1 -2
- package/dist/basic-sdk/extension/render/render-comment-editor-element.js +1 -1
- package/dist/basic-sdk/extension/toolbar/comment-editor-toolbar/index.js +3 -3
- package/dist/basic-sdk/extension/toolbar/comment-editor-toolbar/post-comment/index.js +2 -2
- package/dist/basic-sdk/hooks/use-comment.js +53 -0
- package/dist/basic-sdk/index.js +12 -39
- package/dist/pages/seafile-comment-editor.js +30 -54
- package/package.json +2 -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-editor.js +0 -165
- package/dist/basic-sdk/comment/components/comment-item-collapse-wrapper.js +0 -160
- package/dist/basic-sdk/comment/components/comment-item-content.js +0 -156
- 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 -368
- 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 -87
- package/dist/basic-sdk/comment/components/global-comment/global-comment-editor.js +0 -36
- package/dist/basic-sdk/comment/components/global-comment/global-comment-header.js +0 -82
- package/dist/basic-sdk/comment/components/global-comment/index.css +0 -326
- package/dist/basic-sdk/comment/components/global-comment/index.js +0 -212
- 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 -58
- 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 -74
- package/dist/basic-sdk/comment/hooks/use-participants.js +0 -26
- package/dist/basic-sdk/comment/index.js +0 -67
- package/dist/basic-sdk/comment/provider/comment-context-provider.js +0 -37
- package/dist/basic-sdk/comment/provider/index.js +0 -23
- package/dist/basic-sdk/comment/provider/notification-context-provider.js +0 -31
- package/dist/basic-sdk/comment/provider/participants-content-provider.js +0 -96
- 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/editor/comment-article.js +0 -104
- package/dist/basic-sdk/editor/sdoc-comment-editor.js +0 -128
- package/dist/basic-sdk/editor/sdoc-editor.js +0 -50
- package/dist/basic-sdk/hooks/use-collaborators.js +0 -62
- package/dist/basic-sdk/hooks/use-plugins.js +0 -9
- package/dist/basic-sdk/layout/article-container.js +0 -89
- package/dist/basic-sdk/layout/editor-container.js +0 -32
- package/dist/basic-sdk/layout/index.js +0 -20
- package/dist/basic-sdk/right-panel/index.css +0 -15
- package/dist/basic-sdk/right-panel/index.js +0 -86
- package/dist/basic-sdk/right-panel/resize-width/index.css +0 -38
- package/dist/basic-sdk/right-panel/resize-width/index.js +0 -132
- 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/hooks/index.js +0 -12
- package/dist/hooks/use-document.js +0 -75
- /package/dist/basic-sdk/comment/{constants/index.js → constants.js} +0 -0
|
@@ -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,165 +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 _constants = require("../../constants");
|
|
15
|
-
var _context = _interopRequireDefault(require("../../context"));
|
|
16
|
-
var _sdocCommentEditor = _interopRequireDefault(require("../../editor/sdoc-comment-editor"));
|
|
17
|
-
var _extension = require("../../extension");
|
|
18
|
-
var _constants2 = require("../../extension/constants");
|
|
19
|
-
var _core = require("../../extension/core");
|
|
20
|
-
var _nodeId = _interopRequireDefault(require("../../node-id"));
|
|
21
|
-
var _mdToSlate = _interopRequireDefault(require("../../slate-convert/md-to-slate"));
|
|
22
|
-
var _slateToMd = _interopRequireDefault(require("../../slate-convert/slate-to-md"));
|
|
23
|
-
var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
|
|
24
|
-
var _useParticipants = require("../hooks/use-participants");
|
|
25
|
-
const getSubmitTip = (type, content) => {
|
|
26
|
-
if (content) return 'Save';
|
|
27
|
-
return type === 'comment' ? 'Comment' : 'Reply';
|
|
28
|
-
};
|
|
29
|
-
const DEFAULT_PLACEHOLDER = 'Enter_comment_shift_enter_for_new_line_Enter_to_send';
|
|
30
|
-
const CommentEditor = _ref => {
|
|
31
|
-
let {
|
|
32
|
-
type,
|
|
33
|
-
className,
|
|
34
|
-
content,
|
|
35
|
-
commentContent,
|
|
36
|
-
placeholder = DEFAULT_PLACEHOLDER,
|
|
37
|
-
insertContent,
|
|
38
|
-
updateContent,
|
|
39
|
-
setIsEditing,
|
|
40
|
-
hiddenComment,
|
|
41
|
-
hiddenUserInfo,
|
|
42
|
-
onContentChange,
|
|
43
|
-
isContextComment,
|
|
44
|
-
closeComment
|
|
45
|
-
} = _ref;
|
|
46
|
-
const commentWrapperRef = (0, _react.useRef)();
|
|
47
|
-
const {
|
|
48
|
-
t
|
|
49
|
-
} = (0, _reactI18next.useTranslation)('sdoc-editor');
|
|
50
|
-
const {
|
|
51
|
-
addParticipants
|
|
52
|
-
} = (0, _useParticipants.useParticipantsContext)();
|
|
53
|
-
const submitTip = (0, _react.useMemo)(() => getSubmitTip(type, content), [content, type]);
|
|
54
|
-
const userInfo = _context.default.getUserInfo();
|
|
55
|
-
const document = (0, _react.useMemo)(() => {
|
|
56
|
-
const cursor = {};
|
|
57
|
-
let elements = null;
|
|
58
|
-
elements = [(0, _core.generateEmptyElement)(_constants2.PARAGRAPH, {
|
|
59
|
-
placeholder
|
|
60
|
-
})];
|
|
61
|
-
return {
|
|
62
|
-
elements,
|
|
63
|
-
cursor
|
|
64
|
-
};
|
|
65
|
-
}, [placeholder]);
|
|
66
|
-
const editor = (0, _react.useMemo)(() => {
|
|
67
|
-
const defaultEditor = (0, _extension.createCommentEditor)();
|
|
68
|
-
const newEditor = (0, _nodeId.default)(defaultEditor);
|
|
69
|
-
const {
|
|
70
|
-
cursors
|
|
71
|
-
} = document;
|
|
72
|
-
newEditor.cursors = cursors || {};
|
|
73
|
-
newEditor.width = _constants.COMMENT_EDITOR_EDIT_AREA_WIDTH; // default width
|
|
74
|
-
newEditor.editorType = _constants.COMMENT_EDITOR;
|
|
75
|
-
return newEditor;
|
|
76
|
-
}, [document]);
|
|
77
|
-
const updateValue = (0, _react.useCallback)(value => {
|
|
78
|
-
if (!value || value.trim() === '') return;
|
|
79
|
-
if (!content) return insertContent(value);
|
|
80
|
-
updateContent && updateContent(value);
|
|
81
|
-
}, [content, insertContent, updateContent]);
|
|
82
|
-
const onSubmit = (0, _react.useCallback)(event => {
|
|
83
|
-
event && event.stopPropagation();
|
|
84
|
-
const mdString = (0, _slateToMd.default)(editor.children);
|
|
85
|
-
updateValue(mdString);
|
|
86
|
-
addParticipants(userInfo.username);
|
|
87
|
-
editor.children = [(0, _core.generateEmptyElement)(_constants2.PARAGRAPH, {
|
|
88
|
-
placeholder
|
|
89
|
-
})];
|
|
90
|
-
_slate.Transforms.select(editor, _slate.Editor.start(editor, []));
|
|
91
|
-
onContentChange && onContentChange(null);
|
|
92
|
-
closeComment && closeComment();
|
|
93
|
-
}, [editor, updateValue, addParticipants, userInfo.username, placeholder, onContentChange, closeComment]);
|
|
94
|
-
const onSubmitByEnterKey = (0, _react.useCallback)(event => {
|
|
95
|
-
if (!_slateReact.ReactEditor.isFocused(editor)) return;
|
|
96
|
-
onSubmit(event);
|
|
97
|
-
}, [editor, onSubmit]);
|
|
98
|
-
(0, _react.useEffect)(() => {
|
|
99
|
-
const eventBus = _eventBus.default.getInstance();
|
|
100
|
-
const unsubscribePostComment = eventBus.subscribe(_constants.INTERNAL_EVENT.COMMENT_EDITOR_POST_COMMENT, onSubmitByEnterKey);
|
|
101
|
-
return () => {
|
|
102
|
-
unsubscribePostComment();
|
|
103
|
-
};
|
|
104
|
-
}, [onSubmitByEnterKey]);
|
|
105
|
-
const onCancel = (0, _react.useCallback)(event => {
|
|
106
|
-
event.stopPropagation();
|
|
107
|
-
const {
|
|
108
|
-
type: eventType,
|
|
109
|
-
keyCode,
|
|
110
|
-
target
|
|
111
|
-
} = event;
|
|
112
|
-
if (eventType === 'keydown' && keyCode !== _constants.KeyCodes.Esc) return;
|
|
113
|
-
if (eventType === 'click') {
|
|
114
|
-
const isSdocContentWrapper = target.classList.contains('sdoc-content-wrapper');
|
|
115
|
-
const listContainer = window.document.querySelector('#global-comment-list-container');
|
|
116
|
-
const resizeContainer = window.document.querySelector('.sdoc-comment-resize-handler');
|
|
117
|
-
const isClickOnListContainer = listContainer && listContainer.contains(target);
|
|
118
|
-
const isClickOnCommentEditorContainer = commentWrapperRef.current.contains(target);
|
|
119
|
-
const isClickResizeContainer = resizeContainer && resizeContainer.contains(target);
|
|
120
|
-
const isPreventCancel = isClickOnListContainer || isClickOnCommentEditorContainer || isClickResizeContainer || isSdocContentWrapper;
|
|
121
|
-
if (isPreventCancel) return;
|
|
122
|
-
}
|
|
123
|
-
setIsEditing && setIsEditing(false);
|
|
124
|
-
hiddenComment && hiddenComment(false);
|
|
125
|
-
if (onContentChange) {
|
|
126
|
-
if (editor.children.find(n => _slate.Node.string(n).trim())) {
|
|
127
|
-
onContentChange((0, _slateToMd.default)(editor.children));
|
|
128
|
-
} else {
|
|
129
|
-
onContentChange(null);
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
133
|
-
}, [setIsEditing]);
|
|
134
|
-
(0, _react.useEffect)(() => {
|
|
135
|
-
let children = (0, _mdToSlate.default)(content);
|
|
136
|
-
if (commentContent) {
|
|
137
|
-
children = (0, _mdToSlate.default)(commentContent);
|
|
138
|
-
}
|
|
139
|
-
editor.children = children;
|
|
140
|
-
_slate.Transforms.select(editor, _slate.Editor.end(editor, []));
|
|
141
|
-
}, [editor, content, commentContent]);
|
|
142
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
143
|
-
className: (0, _classnames.default)('comment-editor-wrapper', className),
|
|
144
|
-
ref: commentWrapperRef
|
|
145
|
-
}, type === 'comment' && !hiddenUserInfo && /*#__PURE__*/_react.default.createElement("div", {
|
|
146
|
-
className: "comment-editor-user-info"
|
|
147
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
148
|
-
className: "comment-editor-user-img"
|
|
149
|
-
}, /*#__PURE__*/_react.default.createElement("img", {
|
|
150
|
-
src: userInfo.avatar_url,
|
|
151
|
-
alt: "",
|
|
152
|
-
height: "100%",
|
|
153
|
-
width: "100%"
|
|
154
|
-
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
155
|
-
className: "comment-editor-user-name"
|
|
156
|
-
}, userInfo.name)), /*#__PURE__*/_react.default.createElement(_sdocCommentEditor.default, {
|
|
157
|
-
editor: editor,
|
|
158
|
-
type: type,
|
|
159
|
-
document: document,
|
|
160
|
-
onSubmit: onSubmit,
|
|
161
|
-
submitBtnText: t(submitTip),
|
|
162
|
-
onCancel: onCancel
|
|
163
|
-
}));
|
|
164
|
-
};
|
|
165
|
-
var _default = exports.default = CommentEditor;
|
|
@@ -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 _mdToHtml = _interopRequireDefault(require("../../slate-convert/md-to-html"));
|
|
16
|
-
var _constants = require("../constants");
|
|
17
|
-
var _helper = require("../helper");
|
|
18
|
-
var _notificationHooks = require("../hooks/notification-hooks");
|
|
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, _notificationHooks.useNotificationContext)();
|
|
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,156 +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 _mdToHtml = _interopRequireDefault(require("../../slate-convert/md-to-html"));
|
|
16
|
-
var _notificationHooks = require("../hooks/notification-hooks");
|
|
17
|
-
var _commentEditor = _interopRequireDefault(require("./comment-editor"));
|
|
18
|
-
const CommentItemContent = _ref => {
|
|
19
|
-
let {
|
|
20
|
-
isActive,
|
|
21
|
-
container,
|
|
22
|
-
comment,
|
|
23
|
-
updateComment,
|
|
24
|
-
updateCommentState,
|
|
25
|
-
onDeleteComment,
|
|
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, _notificationHooks.useNotificationContext)();
|
|
34
|
-
const [editorContent, setEditorContent] = (0, _react.useState)('');
|
|
35
|
-
const onEditToggle = (0, _react.useCallback)(event => {
|
|
36
|
-
event.stopPropagation();
|
|
37
|
-
setIsEditing(true);
|
|
38
|
-
}, []);
|
|
39
|
-
const isUnseen = notificationsInfo.notifications_map[`sdoc_notification_${comment.id}`] ? true : false;
|
|
40
|
-
(0, _react.useEffect)(() => {
|
|
41
|
-
transferHtml(comment.comment);
|
|
42
|
-
}, [comment.comment]);
|
|
43
|
-
const transferHtml = async mdString => {
|
|
44
|
-
const htmlString = await _mdToHtml.default.process(mdString);
|
|
45
|
-
setEditorContent(String(htmlString));
|
|
46
|
-
};
|
|
47
|
-
const onDeleteToggle = (0, _react.useCallback)(event => {
|
|
48
|
-
event.stopPropagation();
|
|
49
|
-
onDeleteComment(true);
|
|
50
|
-
}, [onDeleteComment]);
|
|
51
|
-
const updateContent = (0, _react.useCallback)(content => {
|
|
52
|
-
const commentId = comment.id;
|
|
53
|
-
if (comment.comment !== content) {
|
|
54
|
-
const time = (0, _dayjs.default)().format('YYYY-MM-DD HH:mm:ss');
|
|
55
|
-
const newComment = {
|
|
56
|
-
comment: content,
|
|
57
|
-
detail: {
|
|
58
|
-
...comment.detail,
|
|
59
|
-
comment: content
|
|
60
|
-
},
|
|
61
|
-
updated_at: time
|
|
62
|
-
};
|
|
63
|
-
updateComment(commentId, newComment);
|
|
64
|
-
}
|
|
65
|
-
setIsEditing(false);
|
|
66
|
-
}, [comment, updateComment]);
|
|
67
|
-
const updateCommentResolved = (0, _react.useCallback)(state => {
|
|
68
|
-
const commentId = comment.id;
|
|
69
|
-
const newComment = {
|
|
70
|
-
resolved: state
|
|
71
|
-
};
|
|
72
|
-
updateCommentState(commentId, newComment);
|
|
73
|
-
}, [comment.id, updateCommentState]);
|
|
74
|
-
const markAsResolved = (0, _react.useCallback)(event => {
|
|
75
|
-
event.stopPropagation();
|
|
76
|
-
updateCommentResolved(true);
|
|
77
|
-
}, [updateCommentResolved]);
|
|
78
|
-
const resubmit = (0, _react.useCallback)(event => {
|
|
79
|
-
event.stopPropagation();
|
|
80
|
-
updateCommentResolved(false);
|
|
81
|
-
}, [updateCommentResolved]);
|
|
82
|
-
const menuId = (0, _react.useMemo)(() => `comment_${comment.id}`, [comment]);
|
|
83
|
-
const user = _context.default.getUserInfo();
|
|
84
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
85
|
-
className: "comment-item"
|
|
86
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
87
|
-
className: "comment-header"
|
|
88
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
89
|
-
className: "comment-author"
|
|
90
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
91
|
-
className: "comment-author__avatar"
|
|
92
|
-
}, /*#__PURE__*/_react.default.createElement("img", {
|
|
93
|
-
alt: "",
|
|
94
|
-
src: comment.avatar_url
|
|
95
|
-
})), /*#__PURE__*/_react.default.createElement("span", {
|
|
96
|
-
className: "comment-author__info"
|
|
97
|
-
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
98
|
-
className: "name"
|
|
99
|
-
}, comment.user_name), /*#__PURE__*/_react.default.createElement("span", {
|
|
100
|
-
className: "time"
|
|
101
|
-
}, (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", {
|
|
102
|
-
className: "comment-success-resolved sdocfont sdoc-mark-as-resolved"
|
|
103
|
-
})))), isUnseen && !isActive && /*#__PURE__*/_react.default.createElement("span", {
|
|
104
|
-
className: "sdoc-unread-message-tip"
|
|
105
|
-
}), 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", {
|
|
106
|
-
className: "d-flex comment-item-operation-wrapper"
|
|
107
|
-
}, (!comment.resolved || (comment === null || comment === void 0 ? void 0 : comment.isContextComment)) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
108
|
-
id: `tooltip_${menuId}`,
|
|
109
|
-
className: "comment-operation mr-2",
|
|
110
|
-
onClick: markAsResolved
|
|
111
|
-
}, /*#__PURE__*/_react.default.createElement("i", {
|
|
112
|
-
className: "sdocfont sdoc-confirm"
|
|
113
|
-
})), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
114
|
-
target: `tooltip_${menuId}`
|
|
115
|
-
}, t('Resolved_tip'))), /*#__PURE__*/_react.default.createElement(_reactstrap.Dropdown, {
|
|
116
|
-
id: targetId,
|
|
117
|
-
isOpen: isDropdownOpen,
|
|
118
|
-
toggle: () => setDropdownOpen(!isDropdownOpen)
|
|
119
|
-
}, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownToggle, {
|
|
120
|
-
tag: "div",
|
|
121
|
-
className: "comment-operation"
|
|
122
|
-
}, /*#__PURE__*/_react.default.createElement("i", {
|
|
123
|
-
className: "sdocfont sdoc-more"
|
|
124
|
-
})), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownMenu, {
|
|
125
|
-
className: "sdoc-dropdown-menu",
|
|
126
|
-
container: container
|
|
127
|
-
}, /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
|
|
128
|
-
className: "sdoc-dropdown-menu-item",
|
|
129
|
-
tag: "div",
|
|
130
|
-
onClick: onEditToggle
|
|
131
|
-
}, t('Edit')), /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
|
|
132
|
-
className: "sdoc-dropdown-menu-item",
|
|
133
|
-
tag: "div",
|
|
134
|
-
onClick: onDeleteToggle
|
|
135
|
-
}, t('Delete')), !comment.resolved && /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
|
|
136
|
-
className: "sdoc-dropdown-menu-item",
|
|
137
|
-
tag: "div",
|
|
138
|
-
onClick: markAsResolved
|
|
139
|
-
}, t('Mark_as_Resolved')), comment.resolved && /*#__PURE__*/_react.default.createElement(_reactstrap.DropdownItem, {
|
|
140
|
-
className: "sdoc-dropdown-menu-item",
|
|
141
|
-
tag: "div",
|
|
142
|
-
onClick: resubmit
|
|
143
|
-
}, t('Resubmit')))))), /*#__PURE__*/_react.default.createElement("div", {
|
|
144
|
-
className: "comment-content"
|
|
145
|
-
}, !isEditing && /*#__PURE__*/_react.default.createElement("div", {
|
|
146
|
-
dangerouslySetInnerHTML: {
|
|
147
|
-
__html: editorContent
|
|
148
|
-
}
|
|
149
|
-
})), isEditing && /*#__PURE__*/_react.default.createElement(_commentEditor.default, {
|
|
150
|
-
className: "pb-3",
|
|
151
|
-
content: comment.comment,
|
|
152
|
-
updateContent: updateContent,
|
|
153
|
-
setIsEditing: setIsEditing
|
|
154
|
-
}));
|
|
155
|
-
};
|
|
156
|
-
var _default = exports.default = (0, _reactI18next.withTranslation)('sdoc-editor')(CommentItemContent);
|