@seafile/sdoc-editor 0.5.33 → 0.5.35

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.
@@ -23,7 +23,7 @@ const CommentItemResolvedReply = _ref => {
23
23
  className: "name"
24
24
  }, reply.user_name), /*#__PURE__*/React.createElement("span", {
25
25
  className: "time"
26
- }, dayjs(reply.updated_at).format('MM-DD HH:mm'))))), /*#__PURE__*/React.createElement("div", {
26
+ }, dayjs(reply.updated_at).format('MM-DD HH:mm'))))), /*#__PURE__*/React.createElement("p", {
27
27
  className: "comment-content"
28
28
  }, reply.reply === 'True' && /*#__PURE__*/React.createElement("div", null, t('Mark_as_Resolved')), reply.reply === 'False' && /*#__PURE__*/React.createElement("div", null, t('Resubmitted')))));
29
29
  };
@@ -4,6 +4,7 @@
4
4
 
5
5
  .sdoc-comment-list-container {
6
6
  position: absolute;
7
+ margin-top: 5px;
7
8
  }
8
9
 
9
10
  .sdoc-comment-list-container .comment-ui-container {
@@ -19,11 +20,12 @@
19
20
  position: relative;
20
21
  left: -24px;
21
22
  background: rgba(255, 255, 255, .92);
22
- box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15);
23
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .15), 0 4px 8px 3px rgba(0, 0, 0, .15);
23
24
  }
24
25
 
25
26
  .sdoc-comment-drawer .sdoc-comment-list-container .comment-ui-container {
26
- padding: 16px 0;
27
+ padding: 0;
28
+ padding-bottom: 16px;
27
29
  }
28
30
 
29
31
  .sdoc-comment-list-container .comment-item-selected-text-container {
@@ -93,7 +95,7 @@
93
95
  }
94
96
 
95
97
  .comment-item .comment-content {
96
- font-size: 11pt;
98
+ font-size: 14px;
97
99
  }
98
100
 
99
101
  .comment-item .comment-content ol,
@@ -250,6 +252,10 @@
250
252
  width: 365px;
251
253
  }
252
254
 
255
+ .sdoc-comment-container .comment-container-right .sdoc-editor-container {
256
+ width: auto;
257
+ }
258
+
253
259
  .article.sdoc-comment-editor :first-child {
254
260
  margin-top: 0 !important;
255
261
  }
