@seafile/comment-editor 0.0.1-alpha.67 → 0.0.1-alpha.69

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 (3) hide show
  1. package/dist/basic-sdk/editor/comment-editor.js +220 -180
  2. package/dist/pages/seafile-comment-editor.js +10 -1
  3. package/package.json +1 -1
package/dist/basic-sdk/editor/comment-editor.js CHANGED
@@ -30,10 +30,11 @@ var _slateToMd = _interopRequireDefault(require("../slate-convert/slate-to-md"))
30
30
  var _eventBus = _interopRequireDefault(require("../utils/event-bus"));
31
31
  var _eventHandler = _interopRequireDefault(require("../utils/event-handler"));
32
32
  require("./comment-editor.css");
33
- const getSubmitTip = (type, content) => {
34
- if (content) return 'Save';
35
- return type === 'comment' ? 'Comment' : 'Reply';
36
- };
33
+ // const getSubmitTip = (type, content) => {
34
+ // if (content) return 'Save';
35
+ // return type === 'comment' ? 'Comment' : 'Reply';
36
+ // };
37
+
37
38
  const DEFAULT_PLACEHOLDER = 'Enter_comment_shift_enter_for_new_line_Enter_to_send';
38
39
  const CommentEditor = _ref => {
39
40
  let {
@@ -46,182 +47,221 @@ const CommentEditor = _ref => {
46
47
  toolMenus = ['text_style', _constants2.BLOCKQUOTE, _constants2.UNORDERED_LIST, _constants2.ORDERED_LIST, _constants2.LINK, _constants2.IMAGE],
47
48
  closePanel
48
49
  } = _ref;
49
- const commentWrapperRef = (0, _react.useRef)();
50
- const {
51
- t
52
- } = (0, _reactI18next.useTranslation)('sdoc-editor');
53
- const {
54
- className,
55
- userInfo,
56
- type,
57
- addParticipants
58
- } = (0, _useComment.useComment)();
59
- const submitTip = (0, _react.useMemo)(() => getSubmitTip(type, content), [content, type]);
60
- const document = (0, _react.useMemo)(() => {
61
- const cursor = {};
62
- let elements = null;
63
- elements = [(0, _core.generateEmptyElement)(_constants2.PARAGRAPH, {
64
- placeholder
65
- })];
66
- return {
67
- elements,
68
- cursor
69
- };
70
- }, [placeholder]);
71
- const [slateValue, setSlateValue] = (0, _react.useState)(document.elements);
72
- const commentEditorContainerRef = (0, _react.useRef)(null);
73
- const editor = (0, _react.useMemo)(() => {
74
- const defaultEditor = (0, _extension.createCommentEditor)();
75
- const newEditor = (0, _nodeId.default)(defaultEditor);
76
- const {
77
- cursors
78
- } = document;
79
- newEditor.cursors = cursors || {};
80
- newEditor.width = _constants.COMMENT_EDITOR_EDIT_AREA_WIDTH; // default width
81
- newEditor.editorType = _constants.COMMENT_EDITOR;
82
- return newEditor;
83
- }, [document]);
84
- const {
85
- cursors
86
- } = (0, _useCursors.useCursors)(editor);
87
- const decorate = (0, _decorates.usePipDecorate)(editor);
88
- // init eventHandler
89
- // eslint-disable-next-line react-hooks/exhaustive-deps
90
- const eventProxy = (0, _react.useMemo)(() => new _eventHandler.default(editor), []);
91
- const onSubmit = (0, _react.useCallback)(event => {
92
- event && event.stopPropagation();
93
- const mdString = (0, _slateToMd.default)(editor.children);
94
- if (mdString && mdString.trim()) insertContent(mdString);
95
- addParticipants && addParticipants(userInfo.username);
96
- editor.children = [(0, _core.generateEmptyElement)(_constants2.PARAGRAPH, {
97
- placeholder
98
- })];
99
- _slate.Transforms.select(editor, _slate.Editor.start(editor, []));
100
- onContentChange && onContentChange(null);
101
- closePanel && closePanel();
102
- // eslint-disable-next-line react-hooks/exhaustive-deps
103
- }, [editor, insertContent, addParticipants, placeholder, onContentChange, closePanel]);
104
- const onSubmitByEnterKey = (0, _react.useCallback)(event => {
105
- if (!_slateReact.ReactEditor.isFocused(editor)) return;
106
- onSubmit(event);
107
- }, [editor, onSubmit]);
108
-
109
- // addEventListener
110
- (0, _react.useEffect)(() => {
111
- const eventBus = _eventBus.default.getInstance();
112
- const unsubscribePostComment = eventBus.subscribe(_constants.INTERNAL_EVENT.COMMENT_EDITOR_POST_COMMENT, onSubmitByEnterKey);
113
- return () => {
114
- unsubscribePostComment();
115
- };
116
- }, [onSubmitByEnterKey]);
117
- const onCancel = (0, _react.useCallback)(event => {
118
- event.stopPropagation();
119
- const {
120
- type: eventType,
121
- keyCode,
122
- target
123
- } = event;
124
- if (eventType === 'keydown' && keyCode !== _constants.KeyCodes.Esc) return;
125
- if (eventType === 'click') {
126
- const isSdocContentWrapper = target.classList.contains('sdoc-content-wrapper');
127
- const listContainer = window.document.querySelector('#global-comment-list-container');
128
- const resizeContainer = window.document.querySelector('.sdoc-comment-resize-handler');
129
- const isClickOnListContainer = listContainer && listContainer.contains(target);
130
- const isClickOnCommentEditorContainer = commentWrapperRef.current.contains(target);
131
- const isClickResizeContainer = resizeContainer && resizeContainer.contains(target);
132
- const isPreventCancel = isClickOnListContainer || isClickOnCommentEditorContainer || isClickResizeContainer || isSdocContentWrapper;
133
- if (isPreventCancel) return;
134
- }
135
- hiddenComment && hiddenComment(false);
136
- if (onContentChange) {
137
- if (editor.children.find(n => _slate.Node.string(n).trim())) {
138
- onContentChange((0, _slateToMd.default)(editor.children));
139
- } else {
140
- onContentChange(null);
141
- }
142
- }
143
- // eslint-disable-next-line react-hooks/exhaustive-deps
144
- }, []);
145
-
146
- // set editor children
147
- (0, _react.useEffect)(() => {
148
- let children = (0, _mdToSlate.default)(content);
149
- editor.children = children;
150
- // Transforms.select(editor, Editor.end(editor, []));
151
- }, [editor, content]);
152
-
153
- // useMount: focus editor
154
- (0, _react.useEffect)(() => {
155
- const [firstNode] = editor.children;
156
- if (firstNode) {
157
- const [firstNodeFirstChild] = firstNode.children;
158
- if (firstNodeFirstChild) {
159
- const endOfFirstNode = _slate.Editor.end(editor, [0, 0]);
160
- const range = {
161
- anchor: endOfFirstNode,
162
- focus: endOfFirstNode
163
- };
164
- // focusEditor(editor, range);
165
- }
166
- // Force refresh to fix comment list
167
- // setSlateValue([...editor.children]);
168
- }
169
- // eslint-disable-next-line react-hooks/exhaustive-deps
170
- }, []);
171
- const handleFocusEditor = e => {
172
- if (e.target === commentEditorContainerRef.current) {
173
- const focusPoint = _slate.Editor.end(editor, []);
174
- (0, _core.focusEditor)(editor, focusPoint);
175
- }
176
- };
177
- const handleScrollIntoView = (0, _react.useCallback)((editor, domRange) => {
178
- try {
179
- const {
180
- selection
181
- } = editor;
182
- // Do not scroll into view, when focus on image
183
- const [imageNodeEntry] = _slate.Editor.nodes(editor, {
184
- match: n => [_constants2.IMAGE, _constants2.IMAGE_BLOCK].includes(n.type),
185
- at: selection
186
- });
187
- if (imageNodeEntry) return;
188
- const focusedNode = _slate.Node.get(editor, selection.focus.path);
189
- const domNode = _slateReact.ReactEditor.toDOMNode(editor, focusedNode);
190
- if (!domNode) return;
191
- (0, _scrollIntoViewIfNeeded.default)(domNode, {
192
- 'scrollMode': 'if-needed'
193
- });
194
- } catch (error) {
195
- //
196
- }
197
- }, []);
198
- const onMouseDown = (0, _react.useCallback)(event => {
199
- if (event.button === 0) {
200
- // Compatible with the editor which unload table plugin
201
- editor.reSetTableSelectedRange && editor.reSetTableSelectedRange();
202
- const eventBus = _eventBus.default.getInstance();
203
- eventBus.dispatch(_constants.INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE);
204
- }
205
- // eslint-disable-next-line react-hooks/exhaustive-deps
206
- }, []);
207
- const onKeyDown = (0, _react.useCallback)(event => {
208
- if ((0, _isHotkey.default)('enter', event)) {
209
- event.preventDefault();
210
- const eventBus = _eventBus.default.getInstance();
211
- eventBus.dispatch(_constants.INTERNAL_EVENT.COMMENT_EDITOR_POST_COMMENT, event);
212
- return;
213
- }
214
- if ((0, _isHotkey.default)('shift+enter', event)) {
215
- event.preventDefault();
216
- _slate.Editor.insertBreak(editor);
217
- return;
218
- }
219
- eventProxy.onKeyDown(event);
220
- }, [eventProxy, editor]);
50
+ // const commentWrapperRef = useRef();
51
+ // const { t } = useTranslation('sdoc-editor');
52
+ // const { className, userInfo, type, addParticipants } = useComment();
53
+ // const submitTip = useMemo(() => getSubmitTip(type, content), [content, type]);
54
+
55
+ // const document = useMemo(() => {
56
+ // const cursor = {};
57
+ // let elements = null;
58
+ // elements = [generateEmptyElement(PARAGRAPH, { placeholder })];
59
+ // return { elements, cursor };
60
+ // }, [placeholder]);
61
+
62
+ // const [slateValue, setSlateValue] = useState(document.elements);
63
+ // const commentEditorContainerRef = useRef(null);
64
+
65
+ // const editor = useMemo(() => {
66
+ // const defaultEditor = createCommentEditor();
67
+ // const newEditor = withNodeId(defaultEditor);
68
+ // const { cursors } = document;
69
+ // newEditor.cursors = cursors || {};
70
+ // newEditor.width = COMMENT_EDITOR_EDIT_AREA_WIDTH; // default width
71
+ // newEditor.editorType = COMMENT_EDITOR;
72
+
73
+ // return newEditor;
74
+ // }, [document]);
75
+
76
+ // const { cursors } = useCursors(editor);
77
+ // const decorate = usePipDecorate(editor);
78
+ // // init eventHandler
79
+ // // eslint-disable-next-line react-hooks/exhaustive-deps
80
+ // const eventProxy = useMemo(() => new EventProxy(editor), []);
81
+
82
+ // const onSubmit = useCallback((event) => {
83
+ // event && event.stopPropagation();
84
+
85
+ // const mdString = slateToMdString(editor.children);
86
+ // if (mdString && mdString.trim()) insertContent(mdString);
87
+
88
+ // addParticipants && addParticipants(userInfo.username);
89
+
90
+ // editor.children = [generateEmptyElement(PARAGRAPH, { placeholder })];
91
+ // Transforms.select(editor, Editor.start(editor, []));
92
+
93
+ // onContentChange && onContentChange(null);
94
+ // closePanel && closePanel();
95
+ // // eslint-disable-next-line react-hooks/exhaustive-deps
96
+ // }, [editor, insertContent, addParticipants, placeholder, onContentChange, closePanel]);
97
+
98
+ // const onSubmitByEnterKey = useCallback((event) => {
99
+ // if (!ReactEditor.isFocused(editor)) return;
100
+ // onSubmit(event);
101
+ // }, [editor, onSubmit]);
102
+
103
+ // // addEventListener
104
+ // useEffect(() => {
105
+ // const eventBus = EventBus.getInstance();
106
+ // const unsubscribePostComment = eventBus.subscribe(INTERNAL_EVENT.COMMENT_EDITOR_POST_COMMENT, onSubmitByEnterKey);
107
+
108
+ // return () => {
109
+ // unsubscribePostComment();
110
+ // };
111
+ // }, [onSubmitByEnterKey]);
112
+
113
+ // const onCancel = useCallback((event) => {
114
+ // event.stopPropagation();
115
+ // const { type: eventType, keyCode, target } = event;
116
+ // if (eventType === 'keydown' && keyCode !== KeyCodes.Esc) return;
117
+ // if (eventType === 'click') {
118
+ // const isSdocContentWrapper = target.classList.contains('sdoc-content-wrapper');
119
+ // const listContainer = window.document.querySelector('#global-comment-list-container');
120
+ // const resizeContainer = window.document.querySelector('.sdoc-comment-resize-handler');
121
+ // const isClickOnListContainer = listContainer && listContainer.contains(target);
122
+ // const isClickOnCommentEditorContainer = commentWrapperRef.current.contains(target);
123
+ // const isClickResizeContainer = resizeContainer && resizeContainer.contains(target);
124
+ // const isPreventCancel = isClickOnListContainer || isClickOnCommentEditorContainer || isClickResizeContainer || isSdocContentWrapper;
125
+ // if (isPreventCancel) return;
126
+ // }
127
+ // hiddenComment && hiddenComment(false);
128
+
129
+ // if (onContentChange) {
130
+ // if (editor.children.find(n => Node.string(n).trim())) {
131
+ // onContentChange(slateToMdString(editor.children));
132
+ // } else {
133
+ // onContentChange(null);
134
+ // }
135
+ // }
136
+ // // eslint-disable-next-line react-hooks/exhaustive-deps
137
+ // }, []);
138
+
139
+ // // set editor children
140
+ // useEffect(() => {
141
+ // let children = mdStringToSlate(content);
142
+ // editor.children = children;
143
+ // // Transforms.select(editor, Editor.end(editor, []));
144
+ // }, [editor, content]);
145
+
146
+ // // useMount: focus editor
147
+ // useEffect(() => {
148
+ // const [firstNode] = editor.children;
149
+ // if (firstNode) {
150
+ // const [firstNodeFirstChild] = firstNode.children;
151
+
152
+ // if (firstNodeFirstChild) {
153
+ // const endOfFirstNode = Editor.end(editor, [0, 0]);
154
+ // const range = {
155
+ // anchor: endOfFirstNode,
156
+ // focus: endOfFirstNode,
157
+ // };
158
+ // // focusEditor(editor, range);
159
+ // }
160
+ // // Force refresh to fix comment list
161
+ // // setSlateValue([...editor.children]);
162
+ // }
163
+ // // eslint-disable-next-line react-hooks/exhaustive-deps
164
+ // }, []);
165
+
166
+ // const handleFocusEditor = (e) => {
167
+ // if (e.target === commentEditorContainerRef.current) {
168
+ // const focusPoint = Editor.end(editor, []);
169
+ // focusEditor(editor, focusPoint);
170
+ // }
171
+ // };
172
+
173
+ // const handleScrollIntoView = useCallback((editor, domRange) => {
174
+ // try {
175
+ // const { selection } = editor;
176
+ // // Do not scroll into view, when focus on image
177
+ // const [imageNodeEntry] = Editor.nodes(editor, {
178
+ // match: n => [IMAGE, IMAGE_BLOCK].includes(n.type),
179
+ // at: selection
180
+ // });
181
+ // if (imageNodeEntry) return;
182
+ // const focusedNode = Node.get(editor, selection.focus.path);
183
+ // const domNode = ReactEditor.toDOMNode(editor, focusedNode);
184
+ // if (!domNode) return;
185
+ // scrollIntoView(domNode, { 'scrollMode': 'if-needed' });
186
+ // } catch (error) {
187
+ // //
188
+ // }
189
+ // }, []);
190
+
191
+ // const onMouseDown = useCallback((event) => {
192
+ // if (event.button === 0) {
193
+ // // Compatible with the editor which unload table plugin
194
+ // editor.reSetTableSelectedRange && editor.reSetTableSelectedRange();
195
+ // const eventBus = EventBus.getInstance();
196
+ // eventBus.dispatch(INTERNAL_EVENT.CANCEL_TABLE_SELECT_RANGE);
197
+ // }
198
+ // // eslint-disable-next-line react-hooks/exhaustive-deps
199
+ // }, []);
200
+
201
+ // const onKeyDown = useCallback((event) => {
202
+ // if (isHotkey('enter', event)) {
203
+ // event.preventDefault();
204
+ // const eventBus = EventBus.getInstance();
205
+ // eventBus.dispatch(INTERNAL_EVENT.COMMENT_EDITOR_POST_COMMENT, event);
206
+ // return;
207
+ // }
208
+
209
+ // if (isHotkey('shift+enter', event)) {
210
+ // event.preventDefault();
211
+ // Editor.insertBreak(editor);
212
+ // return;
213
+ // }
214
+
215
+ // eventProxy.onKeyDown(event);
216
+
217
+ // }, [eventProxy, editor]);
218
+
221
219
  console.log('toolMenus', toolMenus);
222
- return /*#__PURE__*/_react.default.createElement("div", {
223
- className: (0, _classnames.default)('comment-editor-wrapper', className),
224
- ref: commentWrapperRef
225
- });
220
+ return /*#__PURE__*/_react.default.createElement("div", null, "123")
221
+ // <div className={classNames('comment-editor-wrapper', className)} ref={commentWrapperRef}>
222
+ // {type === 'comment' && !hiddenUserInfo && (
223
+ // <div className="comment-editor-user-info">
224
+ // <div className="comment-editor-user-img">
225
+ // <img src={userInfo.avatar_url} alt="" height="100%" width="100%" />
226
+ // </div>
227
+ // <div className="comment-editor-user-name">{userInfo.name}</div>
228
+ // </div>
229
+ // )}
230
+ // <div className='comment-editor-container'>
231
+ // <div className="comment-editor-content">
232
+ // <div ref={commentEditorContainerRef} className='article comment-editor' onClick={handleFocusEditor} >
233
+ // <ScrollContext.Provider value={{ scrollRef: commentEditorContainerRef }}>
234
+ // <Slate editor={editor} value={slateValue} onChange={setSlateValue}>
235
+ // <Editable
236
+ // id='sdoc-editor'
237
+ // scrollSelectionIntoView={handleScrollIntoView}
238
+ // cursors={cursors}
239
+ // renderElement={(props) => RenderCommentEditorCustomRenderElement({ ...props, commentType: type })}
240
+ // renderLeaf={renderLeaf}
241
+ // onMouseDown={onMouseDown}
242
+ // decorate={decorate}
243
+ // onCut={eventProxy.onCut}
244
+ // onCopy={eventProxy.onCopy}
245
+ // onCompositionStart={eventProxy.onCompositionStart}
246
+ // onCompositionUpdate={eventProxy.onCompositionUpdate}
247
+ // onCompositionEnd={eventProxy.onCompositionEnd}
248
+ // onKeyDown={onKeyDown}
249
+ // onBeforeInput={eventProxy.onBeforeInput}
250
+ // />
251
+ // </Slate>
252
+ // </ScrollContext.Provider>
253
+ // </div>
254
+ // <CommentEditorToolbar
255
+ // editor={editor}
256
+ // toolMenus={toolMenus}
257
+ // onSubmit={onSubmit}
258
+ // submitBtnText={t(submitTip)}
259
+ // onCancel={onCancel}
260
+ // />
261
+ // </div>
262
+ // </div>
263
+ // {toolMenus.includes(IMAGE) && <InsertElementDialog editor={editor} />}
264
+ // </div>
265
+ ;
226
266
  };
227
267
  var _default = exports.default = CommentEditor;
package/dist/pages/seafile-comment-editor.js CHANGED
@@ -53,7 +53,16 @@ const SeafileCommentEditor = _ref => {
53
53
  collaborators: collaborators,
54
54
  participants: participants,
55
55
  addParticipants: addParticipants
56
- }, /*#__PURE__*/_react.default.createElement("div", null, "123")))
56
+ }, /*#__PURE__*/_react.default.createElement(_basicSdk.CommentEditor, {
57
+ content: content,
58
+ insertContent: insertContent,
59
+ onContentChange: onContentChange,
60
+ hiddenUserInfo: hiddenUserInfo,
61
+ hiddenComment: hiddenComment,
62
+ toolMenus: toolMenus,
63
+ closePanel: closePanel,
64
+ addParticipants: addParticipants
65
+ })))
57
66
  // </I18nextProvider>
58
67
  );
59
68
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seafile/comment-editor",
3
- "version": "0.0.1-alpha.67",
3
+ "version": "0.0.1-alpha.69",
4
4
  "private": false,
5
5
  "description": "This is a comment editor",
6
6
  "main": "dist/index.js",