@seafile/sdoc-editor 1.0.156 → 1.0.158
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/constants/index.js +6 -4
- package/dist/basic-sdk/extension/plugins/check-list/index.js +2 -0
- package/dist/basic-sdk/extension/plugins/paragraph/index.js +1 -1
- package/dist/basic-sdk/extension/plugins/quick-insert/index.js +1 -1
- package/dist/basic-sdk/extension/toolbar/header-toolbar/insert-toolbar/index.js +2 -1
- package/dist/basic-sdk/extension/toolbar/insert-element-toolbar/index.js +3 -0
- package/dist/basic-sdk/extension/toolbar/side-toolbar/insert-block-menu.js +1 -1
- package/dist/basic-sdk/layout/editor-content.js +19 -1
- package/dist/basic-sdk/utils/default-mode.js +3 -3
- package/dist/basic-sdk/utils/full-width-mode.js +13 -21
- package/package.json +1 -1
|
@@ -4,7 +4,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.PAGE_EDIT_AREA_WIDTH = exports.MODIFY_TYPE = exports.LEFT_OUTLINE_WIDTH = exports.INTERNAL_EVENT = exports.HEADER_OUTLINE_WIDTH_MAPPING = exports.FULL_WIDTH_MODE = exports.DOCUMENT_PLUGIN_EDITOR = exports.DIFF_VIEWER = exports.COMMENT_EDITOR_EDIT_AREA_WIDTH = exports.COMMENT_EDITOR = exports.
|
|
7
|
+
exports.PAGE_EDIT_AREA_WIDTH = exports.MODIFY_TYPE = exports.LEFT_OUTLINE_WIDTH = exports.INTERNAL_EVENT = exports.HEADER_OUTLINE_WIDTH_MAPPING = exports.FULL_WIDTH_MODE = exports.DOCUMENT_PLUGIN_EDITOR = exports.DIFF_VIEWER = exports.COMMENT_EDITOR_EDIT_AREA_WIDTH = exports.COMMENT_EDITOR = exports.ARTICLE_FULL_WIDTH = exports.ARTICLE_FULL_MIN_WIDTH = exports.ARTICLE_DEFAULT_WIDTH = void 0;
|
|
8
8
|
Object.defineProperty(exports, "PLUGIN_BTN_POSITION", {
|
|
9
9
|
enumerable: true,
|
|
10
10
|
get: function () {
|
|
@@ -93,6 +93,8 @@ const SDOC_STORAGE = exports.SDOC_STORAGE = 'sdoc';
|
|
|
93
93
|
const LEFT_OUTLINE_WIDTH = exports.LEFT_OUTLINE_WIDTH = 280;
|
|
94
94
|
const RIGHT_COMMENT_WIDTH = exports.RIGHT_COMMENT_WIDTH = 314;
|
|
95
95
|
|
|
96
|
-
//
|
|
97
|
-
const
|
|
98
|
-
|
|
96
|
+
// Default mode width
|
|
97
|
+
const ARTICLE_DEFAULT_WIDTH = exports.ARTICLE_DEFAULT_WIDTH = '794px';
|
|
98
|
+
// Width in full width mode
|
|
99
|
+
const ARTICLE_FULL_WIDTH = exports.ARTICLE_FULL_WIDTH = 'calc(100% - 50px - 50px)'; // The left and right sides are 50
|
|
100
|
+
const ARTICLE_FULL_MIN_WIDTH = exports.ARTICLE_FULL_MIN_WIDTH = '400px';
|
|
@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.default = void 0;
|
|
8
|
+
var _constants = require("../../constants");
|
|
8
9
|
var _plugin = _interopRequireDefault(require("./plugin"));
|
|
9
10
|
var _renderElem = require("./render-elem");
|
|
10
11
|
const CheckListPlugin = {
|
|
12
|
+
type: _constants.CHECK_LIST_ITEM,
|
|
11
13
|
editorPlugin: _plugin.default,
|
|
12
14
|
renderElements: [_renderElem.renderCheckListItem]
|
|
13
15
|
};
|
|
@@ -9,8 +9,8 @@ var _plugin = _interopRequireDefault(require("./plugin"));
|
|
|
9
9
|
var _constants = require("../../constants");
|
|
10
10
|
var _renderElem = require("./render-elem");
|
|
11
11
|
const ParagraphPlugin = {
|
|
12
|
-
editorPlugin: _plugin.default,
|
|
13
12
|
type: _constants.PARAGRAPH,
|
|
13
|
+
editorPlugin: _plugin.default,
|
|
14
14
|
renderElements: [_renderElem.renderParagraph]
|
|
15
15
|
};
|
|
16
16
|
var _default = exports.default = ParagraphPlugin;
|
|
@@ -9,8 +9,8 @@ var _constants = require("../../constants");
|
|
|
9
9
|
var _renderElem = _interopRequireDefault(require("./render-elem"));
|
|
10
10
|
var _plugin = _interopRequireDefault(require("./plugin"));
|
|
11
11
|
const QuickInsertPlugin = {
|
|
12
|
-
editorPlugin: _plugin.default,
|
|
13
12
|
type: _constants.QUICK_INSERT,
|
|
13
|
+
editorPlugin: _plugin.default,
|
|
14
14
|
renderElements: [_renderElem.default]
|
|
15
15
|
};
|
|
16
16
|
var _default = exports.default = QuickInsertPlugin;
|
|
@@ -20,6 +20,7 @@ var _menu6 = _interopRequireDefault(require("../../../plugins/file-link/menu"));
|
|
|
20
20
|
var _menu7 = _interopRequireDefault(require("../../../plugins/seatable-column/menu"));
|
|
21
21
|
var _menu8 = _interopRequireDefault(require("../../../plugins/seatable-tables/menu"));
|
|
22
22
|
var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
|
|
23
|
+
var _constants = require("../../../../constants");
|
|
23
24
|
require("./index.css");
|
|
24
25
|
const InsertToolbar = _ref => {
|
|
25
26
|
let {
|
|
@@ -94,7 +95,7 @@ const InsertToolbar = _ref => {
|
|
|
94
95
|
style: {
|
|
95
96
|
maxHeight: window.innerHeight - bottom - 100
|
|
96
97
|
}
|
|
97
|
-
}, /*#__PURE__*/_react.default.createElement(_menu.default, props), /*#__PURE__*/_react.default.createElement(_tableMenu.default, props), /*#__PURE__*/_react.default.createElement(_menu2.default, props), /*#__PURE__*/_react.default.createElement(_menu3.default, props), /*#__PURE__*/_react.default.createElement(_menu4.default, props), /*#__PURE__*/_react.default.createElement("div", {
|
|
98
|
+
}, /*#__PURE__*/_react.default.createElement(_menu.default, props), /*#__PURE__*/_react.default.createElement(_tableMenu.default, props), (editor === null || editor === void 0 ? void 0 : editor.editorType) !== _constants.DOCUMENT_PLUGIN_EDITOR && /*#__PURE__*/_react.default.createElement(_menu2.default, props), /*#__PURE__*/_react.default.createElement(_menu3.default, props), /*#__PURE__*/_react.default.createElement(_menu4.default, props), /*#__PURE__*/_react.default.createElement("div", {
|
|
98
99
|
className: "sdoc-dropdown-menu-divider"
|
|
99
100
|
}), editor.columns && /*#__PURE__*/_react.default.createElement(_menu7.default, props), editor.tables && /*#__PURE__*/_react.default.createElement(_menu8.default, props), !editor.tables && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_menu5.default, props), /*#__PURE__*/_react.default.createElement(_menu6.default, props)))));
|
|
100
101
|
};
|
|
@@ -272,6 +272,9 @@ const QuickInsertBlockMenu = _ref => {
|
|
|
272
272
|
onClick: () => createMultiColumn(item.type)
|
|
273
273
|
});
|
|
274
274
|
});
|
|
275
|
+
if ((editor === null || editor === void 0 ? void 0 : editor.editorType) === _constants2.DOCUMENT_PLUGIN_EDITOR) {
|
|
276
|
+
delete items[_constants.VIDEO];
|
|
277
|
+
}
|
|
275
278
|
return items;
|
|
276
279
|
}, [isDisableImage, onInsertImageToggle, isDisableVideo, onInsertVideoToggle, editor, createTable, openLinkDialog, onInsertBlockQuote, onInsertCodeBlock, isDisableCallout, onInsertCheckList, isEmptyNode, onInsertCallout, onInsertList, onInsert, createMultiColumn, quickInsertMenuSearchMap]);
|
|
277
280
|
const getSelectItemDom = selectIndex => {
|
|
@@ -112,7 +112,7 @@ const InsertBlockMenu = _ref => {
|
|
|
112
112
|
..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.IMAGE]
|
|
113
113
|
},
|
|
114
114
|
onClick: onInsertImageToggle
|
|
115
|
-
}), /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
|
|
115
|
+
}), editor.editorType !== _constants2.DOCUMENT_PLUGIN_EDITOR && /*#__PURE__*/_react.default.createElement(_dropdownMenuItem.default, {
|
|
116
116
|
isHidden: !insertMenuSearchMap[_constants.ELEMENT_TYPE.VIDEO],
|
|
117
117
|
menuConfig: {
|
|
118
118
|
..._constants.SIDE_INSERT_MENUS_CONFIG[_constants.ELEMENT_TYPE.VIDEO]
|
|
@@ -12,6 +12,9 @@ var _outline = _interopRequireDefault(require("../outline"));
|
|
|
12
12
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
13
|
var _provider = _interopRequireDefault(require("../comment/provider"));
|
|
14
14
|
var _rightPanel = _interopRequireDefault(require("../right-panel"));
|
|
15
|
+
var _localStorageUtils = _interopRequireDefault(require("../../utils/local-storage-utils"));
|
|
16
|
+
var _fullWidthMode = require("../utils/full-width-mode");
|
|
17
|
+
var _constants = require("../../basic-sdk/constants");
|
|
15
18
|
const EditorContent = _ref => {
|
|
16
19
|
let {
|
|
17
20
|
readonly,
|
|
@@ -29,6 +32,20 @@ const EditorContent = _ref => {
|
|
|
29
32
|
} = event.target;
|
|
30
33
|
setScrollLeft(scrollLeft);
|
|
31
34
|
}, []);
|
|
35
|
+
const onBodyScroll = (0, _react.useCallback)(() => {
|
|
36
|
+
const scrollLeft = window.scrollX;
|
|
37
|
+
setScrollLeft(scrollLeft);
|
|
38
|
+
}, []);
|
|
39
|
+
(0, _react.useEffect)(() => {
|
|
40
|
+
// Modify the outline position even when scrolling the window
|
|
41
|
+
if (_localStorageUtils.default.getItem(_constants.FULL_WIDTH_MODE)) {
|
|
42
|
+
document.addEventListener('scroll', onBodyScroll);
|
|
43
|
+
}
|
|
44
|
+
return () => {
|
|
45
|
+
document.removeEventListener('scroll', onBodyScroll);
|
|
46
|
+
};
|
|
47
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
48
|
+
}, []);
|
|
32
49
|
const className = (0, _classnames.default)('sdoc-editor-content', {
|
|
33
50
|
'readonly': readonly,
|
|
34
51
|
'no-outline': !showOutline
|
|
@@ -50,7 +67,8 @@ const EditorContent = _ref => {
|
|
|
50
67
|
scrollRef
|
|
51
68
|
}
|
|
52
69
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
53
|
-
className: className
|
|
70
|
+
className: className,
|
|
71
|
+
style: (0, _fullWidthMode.getContentStyleByFullModeStyle)()
|
|
54
72
|
}, showOutline && /*#__PURE__*/_react.default.createElement(_outline.default, {
|
|
55
73
|
scrollLeft: scrollLeft,
|
|
56
74
|
doc: docValue
|
|
@@ -14,20 +14,20 @@ const getStyleByDefaultMode = (scrollRef, editor) => {
|
|
|
14
14
|
isShowComments
|
|
15
15
|
} = sdocStorage;
|
|
16
16
|
const containerStyle = {
|
|
17
|
-
width: _constants.
|
|
17
|
+
width: _constants.ARTICLE_DEFAULT_WIDTH
|
|
18
18
|
};
|
|
19
19
|
|
|
20
20
|
// Has outline
|
|
21
21
|
if (isShowOutline && editor.editorType !== _constants.WIKI_EDITOR) {
|
|
22
22
|
const rect = scrollRef.current.getBoundingClientRect();
|
|
23
23
|
if (isShowComments) {
|
|
24
|
-
const outlineRightWidth = Number(_constants.
|
|
24
|
+
const outlineRightWidth = Number(_constants.ARTICLE_DEFAULT_WIDTH.slice(0, 3)) + _constants.RIGHT_COMMENT_WIDTH;
|
|
25
25
|
if (rect.width - outlineRightWidth < 280) {
|
|
26
26
|
containerStyle['marginLeft'] = `${_constants.LEFT_OUTLINE_WIDTH}px`;
|
|
27
27
|
return containerStyle;
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
|
-
if ((rect.width - Number(_constants.
|
|
30
|
+
if ((rect.width - Number(_constants.ARTICLE_DEFAULT_WIDTH.slice(0, 3))) / 2 < 280) {
|
|
31
31
|
containerStyle['marginLeft'] = `${_constants.LEFT_OUTLINE_WIDTH}px`;
|
|
32
32
|
}
|
|
33
33
|
}
|
|
@@ -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.getStyleByFullWidthMode = void 0;
|
|
7
|
+
exports.getStyleByFullWidthMode = exports.getContentStyleByFullModeStyle = void 0;
|
|
8
8
|
var _localStorageUtils = _interopRequireDefault(require("../../utils/local-storage-utils"));
|
|
9
|
-
var _defaultMode = require("./default-mode");
|
|
10
9
|
var _constants = require("../constants");
|
|
11
10
|
const getStyleByFullWidthMode = (scrollRef, editor) => {
|
|
12
11
|
const sdocStorage = _localStorageUtils.default.getItem(_constants.SDOC_STORAGE) || {};
|
|
@@ -16,23 +15,7 @@ const getStyleByFullWidthMode = (scrollRef, editor) => {
|
|
|
16
15
|
} = sdocStorage;
|
|
17
16
|
let containerStyle = {};
|
|
18
17
|
containerStyle['width'] = _constants.ARTICLE_FULL_WIDTH;
|
|
19
|
-
|
|
20
|
-
// Has outline and comments
|
|
21
|
-
if (isShowOutline && editor.editorType !== _constants.WIKI_EDITOR && isHasComments) {
|
|
22
|
-
const rect = scrollRef.current.getBoundingClientRect();
|
|
23
|
-
const currentMaxWidth = rect.width - 100;
|
|
24
|
-
const leftWidth = _constants.LEFT_OUTLINE_WIDTH - 50;
|
|
25
|
-
const rightWidth = _constants.RIGHT_COMMENT_WIDTH - 50;
|
|
26
|
-
// Enough width to enable widescreen mode
|
|
27
|
-
if (currentMaxWidth - leftWidth - rightWidth > _constants.ARTICLE_MIN_WIDTH.slice(0, -2)) {
|
|
28
|
-
containerStyle['marginLeft'] = `${_constants.LEFT_OUTLINE_WIDTH}px`;
|
|
29
|
-
containerStyle['width'] = containerStyle['width'].slice(0, -1) + ` - ${leftWidth + rightWidth}px`;
|
|
30
|
-
} else {
|
|
31
|
-
_localStorageUtils.default.setItem(_constants.FULL_WIDTH_MODE, false);
|
|
32
|
-
containerStyle = (0, _defaultMode.getStyleByDefaultMode)(scrollRef, editor);
|
|
33
|
-
}
|
|
34
|
-
return containerStyle;
|
|
35
|
-
}
|
|
18
|
+
containerStyle['minWidth'] = _constants.ARTICLE_FULL_MIN_WIDTH;
|
|
36
19
|
|
|
37
20
|
// Has outline
|
|
38
21
|
if (isShowOutline && editor.editorType !== _constants.WIKI_EDITOR) {
|
|
@@ -40,7 +23,7 @@ const getStyleByFullWidthMode = (scrollRef, editor) => {
|
|
|
40
23
|
const adjustWidth = ` - ${_constants.LEFT_OUTLINE_WIDTH - 50}px`; // One side is 50
|
|
41
24
|
containerStyle['width'] = containerStyle['width'].slice(0, -1) + adjustWidth;
|
|
42
25
|
}
|
|
43
|
-
// Has comments
|
|
26
|
+
// Has comments right list
|
|
44
27
|
if (isHasComments) {
|
|
45
28
|
containerStyle['marginRight'] = `${_constants.RIGHT_COMMENT_WIDTH}px`;
|
|
46
29
|
const adjustWidth = ` - ${_constants.RIGHT_COMMENT_WIDTH - 50}px`; // One side is 50
|
|
@@ -48,4 +31,13 @@ const getStyleByFullWidthMode = (scrollRef, editor) => {
|
|
|
48
31
|
}
|
|
49
32
|
return containerStyle;
|
|
50
33
|
};
|
|
51
|
-
exports.getStyleByFullWidthMode = getStyleByFullWidthMode;
|
|
34
|
+
exports.getStyleByFullWidthMode = getStyleByFullWidthMode;
|
|
35
|
+
const getContentStyleByFullModeStyle = () => {
|
|
36
|
+
if (_localStorageUtils.default.getItem(_constants.FULL_WIDTH_MODE)) {
|
|
37
|
+
return {
|
|
38
|
+
'minWidth': `${Number(_constants.ARTICLE_FULL_MIN_WIDTH.slice(0, -2)) + _constants.RIGHT_COMMENT_WIDTH}px`
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
return {};
|
|
42
|
+
};
|
|
43
|
+
exports.getContentStyleByFullModeStyle = getContentStyleByFullModeStyle;
|