@atlaskit/editor-plugin-table 7.19.7 → 7.19.9
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/CHANGELOG.md +17 -0
- package/dist/cjs/nodeviews/TableResizer.js +41 -48
- package/dist/cjs/ui/FloatingDragMenu/DragMenu.js +3 -14
- package/dist/cjs/utils/drag-menu.js +14 -22
- package/dist/es2019/nodeviews/TableResizer.js +41 -48
- package/dist/es2019/ui/FloatingDragMenu/DragMenu.js +4 -15
- package/dist/es2019/utils/drag-menu.js +10 -18
- package/dist/esm/nodeviews/TableResizer.js +41 -48
- package/dist/esm/ui/FloatingDragMenu/DragMenu.js +4 -15
- package/dist/esm/utils/drag-menu.js +15 -23
- package/dist/types/utils/drag-menu.d.ts +1 -1
- package/dist/types-ts4.5/utils/drag-menu.d.ts +1 -1
- package/package.json +6 -12
- package/src/nodeviews/TableResizer.tsx +51 -62
- package/src/ui/FloatingDragMenu/DragMenu.tsx +1 -18
- package/src/utils/drag-menu.ts +7 -27
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 7.19.9
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#117916](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117916)
|
|
8
|
+
[`49fc126d779b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/49fc126d779b0) -
|
|
9
|
+
ECA11Y-111: A11y table resizing feature flag removal
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 7.19.8
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [`7c716627bd4f4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7c716627bd4f4) -
|
|
17
|
+
Table Drag move column/row logic FF cleanup
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 7.19.7
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -21,7 +21,6 @@ var _utils = require("@atlaskit/editor-common/utils");
|
|
|
21
21
|
var _commands = require("@atlaskit/editor-prosemirror/commands");
|
|
22
22
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
23
23
|
var _utils2 = require("@atlaskit/editor-tables/utils");
|
|
24
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
25
24
|
var _commandsWithAnalytics = require("../commands-with-analytics");
|
|
26
25
|
var _misc = require("../commands/misc");
|
|
27
26
|
var _tableAnalytics = require("../pm-plugins/table-analytics");
|
|
@@ -312,18 +311,16 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
|
|
|
312
311
|
}
|
|
313
312
|
displayGapCursor(true);
|
|
314
313
|
dispatch(tr);
|
|
315
|
-
if (
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
}));
|
|
326
|
-
}
|
|
314
|
+
if (delta.width < 0) {
|
|
315
|
+
var _pluginInjectionApi$a3;
|
|
316
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a3 === void 0 || _pluginInjectionApi$a3.actions.ariaNotify(formatMessage(_messages.tableMessages.tableSizeDecreaseScreenReaderInformation, {
|
|
317
|
+
newWidth: newWidth
|
|
318
|
+
}));
|
|
319
|
+
} else if (delta.width > 0) {
|
|
320
|
+
var _pluginInjectionApi$a4;
|
|
321
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a4 === void 0 || _pluginInjectionApi$a4.actions.ariaNotify(formatMessage(_messages.tableMessages.tableSizeIncreaseScreenReaderInformation, {
|
|
322
|
+
newWidth: newWidth
|
|
323
|
+
}));
|
|
327
324
|
}
|
|
328
325
|
|
|
329
326
|
// Hide guidelines when resizing stops
|
|
@@ -375,45 +372,41 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
|
|
|
375
372
|
return;
|
|
376
373
|
}, [areResizeMetaKeysPressed]);
|
|
377
374
|
(0, _react.useLayoutEffect)(function () {
|
|
378
|
-
if (
|
|
379
|
-
|
|
375
|
+
if (!resizerRef.current) {
|
|
376
|
+
return;
|
|
377
|
+
}
|
|
378
|
+
var resizeHandleThumbEl = resizerRef.current.getResizerThumbEl();
|
|
379
|
+
var globalKeyDownHandler = function globalKeyDownHandler(event) {
|
|
380
|
+
var metaKey = _utils.browser.mac ? event.metaKey : event.ctrlKey;
|
|
381
|
+
if (!isTableSelected) {
|
|
380
382
|
return;
|
|
381
383
|
}
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
if (!isTableSelected) {
|
|
384
|
+
if (event.altKey && event.shiftKey && metaKey && event.code === 'KeyR') {
|
|
385
|
+
event.preventDefault();
|
|
386
|
+
if (!resizeHandleThumbEl) {
|
|
386
387
|
return;
|
|
387
388
|
}
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.
|
|
404
|
-
|
|
405
|
-
return function () {
|
|
406
|
-
editorViewDom === null || editorViewDom === void 0 || editorViewDom.removeEventListener('keydown', globalKeyDownHandler);
|
|
407
|
-
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.removeEventListener('keydown', handleKeyDown);
|
|
408
|
-
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.removeEventListener('keyup', handleKeyUp);
|
|
409
|
-
};
|
|
410
|
-
}
|
|
389
|
+
resizeHandleThumbEl.focus();
|
|
390
|
+
resizeHandleThumbEl.scrollIntoView({
|
|
391
|
+
behavior: 'smooth',
|
|
392
|
+
block: 'center',
|
|
393
|
+
inline: 'nearest'
|
|
394
|
+
});
|
|
395
|
+
}
|
|
396
|
+
};
|
|
397
|
+
var editorViewDom = editorView === null || editorView === void 0 ? void 0 : editorView.dom;
|
|
398
|
+
editorViewDom === null || editorViewDom === void 0 || editorViewDom.addEventListener('keydown', globalKeyDownHandler);
|
|
399
|
+
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.addEventListener('keydown', handleKeyDown);
|
|
400
|
+
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.addEventListener('keyup', handleKeyUp);
|
|
401
|
+
return function () {
|
|
402
|
+
editorViewDom === null || editorViewDom === void 0 || editorViewDom.removeEventListener('keydown', globalKeyDownHandler);
|
|
403
|
+
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.removeEventListener('keydown', handleKeyDown);
|
|
404
|
+
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.removeEventListener('keyup', handleKeyUp);
|
|
405
|
+
};
|
|
411
406
|
}, [resizerRef, editorView, handleResizeStop, isTableSelected, handleKeyDown, handleKeyUp]);
|
|
412
407
|
(0, _react.useLayoutEffect)(function () {
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
(_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 || _updateTooltip$curren.call(updateTooltip);
|
|
416
|
-
}
|
|
408
|
+
var _updateTooltip$curren;
|
|
409
|
+
(_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 || _updateTooltip$curren.call(updateTooltip);
|
|
417
410
|
}, [width]);
|
|
418
411
|
var resizeRatio = !isTableAlignmentEnabled || isTableAlignmentEnabled && (0, _alignment.normaliseAlignment)(node.attrs.layout) === _alignment.ALIGN_CENTER ? 2 : 1;
|
|
419
412
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_resizer.ResizerNext, {
|
|
@@ -436,13 +429,13 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
|
|
|
436
429
|
needExtendedResizeZone: !isTableSelected,
|
|
437
430
|
appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
|
|
438
431
|
handleHighlight: "shadow",
|
|
439
|
-
handleTooltipContent:
|
|
432
|
+
handleTooltipContent: function handleTooltipContent(_ref4) {
|
|
440
433
|
var update = _ref4.update;
|
|
441
434
|
updateTooltip.current = update;
|
|
442
435
|
return /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
|
|
443
436
|
description: formatMessage(_messages.tableMessages.resizeTable),
|
|
444
437
|
keymap: _keymaps.focusTableResizer
|
|
445
438
|
});
|
|
446
|
-
}
|
|
439
|
+
}
|
|
447
440
|
}, children));
|
|
448
441
|
};
|
|
@@ -23,7 +23,6 @@ var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
|
|
|
23
23
|
var _tableMap = require("@atlaskit/editor-tables/table-map");
|
|
24
24
|
var _utils2 = require("@atlaskit/editor-tables/utils");
|
|
25
25
|
var _backgroundColor = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/background-color"));
|
|
26
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
27
26
|
var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
|
|
28
27
|
var _commands = require("../../commands");
|
|
29
28
|
var _commandsWithAnalytics = require("../../commands-with-analytics");
|
|
@@ -186,7 +185,7 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, for
|
|
|
186
185
|
};
|
|
187
186
|
var ColorPaletteWithListeners = (0, _ui.withOuterListeners)(_uiColor.ColorPalette);
|
|
188
187
|
var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
|
|
189
|
-
var _pluginConfig$allowBa;
|
|
188
|
+
var _tableMap$hasMergedCe, _pluginConfig$allowBa;
|
|
190
189
|
var _ref$direction = _ref.direction,
|
|
191
190
|
direction = _ref$direction === void 0 ? 'row' : _ref$direction,
|
|
192
191
|
index = _ref.index,
|
|
@@ -220,19 +219,9 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
|
|
|
220
219
|
var _getPluginState = (0, _pluginFactory.getPluginState)(state),
|
|
221
220
|
isKeyboardModeActive = _getPluginState.isKeyboardModeActive;
|
|
222
221
|
var selectionRect = (0, _utils2.isSelectionType)(selection, 'cell') ? (0, _utils2.getSelectionRect)(selection) : (0, _utils2.findCellRectClosestToPos)(selection.$from);
|
|
223
|
-
var
|
|
224
|
-
var hasMergedCellsInTable;
|
|
225
|
-
if ((0, _platformFeatureFlags.fg)('platform.editor.table.drag-move-options-logic-update_fp7xw')) {
|
|
226
|
-
var _tableMap$hasMergedCe;
|
|
227
|
-
shouldMoveDisabled = false;
|
|
228
|
-
hasMergedCellsInTable = (_tableMap$hasMergedCe = tableMap === null || tableMap === void 0 ? void 0 : tableMap.hasMergedCells()) !== null && _tableMap$hasMergedCe !== void 0 ? _tableMap$hasMergedCe : false;
|
|
229
|
-
} else {
|
|
230
|
-
var hasMergedCells = direction === 'row' ? _utils3.hasMergedCellsInRow : _utils3.hasMergedCellsInColumn;
|
|
231
|
-
shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
|
|
232
|
-
hasMergedCellsInTable = (0, _utils3.getMergedCellsPositions)(state.tr).length > 0;
|
|
233
|
-
}
|
|
222
|
+
var hasMergedCellsInTable = (_tableMap$hasMergedCe = tableMap === null || tableMap === void 0 ? void 0 : tableMap.hasMergedCells()) !== null && _tableMap$hasMergedCe !== void 0 ? _tableMap$hasMergedCe : false;
|
|
234
223
|
var allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
|
|
235
|
-
var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth,
|
|
224
|
+
var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, tableSortColumnReorder);
|
|
236
225
|
var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, tableSortColumnReorder, selectionRect),
|
|
237
226
|
menuItems = _convertToDropdownIte.menuItems,
|
|
238
227
|
menuCallback = _convertToDropdownIte.menuCallback;
|
|
@@ -18,7 +18,6 @@ var _layoutThreeEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/edi
|
|
|
18
18
|
var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
|
|
19
19
|
var _chevronDoubleDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-double-down"));
|
|
20
20
|
var _chevronDoubleUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-double-up"));
|
|
21
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
22
21
|
var _commandsWithAnalytics = require("../commands-with-analytics");
|
|
23
22
|
var _commandsWithAnalytics2 = require("../pm-plugins/drag-and-drop/commands-with-analytics");
|
|
24
23
|
var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
|
|
@@ -47,17 +46,10 @@ var canMove = exports.canMove = function canMove(sourceType, direction, totalIte
|
|
|
47
46
|
if (hasMergedCellsInTarget) {
|
|
48
47
|
return false;
|
|
49
48
|
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}
|
|
55
|
-
} else {
|
|
56
|
-
// Currently we can't move in any direction if there are merged cells in the source
|
|
57
|
-
var hasMergedCellsInSource = isRow ? (0, _mergedCells.hasMergedCellsInRow)(selectedIndexes)(selection) : (0, _mergedCells.hasMergedCellsInColumn)(selectedIndexes)(selection);
|
|
58
|
-
if (hasMergedCellsInSource) {
|
|
59
|
-
return false;
|
|
60
|
-
}
|
|
49
|
+
|
|
50
|
+
// We can't move if selection in the source is not a rectangle
|
|
51
|
+
if ((0, _mergedCells.hasMergedCellsInSelection)(selectedIndexes, isRow ? 'row' : 'column')(selection)) {
|
|
52
|
+
return false;
|
|
61
53
|
}
|
|
62
54
|
return true;
|
|
63
55
|
};
|
|
@@ -75,13 +67,13 @@ var defaultSelectionRect = {
|
|
|
75
67
|
right: 0,
|
|
76
68
|
bottom: 0
|
|
77
69
|
};
|
|
78
|
-
var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth,
|
|
70
|
+
var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired) {
|
|
79
71
|
var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
|
|
80
|
-
var isTableScalingEnabled = arguments.length >
|
|
81
|
-
var tableDuplicateCellColouring = arguments.length >
|
|
82
|
-
var isTableFixedColumnWidthsOptionEnabled = arguments.length >
|
|
83
|
-
var shouldUseIncreasedScalingPercent = arguments.length >
|
|
84
|
-
var tableSortColumnReorder = arguments.length >
|
|
72
|
+
var isTableScalingEnabled = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : false;
|
|
73
|
+
var tableDuplicateCellColouring = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : false;
|
|
74
|
+
var isTableFixedColumnWidthsOptionEnabled = arguments.length > 12 && arguments[12] !== undefined ? arguments[12] : false;
|
|
75
|
+
var shouldUseIncreasedScalingPercent = arguments.length > 13 && arguments[13] !== undefined ? arguments[13] : false;
|
|
76
|
+
var tableSortColumnReorder = arguments.length > 14 && arguments[14] !== undefined ? arguments[14] : false;
|
|
85
77
|
var selection = editorView.state.selection;
|
|
86
78
|
var addOptions = direction === 'row' ? [{
|
|
87
79
|
label: 'above',
|
|
@@ -108,7 +100,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
|
|
|
108
100
|
label: 'up',
|
|
109
101
|
icon: _arrowUp.default,
|
|
110
102
|
keymap: _keymaps.moveRowUp,
|
|
111
|
-
canMove:
|
|
103
|
+
canMove: canMove('table-row', -1, (_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0, selection, selectionRect),
|
|
112
104
|
getOriginIndexes: _selection.getSelectedRowIndexes,
|
|
113
105
|
getTargetIndex: function getTargetIndex(selectionRect) {
|
|
114
106
|
return selectionRect.top - 1;
|
|
@@ -117,7 +109,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
|
|
|
117
109
|
label: 'down',
|
|
118
110
|
icon: _arrowDown.default,
|
|
119
111
|
keymap: _keymaps.moveRowDown,
|
|
120
|
-
canMove:
|
|
112
|
+
canMove: canMove('table-row', 1, (_tableMap$height2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height2 !== void 0 ? _tableMap$height2 : 0, selection, selectionRect),
|
|
121
113
|
getOriginIndexes: _selection.getSelectedRowIndexes,
|
|
122
114
|
getTargetIndex: function getTargetIndex(selectionRect) {
|
|
123
115
|
return selectionRect.bottom;
|
|
@@ -126,7 +118,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
|
|
|
126
118
|
label: 'left',
|
|
127
119
|
icon: _arrowLeft.default,
|
|
128
120
|
keymap: _keymaps.moveColumnLeft,
|
|
129
|
-
canMove:
|
|
121
|
+
canMove: canMove('table-column', -1, (_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0, selection, selectionRect),
|
|
130
122
|
getOriginIndexes: _selection.getSelectedColumnIndexes,
|
|
131
123
|
getTargetIndex: function getTargetIndex(selectionRect) {
|
|
132
124
|
return selectionRect.left - 1;
|
|
@@ -135,7 +127,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
|
|
|
135
127
|
label: 'right',
|
|
136
128
|
icon: _arrowRight.default,
|
|
137
129
|
keymap: _keymaps.moveColumnRight,
|
|
138
|
-
canMove:
|
|
130
|
+
canMove: canMove('table-column', 1, (_tableMap$width2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width2 !== void 0 ? _tableMap$width2 : 0, selection, selectionRect),
|
|
139
131
|
getOriginIndexes: _selection.getSelectedColumnIndexes,
|
|
140
132
|
getTargetIndex: function getTargetIndex(selectionRect) {
|
|
141
133
|
return selectionRect.right;
|
|
@@ -11,7 +11,6 @@ import { browser } from '@atlaskit/editor-common/utils';
|
|
|
11
11
|
import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
|
|
12
12
|
import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
|
|
13
13
|
import { findTable } from '@atlaskit/editor-tables/utils';
|
|
14
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
15
14
|
import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
|
|
16
15
|
import { updateWidthToWidest } from '../commands/misc';
|
|
17
16
|
import { META_KEYS } from '../pm-plugins/table-analytics';
|
|
@@ -308,18 +307,16 @@ export const TableResizer = ({
|
|
|
308
307
|
}
|
|
309
308
|
displayGapCursor(true);
|
|
310
309
|
dispatch(tr);
|
|
311
|
-
if (
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
}));
|
|
322
|
-
}
|
|
310
|
+
if (delta.width < 0) {
|
|
311
|
+
var _pluginInjectionApi$a3;
|
|
312
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions.ariaNotify(formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
|
|
313
|
+
newWidth: newWidth
|
|
314
|
+
}));
|
|
315
|
+
} else if (delta.width > 0) {
|
|
316
|
+
var _pluginInjectionApi$a4;
|
|
317
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions.ariaNotify(formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
|
|
318
|
+
newWidth: newWidth
|
|
319
|
+
}));
|
|
323
320
|
}
|
|
324
321
|
|
|
325
322
|
// Hide guidelines when resizing stops
|
|
@@ -371,45 +368,41 @@ export const TableResizer = ({
|
|
|
371
368
|
return;
|
|
372
369
|
}, [areResizeMetaKeysPressed]);
|
|
373
370
|
useLayoutEffect(() => {
|
|
374
|
-
if (
|
|
375
|
-
|
|
371
|
+
if (!resizerRef.current) {
|
|
372
|
+
return;
|
|
373
|
+
}
|
|
374
|
+
const resizeHandleThumbEl = resizerRef.current.getResizerThumbEl();
|
|
375
|
+
const globalKeyDownHandler = event => {
|
|
376
|
+
const metaKey = browser.mac ? event.metaKey : event.ctrlKey;
|
|
377
|
+
if (!isTableSelected) {
|
|
376
378
|
return;
|
|
377
379
|
}
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
if (!isTableSelected) {
|
|
380
|
+
if (event.altKey && event.shiftKey && metaKey && event.code === 'KeyR') {
|
|
381
|
+
event.preventDefault();
|
|
382
|
+
if (!resizeHandleThumbEl) {
|
|
382
383
|
return;
|
|
383
384
|
}
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 ? void 0 : resizeHandleThumbEl.
|
|
400
|
-
|
|
401
|
-
return () => {
|
|
402
|
-
editorViewDom === null || editorViewDom === void 0 ? void 0 : editorViewDom.removeEventListener('keydown', globalKeyDownHandler);
|
|
403
|
-
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 ? void 0 : resizeHandleThumbEl.removeEventListener('keydown', handleKeyDown);
|
|
404
|
-
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 ? void 0 : resizeHandleThumbEl.removeEventListener('keyup', handleKeyUp);
|
|
405
|
-
};
|
|
406
|
-
}
|
|
385
|
+
resizeHandleThumbEl.focus();
|
|
386
|
+
resizeHandleThumbEl.scrollIntoView({
|
|
387
|
+
behavior: 'smooth',
|
|
388
|
+
block: 'center',
|
|
389
|
+
inline: 'nearest'
|
|
390
|
+
});
|
|
391
|
+
}
|
|
392
|
+
};
|
|
393
|
+
const editorViewDom = editorView === null || editorView === void 0 ? void 0 : editorView.dom;
|
|
394
|
+
editorViewDom === null || editorViewDom === void 0 ? void 0 : editorViewDom.addEventListener('keydown', globalKeyDownHandler);
|
|
395
|
+
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 ? void 0 : resizeHandleThumbEl.addEventListener('keydown', handleKeyDown);
|
|
396
|
+
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 ? void 0 : resizeHandleThumbEl.addEventListener('keyup', handleKeyUp);
|
|
397
|
+
return () => {
|
|
398
|
+
editorViewDom === null || editorViewDom === void 0 ? void 0 : editorViewDom.removeEventListener('keydown', globalKeyDownHandler);
|
|
399
|
+
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 ? void 0 : resizeHandleThumbEl.removeEventListener('keydown', handleKeyDown);
|
|
400
|
+
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 ? void 0 : resizeHandleThumbEl.removeEventListener('keyup', handleKeyUp);
|
|
401
|
+
};
|
|
407
402
|
}, [resizerRef, editorView, handleResizeStop, isTableSelected, handleKeyDown, handleKeyUp]);
|
|
408
403
|
useLayoutEffect(() => {
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
(_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 ? void 0 : _updateTooltip$curren.call(updateTooltip);
|
|
412
|
-
}
|
|
404
|
+
var _updateTooltip$curren;
|
|
405
|
+
(_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 ? void 0 : _updateTooltip$curren.call(updateTooltip);
|
|
413
406
|
}, [width]);
|
|
414
407
|
const resizeRatio = !isTableAlignmentEnabled || isTableAlignmentEnabled && normaliseAlignment(node.attrs.layout) === ALIGN_CENTER ? 2 : 1;
|
|
415
408
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizerNext, {
|
|
@@ -432,7 +425,7 @@ export const TableResizer = ({
|
|
|
432
425
|
needExtendedResizeZone: !isTableSelected,
|
|
433
426
|
appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
|
|
434
427
|
handleHighlight: "shadow",
|
|
435
|
-
handleTooltipContent:
|
|
428
|
+
handleTooltipContent: ({
|
|
436
429
|
update
|
|
437
430
|
}) => {
|
|
438
431
|
updateTooltip.current = update;
|
|
@@ -440,6 +433,6 @@ export const TableResizer = ({
|
|
|
440
433
|
description: formatMessage(messages.resizeTable),
|
|
441
434
|
keymap: focusTableResizer
|
|
442
435
|
});
|
|
443
|
-
}
|
|
436
|
+
}
|
|
444
437
|
}, children));
|
|
445
438
|
};
|
|
@@ -18,7 +18,6 @@ import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
|
|
|
18
18
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
19
19
|
import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
|
|
20
20
|
import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
|
|
21
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
22
21
|
import Toggle from '@atlaskit/toggle';
|
|
23
22
|
import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
|
|
24
23
|
import { setColorWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics } from '../../commands-with-analytics';
|
|
@@ -26,7 +25,7 @@ import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
|
|
|
26
25
|
import { getPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
|
|
27
26
|
import { getPluginState as getTablePluginState } from '../../pm-plugins/plugin-factory';
|
|
28
27
|
import { TableCssClassName as ClassName } from '../../types';
|
|
29
|
-
import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled,
|
|
28
|
+
import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
|
|
30
29
|
import { getDragMenuConfig } from '../../utils/drag-menu';
|
|
31
30
|
import { colorPalletteColumns } from '../consts';
|
|
32
31
|
import { DropdownMenu } from './DropdownMenu';
|
|
@@ -193,7 +192,7 @@ export const DragMenu = /*#__PURE__*/React.memo(({
|
|
|
193
192
|
isTableFixedColumnWidthsOptionEnabled,
|
|
194
193
|
tableSortColumnReorder
|
|
195
194
|
}) => {
|
|
196
|
-
var _pluginConfig$allowBa;
|
|
195
|
+
var _tableMap$hasMergedCe, _pluginConfig$allowBa;
|
|
197
196
|
const {
|
|
198
197
|
state,
|
|
199
198
|
dispatch
|
|
@@ -207,19 +206,9 @@ export const DragMenu = /*#__PURE__*/React.memo(({
|
|
|
207
206
|
isKeyboardModeActive
|
|
208
207
|
} = getPluginState(state);
|
|
209
208
|
const selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
|
|
210
|
-
|
|
211
|
-
let hasMergedCellsInTable;
|
|
212
|
-
if (fg('platform.editor.table.drag-move-options-logic-update_fp7xw')) {
|
|
213
|
-
var _tableMap$hasMergedCe;
|
|
214
|
-
shouldMoveDisabled = false;
|
|
215
|
-
hasMergedCellsInTable = (_tableMap$hasMergedCe = tableMap === null || tableMap === void 0 ? void 0 : tableMap.hasMergedCells()) !== null && _tableMap$hasMergedCe !== void 0 ? _tableMap$hasMergedCe : false;
|
|
216
|
-
} else {
|
|
217
|
-
const hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
|
|
218
|
-
shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
|
|
219
|
-
hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
|
|
220
|
-
}
|
|
209
|
+
const hasMergedCellsInTable = (_tableMap$hasMergedCe = tableMap === null || tableMap === void 0 ? void 0 : tableMap.hasMergedCells()) !== null && _tableMap$hasMergedCe !== void 0 ? _tableMap$hasMergedCe : false;
|
|
221
210
|
const allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
|
|
222
|
-
const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth,
|
|
211
|
+
const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, tableSortColumnReorder);
|
|
223
212
|
const {
|
|
224
213
|
menuItems,
|
|
225
214
|
menuCallback
|
|
@@ -10,13 +10,12 @@ import EditorLayoutThreeEqualIcon from '@atlaskit/icon/glyph/editor/layout-three
|
|
|
10
10
|
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
11
11
|
import HipchatChevronDoubleDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-down';
|
|
12
12
|
import HipchatChevronDoubleUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-up';
|
|
13
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
14
13
|
import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, sortColumnWithAnalytics } from '../commands-with-analytics';
|
|
15
14
|
import { moveSourceWithAnalytics } from '../pm-plugins/drag-and-drop/commands-with-analytics';
|
|
16
15
|
import { getNewResizeStateFromSelectedColumns } from '../pm-plugins/table-resizing/utils/resize-state';
|
|
17
16
|
import { getClosestSelectionRect } from '../toolbar';
|
|
18
17
|
import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
|
|
19
|
-
import {
|
|
18
|
+
import { hasMergedCellsInSelection, hasMergedCellsWithColumnNextToColumnIndex, hasMergedCellsWithRowNextToRowIndex } from './merged-cells';
|
|
20
19
|
import { getSelectedColumnIndexes, getSelectedRowIndexes } from './selection';
|
|
21
20
|
export const getTargetIndex = (selectedIndexes, direction) => Math[direction < 0 ? 'min' : 'max'](...selectedIndexes) + direction;
|
|
22
21
|
export const canMove = (sourceType, direction, totalItemsOfSourceTypeCount, selection, selectionRect) => {
|
|
@@ -37,17 +36,10 @@ export const canMove = (sourceType, direction, totalItemsOfSourceTypeCount, sele
|
|
|
37
36
|
if (hasMergedCellsInTarget) {
|
|
38
37
|
return false;
|
|
39
38
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
} else {
|
|
46
|
-
// Currently we can't move in any direction if there are merged cells in the source
|
|
47
|
-
const hasMergedCellsInSource = isRow ? hasMergedCellsInRow(selectedIndexes)(selection) : hasMergedCellsInColumn(selectedIndexes)(selection);
|
|
48
|
-
if (hasMergedCellsInSource) {
|
|
49
|
-
return false;
|
|
50
|
-
}
|
|
39
|
+
|
|
40
|
+
// We can't move if selection in the source is not a rectangle
|
|
41
|
+
if (hasMergedCellsInSelection(selectedIndexes, isRow ? 'row' : 'column')(selection)) {
|
|
42
|
+
return false;
|
|
51
43
|
}
|
|
52
44
|
return true;
|
|
53
45
|
};
|
|
@@ -65,7 +57,7 @@ const defaultSelectionRect = {
|
|
|
65
57
|
right: 0,
|
|
66
58
|
bottom: 0
|
|
67
59
|
};
|
|
68
|
-
export const getDragMenuConfig = (direction, getEditorContainerWidth,
|
|
60
|
+
export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired, isTableScalingEnabled = false, tableDuplicateCellColouring = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, tableSortColumnReorder = false) => {
|
|
69
61
|
var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
|
|
70
62
|
const {
|
|
71
63
|
selection
|
|
@@ -95,28 +87,28 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
|
|
|
95
87
|
label: 'up',
|
|
96
88
|
icon: ArrowUpIcon,
|
|
97
89
|
keymap: moveRowUp,
|
|
98
|
-
canMove:
|
|
90
|
+
canMove: canMove('table-row', -1, (_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0, selection, selectionRect),
|
|
99
91
|
getOriginIndexes: getSelectedRowIndexes,
|
|
100
92
|
getTargetIndex: selectionRect => selectionRect.top - 1
|
|
101
93
|
}, {
|
|
102
94
|
label: 'down',
|
|
103
95
|
icon: ArrowDownIcon,
|
|
104
96
|
keymap: moveRowDown,
|
|
105
|
-
canMove:
|
|
97
|
+
canMove: canMove('table-row', 1, (_tableMap$height2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height2 !== void 0 ? _tableMap$height2 : 0, selection, selectionRect),
|
|
106
98
|
getOriginIndexes: getSelectedRowIndexes,
|
|
107
99
|
getTargetIndex: selectionRect => selectionRect.bottom
|
|
108
100
|
}] : [{
|
|
109
101
|
label: 'left',
|
|
110
102
|
icon: ArrowLeftIcon,
|
|
111
103
|
keymap: moveColumnLeft,
|
|
112
|
-
canMove:
|
|
104
|
+
canMove: canMove('table-column', -1, (_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0, selection, selectionRect),
|
|
113
105
|
getOriginIndexes: getSelectedColumnIndexes,
|
|
114
106
|
getTargetIndex: selectionRect => selectionRect.left - 1
|
|
115
107
|
}, {
|
|
116
108
|
label: 'right',
|
|
117
109
|
icon: ArrowRightIcon,
|
|
118
110
|
keymap: moveColumnRight,
|
|
119
|
-
canMove:
|
|
111
|
+
canMove: canMove('table-column', 1, (_tableMap$width2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width2 !== void 0 ? _tableMap$width2 : 0, selection, selectionRect),
|
|
120
112
|
getOriginIndexes: getSelectedColumnIndexes,
|
|
121
113
|
getTargetIndex: selectionRect => selectionRect.right
|
|
122
114
|
}];
|
|
@@ -15,7 +15,6 @@ import { browser } from '@atlaskit/editor-common/utils';
|
|
|
15
15
|
import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
|
|
16
16
|
import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
|
|
17
17
|
import { findTable } from '@atlaskit/editor-tables/utils';
|
|
18
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
19
18
|
import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
|
|
20
19
|
import { updateWidthToWidest } from '../commands/misc';
|
|
21
20
|
import { META_KEYS } from '../pm-plugins/table-analytics';
|
|
@@ -302,18 +301,16 @@ export var TableResizer = function TableResizer(_ref) {
|
|
|
302
301
|
}
|
|
303
302
|
displayGapCursor(true);
|
|
304
303
|
dispatch(tr);
|
|
305
|
-
if (
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
}));
|
|
316
|
-
}
|
|
304
|
+
if (delta.width < 0) {
|
|
305
|
+
var _pluginInjectionApi$a3;
|
|
306
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a3 === void 0 || _pluginInjectionApi$a3.actions.ariaNotify(formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
|
|
307
|
+
newWidth: newWidth
|
|
308
|
+
}));
|
|
309
|
+
} else if (delta.width > 0) {
|
|
310
|
+
var _pluginInjectionApi$a4;
|
|
311
|
+
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a4 === void 0 || _pluginInjectionApi$a4.actions.ariaNotify(formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
|
|
312
|
+
newWidth: newWidth
|
|
313
|
+
}));
|
|
317
314
|
}
|
|
318
315
|
|
|
319
316
|
// Hide guidelines when resizing stops
|
|
@@ -365,45 +362,41 @@ export var TableResizer = function TableResizer(_ref) {
|
|
|
365
362
|
return;
|
|
366
363
|
}, [areResizeMetaKeysPressed]);
|
|
367
364
|
useLayoutEffect(function () {
|
|
368
|
-
if (
|
|
369
|
-
|
|
365
|
+
if (!resizerRef.current) {
|
|
366
|
+
return;
|
|
367
|
+
}
|
|
368
|
+
var resizeHandleThumbEl = resizerRef.current.getResizerThumbEl();
|
|
369
|
+
var globalKeyDownHandler = function globalKeyDownHandler(event) {
|
|
370
|
+
var metaKey = browser.mac ? event.metaKey : event.ctrlKey;
|
|
371
|
+
if (!isTableSelected) {
|
|
370
372
|
return;
|
|
371
373
|
}
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
if (!isTableSelected) {
|
|
374
|
+
if (event.altKey && event.shiftKey && metaKey && event.code === 'KeyR') {
|
|
375
|
+
event.preventDefault();
|
|
376
|
+
if (!resizeHandleThumbEl) {
|
|
376
377
|
return;
|
|
377
378
|
}
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.
|
|
394
|
-
|
|
395
|
-
return function () {
|
|
396
|
-
editorViewDom === null || editorViewDom === void 0 || editorViewDom.removeEventListener('keydown', globalKeyDownHandler);
|
|
397
|
-
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.removeEventListener('keydown', handleKeyDown);
|
|
398
|
-
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.removeEventListener('keyup', handleKeyUp);
|
|
399
|
-
};
|
|
400
|
-
}
|
|
379
|
+
resizeHandleThumbEl.focus();
|
|
380
|
+
resizeHandleThumbEl.scrollIntoView({
|
|
381
|
+
behavior: 'smooth',
|
|
382
|
+
block: 'center',
|
|
383
|
+
inline: 'nearest'
|
|
384
|
+
});
|
|
385
|
+
}
|
|
386
|
+
};
|
|
387
|
+
var editorViewDom = editorView === null || editorView === void 0 ? void 0 : editorView.dom;
|
|
388
|
+
editorViewDom === null || editorViewDom === void 0 || editorViewDom.addEventListener('keydown', globalKeyDownHandler);
|
|
389
|
+
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.addEventListener('keydown', handleKeyDown);
|
|
390
|
+
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.addEventListener('keyup', handleKeyUp);
|
|
391
|
+
return function () {
|
|
392
|
+
editorViewDom === null || editorViewDom === void 0 || editorViewDom.removeEventListener('keydown', globalKeyDownHandler);
|
|
393
|
+
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.removeEventListener('keydown', handleKeyDown);
|
|
394
|
+
resizeHandleThumbEl === null || resizeHandleThumbEl === void 0 || resizeHandleThumbEl.removeEventListener('keyup', handleKeyUp);
|
|
395
|
+
};
|
|
401
396
|
}, [resizerRef, editorView, handleResizeStop, isTableSelected, handleKeyDown, handleKeyUp]);
|
|
402
397
|
useLayoutEffect(function () {
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
(_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 || _updateTooltip$curren.call(updateTooltip);
|
|
406
|
-
}
|
|
398
|
+
var _updateTooltip$curren;
|
|
399
|
+
(_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 || _updateTooltip$curren.call(updateTooltip);
|
|
407
400
|
}, [width]);
|
|
408
401
|
var resizeRatio = !isTableAlignmentEnabled || isTableAlignmentEnabled && normaliseAlignment(node.attrs.layout) === ALIGN_CENTER ? 2 : 1;
|
|
409
402
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizerNext, {
|
|
@@ -426,13 +419,13 @@ export var TableResizer = function TableResizer(_ref) {
|
|
|
426
419
|
needExtendedResizeZone: !isTableSelected,
|
|
427
420
|
appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
|
|
428
421
|
handleHighlight: "shadow",
|
|
429
|
-
handleTooltipContent:
|
|
422
|
+
handleTooltipContent: function handleTooltipContent(_ref4) {
|
|
430
423
|
var update = _ref4.update;
|
|
431
424
|
updateTooltip.current = update;
|
|
432
425
|
return /*#__PURE__*/React.createElement(ToolTipContent, {
|
|
433
426
|
description: formatMessage(messages.resizeTable),
|
|
434
427
|
keymap: focusTableResizer
|
|
435
428
|
});
|
|
436
|
-
}
|
|
429
|
+
}
|
|
437
430
|
}, children));
|
|
438
431
|
};
|
|
@@ -20,7 +20,6 @@ import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
|
|
|
20
20
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
21
21
|
import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
|
|
22
22
|
import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
|
|
23
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
24
23
|
import Toggle from '@atlaskit/toggle';
|
|
25
24
|
import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
|
|
26
25
|
import { setColorWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics } from '../../commands-with-analytics';
|
|
@@ -28,7 +27,7 @@ import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
|
|
|
28
27
|
import { getPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
|
|
29
28
|
import { getPluginState as getTablePluginState } from '../../pm-plugins/plugin-factory';
|
|
30
29
|
import { TableCssClassName as ClassName } from '../../types';
|
|
31
|
-
import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled,
|
|
30
|
+
import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
|
|
32
31
|
import { getDragMenuConfig } from '../../utils/drag-menu';
|
|
33
32
|
import { colorPalletteColumns } from '../consts';
|
|
34
33
|
import { DropdownMenu } from './DropdownMenu';
|
|
@@ -175,7 +174,7 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, for
|
|
|
175
174
|
};
|
|
176
175
|
var ColorPaletteWithListeners = withOuterListeners(ColorPalette);
|
|
177
176
|
export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
|
|
178
|
-
var _pluginConfig$allowBa;
|
|
177
|
+
var _tableMap$hasMergedCe, _pluginConfig$allowBa;
|
|
179
178
|
var _ref$direction = _ref.direction,
|
|
180
179
|
direction = _ref$direction === void 0 ? 'row' : _ref$direction,
|
|
181
180
|
index = _ref.index,
|
|
@@ -209,19 +208,9 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
209
208
|
var _getPluginState = getPluginState(state),
|
|
210
209
|
isKeyboardModeActive = _getPluginState.isKeyboardModeActive;
|
|
211
210
|
var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
|
|
212
|
-
var
|
|
213
|
-
var hasMergedCellsInTable;
|
|
214
|
-
if (fg('platform.editor.table.drag-move-options-logic-update_fp7xw')) {
|
|
215
|
-
var _tableMap$hasMergedCe;
|
|
216
|
-
shouldMoveDisabled = false;
|
|
217
|
-
hasMergedCellsInTable = (_tableMap$hasMergedCe = tableMap === null || tableMap === void 0 ? void 0 : tableMap.hasMergedCells()) !== null && _tableMap$hasMergedCe !== void 0 ? _tableMap$hasMergedCe : false;
|
|
218
|
-
} else {
|
|
219
|
-
var hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
|
|
220
|
-
shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
|
|
221
|
-
hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
|
|
222
|
-
}
|
|
211
|
+
var hasMergedCellsInTable = (_tableMap$hasMergedCe = tableMap === null || tableMap === void 0 ? void 0 : tableMap.hasMergedCells()) !== null && _tableMap$hasMergedCe !== void 0 ? _tableMap$hasMergedCe : false;
|
|
223
212
|
var allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
|
|
224
|
-
var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth,
|
|
213
|
+
var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, tableSortColumnReorder);
|
|
225
214
|
var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, tableSortColumnReorder, selectionRect),
|
|
226
215
|
menuItems = _convertToDropdownIte.menuItems,
|
|
227
216
|
menuCallback = _convertToDropdownIte.menuCallback;
|
|
@@ -11,13 +11,12 @@ import EditorLayoutThreeEqualIcon from '@atlaskit/icon/glyph/editor/layout-three
|
|
|
11
11
|
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
12
12
|
import HipchatChevronDoubleDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-down';
|
|
13
13
|
import HipchatChevronDoubleUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-up';
|
|
14
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
15
14
|
import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, sortColumnWithAnalytics } from '../commands-with-analytics';
|
|
16
15
|
import { moveSourceWithAnalytics } from '../pm-plugins/drag-and-drop/commands-with-analytics';
|
|
17
16
|
import { getNewResizeStateFromSelectedColumns } from '../pm-plugins/table-resizing/utils/resize-state';
|
|
18
17
|
import { getClosestSelectionRect } from '../toolbar';
|
|
19
18
|
import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
|
|
20
|
-
import {
|
|
19
|
+
import { hasMergedCellsInSelection, hasMergedCellsWithColumnNextToColumnIndex, hasMergedCellsWithRowNextToRowIndex } from './merged-cells';
|
|
21
20
|
import { getSelectedColumnIndexes, getSelectedRowIndexes } from './selection';
|
|
22
21
|
export var getTargetIndex = function getTargetIndex(selectedIndexes, direction) {
|
|
23
22
|
return Math[direction < 0 ? 'min' : 'max'].apply(Math, _toConsumableArray(selectedIndexes)) + direction;
|
|
@@ -40,17 +39,10 @@ export var canMove = function canMove(sourceType, direction, totalItemsOfSourceT
|
|
|
40
39
|
if (hasMergedCellsInTarget) {
|
|
41
40
|
return false;
|
|
42
41
|
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
} else {
|
|
49
|
-
// Currently we can't move in any direction if there are merged cells in the source
|
|
50
|
-
var hasMergedCellsInSource = isRow ? hasMergedCellsInRow(selectedIndexes)(selection) : hasMergedCellsInColumn(selectedIndexes)(selection);
|
|
51
|
-
if (hasMergedCellsInSource) {
|
|
52
|
-
return false;
|
|
53
|
-
}
|
|
42
|
+
|
|
43
|
+
// We can't move if selection in the source is not a rectangle
|
|
44
|
+
if (hasMergedCellsInSelection(selectedIndexes, isRow ? 'row' : 'column')(selection)) {
|
|
45
|
+
return false;
|
|
54
46
|
}
|
|
55
47
|
return true;
|
|
56
48
|
};
|
|
@@ -68,13 +60,13 @@ var defaultSelectionRect = {
|
|
|
68
60
|
right: 0,
|
|
69
61
|
bottom: 0
|
|
70
62
|
};
|
|
71
|
-
export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth,
|
|
63
|
+
export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired) {
|
|
72
64
|
var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
|
|
73
|
-
var isTableScalingEnabled = arguments.length >
|
|
74
|
-
var tableDuplicateCellColouring = arguments.length >
|
|
75
|
-
var isTableFixedColumnWidthsOptionEnabled = arguments.length >
|
|
76
|
-
var shouldUseIncreasedScalingPercent = arguments.length >
|
|
77
|
-
var tableSortColumnReorder = arguments.length >
|
|
65
|
+
var isTableScalingEnabled = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : false;
|
|
66
|
+
var tableDuplicateCellColouring = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : false;
|
|
67
|
+
var isTableFixedColumnWidthsOptionEnabled = arguments.length > 12 && arguments[12] !== undefined ? arguments[12] : false;
|
|
68
|
+
var shouldUseIncreasedScalingPercent = arguments.length > 13 && arguments[13] !== undefined ? arguments[13] : false;
|
|
69
|
+
var tableSortColumnReorder = arguments.length > 14 && arguments[14] !== undefined ? arguments[14] : false;
|
|
78
70
|
var selection = editorView.state.selection;
|
|
79
71
|
var addOptions = direction === 'row' ? [{
|
|
80
72
|
label: 'above',
|
|
@@ -101,7 +93,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
|
|
|
101
93
|
label: 'up',
|
|
102
94
|
icon: ArrowUpIcon,
|
|
103
95
|
keymap: moveRowUp,
|
|
104
|
-
canMove:
|
|
96
|
+
canMove: canMove('table-row', -1, (_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0, selection, selectionRect),
|
|
105
97
|
getOriginIndexes: getSelectedRowIndexes,
|
|
106
98
|
getTargetIndex: function getTargetIndex(selectionRect) {
|
|
107
99
|
return selectionRect.top - 1;
|
|
@@ -110,7 +102,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
|
|
|
110
102
|
label: 'down',
|
|
111
103
|
icon: ArrowDownIcon,
|
|
112
104
|
keymap: moveRowDown,
|
|
113
|
-
canMove:
|
|
105
|
+
canMove: canMove('table-row', 1, (_tableMap$height2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height2 !== void 0 ? _tableMap$height2 : 0, selection, selectionRect),
|
|
114
106
|
getOriginIndexes: getSelectedRowIndexes,
|
|
115
107
|
getTargetIndex: function getTargetIndex(selectionRect) {
|
|
116
108
|
return selectionRect.bottom;
|
|
@@ -119,7 +111,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
|
|
|
119
111
|
label: 'left',
|
|
120
112
|
icon: ArrowLeftIcon,
|
|
121
113
|
keymap: moveColumnLeft,
|
|
122
|
-
canMove:
|
|
114
|
+
canMove: canMove('table-column', -1, (_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0, selection, selectionRect),
|
|
123
115
|
getOriginIndexes: getSelectedColumnIndexes,
|
|
124
116
|
getTargetIndex: function getTargetIndex(selectionRect) {
|
|
125
117
|
return selectionRect.left - 1;
|
|
@@ -128,7 +120,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
|
|
|
128
120
|
label: 'right',
|
|
129
121
|
icon: ArrowRightIcon,
|
|
130
122
|
keymap: moveColumnRight,
|
|
131
|
-
canMove:
|
|
123
|
+
canMove: canMove('table-column', 1, (_tableMap$width2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width2 !== void 0 ? _tableMap$width2 : 0, selection, selectionRect),
|
|
132
124
|
getOriginIndexes: getSelectedColumnIndexes,
|
|
133
125
|
getTargetIndex: function getTargetIndex(selectionRect) {
|
|
134
126
|
return selectionRect.right;
|
|
@@ -13,4 +13,4 @@ export interface DragMenuConfig extends Omit<DropdownOptionT<Command>, 'icon'> {
|
|
|
13
13
|
icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
|
|
14
14
|
keymap?: string;
|
|
15
15
|
}
|
|
16
|
-
export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth,
|
|
16
|
+
export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, tableSortColumnReorder?: boolean) => DragMenuConfig[];
|
|
@@ -13,4 +13,4 @@ export interface DragMenuConfig extends Omit<DropdownOptionT<Command>, 'icon'> {
|
|
|
13
13
|
icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
|
|
14
14
|
keymap?: string;
|
|
15
15
|
}
|
|
16
|
-
export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth,
|
|
16
|
+
export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, tableSortColumnReorder?: boolean) => DragMenuConfig[];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "7.19.
|
|
3
|
+
"version": "7.19.9",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@atlaskit/adf-schema": "^39.0.3",
|
|
32
|
-
"@atlaskit/button": "^18.
|
|
32
|
+
"@atlaskit/button": "^18.2.0",
|
|
33
33
|
"@atlaskit/custom-steps": "^0.4.0",
|
|
34
|
-
"@atlaskit/editor-common": "^84.
|
|
34
|
+
"@atlaskit/editor-common": "^84.2.0",
|
|
35
35
|
"@atlaskit/editor-palette": "1.6.0",
|
|
36
36
|
"@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
|
|
37
37
|
"@atlaskit/editor-plugin-analytics": "^1.4.0",
|
|
@@ -43,13 +43,13 @@
|
|
|
43
43
|
"@atlaskit/editor-prosemirror": "4.0.1",
|
|
44
44
|
"@atlaskit/editor-shared-styles": "^2.12.0",
|
|
45
45
|
"@atlaskit/editor-tables": "^2.7.0",
|
|
46
|
-
"@atlaskit/icon": "^22.
|
|
47
|
-
"@atlaskit/menu": "^2.
|
|
46
|
+
"@atlaskit/icon": "^22.6.0",
|
|
47
|
+
"@atlaskit/menu": "^2.7.0",
|
|
48
48
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
49
49
|
"@atlaskit/pragmatic-drag-and-drop": "^1.2.0",
|
|
50
50
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
|
|
51
51
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
|
|
52
|
-
"@atlaskit/primitives": "^10.
|
|
52
|
+
"@atlaskit/primitives": "^10.1.0",
|
|
53
53
|
"@atlaskit/theme": "^12.11.0",
|
|
54
54
|
"@atlaskit/toggle": "^13.2.0",
|
|
55
55
|
"@atlaskit/tokens": "^1.53.0",
|
|
@@ -102,12 +102,6 @@
|
|
|
102
102
|
}
|
|
103
103
|
},
|
|
104
104
|
"platform-feature-flags": {
|
|
105
|
-
"platform.editor.table.drag-move-options-logic-update_fp7xw": {
|
|
106
|
-
"type": "boolean"
|
|
107
|
-
},
|
|
108
|
-
"platform.editor.a11y-table-resizing_uapcv": {
|
|
109
|
-
"type": "boolean"
|
|
110
|
-
},
|
|
111
105
|
"platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg": {
|
|
112
106
|
"type": "boolean"
|
|
113
107
|
},
|
|
@@ -24,7 +24,6 @@ import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/stat
|
|
|
24
24
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
25
25
|
import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
|
|
26
26
|
import { findTable } from '@atlaskit/editor-tables/utils';
|
|
27
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
28
27
|
import { token } from '@atlaskit/tokens';
|
|
29
28
|
|
|
30
29
|
import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
|
|
@@ -560,20 +559,18 @@ export const TableResizer = ({
|
|
|
560
559
|
displayGapCursor(true);
|
|
561
560
|
dispatch(tr);
|
|
562
561
|
|
|
563
|
-
if (
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
);
|
|
576
|
-
}
|
|
562
|
+
if (delta.width < 0) {
|
|
563
|
+
pluginInjectionApi?.accessibilityUtils?.actions.ariaNotify(
|
|
564
|
+
formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
|
|
565
|
+
newWidth: newWidth,
|
|
566
|
+
}),
|
|
567
|
+
);
|
|
568
|
+
} else if (delta.width > 0) {
|
|
569
|
+
pluginInjectionApi?.accessibilityUtils?.actions.ariaNotify(
|
|
570
|
+
formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
|
|
571
|
+
newWidth: newWidth,
|
|
572
|
+
}),
|
|
573
|
+
);
|
|
577
574
|
}
|
|
578
575
|
|
|
579
576
|
// Hide guidelines when resizing stops
|
|
@@ -658,49 +655,45 @@ export const TableResizer = ({
|
|
|
658
655
|
);
|
|
659
656
|
|
|
660
657
|
useLayoutEffect(() => {
|
|
661
|
-
if (
|
|
662
|
-
|
|
658
|
+
if (!resizerRef.current) {
|
|
659
|
+
return;
|
|
660
|
+
}
|
|
661
|
+
const resizeHandleThumbEl = resizerRef.current.getResizerThumbEl();
|
|
662
|
+
|
|
663
|
+
const globalKeyDownHandler = (event: KeyboardEvent): void => {
|
|
664
|
+
const metaKey = browser.mac ? event.metaKey : event.ctrlKey;
|
|
665
|
+
|
|
666
|
+
if (!isTableSelected) {
|
|
663
667
|
return;
|
|
664
668
|
}
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
const globalKeyDownHandler = (event: KeyboardEvent): void => {
|
|
668
|
-
const metaKey = browser.mac ? event.metaKey : event.ctrlKey;
|
|
669
|
+
if (event.altKey && event.shiftKey && metaKey && event.code === 'KeyR') {
|
|
670
|
+
event.preventDefault();
|
|
669
671
|
|
|
670
|
-
if (!
|
|
672
|
+
if (!resizeHandleThumbEl) {
|
|
671
673
|
return;
|
|
672
674
|
}
|
|
673
|
-
|
|
674
|
-
|
|
675
|
+
resizeHandleThumbEl.focus();
|
|
676
|
+
resizeHandleThumbEl.scrollIntoView({
|
|
677
|
+
behavior: 'smooth',
|
|
678
|
+
block: 'center',
|
|
679
|
+
inline: 'nearest',
|
|
680
|
+
});
|
|
681
|
+
}
|
|
682
|
+
};
|
|
675
683
|
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
}
|
|
686
|
-
};
|
|
687
|
-
|
|
688
|
-
const editorViewDom = editorView?.dom as HTMLElement | undefined;
|
|
689
|
-
editorViewDom?.addEventListener('keydown', globalKeyDownHandler);
|
|
690
|
-
resizeHandleThumbEl?.addEventListener('keydown', handleKeyDown);
|
|
691
|
-
resizeHandleThumbEl?.addEventListener('keyup', handleKeyUp);
|
|
692
|
-
return () => {
|
|
693
|
-
editorViewDom?.removeEventListener('keydown', globalKeyDownHandler);
|
|
694
|
-
resizeHandleThumbEl?.removeEventListener('keydown', handleKeyDown);
|
|
695
|
-
resizeHandleThumbEl?.removeEventListener('keyup', handleKeyUp);
|
|
696
|
-
};
|
|
697
|
-
}
|
|
684
|
+
const editorViewDom = editorView?.dom as HTMLElement | undefined;
|
|
685
|
+
editorViewDom?.addEventListener('keydown', globalKeyDownHandler);
|
|
686
|
+
resizeHandleThumbEl?.addEventListener('keydown', handleKeyDown);
|
|
687
|
+
resizeHandleThumbEl?.addEventListener('keyup', handleKeyUp);
|
|
688
|
+
return () => {
|
|
689
|
+
editorViewDom?.removeEventListener('keydown', globalKeyDownHandler);
|
|
690
|
+
resizeHandleThumbEl?.removeEventListener('keydown', handleKeyDown);
|
|
691
|
+
resizeHandleThumbEl?.removeEventListener('keyup', handleKeyUp);
|
|
692
|
+
};
|
|
698
693
|
}, [resizerRef, editorView, handleResizeStop, isTableSelected, handleKeyDown, handleKeyUp]);
|
|
699
694
|
|
|
700
695
|
useLayoutEffect(() => {
|
|
701
|
-
|
|
702
|
-
updateTooltip.current?.();
|
|
703
|
-
}
|
|
696
|
+
updateTooltip.current?.();
|
|
704
697
|
}, [width]);
|
|
705
698
|
|
|
706
699
|
const resizeRatio =
|
|
@@ -731,19 +724,15 @@ export const TableResizer = ({
|
|
|
731
724
|
needExtendedResizeZone={!isTableSelected}
|
|
732
725
|
appearance={isTableSelected && isWholeTableInDanger ? 'danger' : undefined}
|
|
733
726
|
handleHighlight="shadow"
|
|
734
|
-
handleTooltipContent={
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
);
|
|
744
|
-
}
|
|
745
|
-
: formatMessage(messages.resizeTable)
|
|
746
|
-
}
|
|
727
|
+
handleTooltipContent={({ update }) => {
|
|
728
|
+
updateTooltip.current = update;
|
|
729
|
+
return (
|
|
730
|
+
<ToolTipContent
|
|
731
|
+
description={formatMessage(messages.resizeTable)}
|
|
732
|
+
keymap={focusTableResizer}
|
|
733
|
+
/>
|
|
734
|
+
);
|
|
735
|
+
}}
|
|
747
736
|
>
|
|
748
737
|
{children}
|
|
749
738
|
</ResizerNext>
|
|
@@ -39,7 +39,6 @@ import {
|
|
|
39
39
|
isSelectionType,
|
|
40
40
|
} from '@atlaskit/editor-tables/utils';
|
|
41
41
|
import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
|
|
42
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
43
42
|
import Toggle from '@atlaskit/toggle';
|
|
44
43
|
|
|
45
44
|
import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
|
|
@@ -58,11 +57,8 @@ import {
|
|
|
58
57
|
checkIfHeaderColumnEnabled,
|
|
59
58
|
checkIfHeaderRowEnabled,
|
|
60
59
|
checkIfNumberColumnEnabled,
|
|
61
|
-
getMergedCellsPositions,
|
|
62
60
|
getSelectedColumnIndexes,
|
|
63
61
|
getSelectedRowIndexes,
|
|
64
|
-
hasMergedCellsInColumn,
|
|
65
|
-
hasMergedCellsInRow,
|
|
66
62
|
} from '../../utils';
|
|
67
63
|
import type { DragMenuConfig, DragMenuOptionIdType } from '../../utils/drag-menu';
|
|
68
64
|
import { getDragMenuConfig } from '../../utils/drag-menu';
|
|
@@ -290,25 +286,12 @@ export const DragMenu = React.memo(
|
|
|
290
286
|
? getSelectionRect(selection)!
|
|
291
287
|
: findCellRectClosestToPos(selection.$from);
|
|
292
288
|
|
|
293
|
-
|
|
294
|
-
let hasMergedCellsInTable;
|
|
295
|
-
if (fg('platform.editor.table.drag-move-options-logic-update_fp7xw')) {
|
|
296
|
-
shouldMoveDisabled = false;
|
|
297
|
-
hasMergedCellsInTable = tableMap?.hasMergedCells() ?? false;
|
|
298
|
-
} else {
|
|
299
|
-
const hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
|
|
300
|
-
|
|
301
|
-
shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
|
|
302
|
-
|
|
303
|
-
hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
|
|
304
|
-
}
|
|
305
|
-
|
|
289
|
+
const hasMergedCellsInTable = tableMap?.hasMergedCells() ?? false;
|
|
306
290
|
const allowBackgroundColor = pluginConfig?.allowBackgroundColor ?? false;
|
|
307
291
|
|
|
308
292
|
const dragMenuConfig = getDragMenuConfig(
|
|
309
293
|
direction,
|
|
310
294
|
getEditorContainerWidth,
|
|
311
|
-
!shouldMoveDisabled,
|
|
312
295
|
hasMergedCellsInTable,
|
|
313
296
|
editorView,
|
|
314
297
|
tableMap,
|
package/src/utils/drag-menu.ts
CHANGED
|
@@ -34,7 +34,6 @@ import EditorLayoutThreeEqualIcon from '@atlaskit/icon/glyph/editor/layout-three
|
|
|
34
34
|
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
35
35
|
import HipchatChevronDoubleDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-down';
|
|
36
36
|
import HipchatChevronDoubleUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-up';
|
|
37
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
38
37
|
|
|
39
38
|
import {
|
|
40
39
|
deleteColumnsWithAnalytics,
|
|
@@ -52,8 +51,6 @@ import type { DraggableData, DraggableType, TableDirection } from '../types';
|
|
|
52
51
|
import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
|
|
53
52
|
|
|
54
53
|
import {
|
|
55
|
-
hasMergedCellsInColumn,
|
|
56
|
-
hasMergedCellsInRow,
|
|
57
54
|
hasMergedCellsInSelection,
|
|
58
55
|
hasMergedCellsWithColumnNextToColumnIndex,
|
|
59
56
|
hasMergedCellsWithRowNextToRowIndex,
|
|
@@ -94,20 +91,9 @@ export const canMove = (
|
|
|
94
91
|
return false;
|
|
95
92
|
}
|
|
96
93
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
return false;
|
|
101
|
-
}
|
|
102
|
-
} else {
|
|
103
|
-
// Currently we can't move in any direction if there are merged cells in the source
|
|
104
|
-
const hasMergedCellsInSource = isRow
|
|
105
|
-
? hasMergedCellsInRow(selectedIndexes)(selection)
|
|
106
|
-
: hasMergedCellsInColumn(selectedIndexes)(selection);
|
|
107
|
-
|
|
108
|
-
if (hasMergedCellsInSource) {
|
|
109
|
-
return false;
|
|
110
|
-
}
|
|
94
|
+
// We can't move if selection in the source is not a rectangle
|
|
95
|
+
if (hasMergedCellsInSelection(selectedIndexes, isRow ? 'row' : 'column')(selection)) {
|
|
96
|
+
return false;
|
|
111
97
|
}
|
|
112
98
|
|
|
113
99
|
return true;
|
|
@@ -149,7 +135,6 @@ const defaultSelectionRect = { left: 0, top: 0, right: 0, bottom: 0 };
|
|
|
149
135
|
export const getDragMenuConfig = (
|
|
150
136
|
direction: TableDirection,
|
|
151
137
|
getEditorContainerWidth: GetEditorContainerWidth,
|
|
152
|
-
canDrag: boolean,
|
|
153
138
|
hasMergedCellsInTable: boolean,
|
|
154
139
|
editorView: EditorView,
|
|
155
140
|
tableMap?: TableMap,
|
|
@@ -202,8 +187,7 @@ export const getDragMenuConfig = (
|
|
|
202
187
|
label: 'up',
|
|
203
188
|
icon: ArrowUpIcon,
|
|
204
189
|
keymap: moveRowUp,
|
|
205
|
-
canMove:
|
|
206
|
-
canDrag && canMove('table-row', -1, tableMap?.height ?? 0, selection, selectionRect),
|
|
190
|
+
canMove: canMove('table-row', -1, tableMap?.height ?? 0, selection, selectionRect),
|
|
207
191
|
getOriginIndexes: getSelectedRowIndexes,
|
|
208
192
|
getTargetIndex: (selectionRect: Rect) => selectionRect.top - 1,
|
|
209
193
|
},
|
|
@@ -211,8 +195,7 @@ export const getDragMenuConfig = (
|
|
|
211
195
|
label: 'down',
|
|
212
196
|
icon: ArrowDownIcon,
|
|
213
197
|
keymap: moveRowDown,
|
|
214
|
-
canMove:
|
|
215
|
-
canDrag && canMove('table-row', 1, tableMap?.height ?? 0, selection, selectionRect),
|
|
198
|
+
canMove: canMove('table-row', 1, tableMap?.height ?? 0, selection, selectionRect),
|
|
216
199
|
getOriginIndexes: getSelectedRowIndexes,
|
|
217
200
|
getTargetIndex: (selectionRect: Rect) => selectionRect.bottom,
|
|
218
201
|
},
|
|
@@ -222,9 +205,7 @@ export const getDragMenuConfig = (
|
|
|
222
205
|
label: 'left',
|
|
223
206
|
icon: ArrowLeftIcon,
|
|
224
207
|
keymap: moveColumnLeft,
|
|
225
|
-
canMove:
|
|
226
|
-
canDrag &&
|
|
227
|
-
canMove('table-column', -1, tableMap?.width ?? 0, selection, selectionRect),
|
|
208
|
+
canMove: canMove('table-column', -1, tableMap?.width ?? 0, selection, selectionRect),
|
|
228
209
|
getOriginIndexes: getSelectedColumnIndexes,
|
|
229
210
|
getTargetIndex: (selectionRect: Rect) => selectionRect.left - 1,
|
|
230
211
|
},
|
|
@@ -232,8 +213,7 @@ export const getDragMenuConfig = (
|
|
|
232
213
|
label: 'right',
|
|
233
214
|
icon: ArrowRightIcon,
|
|
234
215
|
keymap: moveColumnRight,
|
|
235
|
-
canMove:
|
|
236
|
-
canDrag && canMove('table-column', 1, tableMap?.width ?? 0, selection, selectionRect),
|
|
216
|
+
canMove: canMove('table-column', 1, tableMap?.width ?? 0, selection, selectionRect),
|
|
237
217
|
getOriginIndexes: getSelectedColumnIndexes,
|
|
238
218
|
getTargetIndex: (selectionRect: Rect) => selectionRect.right,
|
|
239
219
|
},
|