@@ -60,7 +60,7 @@ const GlobalCommentBodyHeader = _ref2 => {
60
60
  }, /*#__PURE__*/React.createElement("div", {
61
61
  id: id
62
62
  }, t(commentType))), /*#__PURE__*/React.createElement(DropdownMenu, {
63
- className: "sdoc-dropdown-menu",
63
+ className: "sdoc-dropdown-menu sdoc-comment-filter-dropdown",
64
64
  container: "comment-types"
65
65
  }, /*#__PURE__*/React.createElement(CommentTypeDropdownItem, {
66
66
  type: COMMENT_TYPES.ALL,
@@ -1,12 +1,16 @@
1
1
  import React from 'react';
2
+ import classNames from 'classnames';
2
3
  import CommentEditor from '../comment-editor';
3
4
  const GlobalCommentEditor = _ref => {
4
5
  let {
5
6
  insertDocComment,
6
- hiddenCommentEditor
7
+ hiddenCommentEditor,
8
+ isScrollDisplayed
7
9
  } = _ref;
8
10
  return /*#__PURE__*/React.createElement("div", {
9
- className: "sdoc-doc-comment-editor-container sdoc-comment-list-container"
11
+ className: classNames('sdoc-doc-comment-editor-container', 'sdoc-comment-list-container', {
12
+ 'scrolled': isScrollDisplayed
13
+ })
10
14
  }, /*#__PURE__*/React.createElement("div", {
11
15
  className: "comment-ui-container active"
12
16
  }, /*#__PURE__*/React.createElement(CommentEditor, {
@@ -25,14 +25,14 @@
25
25
  }
26
26
 
27
27
  .sdoc-comment-drawer .sdoc-comment-resize-handler:hover {
28
- border-left: 2px solid #d8d8d8;
28
+ border-left: 1px solid #d8d8d8;
29
29
  }
30
30
 
31
31
  .sdoc-comment-resize-handler .sdoc-comment-move-dragger {
32
32
  display: none;
33
33
  position: absolute;
34
34
  top: 0px;
35
- left: -3px;
35
+ left: -4px;
36
36
  width: 6px;
37
37
  height: 30px;
38
38
  border-radius: 3px;
@@ -139,16 +139,21 @@
139
139
 
140
140
  /* doc comment add editor */
141
141
  .sdoc-comment-drawer .comments-panel-body .sdoc-doc-comment-editor-container {
142
+ padding: 0 16px;
142
143
  position: absolute;
143
- left: 16px;
144
- width: calc(100% - 32px);
145
- background-color: #fff;
146
- top: 78px;
144
+ top: 120px;
145
+ width: 100%;
146
+ }
147
+
148
+ .sdoc-comment-drawer .comments-panel-body .sdoc-doc-comment-editor-container.scrolled {
149
+ width: calc(100% - 1em);
147
150
  }
148
151
 
152
+
149
153
  .sdoc-comment-drawer .sdoc-doc-comment-editor-container .comment-ui-container.active {
150
- left: 0;
151
154
  margin-bottom: 0;
155
+ padding: 16px;
156
+ left: 0;
152
157
  }
153
158
 
154
159
  /* custom */
@@ -161,3 +166,7 @@
161
166
  background-color: #F5F5F5;
162
167
  border-bottom: 1px solid #c7c7c7;
163
168
  }
169
+
170
+ .comments-panel-body__header .sdoc-comment-filter-dropdown.sdoc-dropdown-menu {
171
+ border: 1px solid #dee3eb;
172
+ }
@@ -1,5 +1,5 @@
1
1
  import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
2
- import React, { useCallback, useEffect, useRef, useState } from 'react';
2
+ import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
3
3
  import dayjs from 'dayjs';
4
4
  import EventBus from '../../../utils/event-bus';
5
5
  import useCommentList from '../../hooks/comment-hooks/use-comment-list';
@@ -22,6 +22,7 @@ const GlobalComment = _ref => {
22
22
  const [isShowCommentList, setShowCommentList] = useState(false);
23
23
  const [showEditor, setShowEditor] = useState(false);
24
24
  const [draggerStyle, setDraggerStyle] = useState({});
25
+ const [isScrollDisplayed, setIsScrollDisplayed] = useState(false);
25
26
  const commentRef = useRef(null);
26
27
  const contentRef = useRef(null);
27
28
  const commentDrawerRef = useRef(null);
@@ -59,17 +60,20 @@ const GlobalComment = _ref => {
59
60
  });
60
61
  }, []);
61
62
  const handleResizeEnd = useCallback(e => {
62
- e.preventDefault();
63
- e.stopPropagation();
64
63
  isResizingRef.current = false;
65
64
  document.removeEventListener('mouseup', handleResizeEnd);
66
65
  handleHideDragger();
67
66
  }, [handleHideDragger]);
67
+ const detectScroll = useCallback(() => {
68
+ if (!contentRef.current) return;
69
+ const contentContainer = contentRef.current;
70
+ const isShowScroll = contentContainer.scrollHeight > contentContainer.clientHeight;
71
+ setIsScrollDisplayed(isShowScroll);
72
+ }, []);
68
73
  const handleResizing = useCallback(e => {
69
- e.preventDefault();
70
- e.stopPropagation();
71
74
  const commentDrawer = commentDrawerRef.current;
72
75
  if (isResizingRef.current && commentDrawer) {
76
+ console.log('999', 999);
73
77
  let width = commentDrawer.offsetWidth - e.movementX;
74
78
  // Limit the width of the comment drawer
75
79
  width = Math.min(width, 620);
@@ -80,11 +84,10 @@ const GlobalComment = _ref => {
80
84
  width,
81
85
  isShrink
82
86
  });
87
+ detectScroll();
83
88
  }
84
- }, [setArticleContainerStyle]);
89
+ }, [detectScroll, setArticleContainerStyle]);
85
90
  const handleResizeStart = useCallback(e => {
86
- e.preventDefault();
87
- e.stopPropagation();
88
91
  isResizingRef.current = true;
89
92
  document.addEventListener('mouseup', handleResizeEnd);
90
93
  document.addEventListener('mousemove', handleResizing);
@@ -98,6 +101,9 @@ const GlobalComment = _ref => {
98
101
  eventBus.dispatch(INTERNAL_EVENT.OUTLINE_STATE_CHANGED);
99
102
  };
100
103
  }, [handleResizing, toggle]);
104
+ useEffect(() => {
105
+ detectScroll();
106
+ }, [commentList, detectScroll, isShowCommentList]);
101
107
  const updateScrollPosition = useCallback(() => {
102
108
  const resolvedDom = document.querySelector('.sdoc-resolved');
103
109
  contentRef.current.scrollTo({
@@ -152,7 +158,8 @@ const GlobalComment = _ref => {
152
158
  updated_at: time
153
159
  };
154
160
  insertComment(elementId, comment);
155
- }, [insertComment]);
161
+ detectScroll();
162
+ }, [detectScroll, insertComment]);
156
163
  const toggleGlobalCommentEditor = useCallback(() => {
157
164
  setShowEditor(!showEditor);
158
165
  setActiveComment(null);
@@ -227,6 +234,7 @@ const GlobalComment = _ref => {
227
234
  isClickCommentPanelBody: isClickCommentPanelBody
228
235
  });
229
236
  }))), showEditor && /*#__PURE__*/React.createElement(GlobalCommentEditor, {
237
+ isScrollDisplayed: isScrollDisplayed,
230
238
  isClickCommentPanelBody: isClickCommentPanelBody,
231
239
  hiddenCommentEditor: hiddenCommentEditor,
232
240
  insertDocComment: insertDocComment
@@ -9,8 +9,6 @@ export const isMenuDisabled = function (editor) {
9
9
  match: n => {
10
10
  let type = getNodeType(n);
11
11
  if (!type) return false;
12
- if (type === ELEMENT_TYPE.CODE_LINE) return true;
13
- if (type === ELEMENT_TYPE.CODE_BLOCK) return true;
14
12
  if (type === ELEMENT_TYPE.PARAGRAPH) return true;
15
13
  if (type.startsWith(HEADER)) return true;
16
14
  if (type === TITLE) return true;
@@ -4,7 +4,7 @@
4
4
  z-index: 101;
5
5
  width: auto;
6
6
  }
7
-
7
+
8
8
  .sdoc-image-hover-menu-container .hover-menu-container {
9
9
  height: 36px;
10
10
  background-color: #fff;
@@ -16,7 +16,11 @@
16
16
  border: 1px solid #e8e8e8;
17
17
  }
18
18
 
19
- .sdoc-image-hover-menu-container .hover-menu-container > span:not(:last-of-type) {
19
+ .sdoc-image-hover-menu-container .hover-menu-container>span {
20
+ padding: 0 8px;
21
+ }
22
+
23
+ .sdoc-image-hover-menu-container .hover-menu-container>span:not(:last-of-type) {
20
24
  padding: 0 8px;
21
25
  border-right: 1px solid #e5e5e5;
22
26
  }
@@ -40,10 +44,6 @@
40
44
  background: #f1f1f1;
41
45
  }
42
46
 
43
- .sdoc-image-hover-menu-container .op-group-item:last-child .op-item {
44
- margin-left: 8px;
45
- }
46
-
47
47
  .sdoc-image-hover-menu-container .hover-menu-container .active {
48
48
  background: #f1f1f1;
49
49
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seafile/sdoc-editor",
3
- "version": "0.5.33",
3
+ "version": "0.5.35",
4
4
  "private": false,
5
5
  "description": "This is a sdoc editor",
6
6
  "main": "dist/index.js",