@seafile/sdoc-editor 2.0.136-alpha.0 → 2.0.137

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/LICENSE.txt ADDED
@@ -0,0 +1,13 @@
1
+ Copyright (c) 2025 Seafile Ltd.
2
+
3
+ Licensed under the Apache License, Version 2.0 (the "License");
4
+ you may not use this file except in compliance with the License.
5
+ You may obtain a copy of the License at
6
+
7
+ http://www.apache.org/licenses/LICENSE-2.0
8
+
9
+ Unless required by applicable law or agreed to in writing, software
10
+ distributed under the License is distributed on an "AS IS" BASIS,
11
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
+ See the License for the specific language governing permissions and
13
+ limitations under the License.
@@ -0,0 +1,162 @@
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
+ var getSubmitTip = function getSubmitTip(type, content) {
26
+ if (content) return 'Save';
27
+ return type === 'comment' ? 'Comment' : 'Reply';
28
+ };
29
+ var DEFAULT_PLACEHOLDER = 'Enter_comment_shift_enter_for_new_line_Enter_to_send';
30
+ var CommentEditor = function CommentEditor(_ref) {
31
+ var type = _ref.type,
32
+ className = _ref.className,
33
+ content = _ref.content,
34
+ commentContent = _ref.commentContent,
35
+ _ref$placeholder = _ref.placeholder,
36
+ placeholder = _ref$placeholder === void 0 ? DEFAULT_PLACEHOLDER : _ref$placeholder,
37
+ insertContent = _ref.insertContent,
38
+ updateContent = _ref.updateContent,
39
+ setIsEditing = _ref.setIsEditing,
40
+ hiddenComment = _ref.hiddenComment,
41
+ hiddenUserInfo = _ref.hiddenUserInfo,
42
+ onContentChange = _ref.onContentChange,
43
+ isContextComment = _ref.isContextComment,
44
+ closeComment = _ref.closeComment;
45
+ var commentWrapperRef = (0, _react.useRef)();
46
+ var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
47
+ t = _useTranslation.t;
48
+ var _useParticipantsConte = (0, _useParticipants.useParticipantsContext)(),
49
+ addParticipants = _useParticipantsConte.addParticipants;
50
+ var submitTip = (0, _react.useMemo)(function () {
51
+ return getSubmitTip(type, content);
52
+ }, [content, type]);
53
+ var userInfo = _context["default"].getUserInfo();
54
+ var document = (0, _react.useMemo)(function () {
55
+ var cursor = {};
56
+ var elements = null;
57
+ elements = [(0, _core.generateEmptyElement)(_constants2.PARAGRAPH, {
58
+ placeholder: placeholder
59
+ })];
60
+ return {
61
+ elements: elements,
62
+ cursor: cursor
63
+ };
64
+ }, [placeholder]);
65
+ var editor = (0, _react.useMemo)(function () {
66
+ var defaultEditor = (0, _extension.createCommentEditor)();
67
+ var newEditor = (0, _nodeId["default"])(defaultEditor);
68
+ var cursors = document.cursors;
69
+ newEditor.cursors = cursors || {};
70
+ newEditor.width = _constants.COMMENT_EDITOR_EDIT_AREA_WIDTH; // default width
71
+ newEditor.editorType = _constants.COMMENT_EDITOR;
72
+ return newEditor;
73
+ }, [document]);
74
+ var updateValue = (0, _react.useCallback)(function (value) {
75
+ if (!value || value.trim() === '') return;
76
+ if (!content) return insertContent(value);
77
+ updateContent && updateContent(value);
78
+ }, [content, insertContent, updateContent]);
79
+ var onSubmit = (0, _react.useCallback)(function (event) {
80
+ event && event.stopPropagation();
81
+ var mdString = (0, _slateToMd["default"])(editor.children);
82
+ updateValue(mdString);
83
+ addParticipants(userInfo.username);
84
+ editor.children = [(0, _core.generateEmptyElement)(_constants2.PARAGRAPH, {
85
+ placeholder: placeholder
86
+ })];
87
+ _slate.Transforms.select(editor, _slate.Editor.start(editor, []));
88
+ onContentChange && onContentChange(null);
89
+ closeComment && closeComment();
90
+ }, [editor, updateValue, addParticipants, userInfo.username, placeholder, onContentChange, closeComment]);
91
+ var onSubmitByEnterKey = (0, _react.useCallback)(function (event) {
92
+ if (!_slateReact.ReactEditor.isFocused(editor)) return;
93
+ onSubmit(event);
94
+ }, [editor, onSubmit]);
95
+ (0, _react.useEffect)(function () {
96
+ var eventBus = _eventBus["default"].getInstance();
97
+ var unsubscribePostComment = eventBus.subscribe(_constants.INTERNAL_EVENT.COMMENT_EDITOR_POST_COMMENT, onSubmitByEnterKey);
98
+ return function () {
99
+ unsubscribePostComment();
100
+ };
101
+ }, [onSubmitByEnterKey]);
102
+ var onCancel = (0, _react.useCallback)(function (event) {
103
+ event.stopPropagation();
104
+ var eventType = event.type,
105
+ keyCode = event.keyCode,
106
+ target = event.target;
107
+ if (eventType === 'keydown' && keyCode !== _constants.KeyCodes.Esc) return;
108
+ if (eventType === 'click') {
109
+ var isSdocContentWrapper = target.classList.contains('sdoc-content-wrapper');
110
+ var listContainer = window.document.querySelector('#global-comment-list-container');
111
+ var resizeContainer = window.document.querySelector('.sdoc-comment-resize-handler');
112
+ var isClickOnListContainer = listContainer && listContainer.contains(target);
113
+ var isClickOnCommentEditorContainer = commentWrapperRef.current.contains(target);
114
+ var isClickResizeContainer = resizeContainer && resizeContainer.contains(target);
115
+ var isPreventCancel = isClickOnListContainer || isClickOnCommentEditorContainer || isClickResizeContainer || isSdocContentWrapper;
116
+ if (isPreventCancel) return;
117
+ }
118
+ setIsEditing && setIsEditing(false);
119
+ hiddenComment && hiddenComment(false);
120
+ if (onContentChange) {
121
+ if (editor.children.find(function (n) {
122
+ return _slate.Node.string(n).trim();
123
+ })) {
124
+ onContentChange((0, _slateToMd["default"])(editor.children));
125
+ } else {
126
+ onContentChange(null);
127
+ }
128
+ }
129
+ // eslint-disable-next-line react-hooks/exhaustive-deps
130
+ }, [setIsEditing]);
131
+ (0, _react.useEffect)(function () {
132
+ var children = (0, _mdToSlate["default"])(content);
133
+ if (commentContent) {
134
+ children = (0, _mdToSlate["default"])(commentContent);
135
+ }
136
+ editor.children = children;
137
+ _slate.Transforms.select(editor, _slate.Editor.end(editor, []));
138
+ }, [editor, content, commentContent]);
139
+ return /*#__PURE__*/_react["default"].createElement("div", {
140
+ className: (0, _classnames["default"])('comment-editor-wrapper', className),
141
+ ref: commentWrapperRef
142
+ }, type === 'comment' && !hiddenUserInfo && /*#__PURE__*/_react["default"].createElement("div", {
143
+ className: "comment-editor-user-info"
144
+ }, /*#__PURE__*/_react["default"].createElement("div", {
145
+ className: "comment-editor-user-img"
146
+ }, /*#__PURE__*/_react["default"].createElement("img", {
147
+ src: userInfo.avatar_url,
148
+ alt: "",
149
+ height: "100%",
150
+ width: "100%"
151
+ })), /*#__PURE__*/_react["default"].createElement("div", {
152
+ className: "comment-editor-user-name"
153
+ }, userInfo.name)), /*#__PURE__*/_react["default"].createElement(_sdocCommentEditor["default"], {
154
+ editor: editor,
155
+ type: type,
156
+ document: document,
157
+ onSubmit: onSubmit,
158
+ submitBtnText: t(submitTip),
159
+ onCancel: onCancel
160
+ }));
161
+ };
162
+ var _default = exports["default"] = CommentEditor;
@@ -13,14 +13,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
13
13
  var _react = _interopRequireWildcard(require("react"));
