@seafile/sdoc-editor 0.4.10 → 0.4.12
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/extension/plugins/table/helpers.js +93 -0
- package/dist/basic-sdk/extension/plugins/table/render/resize-handlers/column-resize-handler.js +11 -3
- package/dist/basic-sdk/extension/plugins/table/render/resize-handlers/first-column-left-resize-handler.js +11 -3
- package/dist/basic-sdk/extension/plugins/table/render/resize-handlers/index.js +16 -8
- package/dist/basic-sdk/extension/plugins/table/render/resize-handlers/row-resize-handler.js +11 -6
- package/dist/components/doc-operations/more-operations.js +1 -1
- package/package.json +1 -1
- package/public/locales/cs/sdoc-editor.json +1 -1
- package/public/locales/de/sdoc-editor.json +1 -1
- package/public/locales/en/sdoc-editor.json +1 -1
- package/public/locales/es/sdoc-editor.json +1 -1
- package/public/locales/fr/sdoc-editor.json +1 -1
- package/public/locales/it/sdoc-editor.json +1 -1
- package/public/locales/ru/sdoc-editor.json +9 -9
- package/public/locales/zh_CN/sdoc-editor.json +1 -1
|
@@ -1398,4 +1398,97 @@ export const getCellHighlightClassName = (primaryColorClassName, rowIndex) => {
|
|
|
1398
1398
|
className = TABLE_ALTERNATE_HIGHLIGHT_CLASS_MAP[primaryColorClassName];
|
|
1399
1399
|
}
|
|
1400
1400
|
return className;
|
|
1401
|
+
};
|
|
1402
|
+
export const getRowBottomPositions = (editor, rows) => {
|
|
1403
|
+
const recorder = [];
|
|
1404
|
+
let bottomPosition = 0;
|
|
1405
|
+
rows.forEach(row => {
|
|
1406
|
+
let cellHeight;
|
|
1407
|
+
row.children.forEach(cell => {
|
|
1408
|
+
const currentCellHeight = ReactEditor.toDOMNode(editor, cell).getBoundingClientRect().height;
|
|
1409
|
+
if (!cellHeight || currentCellHeight < cellHeight) cellHeight = currentCellHeight;
|
|
1410
|
+
});
|
|
1411
|
+
bottomPosition += cellHeight;
|
|
1412
|
+
recorder.push(bottomPosition);
|
|
1413
|
+
});
|
|
1414
|
+
return recorder;
|
|
1415
|
+
};
|
|
1416
|
+
export const focusClosestCellWhenJustifyCellSize = _ref => {
|
|
1417
|
+
let {
|
|
1418
|
+
editor,
|
|
1419
|
+
rowIndex,
|
|
1420
|
+
columnIndex,
|
|
1421
|
+
table,
|
|
1422
|
+
mouseDownInfo,
|
|
1423
|
+
rowBottoms
|
|
1424
|
+
} = _ref;
|
|
1425
|
+
if (!editor) return;
|
|
1426
|
+
const {
|
|
1427
|
+
columns
|
|
1428
|
+
} = table;
|
|
1429
|
+
// Get cursor position in table, calculate columnIndex and rowIndex
|
|
1430
|
+
const tableDom = ReactEditor.toDOMNode(editor, table);
|
|
1431
|
+
const {
|
|
1432
|
+
left,
|
|
1433
|
+
top
|
|
1434
|
+
} = tableDom.getBoundingClientRect();
|
|
1435
|
+
const {
|
|
1436
|
+
positionY,
|
|
1437
|
+
positionX
|
|
1438
|
+
} = mouseDownInfo;
|
|
1439
|
+
const tableScrollWrapper = document.querySelector('.sdoc-table-scroll-wrapper');
|
|
1440
|
+
const scrollX = tableScrollWrapper.scrollLeft;
|
|
1441
|
+
const tableInnerX = positionX - left + scrollX;
|
|
1442
|
+
const tableInnerY = positionY - top;
|
|
1443
|
+
// Calculate columnIndex
|
|
1444
|
+
if (columnIndex === undefined) {
|
|
1445
|
+
let passedColumnsWidth = 0;
|
|
1446
|
+
columns.some((_ref2, index) => {
|
|
1447
|
+
let {
|
|
1448
|
+
width
|
|
1449
|
+
} = _ref2;
|
|
1450
|
+
passedColumnsWidth += width;
|
|
1451
|
+
if (passedColumnsWidth > tableInnerX) {
|
|
1452
|
+
columnIndex = index;
|
|
1453
|
+
return true;
|
|
1454
|
+
}
|
|
1455
|
+
return false;
|
|
1456
|
+
});
|
|
1457
|
+
}
|
|
1458
|
+
// Calculate rowIndex
|
|
1459
|
+
if (rowIndex === undefined) {
|
|
1460
|
+
rowBottoms.some((bottom, index) => {
|
|
1461
|
+
if (bottom >= tableInnerY) {
|
|
1462
|
+
rowIndex = index;
|
|
1463
|
+
return true;
|
|
1464
|
+
}
|
|
1465
|
+
return false;
|
|
1466
|
+
});
|
|
1467
|
+
}
|
|
1468
|
+
// Correct focus position
|
|
1469
|
+
const is_combined = table.children[rowIndex].children[columnIndex].is_combined;
|
|
1470
|
+
if (is_combined) {
|
|
1471
|
+
for (let i = columnIndex - 1; i >= 0; i--) {
|
|
1472
|
+
const {
|
|
1473
|
+
is_combined: ci_is_combined,
|
|
1474
|
+
colspan: ci_colspan
|
|
1475
|
+
} = table.children[rowIndex].children[i];
|
|
1476
|
+
if (!ci_is_combined && ci_colspan && i + ci_colspan - 1 >= columnIndex) {
|
|
1477
|
+
columnIndex = i;
|
|
1478
|
+
break;
|
|
1479
|
+
}
|
|
1480
|
+
}
|
|
1481
|
+
for (let j = rowIndex - 1; j >= 0; j--) {
|
|
1482
|
+
const {
|
|
1483
|
+
is_combined: ri_is_combined,
|
|
1484
|
+
rowspan: ri_rowspan
|
|
1485
|
+
} = table.children[j].children[columnIndex];
|
|
1486
|
+
if (!ri_is_combined && ri_rowspan && j + ri_rowspan - 1 >= rowIndex) {
|
|
1487
|
+
rowIndex = j;
|
|
1488
|
+
break;
|
|
1489
|
+
}
|
|
1490
|
+
}
|
|
1491
|
+
}
|
|
1492
|
+
const focusPath = ReactEditor.findPath(editor, table.children[rowIndex].children[columnIndex]);
|
|
1493
|
+
focusEditor(editor, Editor.end(editor, focusPath));
|
|
1401
1494
|
};
|
package/dist/basic-sdk/extension/plugins/table/render/resize-handlers/column-resize-handler.js
CHANGED
|
@@ -4,14 +4,15 @@ import { useSlateStatic } from '@seafile/slate-react';
|
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import { useTableRootContext } from '../hooks';
|
|
6
6
|
import { TABLE_CELL_MIN_WIDTH } from '../../constants';
|
|
7
|
-
import { getTableColumns, updateColumnWidth } from '../../helpers';
|
|
7
|
+
import { getTableColumns, updateColumnWidth, focusClosestCellWhenJustifyCellSize } from '../../helpers';
|
|
8
8
|
import { eventStopPropagation, getMouseDownInfo, getMouseMoveInfo, registerResizeEvents, unregisterResizeEvents } from '../../../../../utils/mouse-event';
|
|
9
9
|
const ColumnResizeHandler = _ref => {
|
|
10
10
|
let {
|
|
11
11
|
column,
|
|
12
12
|
left: initLeft,
|
|
13
13
|
element,
|
|
14
|
-
index
|
|
14
|
+
index,
|
|
15
|
+
rowBottoms
|
|
15
16
|
} = _ref;
|
|
16
17
|
const editor = useSlateStatic();
|
|
17
18
|
const resizeHandler = useRef(null);
|
|
@@ -85,6 +86,13 @@ const ColumnResizeHandler = _ref => {
|
|
|
85
86
|
});
|
|
86
87
|
}
|
|
87
88
|
updateColumnWidth(editor, element, newColumns);
|
|
89
|
+
focusClosestCellWhenJustifyCellSize({
|
|
90
|
+
editor,
|
|
91
|
+
columnIndex: index,
|
|
92
|
+
table: element,
|
|
93
|
+
mouseDownInfo,
|
|
94
|
+
rowBottoms
|
|
95
|
+
});
|
|
88
96
|
};
|
|
89
97
|
registerResizeEvents({
|
|
90
98
|
'mousemove': onMouseMove,
|
|
@@ -98,7 +106,7 @@ const ColumnResizeHandler = _ref => {
|
|
|
98
106
|
};
|
|
99
107
|
|
|
100
108
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
101
|
-
}, [isResizing, mouseDownInfo, left, width, column, editor, element, index, initLeft]);
|
|
109
|
+
}, [isResizing, mouseDownInfo, left, width, column, editor, element, index, initLeft, rowBottoms]);
|
|
102
110
|
return /*#__PURE__*/React.createElement("div", {
|
|
103
111
|
className: classnames('table-cell-width-just ', {
|
|
104
112
|
'resizing position-fixed': isResizing,
|
|
@@ -4,14 +4,15 @@ import { useSlateStatic } from '@seafile/slate-react';
|
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import { useTableRootContext } from '../hooks';
|
|
6
6
|
import { TABLE_CELL_MIN_WIDTH } from '../../constants';
|
|
7
|
-
import { getTableColumns, updateColumnWidth } from '../../helpers';
|
|
7
|
+
import { focusClosestCellWhenJustifyCellSize, getTableColumns, updateColumnWidth } from '../../helpers';
|
|
8
8
|
import { eventStopPropagation, getMouseDownInfo, getMouseMoveInfo, registerResizeEvents, unregisterResizeEvents } from '../../../../../utils/mouse-event';
|
|
9
9
|
const FirstColumnResizeHandler = _ref => {
|
|
10
10
|
let {
|
|
11
11
|
column,
|
|
12
12
|
left: initLeft,
|
|
13
13
|
element,
|
|
14
|
-
index
|
|
14
|
+
index,
|
|
15
|
+
rowBottoms
|
|
15
16
|
} = _ref;
|
|
16
17
|
const editor = useSlateStatic();
|
|
17
18
|
const resizeHandler = useRef(null);
|
|
@@ -72,6 +73,13 @@ const FirstColumnResizeHandler = _ref => {
|
|
|
72
73
|
width: newWidth
|
|
73
74
|
});
|
|
74
75
|
updateColumnWidth(editor, element, newColumns);
|
|
76
|
+
focusClosestCellWhenJustifyCellSize({
|
|
77
|
+
editor,
|
|
78
|
+
columnIndex: index,
|
|
79
|
+
table: element,
|
|
80
|
+
mouseDownInfo,
|
|
81
|
+
rowBottoms
|
|
82
|
+
});
|
|
75
83
|
};
|
|
76
84
|
registerResizeEvents({
|
|
77
85
|
'mousemove': onMouseMove,
|
|
@@ -85,7 +93,7 @@ const FirstColumnResizeHandler = _ref => {
|
|
|
85
93
|
};
|
|
86
94
|
|
|
87
95
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
88
|
-
}, [isResizing, mouseDownInfo, left, width, column, editor, element, index, initLeft]);
|
|
96
|
+
}, [isResizing, mouseDownInfo, left, width, column, editor, element, index, initLeft, rowBottoms]);
|
|
89
97
|
return /*#__PURE__*/React.createElement("div", {
|
|
90
98
|
className: classnames('table-cell-width-just ', {
|
|
91
99
|
'resizing position-fixed': isResizing,
|
|
@@ -1,31 +1,37 @@
|
|
|
1
|
-
|
|
1
|
+
/* eslint-disable react-hooks/rules-of-hooks */
|
|
2
|
+
import React, { useCallback, useEffect, useState } from 'react';
|
|
2
3
|
import { useSlateStatic } from '@seafile/slate-react';
|
|
3
4
|
import FirstColumnResizeHandler from './first-column-left-resize-handler';
|
|
4
5
|
import ColumnResizeHandler from './column-resize-handler';
|
|
5
6
|
import RowResizeHandler from './row-resize-handler';
|
|
6
7
|
import { getNode, findPath } from '../../../../core';
|
|
7
8
|
import { useResizeHandlersContext } from '../hooks';
|
|
8
|
-
import {
|
|
9
|
-
import { TABLE_ROW_STYLE } from '../../constants';
|
|
9
|
+
import { getRowBottomPositions, getTableColumns } from '../../helpers';
|
|
10
10
|
const ResizeHandlers = _ref => {
|
|
11
11
|
let {
|
|
12
12
|
element
|
|
13
13
|
} = _ref;
|
|
14
14
|
const editor = useSlateStatic();
|
|
15
15
|
const tablePath = findPath(editor, element);
|
|
16
|
-
const columns = useResizeHandlersContext() || getTableColumns(editor, element);
|
|
17
16
|
if (!tablePath) return null;
|
|
18
17
|
const table = getNode(editor, tablePath);
|
|
19
18
|
if (!table) return null;
|
|
19
|
+
const [rowBottoms, setRowBottoms] = useState([]);
|
|
20
|
+
const columns = useResizeHandlersContext() || getTableColumns(editor, element);
|
|
20
21
|
const rows = element.children;
|
|
21
|
-
|
|
22
|
+
const calculateRowBottom = useCallback(() => {
|
|
23
|
+
const rowBottomPositions = getRowBottomPositions(editor, rows);
|
|
24
|
+
setRowBottoms(rowBottomPositions);
|
|
25
|
+
}, [editor, rows]);
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
calculateRowBottom();
|
|
28
|
+
}, [calculateRowBottom, element]);
|
|
22
29
|
let columnLeft = 0;
|
|
23
30
|
return /*#__PURE__*/React.createElement(React.Fragment, null, rows.map((row, index) => {
|
|
24
|
-
rowBottom += getRowHeight(row, index);
|
|
25
31
|
return /*#__PURE__*/React.createElement(RowResizeHandler, {
|
|
26
32
|
key: index,
|
|
27
33
|
row: row,
|
|
28
|
-
|
|
34
|
+
rowBottoms: rowBottoms[index],
|
|
29
35
|
index: index,
|
|
30
36
|
element: element
|
|
31
37
|
});
|
|
@@ -34,10 +40,12 @@ const ResizeHandlers = _ref => {
|
|
|
34
40
|
column: columns[0],
|
|
35
41
|
left: 0,
|
|
36
42
|
index: 0,
|
|
37
|
-
element: element
|
|
43
|
+
element: element,
|
|
44
|
+
rowBottoms: rowBottoms
|
|
38
45
|
}), columns.map((column, columnIndex) => {
|
|
39
46
|
columnLeft = columnLeft + column.width;
|
|
40
47
|
return /*#__PURE__*/React.createElement(ColumnResizeHandler, {
|
|
48
|
+
rowBottoms: rowBottoms,
|
|
41
49
|
key: columnIndex,
|
|
42
50
|
column: column,
|
|
43
51
|
left: columnLeft,
|
|
@@ -3,14 +3,14 @@ import classnames from 'classnames';
|
|
|
3
3
|
import { useSlateStatic } from '@seafile/slate-react';
|
|
4
4
|
import { ReactEditor } from '@seafile/slate-react';
|
|
5
5
|
import { TABLE_ROW_MIN_HEIGHT } from '../../constants';
|
|
6
|
-
import { getRowHeight, updateTableRowHeight } from '../../helpers';
|
|
6
|
+
import { focusClosestCellWhenJustifyCellSize, getRowHeight, updateTableRowHeight } from '../../helpers';
|
|
7
7
|
import { eventStopPropagation, getMouseDownInfo, getMouseMoveInfo, registerResizeEvents, unregisterResizeEvents } from '../../../../../utils/mouse-event';
|
|
8
8
|
import { useScrollContext } from '../../../../../hooks/use-scroll-context';
|
|
9
9
|
const RowResizeHandler = _ref => {
|
|
10
10
|
let {
|
|
11
11
|
row,
|
|
12
12
|
index,
|
|
13
|
-
|
|
13
|
+
rowBottoms: initRowBottom = 0,
|
|
14
14
|
element
|
|
15
15
|
} = _ref;
|
|
16
16
|
const editor = useSlateStatic();
|
|
@@ -27,12 +27,11 @@ const RowResizeHandler = _ref => {
|
|
|
27
27
|
const mouseDownInfo = getMouseDownInfo(event, scrollContent.current);
|
|
28
28
|
setMouseDownInfo(mouseDownInfo);
|
|
29
29
|
setStyle({
|
|
30
|
-
top:
|
|
30
|
+
top: rowBottom - 2.5
|
|
31
31
|
});
|
|
32
32
|
setIsResizing(true);
|
|
33
|
-
|
|
34
33
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
35
|
-
}, []);
|
|
34
|
+
}, [rowBottom]);
|
|
36
35
|
useEffect(() => {
|
|
37
36
|
if (!isResizing) return;
|
|
38
37
|
const onMouseMove = event => {
|
|
@@ -50,6 +49,12 @@ const RowResizeHandler = _ref => {
|
|
|
50
49
|
setIsResizing(false);
|
|
51
50
|
tableRow.current = height;
|
|
52
51
|
updateTableRowHeight(editor, row, height);
|
|
52
|
+
focusClosestCellWhenJustifyCellSize({
|
|
53
|
+
editor,
|
|
54
|
+
rowIndex: index,
|
|
55
|
+
table: element,
|
|
56
|
+
mouseDownInfo
|
|
57
|
+
});
|
|
53
58
|
};
|
|
54
59
|
registerResizeEvents({
|
|
55
60
|
'mousemove': onMouseMove,
|
|
@@ -70,7 +75,7 @@ const RowResizeHandler = _ref => {
|
|
|
70
75
|
const rowDom = ReactEditor.toDOMNode(editor, cell);
|
|
71
76
|
if (!rowDom) return;
|
|
72
77
|
tableRow.current = rowDom.clientHeight;
|
|
73
|
-
setRowBottom(initRowBottom
|
|
78
|
+
setRowBottom(initRowBottom);
|
|
74
79
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
75
80
|
}, [row, initRowBottom]);
|
|
76
81
|
return /*#__PURE__*/React.createElement("div", {
|
|
@@ -54,7 +54,7 @@ const MoreOperations = _ref => {
|
|
|
54
54
|
}, t('Unfreeze')), isPro && !isFreezed && /*#__PURE__*/React.createElement(DropdownItem, {
|
|
55
55
|
className: "sdoc-dropdown-menu-item",
|
|
56
56
|
onClick: onFreezeDocument
|
|
57
|
-
}, t('
|
|
57
|
+
}, t('Freeze_document')), /*#__PURE__*/React.createElement(DropdownItem, {
|
|
58
58
|
className: "sdoc-dropdown-menu-item",
|
|
59
59
|
onClick: handleClickHistory
|
|
60
60
|
}, t('Document_history'))));
|
package/package.json
CHANGED
|
@@ -427,7 +427,7 @@
|
|
|
427
427
|
"Other_modification": "Other's modification",
|
|
428
428
|
"My_modification": "My modification",
|
|
429
429
|
"Document_history": "Document history",
|
|
430
|
-
"
|
|
430
|
+
"Freeze_document": "Freeze document",
|
|
431
431
|
"Unfreeze": "Unfreeze",
|
|
432
432
|
"Search_and_replace": "Search and replace",
|
|
433
433
|
"Search": "Hledat",
|
|
@@ -427,7 +427,7 @@
|
|
|
427
427
|
"Other_modification": "Other's modification",
|
|
428
428
|
"My_modification": "My modification",
|
|
429
429
|
"Document_history": "Document history",
|
|
430
|
-
"
|
|
430
|
+
"Freeze_document": "Freeze document",
|
|
431
431
|
"Unfreeze": "Unfreeze",
|
|
432
432
|
"Search_and_replace": "Search and replace",
|
|
433
433
|
"Search": "Suchen",
|
|
@@ -427,7 +427,7 @@
|
|
|
427
427
|
"Other_modification": "Other's modification",
|
|
428
428
|
"My_modification": "My modification",
|
|
429
429
|
"Document_history": "Document history",
|
|
430
|
-
"
|
|
430
|
+
"Freeze_document": "Freeze document",
|
|
431
431
|
"Unfreeze": "Unfreeze",
|
|
432
432
|
"Search_and_replace": "Search and replace",
|
|
433
433
|
"Search": "Search",
|
|
@@ -427,7 +427,7 @@
|
|
|
427
427
|
"Other_modification": "Other's modification",
|
|
428
428
|
"My_modification": "My modification",
|
|
429
429
|
"Document_history": "Document history",
|
|
430
|
-
"
|
|
430
|
+
"Freeze_document": "Freeze document",
|
|
431
431
|
"Unfreeze": "Unfreeze",
|
|
432
432
|
"Search_and_replace": "Search and replace",
|
|
433
433
|
"Search": "Buscar",
|
|
@@ -427,7 +427,7 @@
|
|
|
427
427
|
"Other_modification": "Other's modification",
|
|
428
428
|
"My_modification": "My modification",
|
|
429
429
|
"Document_history": "Document history",
|
|
430
|
-
"
|
|
430
|
+
"Freeze_document": "Freeze document",
|
|
431
431
|
"Unfreeze": "Unfreeze",
|
|
432
432
|
"Search_and_replace": "Search and replace",
|
|
433
433
|
"Search": "Chercher",
|
|
@@ -427,7 +427,7 @@
|
|
|
427
427
|
"Other_modification": "Other's modification",
|
|
428
428
|
"My_modification": "My modification",
|
|
429
429
|
"Document_history": "Document history",
|
|
430
|
-
"
|
|
430
|
+
"Freeze_document": "Freeze document",
|
|
431
431
|
"Unfreeze": "Unfreeze",
|
|
432
432
|
"Search_and_replace": "Search and replace",
|
|
433
433
|
"Search": "Search",
|
|
@@ -427,18 +427,18 @@
|
|
|
427
427
|
"Other_modification": "Другая модификация",
|
|
428
428
|
"My_modification": "Моя модификация",
|
|
429
429
|
"Document_history": "История документа",
|
|
430
|
-
"
|
|
430
|
+
"Freeze_document": "Заморозить документ",
|
|
431
431
|
"Unfreeze": "Разморозить",
|
|
432
|
-
"Search_and_replace": "
|
|
432
|
+
"Search_and_replace": "Поиск и замена",
|
|
433
433
|
"Search": "Поиск",
|
|
434
|
-
"Type_search_content": "
|
|
435
|
-
"Replace_as": "
|
|
436
|
-
"Type_replace_content": "
|
|
434
|
+
"Type_search_content": "Введите содержимое для поиска",
|
|
435
|
+
"Replace_as": "Заменить как",
|
|
436
|
+
"Type_replace_content": "Введите содержимое для замены",
|
|
437
437
|
"Previous": "Предыдущий",
|
|
438
438
|
"Next": "Следующий",
|
|
439
439
|
"Replace": "Заменить",
|
|
440
|
-
"Replace_all": "
|
|
441
|
-
"Are_you_sure_to_replace_all_number_xxx_in_this_document_with_yyy": "
|
|
442
|
-
"Are_you_sure_to_clear_all_number_xxx_in_this_document": "
|
|
443
|
-
"Search_not_found": "
|
|
440
|
+
"Replace_all": "Заменить все",
|
|
441
|
+
"Are_you_sure_to_replace_all_number_xxx_in_this_document_with_yyy": "Вы уверены, что хотите заменить все {{number}} '{{originalWord}}' в этом документе на '{{replacedWord}}'?",
|
|
442
|
+
"Are_you_sure_to_clear_all_number_xxx_in_this_document": "Вы уверены, что хотите очистить все {{number}} '{{originalWord}}' в этом документе?",
|
|
443
|
+
"Search_not_found": "Не найдено"
|
|
444
444
|
}
|