@seafile/sdoc-editor 2.0.6 → 2.0.8-alpha.0
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/dropdown-menu.css +14 -1
- package/dist/basic-sdk/extension/constants/element-type.js +2 -1
- package/dist/basic-sdk/extension/constants/index.js +8 -6
- package/dist/basic-sdk/extension/constants/menus-config.js +20 -0
- package/dist/basic-sdk/extension/plugins/chart/chart-edit-dialog/index.css +21 -0
- package/dist/basic-sdk/extension/plugins/chart/chart-edit-dialog/index.js +66 -0
- package/dist/basic-sdk/extension/plugins/chart/helpers.js +106 -0
- package/dist/basic-sdk/extension/plugins/chart/hover-menu/index.css +55 -0
- package/dist/basic-sdk/extension/plugins/chart/hover-menu/index.js +58 -0
- package/dist/basic-sdk/extension/plugins/chart/index.js +19 -0
- package/dist/basic-sdk/extension/plugins/chart/menu/index.js +31 -0
- package/dist/basic-sdk/extension/plugins/chart/plugin.js +26 -0
- package/dist/basic-sdk/extension/plugins/chart/render-elem.css +61 -0
- package/dist/basic-sdk/extension/plugins/chart/render-elem.js +155 -0
- package/dist/basic-sdk/extension/plugins/index.js +8 -1
- package/dist/basic-sdk/extension/plugins/multi-column/constants/index.js +1 -1
- package/dist/basic-sdk/extension/plugins/multi-column/helper.js +24 -7
- package/dist/basic-sdk/extension/plugins/multi-column/render/index.css +1 -3
- package/dist/basic-sdk/extension/plugins/multi-column/render/index.js +7 -2
- package/dist/basic-sdk/extension/plugins/multi-column/resize-handlers/index.js +2 -2
- package/dist/basic-sdk/extension/plugins/seatable-tables/menu/index.js +3 -6
- package/dist/basic-sdk/extension/plugins/seatable-tables/menu/seatable-list.js +35 -2
- package/dist/basic-sdk/extension/plugins/seatable-tables/op-menu/index.css +19 -4
- package/dist/basic-sdk/extension/plugins/seatable-tables/op-menu/index.js +39 -9
- package/dist/basic-sdk/extension/plugins/seatable-tables/render-element/seatable-table.js +2 -1
- package/dist/basic-sdk/extension/plugins/seatable-tables/seatable-settings/hide-column-setter/hide-column-popover.js +2 -4
- package/dist/basic-sdk/extension/plugins/table/helpers.js +1 -0
- package/dist/basic-sdk/extension/plugins/text-style/render-elem.js +2 -1
- package/dist/basic-sdk/extension/render/custom-element.js +5 -0
- 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 +7 -0
- package/dist/basic-sdk/extension/toolbar/side-toolbar/helpers.js +51 -1
- package/dist/basic-sdk/extension/toolbar/side-toolbar/index.js +116 -20
- package/dist/basic-sdk/utils/full-width-mode.js +1 -1
- package/dist/pages/document-plugin-editor.js +2 -0
- package/package.json +2 -1
- package/public/locales/cs/sdoc-editor.json +5 -1
- package/public/locales/de/sdoc-editor.json +64 -60
- package/public/locales/en/sdoc-editor.json +5 -1
- package/public/locales/es/sdoc-editor.json +5 -1
- package/public/locales/es_AR/sdoc-editor.json +5 -1
- package/public/locales/es_MX/sdoc-editor.json +5 -1
- package/public/locales/fr/sdoc-editor.json +238 -234
- package/public/locales/it/sdoc-editor.json +5 -1
- package/public/locales/ru/sdoc-editor.json +6 -2
- package/public/locales/zh_CN/sdoc-editor.json +4 -1
|
@@ -0,0 +1,155 @@
|
|
|
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 _slateReact = require("@seafile/slate-react");
|
|
11
|
+
var _slate = require("@seafile/slate");
|
|
12
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
|
+
var _seaChart = require("sea-chart");
|
|
14
|
+
var _reactI18next = require("react-i18next");
|
|
15
|
+
var _hoverMenu = _interopRequireDefault(require("./hover-menu/"));
|
|
16
|
+
var _chartEditDialog = _interopRequireDefault(require("./chart-edit-dialog"));
|
|
17
|
+
var _context = _interopRequireDefault(require("../../../../context"));
|
|
18
|
+
var _useScrollContext = require("../../../hooks/use-scroll-context");
|
|
19
|
+
var _helpers = require("./helpers");
|
|
20
|
+
require("./render-elem.css");
|
|
21
|
+
const Chart = _ref => {
|
|
22
|
+
var _window, _window$app, _window2, _window2$app, _window2$app$state;
|
|
23
|
+
let {
|
|
24
|
+
element,
|
|
25
|
+
editor,
|
|
26
|
+
attributes,
|
|
27
|
+
children,
|
|
28
|
+
isSelected,
|
|
29
|
+
t
|
|
30
|
+
} = _ref;
|
|
31
|
+
const {
|
|
32
|
+
statItem
|
|
33
|
+
} = element;
|
|
34
|
+
const api = {
|
|
35
|
+
queryUsers: (_window = window) !== null && _window !== void 0 && (_window$app = _window.app) !== null && _window$app !== void 0 && _window$app.queryUsers ? window.app.queryUsers : () => {},
|
|
36
|
+
getTableFormulaResults: editor.getTableFormulaResults,
|
|
37
|
+
getViewRows: editor.getViewRows
|
|
38
|
+
};
|
|
39
|
+
const scrollRef = (0, _useScrollContext.useScrollContext)();
|
|
40
|
+
const readOnly = (0, _slateReact.useReadOnly)();
|
|
41
|
+
const chartRef = (0, _react.useRef)(null);
|
|
42
|
+
const [menuPosition, setMenuPosition] = (0, _react.useState)({});
|
|
43
|
+
const [isShowHoverMenu, setIsShowHoverMenu] = (0, _react.useState)(false);
|
|
44
|
+
const [isShowDialog, setIsShowDialog] = (0, _react.useState)(false);
|
|
45
|
+
const [isFullScreen, setIsFullScreen] = (0, _react.useState)(false);
|
|
46
|
+
const setPosition = (0, _react.useCallback)(() => {
|
|
47
|
+
if (chartRef.current) {
|
|
48
|
+
const {
|
|
49
|
+
top,
|
|
50
|
+
left
|
|
51
|
+
} = chartRef.current.getBoundingClientRect();
|
|
52
|
+
setMenuPosition({
|
|
53
|
+
top: top - 42,
|
|
54
|
+
left: left - 3
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
}, []);
|
|
58
|
+
const onScroll = (0, _react.useCallback)(e => {
|
|
59
|
+
setPosition();
|
|
60
|
+
// Unrendered chart scrolls into viewport for the first time
|
|
61
|
+
// if (isInViewPort(chartRef.current) && !chartRef.current.chartMetaData && isSelectedTable(statItem, editor?.dtableBases) && !chartRef.current.isStopScroll) {
|
|
62
|
+
// chartRef.current.isStopScroll = true;
|
|
63
|
+
// }
|
|
64
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
65
|
+
}, []);
|
|
66
|
+
const onClickChart = (0, _react.useCallback)(() => {
|
|
67
|
+
const path = _slateReact.ReactEditor.findPath(editor, element);
|
|
68
|
+
_slate.Transforms.select(editor, [path[0]]);
|
|
69
|
+
setPosition();
|
|
70
|
+
setIsShowHoverMenu(true);
|
|
71
|
+
}, [editor, element, setPosition]);
|
|
72
|
+
const onCloseEditDialog = (0, _react.useCallback)(newStatItemData => {
|
|
73
|
+
const path = _slateReact.ReactEditor.findPath(editor, element);
|
|
74
|
+
_slate.Transforms.setNodes(editor, {
|
|
75
|
+
statItem: newStatItemData
|
|
76
|
+
}, {
|
|
77
|
+
at: [path[0]]
|
|
78
|
+
});
|
|
79
|
+
setIsShowDialog(false);
|
|
80
|
+
}, [editor, element]);
|
|
81
|
+
|
|
82
|
+
// Mount
|
|
83
|
+
(0, _react.useEffect)(() => {
|
|
84
|
+
// Init draw
|
|
85
|
+
if ((0, _helpers.isInViewPort)(chartRef.current)) {
|
|
86
|
+
// getDtables(statItem.base_id, true);
|
|
87
|
+
}
|
|
88
|
+
let observerRefValue = null;
|
|
89
|
+
if (scrollRef.current) {
|
|
90
|
+
scrollRef.current.addEventListener('scroll', onScroll);
|
|
91
|
+
observerRefValue = scrollRef.current;
|
|
92
|
+
}
|
|
93
|
+
return () => {
|
|
94
|
+
observerRefValue.removeEventListener('scroll', onScroll);
|
|
95
|
+
};
|
|
96
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
97
|
+
}, []);
|
|
98
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", Object.assign({
|
|
99
|
+
id: element.id,
|
|
100
|
+
className: "sdoc-chart-container"
|
|
101
|
+
}, attributes, {
|
|
102
|
+
onClick: onClickChart
|
|
103
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
104
|
+
className: (0, _classnames.default)('sdoc-chart-view', {
|
|
105
|
+
'active': isSelected
|
|
106
|
+
}),
|
|
107
|
+
ref: chartRef
|
|
108
|
+
}, children, /*#__PURE__*/_react.default.createElement("div", {
|
|
109
|
+
className: "sdoc-chart-view-content",
|
|
110
|
+
contentEditable: false
|
|
111
|
+
}, /*#__PURE__*/_react.default.createElement(_seaChart.View, {
|
|
112
|
+
chart: statItem,
|
|
113
|
+
api: api,
|
|
114
|
+
config: _context.default.getSettings(),
|
|
115
|
+
tables: editor.tables,
|
|
116
|
+
collaborators: editor.collaborators || [],
|
|
117
|
+
departments: ((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$app = _window2.app) === null || _window2$app === void 0 ? void 0 : (_window2$app$state = _window2$app.state) === null || _window2$app$state === void 0 ? void 0 : _window2$app$state.departments) || [],
|
|
118
|
+
isCalculateByView: true,
|
|
119
|
+
isRenderByD3: true
|
|
120
|
+
})), /*#__PURE__*/_react.default.createElement("span", {
|
|
121
|
+
className: "sdoc-chart-view-rect sdoc-chart-view-rect-lt"
|
|
122
|
+
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
123
|
+
className: "sdoc-chart-view-rect sdoc-chart-view-rect-lb"
|
|
124
|
+
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
125
|
+
className: "sdoc-chart-view-rect sdoc-chart-view-rect-rt"
|
|
126
|
+
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
127
|
+
className: "sdoc-chart-view-rect sdoc-chart-view-rect-rb"
|
|
128
|
+
}))), isSelected && isShowHoverMenu && !readOnly && /*#__PURE__*/_react.default.createElement(_hoverMenu.default, {
|
|
129
|
+
menuPosition: menuPosition,
|
|
130
|
+
onEditChart: () => {
|
|
131
|
+
setIsFullScreen(false);
|
|
132
|
+
setIsShowDialog(true);
|
|
133
|
+
},
|
|
134
|
+
onFullscreen: () => {
|
|
135
|
+
setIsFullScreen(true);
|
|
136
|
+
setIsShowDialog(true);
|
|
137
|
+
}
|
|
138
|
+
}), isShowDialog && /*#__PURE__*/_react.default.createElement(_chartEditDialog.default, {
|
|
139
|
+
editor: editor,
|
|
140
|
+
element: element,
|
|
141
|
+
api: api,
|
|
142
|
+
isFullScreen: isFullScreen,
|
|
143
|
+
onCloseEditDialog: onCloseEditDialog
|
|
144
|
+
}));
|
|
145
|
+
};
|
|
146
|
+
const SdocChart = (0, _reactI18next.withTranslation)('sdoc-editor')(Chart);
|
|
147
|
+
function renderChart(props, editor) {
|
|
148
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
149
|
+
const isSelected = (0, _slateReact.useSelected)();
|
|
150
|
+
return /*#__PURE__*/_react.default.createElement(SdocChart, Object.assign({}, props, {
|
|
151
|
+
editor: editor,
|
|
152
|
+
isSelected: isSelected
|
|
153
|
+
}));
|
|
154
|
+
}
|
|
155
|
+
var _default = exports.default = renderChart;
|
|
@@ -16,6 +16,12 @@ Object.defineProperty(exports, "CalloutPlugin", {
|
|
|
16
16
|
return _callout.default;
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
+
Object.defineProperty(exports, "ChartPlugin", {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
get: function () {
|
|
22
|
+
return _chart.default;
|
|
23
|
+
}
|
|
24
|
+
});
|
|
19
25
|
Object.defineProperty(exports, "CheckListPlugin", {
|
|
20
26
|
enumerable: true,
|
|
21
27
|
get: function () {
|
|
@@ -188,7 +194,8 @@ var _wikiLink = _interopRequireDefault(require("./wiki-link"));
|
|
|
188
194
|
var _seatableColumn = _interopRequireDefault(require("./seatable-column"));
|
|
189
195
|
var _seatableTables = _interopRequireDefault(require("./seatable-tables"));
|
|
190
196
|
var _group = _interopRequireDefault(require("./group"));
|
|
191
|
-
|
|
197
|
+
var _chart = _interopRequireDefault(require("./chart"));
|
|
198
|
+
const Plugins = [_markdown.default, _html.default, _header.default, _link.default, _blockquote.default, _list.default, _checkList.default, _codeBlock.default, _image.default, _video.default, _table.default, _multiColumn.default, _textStyle.default, _textAlign.default, _font.default, _sdocLink.default, _paragraph.default, _fileLink.default, _callout.default, _searchReplace.default, _quickInsert.default, _group.default, _chart.default];
|
|
192
199
|
const WikiPlugins = exports.WikiPlugins = [...Plugins, _wikiLink.default];
|
|
193
200
|
const CommentPlugins = exports.CommentPlugins = [_markdown.default, _html.default, _paragraph.default, _textStyle.default, _list.default, _image.default, _link.default, _mention.default, _blockquote.default];
|
|
194
201
|
var _default = exports.default = Plugins;
|
|
@@ -11,6 +11,9 @@ var _slateReact = require("@seafile/slate-react");
|
|
|
11
11
|
var _constants = require("../../constants");
|
|
12
12
|
var _constants2 = require("./constants");
|
|
13
13
|
var _core = require("../../core");
|
|
14
|
+
var _localStorageUtils = _interopRequireDefault(require("../../../../utils/local-storage-utils"));
|
|
15
|
+
var _constants3 = require("../../../constants");
|
|
16
|
+
var _fullWidthMode = require("../../../utils/full-width-mode");
|
|
14
17
|
const insertMultiColumn = function (editor, selection) {
|
|
15
18
|
let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _constants.INSERT_POSITION.CURRENT;
|
|
16
19
|
let type = arguments.length > 3 ? arguments[3] : undefined;
|
|
@@ -40,7 +43,7 @@ const generateEmptyMultiColumn = (editor, MultiColumnType) => {
|
|
|
40
43
|
default:
|
|
41
44
|
break;
|
|
42
45
|
}
|
|
43
|
-
const currentPageWidth = getCurrentPageWidth();
|
|
46
|
+
const currentPageWidth = getCurrentPageWidth(editor);
|
|
44
47
|
const initialColumnWidth = Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(currentPageWidth / multiColumnNumber));
|
|
45
48
|
for (let i = 0; i < multiColumnNumber; i++) {
|
|
46
49
|
const columnWidthKey = _slugid.default.nice();
|
|
@@ -139,12 +142,13 @@ const handleInsertMultiColumn = (editor, insertPosition, path, multiColumnNode)
|
|
|
139
142
|
_slateReact.ReactEditor.focus(editor);
|
|
140
143
|
};
|
|
141
144
|
exports.handleInsertMultiColumn = handleInsertMultiColumn;
|
|
142
|
-
const updateColumnWidthOnDeletion = (editor, selection, column, deletionDirection)
|
|
143
|
-
|
|
145
|
+
const updateColumnWidthOnDeletion = function (editor, selection, column, deletionDirection) {
|
|
146
|
+
let isDragged = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
|
147
|
+
const multiColumnPath = !isDragged ? [selection.anchor.path[0]] : [selection[0]];
|
|
144
148
|
const newMultiColumnNode = _slate.Node.get(editor, multiColumnPath);
|
|
145
|
-
const targetColumnIndex = selection.anchor.path[1] + (deletionDirection === 'deleteForward' ? 1 : 0);
|
|
149
|
+
const targetColumnIndex = !isDragged ? selection.anchor.path[1] + (deletionDirection === 'deleteForward' ? 1 : 0) : selection[1] + (deletionDirection === 'deleteForward' ? 1 : 0);
|
|
146
150
|
const remainingColumn = column.filter((_, index) => index !== targetColumnIndex);
|
|
147
|
-
const currentPageWidth = getCurrentPageWidth();
|
|
151
|
+
const currentPageWidth = getCurrentPageWidth(editor);
|
|
148
152
|
const columnWidth = Math.max(_constants2.COLUMN_MIN_WIDTH, parseInt(currentPageWidth / remainingColumn.length));
|
|
149
153
|
|
|
150
154
|
// Recalculate width of every left column
|
|
@@ -156,9 +160,22 @@ const updateColumnWidthOnDeletion = (editor, selection, column, deletionDirectio
|
|
|
156
160
|
updateColumnWidth(editor, newMultiColumnNode, newColumn, multiColumnPath);
|
|
157
161
|
};
|
|
158
162
|
exports.updateColumnWidthOnDeletion = updateColumnWidthOnDeletion;
|
|
159
|
-
const getCurrentPageWidth =
|
|
163
|
+
const getCurrentPageWidth = editor => {
|
|
160
164
|
const sdocEditorPage = document.getElementById('sdoc-editor');
|
|
161
|
-
|
|
165
|
+
let pageWidth;
|
|
166
|
+
pageWidth = sdocEditorPage === null || sdocEditorPage === void 0 ? void 0 : sdocEditorPage.getBoundingClientRect().width;
|
|
167
|
+
|
|
168
|
+
// Get pageWidth if on is_full_width mode
|
|
169
|
+
if (_localStorageUtils.default.getItem(_constants3.FULL_WIDTH_MODE)) {
|
|
170
|
+
var _getStyleByFullWidthM;
|
|
171
|
+
const sdocEditorPageContent = document.getElementsByClassName('sdoc-editor-page-content')[0];
|
|
172
|
+
const pageContentWidth = sdocEditorPageContent === null || sdocEditorPageContent === void 0 ? void 0 : sdocEditorPageContent.getBoundingClientRect().width;
|
|
173
|
+
const pageWidthString = (_getStyleByFullWidthM = (0, _fullWidthMode.getStyleByFullWidthMode)(undefined, editor)) === null || _getStyleByFullWidthM === void 0 ? void 0 : _getStyleByFullWidthM.width;
|
|
174
|
+
const numbers = pageWidthString.match(/\d+/g).map(Number);
|
|
175
|
+
|
|
176
|
+
// 120 is padding and 2 is border width of 'sdoc-editor' dom;
|
|
177
|
+
pageWidth = pageContentWidth - numbers.slice(1).reduce((sum, num) => sum + num, 0) - 120 - 2;
|
|
178
|
+
}
|
|
162
179
|
return pageWidth;
|
|
163
180
|
};
|
|
164
181
|
exports.getCurrentPageWidth = getCurrentPageWidth;
|
|
@@ -16,16 +16,14 @@
|
|
|
16
16
|
.sdoc-multicolumn-wrapper .column {
|
|
17
17
|
display: flex;
|
|
18
18
|
left: 3px;
|
|
19
|
-
line-height: 1.5;
|
|
20
19
|
align-items: flex-start;
|
|
21
20
|
}
|
|
22
21
|
|
|
23
22
|
.sdoc-column-container {
|
|
24
|
-
width: calc(100% -
|
|
23
|
+
width: calc(100% - 50px);
|
|
25
24
|
max-width: 100%;
|
|
26
25
|
position: relative;
|
|
27
26
|
padding: 5px 5px 5px 0px;
|
|
28
|
-
margin-left: 15px;
|
|
29
27
|
box-sizing: border-box;
|
|
30
28
|
word-wrap: break-word;
|
|
31
29
|
white-space: pre-wrap;
|
|
@@ -26,10 +26,15 @@ const MultiColumn = _ref => {
|
|
|
26
26
|
...element.style
|
|
27
27
|
} : {});
|
|
28
28
|
const multiColumnContainerClassName = (0, _classnames.default)('sdoc-multicolumn-container', className);
|
|
29
|
-
const [pageWidth, setPageWidth] = (0, _react.useState)((0, _helper.getCurrentPageWidth)());
|
|
29
|
+
const [pageWidth, setPageWidth] = (0, _react.useState)((0, _helper.getCurrentPageWidth)(editor));
|
|
30
30
|
const handleResizeColumn = newColumn => {
|
|
31
31
|
(0, _helper.updateColumnWidth)(editor, element, newColumn);
|
|
32
32
|
};
|
|
33
|
+
(0, _react.useEffect)(() => {
|
|
34
|
+
setPageWidth((0, _helper.getCurrentPageWidth)(editor));
|
|
35
|
+
}
|
|
36
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
37
|
+
, []);
|
|
33
38
|
(0, _react.useEffect)(() => {
|
|
34
39
|
const sdocEditorPage = document.getElementById('sdoc-editor');
|
|
35
40
|
if (!sdocEditorPage) return;
|
|
@@ -37,7 +42,7 @@ const MultiColumn = _ref => {
|
|
|
37
42
|
var _entries$;
|
|
38
43
|
const newPageWidth = (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : _entries$.contentRect.width;
|
|
39
44
|
// Check if sdocPageWidth changes
|
|
40
|
-
if (newPageWidth !== pageWidth) {
|
|
45
|
+
if (pageWidth && newPageWidth !== pageWidth) {
|
|
41
46
|
const scaleFactor = newPageWidth / pageWidth;
|
|
42
47
|
const updatedColumns = element.column.map(item => ({
|
|
43
48
|
...item,
|
|
@@ -129,14 +129,14 @@ const ResizeHandlers = _ref => {
|
|
|
129
129
|
}, index === 0 && /*#__PURE__*/_react.default.createElement("div", {
|
|
130
130
|
className: "column-width-just",
|
|
131
131
|
style: {
|
|
132
|
-
left: '
|
|
132
|
+
left: '-15px'
|
|
133
133
|
}
|
|
134
134
|
}), /*#__PURE__*/_react.default.createElement(_columnResizeHandler.default, {
|
|
135
135
|
key: index,
|
|
136
136
|
index: index,
|
|
137
137
|
handleMouseDown: handleMouseDown,
|
|
138
138
|
style: {
|
|
139
|
-
left: `${left}px`
|
|
139
|
+
left: `${left - 15}px`
|
|
140
140
|
},
|
|
141
141
|
adjustingCell: adjustingCell,
|
|
142
142
|
isDraggingResizeHandler: isDraggingResizeHandler,
|
|
@@ -22,7 +22,6 @@ const SeaTableTableMenu = _ref => {
|
|
|
22
22
|
toggle,
|
|
23
23
|
isHidden = false
|
|
24
24
|
} = _ref;
|
|
25
|
-
const dropDownMenuRef = (0, _react.useRef)(null);
|
|
26
25
|
const menuConfig = _constants.MENUS_CONFIG_MAP[_constants.SEATABLE_TABLE];
|
|
27
26
|
let disabled = (0, _helpers.isInsertSeaTableTableDisabled)(editor, readonly);
|
|
28
27
|
if (insertPosition === _constants.INSERT_POSITION.AFTER) {
|
|
@@ -37,17 +36,15 @@ const SeaTableTableMenu = _ref => {
|
|
|
37
36
|
menuConfig: menuConfig,
|
|
38
37
|
className: (0, _classnames.default)('pr-2 sdoc-dropdown-menu-item-relative', {
|
|
39
38
|
'sdoc-dropdown-menu-item-hidden': isHidden
|
|
40
|
-
})
|
|
41
|
-
ref: dropDownMenuRef
|
|
39
|
+
})
|
|
42
40
|
}, !disabled && /*#__PURE__*/_react.default.createElement("i", {
|
|
43
41
|
className: "sdocfont sdoc-right-slide sdoc-dropdown-item-right-icon"
|
|
44
42
|
}), !disabled && /*#__PURE__*/_react.default.createElement(_reactstrap.UncontrolledPopover, {
|
|
45
43
|
target: menuConfig.id,
|
|
46
44
|
trigger: "hover",
|
|
47
|
-
className: "sdoc-menu-popover sdoc-sub-dropdown-menu",
|
|
45
|
+
className: "sdoc-menu-popover sdoc-dropdown-menu sdoc-sub-dropdown-menu",
|
|
48
46
|
hideArrow: true,
|
|
49
|
-
fade: false
|
|
50
|
-
container: dropDownMenuRef === null || dropDownMenuRef === void 0 ? void 0 : dropDownMenuRef.current
|
|
47
|
+
fade: false
|
|
51
48
|
}, /*#__PURE__*/_react.default.createElement(_seatableList.default, {
|
|
52
49
|
editor: editor,
|
|
53
50
|
readonly: readonly,
|
|
@@ -6,15 +6,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _reactstrap = require("reactstrap");
|
|
10
|
+
var _reactI18next = require("react-i18next");
|
|
9
11
|
var _utils = require("../../../utils");
|
|
10
12
|
const SeaTableList = _ref => {
|
|
11
13
|
let {
|
|
12
14
|
editor,
|
|
13
15
|
onViewClick
|
|
14
16
|
} = _ref;
|
|
17
|
+
const {
|
|
18
|
+
t
|
|
19
|
+
} = (0, _reactI18next.useTranslation)('sdoc-editor');
|
|
15
20
|
const seatableRef = (0, _react.useRef)(null);
|
|
21
|
+
const isComposingRef = (0, _react.useRef)(null);
|
|
16
22
|
const [computedStyle, setComputedStyle] = (0, _react.useState)({});
|
|
17
|
-
const tables = editor.tables;
|
|
23
|
+
const [tables, setTables] = (0, _react.useState)(editor.tables || []);
|
|
18
24
|
(0, _react.useEffect)(() => {
|
|
19
25
|
if (seatableRef.current) {
|
|
20
26
|
// bottom overflow
|
|
@@ -29,16 +35,43 @@ const SeaTableList = _ref => {
|
|
|
29
35
|
});
|
|
30
36
|
}
|
|
31
37
|
}, []);
|
|
38
|
+
const onChange = (0, _react.useCallback)(event => {
|
|
39
|
+
if (isComposingRef.current) return;
|
|
40
|
+
const value = event.target.value.trim().toUpperCase();
|
|
41
|
+
if (value) {
|
|
42
|
+
const list = editor.tables.filter(item => item.name.toUpperCase().includes(value));
|
|
43
|
+
setTables(list);
|
|
44
|
+
} else {
|
|
45
|
+
setTables(editor.tables);
|
|
46
|
+
}
|
|
47
|
+
}, [editor.tables]);
|
|
48
|
+
const onCompositionStart = (0, _react.useCallback)(() => {
|
|
49
|
+
isComposingRef.current = true;
|
|
50
|
+
}, []);
|
|
51
|
+
const onCompositionEnd = (0, _react.useCallback)(e => {
|
|
52
|
+
isComposingRef.current = false;
|
|
53
|
+
onChange(e);
|
|
54
|
+
}, [onChange]);
|
|
32
55
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
33
56
|
ref: seatableRef,
|
|
34
57
|
className: "sdoc-dropdown-menu-container sdoc-seatable-selected-table-list-wrapper",
|
|
35
58
|
style: computedStyle
|
|
59
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
60
|
+
className: "sdoc-seatable-list-search-wrapper"
|
|
61
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
|
|
62
|
+
placeholder: t('Search_action'),
|
|
63
|
+
onChange: onChange,
|
|
64
|
+
autoFocus: true,
|
|
65
|
+
onCompositionStart: onCompositionStart,
|
|
66
|
+
onCompositionEnd: onCompositionEnd
|
|
67
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
68
|
+
className: "sdoc-seatable-list-wrapper"
|
|
36
69
|
}, tables.map(item => {
|
|
37
70
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
38
71
|
key: item._id,
|
|
39
72
|
className: "sdoc-dropdown-menu-item text-truncate d-block",
|
|
40
73
|
onClick: () => onViewClick(item)
|
|
41
74
|
}, item.name);
|
|
42
|
-
}));
|
|
75
|
+
})));
|
|
43
76
|
};
|
|
44
77
|
var _default = exports.default = SeaTableList;
|
|
@@ -113,22 +113,34 @@
|
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popover .tables-list-empty {
|
|
116
|
-
padding:
|
|
116
|
+
padding: 0px 16px;
|
|
117
117
|
width: 100%;
|
|
118
118
|
font-size: 13px;
|
|
119
|
-
text-align: center;
|
|
120
119
|
line-height: 30px;
|
|
121
120
|
vertical-align: middle;
|
|
122
121
|
}
|
|
123
122
|
|
|
124
123
|
.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popover .seatable-setting-container {
|
|
125
124
|
list-style: none;
|
|
126
|
-
overflow-y: auto;
|
|
127
125
|
max-height: 280px;
|
|
128
126
|
min-height: 80px;
|
|
129
127
|
padding: 8px 0px;
|
|
130
128
|
}
|
|
131
129
|
|
|
130
|
+
.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popover .seatable-setting-container .seatable-setting-input-wrapper {
|
|
131
|
+
padding: 0px 10px 8px 10px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popover .seatable-setting-container .seatable-setting-input-wrapper input {
|
|
135
|
+
max-height: 28px;
|
|
136
|
+
font-size: 14px;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popover .seatable-setting-container .seatable-setting-list-wrapper {
|
|
140
|
+
max-height: 228px;
|
|
141
|
+
overflow-y: auto;
|
|
142
|
+
}
|
|
143
|
+
|
|
132
144
|
.sdoc-seatable-hover-menu-container .hover-menu-container .sdoc-seatable-setting-popover .seatable-setting-container .seatable-setting-item {
|
|
133
145
|
position: relative;
|
|
134
146
|
white-space: nowrap;
|
|
@@ -191,6 +203,9 @@
|
|
|
191
203
|
left: 158px !important;
|
|
192
204
|
transform: unset !important;
|
|
193
205
|
max-height: 350px;
|
|
194
|
-
overflow: auto;
|
|
195
206
|
margin-top: 0px !important;
|
|
196
207
|
}
|
|
208
|
+
|
|
209
|
+
.sdoc-seatable-setting-hide-column-popover-wrapper .field-settings .field-settings-body {
|
|
210
|
+
max-height: 278px;
|
|
211
|
+
}
|
|
@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.default = OpMenu;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _reactI18next = require("react-i18next");
|
|
11
|
+
var _reactstrap = require("reactstrap");
|
|
11
12
|
var _commons = require("../../../commons");
|
|
12
13
|
var _tooltip = _interopRequireDefault(require("../../../../../components/tooltip"));
|
|
13
14
|
var _customSwitch = _interopRequireDefault(require("../seatable-settings/custom-switch"));
|
|
@@ -22,18 +23,26 @@ const TablesList = _ref => {
|
|
|
22
23
|
let {
|
|
23
24
|
tablesData,
|
|
24
25
|
onSelectTable,
|
|
25
|
-
selectedTableText
|
|
26
|
+
selectedTableText,
|
|
27
|
+
onChange,
|
|
28
|
+
onCompositionStart,
|
|
29
|
+
onCompositionEnd
|
|
26
30
|
} = _ref;
|
|
27
31
|
const {
|
|
28
32
|
t
|
|
29
33
|
} = (0, _reactI18next.useTranslation)('sdoc-editor');
|
|
30
|
-
if (!tablesData.length) {
|
|
31
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
32
|
-
className: "tables-list-empty"
|
|
33
|
-
}, /*#__PURE__*/_react.default.createElement("span", null, t('Search_not_found')));
|
|
34
|
-
}
|
|
35
34
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
36
35
|
className: "seatable-setting-container"
|
|
36
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
37
|
+
className: "seatable-setting-input-wrapper"
|
|
38
|
+
}, /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
|
|
39
|
+
autoFocus: true,
|
|
40
|
+
placeholder: t('Search_action'),
|
|
41
|
+
onChange: onChange,
|
|
42
|
+
onCompositionStart: onCompositionStart,
|
|
43
|
+
onCompositionEnd: onCompositionEnd
|
|
44
|
+
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
45
|
+
className: "seatable-setting-list-wrapper"
|
|
37
46
|
}, tablesData.map(item => {
|
|
38
47
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
39
48
|
className: `seatable-setting-item ${selectedTableText === item.name ? 'active' : ''}`,
|
|
@@ -49,7 +58,9 @@ const TablesList = _ref => {
|
|
|
49
58
|
}, /*#__PURE__*/_react.default.createElement("i", {
|
|
50
59
|
className: "sdocfont sdoc-check-mark icon-font"
|
|
51
60
|
})));
|
|
52
|
-
})
|
|
61
|
+
}), !tablesData.length && /*#__PURE__*/_react.default.createElement("div", {
|
|
62
|
+
className: "tables-list-empty"
|
|
63
|
+
}, /*#__PURE__*/_react.default.createElement("span", null, t('Search_not_found')))));
|
|
53
64
|
};
|
|
54
65
|
const TablesSettings = _ref2 => {
|
|
55
66
|
let {
|
|
@@ -97,7 +108,8 @@ function OpMenu(_ref3) {
|
|
|
97
108
|
} = (0, _reactI18next.useTranslation)('sdoc-editor');
|
|
98
109
|
const scrollRef = (0, _useScrollContext.useScrollContext)();
|
|
99
110
|
const timer = (0, _react.useRef)(null);
|
|
100
|
-
const
|
|
111
|
+
const hoverMenuRef = (0, _react.useRef)(null);
|
|
112
|
+
const [tablesData, setTablesData] = (0, _react.useState)(editor.tables || []);
|
|
101
113
|
const [isShowTooltip, setIsShowTooltip] = (0, _react.useState)(false);
|
|
102
114
|
const [selectedTable, setSelectedTable] = (0, _react.useState)({});
|
|
103
115
|
const [selectedTableText, setSelectedTableText] = (0, _react.useState)('');
|
|
@@ -242,8 +254,23 @@ function OpMenu(_ref3) {
|
|
|
242
254
|
onCloseOther(['tableList', 'tableSort', 'tableColumnHidden', 'tableFilter']);
|
|
243
255
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
244
256
|
}, [isShowSeaTableSetting]);
|
|
257
|
+
const onChange = (0, _react.useCallback)(e => {
|
|
258
|
+
if (!hoverMenuRef.current.isInputtingChinese) {
|
|
259
|
+
const value = e.target.value.trim().toUpperCase();
|
|
260
|
+
const newTablesData = editor.tables.filter(item => item.name.toUpperCase().includes(value));
|
|
261
|
+
setTablesData(newTablesData);
|
|
262
|
+
}
|
|
263
|
+
}, [editor.tables]);
|
|
264
|
+
const onCompositionStart = (0, _react.useCallback)(() => {
|
|
265
|
+
hoverMenuRef.current.isInputtingChinese = true;
|
|
266
|
+
}, []);
|
|
267
|
+
const onCompositionEnd = (0, _react.useCallback)(e => {
|
|
268
|
+
hoverMenuRef.current.isInputtingChinese = false;
|
|
269
|
+
onChange(e);
|
|
270
|
+
}, [onChange]);
|
|
245
271
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_commons.ElementPopover, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
246
272
|
id: "sdoc-seatable-hover-menu-container",
|
|
273
|
+
ref: hoverMenuRef,
|
|
247
274
|
className: "sdoc-seatable-hover-menu-container",
|
|
248
275
|
style: menuPosition
|
|
249
276
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -317,7 +344,10 @@ function OpMenu(_ref3) {
|
|
|
317
344
|
}, /*#__PURE__*/_react.default.createElement(TablesList, {
|
|
318
345
|
tablesData: tablesData,
|
|
319
346
|
onSelectTable: onSelectTable,
|
|
320
|
-
selectedTableText: selectedTableText
|
|
347
|
+
selectedTableText: selectedTableText,
|
|
348
|
+
onChange: onChange,
|
|
349
|
+
onCompositionStart: onCompositionStart,
|
|
350
|
+
onCompositionEnd: onCompositionEnd
|
|
321
351
|
})), /*#__PURE__*/_react.default.createElement(_filterSetter.default, {
|
|
322
352
|
target: "sdoc_seatable_filter",
|
|
323
353
|
container: document.getElementById('sdoc-seatable-hover-menu-container'),
|
|
@@ -311,7 +311,8 @@ function SeaTableTable(_ref) {
|
|
|
311
311
|
}), isLoading && /*#__PURE__*/_react.default.createElement(_loading.default, null), !isLoading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("table", {
|
|
312
312
|
className: (0, _classnames.default)('seatable-view-records', {
|
|
313
313
|
'no_alternate_color': !element.alternate_color
|
|
314
|
-
})
|
|
314
|
+
}),
|
|
315
|
+
contentEditable: false
|
|
315
316
|
}, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement(_recordHeader.default, {
|
|
316
317
|
editor: editor,
|
|
317
318
|
element: element,
|
|
@@ -171,6 +171,7 @@ class HideColumnPopover extends _react.default.Component {
|
|
|
171
171
|
}, /*#__PURE__*/_react.default.createElement("input", {
|
|
172
172
|
className: "form-control",
|
|
173
173
|
type: "text",
|
|
174
|
+
autoFocus: true,
|
|
174
175
|
placeholder: t('Search_column'),
|
|
175
176
|
value: this.state.searchVal,
|
|
176
177
|
onChange: this.onChangeSearch
|
|
@@ -179,10 +180,7 @@ class HideColumnPopover extends _react.default.Component {
|
|
|
179
180
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
180
181
|
className: "empty-hidden-columns-list"
|
|
181
182
|
}, t('No_columns_available_to_be_hidden'))), !isEmpty && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
182
|
-
className: "field-settings-body"
|
|
183
|
-
style: {
|
|
184
|
-
maxHeight: window.innerHeight - 400 + 'px'
|
|
185
|
-
}
|
|
183
|
+
className: "field-settings-body"
|
|
186
184
|
}, fieldSettings.map(setting => {
|
|
187
185
|
return /*#__PURE__*/_react.default.createElement(_hideColumnItem.default, {
|
|
188
186
|
key: setting.key,
|
|
@@ -42,6 +42,7 @@ const isTableMenuDisabled = (editor, readonly) => {
|
|
|
42
42
|
if (type === _constants.ELEMENT_TYPE.TABLE_CELL) return true;
|
|
43
43
|
if (type === _constants.ELEMENT_TYPE.TABLE_ROW) return true;
|
|
44
44
|
if (type === _constants.ELEMENT_TYPE.CALL_OUT) return true;
|
|
45
|
+
if (type === _constants.ELEMENT_TYPE.MULTI_COLUMN) return true;
|
|
45
46
|
if (_slate.Editor.isVoid(editor, n)) return true;
|
|
46
47
|
return false;
|
|
47
48
|
},
|
|
@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
var _caret = _interopRequireDefault(require("./caret"));
|
|
10
10
|
var _constants = require("../../constants");
|
|
11
11
|
var _helpers = require("../font/helpers");
|
|
12
|
+
var _InlineBugFixWrapper = _interopRequireDefault(require("../../commons/Inline-bug-fix-wrapper"));
|
|
12
13
|
const renderText = (props, editor) => {
|
|
13
14
|
const {
|
|
14
15
|
attributes,
|
|
@@ -98,6 +99,6 @@ const renderText = (props, editor) => {
|
|
|
98
99
|
}, attributes, {
|
|
99
100
|
style: style,
|
|
100
101
|
className: Object.keys(rest).join(' ')
|
|
101
|
-
}), leaf.isCaret ? /*#__PURE__*/_react.default.createElement(_caret.default, leaf) : null, markedChildren);
|
|
102
|
+
}), leaf.isCaret ? /*#__PURE__*/_react.default.createElement(_caret.default, leaf) : null, leaf.isCaret && /*#__PURE__*/_react.default.createElement(_InlineBugFixWrapper.default, null, markedChildren), !leaf.isCaret && markedChildren);
|
|
102
103
|
};
|
|
103
104
|
var _default = exports.default = renderText;
|
|
@@ -215,6 +215,11 @@ const CustomRenderElement = props => {
|
|
|
215
215
|
const [renderGroup] = _plugins.GroupPlugin.renderElements;
|
|
216
216
|
return renderGroup(props);
|
|
217
217
|
}
|
|
218
|
+
case _constants.CHART:
|
|
219
|
+
{
|
|
220
|
+
const [renderChart] = _plugins.ChartPlugin.renderElements;
|
|
221
|
+
return renderChart(props, editor);
|
|
222
|
+
}
|
|
218
223
|
default:
|
|
219
224
|
{
|
|
220
225
|
const [renderParagraph] = _plugins.ParagraphPlugin.renderElements;
|
|
@@ -19,6 +19,7 @@ var _menu5 = _interopRequireDefault(require("../../../plugins/sdoc-link/menu"));
|
|
|
19
19
|
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
|
+
var _menu9 = _interopRequireDefault(require("../../../plugins/chart/menu"));
|
|
22
23
|
var _eventBus = _interopRequireDefault(require("../../../../utils/event-bus"));
|
|
23
24
|
var _constants = require("../../../../constants");
|
|
24
25
|
require("./index.css");
|
|
@@ -99,7 +100,7 @@ const InsertToolbar = _ref => {
|
|
|
99
100
|
style: {
|
|
100
101
|
maxHeight: window.innerHeight - bottom - 100
|
|
101
102
|
}
|
|
102
|
-
}, /*#__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", {
|
|
103
|
+
}, /*#__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(_menu9.default, props), /*#__PURE__*/_react.default.createElement(_menu4.default, props), /*#__PURE__*/_react.default.createElement("div", {
|
|
103
104
|
className: "sdoc-dropdown-menu-divider"
|
|
104
105
|
}), 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)))));
|
|
105
106
|
};
|