14
14
  var _reactI18next = require("react-i18next");
15
15
  var _reactstrap = require("reactstrap");
16
- var _commentEditor = require("@seafile/comment-editor");
17
16
  var _dayjs = _interopRequireDefault(require("dayjs"));
18
17
  var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
19
18
  var _context2 = _interopRequireDefault(require("../../context"));
20
- var _useCollaborators2 = require("../../hooks/use-collaborators");
21
19
  var _mdToHtml = _interopRequireDefault(require("../../slate-convert/md-to-html"));
22
20
  var _notificationHooks = require("../hooks/notification-hooks");
23
- var _useParticipants = require("../hooks/use-participants");
21
+ var _commentEditor = _interopRequireDefault(require("./comment-editor"));
24
22
  var _commentImagePreviewer = _interopRequireDefault(require("./comment-image-previewer"));
25
23
  var CommentItemContent = function CommentItemContent(_ref) {
26
24
  var isActive = _ref.isActive,
@@ -31,11 +29,6 @@ var CommentItemContent = function CommentItemContent(_ref) {
31
29
  onDeleteComment = _ref.onDeleteComment,
32
30
  t = _ref.t,
33
31
  targetId = _ref.targetId;
34
- var _useParticipantsConte = (0, _useParticipants.useParticipantsContext)(),
35
- addParticipants = _useParticipantsConte.addParticipants,
36
- participants = _useParticipantsConte.participants;
37
- var _useCollaborators = (0, _useCollaborators2.useCollaborators)(),
38
- collaborators = _useCollaborators.collaborators;
39
32
  var _useState = (0, _react.useState)(false),
40
33
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
41
34
  isDropdownOpen = _useState2[0],
@@ -126,18 +119,6 @@ var CommentItemContent = function CommentItemContent(_ref) {
126
119
  setImageUrl(event.target.src);
127
120
  }
128
121
  }, []);
