@seafile/sdoc-editor 2.0.59 → 2.0.61
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/{utils → basic-sdk/comment/utils}/get-event-transfer.js +4 -6
- package/dist/basic-sdk/comment/utils/index.js +2 -2
- package/dist/basic-sdk/editor/sdoc-editor.js +9 -16
- package/dist/basic-sdk/extension/plugins/ai/ai-module/index.js +0 -4
- package/dist/basic-sdk/extension/plugins/callout/helper.js +2 -20
- package/dist/basic-sdk/extension/plugins/callout/render-elem/index.js +3 -3
- package/dist/basic-sdk/extension/plugins/chart/render-elem.js +2 -11
- package/dist/basic-sdk/extension/plugins/link/helpers.js +7 -2
- package/dist/basic-sdk/extension/plugins/link/render-elem.js +1 -4
- package/dist/basic-sdk/extension/plugins/search-replace/popover/index.js +2 -2
- package/dist/basic-sdk/extension/plugins/seatable-column/model.js +2 -1
- package/dist/basic-sdk/extension/plugins/seatable-column/render-elem.css +36 -0
- package/dist/basic-sdk/extension/plugins/seatable-column/render-elem.js +76 -12
- package/dist/basic-sdk/extension/plugins/seatable-tables/render-element/index.css +1 -1
- package/dist/basic-sdk/extension/plugins/seatable-tables/render-element/seatable-table.js +2 -10
- package/dist/basic-sdk/extension/utils/index.js +16 -9
- package/dist/constants/index.js +1 -4
- package/dist/pages/document-plugin-editor.js +1 -0
- package/dist/utils/index.js +1 -9
- package/package.json +2 -1
- package/dist/constants/transfer-types.js +0 -9
|
@@ -3,12 +3,10 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
TEXT
|
|
11
|
-
} = _constants.TransferTypes;
|
|
6
|
+
exports.default = exports.TEXT = exports.HTML = exports.FILES = void 0;
|
|
7
|
+
const HTML = exports.HTML = 'text/html';
|
|
8
|
+
const TEXT = exports.TEXT = 'text/plain';
|
|
9
|
+
const FILES = exports.FILES = 'files';
|
|
12
10
|
function getEventTransfer(event) {
|
|
13
11
|
let html;
|
|
14
12
|
let text;
|
|
@@ -22,12 +22,12 @@ exports.searchCollaborators = exports.getCommentElementById = void 0;
|
|
|
22
22
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
|
|
23
23
|
var _slate = require("@seafile/slate");
|
|
24
24
|
var _slateReact = require("@seafile/slate-react");
|
|
25
|
-
var _utils = require("../../../utils");
|
|
26
25
|
var _helper = require("../../extension/plugins/mention/helper");
|
|
27
26
|
var _constants = require("../../../constants");
|
|
28
27
|
var _notificationUtils = require("./notification-utils");
|
|
29
28
|
var _core = require("../../extension/core");
|
|
30
29
|
var _constants2 = require("../../extension/constants");
|
|
30
|
+
var _getEventTransfer = _interopRequireDefault(require("./get-event-transfer"));
|
|
31
31
|
const searchCollaborators = (collaborators, searchValue, editor) => {
|
|
32
32
|
const validSearchValue = searchValue ? searchValue.trim().toLowerCase() : '';
|
|
33
33
|
const validCollaborators = Array.isArray(collaborators) && collaborators.length > 0 ? collaborators : [];
|
|
@@ -227,7 +227,7 @@ class CommentUtilities {
|
|
|
227
227
|
});
|
|
228
228
|
(0, _defineProperty2.default)(this, "onPaste", (event, callBack) => {
|
|
229
229
|
event.stopPropagation();
|
|
230
|
-
let cliperData = (0,
|
|
230
|
+
let cliperData = (0, _getEventTransfer.default)(event);
|
|
231
231
|
if (cliperData.files) {
|
|
232
232
|
let file = cliperData.files[0];
|
|
233
233
|
let isImage = /image/i.test(file.type);
|
|
@@ -29,7 +29,6 @@ var _outlineModule = require("../../android/outline-module");
|
|
|
29
29
|
var _jsBridge = _interopRequireDefault(require("../../android/js-bridge"));
|
|
30
30
|
var _helpers = require("../extension/plugins/ai/ai-module/helpers");
|
|
31
31
|
const SdocEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
32
|
-
var _ref3;
|
|
33
32
|
let {
|
|
34
33
|
editor: propsEditor,
|
|
35
34
|
document,
|
|
@@ -210,10 +209,11 @@ const SdocEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
210
209
|
className: "h-100 w-100 d-flex align-items-center justify-content-center"
|
|
211
210
|
}, /*#__PURE__*/_react.default.createElement(_commonLoading.default, null));
|
|
212
211
|
}
|
|
213
|
-
if (_utils.isMobile) {
|
|
212
|
+
if (_utils.isMobile || showFullScreen) {
|
|
214
213
|
return /*#__PURE__*/_react.default.createElement(_layout.EditorContainer, {
|
|
215
214
|
editor: validEditor,
|
|
216
|
-
readonly: true
|
|
215
|
+
readonly: true,
|
|
216
|
+
fullscreen: showFullScreen
|
|
217
217
|
}, /*#__PURE__*/_react.default.createElement(_useColorContext.ColorProvider, null, /*#__PURE__*/_react.default.createElement(_layout.EditorContent, {
|
|
218
218
|
docValue: slateValue,
|
|
219
219
|
readonly: true,
|
|
@@ -247,27 +247,20 @@ const SdocEditor = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
247
247
|
}
|
|
248
248
|
const isShowComment = typeof showComment === 'boolean' ? showComment : true;
|
|
249
249
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_layout.EditorContainer, {
|
|
250
|
-
editor: validEditor
|
|
251
|
-
|
|
252
|
-
fullscreen: showFullScreen
|
|
253
|
-
}, /*#__PURE__*/_react.default.createElement(_useColorContext.ColorProvider, null, !showFullScreen && isShowHeaderToolbar && /*#__PURE__*/_react.default.createElement(_extension.HeaderToolbar, {
|
|
250
|
+
editor: validEditor
|
|
251
|
+
}, /*#__PURE__*/_react.default.createElement(_useColorContext.ColorProvider, null, isShowHeaderToolbar && /*#__PURE__*/_react.default.createElement(_extension.HeaderToolbar, {
|
|
254
252
|
editor: validEditor
|
|
255
253
|
}), /*#__PURE__*/_react.default.createElement(_layout.EditorContent, {
|
|
256
254
|
docValue: slateValue,
|
|
257
|
-
showOutline:
|
|
258
|
-
readonly: showFullScreen,
|
|
255
|
+
showOutline: showOutline !== null && showOutline !== void 0 ? showOutline : true,
|
|
259
256
|
editor: validEditor,
|
|
260
|
-
showComment:
|
|
261
|
-
},
|
|
262
|
-
editor: validEditor,
|
|
263
|
-
slateValue: slateValue,
|
|
264
|
-
showComment: false
|
|
265
|
-
}) : /*#__PURE__*/_react.default.createElement(_editableArticle.default, {
|
|
257
|
+
showComment: isShowComment
|
|
258
|
+
}, /*#__PURE__*/_react.default.createElement(_editableArticle.default, {
|
|
266
259
|
editor: validEditor,
|
|
267
260
|
slateValue: slateValue,
|
|
268
261
|
updateSlateValue: onValueChange,
|
|
269
262
|
showComment: isShowComment
|
|
270
|
-
})))),
|
|
263
|
+
})))), /*#__PURE__*/_react.default.createElement(_insertElementDialog.default, {
|
|
271
264
|
editor: validEditor
|
|
272
265
|
}));
|
|
273
266
|
});
|
|
@@ -476,9 +476,6 @@ function AIModule(_ref) {
|
|
|
476
476
|
const isShowAdjust = (0, _react.useMemo)(() => {
|
|
477
477
|
return ![_constants.OPERATION_TYPES.DEFAULT, _constants.OPERATION_TYPES.TRANSLATE].includes(opType);
|
|
478
478
|
}, [opType]);
|
|
479
|
-
const isShowReplace = (0, _react.useMemo)(() => {
|
|
480
|
-
return opType !== _constants.OPERATION_TYPES.DEFAULT;
|
|
481
|
-
}, [opType]);
|
|
482
479
|
const closeTipDialog = (0, _react.useCallback)(() => {
|
|
483
480
|
setIsShowTipDialog(false);
|
|
484
481
|
}, []);
|
|
@@ -578,7 +575,6 @@ function AIModule(_ref) {
|
|
|
578
575
|
onClick: onTryAgainClick
|
|
579
576
|
}), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
|
|
580
577
|
menuConfig: _constants.OPERATION_MENUS_CONFIG.REPLACE,
|
|
581
|
-
isHidden: !isShowReplace,
|
|
582
578
|
onClick: onReplaceClick
|
|
583
579
|
}), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
|
|
584
580
|
menuConfig: _constants.OPERATION_MENUS_CONFIG.COPY,
|
|
@@ -3,12 +3,11 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.wrapCallout = exports.unwrapCallout = exports.setCalloutIcon = exports.isMenuDisabled = exports.isMenuActive = exports.isCalloutContentEmpty = exports.insertElementAtNewLineInCallout = exports.
|
|
6
|
+
exports.wrapCallout = exports.unwrapCallout = exports.setCalloutIcon = exports.isMenuDisabled = exports.isMenuActive = exports.isCalloutContentEmpty = exports.insertElementAtNewLineInCallout = exports.getCalloutEntry = exports.generateCallout = exports.deleteCalloutIcon = exports.changeFillBackgroundColor = void 0;
|
|
7
7
|
var _slate = require("@seafile/slate");
|
|
8
8
|
var _elementType = require("../../constants/element-type");
|
|
9
9
|
var _core = require("../../core");
|
|
10
10
|
var _constant = require("./constant");
|
|
11
|
-
var _constants = require("../../../constants");
|
|
12
11
|
const isMenuActive = editor => {
|
|
13
12
|
const {
|
|
14
13
|
selection
|
|
@@ -260,21 +259,4 @@ const insertElementAtNewLineInCallout = (editor, type, currentPath) => {
|
|
|
260
259
|
});
|
|
261
260
|
_slate.Transforms.select(editor, insertPath);
|
|
262
261
|
};
|
|
263
|
-
exports.insertElementAtNewLineInCallout = insertElementAtNewLineInCallout;
|
|
264
|
-
const getCalloutMenuPosition = (element, editor) => {
|
|
265
|
-
const {
|
|
266
|
-
top,
|
|
267
|
-
left
|
|
268
|
-
} = element.getBoundingClientRect();
|
|
269
|
-
const menuTop = top - 42; // top = top distance - menu height
|
|
270
|
-
const newMenuPosition = {
|
|
271
|
-
top: menuTop,
|
|
272
|
-
left: left // left = callout left distance
|
|
273
|
-
};
|
|
274
|
-
// 201 is distance with browser top
|
|
275
|
-
if (editor.editorType === _constants.DOCUMENT_PLUGIN_EDITOR && menuTop < 201) {
|
|
276
|
-
newMenuPosition['display'] = 'none';
|
|
277
|
-
}
|
|
278
|
-
return newMenuPosition;
|
|
279
|
-
};
|
|
280
|
-
exports.getCalloutMenuPosition = getCalloutMenuPosition;
|
|
262
|
+
exports.insertElementAtNewLineInCallout = insertElementAtNewLineInCallout;
|
|
@@ -14,8 +14,8 @@ var _constant = require("../constant");
|
|
|
14
14
|
var _constants = require("../../../../constants");
|
|
15
15
|
var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
|
|
16
16
|
var _useScrollContext = require("../../../../hooks/use-scroll-context");
|
|
17
|
-
var _helper = require("../helper");
|
|
18
17
|
var _calloutHoverMenu = _interopRequireDefault(require("./callout-hover-menu"));
|
|
18
|
+
var _utils = require("../../../utils");
|
|
19
19
|
require("./index.css");
|
|
20
20
|
/* eslint-disable react-hooks/rules-of-hooks */
|
|
21
21
|
|
|
@@ -74,7 +74,7 @@ const renderCallout = (_ref, editor) => {
|
|
|
74
74
|
if (readOnly) return;
|
|
75
75
|
if (!isShowColorSelector) return;
|
|
76
76
|
if (e.currentTarget.scrollTop) {
|
|
77
|
-
const menuPosition = (0,
|
|
77
|
+
const menuPosition = (0, _utils.getMenuPosition)(calloutRef.current, editor);
|
|
78
78
|
setPopoverPosition(menuPosition);
|
|
79
79
|
}
|
|
80
80
|
}, [editor, isShowColorSelector, readOnly]);
|
|
@@ -101,7 +101,7 @@ const renderCallout = (_ref, editor) => {
|
|
|
101
101
|
}, [isSelected]);
|
|
102
102
|
const handleDisplayColorSelector = (0, _react.useCallback)(() => {
|
|
103
103
|
if (readOnly) return;
|
|
104
|
-
const menuPosition = (0,
|
|
104
|
+
const menuPosition = (0, _utils.getMenuPosition)(calloutRef.current, editor);
|
|
105
105
|
setPopoverPosition(menuPosition);
|
|
106
106
|
setIsShowColorSelector(true);
|
|
107
107
|
}, [editor, readOnly]);
|
|
@@ -47,17 +47,8 @@ const Chart = _ref => {
|
|
|
47
47
|
const [isRender, setIsRender] = (0, _react.useState)(false);
|
|
48
48
|
const setPosition = (0, _react.useCallback)(() => {
|
|
49
49
|
if (chartRef.current) {
|
|
50
|
-
const
|
|
51
|
-
|
|
52
|
-
left
|
|
53
|
-
} = chartRef.current.getBoundingClientRect();
|
|
54
|
-
const curTop = top - 42; // top = top distance - menu height
|
|
55
|
-
const curLeft = left - 3;
|
|
56
|
-
const newMenuPosition = (0, _utils.checkOverflow)(editor, {
|
|
57
|
-
top: curTop,
|
|
58
|
-
left: curLeft
|
|
59
|
-
});
|
|
60
|
-
setMenuPosition(newMenuPosition);
|
|
50
|
+
const menuPosition = (0, _utils.getMenuPosition)(chartRef.current, editor);
|
|
51
|
+
setMenuPosition(menuPosition);
|
|
61
52
|
}
|
|
62
53
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
63
54
|
}, []);
|
|
@@ -199,7 +199,7 @@ const isWeChat = () => {
|
|
|
199
199
|
return isEnterpriseWeChat || isWeChat;
|
|
200
200
|
};
|
|
201
201
|
exports.isWeChat = isWeChat;
|
|
202
|
-
const getMenuPosition = element => {
|
|
202
|
+
const getMenuPosition = (element, editor) => {
|
|
203
203
|
if (!element) return {};
|
|
204
204
|
const {
|
|
205
205
|
top,
|
|
@@ -210,10 +210,15 @@ const getMenuPosition = element => {
|
|
|
210
210
|
const menuTop = top - 42;
|
|
211
211
|
// left = left distance - (menu width / 2) + (link with / 2)
|
|
212
212
|
const menuLeft = left - 140 / 2 + width / 2;
|
|
213
|
-
|
|
213
|
+
let menuPosition = {
|
|
214
214
|
top: menuTop,
|
|
215
215
|
left: menuLeft
|
|
216
216
|
};
|
|
217
|
+
// topOffset: the editor container left-top distance with browser top
|
|
218
|
+
if (editor.topOffset && menuPosition.top < editor.topOffset) {
|
|
219
|
+
menuPosition['display'] = 'none';
|
|
220
|
+
}
|
|
221
|
+
return menuPosition;
|
|
217
222
|
};
|
|
218
223
|
exports.getMenuPosition = getMenuPosition;
|
|
219
224
|
const isLinkToolBarActive = editor => {
|
|
@@ -50,10 +50,7 @@ class Link extends _react.default.Component {
|
|
|
50
50
|
const {
|
|
51
51
|
editor
|
|
52
52
|
} = this.props;
|
|
53
|
-
const menuPosition = (0, _helpers.getMenuPosition)(element);
|
|
54
|
-
if (editor.editorType === _constants.DOCUMENT_PLUGIN_EDITOR && menuPosition.top < 201) {
|
|
55
|
-
menuPosition['display'] = 'none';
|
|
56
|
-
}
|
|
53
|
+
const menuPosition = (0, _helpers.getMenuPosition)(element, editor);
|
|
57
54
|
this.setState({
|
|
58
55
|
menuPosition
|
|
59
56
|
});
|
|
@@ -50,8 +50,8 @@ const SearchReplacePopover = _ref => {
|
|
|
50
50
|
}, [currentSelectIndex, highlightInfos.length, searchContent.length, t]);
|
|
51
51
|
(0, _react.useEffect)(() => {
|
|
52
52
|
let y = 95;
|
|
53
|
-
if (editor.
|
|
54
|
-
y =
|
|
53
|
+
if (editor.topOffset) {
|
|
54
|
+
y = editor.topOffset;
|
|
55
55
|
}
|
|
56
56
|
setPopoverPosition({
|
|
57
57
|
x: pageInnerSizeRef.current.x - 420,
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
.sdoc-seatable-column-label-container {
|
|
2
|
+
position: absolute;
|
|
3
|
+
height: 42px;
|
|
4
|
+
z-index: 101;
|
|
5
|
+
width: fit-content;
|
|
6
|
+
max-width: 250px;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.sdoc-seatable-column-label-container .label-container {
|
|
10
|
+
height: 36px;
|
|
11
|
+
width: 100%;
|
|
12
|
+
padding: 7px 8px;
|
|
13
|
+
background-color: #fff;
|
|
14
|
+
display: flex;
|
|
15
|
+
justify-content: space-around;
|
|
16
|
+
align-items: center;
|
|
17
|
+
border-radius: 3px;
|
|
18
|
+
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
|
|
19
|
+
border: 1px solid #e8e8e8;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.sdoc-seatable-column-label-container .label-container .control-icon {
|
|
23
|
+
cursor: default;
|
|
24
|
+
margin-right: 5px;
|
|
25
|
+
flex-shrink: 0;
|
|
26
|
+
font-size: 12px;
|
|
27
|
+
color: #444;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.sdoc-seatable-column-label-container .label-container .control-label {
|
|
31
|
+
white-space: nowrap;
|
|
32
|
+
overflow: hidden;
|
|
33
|
+
text-overflow: ellipsis;
|
|
34
|
+
flex-grow: 1;
|
|
35
|
+
font-size: 14px;
|
|
36
|
+
}
|
|
@@ -9,6 +9,10 @@ exports.default = void 0;
|
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _slateReact = require("@seafile/slate-react");
|
|
11
11
|
var _mdToHtml = _interopRequireDefault(require("../../../../slate-convert/md-to-html"));
|
|
12
|
+
var _useScrollContext = require("../../../hooks/use-scroll-context");
|
|
13
|
+
var _utils = require("../../utils");
|
|
14
|
+
var _commons = require("../../commons");
|
|
15
|
+
require("./render-elem.css");
|
|
12
16
|
const Column = _ref => {
|
|
13
17
|
let {
|
|
14
18
|
props,
|
|
@@ -20,7 +24,13 @@ const Column = _ref => {
|
|
|
20
24
|
children
|
|
21
25
|
} = props;
|
|
22
26
|
const isReadOnly = (0, _slateReact.useReadOnly)();
|
|
23
|
-
const
|
|
27
|
+
const scrollRef = (0, _useScrollContext.useScrollContext)();
|
|
28
|
+
const seaTableColumnRef = (0, _react.useRef)(null);
|
|
29
|
+
const [menuPosition, setMenuPosition] = (0, _react.useState)({
|
|
30
|
+
top: '',
|
|
31
|
+
left: ''
|
|
32
|
+
});
|
|
33
|
+
const [isShowLabel, setIsShowLabel] = (0, _react.useState)(false);
|
|
24
34
|
const [columnValue, setColumnValue] = (0, _react.useState)('');
|
|
25
35
|
const data = element.data || {};
|
|
26
36
|
const {
|
|
@@ -49,14 +59,24 @@ const Column = _ref => {
|
|
|
49
59
|
});
|
|
50
60
|
}
|
|
51
61
|
}, [editor, element.data, isLongTextColumn, editor.currentRowIdx]);
|
|
52
|
-
const
|
|
62
|
+
const handleScroll = (0, _react.useCallback)(e => {
|
|
63
|
+
if (isReadOnly) return;
|
|
64
|
+
if (e.currentTarget.scrollTop) {
|
|
65
|
+
const menuPosition = (0, _utils.getMenuPosition)(seaTableColumnRef.current, editor);
|
|
66
|
+
setMenuPosition(menuPosition);
|
|
67
|
+
}
|
|
68
|
+
}, [editor, isReadOnly]);
|
|
53
69
|
(0, _react.useEffect)(() => {
|
|
54
|
-
if (
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
70
|
+
if (isReadOnly) return;
|
|
71
|
+
let observerRefValue = null;
|
|
72
|
+
if (scrollRef.current) {
|
|
73
|
+
scrollRef.current.addEventListener('scroll', handleScroll);
|
|
74
|
+
observerRefValue = scrollRef.current;
|
|
58
75
|
}
|
|
59
|
-
|
|
76
|
+
return () => {
|
|
77
|
+
observerRefValue.removeEventListener('scroll', handleScroll);
|
|
78
|
+
};
|
|
79
|
+
}, [handleScroll, isReadOnly, scrollRef]);
|
|
60
80
|
const {
|
|
61
81
|
font_size = null,
|
|
62
82
|
font = null,
|
|
@@ -72,8 +92,8 @@ const Column = _ref => {
|
|
|
72
92
|
border: '1px solid transparent',
|
|
73
93
|
userSelect: 'none',
|
|
74
94
|
display: 'inline-block',
|
|
75
|
-
...(
|
|
76
|
-
border: '1px solid
|
|
95
|
+
...(isShowLabel && {
|
|
96
|
+
border: '1px solid #007bff'
|
|
77
97
|
}),
|
|
78
98
|
...(font_size && {
|
|
79
99
|
fontSize: font_size
|
|
@@ -100,16 +120,60 @@ const Column = _ref => {
|
|
|
100
120
|
textDecoration: 'line-through'
|
|
101
121
|
})
|
|
102
122
|
};
|
|
123
|
+
const onColumnClick = (0, _react.useCallback)(event => {
|
|
124
|
+
event.stopPropagation();
|
|
125
|
+
if (isReadOnly || isShowLabel) return;
|
|
126
|
+
const {
|
|
127
|
+
top,
|
|
128
|
+
left
|
|
129
|
+
} = seaTableColumnRef.current.getBoundingClientRect();
|
|
130
|
+
const menuTop = top - 42; // top = top distance - menu height
|
|
131
|
+
const newMenuPosition = {
|
|
132
|
+
top: menuTop,
|
|
133
|
+
left: left // left = callout left distance
|
|
134
|
+
};
|
|
135
|
+
// 201 is distance with browser top
|
|
136
|
+
if (menuTop <= 201) {
|
|
137
|
+
newMenuPosition['display'] = 'none';
|
|
138
|
+
}
|
|
139
|
+
setMenuPosition(newMenuPosition);
|
|
140
|
+
setIsShowLabel(true);
|
|
141
|
+
}, [isReadOnly, isShowLabel]);
|
|
142
|
+
(0, _react.useEffect)(() => {
|
|
143
|
+
const onHideColumnLabel = event => {
|
|
144
|
+
if (seaTableColumnRef.current && !seaTableColumnRef.current.contains(event.target)) {
|
|
145
|
+
setIsShowLabel(false);
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
document.addEventListener('click', onHideColumnLabel, true);
|
|
149
|
+
return () => {
|
|
150
|
+
document.removeEventListener('click', onHideColumnLabel, true);
|
|
151
|
+
};
|
|
152
|
+
}, []);
|
|
103
153
|
return /*#__PURE__*/_react.default.createElement("span", Object.assign({}, attributes, {
|
|
104
|
-
style: style
|
|
105
|
-
|
|
154
|
+
style: style,
|
|
155
|
+
ref: seaTableColumnRef,
|
|
156
|
+
onClick: onColumnClick
|
|
157
|
+
}), /*#__PURE__*/_react.default.createElement("span", null, !isLongTextColumn && columnValue, isLongTextColumn && /*#__PURE__*/_react.default.createElement("div", {
|
|
106
158
|
style: {
|
|
107
159
|
padding: '10px'
|
|
108
160
|
},
|
|
109
161
|
dangerouslySetInnerHTML: {
|
|
110
162
|
__html: columnValue
|
|
111
163
|
}
|
|
112
|
-
}), children)
|
|
164
|
+
}), children), isShowLabel && /*#__PURE__*/_react.default.createElement(_commons.ElementPopover, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
165
|
+
className: "sdoc-seatable-column-label-container",
|
|
166
|
+
style: menuPosition,
|
|
167
|
+
contentEditable: false,
|
|
168
|
+
"data-slate-node": null,
|
|
169
|
+
"data-slate-editor": false
|
|
170
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
171
|
+
className: "label-container"
|
|
172
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
173
|
+
className: `control-icon ${data.icon_class}`
|
|
174
|
+
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
175
|
+
className: "control-label"
|
|
176
|
+
}, data.name)))));
|
|
113
177
|
};
|
|
114
178
|
const renderColumn = (props, editor) => {
|
|
115
179
|
return /*#__PURE__*/_react.default.createElement(Column, {
|
|
@@ -201,16 +201,8 @@ function SeaTableTable(_ref) {
|
|
|
201
201
|
if (readOnly) return;
|
|
202
202
|
if (!isShowMenu) return;
|
|
203
203
|
if (e.currentTarget.scrollTop) {
|
|
204
|
-
const
|
|
205
|
-
|
|
206
|
-
left
|
|
207
|
-
} = seaTableRef.current.getBoundingClientRect();
|
|
208
|
-
const menuTop = top - 42; // top = top distance - menu height
|
|
209
|
-
const newMenuPosition = (0, _utils.checkOverflow)(editor, {
|
|
210
|
-
top: menuTop,
|
|
211
|
-
left
|
|
212
|
-
});
|
|
213
|
-
setMenuPosition(newMenuPosition);
|
|
204
|
+
const menuPosition = (0, _utils.getMenuPosition)(seaTableRef.current, editor);
|
|
205
|
+
setMenuPosition(menuPosition);
|
|
214
206
|
}
|
|
215
207
|
}, [editor, isShowMenu, readOnly]);
|
|
216
208
|
(0, _react.useEffect)(() => {
|
|
@@ -4,9 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.onHandleOverflowScroll = exports.isSameDomain = exports.isOverflowPortByDirection = exports.isImage = exports.
|
|
7
|
+
exports.onHandleOverflowScroll = exports.isSameDomain = exports.isOverflowPortByDirection = exports.isImage = exports.getMenuPosition = exports.IMAGE_TYPES = void 0;
|
|
8
8
|
var _isUrl = _interopRequireDefault(require("is-url"));
|
|
9
|
-
var _constants = require("../../constants");
|
|
10
9
|
const IMAGE_TYPES = exports.IMAGE_TYPES = ['png', 'jpg', 'gif'];
|
|
11
10
|
const isImage = url => {
|
|
12
11
|
if (!url) return false;
|
|
@@ -70,12 +69,20 @@ const onHandleOverflowScroll = (currentSelectItem, downDownWrapperRef) => {
|
|
|
70
69
|
}
|
|
71
70
|
};
|
|
72
71
|
exports.onHandleOverflowScroll = onHandleOverflowScroll;
|
|
73
|
-
const
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
72
|
+
const getMenuPosition = (element, editor) => {
|
|
73
|
+
const {
|
|
74
|
+
top,
|
|
75
|
+
left
|
|
76
|
+
} = element.getBoundingClientRect();
|
|
77
|
+
const menuTop = top - 42; // top = top distance - menu height
|
|
78
|
+
let menuPosition = {
|
|
79
|
+
top: menuTop,
|
|
80
|
+
left: left // left = callout left distance
|
|
81
|
+
};
|
|
82
|
+
// topOffset: the editor container left-top distance with browser top
|
|
83
|
+
if (editor.topOffset && menuPosition.top < editor.topOffset) {
|
|
84
|
+
menuPosition['display'] = 'none';
|
|
78
85
|
}
|
|
79
|
-
return
|
|
86
|
+
return menuPosition;
|
|
80
87
|
};
|
|
81
|
-
exports.
|
|
88
|
+
exports.getMenuPosition = getMenuPosition;
|
package/dist/constants/index.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
@@ -12,10 +11,8 @@ Object.defineProperty(exports, "KeyCodes", {
|
|
|
12
11
|
return _keyCodes.default;
|
|
13
12
|
}
|
|
14
13
|
});
|
|
15
|
-
exports.
|
|
14
|
+
exports.TIP_TYPE = exports.TIP_TITLE = exports.TIP_CONTENT = void 0;
|
|
16
15
|
var _keyCodes = _interopRequireDefault(require("./key-codes"));
|
|
17
|
-
var TransferTypes = _interopRequireWildcard(require("./transfer-types"));
|
|
18
|
-
exports.TransferTypes = TransferTypes;
|
|
19
16
|
const EXTERNAL_EVENT = exports.EXTERNAL_EVENT = {
|
|
20
17
|
INTERNAL_LINK_CLICK: 'internal_link_click',
|
|
21
18
|
TOGGLE_STAR: 'toggle_star',
|
|
@@ -73,6 +73,7 @@ const DocumentPluginEditor = _ref => {
|
|
|
73
73
|
newEditor.cursors = cursors || {};
|
|
74
74
|
newEditor.width = _constants.PAGE_EDIT_AREA_WIDTH; // default width
|
|
75
75
|
newEditor.editorType = _constants.DOCUMENT_PLUGIN_EDITOR;
|
|
76
|
+
newEditor.topOffset = 201;
|
|
76
77
|
|
|
77
78
|
// article style
|
|
78
79
|
newEditor.getArticleStyle = getArticleStyle;
|
package/dist/utils/index.js
CHANGED
|
@@ -18,18 +18,10 @@ Object.defineProperty(exports, "LocalStorage", {
|
|
|
18
18
|
return _localStorageUtils.default;
|
|
19
19
|
}
|
|
20
20
|
});
|
|
21
|
-
exports.getErrorMsg = exports.getDirPath = exports.generateDefaultDocContent = void 0;
|
|
22
|
-
Object.defineProperty(exports, "getEventTransfer", {
|
|
23
|
-
enumerable: true,
|
|
24
|
-
get: function () {
|
|
25
|
-
return _getEventTransfer.default;
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
exports.resetWebTitle = exports.isMobile = exports.isMac = exports.isEnglish = exports.getSelectionCoords = exports.getMaximumCapacity = exports.getLocalStorageFiles = exports.getImageFileNameWithTimestamp = void 0;
|
|
21
|
+
exports.resetWebTitle = exports.isMobile = exports.isMac = exports.isEnglish = exports.getSelectionCoords = exports.getMaximumCapacity = exports.getLocalStorageFiles = exports.getImageFileNameWithTimestamp = exports.getErrorMsg = exports.getDirPath = exports.generateDefaultDocContent = void 0;
|
|
29
22
|
var _dateUtils = _interopRequireDefault(require("./date-utils"));
|
|
30
23
|
var _localStorageUtils = _interopRequireDefault(require("./local-storage-utils"));
|
|
31
24
|
var _context = _interopRequireDefault(require("../context"));
|
|
32
|
-
var _getEventTransfer = _interopRequireDefault(require("./get-event-transfer"));
|
|
33
25
|
var Hotkey = _interopRequireWildcard(require("./hotkey"));
|
|
34
26
|
exports.Hotkey = Hotkey;
|
|
35
27
|
const getDirPath = path => {
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seafile/sdoc-editor",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.61",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "This is a sdoc editor",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"dependencies": {
|
|
8
8
|
"@seafile/print-js": "1.6.6",
|
|
9
9
|
"@seafile/react-image-lightbox": "4.0.2",
|
|
10
|
+
"@seafile/sdoc-editor": "2.0.59",
|
|
10
11
|
"@seafile/slate": "0.91.8",
|
|
11
12
|
"@seafile/slate-history": "0.86.2",
|
|
12
13
|
"@seafile/slate-hyperscript": "0.81.7",
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.TEXT = exports.HTML = exports.FILES = void 0;
|
|
7
|
-
const HTML = exports.HTML = 'text/html';
|
|
8
|
-
const TEXT = exports.TEXT = 'text/plain';
|
|
9
|
-
const FILES = exports.FILES = 'files';
|