@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.
Files changed (48) hide show
  1. package/README.md +2 -4
  2. package/dist/basic-sdk/assets/css/layout.css +2 -2
  3. package/dist/basic-sdk/assets/css/sdoc-comment-editor-plugin.css +4 -4
  4. package/dist/basic-sdk/comment/components/comment-all-participants/index.css +8 -8
  5. package/dist/basic-sdk/comment/components/comment-editor.js +123 -7
  6. package/dist/basic-sdk/comment/components/comment-item-collapse-wrapper.js +2 -2
  7. package/dist/basic-sdk/comment/components/comment-item-content.js +11 -13
  8. package/dist/basic-sdk/comment/components/comment-item-wrapper.js +32 -36
  9. package/dist/basic-sdk/comment/components/comment-list.css +4 -4
  10. package/dist/basic-sdk/comment/components/comment-participants-editor/index.js +2 -2
  11. package/dist/basic-sdk/comment/components/global-comment/global-comment-body-header.js +5 -4
  12. package/dist/basic-sdk/comment/components/global-comment/global-comment-header.js +11 -4
  13. package/dist/basic-sdk/comment/components/global-comment/index.css +56 -54
  14. package/dist/basic-sdk/comment/components/global-comment/index.js +41 -36
  15. package/dist/basic-sdk/comment/hooks/comment-hooks/use-comment-mount.js +3 -4
  16. package/dist/basic-sdk/comment/hooks/notification-hooks/use-notification-mount.js +2 -6
  17. package/dist/basic-sdk/comment/index.js +2 -48
  18. package/dist/basic-sdk/constants/index.js +1 -2
  19. package/dist/basic-sdk/context.js +8 -8
  20. package/dist/basic-sdk/extension/plugins/link/menu/index.js +1 -1
  21. package/dist/basic-sdk/extension/plugins/mention/render-elem/participant-popover.js +3 -6
  22. package/dist/basic-sdk/extension/render/render-comment-editor-element.js +1 -1
  23. package/dist/basic-sdk/extension/toolbar/comment-editor-toolbar/index.js +3 -3
  24. package/dist/basic-sdk/extension/toolbar/comment-editor-toolbar/post-comment/index.js +2 -2
  25. package/dist/basic-sdk/hooks/use-comment.js +218 -0
  26. package/dist/basic-sdk/index.js +12 -32
  27. package/dist/basic-sdk/{right-panel → layout/comment-layout}/index.css +2 -2
  28. package/dist/basic-sdk/{right-panel → layout/comment-layout}/index.js +29 -28
  29. package/dist/basic-sdk/layout/comment-layout/resize-width/index.css +38 -0
  30. package/dist/basic-sdk/{right-panel → layout/comment-layout}/resize-width/index.js +3 -3
  31. package/dist/basic-sdk/layout/index.js +0 -7
  32. package/dist/index.js +12 -0
  33. package/dist/pages/seafile-comment-editor.js +19 -52
  34. package/package.json +2 -1
  35. package/dist/basic-sdk/comment/components/global-comment/global-comment-editor.js +0 -36
  36. package/dist/basic-sdk/comment/provider/comment-context-provider.js +0 -37
  37. package/dist/basic-sdk/comment/provider/index.js +0 -23
  38. package/dist/basic-sdk/comment/provider/notification-context-provider.js +0 -31
  39. package/dist/basic-sdk/comment/provider/participants-content-provider.js +0 -96
  40. package/dist/basic-sdk/editor/comment-article.js +0 -104
  41. package/dist/basic-sdk/editor/sdoc-comment-editor.js +0 -128
  42. package/dist/basic-sdk/editor/sdoc-editor.js +0 -50
  43. package/dist/basic-sdk/hooks/use-collaborators.js +0 -62
  44. package/dist/basic-sdk/hooks/use-plugins.js +0 -9
  45. package/dist/basic-sdk/layout/article-container.js +0 -89
  46. package/dist/basic-sdk/right-panel/resize-width/index.css +0 -38
  47. package/dist/hooks/index.js +0 -12
  48. 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 _useCollaborators = require("../../../../hooks/use-collaborators");
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, _useParticipants.useParticipantsContext)();
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: 'sdoc-comment-editor-paragraph'
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: "sdoc-comment-editor-toolbar"
30
+ className: "comment-editor-toolbar"
31
31
  }, /*#__PURE__*/_react.default.createElement(_commons.MenuGroup, {
32
- className: "menu-group sdoc-comment-editor-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: "sdoc-comment-editor-toolbar-right"
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: "sdoc-comment-editor-comment-btn"
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: "sdoc-comment-editor-comment-btn"
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;
@@ -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, "CollaboratorsProvider", {
7
+ Object.defineProperty(exports, "CommentLayout", {
8
8
  enumerable: true,
9
9
  get: function () {
10
- return _useCollaborators.CollaboratorsProvider;
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, "useCollaborators", {
139
+ Object.defineProperty(exports, "useComment", {
158
140
  enumerable: true,
159
141
  get: function () {
160
- return _useCollaborators.useCollaborators;
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 _useCollaborators = require("./hooks/use-collaborators");
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
- .sdoc-content-right-panel-wrapper {
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
- .sdoc-content-right-panel-wrapper .sdoc-content-right-panel {
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("../comment"));
11
- var _constants = require("../constants");
12
- var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
13
- var _localStorageUtils = _interopRequireDefault(require("../utils/local-storage-utils"));
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 RightPanel = _ref => {
19
+ const CommentLayout = _ref => {
19
20
  let {
20
21
  editor
21
22
  } = _ref;
22
- const displayPluginName = 'aa';
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 (!displayPluginName) return null;
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, displayPluginName]);
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: "sdoc-content-right-panel-wrapper",
74
+ className: `comment-layout-wrapper ${className}`,
70
75
  style: panelWrapperStyle
71
- }, resizable_width && /*#__PURE__*/_react.default.createElement(_resizeWidth.default, {
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("div", {
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 = RightPanel;
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: "sdoc-resize-width-handler resize-handler-placement-right",
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: "sdoc-resize-width-handler-content"
123
+ className: "comment-layout-resize-width-handler-content"
124
124
  }, isShowHandlerBar && /*#__PURE__*/_react.default.createElement("div", {
125
- className: "sdoc-resize-width-handler-bar",
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"));