129
- var commentEditorProps = {
130
- className: 'pb-3',
131
- addParticipants: addParticipants,
132
- participants: participants,
133
- collaborators: collaborators,
134
- content: comment.comment,
135
- insertContent: updateContent,
136
- hiddenComment: setIsEditing,
137
- api: {
138
- uploadLocalImage: _context2["default"].uploadLocalImage
139
- }
140
- };
141
122
  return /*#__PURE__*/_react["default"].createElement("div", {
142
123
  className: "comment-item"
143
124
  }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -206,7 +187,12 @@ var CommentItemContent = function CommentItemContent(_ref) {
206
187
  dangerouslySetInnerHTML: {
207
188
  __html: editorContent
208
189
  }
209
- })), isEditing && /*#__PURE__*/_react["default"].createElement(_commentEditor.SeafileCommentEditor, commentEditorProps), imageUrl && /*#__PURE__*/_react["default"].createElement(_commentImagePreviewer["default"], {
190
+ })), isEditing && /*#__PURE__*/_react["default"].createElement(_commentEditor["default"], {
191
+ className: "pb-3",
192
+ content: comment.comment,
193
+ updateContent: updateContent,
194
+ setIsEditing: setIsEditing
195
+ }), imageUrl && /*#__PURE__*/_react["default"].createElement(_commentImagePreviewer["default"], {
210
196
  imageUrl: imageUrl,
211
197
  toggle: function toggle() {
212
198
  return setImageUrl('');
@@ -12,13 +12,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
12
12
  var _react = _interopRequireWildcard(require("react"));
13
13
  var _reactI18next = require("react-i18next");
14
14
  var _reactstrap = require("reactstrap");
15
- var _commentEditor = require("@seafile/comment-editor");
16
15
  var _dayjs = _interopRequireDefault(require("dayjs"));
17
16
  var _context2 = _interopRequireDefault(require("../../context"));
18
- var _useCollaborators2 = require("../../hooks/use-collaborators");
19
17
  var _mdToHtml = _interopRequireDefault(require("../../slate-convert/md-to-html"));
20
- var _useParticipants = require("../hooks/use-participants");
21
18
  var _commentDeletePopover = _interopRequireDefault(require("./comment-delete-popover"));
19
+ var _commentEditor = _interopRequireDefault(require("./comment-editor"));
22
20
  var _commentImagePreviewer = _interopRequireDefault(require("./comment-image-previewer"));
23
21
  var CommentItemReply = function CommentItemReply(_ref) {
24
22
  var isActive = _ref.isActive,
@@ -27,11 +25,6 @@ var CommentItemReply = function CommentItemReply(_ref) {
27
25
  deleteReply = _ref.deleteReply,
28
26
  updateReply = _ref.updateReply,
29
27
  t = _ref.t;
30
- var _useParticipantsConte = (0, _useParticipants.useParticipantsContext)(),
31
- addParticipants = _useParticipantsConte.addParticipants,
32
- participants = _useParticipantsConte.participants;
33
- var _useCollaborators = (0, _useCollaborators2.useCollaborators)(),
34
- collaborators = _useCollaborators.collaborators;
35
28
  var _useState = (0, _react.useState)(false),
36
29
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
37
30
  isDropdownOpen = _useState2[0],
@@ -108,19 +101,6 @@ var CommentItemReply = function CommentItemReply(_ref) {
108
101
  setImageUrl(event.target.src);
109
102
  }
110
103
  }, []);
111
- var commentEditorProps = {
112
- type: 'reply',
113
- className: 'pb-3',
114
- addParticipants: addParticipants,
115
- participants: participants,
116
- collaborators: collaborators,
117
- content: editorContent,
118
- insertContent: updateContent,
119
- hiddenComment: setIsEditing,
120
- api: {
121
- uploadLocalImage: _context2["default"].uploadLocalImage
122
- }
123
- };
124
104
  return /*#__PURE__*/_react["default"].createElement("div", {
125
105
  className: "comment-item",
126
106
  ref: itemRef
@@ -170,7 +150,13 @@ var CommentItemReply = function CommentItemReply(_ref) {
170
150
  dangerouslySetInnerHTML: {
171
151
  __html: editorContent
172
152
  }
173
- })), isEditing && /*#__PURE__*/_react["default"].createElement(_commentEditor.SeafileCommentEditor, commentEditorProps), isShowDeletePopover && isActive && /*#__PURE__*/_react["default"].createElement(_commentDeletePopover["default"], {
153
+ })), isEditing && /*#__PURE__*/_react["default"].createElement(_commentEditor["default"], {
154
+ className: "pb-3",
155
+ type: "reply",
156
+ content: editorContent,
157
+ updateContent: updateContent,
158
+ setIsEditing: setIsEditing
159
+ }), isShowDeletePopover && isActive && /*#__PURE__*/_react["default"].createElement(_commentDeletePopover["default"], {
174
160
  parentDom: itemRef.current,
175
161
  type: "reply",
176
162
  deleteConfirm: _deleteReply,
@@ -14,16 +14,14 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm
14
14
  var _react = _interopRequireWildcard(require("react"));
15
15
  var _reactI18next = require("react-i18next");
16
16
  var _reactstrap = require("reactstrap");
17
- var _commentEditor = require("@seafile/comment-editor");
18
17
  var _classnames = _interopRequireDefault(require("classnames"));
19
18
  var _dayjs = _interopRequireDefault(require("dayjs"));
20
19
  var _slugid = _interopRequireDefault(require("slugid"));
21
20
  var _context2 = _interopRequireDefault(require("../../context"));
22
- var _useCollaborators2 = require("../../hooks/use-collaborators");
23
21
  var _useSelectionPosition = require("../../hooks/use-selection-position");
24
22
  var _helper = require("../helper");
25
23
  var _useCommentContext2 = require("../hooks/comment-hooks/use-comment-context");
26
- var _useParticipants = require("../hooks/use-participants");
24
+ var _commentEditor = _interopRequireDefault(require("./comment-editor"));
27
25
  var _commentItemWrapper = _interopRequireDefault(require("./comment-item-wrapper"));
28
26
  require("./comment-list.css");
29
27
  var CommentList = function CommentList(_ref) {
@@ -44,11 +42,6 @@ var CommentList = function CommentList(_ref) {
44
42
  var commentPopover = (0, _react.useRef)(null);
45
43
  var commentDetailRef = (0, _react.useRef)(null);
46
44
  var position = (0, _useSelectionPosition.useCommentListPosition)(activeElementIds, isContextComment, isClickedContextComment, commentedDom, commentDetail, closeComment, editor);
47
- var _useParticipantsConte = (0, _useParticipants.useParticipantsContext)(),
48
- addParticipants = _useParticipantsConte.addParticipants,
49
- participants = _useParticipantsConte.participants;
50
- var _useCollaborators = (0, _useCollaborators2.useCollaborators)(),
51
- collaborators = _useCollaborators.collaborators;
52
45
  var _useCommentContext = (0, _useCommentContext2.useCommentContext)(),
53
46
  dispatch = _useCommentContext.dispatch;
54
47
  var _useState = (0, _react.useState)(false),
@@ -209,17 +202,12 @@ var CommentList = function CommentList(_ref) {
209
202
  style: {
210
203
  paddingTop: isEmptyComment ? '16px' : ''
211
204
  }
212
- }, isEmptyComment && /*#__PURE__*/_react["default"].createElement(_commentEditor.SeafileCommentEditor, {
213
- addParticipants: addParticipants,
214
- participants: participants,
215
- collaborators: collaborators,
205
+ }, isEmptyComment && /*#__PURE__*/_react["default"].createElement(_commentEditor["default"], {
216
206
  type: "comment",
217
207
  insertContent: addNewComment,
218
208
  hiddenComment: hiddenComment,
219
- closePanel: closeComment,
220
- api: {
221
- uploadLocalImage: _context2["default"].uploadLocalImage
222
- }
209
+ isContextComment: isContextComment,
210
+ closeComment: closeComment
223
211
  }), !isEmptyComment && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !isActiveEditor && /*#__PURE__*/_react["default"].createElement(_reactstrap.Input, {
224
212
  value: inputContent !== null && inputContent !== void 0 && inputContent.trim() ? '.....' : '',
225
213
  readOnly: true,
@@ -227,40 +215,29 @@ var CommentList = function CommentList(_ref) {
227
215
  onFocus: function onFocus() {
228
216
  setActiveCommentKey(index);
229
217
  }
230
- }), isActiveEditor && /*#__PURE__*/_react["default"].createElement(_commentEditor.SeafileCommentEditor, {
218
+ }), isActiveEditor && /*#__PURE__*/_react["default"].createElement(_commentEditor["default"], {
231
219
  type: "reply",
232
220
  placeholder: 'Enter_reply_shift_Enter_for_new_line_Enter_to_send',
233
- addParticipants: addParticipants,
234
- participants: participants,
235
- collaborators: collaborators,
236
- content: commentInputs[item.id] || '',
221
+ commentContent: commentInputs[item.id] || '',
237
222
  insertContent: function insertContent(value) {
238
223
  return handleReplySubmit(value, item.id);
239
224
  },
240
225
  onContentChange: function onContentChange(content) {
241
226
  return handleInputChange(item.id, content);
242
227
  },
243
- hiddenComment: hiddenComment,
244
- api: {
245
- uploadLocalImage: _context2["default"].uploadLocalImage
246
- }
228
+ hiddenComment: hiddenComment
247
229
  }))));
248
230
  }), Object.values(commentDetail).length === 0 && /*#__PURE__*/_react["default"].createElement("div", {
249
231
  className: "non-global-comment-input-wrapper",
250
232
  style: {
251
233
  paddingTop: isEmptyComment ? '16px' : ''
252
234
  }
253
- }, isEmptyComment && /*#__PURE__*/_react["default"].createElement(_commentEditor.SeafileCommentEditor, {
235
+ }, isEmptyComment && /*#__PURE__*/_react["default"].createElement(_commentEditor["default"], {
254
236
  type: "comment",
255
- addParticipants: addParticipants,
256
- participants: participants,
257
- collaborators: collaborators,
258
237
  insertContent: addNewComment,
259
238
  hiddenComment: hiddenComment,
260
- closePanel: closeComment,
261
- api: {
262
- uploadLocalImage: _context2["default"].uploadLocalImage
263
- }
239
+ isContextComment: isContextComment,
240
+ closeComment: closeComment
264
241
  }), !isEmptyComment && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !showEditor && /*#__PURE__*/_react["default"].createElement(_reactstrap.Input, {
265
242
  value: inputContent !== null && inputContent !== void 0 && inputContent.trim() ? '.....' : '',
266
243
  readOnly: true,
@@ -268,21 +245,15 @@ var CommentList = function CommentList(_ref) {
268
245
  onFocus: function onFocus() {
269
246
  setShowEditor(true);
270
247
  }
271
- }), showEditor && /*#__PURE__*/_react["default"].createElement(_commentEditor.SeafileCommentEditor, {
248
+ }), showEditor && /*#__PURE__*/_react["default"].createElement(_commentEditor["default"], {
272
249
  type: "reply",
273
250
  placeholder: 'Enter_reply_shift_Enter_for_new_line_Enter_to_send',
274
- addParticipants: addParticipants,
275
- participants: participants,
276
- collaborators: collaborators,
277
- content: inputContent,
251
+ commentContent: inputContent,
278
252
  insertContent: replyComment,
279
253
  onContentChange: function onContentChange(content) {
280
254
  setInputContent(content);
281
255
  },
282
- hiddenComment: hiddenComment,
283
- api: {
284
- uploadLocalImage: _context2["default"].uploadLocalImage
285
- }
256
+ hiddenComment: hiddenComment
286
257
  }))));
287
258
  };
288
259
  var _default = exports["default"] = (0, _reactI18next.withTranslation)('sdoc-editor')(CommentList);
@@ -6,11 +6,8 @@ Object.defineProperty(exports, "__esModule", {
6
6
  });
7
7
  exports["default"] = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
- var _commentEditor = require("@seafile/comment-editor");
10
9
  var _classnames = _interopRequireDefault(require("classnames"));
11
- var _context = _interopRequireDefault(require("../../../context"));
12
- var _useCollaborators2 = require("../../../hooks/use-collaborators");
13
- var _useParticipants = require("../../hooks/use-participants");
10
+ var _commentEditor = _interopRequireDefault(require("../comment-editor"));
14
11
  var GlobalCommentEditor = function GlobalCommentEditor(_ref) {
15
12
  var isScrollDisplayed = _ref.isScrollDisplayed,
16
13
  globalCommentContent = _ref.globalCommentContent,
@@ -18,32 +15,20 @@ var GlobalCommentEditor = function GlobalCommentEditor(_ref) {
18
15
  insertDocComment = _ref.insertDocComment,
19
16
  hiddenCommentEditor = _ref.hiddenCommentEditor,
20
17
  onContentChange = _ref.onContentChange;
21
- var _useParticipantsConte = (0, _useParticipants.useParticipantsContext)(),
22
- addParticipants = _useParticipantsConte.addParticipants,
23
- participants = _useParticipantsConte.participants;
24
- var _useCollaborators = (0, _useCollaborators2.useCollaborators)(),
25
- collaborators = _useCollaborators.collaborators;
26
- var commentEditorProps = {
27
- type: type,
28
- className: 'sdoc-doc-comment-editor',
29
- hiddenUserInfo: true,
30
- content: globalCommentContent,
31
- insertContent: insertDocComment,
32
- onContentChange: onContentChange,
33
- hiddenComment: hiddenCommentEditor,
34
- addParticipants: addParticipants,
35
- collaborators: collaborators,
36
- participants: participants,
37
- api: {
38
- uploadLocalImage: _context["default"].uploadLocalImage
39
- }
40
- };
41
18
  return /*#__PURE__*/_react["default"].createElement("div", {
42
19
  className: (0, _classnames["default"])('sdoc-doc-comment-editor-container', 'sdoc-comment-list-container', {
43
20
  'scrolled': isScrollDisplayed
44
21
  })
45
22
  }, /*#__PURE__*/_react["default"].createElement("div", {
46
23
  className: "sdoc-doc-comment-editor-content"
47
- }, /*#__PURE__*/_react["default"].createElement(_commentEditor.SeafileCommentEditor, commentEditorProps)));
24
+ }, /*#__PURE__*/_react["default"].createElement(_commentEditor["default"], {
25
+ type: type,
26
+ className: "sdoc-doc-comment-editor",
27
+ commentContent: globalCommentContent,
28
+ hiddenUserInfo: true,
29
+ insertContent: insertDocComment,
30
+ hiddenComment: hiddenCommentEditor,
31
+ onContentChange: onContentChange
32
+ })));
48
33
  };
