@seafile/comment-editor 0.0.1-alpha.0 → 0.0.1-alpha.2
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 +2 -2
- package/dist/basic-sdk/assets/css/sdoc-comment-editor-plugin.css +4 -4
- package/dist/basic-sdk/comment/components/comment-all-participants/index.css +8 -8
- package/dist/basic-sdk/comment/components/comment-editor.js +123 -7
- package/dist/basic-sdk/comment/components/comment-item-collapse-wrapper.js +2 -2
- package/dist/basic-sdk/comment/components/comment-item-content.js +11 -13
- package/dist/basic-sdk/comment/components/comment-item-wrapper.js +32 -36
- package/dist/basic-sdk/comment/components/comment-list.css +4 -4
- package/dist/basic-sdk/comment/components/comment-participants-editor/index.js +2 -2
- package/dist/basic-sdk/comment/components/global-comment/global-comment-body-header.js +5 -4
- package/dist/basic-sdk/comment/components/global-comment/global-comment-header.js +11 -4
- package/dist/basic-sdk/comment/components/global-comment/index.css +56 -54
- package/dist/basic-sdk/comment/components/global-comment/index.js +41 -36
- package/dist/basic-sdk/comment/hooks/comment-hooks/use-comment-mount.js +3 -4
- package/dist/basic-sdk/comment/hooks/notification-hooks/use-notification-mount.js +2 -6
- package/dist/basic-sdk/comment/index.js +2 -48
- package/dist/basic-sdk/constants/index.js +1 -2
- package/dist/basic-sdk/context.js +8 -8
- 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/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 +218 -0
- package/dist/basic-sdk/index.js +12 -32
- package/dist/basic-sdk/{right-panel → layout/comment-layout}/index.css +2 -2
- package/dist/basic-sdk/{right-panel → layout/comment-layout}/index.js +29 -28
- package/dist/basic-sdk/layout/comment-layout/resize-width/index.css +38 -0
- package/dist/basic-sdk/{right-panel → layout/comment-layout}/resize-width/index.js +3 -3
- package/dist/basic-sdk/layout/index.js +0 -7
- package/dist/index.js +12 -0
- package/dist/pages/seafile-comment-editor.js +19 -52
- package/package.json +2 -1
- package/dist/basic-sdk/comment/components/global-comment/global-comment-editor.js +0 -36
- 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/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/right-panel/resize-width/index.css +0 -38
- package/dist/hooks/index.js +0 -12
- package/dist/hooks/use-document.js +0 -75
|
@@ -9,10 +9,9 @@ exports.default = void 0;
|
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _slate = require("@seafile/slate");
|
|
11
11
|
var _constants = require("../../../../comment/constants");
|
|
12
|
-
var _useParticipants = require("../../../../comment/hooks/use-participants");
|
|
13
12
|
var _utils = require("../../../../comment/utils");
|
|
14
13
|
var _constants2 = require("../../../../constants");
|
|
15
|
-
var
|
|
14
|
+
var _useComment = require("../../../../hooks/use-comment");
|
|
16
15
|
var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
|
|
17
16
|
var _mouseEvent = require("../../../../utils/mouse-event");
|
|
18
17
|
var _commons = require("../../../commons");
|
|
@@ -27,12 +26,10 @@ const ParticipantPopover = _ref => {
|
|
|
27
26
|
} = _ref;
|
|
28
27
|
const collaboratorsPopoverRef = (0, _react.useRef)(null);
|
|
29
28
|
const {
|
|
30
|
-
collaborators
|
|
31
|
-
} = (0, _useCollaborators.useCollaborators)();
|
|
32
|
-
const {
|
|
29
|
+
collaborators,
|
|
33
30
|
addParticipants,
|
|
34
31
|
participants
|
|
35
|
-
} = (0,
|
|
32
|
+
} = (0, _useComment.useComment)();
|
|
36
33
|
const [searchedCollaborators, setSearchedCollaborators] = (0, _react.useState)([]);
|
|
37
34
|
const [activeCollaboratorIndex, setActiveCollaboratorIndex] = (0, _react.useState)(-1);
|
|
38
35
|
const [validCollaborators, setValidCollaborators] = (0, _react.useState)([]);
|
|
@@ -21,7 +21,7 @@ const RenderCommentEditorCustomRenderElement = props => {
|
|
|
21
21
|
const parentNode = (0, _core.getParentNode)(editor.children, element.id);
|
|
22
22
|
const _props = {
|
|
23
23
|
...props,
|
|
24
|
-
className: '
|
|
24
|
+
className: 'comment-editor-paragraph'
|
|
25
25
|
};
|
|
26
26
|
if (parentNode && parentNode.type === _constants.LIST_ITEM) {
|
|
27
27
|
const [renderParagraph] = _plugins.ParagraphPlugin.renderElements;
|
|
@@ -27,9 +27,9 @@ const CommentEditorToolbar = _ref => {
|
|
|
27
27
|
(0, _useSelectionUpdate.default)();
|
|
28
28
|
const eventBus = _eventBus.default.getInstance();
|
|
29
29
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
30
|
-
className: "
|
|
30
|
+
className: "comment-editor-toolbar"
|
|
31
31
|
}, /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, {
|
|
32
|
-
className: "menu-group
|
|
32
|
+
className: "menu-group comment-editor-menu-group"
|
|
33
33
|
}, /*#__PURE__*/_react.default.createElement(_comemntEditorMenu.default, {
|
|
34
34
|
editor: editor,
|
|
35
35
|
readonly: readonly
|
|
@@ -53,7 +53,7 @@ const CommentEditorToolbar = _ref => {
|
|
|
53
53
|
readonly: readonly,
|
|
54
54
|
eventBus: eventBus
|
|
55
55
|
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
56
|
-
className: "
|
|
56
|
+
className: "comment-editor-toolbar-right"
|
|
57
57
|
}, /*#__PURE__*/_react.default.createElement(_postComment.default, {
|
|
58
58
|
editor: editor,
|
|
59
59
|
onSubmit: onSubmit,
|
|
@@ -25,12 +25,12 @@ const PostCommentBtn = _ref => {
|
|
|
25
25
|
}, [onCancel]);
|
|
26
26
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
27
27
|
role: "button",
|
|
28
|
-
id: "
|
|
28
|
+
id: "comment-editor-comment-btn"
|
|
29
29
|
}, /*#__PURE__*/_react.default.createElement("i", {
|
|
30
30
|
className: "sdocfont sdoc-save sdoc-comment-btn",
|
|
31
31
|
onClick: onSubmit
|
|
32
32
|
}), /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
33
|
-
target: "
|
|
33
|
+
target: "comment-editor-comment-btn"
|
|
34
34
|
}, submitBtnText));
|
|
35
35
|
};
|
|
36
36
|
var _default = exports.default = PostCommentBtn;
|
|
@@ -0,0 +1,218 @@
|
|
|
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.useComment = exports.CommentProvider = void 0;
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _reactI18next = require("react-i18next");
|
|
11
|
+
var _constants = require("../comment/constants");
|
|
12
|
+
var _useCommentMount = require("../comment/hooks/comment-hooks/use-comment-mount");
|
|
13
|
+
var _notificationHooks = require("../comment/hooks/notification-hooks");
|
|
14
|
+
var _commentReducer = require("../comment/reducer/comment-reducer");
|
|
15
|
+
var _notificationReducer = require("../comment/reducer/notification-reducer");
|
|
16
|
+
var _utils = require("../comment/utils");
|
|
17
|
+
var _toast = _interopRequireDefault(require("../components/toast"));
|
|
18
|
+
var _constants2 = require("../constants");
|
|
19
|
+
var _model = require("../model");
|
|
20
|
+
var _commonUtils = require("../utils/common-utils");
|
|
21
|
+
var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
|
|
22
|
+
const CommentContext = /*#__PURE__*/_react.default.createContext(null);
|
|
23
|
+
const CommentProvider = _ref => {
|
|
24
|
+
let {
|
|
25
|
+
children,
|
|
26
|
+
editor,
|
|
27
|
+
pluginName = '',
|
|
28
|
+
className = '',
|
|
29
|
+
pluginEventBus,
|
|
30
|
+
pluginEvent,
|
|
31
|
+
api,
|
|
32
|
+
onCloseCommentPanel
|
|
33
|
+
} = _ref;
|
|
34
|
+
const {
|
|
35
|
+
t
|
|
36
|
+
} = (0, _reactI18next.useTranslation)('sdoc-editor');
|
|
37
|
+
const [collaborators, setCollaborators] = (0, _react.useState)([]);
|
|
38
|
+
const [participants, setParticipants] = (0, _react.useState)([]);
|
|
39
|
+
const [commentType, setCommentType] = (0, _react.useState)(_constants.COMMENT_TYPES.ALL);
|
|
40
|
+
const [commentList, setCommentList] = (0, _react.useState)([]);
|
|
41
|
+
const [commentsInfo, dispatch] = (0, _react.useReducer)(_commentReducer.commentReducer, _commentReducer.initCommentsInfo);
|
|
42
|
+
(0, _useCommentMount.useCommentsMount)(dispatch, api);
|
|
43
|
+
const [notificationsInfo, notificationsDispatch] = (0, _react.useReducer)(_notificationReducer.notificationReducer, _notificationReducer.initNotificationsInfo);
|
|
44
|
+
(0, _notificationHooks.useNotificationsMount)(dispatch, api, collaborators);
|
|
45
|
+
(0, _react.useEffect)(() => {
|
|
46
|
+
if (Object.keys(commentsInfo.element_comments_map).length) {
|
|
47
|
+
editor.element_comments_map = commentsInfo.element_comments_map;
|
|
48
|
+
}
|
|
49
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
50
|
+
}, [commentsInfo.element_comments_map]);
|
|
51
|
+
(0, _react.useEffect)(() => {
|
|
52
|
+
editor.notifications_map = {
|
|
53
|
+
...notificationsInfo.notifications_map
|
|
54
|
+
};
|
|
55
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
56
|
+
}, [notificationsInfo]);
|
|
57
|
+
(0, _react.useEffect)(() => {
|
|
58
|
+
const {
|
|
59
|
+
comment_list
|
|
60
|
+
} = commentsInfo;
|
|
61
|
+
if (commentType === _constants.COMMENT_TYPES.ALL) {
|
|
62
|
+
const commentList = comment_list.map(item => {
|
|
63
|
+
item.replies = item.replies.filter(reply => !['True', 'False'].includes(reply.reply));
|
|
64
|
+
return item;
|
|
65
|
+
});
|
|
66
|
+
setCommentList(commentList);
|
|
67
|
+
} else if (commentType === _constants.COMMENT_TYPES.RESOLVED) {
|
|
68
|
+
const commentList = comment_list.filter(item => item.resolved);
|
|
69
|
+
setCommentList(commentList);
|
|
70
|
+
} else if (commentType === _constants.COMMENT_TYPES.UNRESOLVED) {
|
|
71
|
+
const commentList = comment_list.filter(item => !item.resolved);
|
|
72
|
+
setCommentList(commentList);
|
|
73
|
+
} else if (commentType === _constants.COMMENT_TYPES.DOC) {
|
|
74
|
+
const commentList = comment_list.filter(comment => comment.detail.element_id === _constants.DOC_COMMENT_ELEMENT_ID);
|
|
75
|
+
setCommentList(commentList);
|
|
76
|
+
}
|
|
77
|
+
}, [commentType, commentsInfo]);
|
|
78
|
+
|
|
79
|
+
// Participants
|
|
80
|
+
const updateLocalParticipants = (0, _react.useCallback)(function () {
|
|
81
|
+
let added = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
82
|
+
if (!Array.isArray(added) || added.length === 0) return;
|
|
83
|
+
let newParticipants = participants.slice(0);
|
|
84
|
+
added.forEach(participant => {
|
|
85
|
+
const newParticipant = new _model.User(participant);
|
|
86
|
+
if (!newParticipants.find(item => item.username === newParticipant.username)) {
|
|
87
|
+
newParticipants.push(newParticipant);
|
|
88
|
+
}
|
|
89
|
+
});
|
|
90
|
+
setParticipants(newParticipants);
|
|
91
|
+
}, [participants]);
|
|
92
|
+
const deleteLocalParticipant = (0, _react.useCallback)(email => {
|
|
93
|
+
if (!participants.find(participant => participant.username === email)) return;
|
|
94
|
+
let newParticipants = participants.slice(0);
|
|
95
|
+
newParticipants = newParticipants.filter(participant => participant.username !== email);
|
|
96
|
+
setParticipants(newParticipants);
|
|
97
|
+
}, [participants]);
|
|
98
|
+
const addParticipants = (0, _react.useCallback)(otherEmail => {
|
|
99
|
+
if (participants.find(participant => participant.username === otherEmail)) return;
|
|
100
|
+
api.addParticipants([otherEmail]).then(res => {
|
|
101
|
+
const {
|
|
102
|
+
success
|
|
103
|
+
} = res.data;
|
|
104
|
+
updateLocalParticipants(success);
|
|
105
|
+
}).catch(error => {
|
|
106
|
+
const errorMessage = (0, _commonUtils.getErrorMsg)(error);
|
|
107
|
+
_toast.default.danger(t(errorMessage));
|
|
108
|
+
});
|
|
109
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
110
|
+
}, [updateLocalParticipants, participants]);
|
|
111
|
+
const deleteParticipant = (0, _react.useCallback)(email => {
|
|
112
|
+
if (!participants.find(participant => participant.username === email)) return;
|
|
113
|
+
api.deleteParticipants(email).then(res => {
|
|
114
|
+
let newParticipants = participants.slice(0);
|
|
115
|
+
newParticipants = newParticipants.filter(participant => participant.username !== email);
|
|
116
|
+
setParticipants(newParticipants);
|
|
117
|
+
}).catch(error => {
|
|
118
|
+
const errorMessage = (0, _commonUtils.getErrorMsg)(error);
|
|
119
|
+
_toast.default.danger(t(errorMessage));
|
|
120
|
+
});
|
|
121
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
122
|
+
}, [participants]);
|
|
123
|
+
|
|
124
|
+
// Notifications
|
|
125
|
+
const deleteUnseenNotifications = (0, _react.useCallback)(comment => {
|
|
126
|
+
let unseenCommentIds = [];
|
|
127
|
+
let unseenNotificationKeys = [];
|
|
128
|
+
const commentNotificationKey = (0, _utils.generatorNotificationKey)(comment.id);
|
|
129
|
+
const commentNotification = notificationsInfo.notifications_map[commentNotificationKey];
|
|
130
|
+
if (commentNotification) {
|
|
131
|
+
unseenNotificationKeys.push(commentNotification.key);
|
|
132
|
+
unseenCommentIds.push(commentNotification.id);
|
|
133
|
+
}
|
|
134
|
+
Array.isArray(comment.replies) && comment.replies.forEach(reply => {
|
|
135
|
+
const replyNotificationKey = (0, _utils.generatorNotificationKey)(reply.comment_id, reply.id);
|
|
136
|
+
const replyNotification = notificationsInfo.notifications_map[replyNotificationKey];
|
|
137
|
+
if (replyNotification) {
|
|
138
|
+
unseenNotificationKeys.push(replyNotification.key);
|
|
139
|
+
unseenCommentIds.push(replyNotification.id);
|
|
140
|
+
}
|
|
141
|
+
});
|
|
142
|
+
api.deleteUnseenNotifications(unseenCommentIds).then(res => {
|
|
143
|
+
notificationsDispatch({
|
|
144
|
+
type: _constants.DOC_NOTIFICATION_REDUCER_TYPE.DEL,
|
|
145
|
+
payload: unseenNotificationKeys
|
|
146
|
+
});
|
|
147
|
+
}).catch(error => {
|
|
148
|
+
//
|
|
149
|
+
});
|
|
150
|
+
}, [api, notificationsInfo.notifications_map]);
|
|
151
|
+
|
|
152
|
+
// Mount
|
|
153
|
+
(0, _react.useEffect)(() => {
|
|
154
|
+
// get participants
|
|
155
|
+
api.listParticipants().then(res => {
|
|
156
|
+
const participants = res.data.participant_list;
|
|
157
|
+
updateLocalParticipants(participants);
|
|
158
|
+
}).catch(error => {
|
|
159
|
+
console.log(error);
|
|
160
|
+
});
|
|
161
|
+
|
|
162
|
+
// get collaborators
|
|
163
|
+
api.listRelatedUsers().then(res => {
|
|
164
|
+
const collaborators = [];
|
|
165
|
+
res.data.related_users.forEach(user => {
|
|
166
|
+
const collaborator = new _model.User(user);
|
|
167
|
+
collaborators.push(collaborator);
|
|
168
|
+
});
|
|
169
|
+
setCollaborators(collaborators);
|
|
170
|
+
}).catch(error => {
|
|
171
|
+
console.log(error);
|
|
172
|
+
});
|
|
173
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
174
|
+
}, []);
|
|
175
|
+
|
|
176
|
+
// Listening
|
|
177
|
+
(0, _react.useEffect)(() => {
|
|
178
|
+
const eventBus = _eventBus.default.getInstance();
|
|
179
|
+
const unsubscribeParticipantAdded = eventBus.subscribe(_constants2.INTERNAL_EVENT.PARTICIPANT_ADDED, updateLocalParticipants);
|
|
180
|
+
const unsubscribeParticipantRemoved = eventBus.subscribe(_constants2.INTERNAL_EVENT.PARTICIPANT_REMOVED, deleteLocalParticipant);
|
|
181
|
+
return () => {
|
|
182
|
+
unsubscribeParticipantAdded();
|
|
183
|
+
unsubscribeParticipantRemoved();
|
|
184
|
+
};
|
|
185
|
+
}, [updateLocalParticipants, deleteLocalParticipant]);
|
|
186
|
+
return /*#__PURE__*/_react.default.createElement(CommentContext.Provider, {
|
|
187
|
+
value: {
|
|
188
|
+
pluginName,
|
|
189
|
+
className,
|
|
190
|
+
api,
|
|
191
|
+
pluginEventBus,
|
|
192
|
+
pluginEvent,
|
|
193
|
+
commentsInfo,
|
|
194
|
+
commentType,
|
|
195
|
+
commentList,
|
|
196
|
+
dispatch,
|
|
197
|
+
setCommentType,
|
|
198
|
+
onCloseCommentPanel,
|
|
199
|
+
collaborators,
|
|
200
|
+
notificationsInfo,
|
|
201
|
+
deleteUnseenNotifications,
|
|
202
|
+
addParticipants,
|
|
203
|
+
deleteParticipant,
|
|
204
|
+
participants
|
|
205
|
+
}
|
|
206
|
+
}, children);
|
|
207
|
+
};
|
|
208
|
+
exports.CommentProvider = CommentProvider;
|
|
209
|
+
const useComment = () => {
|
|
210
|
+
const context = (0, _react.useContext)(CommentContext);
|
|
211
|
+
if (!context) {
|
|
212
|
+
throw new Error('\'CommentContext\' is null');
|
|
213
|
+
}
|
|
214
|
+
return {
|
|
215
|
+
...context
|
|
216
|
+
};
|
|
217
|
+
};
|
|
218
|
+
exports.useComment = useComment;
|
package/dist/basic-sdk/index.js
CHANGED
|
@@ -4,10 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
Object.defineProperty(exports, "
|
|
7
|
+
Object.defineProperty(exports, "CommentLayout", {
|
|
8
8
|
enumerable: true,
|
|
9
9
|
get: function () {
|
|
10
|
-
return
|
|
10
|
+
return _commentLayout.default;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
Object.defineProperty(exports, "CommentProvider", {
|
|
14
|
+
enumerable: true,
|
|
15
|
+
get: function () {
|
|
16
|
+
return _useComment.CommentProvider;
|
|
11
17
|
}
|
|
12
18
|
});
|
|
13
19
|
Object.defineProperty(exports, "DropdownMenuItem", {
|
|
@@ -58,36 +64,12 @@ Object.defineProperty(exports, "MenuShortcutPrompt", {
|
|
|
58
64
|
return _menuShortcutIndicator.default;
|
|
59
65
|
}
|
|
60
66
|
});
|
|
61
|
-
Object.defineProperty(exports, "Provider", {
|
|
62
|
-
enumerable: true,
|
|
63
|
-
get: function () {
|
|
64
|
-
return _provider.default;
|
|
65
|
-
}
|
|
66
|
-
});
|
|
67
|
-
Object.defineProperty(exports, "RightPanel", {
|
|
68
|
-
enumerable: true,
|
|
69
|
-
get: function () {
|
|
70
|
-
return _rightPanel.default;
|
|
71
|
-
}
|
|
72
|
-
});
|
|
73
|
-
Object.defineProperty(exports, "SDocEditor", {
|
|
74
|
-
enumerable: true,
|
|
75
|
-
get: function () {
|
|
76
|
-
return _sdocEditor.default;
|
|
77
|
-
}
|
|
78
|
-
});
|
|
79
67
|
Object.defineProperty(exports, "Tooltip", {
|
|
80
68
|
enumerable: true,
|
|
81
69
|
get: function () {
|
|
82
70
|
return _tooltip.default;
|
|
83
71
|
}
|
|
84
72
|
});
|
|
85
|
-
Object.defineProperty(exports, "WIKI_EDITOR_EDIT_AREA_WIDTH", {
|
|
86
|
-
enumerable: true,
|
|
87
|
-
get: function () {
|
|
88
|
-
return _constants.WIKI_EDITOR_EDIT_AREA_WIDTH;
|
|
89
|
-
}
|
|
90
|
-
});
|
|
91
73
|
Object.defineProperty(exports, "context", {
|
|
92
74
|
enumerable: true,
|
|
93
75
|
get: function () {
|
|
@@ -154,10 +136,10 @@ Object.defineProperty(exports, "toaster", {
|
|
|
154
136
|
return _toast.default;
|
|
155
137
|
}
|
|
156
138
|
});
|
|
157
|
-
Object.defineProperty(exports, "
|
|
139
|
+
Object.defineProperty(exports, "useComment", {
|
|
158
140
|
enumerable: true,
|
|
159
141
|
get: function () {
|
|
160
|
-
return
|
|
142
|
+
return _useComment.useComment;
|
|
161
143
|
}
|
|
162
144
|
});
|
|
163
145
|
Object.defineProperty(exports, "withNodeId", {
|
|
@@ -172,20 +154,18 @@ Object.defineProperty(exports, "withSocketIO", {
|
|
|
172
154
|
return _socket.withSocketIO;
|
|
173
155
|
}
|
|
174
156
|
});
|
|
175
|
-
var _provider = _interopRequireDefault(require("./comment/provider"));
|
|
176
157
|
var _fileLoading = _interopRequireDefault(require("./components/file-loading"));
|
|
177
158
|
var _loading = _interopRequireDefault(require("./components/loading"));
|
|
178
159
|
var _toast = _interopRequireDefault(require("./components/toast"));
|
|
179
160
|
var _tooltip = _interopRequireDefault(require("./components/tooltip"));
|
|
180
161
|
var _constants = require("./constants");
|
|
181
162
|
var _context = _interopRequireDefault(require("./context"));
|
|
182
|
-
var _sdocEditor = _interopRequireDefault(require("./editor/sdoc-editor"));
|
|
183
163
|
var _extension = require("./extension");
|
|
184
164
|
var _dropdownMenuItem = _interopRequireDefault(require("./extension/commons/dropdown-menu-item"));
|
|
185
165
|
var _menuShortcutIndicator = _interopRequireDefault(require("./extension/commons/menu-shortcut-indicator"));
|
|
186
|
-
var
|
|
166
|
+
var _useComment = require("./hooks/use-comment");
|
|
167
|
+
var _commentLayout = _interopRequireDefault(require("./layout/comment-layout"));
|
|
187
168
|
var _nodeId = _interopRequireDefault(require("./node-id"));
|
|
188
|
-
var _rightPanel = _interopRequireDefault(require("./right-panel"));
|
|
189
169
|
var _slateConvert = require("./slate-convert");
|
|
190
170
|
var _socket = require("./socket");
|
|
191
171
|
var _commonUtils = require("./utils/common-utils");
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
.comment-layout-wrapper {
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: row;
|
|
4
4
|
max-width: 620px;
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
right: 0;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
.
|
|
10
|
+
.comment-layout-wrapper .sdoc-content-right-panel {
|
|
11
11
|
width: 100%;
|
|
12
12
|
height: 100%;
|
|
13
13
|
overflow: hidden;
|
|
@@ -7,22 +7,28 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
-
var _comment = _interopRequireDefault(require("
|
|
11
|
-
var _constants = require("
|
|
12
|
-
var
|
|
13
|
-
var
|
|
10
|
+
var _comment = _interopRequireDefault(require("../../comment"));
|
|
11
|
+
var _constants = require("../../constants");
|
|
12
|
+
var _useComment = require("../../hooks/use-comment");
|
|
13
|
+
var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
|
|
14
|
+
var _localStorageUtils = _interopRequireDefault(require("../../utils/local-storage-utils"));
|
|
14
15
|
var _resizeWidth = _interopRequireDefault(require("./resize-width"));
|
|
15
16
|
require("./index.css");
|
|
16
17
|
const MIN_PANEL_WIDTH = 360;
|
|
17
18
|
const MAX_PANEL_WIDTH = 620;
|
|
18
|
-
const
|
|
19
|
+
const CommentLayout = _ref => {
|
|
19
20
|
let {
|
|
20
21
|
editor
|
|
21
22
|
} = _ref;
|
|
22
|
-
const
|
|
23
|
+
const {
|
|
24
|
+
className,
|
|
25
|
+
pluginName,
|
|
26
|
+
pluginEventBus,
|
|
27
|
+
pluginEvent
|
|
28
|
+
} = (0, _useComment.useComment)();
|
|
23
29
|
const [width, setWidth] = (0, _react.useState)(MIN_PANEL_WIDTH);
|
|
24
30
|
const panelWrapperStyle = (0, _react.useMemo)(() => {
|
|
25
|
-
if (!
|
|
31
|
+
if (!pluginName) return null;
|
|
26
32
|
let style = {
|
|
27
33
|
width,
|
|
28
34
|
zIndex: 101
|
|
@@ -33,7 +39,7 @@ const RightPanel = _ref => {
|
|
|
33
39
|
style.width = MAX_PANEL_WIDTH;
|
|
34
40
|
}
|
|
35
41
|
return style;
|
|
36
|
-
}, [width,
|
|
42
|
+
}, [width, pluginName]);
|
|
37
43
|
const resizeWidth = (0, _react.useCallback)(width => {
|
|
38
44
|
setWidth(width);
|
|
39
45
|
}, []);
|
|
@@ -46,6 +52,16 @@ const RightPanel = _ref => {
|
|
|
46
52
|
const eventBus = _eventBus.default.getInstance();
|
|
47
53
|
eventBus.dispatch(_constants.INTERNAL_EVENT.RESIZE_ARTICLE);
|
|
48
54
|
}, []);
|
|
55
|
+
(0, _react.useEffect)(() => {
|
|
56
|
+
const isShowGlobalComments = pluginName === 'sdoc' ? true : false;
|
|
57
|
+
const settings = _localStorageUtils.default.getItem(_constants.SDOC_STORAGE) || {};
|
|
58
|
+
_localStorageUtils.default.setItem(_constants.SDOC_STORAGE, {
|
|
59
|
+
...settings,
|
|
60
|
+
isShowGlobalComments
|
|
61
|
+
});
|
|
62
|
+
const eventBus = pluginEventBus.getInstance();
|
|
63
|
+
eventBus.dispatch(pluginEvent.RESIZE_ARTICLE);
|
|
64
|
+
}, [pluginEvent.RESIZE_ARTICLE, pluginEventBus, pluginName]);
|
|
49
65
|
(0, _react.useEffect)(() => {
|
|
50
66
|
const settings = _localStorageUtils.default.getItem(_constants.SDOC_STORAGE) || {};
|
|
51
67
|
const {
|
|
@@ -54,33 +70,18 @@ const RightPanel = _ref => {
|
|
|
54
70
|
const width = Math.max(MIN_PANEL_WIDTH, Math.min(parseInt(panelWidth, 10) || MIN_PANEL_WIDTH, MAX_PANEL_WIDTH));
|
|
55
71
|
setWidth(width);
|
|
56
72
|
}, []);
|
|
57
|
-
(0, _react.useEffect)(() => {
|
|
58
|
-
const isShowGlobalComments = displayPluginName === 'sdoc-comment' ? true : false;
|
|
59
|
-
const settings = _localStorageUtils.default.getItem(_constants.SDOC_STORAGE) || {};
|
|
60
|
-
_localStorageUtils.default.setItem(_constants.SDOC_STORAGE, {
|
|
61
|
-
...settings,
|
|
62
|
-
isShowGlobalComments
|
|
63
|
-
});
|
|
64
|
-
const eventBus = _eventBus.default.getInstance();
|
|
65
|
-
eventBus.dispatch(_constants.INTERNAL_EVENT.RESIZE_ARTICLE);
|
|
66
|
-
}, [displayPluginName]);
|
|
67
|
-
const resizable_width = true;
|
|
68
73
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
69
|
-
className:
|
|
74
|
+
className: `comment-layout-wrapper ${className}`,
|
|
70
75
|
style: panelWrapperStyle
|
|
71
|
-
},
|
|
76
|
+
}, /*#__PURE__*/_react.default.createElement(_resizeWidth.default, {
|
|
72
77
|
minWidth: MIN_PANEL_WIDTH,
|
|
73
78
|
maxWidth: MAX_PANEL_WIDTH,
|
|
74
79
|
resizeWidth: resizeWidth,
|
|
75
80
|
resizeWidthEnd: resizeWidthEnd
|
|
76
|
-
}), /*#__PURE__*/_react.default.createElement(
|
|
77
|
-
className: "sdoc-content-right-panel",
|
|
78
|
-
id: "sdoc-content-right-panel"
|
|
79
|
-
}, /*#__PURE__*/_react.default.createElement(_comment.default, {
|
|
81
|
+
}), /*#__PURE__*/_react.default.createElement(_comment.default, {
|
|
80
82
|
editor: editor,
|
|
81
83
|
type: "global",
|
|
82
|
-
onClose: () => {},
|
|
83
84
|
width: width
|
|
84
|
-
}))
|
|
85
|
+
}));
|
|
85
86
|
};
|
|
86
|
-
var _default = exports.default =
|
|
87
|
+
var _default = exports.default = CommentLayout;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
.comment-layout-resize-width-handler {
|
|
2
|
+
height: 100%;
|
|
3
|
+
position: absolute;
|
|
4
|
+
right: 0;
|
|
5
|
+
top: 0;
|
|
6
|
+
width: 6px;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.comment-layout-resize-width-handler.resize-handler-placement-right {
|
|
10
|
+
left: 0;
|
|
11
|
+
right: auto;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.comment-layout-resize-width-handler:hover {
|
|
15
|
+
cursor: col-resize;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.comment-layout-resize-width-handler .comment-layout-resize-width-handler-content {
|
|
19
|
+
background-color: initial;
|
|
20
|
+
height: 100%;
|
|
21
|
+
position: relative;
|
|
22
|
+
width: 2px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.comment-layout-resize-width-handler:hover .comment-layout-resize-width-handler-content {
|
|
26
|
+
background-color: #ccc;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.comment-layout-resize-width-handler .comment-layout-resize-width-handler-bar {
|
|
30
|
+
background-color: #2d7ff9;
|
|
31
|
+
border-radius: 3px;
|
|
32
|
+
content: "";
|
|
33
|
+
left: 50%;
|
|
34
|
+
margin-left: -3px;
|
|
35
|
+
position: absolute;
|
|
36
|
+
width: 6px;
|
|
37
|
+
}
|
|
38
|
+
|
|
@@ -108,7 +108,7 @@ const ResizeWidth = _ref => {
|
|
|
108
108
|
// eslint-disable-next-line
|
|
109
109
|
}, []);
|
|
110
110
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
111
|
-
className: "
|
|
111
|
+
className: "comment-layout-resize-width-handler resize-handler-placement-right",
|
|
112
112
|
ref: handlerRef,
|
|
113
113
|
onMouseDown: onMouseDown,
|
|
114
114
|
onMouseOver: onMouseOver,
|
|
@@ -120,9 +120,9 @@ const ResizeWidth = _ref => {
|
|
|
120
120
|
zIndex: 4
|
|
121
121
|
}
|
|
122
122
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
123
|
-
className: "
|
|
123
|
+
className: "comment-layout-resize-width-handler-content"
|
|
124
124
|
}, isShowHandlerBar && /*#__PURE__*/_react.default.createElement("div", {
|
|
125
|
-
className: "
|
|
125
|
+
className: "comment-layout-resize-width-handler-bar",
|
|
126
126
|
ref: handlerBarRef,
|
|
127
127
|
style: {
|
|
128
128
|
height: 26
|
|
@@ -4,17 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
Object.defineProperty(exports, "ArticleContainer", {
|
|
8
|
-
enumerable: true,
|
|
9
|
-
get: function () {
|
|
10
|
-
return _articleContainer.default;
|
|
11
|
-
}
|
|
12
|
-
});
|
|
13
7
|
Object.defineProperty(exports, "EditorContainer", {
|
|
14
8
|
enumerable: true,
|
|
15
9
|
get: function () {
|
|
16
10
|
return _editorContainer.default;
|
|
17
11
|
}
|
|
18
12
|
});
|
|
19
|
-
var _articleContainer = _interopRequireDefault(require("./article-container"));
|
|
20
13
|
var _editorContainer = _interopRequireDefault(require("./editor-container"));
|
package/dist/index.js
CHANGED
|
@@ -22,6 +22,18 @@ Object.defineProperty(exports, "SeafileCommentEditor", {
|
|
|
22
22
|
return _seafileCommentEditor.default;
|
|
23
23
|
}
|
|
24
24
|
});
|
|
25
|
+
Object.defineProperty(exports, "createCommentEditor", {
|
|
26
|
+
enumerable: true,
|
|
27
|
+
get: function () {
|
|
28
|
+
return _basicSdk.createCommentEditor;
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
Object.defineProperty(exports, "withNodeId", {
|
|
32
|
+
enumerable: true,
|
|
33
|
+
get: function () {
|
|
34
|
+
return _basicSdk.withNodeId;
|
|
35
|
+
}
|
|
36
|
+
});
|
|
25
37
|
var _basicSdk = require("./basic-sdk");
|
|
26
38
|
var _constants = require("./constants");
|
|
27
39
|
var _seafileCommentEditor = _interopRequireDefault(require("./pages/seafile-comment-editor"));
|