@seafile/sdoc-editor 0.3.10 → 0.3.12
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/dist/basic-sdk/comment/components/comment-item-wrapper.js +13 -5
- package/dist/basic-sdk/comment/components/comment-list.css +15 -0
- package/dist/basic-sdk/comment/components/comment-participants-editor/index.css +17 -17
- package/dist/basic-sdk/comment/components/comment-participants-editor/index.js +1 -1
- package/dist/basic-sdk/comment/components/comment-participants-editor/searched-collaborators.js +5 -5
- package/dist/basic-sdk/comment/components/comment-participants-editor/selected-participants.js +4 -4
- package/dist/basic-sdk/comment/components/elements-comment-count/element-comment-count.js +3 -11
- package/dist/basic-sdk/comment/components/global-comment/global-comment-body-header.js +1 -1
- package/dist/basic-sdk/comment/components/global-comment/index.css +12 -0
- package/dist/basic-sdk/comment/components/global-comment/index.js +13 -4
- package/dist/basic-sdk/comment/utils/index.js +13 -0
- package/dist/basic-sdk/extension/plugins/callout/plugin.js +57 -0
- package/package.json +1 -1
- package/public/media/sdoc-editor-font/iconfont.eot +0 -0
- package/public/media/sdoc-editor-font/iconfont.svg +2 -0
- package/public/media/sdoc-editor-font/iconfont.ttf +0 -0
- package/public/media/sdoc-editor-font/iconfont.woff +0 -0
- package/public/media/sdoc-editor-font/iconfont.woff2 +0 -0
- package/public/media/sdoc-editor-font.css +10 -6
|
@@ -2,6 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
|
2
2
|
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
3
3
|
import dayjs from 'dayjs';
|
|
4
4
|
import classNames from 'classnames';
|
|
5
|
+
import { Node } from '@seafile/slate';
|
|
5
6
|
import context from '../../../context';
|
|
6
7
|
import { useCommentContext } from '../hooks/comment-hooks/use-comment-context';
|
|
7
8
|
import CommentItemContent from './comment-item-content';
|
|
@@ -10,9 +11,10 @@ import CommentEditor from './comment-editor';
|
|
|
10
11
|
import CommentItemResolvedReply from './comment-item-resolved-reply';
|
|
11
12
|
import CommentDeleteShadow from './comment-delete-shadow';
|
|
12
13
|
import { COMMENT_URL_CLASSNAME } from '../constants';
|
|
13
|
-
|
|
14
|
+
const CommentItemWrapper = _ref => {
|
|
14
15
|
let {
|
|
15
16
|
container,
|
|
17
|
+
element,
|
|
16
18
|
isActive,
|
|
17
19
|
comment,
|
|
18
20
|
onCommentClick,
|
|
@@ -227,14 +229,19 @@ export default function CommentItemWrapper(_ref) {
|
|
|
227
229
|
}, [isActive]);
|
|
228
230
|
const className = classNames('comment-ui-container', {
|
|
229
231
|
'active': isActive,
|
|
230
|
-
'sdoc-resolved': comment.resolved
|
|
232
|
+
'sdoc-resolved': comment.resolved,
|
|
233
|
+
'd-flex flex-column pt-0': element
|
|
231
234
|
});
|
|
232
235
|
const tip = comment.resolved ? 'Reopen_discussion' : 'Enter_a_reply';
|
|
233
236
|
return /*#__PURE__*/React.createElement("div", {
|
|
234
237
|
id: "comment-item-wrapper_".concat(comment.id),
|
|
235
238
|
className: className,
|
|
236
239
|
onClick: onItemClick
|
|
237
|
-
}, /*#__PURE__*/React.createElement("
|
|
240
|
+
}, element && /*#__PURE__*/React.createElement("div", {
|
|
241
|
+
className: "comment-item-selected-text"
|
|
242
|
+
}, /*#__PURE__*/React.createElement("i", {
|
|
243
|
+
className: "sdocfont sdoc-selected-text mr-2"
|
|
244
|
+
}), Node.string(element)), /*#__PURE__*/React.createElement("ul", {
|
|
238
245
|
ref: listRef,
|
|
239
246
|
className: "comment-item-list"
|
|
240
247
|
}, /*#__PURE__*/React.createElement(CommentItemContent, {
|
|
@@ -277,7 +284,8 @@ export default function CommentItemWrapper(_ref) {
|
|
|
277
284
|
deleteConfirm: _deleteComment,
|
|
278
285
|
setIsShowDeleteModal: setIsShowDeleteDialog
|
|
279
286
|
}));
|
|
280
|
-
}
|
|
287
|
+
};
|
|
281
288
|
CommentItemWrapper.defaultProps = {
|
|
282
289
|
container: 'sdoc-comment-list-container'
|
|
283
|
-
};
|
|
290
|
+
};
|
|
291
|
+
export default CommentItemWrapper;
|
|
@@ -18,6 +18,21 @@
|
|
|
18
18
|
box-shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15);
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
.sdoc-comment-list-container .comment-item-selected-text {
|
|
22
|
+
padding: 6px 16px;
|
|
23
|
+
width: 100%;
|
|
24
|
+
overflow: hidden;
|
|
25
|
+
text-overflow: ellipsis;
|
|
26
|
+
white-space: nowrap;
|
|
27
|
+
font-size: 14px;
|
|
28
|
+
line-height: 20px;
|
|
29
|
+
border-radius: 8px 8px 0 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.sdoc-comment-list-container .comment-item-selected-text .sdoc-selected-text {
|
|
33
|
+
font-size: 12px;
|
|
34
|
+
}
|
|
35
|
+
|
|
21
36
|
.sdoc-comment-list-container .comment-item-list {
|
|
22
37
|
max-height: 350px;
|
|
23
38
|
min-width: 280px;
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
width: 280px;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
.sdoc-comments-participants-popover .selected-participants {
|
|
11
|
+
.sdoc-comments-participants-popover .sdoc-selected-participants {
|
|
12
12
|
background-color: #f6f6f6;
|
|
13
13
|
padding: 5px;
|
|
14
14
|
border-bottom: 1px solid #dde2ea;
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
min-height: 34px;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
.sdoc-comments-participants-popover .selected-participant {
|
|
19
|
+
.sdoc-comments-participants-popover .sdoc-selected-participant {
|
|
20
20
|
display: inline-flex;
|
|
21
21
|
align-items: center;
|
|
22
22
|
height: 20px;
|
|
@@ -27,20 +27,20 @@
|
|
|
27
27
|
background: #eaeaea;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
.sdoc-comments-participants-popover .selected-participant img {
|
|
30
|
+
.sdoc-comments-participants-popover .sdoc-selected-participant img {
|
|
31
31
|
width: 16px;
|
|
32
32
|
height: 16px;
|
|
33
33
|
border-radius: 50%;
|
|
34
34
|
vertical-align: middle;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
.sdoc-comments-participants-popover .selected-participant .selected-participant-name {
|
|
37
|
+
.sdoc-comments-participants-popover .sdoc-selected-participant .sdoc-selected-participant-name {
|
|
38
38
|
margin-left: 4px;
|
|
39
39
|
flex: 1 1;
|
|
40
40
|
color: #16181b;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
.sdoc-comments-participants-popover .selected-participant .selected-participant-delete {
|
|
43
|
+
.sdoc-comments-participants-popover .sdoc-selected-participant .sdoc-selected-participant-delete {
|
|
44
44
|
width: 20px;
|
|
45
45
|
height: 20px;
|
|
46
46
|
display: flex;
|
|
@@ -50,25 +50,25 @@
|
|
|
50
50
|
cursor: pointer;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
|
-
.sdoc-comments-participants-popover .selected-participant .selected-participant-delete .sdocfont {
|
|
53
|
+
.sdoc-comments-participants-popover .sdoc-selected-participant .sdoc-selected-participant-delete .sdocfont {
|
|
54
54
|
display: inline-block;
|
|
55
55
|
font-size: 12px;
|
|
56
56
|
color: #909090;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
.sdoc-comments-participants-popover .selected-participant .selected-participant-delete:hover .sdocfont {
|
|
59
|
+
.sdoc-comments-participants-popover .sdoc-selected-participant .sdoc-selected-participant-delete:hover .sdocfont {
|
|
60
60
|
color: #5a5a5a;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
.sdoc-comments-participants-popover .search-collaborators {
|
|
63
|
+
.sdoc-comments-participants-popover .sdoc-search-collaborators {
|
|
64
64
|
padding: 10px;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
-
.sdoc-comments-participants-popover .search-collaborators input {
|
|
67
|
+
.sdoc-comments-participants-popover .sdoc-search-collaborators input {
|
|
68
68
|
height: 28px;
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
.sdoc-comments-participants-popover .searched-collaborators {
|
|
71
|
+
.sdoc-comments-participants-popover .sdoc-searched-collaborators {
|
|
72
72
|
display: flex;
|
|
73
73
|
flex-direction: column;
|
|
74
74
|
align-items: center;
|
|
@@ -77,13 +77,13 @@
|
|
|
77
77
|
overflow: auto;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
-
.sdoc-comments-participants-popover .searched-collaborators.empty-tip {
|
|
80
|
+
.sdoc-comments-participants-popover .sdoc-searched-collaborators.sdoc-searched-collaborators-empty-tip {
|
|
81
81
|
opacity: .5;
|
|
82
82
|
font-size: 14px;
|
|
83
83
|
align-items: flex-start;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
|
-
.sdoc-comments-participants-popover .searched-collaborator {
|
|
86
|
+
.sdoc-comments-participants-popover .sdoc-searched-collaborator {
|
|
87
87
|
display: flex;
|
|
88
88
|
align-items: center;
|
|
89
89
|
width: 100%;
|
|
@@ -96,12 +96,12 @@
|
|
|
96
96
|
font-size: 14px;
|
|
97
97
|
}
|
|
98
98
|
|
|
99
|
-
.sdoc-comments-participants-popover .searched-collaborator:hover {
|
|
99
|
+
.sdoc-comments-participants-popover .sdoc-searched-collaborator:hover {
|
|
100
100
|
cursor: pointer;
|
|
101
101
|
background-color: #f8f9fa;
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
.sdoc-comments-participants-popover .searched-collaborator img {
|
|
104
|
+
.sdoc-comments-participants-popover .sdoc-searched-collaborator img {
|
|
105
105
|
width: 16px;
|
|
106
106
|
height: 16px;
|
|
107
107
|
margin-left: 10px;
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
vertical-align: middle;
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
-
.sdoc-comments-participants-popover .searched-collaborator .selected-participant-name {
|
|
112
|
+
.sdoc-comments-participants-popover .sdoc-searched-collaborator .sdoc-selected-participant-name {
|
|
113
113
|
flex: 1;
|
|
114
114
|
overflow: hidden;
|
|
115
115
|
text-overflow: ellipsis;
|
|
@@ -118,7 +118,7 @@
|
|
|
118
118
|
color: #16181b;
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
-
.sdoc-comments-participants-popover .searched-collaborator .searched-collaborator-operation {
|
|
121
|
+
.sdoc-comments-participants-popover .sdoc-searched-collaborator .sdoc-searched-collaborator-operation {
|
|
122
122
|
width: 20px;
|
|
123
123
|
height: 20px;
|
|
124
124
|
display: flex;
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
justify-content: center;
|
|
127
127
|
}
|
|
128
128
|
|
|
129
|
-
.sdoc-comments-participants-popover .searched-collaborator .searched-collaborator-operation .sdocfont {
|
|
129
|
+
.sdoc-comments-participants-popover .sdoc-searched-collaborator .sdoc-searched-collaborator-operation .sdocfont {
|
|
130
130
|
font-size: 12px;
|
|
131
131
|
color: #798d99;
|
|
132
132
|
}
|
|
@@ -46,7 +46,7 @@ const CommentParticipantsEditor = forwardRef((_ref, ref) => {
|
|
|
46
46
|
className: "sdoc-comments-participants-editor-container",
|
|
47
47
|
onClick: event => eventStopPropagation(event)
|
|
48
48
|
}, /*#__PURE__*/React.createElement(SelectedParticipants, null), /*#__PURE__*/React.createElement("div", {
|
|
49
|
-
className: "search-collaborators"
|
|
49
|
+
className: "sdoc-search-collaborators"
|
|
50
50
|
}, /*#__PURE__*/React.createElement("input", {
|
|
51
51
|
className: "form-control",
|
|
52
52
|
type: "text",
|
package/dist/basic-sdk/comment/components/comment-participants-editor/searched-collaborators.js
CHANGED
|
@@ -24,11 +24,11 @@ const SearchedCollaborators = _ref => {
|
|
|
24
24
|
}, [deleteParticipant, addParticipants]);
|
|
25
25
|
if (!Array.isArray(collaborators) || collaborators.length === 0) {
|
|
26
26
|
return /*#__PURE__*/React.createElement("div", {
|
|
27
|
-
className: "searched-collaborators empty-tip"
|
|
27
|
+
className: "sdoc-searched-collaborators sdoc-searched-collaborators-empty-tip"
|
|
28
28
|
}, t('No_collaborators_available'));
|
|
29
29
|
}
|
|
30
30
|
return /*#__PURE__*/React.createElement("div", {
|
|
31
|
-
className: "searched-collaborators"
|
|
31
|
+
className: "sdoc-searched-collaborators"
|
|
32
32
|
}, collaborators.map(collaborator => {
|
|
33
33
|
const {
|
|
34
34
|
name,
|
|
@@ -38,15 +38,15 @@ const SearchedCollaborators = _ref => {
|
|
|
38
38
|
const isSelected = participants.find(participant => participant.username === username);
|
|
39
39
|
return /*#__PURE__*/React.createElement("div", {
|
|
40
40
|
key: username,
|
|
41
|
-
className: "searched-collaborator",
|
|
41
|
+
className: "sdoc-searched-collaborator",
|
|
42
42
|
onClick: event => onSelectParticipant(event, collaborator, isSelected)
|
|
43
43
|
}, /*#__PURE__*/React.createElement("img", {
|
|
44
44
|
src: avatar_url,
|
|
45
45
|
alt: ""
|
|
46
46
|
}), /*#__PURE__*/React.createElement("div", {
|
|
47
|
-
className: "selected-participant-name"
|
|
47
|
+
className: "sdoc-selected-participant-name"
|
|
48
48
|
}, name), /*#__PURE__*/React.createElement("div", {
|
|
49
|
-
className: "searched-collaborator-operation"
|
|
49
|
+
className: "sdoc-searched-collaborator-operation"
|
|
50
50
|
}, isSelected && /*#__PURE__*/React.createElement("i", {
|
|
51
51
|
className: "sdocfont sdoc-check-mark"
|
|
52
52
|
})));
|
package/dist/basic-sdk/comment/components/comment-participants-editor/selected-participants.js
CHANGED
|
@@ -14,7 +14,7 @@ const SelectedParticipants = () => {
|
|
|
14
14
|
}, [deleteParticipant]);
|
|
15
15
|
if (!Array.isArray(participants) || participants.length === 0) return null;
|
|
16
16
|
return /*#__PURE__*/React.createElement("div", {
|
|
17
|
-
className: "selected-participants"
|
|
17
|
+
className: "sdoc-selected-participants"
|
|
18
18
|
}, participants.map(participant => {
|
|
19
19
|
const {
|
|
20
20
|
name,
|
|
@@ -23,14 +23,14 @@ const SelectedParticipants = () => {
|
|
|
23
23
|
} = participant;
|
|
24
24
|
return /*#__PURE__*/React.createElement("div", {
|
|
25
25
|
key: username,
|
|
26
|
-
className: "selected-participant"
|
|
26
|
+
className: "sdoc-selected-participant"
|
|
27
27
|
}, /*#__PURE__*/React.createElement("img", {
|
|
28
28
|
src: avatar_url,
|
|
29
29
|
alt: ""
|
|
30
30
|
}), /*#__PURE__*/React.createElement("div", {
|
|
31
|
-
className: "selected-participant-name"
|
|
31
|
+
className: "sdoc-selected-participant-name"
|
|
32
32
|
}, name), /*#__PURE__*/React.createElement("div", {
|
|
33
|
-
className: "selected-participant-delete",
|
|
33
|
+
className: "sdoc-selected-participant-delete",
|
|
34
34
|
onClick: () => onDeleteParticipant(participant),
|
|
35
35
|
title: t('Delete')
|
|
36
36
|
}, /*#__PURE__*/React.createElement("i", {
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import React, { useCallback, useEffect, useState } from 'react';
|
|
2
2
|
import { useSlateStatic } from '@seafile/slate-react';
|
|
3
|
-
import {
|
|
4
|
-
import { getNodeById, focusEditor, findPath } from '../../../extension/core';
|
|
3
|
+
import { getNodeById } from '../../../extension/core';
|
|
5
4
|
import { useScrollContext } from '../../../hooks/use-scroll-context';
|
|
6
5
|
import { getElementCommentCountTop } from '../../helper';
|
|
7
6
|
import { eventStopPropagation } from '../../../utils/mouse-event';
|
|
8
|
-
import {
|
|
7
|
+
import { focusToCommentElement } from '../../utils';
|
|
9
8
|
const ElementCommentCount = _ref => {
|
|
10
9
|
let {
|
|
11
10
|
elementId,
|
|
@@ -17,14 +16,7 @@ const ElementCommentCount = _ref => {
|
|
|
17
16
|
const [top, setTop] = useState(-9999);
|
|
18
17
|
const onClick = useCallback(event => {
|
|
19
18
|
eventStopPropagation(event);
|
|
20
|
-
|
|
21
|
-
const endOfFirstNode = Editor.end(editor, path);
|
|
22
|
-
const startOfFirstNode = Editor.start(editor, path);
|
|
23
|
-
const range = {
|
|
24
|
-
anchor: [ELEMENT_TYPE.LIST_ITEM, ELEMENT_TYPE.ORDERED_LIST, ELEMENT_TYPE.UNORDERED_LIST].includes(element.type) ? startOfFirstNode : endOfFirstNode,
|
|
25
|
-
focus: endOfFirstNode
|
|
26
|
-
};
|
|
27
|
-
focusEditor(editor, range);
|
|
19
|
+
focusToCommentElement(editor, element);
|
|
28
20
|
}, [editor, element]);
|
|
29
21
|
useEffect(() => {
|
|
30
22
|
var _scrollRef$current;
|
|
@@ -50,6 +50,7 @@
|
|
|
50
50
|
flex-direction: column;
|
|
51
51
|
min-height: 0;
|
|
52
52
|
position: relative;
|
|
53
|
+
background-color: #F5F5F5;
|
|
53
54
|
}
|
|
54
55
|
|
|
55
56
|
.global-comments-popover .comments-panel-body__header {
|
|
@@ -128,3 +129,14 @@
|
|
|
128
129
|
left: 0;
|
|
129
130
|
margin-bottom: 0;
|
|
130
131
|
}
|
|
132
|
+
|
|
133
|
+
/* custom */
|
|
134
|
+
.global-comments-popover .sdoc-comment-list-container .comment-ui-container {
|
|
135
|
+
background-color: #FFF;
|
|
136
|
+
border: 1px solid #c7c7c7;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.global-comments-popover .sdoc-comment-list-container .comment-item-selected-text {
|
|
140
|
+
background-color: #F5F5F5;
|
|
141
|
+
border-bottom: 1px solid #c7c7c7;
|
|
142
|
+
}
|
|
@@ -2,6 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
|
2
2
|
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
3
3
|
import dayjs from 'dayjs';
|
|
4
4
|
import { useSlateStatic } from '@seafile/slate-react';
|
|
5
|
+
import { ReactEditor } from '@seafile/slate-react';
|
|
5
6
|
import { ElementPopover } from '../../../extension/commons';
|
|
6
7
|
import EventBus from '../../../utils/event-bus';
|
|
7
8
|
import useCommentList from '../../hooks/comment-hooks/use-comment-list';
|
|
@@ -14,6 +15,8 @@ import { useCommentContext } from '../../hooks/comment-hooks/use-comment-context
|
|
|
14
15
|
import GlobalCommentEditor from './global-comment-editor';
|
|
15
16
|
import { INTERNAL_EVENT } from '../../../constants';
|
|
16
17
|
import { getNodeById } from '../../../extension/core';
|
|
18
|
+
import { useScrollContext } from '../../../hooks/use-scroll-context';
|
|
19
|
+
import { focusToCommentElement } from '../../utils';
|
|
17
20
|
import './index.css';
|
|
18
21
|
const GlobalComment = _ref => {
|
|
19
22
|
let {
|
|
@@ -30,6 +33,7 @@ const GlobalComment = _ref => {
|
|
|
30
33
|
const [isShowCommentList, setShowCommentList] = useState(false);
|
|
31
34
|
const [showEditor, setShowEditor] = useState(false);
|
|
32
35
|
const editor = useSlateStatic();
|
|
36
|
+
const scrollRef = useScrollContext();
|
|
33
37
|
const toggle = useCallback(() => {
|
|
34
38
|
if (isShowCommentList) {
|
|
35
39
|
setActiveComment(null);
|
|
@@ -69,11 +73,15 @@ const GlobalComment = _ref => {
|
|
|
69
73
|
const hiddenComment = useCallback(() => {
|
|
70
74
|
setActiveComment(null);
|
|
71
75
|
}, []);
|
|
72
|
-
const onCommentClick = useCallback(comment => {
|
|
76
|
+
const onCommentClick = useCallback((comment, element) => {
|
|
73
77
|
if (activeComment && activeComment.id === comment.id) return;
|
|
74
78
|
setActiveComment(comment);
|
|
75
79
|
deleteUnseenNotifications && deleteUnseenNotifications(comment);
|
|
76
|
-
|
|
80
|
+
if (comment.detail.element_id === DOC_COMMENT_ELEMENT_ID) return;
|
|
81
|
+
const elementDom = ReactEditor.toDOMNode(editor, element, scrollRef);
|
|
82
|
+
scrollRef.current.scrollTop = elementDom.offsetTop - scrollRef.current.clientHeight / 3;
|
|
83
|
+
focusToCommentElement(editor, element);
|
|
84
|
+
}, [activeComment, deleteUnseenNotifications, editor, scrollRef]);
|
|
77
85
|
const {
|
|
78
86
|
dispatch
|
|
79
87
|
} = useCommentContext();
|
|
@@ -140,17 +148,18 @@ const GlobalComment = _ref => {
|
|
|
140
148
|
}, /*#__PURE__*/React.createElement("div", {
|
|
141
149
|
id: "global-comment-list-container",
|
|
142
150
|
className: "sdoc-comment-list-container"
|
|
143
|
-
}, commentList.map(comment => {
|
|
151
|
+
}, Array.isArray(commentList) && commentList.map(comment => {
|
|
144
152
|
const elementId = comment.detail.element_id;
|
|
145
153
|
const element = getNodeById(editor.children, elementId);
|
|
146
154
|
if (!element && elementId !== DOC_COMMENT_ELEMENT_ID) return null;
|
|
147
155
|
const isActive = activeComment && activeComment.id === comment.id;
|
|
148
156
|
return /*#__PURE__*/React.createElement(CommentItemWrapper, {
|
|
149
157
|
key: comment.id,
|
|
158
|
+
element: element,
|
|
150
159
|
container: "global-comment-list-container",
|
|
151
160
|
comment: comment,
|
|
152
161
|
isActive: isActive,
|
|
153
|
-
onCommentClick: onCommentClick,
|
|
162
|
+
onCommentClick: comment => onCommentClick(comment, element),
|
|
154
163
|
hiddenComment: hiddenComment,
|
|
155
164
|
updateScrollPosition: updateScrollPosition
|
|
156
165
|
});
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
+
import { Editor } from '@seafile/slate';
|
|
1
2
|
import { getEventTransfer } from '../../../utils';
|
|
2
3
|
import { COMMENT_URL_CLASSNAME } from '../constants';
|
|
3
4
|
import { KeyCodes } from '../../../constants';
|
|
4
5
|
import { createNotify, generatorNotificationKey } from './notification-utils';
|
|
6
|
+
import { focusEditor, findPath } from '../../extension/core';
|
|
7
|
+
import { ELEMENT_TYPE } from '../../extension/constants';
|
|
5
8
|
export const searchCollaborators = (collaborators, searchValue) => {
|
|
6
9
|
const validSearchValue = searchValue ? searchValue.trim().toLowerCase() : '';
|
|
7
10
|
const validCollaborators = Array.isArray(collaborators) && collaborators.length > 0 ? collaborators : [];
|
|
@@ -211,4 +214,14 @@ class CommentUtilities {
|
|
|
211
214
|
};
|
|
212
215
|
}
|
|
213
216
|
}
|
|
217
|
+
export const focusToCommentElement = (editor, element) => {
|
|
218
|
+
const path = findPath(editor, element);
|
|
219
|
+
const endOfFirstNode = Editor.end(editor, path);
|
|
220
|
+
const startOfFirstNode = Editor.start(editor, path);
|
|
221
|
+
const range = {
|
|
222
|
+
anchor: [ELEMENT_TYPE.LIST_ITEM, ELEMENT_TYPE.ORDERED_LIST, ELEMENT_TYPE.UNORDERED_LIST].includes(element.type) ? startOfFirstNode : endOfFirstNode,
|
|
223
|
+
focus: endOfFirstNode
|
|
224
|
+
};
|
|
225
|
+
focusEditor(editor, range);
|
|
226
|
+
};
|
|
214
227
|
export { CommentUtilities, createNotify, generatorNotificationKey };
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import isHotkey from 'is-hotkey';
|
|
2
|
+
import { PARAGRAPH, INSERT_POSITION } from '../../constants';
|
|
3
|
+
import { isSelectionAtBlockStart } from '../../core';
|
|
4
|
+
import { getCalloutEntry, isCalloutContentEmpty, unwrapCallout } from './helper';
|
|
5
|
+
import { insertElement } from '../../toolbar/side-toolbar/helpers';
|
|
6
|
+
import EventBus from '../../../utils/event-bus';
|
|
7
|
+
import { INTERNAL_EVENT } from '../../../constants';
|
|
8
|
+
import { CALLOUT_ALLOWED_INSIDE_TYPES } from './constant';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* @param {Editor} editor
|
|
12
|
+
* @returns
|
|
13
|
+
*/
|
|
14
|
+
const withCallout = editor => {
|
|
15
|
+
const {
|
|
16
|
+
insertFragment,
|
|
17
|
+
deleteBackward,
|
|
18
|
+
onHotKeyDown
|
|
19
|
+
} = editor;
|
|
20
|
+
const newEditor = editor;
|
|
21
|
+
newEditor.deleteBackward = unit => {
|
|
22
|
+
const calloutEntry = getCalloutEntry(editor);
|
|
23
|
+
if (calloutEntry) {
|
|
24
|
+
if (isSelectionAtBlockStart(editor) && isCalloutContentEmpty(editor, calloutEntry)) return;
|
|
25
|
+
}
|
|
26
|
+
return deleteBackward(unit);
|
|
27
|
+
};
|
|
28
|
+
newEditor.insertFragment = data => {
|
|
29
|
+
var _data$find;
|
|
30
|
+
const eventBus = EventBus.getInstance();
|
|
31
|
+
const unsupportType = (_data$find = data.find(node => !CALLOUT_ALLOWED_INSIDE_TYPES.includes(node.type))) === null || _data$find === void 0 ? void 0 : _data$find.type;
|
|
32
|
+
if (unsupportType) {
|
|
33
|
+
eventBus.dispatch(INTERNAL_EVENT.DISPALY_CALLOUT_UNSUPPORT_ALERT, unsupportType);
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
return insertFragment(data);
|
|
37
|
+
};
|
|
38
|
+
newEditor.onHotKeyDown = event => {
|
|
39
|
+
if (isHotkey('mod+enter', event)) {
|
|
40
|
+
insertElement(newEditor, PARAGRAPH, INSERT_POSITION.AFTER);
|
|
41
|
+
return true;
|
|
42
|
+
}
|
|
43
|
+
if (isHotkey('enter', event)) {
|
|
44
|
+
const calloutEntry = getCalloutEntry(editor);
|
|
45
|
+
if (calloutEntry) {
|
|
46
|
+
if (isCalloutContentEmpty(editor, calloutEntry)) {
|
|
47
|
+
unwrapCallout(editor);
|
|
48
|
+
event.preventDefault();
|
|
49
|
+
return true;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
return onHotKeyDown && onHotKeyDown(event);
|
|
54
|
+
};
|
|
55
|
+
return newEditor;
|
|
56
|
+
};
|
|
57
|
+
export default withCallout;
|
package/package.json
CHANGED
|
Binary file
|
|
@@ -14,6 +14,8 @@
|
|
|
14
14
|
/>
|
|
15
15
|
<missing-glyph />
|
|
16
16
|
|
|
17
|
+
<glyph glyph-name="sdoc-selected-text" unicode="" d="M48 480h928c25.6 0 48-22.4 48-48s-22.4-48-48-48h-928C22.4 384 0 406.4 0 432S22.4 480 48 480z m0-352h352c25.6 0 48-22.4 48-48s-22.4-48-48-48h-352C22.4 32 0 54.4 0 80S22.4 128 48 128z m0 704h928c25.6 0 48-22.4 48-48S1001.6 736 976 736h-928C22.4 736 0 758.4 0 784S22.4 832 48 832z m675.2-950.4c-12.8 0-28.8 6.4-38.4 16l-124.8 118.4c-22.4 19.2-22.4 51.2 0 73.6s54.4 19.2 76.8 0l86.4-83.2 211.2 204.8c22.4 19.2 54.4 19.2 76.8 0s22.4-51.2 0-73.6l-249.6-240c-12.8-12.8-25.6-16-38.4-16z" horiz-adv-x="1028" />
|
|
18
|
+
|
|
17
19
|
<glyph glyph-name="sdoc-freezed" unicode="" d="M512 384m-512 0a512 512 0 1 1 1024 0 512 512 0 1 1-1024 0ZM316.8 716.8c118.4 70.4 265.6 70.4 384 3.2s192-195.2 192-332.8c0-137.6-73.6-265.6-195.2-332.8-182.4-105.6-416-41.6-521.6 140.8S134.4 608 316.8 716.8z m348.8-604.8c137.6 80 195.2 249.6 131.2 396.8L259.2 195.2c92.8-124.8 268.8-163.2 406.4-83.2zM352 652.8c-137.6-80-192-249.6-128-393.6l537.6 310.4c-96 128-272 163.2-409.6 83.2z" horiz-adv-x="1024" />
|
|
18
20
|
|
|
19
21
|
<glyph glyph-name="sdoc-jump-to" unicode="" d="M361.6 896c32 0 54.4-16 54.4-48S393.6 800 361.6 800H96v-832h832v262.4c0 32 16 57.6 48 57.6s48-25.6 48-57.6v-300.8c0-32-28.8-57.6-60.8-57.6H60.8c-32 0-60.8 25.6-60.8 57.6V835.2C0 870.4 25.6 896 60.8 896h300.8zM992 896c19.2 0 32-12.8 32-32v-332.8c0-28.8-19.2-51.2-48-51.2s-48 22.4-48 51.2V729.6L531.2 336c-6.4-9.6-19.2-16-35.2-16-12.8 0-25.6 6.4-35.2 16-19.2 19.2-19.2 51.2 0 70.4L857.6 800h-198.4c-28.8 0-51.2 19.2-51.2 48S630.4 896 656 896H992z" horiz-adv-x="1024" />
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
@font-face {
|
|
2
2
|
font-family: "sdocfont"; /* Project id 4097705 */
|
|
3
|
-
src: url('./sdoc-editor-font/iconfont.eot?t=
|
|
4
|
-
src: url('./sdoc-editor-font/iconfont.eot?t=
|
|
5
|
-
url('./sdoc-editor-font/iconfont.woff2?t=
|
|
6
|
-
url('./sdoc-editor-font/iconfont.woff?t=
|
|
7
|
-
url('./sdoc-editor-font/iconfont.ttf?t=
|
|
8
|
-
url('./sdoc-editor-font/iconfont.svg?t=
|
|
3
|
+
src: url('./sdoc-editor-font/iconfont.eot?t=1700642464361'); /* IE9 */
|
|
4
|
+
src: url('./sdoc-editor-font/iconfont.eot?t=1700642464361#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|
5
|
+
url('./sdoc-editor-font/iconfont.woff2?t=1700642464361') format('woff2'),
|
|
6
|
+
url('./sdoc-editor-font/iconfont.woff?t=1700642464361') format('woff'),
|
|
7
|
+
url('./sdoc-editor-font/iconfont.ttf?t=1700642464361') format('truetype'),
|
|
8
|
+
url('./sdoc-editor-font/iconfont.svg?t=1700642464361#sdocfont') format('svg');
|
|
9
9
|
}
|
|
10
10
|
|
|
11
11
|
.sdocfont {
|
|
@@ -16,6 +16,10 @@
|
|
|
16
16
|
-moz-osx-font-smoothing: grayscale;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
+
.sdoc-selected-text:before {
|
|
20
|
+
content: "\e65e";
|
|
21
|
+
}
|
|
22
|
+
|
|
19
23
|
.sdoc-freezed:before {
|
|
20
24
|
content: "\e65d";
|
|
21
25
|
}
|