49
34
  var _default = exports["default"] = GlobalCommentEditor;
@@ -0,0 +1,209 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports["default"] = void 0;
9
+ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
10
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
11
+ var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/regeneratorRuntime"));
12
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
13
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
14
+ var _react = _interopRequireWildcard(require("react"));
15
+ var _reactI18next = require("react-i18next");
16
+ var _slate = require("@seafile/slate");
17
+ var _deepCopy = _interopRequireDefault(require("deep-copy"));
18
+ var _notificationHooks = require("../comment/hooks/notification-hooks");
19
+ var _fileLoading = _interopRequireDefault(require("../components/file-loading"));
20
+ var _toast = _interopRequireDefault(require("../components/toast"));
21
+ var _constants = require("../constants");
22
+ var _context2 = _interopRequireDefault(require("../context"));
23
+ var _extension = require("../extension");
24
+ var _core = require("../extension/core");
25
+ var _commentEditorToolbar = _interopRequireDefault(require("../extension/toolbar/comment-editor-toolbar"));
26
+ var _useCollaborators = require("../hooks/use-collaborators");
27
+ var _useScrollContext = require("../hooks/use-scroll-context");
28
+ var _layout = require("../layout");
29
+ var _nodeId = _interopRequireDefault(require("../node-id"));
30
+ var _socket = require("../socket");
31
+ var _commonUtils = require("../utils/common-utils");
32
+ var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
33
+ var _commentArticle = _interopRequireDefault(require("./comment-article"));
34
+ var SdocCommentEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
35
+ var propsEditor = _ref.editor,
36
+ document = _ref.document,
37
+ isReloading = _ref.isReloading,
38
+ type = _ref.type,
39
+ onSubmit = _ref.onSubmit,
40
+ submitBtnText = _ref.submitBtnText,
41
+ onCancel = _ref.onCancel;
42
+ var _useState = (0, _react.useState)(document.elements),
43
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
44
+ slateValue = _useState2[0],
45
+ _setSlateValue = _useState2[1];
46
+ var commentEditorContainerRef = (0, _react.useRef)(null);
47
+ var commentTimeoutRef = (0, _react.useRef)(null);
48
+ var _useNotificationConte = (0, _notificationHooks.useNotificationContext)(),
49
+ notificationsInfo = _useNotificationConte.notificationsInfo;
50
+ var _useTranslation = (0, _reactI18next.useTranslation)('sdoc-editor'),
51
+ t = _useTranslation.t;
52
+ var validEditor = (0, _react.useMemo)(function () {
53
+ if (propsEditor) return propsEditor;
54
+ var defaultEditor = (0, _extension.createCommentEditor)();
55
+ var editorConfig = _context2["default"].getEditorConfig();
56
+ var newEditor = (0, _nodeId["default"])((0, _socket.withSocketIO)(defaultEditor, {
57
+ document: document,
58
+ config: editorConfig
59
+ }));
60
+ var cursors = document.cursors;
61
+ newEditor.cursors = cursors || {};
62
+ newEditor.width = _constants.COMMENT_EDITOR_EDIT_AREA_WIDTH; // default width
63
+
64
+ return newEditor;
65
+ // eslint-disable-next-line react-hooks/exhaustive-deps
66
+ }, []);
67
+ (0, _react.useEffect)(function () {
68
+ if (!(commentEditorContainerRef !== null && commentEditorContainerRef !== void 0 && commentEditorContainerRef.current)) return;
69
+ if (Object.keys(notificationsInfo.notifications_map || {}).length === 0) return;
70
+ if (!commentEditorContainerRef.current.closest('.global-comment-input-wrapper')) return;
71
+ var clearAllNotification = /*#__PURE__*/function () {
72
+ var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
73
+ var res, notifications, eventBus, errorMessage;
74
+ return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
75
+ while (1) switch (_context.prev = _context.next) {
76
+ case 0:
77
+ _context.prev = 0;
78
+ _context.next = 3;
79
+ return _context2["default"].readAllNotifications();
80
+ case 3:
81
+ _context.next = 5;
82
+ return _context2["default"].listUnseenNotifications();
83
+ case 5:
84
+ res = _context.sent;
85
+ notifications = res.data.notifications;
86
+ eventBus = _eventBus["default"].getInstance();
87
+ eventBus.dispatch(_constants.INTERNAL_EVENT.UNSEEN_NOTIFICATIONS_COUNT, notifications === null || notifications === void 0 ? void 0 : notifications.length);
88
+ eventBus.dispatch(_constants.INTERNAL_EVENT.NEW_NOTIFICATION);
89
+ eventBus.dispatch(_constants.INTERNAL_EVENT.CLEAR_NOTIFICATION);
90
+ _context.next = 17;
91
+ break;
92
+ case 13:
93
+ _context.prev = 13;
94
+ _context.t0 = _context["catch"](0);
95
+ errorMessage = (0, _commonUtils.getErrorMsg)(_context.t0);
96
+ _toast["default"].danger(t(errorMessage));
97
+ case 17:
98
+ case "end":
99
+ return _context.stop();
100
+ }
101
+ }, _callee, null, [[0, 13]]);
102
+ }));
103
+ return function clearAllNotification() {
104
+ return _ref2.apply(this, arguments);
105
+ };
106
+ }();
107
+ var el = commentEditorContainerRef && commentEditorContainerRef.current;
108
+
109
+ // Mark comment as read if focusing commentEditorContainerRef over 3s
110
+ var handleFocusIn = function handleFocusIn(e) {
111
+ commentTimeoutRef.current = setTimeout(function () {
112
+ clearAllNotification();
113
+ commentTimeoutRef.current = null;
114
+ }, 3000);
115
+ };
116
+ var handleBlur = function handleBlur() {
117
+ clearTimeout(commentTimeoutRef.current);
118
+ commentTimeoutRef.current = null;
119
+ };
120
+ el.addEventListener('focusin', handleFocusIn);
121
+ el.addEventListener('focusout', handleBlur);
122
+ return function () {
123
+ el.removeEventListener('focusin', handleFocusIn);
124
+ el.removeEventListener('focusout', handleBlur);
125
+ if (commentTimeoutRef.current) {
126
+ clearTimeout(commentTimeoutRef.current);
127
+ commentTimeoutRef.current = null;
128
+ }
129
+ };
130
+ }, [notificationsInfo]);
131
+
132
+ // useMount: focus editor
133
+ (0, _react.useEffect)(function () {
134
+ var _validEditor$children = (0, _slicedToArray2["default"])(validEditor.children, 1),
135
+ firstNode = _validEditor$children[0];
136
+ if (firstNode) {
137
+ var _firstNode$children = (0, _slicedToArray2["default"])(firstNode.children, 1),
138
+ firstNodeFirstChild = _firstNode$children[0];
139
+ if (firstNodeFirstChild) {
140
+ var endOfFirstNode = _slate.Editor.end(validEditor, [0, 0]);
141
+ var range = {
142
+ anchor: endOfFirstNode,
143
+ focus: endOfFirstNode
144
+ };
145
+ (0, _core.focusEditor)(validEditor, range);
146
+ }
147
+ // Force refresh to fix comment list
148
+ _setSlateValue((0, _toConsumableArray2["default"])(validEditor.children));
149
+ }
150
+ // eslint-disable-next-line react-hooks/exhaustive-deps
151
+ }, []);
152
+
153
+ // The parent component can call the method of this component through ref
154
+ (0, _react.useImperativeHandle)(ref, function () {
155
+ return {
156
+ setSlateValue: function setSlateValue(document) {
157
+ // Force update of editor's child elements
158
+ validEditor.children = document.elements;
159
+ _setSlateValue((0, _toConsumableArray2["default"])(document.elements));
160
+ },
161
+ updateDocumentVersion: function updateDocumentVersion(document) {
162
+ validEditor.updateDocumentVersion(document);
163
+ },
164
+ // get value
165
+ getSlateValue: function getSlateValue() {
166
+ return (0, _deepCopy["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, document), {}, {
167
+ elements: slateValue
168
+ }));
169
+ }
170
+
171
+ // eslint-disable-next-line react-hooks/exhaustive-deps
172
+ };
173
+ }, [document, validEditor, slateValue]);
174
+ if (isReloading) {
175
+ return /*#__PURE__*/_react["default"].createElement("div", {
176
+ className: "h-100 w-100 d-flex align-items-center justify-content-center"
177
+ }, /*#__PURE__*/_react["default"].createElement(_fileLoading["default"], null));
178
+ }
179
+ var handleFocusEditor = function handleFocusEditor(e) {
180
+ if (e.target === commentEditorContainerRef.current) {
181
+ var focusPoint = _slate.Editor.end(validEditor, []);
182
+ (0, _core.focusEditor)(validEditor, focusPoint);
183
+ }
184
+ };
185
+ return /*#__PURE__*/_react["default"].createElement(_layout.EditorContainer, {
186
+ editor: validEditor
187
+ }, /*#__PURE__*/_react["default"].createElement(_useCollaborators.CollaboratorsProvider, null, /*#__PURE__*/_react["default"].createElement("div", {
188
+ className: "sdoc-comment-editor-wrapper"
189
+ }, /*#__PURE__*/_react["default"].createElement("div", {
190
+ ref: commentEditorContainerRef,
191
+ className: "article sdoc-comment-editor",
192
+ onClick: handleFocusEditor
193
+ }, /*#__PURE__*/_react["default"].createElement(_useScrollContext.ScrollContext.Provider, {
194
+ value: {
195
+ scrollRef: commentEditorContainerRef
196
+ }
197
+ }, /*#__PURE__*/_react["default"].createElement(_commentArticle["default"], {
198
+ type: type,
199
+ editor: validEditor,
200
+ slateValue: slateValue,
201
+ updateSlateValue: _setSlateValue
202
+ }))), /*#__PURE__*/_react["default"].createElement(_commentEditorToolbar["default"], {
203
+ editor: validEditor,
204
+ onSubmit: onSubmit,
205
+ submitBtnText: submitBtnText,
206
+ onCancel: onCancel
207
+ }))));
208
+ });
209
+ var _default = exports["default"] = SdocCommentEditor;
@@ -25,7 +25,8 @@ var withLink = function withLink(editor) {
25
25
  isInline = editor.isInline,
26
26
  insertData = editor.insertData,
27
27
  insertFragment = editor.insertFragment,
28
- onHotKeyDown = editor.onHotKeyDown;
28
+ onHotKeyDown = editor.onHotKeyDown,
29
+ onCompositionStart = editor.onCompositionStart;
29
30
  var newEditor = editor;
30
31
 
31
32
  // Rewrite isInline
@@ -183,6 +184,7 @@ var withLink = function withLink(editor) {
183
184
  return true;
184
185
  }
185
186
  }
