@seafile/comment-editor 0.0.1-alpha.4 → 0.0.1-alpha.41

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 (67) hide show
  1. package/dist/basic-sdk/assets/css/layout.css +1 -45
  2. package/dist/basic-sdk/comment/utils.js +39 -0
  3. package/dist/basic-sdk/context.js +8 -21
  4. package/dist/basic-sdk/editor/comment-editor.css +138 -0
  5. package/dist/basic-sdk/{comment/components → editor}/comment-editor.js +42 -43
  6. package/dist/basic-sdk/extension/plugins/image/helpers.js +1 -1
  7. package/dist/basic-sdk/extension/plugins/image/use-copy-image.js +1 -1
  8. package/dist/basic-sdk/extension/plugins/image/use-upload-image.js +1 -1
  9. package/dist/basic-sdk/extension/toolbar/comment-editor-toolbar/index.js +13 -9
  10. package/dist/basic-sdk/hooks/use-comment.js +27 -180
  11. package/dist/basic-sdk/index.js +3 -10
  12. package/dist/basic-sdk/socket/helpers.js +14 -1
  13. package/dist/index.js +0 -12
  14. package/dist/pages/seafile-comment-editor.js +47 -19
  15. package/package.json +6 -6
  16. package/dist/assets/css/plugin-editor.css +0 -7
  17. package/dist/assets/css/simple-viewer.css +0 -6
  18. package/dist/basic-sdk/comment/components/comment-all-participants/index.css +0 -83
  19. package/dist/basic-sdk/comment/components/comment-all-participants/index.js +0 -67
  20. package/dist/basic-sdk/comment/components/comment-all-participants/participant-avatar.js +0 -43
  21. package/dist/basic-sdk/comment/components/comment-delete-popover.js +0 -80
  22. package/dist/basic-sdk/comment/components/comment-item-collapse-wrapper.js +0 -160
  23. package/dist/basic-sdk/comment/components/comment-item-content.js +0 -154
  24. package/dist/basic-sdk/comment/components/comment-item-reply.js +0 -124
  25. package/dist/basic-sdk/comment/components/comment-item-resolved-reply.js +0 -38
  26. package/dist/basic-sdk/comment/components/comment-item-wrapper.js +0 -364
  27. package/dist/basic-sdk/comment/components/comment-list.css +0 -422
  28. package/dist/basic-sdk/comment/components/comment-list.js +0 -216
  29. package/dist/basic-sdk/comment/components/comment-participants-editor/index.css +0 -132
  30. package/dist/basic-sdk/comment/components/comment-participants-editor/index.js +0 -69
  31. package/dist/basic-sdk/comment/components/comment-participants-editor/searched-collaborators.js +0 -62
  32. package/dist/basic-sdk/comment/components/comment-participants-editor/selected-participants.js +0 -48
  33. package/dist/basic-sdk/comment/components/editor-comment.js +0 -183
  34. package/dist/basic-sdk/comment/components/elements-comment-count/element-comment-count.js +0 -64
  35. package/dist/basic-sdk/comment/components/elements-comment-count/index.css +0 -29
  36. package/dist/basic-sdk/comment/components/elements-comment-count/index.js +0 -49
  37. package/dist/basic-sdk/comment/components/global-comment/global-comment-body-header.js +0 -88
  38. package/dist/basic-sdk/comment/components/global-comment/global-comment-header.js +0 -90
  39. package/dist/basic-sdk/comment/components/global-comment/index.css +0 -328
  40. package/dist/basic-sdk/comment/components/global-comment/index.js +0 -217
  41. package/dist/basic-sdk/comment/components/index.js +0 -21
  42. package/dist/basic-sdk/comment/components/style.css +0 -40
  43. package/dist/basic-sdk/comment/helper.js +0 -184
  44. package/dist/basic-sdk/comment/hooks/comment-hooks/use-comment-context.js +0 -20
  45. package/dist/basic-sdk/comment/hooks/comment-hooks/use-comment-list.js +0 -45
  46. package/dist/basic-sdk/comment/hooks/comment-hooks/use-comment-mount.js +0 -57
  47. package/dist/basic-sdk/comment/hooks/notification-hooks/index.js +0 -25
  48. package/dist/basic-sdk/comment/hooks/notification-hooks/use-notification-context.js +0 -20
  49. package/dist/basic-sdk/comment/hooks/notification-hooks/use-notification-mount.js +0 -70
  50. package/dist/basic-sdk/comment/hooks/use-participants.js +0 -26
  51. package/dist/basic-sdk/comment/index.js +0 -21
  52. package/dist/basic-sdk/comment/reducer/comment-reducer.js +0 -353
  53. package/dist/basic-sdk/comment/reducer/notification-reducer.js +0 -89
  54. package/dist/basic-sdk/comment/utils/get-event-transfer.js +0 -77
  55. package/dist/basic-sdk/comment/utils/index.js +0 -281
  56. package/dist/basic-sdk/comment/utils/notification-utils.js +0 -62
  57. package/dist/basic-sdk/layout/comment-layout/index.css +0 -15
  58. package/dist/basic-sdk/layout/comment-layout/index.js +0 -87
  59. package/dist/basic-sdk/layout/comment-layout/resize-width/index.css +0 -38
  60. package/dist/basic-sdk/layout/comment-layout/resize-width/index.js +0 -132
  61. package/dist/basic-sdk/layout/editor-container.js +0 -32
  62. package/dist/basic-sdk/layout/index.js +0 -13
  63. package/dist/basic-sdk/socket/index.js +0 -20
  64. package/dist/basic-sdk/socket/socket-client.js +0 -211
  65. package/dist/basic-sdk/socket/socket-manager.js +0 -386
  66. package/dist/basic-sdk/socket/with-socket-io.js +0 -73
  67. /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('<', '&lt;').replaceAll('>', '&gt;');
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 = '&nbsp;';
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"));
@@ -1,20 +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, "SocketManager", {
8
- enumerable: true,
9
- get: function () {
10
- return _socketManager.default;
11
- }
12
- });
13
- Object.defineProperty(exports, "withSocketIO", {
14
- enumerable: true,
15
- get: function () {
16
- return _withSocketIo.default;
17
- }
18
- });
19
- var _socketManager = _interopRequireDefault(require("./socket-manager"));
20
- var _withSocketIo = _interopRequireDefault(require("./with-socket-io"));