@seafile/comment-editor 0.0.1-alpha.3 → 0.0.1-alpha.30
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/assets/css/layout.css +1 -45
- package/dist/basic-sdk/comment/utils.js +39 -0
- package/dist/basic-sdk/context.js +8 -14
- package/dist/basic-sdk/editor/comment-editor.css +138 -0
- package/dist/basic-sdk/{comment/components → editor}/comment-editor.js +41 -43
- package/dist/basic-sdk/extension/plugins/image/helpers.js +1 -1
- package/dist/basic-sdk/extension/plugins/image/use-copy-image.js +1 -1
- package/dist/basic-sdk/extension/plugins/image/use-upload-image.js +1 -1
- package/dist/basic-sdk/extension/toolbar/comment-editor-toolbar/index.js +7 -3
- package/dist/basic-sdk/hooks/use-comment.js +19 -182
- package/dist/basic-sdk/index.js +3 -10
- package/dist/index.js +0 -12
- package/dist/pages/seafile-comment-editor.js +37 -13
- package/package.json +1 -1
- package/dist/assets/css/plugin-editor.css +0 -7
- package/dist/assets/css/simple-viewer.css +0 -6
- package/dist/basic-sdk/comment/components/comment-all-participants/index.css +0 -83
- package/dist/basic-sdk/comment/components/comment-all-participants/index.js +0 -67
- package/dist/basic-sdk/comment/components/comment-all-participants/participant-avatar.js +0 -43
- package/dist/basic-sdk/comment/components/comment-delete-popover.js +0 -80
- package/dist/basic-sdk/comment/components/comment-item-collapse-wrapper.js +0 -160
- package/dist/basic-sdk/comment/components/comment-item-content.js +0 -154
- package/dist/basic-sdk/comment/components/comment-item-reply.js +0 -124
- package/dist/basic-sdk/comment/components/comment-item-resolved-reply.js +0 -38
- package/dist/basic-sdk/comment/components/comment-item-wrapper.js +0 -364
- package/dist/basic-sdk/comment/components/comment-list.css +0 -422
- package/dist/basic-sdk/comment/components/comment-list.js +0 -216
- package/dist/basic-sdk/comment/components/comment-participants-editor/index.css +0 -132
- package/dist/basic-sdk/comment/components/comment-participants-editor/index.js +0 -69
- package/dist/basic-sdk/comment/components/comment-participants-editor/searched-collaborators.js +0 -62
- package/dist/basic-sdk/comment/components/comment-participants-editor/selected-participants.js +0 -48
- package/dist/basic-sdk/comment/components/editor-comment.js +0 -183
- package/dist/basic-sdk/comment/components/elements-comment-count/element-comment-count.js +0 -64
- package/dist/basic-sdk/comment/components/elements-comment-count/index.css +0 -29
- package/dist/basic-sdk/comment/components/elements-comment-count/index.js +0 -49
- package/dist/basic-sdk/comment/components/global-comment/global-comment-body-header.js +0 -88
- package/dist/basic-sdk/comment/components/global-comment/global-comment-header.js +0 -90
- package/dist/basic-sdk/comment/components/global-comment/index.css +0 -328
- package/dist/basic-sdk/comment/components/global-comment/index.js +0 -217
- package/dist/basic-sdk/comment/components/index.js +0 -21
- package/dist/basic-sdk/comment/components/style.css +0 -40
- package/dist/basic-sdk/comment/helper.js +0 -184
- package/dist/basic-sdk/comment/hooks/comment-hooks/use-comment-context.js +0 -20
- package/dist/basic-sdk/comment/hooks/comment-hooks/use-comment-list.js +0 -45
- package/dist/basic-sdk/comment/hooks/comment-hooks/use-comment-mount.js +0 -57
- package/dist/basic-sdk/comment/hooks/notification-hooks/index.js +0 -25
- package/dist/basic-sdk/comment/hooks/notification-hooks/use-notification-context.js +0 -20
- package/dist/basic-sdk/comment/hooks/notification-hooks/use-notification-mount.js +0 -70
- package/dist/basic-sdk/comment/hooks/use-participants.js +0 -26
- package/dist/basic-sdk/comment/index.js +0 -21
- package/dist/basic-sdk/comment/reducer/comment-reducer.js +0 -353
- package/dist/basic-sdk/comment/reducer/notification-reducer.js +0 -89
- package/dist/basic-sdk/comment/utils/get-event-transfer.js +0 -77
- package/dist/basic-sdk/comment/utils/index.js +0 -281
- package/dist/basic-sdk/comment/utils/notification-utils.js +0 -62
- package/dist/basic-sdk/layout/comment-layout/index.css +0 -15
- package/dist/basic-sdk/layout/comment-layout/index.js +0 -87
- package/dist/basic-sdk/layout/comment-layout/resize-width/index.css +0 -38
- package/dist/basic-sdk/layout/comment-layout/resize-width/index.js +0 -132
- package/dist/basic-sdk/layout/editor-container.js +0 -32
- package/dist/basic-sdk/layout/index.js +0 -13
- package/dist/basic-sdk/socket/helpers.js +0 -299
- package/dist/basic-sdk/socket/index.js +0 -20
- package/dist/basic-sdk/socket/socket-client.js +0 -211
- package/dist/basic-sdk/socket/socket-manager.js +0 -386
- package/dist/basic-sdk/socket/with-socket-io.js +0 -73
- /package/dist/basic-sdk/comment/{constants/index.js → constants.js} +0 -0
|
@@ -1,281 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.convertComment = exports.checkMentionOperation = exports.CommentUtilities = void 0;
|
|
8
|
-
Object.defineProperty(exports, "createNotify", {
|
|
9
|
-
enumerable: true,
|
|
10
|
-
get: function () {
|
|
11
|
-
return _notificationUtils.createNotify;
|
|
12
|
-
}
|
|
13
|
-
});
|
|
14
|
-
exports.focusToCommentElement = void 0;
|
|
15
|
-
Object.defineProperty(exports, "generatorNotificationKey", {
|
|
16
|
-
enumerable: true,
|
|
17
|
-
get: function () {
|
|
18
|
-
return _notificationUtils.generatorNotificationKey;
|
|
19
|
-
}
|
|
20
|
-
});
|
|
21
|
-
exports.searchCollaborators = exports.getEventClassName = exports.getCommentElementById = void 0;
|
|
22
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
|
|
23
|
-
var _slate = require("@seafile/slate");
|
|
24
|
-
var _slateReact = require("@seafile/slate-react");
|
|
25
|
-
var _constants = require("../../constants");
|
|
26
|
-
var _constants2 = require("../../extension/constants");
|
|
27
|
-
var _core = require("../../extension/core");
|
|
28
|
-
var _helper = require("../../extension/plugins/mention/helper");
|
|
29
|
-
var _getEventTransfer = _interopRequireDefault(require("./get-event-transfer"));
|
|
30
|
-
var _notificationUtils = require("./notification-utils");
|
|
31
|
-
const searchCollaborators = (collaborators, searchValue, editor) => {
|
|
32
|
-
const validSearchValue = searchValue ? searchValue.trim().toLowerCase() : '';
|
|
33
|
-
const validCollaborators = Array.isArray(collaborators) && collaborators.length > 0 ? collaborators : [];
|
|
34
|
-
if (!validSearchValue) return validCollaborators;
|
|
35
|
-
|
|
36
|
-
// The current character is '@' and the previous character is a null character
|
|
37
|
-
const beforeStr = (0, _helper.getPreCharacters)(editor);
|
|
38
|
-
const isEmptyStr = beforeStr.slice(-2, -1).trim().length === 0;
|
|
39
|
-
if (beforeStr.slice(-1) === '@' && isEmptyStr) {
|
|
40
|
-
return validCollaborators;
|
|
41
|
-
}
|
|
42
|
-
return validCollaborators.filter(collaborator => {
|
|
43
|
-
const {
|
|
44
|
-
name,
|
|
45
|
-
name_pinyin = ''
|
|
46
|
-
} = collaborator;
|
|
47
|
-
if (name.toString().toLowerCase().indexOf(validSearchValue) > -1) return true;
|
|
48
|
-
if (!name_pinyin) return false;
|
|
49
|
-
const validNamePinyin = name_pinyin.toString().toLowerCase();
|
|
50
|
-
const validSearchPinyinValue = validSearchValue.replace(/ |'/g, '');
|
|
51
|
-
|
|
52
|
-
// complete: For example, seatable can be retrieved when searching for sea.
|
|
53
|
-
if (validNamePinyin.indexOf(validSearchPinyinValue) > -1) return true;
|
|
54
|
-
if (validNamePinyin.replace(/'/g, '').indexOf(validSearchPinyinValue) > -1) return true;
|
|
55
|
-
const validNamePinyinList = validNamePinyin.split('\'');
|
|
56
|
-
// acronym: For example, sea table can be retrieved when searching for st.
|
|
57
|
-
const namePinyinAcronym = validNamePinyinList.map(item => item && item.trim() ? item.trim().slice(0, 1) : '');
|
|
58
|
-
if (namePinyinAcronym.join('').indexOf(validSearchPinyinValue) > -1) return true;
|
|
59
|
-
return false;
|
|
60
|
-
});
|
|
61
|
-
};
|
|
62
|
-
|
|
63
|
-
// Mailto, file, tel, callto, sms, cid, xmpp, etc. are not support
|
|
64
|
-
// const ALLOWED_URL_REG = /((http|https):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|])/g;
|
|
65
|
-
// export const textToHtml = (text) => {
|
|
66
|
-
// if (!text) return '';
|
|
67
|
-
// return text.replace(ALLOWED_URL_REG, '<a href="$1" target="_blank" class=' + COMMENT_URL_CLASSNAME + '>$1</a>');
|
|
68
|
-
// };
|
|
69
|
-
exports.searchCollaborators = searchCollaborators;
|
|
70
|
-
const convertComment = value => {
|
|
71
|
-
return value.replaceAll('<', '<').replaceAll('>', '>');
|
|
72
|
-
};
|
|
73
|
-
exports.convertComment = convertComment;
|
|
74
|
-
const checkMentionOperation = event => {
|
|
75
|
-
const {
|
|
76
|
-
keyCode
|
|
77
|
-
} = event;
|
|
78
|
-
const {
|
|
79
|
-
Escape,
|
|
80
|
-
LeftArrow,
|
|
81
|
-
RightArrow
|
|
82
|
-
} = _constants.KeyCodes;
|
|
83
|
-
if (keyCode === Escape || keyCode === LeftArrow || keyCode === RightArrow) return false;
|
|
84
|
-
return true;
|
|
85
|
-
};
|
|
86
|
-
exports.checkMentionOperation = checkMentionOperation;
|
|
87
|
-
class CommentUtilities {
|
|
88
|
-
constructor() {
|
|
89
|
-
(0, _defineProperty2.default)(this, "onInsertElement", _ref => {
|
|
90
|
-
let {
|
|
91
|
-
commentRef,
|
|
92
|
-
selection,
|
|
93
|
-
range,
|
|
94
|
-
content,
|
|
95
|
-
nodeType
|
|
96
|
-
} = _ref;
|
|
97
|
-
if (range) {
|
|
98
|
-
selection.removeAllRanges();
|
|
99
|
-
selection.addRange(range);
|
|
100
|
-
}
|
|
101
|
-
return this.createHtmlElement({
|
|
102
|
-
commentRef,
|
|
103
|
-
selection,
|
|
104
|
-
range,
|
|
105
|
-
content,
|
|
106
|
-
nodeType
|
|
107
|
-
});
|
|
108
|
-
});
|
|
109
|
-
(0, _defineProperty2.default)(this, "getHtmlElement", (nodeType, content) => {
|
|
110
|
-
switch (nodeType) {
|
|
111
|
-
case 'image':
|
|
112
|
-
{
|
|
113
|
-
let parentElement = document.createElement('div');
|
|
114
|
-
parentElement.className = 'image-container';
|
|
115
|
-
parentElement.contentEditable = 'false';
|
|
116
|
-
let imageContainer = document.createElement('img');
|
|
117
|
-
imageContainer.src = content;
|
|
118
|
-
imageContainer.height = 60;
|
|
119
|
-
parentElement.appendChild(imageContainer);
|
|
120
|
-
return parentElement.outerHTML;
|
|
121
|
-
}
|
|
122
|
-
default:
|
|
123
|
-
{
|
|
124
|
-
return '';
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
});
|
|
128
|
-
(0, _defineProperty2.default)(this, "createHtmlElement", _ref2 => {
|
|
129
|
-
let {
|
|
130
|
-
commentRef,
|
|
131
|
-
selection,
|
|
132
|
-
range,
|
|
133
|
-
content,
|
|
134
|
-
nodeType
|
|
135
|
-
} = _ref2;
|
|
136
|
-
let spanNode1;
|
|
137
|
-
let spanNode2;
|
|
138
|
-
let imageContainer;
|
|
139
|
-
if (nodeType === 'image') {
|
|
140
|
-
spanNode1 = document.createElement('div');
|
|
141
|
-
spanNode1.className = 'image-container';
|
|
142
|
-
spanNode1.contentEditable = 'false';
|
|
143
|
-
imageContainer = document.createElement('img');
|
|
144
|
-
imageContainer.src = content;
|
|
145
|
-
imageContainer.height = 60;
|
|
146
|
-
spanNode1.appendChild(imageContainer);
|
|
147
|
-
spanNode2 = document.createElement('span');
|
|
148
|
-
spanNode2.innerHTML = ' ';
|
|
149
|
-
}
|
|
150
|
-
if (nodeType === 'collaborator') {
|
|
151
|
-
spanNode1 = document.createElement('span');
|
|
152
|
-
spanNode2 = document.createElement('span');
|
|
153
|
-
spanNode1.className = 'at-text';
|
|
154
|
-
spanNode1.innerHTML = `@${content.name}`;
|
|
155
|
-
spanNode2.innerHTML = ' ';
|
|
156
|
-
}
|
|
157
|
-
let frag = document.createDocumentFragment();
|
|
158
|
-
frag.appendChild(spanNode1);
|
|
159
|
-
const lastNode = frag.appendChild(spanNode2);
|
|
160
|
-
if (range) {
|
|
161
|
-
range.insertNode(frag);
|
|
162
|
-
} else {
|
|
163
|
-
commentRef.current.appendChild(frag);
|
|
164
|
-
range = selection.getRangeAt(0);
|
|
165
|
-
}
|
|
166
|
-
if (lastNode) {
|
|
167
|
-
range = range.cloneRange();
|
|
168
|
-
range.setStartAfter(lastNode);
|
|
169
|
-
range.collapse(true);
|
|
170
|
-
selection.removeAllRanges();
|
|
171
|
-
selection.addRange(range);
|
|
172
|
-
}
|
|
173
|
-
return range;
|
|
174
|
-
});
|
|
175
|
-
(0, _defineProperty2.default)(this, "onSelectParticipant", _ref3 => {
|
|
176
|
-
let {
|
|
177
|
-
selection,
|
|
178
|
-
range,
|
|
179
|
-
participant,
|
|
180
|
-
callBack,
|
|
181
|
-
commentRef
|
|
182
|
-
} = _ref3;
|
|
183
|
-
if (range) {
|
|
184
|
-
// delete '@xxx';
|
|
185
|
-
selection.removeAllRanges();
|
|
186
|
-
selection.addRange(range);
|
|
187
|
-
const textNode = range.startContainer;
|
|
188
|
-
const atIndex = this.getAtIndexWithAnchorPosition(range.startOffset, textNode.data);
|
|
189
|
-
if (atIndex > -1) {
|
|
190
|
-
range.setStart(textNode, atIndex);
|
|
191
|
-
range.setEnd(textNode, range.endOffset);
|
|
192
|
-
range.deleteContents();
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
let newRange = this.createHtmlElement({
|
|
196
|
-
selection,
|
|
197
|
-
range,
|
|
198
|
-
content: participant,
|
|
199
|
-
nodeType: 'collaborator',
|
|
200
|
-
commentRef
|
|
201
|
-
});
|
|
202
|
-
if (callBack) {
|
|
203
|
-
callBack();
|
|
204
|
-
}
|
|
205
|
-
if (commentRef.current) {
|
|
206
|
-
commentRef.current.focus();
|
|
207
|
-
}
|
|
208
|
-
return newRange;
|
|
209
|
-
});
|
|
210
|
-
/**
|
|
211
|
-
* get the index of '@' from anchor position.
|
|
212
|
-
* @param {*} anchorPosition '@text|anchor position|'
|
|
213
|
-
* @param {*} text '@abc'
|
|
214
|
-
* @returns index
|
|
215
|
-
* e.g. '@abc|anchor position|' // 0
|
|
216
|
-
* '@123 @|anchor position| @abc' // 5
|
|
217
|
-
*/
|
|
218
|
-
(0, _defineProperty2.default)(this, "getAtIndexWithAnchorPosition", (anchorPosition, text) => {
|
|
219
|
-
let atIndex = -1;
|
|
220
|
-
for (let i = anchorPosition - 1; i > -1; i--) {
|
|
221
|
-
if (text[i] === '@') {
|
|
222
|
-
atIndex = i;
|
|
223
|
-
break;
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
return atIndex;
|
|
227
|
-
});
|
|
228
|
-
(0, _defineProperty2.default)(this, "onPaste", (event, callBack) => {
|
|
229
|
-
event.stopPropagation();
|
|
230
|
-
let cliperData = (0, _getEventTransfer.default)(event);
|
|
231
|
-
if (cliperData.files) {
|
|
232
|
-
let file = cliperData.files[0];
|
|
233
|
-
let isImage = /image/i.test(file.type);
|
|
234
|
-
if (isImage) {
|
|
235
|
-
event.preventDefault();
|
|
236
|
-
if (callBack) {
|
|
237
|
-
callBack(cliperData.files);
|
|
238
|
-
}
|
|
239
|
-
}
|
|
240
|
-
} else {
|
|
241
|
-
event.preventDefault();
|
|
242
|
-
let text = cliperData.text;
|
|
243
|
-
if (document.queryCommandSupported('insertText')) {
|
|
244
|
-
document.execCommand('insertText', false, text);
|
|
245
|
-
} else {
|
|
246
|
-
document.execCommand('paste', false, text);
|
|
247
|
-
}
|
|
248
|
-
}
|
|
249
|
-
});
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
exports.CommentUtilities = CommentUtilities;
|
|
253
|
-
const focusToCommentElement = (editor, element) => {
|
|
254
|
-
const path = (0, _core.findPath)(editor, element);
|
|
255
|
-
const endOfFirstNode = _slate.Editor.end(editor, path);
|
|
256
|
-
const startOfFirstNode = _slate.Editor.start(editor, path);
|
|
257
|
-
const range = {
|
|
258
|
-
anchor: [_constants2.ELEMENT_TYPE.LIST_ITEM, _constants2.ELEMENT_TYPE.ORDERED_LIST, _constants2.ELEMENT_TYPE.UNORDERED_LIST].includes(element.type) ? startOfFirstNode : endOfFirstNode,
|
|
259
|
-
focus: endOfFirstNode
|
|
260
|
-
};
|
|
261
|
-
(0, _core.focusEditor)(editor, range);
|
|
262
|
-
};
|
|
263
|
-
exports.focusToCommentElement = focusToCommentElement;
|
|
264
|
-
const getCommentElementById = (elementId, editor) => {
|
|
265
|
-
let element = null;
|
|
266
|
-
const dom = document.querySelectorAll(`[data-id="${elementId}"]`)[0];
|
|
267
|
-
if (dom) {
|
|
268
|
-
const slateNode = _slateReact.ReactEditor.toSlateNode(editor, dom);
|
|
269
|
-
if (slateNode) {
|
|
270
|
-
element = slateNode;
|
|
271
|
-
}
|
|
272
|
-
}
|
|
273
|
-
return element;
|
|
274
|
-
};
|
|
275
|
-
exports.getCommentElementById = getCommentElementById;
|
|
276
|
-
const getEventClassName = e => {
|
|
277
|
-
// svg mouseEvent event.target.className is an object
|
|
278
|
-
if (!e || !e.target) return '';
|
|
279
|
-
return e.target.getAttribute('class') || '';
|
|
280
|
-
};
|
|
281
|
-
exports.getEventClassName = getEventClassName;
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.generatorNotificationKey = exports.createNotify = void 0;
|
|
8
|
-
var _dayjs = _interopRequireDefault(require("dayjs"));
|
|
9
|
-
var _relativeTime = _interopRequireDefault(require("dayjs/plugin/relativeTime"));
|
|
10
|
-
var _context = _interopRequireDefault(require("../../context"));
|
|
11
|
-
_dayjs.default.extend(_relativeTime.default);
|
|
12
|
-
const PERMISSION_GRANTED = 'granted';
|
|
13
|
-
const notify = ($title, $options) => {
|
|
14
|
-
const notification = new Notification($title, $options);
|
|
15
|
-
|
|
16
|
-
// auto clear notifications
|
|
17
|
-
const timer = setTimeout(notification.close.bind(notification), 5000);
|
|
18
|
-
notification.onshow = function (event) {
|
|
19
|
-
const {
|
|
20
|
-
mediaUrl
|
|
21
|
-
} = _context.default.getSetting('mediaUrl');
|
|
22
|
-
let newAudioElement = document.createElement('audio');
|
|
23
|
-
newAudioElement.setAttribute('src', `${mediaUrl}audio/classic.mp3`);
|
|
24
|
-
newAudioElement.setAttribute('autoplay', 'autoplay');
|
|
25
|
-
newAudioElement.setAttribute('id', 'seatable-audio');
|
|
26
|
-
let audioElement = document.getElementById('seatable-audio');
|
|
27
|
-
if (audioElement) {
|
|
28
|
-
document.body.removeChild(audioElement);
|
|
29
|
-
}
|
|
30
|
-
document.body.appendChild(newAudioElement);
|
|
31
|
-
};
|
|
32
|
-
notification.onclose = function () {
|
|
33
|
-
clearTimeout(timer);
|
|
34
|
-
};
|
|
35
|
-
notification.onclick = function () {
|
|
36
|
-
notification.close();
|
|
37
|
-
};
|
|
38
|
-
};
|
|
39
|
-
const createNotify = (title, options) => {
|
|
40
|
-
// Let's check if the browser supports notifications
|
|
41
|
-
if (!('Notification' in window)) {
|
|
42
|
-
return false;
|
|
43
|
-
}
|
|
44
|
-
if (Notification.permission === PERMISSION_GRANTED) {
|
|
45
|
-
notify(title, options);
|
|
46
|
-
} else {
|
|
47
|
-
Notification.requestPermission(res => {
|
|
48
|
-
if (res === PERMISSION_GRANTED) {
|
|
49
|
-
notify(title, options);
|
|
50
|
-
}
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
exports.createNotify = createNotify;
|
|
55
|
-
const generatorNotificationKey = function (commentId) {
|
|
56
|
-
let replyId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
57
|
-
const validCommentId = commentId + '';
|
|
58
|
-
const validReplyId = replyId + '';
|
|
59
|
-
if (!validReplyId) return `sdoc_notification_${validCommentId}`;
|
|
60
|
-
return `sdoc_notification_${validCommentId}_${validReplyId}`;
|
|
61
|
-
};
|
|
62
|
-
exports.generatorNotificationKey = generatorNotificationKey;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
.comment-layout-wrapper {
|
|
2
|
-
display: flex;
|
|
3
|
-
flex-direction: row;
|
|
4
|
-
max-width: 620px;
|
|
5
|
-
min-width: 360px;
|
|
6
|
-
position: relative;
|
|
7
|
-
right: 0;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.comment-layout-wrapper .sdoc-content-right-panel {
|
|
11
|
-
width: 100%;
|
|
12
|
-
height: 100%;
|
|
13
|
-
overflow: hidden;
|
|
14
|
-
border-left: 1px solid #d8d8d8;
|
|
15
|
-
}
|
|
@@ -1,87 +0,0 @@
|
|
|
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 _comment = _interopRequireDefault(require("../../comment"));
|
|
11
|
-
var _constants = require("../../constants");
|
|
12
|
-
var _useComment = require("../../hooks/use-comment");
|
|
13
|
-
var _eventBus = _interopRequireDefault(require("../../utils/event-bus"));
|
|
14
|
-
var _localStorageUtils = _interopRequireDefault(require("../../utils/local-storage-utils"));
|
|
15
|
-
var _resizeWidth = _interopRequireDefault(require("./resize-width"));
|
|
16
|
-
require("./index.css");
|
|
17
|
-
const MIN_PANEL_WIDTH = 360;
|
|
18
|
-
const MAX_PANEL_WIDTH = 620;
|
|
19
|
-
const CommentLayout = _ref => {
|
|
20
|
-
let {
|
|
21
|
-
editor
|
|
22
|
-
} = _ref;
|
|
23
|
-
const {
|
|
24
|
-
className,
|
|
25
|
-
pluginName,
|
|
26
|
-
pluginEventBus,
|
|
27
|
-
pluginEvent
|
|
28
|
-
} = (0, _useComment.useComment)();
|
|
29
|
-
const [width, setWidth] = (0, _react.useState)(MIN_PANEL_WIDTH);
|
|
30
|
-
const panelWrapperStyle = (0, _react.useMemo)(() => {
|
|
31
|
-
if (!pluginName) return null;
|
|
32
|
-
let style = {
|
|
33
|
-
width,
|
|
34
|
-
zIndex: 101
|
|
35
|
-
};
|
|
36
|
-
if (!style.width || style.width < MIN_PANEL_WIDTH) {
|
|
37
|
-
style.width = MIN_PANEL_WIDTH;
|
|
38
|
-
} else if (style.width > MAX_PANEL_WIDTH) {
|
|
39
|
-
style.width = MAX_PANEL_WIDTH;
|
|
40
|
-
}
|
|
41
|
-
return style;
|
|
42
|
-
}, [width, pluginName]);
|
|
43
|
-
const resizeWidth = (0, _react.useCallback)(width => {
|
|
44
|
-
setWidth(width);
|
|
45
|
-
}, []);
|
|
46
|
-
const resizeWidthEnd = (0, _react.useCallback)(width => {
|
|
47
|
-
const settings = _localStorageUtils.default.getItem(_constants.SDOC_STORAGE) || {};
|
|
48
|
-
_localStorageUtils.default.setItem(_constants.SDOC_STORAGE, JSON.stringify({
|
|
49
|
-
...settings,
|
|
50
|
-
panelWidth: width
|
|
51
|
-
}));
|
|
52
|
-
const eventBus = _eventBus.default.getInstance();
|
|
53
|
-
eventBus.dispatch(_constants.INTERNAL_EVENT.RESIZE_ARTICLE);
|
|
54
|
-
}, []);
|
|
55
|
-
(0, _react.useEffect)(() => {
|
|
56
|
-
const isShowGlobalComments = pluginName === 'sdoc' ? true : false;
|
|
57
|
-
const settings = _localStorageUtils.default.getItem(_constants.SDOC_STORAGE) || {};
|
|
58
|
-
_localStorageUtils.default.setItem(_constants.SDOC_STORAGE, {
|
|
59
|
-
...settings,
|
|
60
|
-
isShowGlobalComments
|
|
61
|
-
});
|
|
62
|
-
const eventBus = pluginEventBus.getInstance();
|
|
63
|
-
eventBus.dispatch(pluginEvent.RESIZE_ARTICLE);
|
|
64
|
-
}, [pluginEvent.RESIZE_ARTICLE, pluginEventBus, pluginName]);
|
|
65
|
-
(0, _react.useEffect)(() => {
|
|
66
|
-
const settings = _localStorageUtils.default.getItem(_constants.SDOC_STORAGE) || {};
|
|
67
|
-
const {
|
|
68
|
-
panelWidth
|
|
69
|
-
} = settings;
|
|
70
|
-
const width = Math.max(MIN_PANEL_WIDTH, Math.min(parseInt(panelWidth, 10) || MIN_PANEL_WIDTH, MAX_PANEL_WIDTH));
|
|
71
|
-
setWidth(width);
|
|
72
|
-
}, []);
|
|
73
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
74
|
-
className: `comment-layout-wrapper ${className}`,
|
|
75
|
-
style: panelWrapperStyle
|
|
76
|
-
}, /*#__PURE__*/_react.default.createElement(_resizeWidth.default, {
|
|
77
|
-
minWidth: MIN_PANEL_WIDTH,
|
|
78
|
-
maxWidth: MAX_PANEL_WIDTH,
|
|
79
|
-
resizeWidth: resizeWidth,
|
|
80
|
-
resizeWidthEnd: resizeWidthEnd
|
|
81
|
-
}), /*#__PURE__*/_react.default.createElement(_comment.default, {
|
|
82
|
-
editor: editor,
|
|
83
|
-
type: "global",
|
|
84
|
-
width: width
|
|
85
|
-
}));
|
|
86
|
-
};
|
|
87
|
-
var _default = exports.default = CommentLayout;
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
.comment-layout-resize-width-handler {
|
|
2
|
-
height: 100%;
|
|
3
|
-
position: absolute;
|
|
4
|
-
right: 0;
|
|
5
|
-
top: 0;
|
|
6
|
-
width: 6px;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.comment-layout-resize-width-handler.resize-handler-placement-right {
|
|
10
|
-
left: 0;
|
|
11
|
-
right: auto;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.comment-layout-resize-width-handler:hover {
|
|
15
|
-
cursor: col-resize;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.comment-layout-resize-width-handler .comment-layout-resize-width-handler-content {
|
|
19
|
-
background-color: initial;
|
|
20
|
-
height: 100%;
|
|
21
|
-
position: relative;
|
|
22
|
-
width: 2px;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.comment-layout-resize-width-handler:hover .comment-layout-resize-width-handler-content {
|
|
26
|
-
background-color: #ccc;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.comment-layout-resize-width-handler .comment-layout-resize-width-handler-bar {
|
|
30
|
-
background-color: #2d7ff9;
|
|
31
|
-
border-radius: 3px;
|
|
32
|
-
content: "";
|
|
33
|
-
left: 50%;
|
|
34
|
-
margin-left: -3px;
|
|
35
|
-
position: absolute;
|
|
36
|
-
width: 6px;
|
|
37
|
-
}
|
|
38
|
-
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
require("./index.css");
|
|
10
|
-
const ResizeWidth = _ref => {
|
|
11
|
-
let {
|
|
12
|
-
minWidth,
|
|
13
|
-
maxWidth,
|
|
14
|
-
resizeWidth: resizeWidthAPI,
|
|
15
|
-
resizeWidthEnd
|
|
16
|
-
} = _ref;
|
|
17
|
-
const [isShowHandlerBar, setIsShowHandlerBar] = (0, _react.useState)(false);
|
|
18
|
-
const [drag, setDrag] = (0, _react.useState)(null);
|
|
19
|
-
const handlerRef = (0, _react.useRef)(null);
|
|
20
|
-
const handlerBarRef = (0, _react.useRef)(null);
|
|
21
|
-
const setHandlerBarTop = handlerTop => {
|
|
22
|
-
if (!handlerBarRef.current || handlerTop < 0) return;
|
|
23
|
-
handlerBarRef.current.style.top = handlerTop + 'px';
|
|
24
|
-
};
|
|
25
|
-
const setHandlerBarPosition = event => {
|
|
26
|
-
if (!handlerRef.current) return;
|
|
27
|
-
const {
|
|
28
|
-
top
|
|
29
|
-
} = handlerRef.current.getBoundingClientRect();
|
|
30
|
-
const handlerTop = event.pageY - top - 26 / 2;
|
|
31
|
-
setHandlerBarTop(handlerTop);
|
|
32
|
-
};
|
|
33
|
-
const getWidthFromMouseEvent = event => {
|
|
34
|
-
return event.pageX || event.touches && event.touches[0] && event.touches[0].pageX || event.changedTouches && event.changedTouches[event.changedTouches.length - 1].pageX;
|
|
35
|
-
};
|
|
36
|
-
const calculateResizedWidth = event => {
|
|
37
|
-
const width = getWidthFromMouseEvent(event);
|
|
38
|
-
const resizedWidth = document.body.clientWidth - width;
|
|
39
|
-
if (minWidth && resizedWidth < minWidth || maxWidth && resizedWidth > maxWidth) return -1;
|
|
40
|
-
return resizedWidth;
|
|
41
|
-
};
|
|
42
|
-
const onResizeWidth = event => {
|
|
43
|
-
const resizedWidth = calculateResizedWidth(event);
|
|
44
|
-
if (resizedWidth < 0) return;
|
|
45
|
-
if (resizeWidthAPI) {
|
|
46
|
-
resizeWidthAPI(resizedWidth);
|
|
47
|
-
}
|
|
48
|
-
};
|
|
49
|
-
const onDrag = event => {
|
|
50
|
-
onResizeWidth(event);
|
|
51
|
-
};
|
|
52
|
-
const onDragStart = (0, _react.useCallback)(event => {
|
|
53
|
-
if (event && event.dataTransfer && event.dataTransfer.setData) {
|
|
54
|
-
event.dataTransfer.setData('text/plain', 'dummy');
|
|
55
|
-
}
|
|
56
|
-
}, []);
|
|
57
|
-
const onDragEnd = event => {
|
|
58
|
-
onResizeWidth(event);
|
|
59
|
-
};
|
|
60
|
-
const onMouseLeave = () => {
|
|
61
|
-
setIsShowHandlerBar(false);
|
|
62
|
-
};
|
|
63
|
-
const onMouseEnter = event => {
|
|
64
|
-
setIsShowHandlerBar(true);
|
|
65
|
-
setHandlerBarPosition(event);
|
|
66
|
-
if (handlerRef.current) {
|
|
67
|
-
handlerRef.current.addEventListener('mouseleave', onMouseLeave);
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
|
-
const onMouseOver = event => {
|
|
71
|
-
setHandlerBarPosition(event);
|
|
72
|
-
};
|
|
73
|
-
const onMouseDown = event => {
|
|
74
|
-
event.preventDefault && event.preventDefault();
|
|
75
|
-
const currDrag = onDragStart(event);
|
|
76
|
-
if (currDrag === null && event.button !== 0) return;
|
|
77
|
-
window.addEventListener('mouseup', onMouseUp);
|
|
78
|
-
window.addEventListener('mousemove', onMouseMove);
|
|
79
|
-
if (handlerRef.current) {
|
|
80
|
-
handlerRef.current.removeEventListener('mouseleave', onMouseLeave);
|
|
81
|
-
}
|
|
82
|
-
setDrag(currDrag);
|
|
83
|
-
};
|
|
84
|
-
const onMouseMove = event => {
|
|
85
|
-
event.preventDefault && event.preventDefault();
|
|
86
|
-
if (!drag === null) return;
|
|
87
|
-
onDrag(event);
|
|
88
|
-
};
|
|
89
|
-
const onMouseUp = event => {
|
|
90
|
-
window.removeEventListener('mouseup', onMouseUp);
|
|
91
|
-
window.removeEventListener('mousemove', onMouseMove);
|
|
92
|
-
onDragEnd(event, drag);
|
|
93
|
-
setHandlerBarTop(-9999);
|
|
94
|
-
setDrag(null);
|
|
95
|
-
setIsShowHandlerBar(false);
|
|
96
|
-
if (resizeWidthEnd) {
|
|
97
|
-
const resizeWidth = calculateResizedWidth(event);
|
|
98
|
-
if (resizeWidth < 0) return;
|
|
99
|
-
resizeWidthEnd(resizeWidth);
|
|
100
|
-
}
|
|
101
|
-
};
|
|
102
|
-
(0, _react.useEffect)(() => {
|
|
103
|
-
return () => {
|
|
104
|
-
window.removeEventListener('mouseup', onMouseUp);
|
|
105
|
-
window.removeEventListener('mousemove', onMouseMove);
|
|
106
|
-
};
|
|
107
|
-
|
|
108
|
-
// eslint-disable-next-line
|
|
109
|
-
}, []);
|
|
110
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
111
|
-
className: "comment-layout-resize-width-handler resize-handler-placement-right",
|
|
112
|
-
ref: handlerRef,
|
|
113
|
-
onMouseDown: onMouseDown,
|
|
114
|
-
onMouseOver: onMouseOver,
|
|
115
|
-
onMouseEnter: onMouseEnter,
|
|
116
|
-
onDrag: onDrag,
|
|
117
|
-
onDragStart: onDragStart,
|
|
118
|
-
onDragEnd: onDragEnd,
|
|
119
|
-
style: {
|
|
120
|
-
zIndex: 4
|
|
121
|
-
}
|
|
122
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
123
|
-
className: "comment-layout-resize-width-handler-content"
|
|
124
|
-
}, isShowHandlerBar && /*#__PURE__*/_react.default.createElement("div", {
|
|
125
|
-
className: "comment-layout-resize-width-handler-bar",
|
|
126
|
-
ref: handlerBarRef,
|
|
127
|
-
style: {
|
|
128
|
-
height: 26
|
|
129
|
-
}
|
|
130
|
-
})));
|
|
131
|
-
};
|
|
132
|
-
var _default = exports.default = ResizeWidth;
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.default = void 0;
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
10
|
-
var _commonUtils = require("../utils/common-utils");
|
|
11
|
-
require("../assets/css/layout.css");
|
|
12
|
-
require("../assets/css/default.css");
|
|
13
|
-
require("../assets/css/sdoc-editor-article.css");
|
|
14
|
-
require("../assets/css/sdoc-editor-plugins.css");
|
|
15
|
-
require("../assets/css/sdoc-comment-editor-plugin.css");
|
|
16
|
-
require("../assets/css/dropdown-menu.css");
|
|
17
|
-
const EditorContainer = _ref => {
|
|
18
|
-
let {
|
|
19
|
-
children,
|
|
20
|
-
readonly,
|
|
21
|
-
fullscreen
|
|
22
|
-
} = _ref;
|
|
23
|
-
const className = (0, _classnames.default)('sdoc-editor-container', {
|
|
24
|
-
'mobile': _commonUtils.isMobile,
|
|
25
|
-
'readonly': readonly,
|
|
26
|
-
'fullscreen': fullscreen
|
|
27
|
-
});
|
|
28
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
29
|
-
className: className
|
|
30
|
-
}, children);
|
|
31
|
-
};
|
|
32
|
-
var _default = exports.default = EditorContainer;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
Object.defineProperty(exports, "EditorContainer", {
|
|
8
|
-
enumerable: true,
|
|
9
|
-
get: function () {
|
|
10
|
-
return _editorContainer.default;
|
|
11
|
-
}
|
|
12
|
-
});
|
|
13
|
-
var _editorContainer = _interopRequireDefault(require("./editor-container"));
|