187
+ return onCompositionStart && onCompositionStart(e);
186
188
  };
187
189
  return newEditor;
188
190
  };
@@ -19,7 +19,8 @@ var withMention = function withMention(editor) {
19
19
  isInline = editor.isInline,
20
20
  deleteBackward = editor.deleteBackward,
21
21
  deleteForward = editor.deleteForward,
22
- normalizeNode = editor.normalizeNode;
22
+ normalizeNode = editor.normalizeNode,
23
+ onCompositionStart = editor.onCompositionStart;
23
24
  var newEditor = editor;
24
25
  var eventBus = _eventBus["default"].getInstance();
25
26
  newEditor.insertText = function (text) {
@@ -210,6 +211,7 @@ var withMention = function withMention(editor) {
210
211
  event.preventDefault();
211
212
  return true;
212
213
  }
214
+ return onCompositionStart && onCompositionStart(event);
213
215
  };
214
216
  newEditor.onCompositionEnd = function (event) {
215
217
  var PrevMentionIptEntry = (0, _helper.getPrevMentionIptEntry)(newEditor);
@@ -17,7 +17,8 @@ var withQuickInsert = function withQuickInsert(editor) {
17
17
  onHotKeyDown = editor.onHotKeyDown,
18
18
  isInline = editor.isInline,
19
19
  deleteBackward = editor.deleteBackward,
20
- deleteForward = editor.deleteForward;
20
+ deleteForward = editor.deleteForward,
21
+ onCompositionStart = editor.onCompositionStart;
21
22
  var newEditor = editor;
22
23
  newEditor.isSlashKey = false;
23
24
  newEditor.insertText = function (text) {
@@ -159,6 +160,7 @@ var withQuickInsert = function withQuickInsert(editor) {
159
160
  event.preventDefault();
160
161
  return true;
161
162
  }
163
+ return onCompositionStart && onCompositionStart(event);
162
164
  };
163
165
  newEditor.isInline = function (element) {
164
166
  if ([_constants2.QUICK_INSERT].includes(element.type)) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seafile/sdoc-editor",
3
- "version": "2.0.136-alpha.0",
3
+ "version": "2.0.137",
4
4
  "main": "dist/index.js",
5
5
  "scripts": {
6
6
  "test": "jest",
@@ -17,7 +17,6 @@
17
17
  "license": "ISC",
18
18
  "description": "",
19
19
  "dependencies": {
20
- "@seafile/comment-editor": "^0.0.3",
21
20
  "@seafile/print-js": "1.6.6",
22
21
  "@seafile/react-image-lightbox": "4.0.2",
23
22
  "@seafile/slate": "0.91.8",
@@ -70,5 +69,6 @@
70
69
  },
71
70
  "publishConfig": {
72
71
  "access": "public"
73
- }
74
- }
72
+ },
73
+ "gitHead": "029acc16295db33531ca8a701cc43b9ba5ba62b2"
74
+ }