@atlaskit/editor-plugin-table 7.18.3 → 7.18.4
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 +8 -0
- package/dist/cjs/commands/column-resize.js +0 -12
- package/dist/cjs/commands/go-to-next-cell.js +8 -11
- package/dist/cjs/commands/selection.js +4 -11
- package/dist/cjs/event-handlers.js +7 -11
- package/dist/cjs/pm-plugins/keymap.js +20 -22
- package/dist/cjs/pm-plugins/main.js +26 -30
- package/dist/cjs/pm-plugins/table-resizing/event-handlers.js +13 -21
- package/dist/cjs/pm-plugins/table-resizing/plugin.js +8 -11
- package/dist/es2019/commands/column-resize.js +0 -12
- package/dist/es2019/commands/go-to-next-cell.js +8 -11
- package/dist/es2019/commands/selection.js +4 -11
- package/dist/es2019/event-handlers.js +8 -12
- package/dist/es2019/pm-plugins/keymap.js +20 -22
- package/dist/es2019/pm-plugins/main.js +27 -31
- package/dist/es2019/pm-plugins/table-resizing/event-handlers.js +13 -21
- package/dist/es2019/pm-plugins/table-resizing/plugin.js +9 -12
- package/dist/esm/commands/column-resize.js +0 -12
- package/dist/esm/commands/go-to-next-cell.js +8 -11
- package/dist/esm/commands/selection.js +4 -11
- package/dist/esm/event-handlers.js +7 -11
- package/dist/esm/pm-plugins/keymap.js +20 -22
- package/dist/esm/pm-plugins/main.js +26 -30
- package/dist/esm/pm-plugins/table-resizing/event-handlers.js +13 -21
- package/dist/esm/pm-plugins/table-resizing/plugin.js +8 -11
- package/package.json +1 -4
- package/src/commands/column-resize.ts +0 -14
- package/src/commands/go-to-next-cell.ts +7 -10
- package/src/commands/selection.ts +4 -11
- package/src/event-handlers.ts +6 -12
- package/src/pm-plugins/keymap.ts +60 -62
- package/src/pm-plugins/main.ts +27 -31
- package/src/pm-plugins/table-resizing/event-handlers.ts +11 -19
- package/src/pm-plugins/table-resizing/plugin.ts +7 -10
- package/src/types.ts +20 -20
- package/src/ui/FloatingContextualMenu/ContextualMenu.tsx +5 -7
|
@@ -106,31 +106,29 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
|
|
|
106
106
|
tableRef = parent.querySelector('table') || undefined;
|
|
107
107
|
}
|
|
108
108
|
const tableNode = findTable(state.selection);
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
// Jump to another table
|
|
122
|
-
stopKeyboardColumnResizing({
|
|
123
|
-
ariaNotify: ariaNotifyPlugin,
|
|
124
|
-
getIntl: getIntl
|
|
125
|
-
})(state, dispatch);
|
|
126
|
-
}
|
|
127
|
-
} else if (!tableNode) {
|
|
128
|
-
// selection outside of table
|
|
109
|
+
// when keyboard cursor leaves the table we need to stop column resizing
|
|
110
|
+
const pluginPrevState = getPluginState(prevState);
|
|
111
|
+
const isStopKeyboardColumResizing = pluginPrevState.isResizeHandleWidgetAdded && pluginPrevState.isKeyboardResize;
|
|
112
|
+
if (isStopKeyboardColumResizing) {
|
|
113
|
+
const isTableNodesDifferent = (pluginPrevState === null || pluginPrevState === void 0 ? void 0 : pluginPrevState.tableNode) !== (tableNode === null || tableNode === void 0 ? void 0 : tableNode.node);
|
|
114
|
+
if (pluginPrevState !== null && pluginPrevState !== void 0 && pluginPrevState.tableNode && tableNode && isTableNodesDifferent) {
|
|
115
|
+
const oldRowsNumber = TableMap.get(pluginPrevState.tableNode).height;
|
|
116
|
+
const newRowsNumber = TableMap.get(tableNode.node).height;
|
|
117
|
+
if (oldRowsNumber !== newRowsNumber ||
|
|
118
|
+
// Add/delete row
|
|
119
|
+
tableNode.node.attrs.localId !== pluginPrevState.tableNode.attrs.localId) {
|
|
120
|
+
// Jump to another table
|
|
129
121
|
stopKeyboardColumnResizing({
|
|
130
122
|
ariaNotify: ariaNotifyPlugin,
|
|
131
123
|
getIntl: getIntl
|
|
132
124
|
})(state, dispatch);
|
|
133
125
|
}
|
|
126
|
+
} else if (!tableNode) {
|
|
127
|
+
// selection outside of table
|
|
128
|
+
stopKeyboardColumnResizing({
|
|
129
|
+
ariaNotify: ariaNotifyPlugin,
|
|
130
|
+
getIntl: getIntl
|
|
131
|
+
})(state, dispatch);
|
|
134
132
|
}
|
|
135
133
|
}
|
|
136
134
|
}
|
|
@@ -240,17 +238,15 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
|
|
|
240
238
|
state,
|
|
241
239
|
dispatch
|
|
242
240
|
} = view;
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
return false;
|
|
253
|
-
}
|
|
241
|
+
const {
|
|
242
|
+
isKeyboardResize
|
|
243
|
+
} = getPluginState(state);
|
|
244
|
+
if (isKeyboardResize) {
|
|
245
|
+
stopKeyboardColumnResizing({
|
|
246
|
+
ariaNotify: ariaNotifyPlugin,
|
|
247
|
+
getIntl: getIntl
|
|
248
|
+
})(state, dispatch);
|
|
249
|
+
return false;
|
|
254
250
|
}
|
|
255
251
|
const tr = replaceSelectedTable(state, text, INPUT_METHOD.KEYBOARD, editorAnalyticsAPI);
|
|
256
252
|
if (tr.selectionSet) {
|
|
@@ -118,15 +118,11 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
|
|
|
118
118
|
|
|
119
119
|
// If we let go in the same place we started, don't need to do anything.
|
|
120
120
|
if (dragging && clientX === dragging.startX) {
|
|
121
|
-
if (
|
|
122
|
-
if
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
return stopKeyboardColumnResizing({})(state, dispatch, view);
|
|
127
|
-
} else {
|
|
128
|
-
return stopResizing()(state, dispatch);
|
|
129
|
-
}
|
|
121
|
+
if (isKeyboardResize || !isTableHovered) {
|
|
122
|
+
/** if column resize had started via keyboard but continued by mouse
|
|
123
|
+
* or mouse pointer leaves the table but mouse button still pressed
|
|
124
|
+
*/
|
|
125
|
+
return stopKeyboardColumnResizing({})(state, dispatch, view);
|
|
130
126
|
} else {
|
|
131
127
|
return stopResizing()(state, dispatch);
|
|
132
128
|
}
|
|
@@ -197,17 +193,13 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
|
|
|
197
193
|
}
|
|
198
194
|
})(tr);
|
|
199
195
|
}
|
|
200
|
-
if (
|
|
201
|
-
if
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
})(state, dispatch, view);
|
|
208
|
-
} else {
|
|
209
|
-
return stopResizing(tr)(state, dispatch);
|
|
210
|
-
}
|
|
196
|
+
if (isKeyboardResize || !isTableHovered) {
|
|
197
|
+
/** if column resize had started via keyboard but continued by mouse
|
|
198
|
+
* or mouse pointer leaves the table but mouse button still pressed
|
|
199
|
+
*/
|
|
200
|
+
return stopKeyboardColumnResizing({
|
|
201
|
+
originalTr: tr
|
|
202
|
+
})(state, dispatch, view);
|
|
211
203
|
} else {
|
|
212
204
|
return stopResizing(tr)(state, dispatch);
|
|
213
205
|
}
|
|
@@ -228,7 +220,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
|
|
|
228
220
|
const {
|
|
229
221
|
isTableHovered
|
|
230
222
|
} = getTablePluginState(state);
|
|
231
|
-
if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos)) || !isTableHovered
|
|
223
|
+
if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos)) || !isTableHovered) {
|
|
232
224
|
return finish(event);
|
|
233
225
|
}
|
|
234
226
|
const $cell = state.doc.resolve(resizeHandlePos);
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import classnames from 'classnames';
|
|
2
2
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
4
3
|
import { TableCssClassName as ClassName } from '../../types';
|
|
5
4
|
import { getPluginState as getTablePluginState } from '../plugin-factory';
|
|
6
5
|
import { setResizeHandlePos } from './commands';
|
|
@@ -41,17 +40,15 @@ export function createPlugin(dispatch, {
|
|
|
41
40
|
dragging
|
|
42
41
|
} = getPluginState(state);
|
|
43
42
|
let isColumnKeyboardResizeStarted = false;
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
isColumnKeyboardResizeStarted = isKeyboardResize;
|
|
54
|
-
}
|
|
43
|
+
/*
|
|
44
|
+
We need to start listening mouse events if column resize started from keyboard.
|
|
45
|
+
This will allow continue resizing via mouse
|
|
46
|
+
*/
|
|
47
|
+
const {
|
|
48
|
+
isKeyboardResize
|
|
49
|
+
} = getTablePluginState(state);
|
|
50
|
+
if (isKeyboardResize) {
|
|
51
|
+
isColumnKeyboardResizeStarted = isKeyboardResize;
|
|
55
52
|
}
|
|
56
53
|
if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
|
|
57
54
|
if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI, isNewColumnResizingEnabled)) {
|
|
@@ -65,9 +65,6 @@ export var initiateKeyboardColumnResizing = function initiateKeyboardColumnResiz
|
|
|
65
65
|
var ariaNotify = _ref.ariaNotify,
|
|
66
66
|
getIntl = _ref.getIntl;
|
|
67
67
|
return function (state, dispatch, view) {
|
|
68
|
-
if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
|
|
69
|
-
return false;
|
|
70
|
-
}
|
|
71
68
|
var selection = state.selection;
|
|
72
69
|
var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
|
|
73
70
|
var cell = findCellClosestToPos(selection.$from);
|
|
@@ -87,9 +84,6 @@ export var activateNextResizeArea = function activateNextResizeArea(_ref2) {
|
|
|
87
84
|
ariaNotify = _ref2.ariaNotify,
|
|
88
85
|
getIntl = _ref2.getIntl;
|
|
89
86
|
return function (state, dispatch, view) {
|
|
90
|
-
if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
|
|
91
|
-
return false;
|
|
92
|
-
}
|
|
93
87
|
var _ref3 = getTableResizingPluginState(state) || {},
|
|
94
88
|
resizeHandlePos = _ref3.resizeHandlePos;
|
|
95
89
|
// If No resizing has initiated, skip to regular handler
|
|
@@ -162,9 +156,6 @@ export var changeColumnWidthByStep = function changeColumnWidthByStep(_ref4) {
|
|
|
162
156
|
var fakeDispatch = function fakeDispatch(tr) {
|
|
163
157
|
customTr = tr;
|
|
164
158
|
};
|
|
165
|
-
if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
|
|
166
|
-
return false;
|
|
167
|
-
}
|
|
168
159
|
var _getTableResizingPlug = getTableResizingPluginState(state),
|
|
169
160
|
resizeHandlePos = _getTableResizingPlug.resizeHandlePos;
|
|
170
161
|
var cell = findCellClosestToPos(state.selection.$from);
|
|
@@ -252,9 +243,6 @@ export var stopKeyboardColumnResizing = function stopKeyboardColumnResizing(_ref
|
|
|
252
243
|
getIntl = _ref5.getIntl,
|
|
253
244
|
originalTr = _ref5.originalTr;
|
|
254
245
|
return function (state, dispatch) {
|
|
255
|
-
if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
|
|
256
|
-
return false;
|
|
257
|
-
}
|
|
258
246
|
var customTr = originalTr || state.tr;
|
|
259
247
|
var fakeDispatch = function fakeDispatch(tr) {
|
|
260
248
|
customTr = tr;
|
|
@@ -4,7 +4,6 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
|
4
4
|
import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
5
5
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
6
6
|
import { goToNextCell as baseGotoNextCell, findTable } from '@atlaskit/editor-tables/utils';
|
|
7
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
8
7
|
import { insertRowWithAnalytics } from '../commands-with-analytics';
|
|
9
8
|
import { getPluginState } from '../pm-plugins/plugin-factory';
|
|
10
9
|
import { stopKeyboardColumnResizing } from './column-resize';
|
|
@@ -13,20 +12,18 @@ var TAB_BACKWARD_DIRECTION = -1;
|
|
|
13
12
|
export var goToNextCell = function goToNextCell(editorAnalyticsAPI, ariaNotify, getIntl) {
|
|
14
13
|
return function (direction) {
|
|
15
14
|
return function (state, dispatch, view) {
|
|
15
|
+
var _getPluginState;
|
|
16
16
|
var table = findTable(state.selection);
|
|
17
17
|
if (!table) {
|
|
18
18
|
return false;
|
|
19
19
|
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
})(state, dispatch, view);
|
|
28
|
-
return true;
|
|
29
|
-
}
|
|
20
|
+
var isColumnResizing = (_getPluginState = getPluginState(state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.isKeyboardResize;
|
|
21
|
+
if (isColumnResizing) {
|
|
22
|
+
stopKeyboardColumnResizing({
|
|
23
|
+
ariaNotify: ariaNotify,
|
|
24
|
+
getIntl: getIntl
|
|
25
|
+
})(state, dispatch, view);
|
|
26
|
+
return true;
|
|
30
27
|
}
|
|
31
28
|
var map = TableMap.get(table.node);
|
|
32
29
|
var _state$schema$nodes = state.schema.nodes,
|
|
@@ -3,7 +3,6 @@ import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
|
3
3
|
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
4
4
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
5
5
|
import { findTable, isColumnSelected, isRowSelected, isTableSelected, selectedRect } from '@atlaskit/editor-tables/utils';
|
|
6
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
7
6
|
import { selectColumn, selectRow } from '../commands/misc';
|
|
8
7
|
import { getPluginState } from '../pm-plugins/plugin-factory';
|
|
9
8
|
import { getClosestSelectionRect } from '../toolbar';
|
|
@@ -196,11 +195,8 @@ var arrowLeftFromText = function arrowLeftFromText(editorSelectionAPI) {
|
|
|
196
195
|
var table = findTable(selection);
|
|
197
196
|
if (table) {
|
|
198
197
|
var $from = selection.$from;
|
|
199
|
-
var
|
|
200
|
-
|
|
201
|
-
var columResizePluginState = getPluginState(state) || {};
|
|
202
|
-
isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.isKeyboardResize);
|
|
203
|
-
}
|
|
198
|
+
var columResizePluginState = getPluginState(state) || {};
|
|
199
|
+
var isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.isKeyboardResize);
|
|
204
200
|
if (isSelectionAtStartOfTable($from, selection) && $from.parent.type.name === 'paragraph' && $from.depth === table.depth + 3 &&
|
|
205
201
|
// + 3 for: row, cell & paragraph nodes
|
|
206
202
|
editorSelectionAPI && !isColumnResizing) {
|
|
@@ -230,11 +226,8 @@ var arrowRightFromText = function arrowRightFromText(editorSelectionAPI) {
|
|
|
230
226
|
var table = findTable(selection);
|
|
231
227
|
if (table) {
|
|
232
228
|
var $to = selection.$to;
|
|
233
|
-
var
|
|
234
|
-
|
|
235
|
-
var columResizePluginState = getPluginState(state) || {};
|
|
236
|
-
isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.isKeyboardResize);
|
|
237
|
-
}
|
|
229
|
+
var columResizePluginState = getPluginState(state) || {};
|
|
230
|
+
var isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.isKeyboardResize);
|
|
238
231
|
if (isSelectionAtEndOfTable($to, selection) && $to.parent.type.name === 'paragraph' && $to.depth === table.depth + 3 &&
|
|
239
232
|
// + 3 for: row, cell & paragraph nodes
|
|
240
233
|
!isColumnResizing) {
|
|
@@ -190,17 +190,13 @@ export var handleMouseOut = function handleMouseOut(view, mouseEvent) {
|
|
|
190
190
|
if (isResizeHandleDecoration(target) && !isResizeHandleDecoration(relatedTarget)) {
|
|
191
191
|
var _state2 = view.state,
|
|
192
192
|
_dispatch3 = view.dispatch;
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
if
|
|
197
|
-
|
|
198
|
-
return false;
|
|
199
|
-
}
|
|
200
|
-
return hideResizeHandleLine()(_state2, _dispatch3);
|
|
201
|
-
} else {
|
|
202
|
-
return hideResizeHandleLine()(_state2, _dispatch3);
|
|
193
|
+
var _getPluginState3 = getPluginState(_state2),
|
|
194
|
+
isKeyboardResize = _getPluginState3.isKeyboardResize;
|
|
195
|
+
if (isKeyboardResize) {
|
|
196
|
+
// no need to hide decoration if column resizing started by keyboard
|
|
197
|
+
return false;
|
|
203
198
|
}
|
|
199
|
+
return hideResizeHandleLine()(_state2, _dispatch3);
|
|
204
200
|
}
|
|
205
201
|
return false;
|
|
206
202
|
};
|
|
@@ -293,7 +289,7 @@ var handleMouseMoveDebounce = rafSchedule(function (view, event, offsetX) {
|
|
|
293
289
|
var _getPluginState8 = getPluginState(_state4),
|
|
294
290
|
resizeHandleColumnIndex = _getPluginState8.resizeHandleColumnIndex,
|
|
295
291
|
resizeHandleRowIndex = _getPluginState8.resizeHandleRowIndex;
|
|
296
|
-
var isKeyboardResize =
|
|
292
|
+
var isKeyboardResize = getPluginState(_state4).isKeyboardResize;
|
|
297
293
|
var tableCell = closestElement(element, 'td, th');
|
|
298
294
|
var cellStartPosition = view.posAtDOM(tableCell, 0);
|
|
299
295
|
var rect = findCellRectClosestToPos(_state4.doc.resolve(cellStartPosition));
|
|
@@ -55,28 +55,26 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
|
|
|
55
55
|
bindKeymapWithCommand(deleteColumn.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
|
|
56
56
|
bindKeymapWithCommand(deleteRow.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
|
|
57
57
|
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
}), list);
|
|
79
|
-
}
|
|
58
|
+
bindKeymapWithCommand(startColumnResizing.common, initiateKeyboardColumnResizing({
|
|
59
|
+
ariaNotify: ariaNotifyPlugin,
|
|
60
|
+
getIntl: getIntl
|
|
61
|
+
}), list);
|
|
62
|
+
bindKeymapWithCommand(moveRight.common, activateNextResizeArea({
|
|
63
|
+
direction: 1,
|
|
64
|
+
ariaNotify: ariaNotifyPlugin,
|
|
65
|
+
getIntl: getIntl
|
|
66
|
+
}), list);
|
|
67
|
+
bindKeymapWithCommand(moveLeft.common, activateNextResizeArea({
|
|
68
|
+
direction: -1,
|
|
69
|
+
ariaNotify: ariaNotifyPlugin,
|
|
70
|
+
getIntl: getIntl
|
|
71
|
+
}), list);
|
|
72
|
+
bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(-10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
|
|
73
|
+
bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
|
|
74
|
+
bindKeymapWithCommand(escape.common, stopKeyboardColumnResizing({
|
|
75
|
+
ariaNotify: ariaNotifyPlugin,
|
|
76
|
+
getIntl: getIntl
|
|
77
|
+
}), list);
|
|
80
78
|
if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
|
|
81
79
|
bindKeymapWithCommand(focusToContextMenuTrigger.common, setFocusToCellMenu(), list);
|
|
82
80
|
}
|
|
@@ -110,31 +110,29 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
|
|
|
110
110
|
tableRef = parent.querySelector('table') || undefined;
|
|
111
111
|
}
|
|
112
112
|
var tableNode = findTable(state.selection);
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
// Jump to another table
|
|
126
|
-
stopKeyboardColumnResizing({
|
|
127
|
-
ariaNotify: ariaNotifyPlugin,
|
|
128
|
-
getIntl: getIntl
|
|
129
|
-
})(state, dispatch);
|
|
130
|
-
}
|
|
131
|
-
} else if (!tableNode) {
|
|
132
|
-
// selection outside of table
|
|
113
|
+
// when keyboard cursor leaves the table we need to stop column resizing
|
|
114
|
+
var pluginPrevState = getPluginState(prevState);
|
|
115
|
+
var isStopKeyboardColumResizing = pluginPrevState.isResizeHandleWidgetAdded && pluginPrevState.isKeyboardResize;
|
|
116
|
+
if (isStopKeyboardColumResizing) {
|
|
117
|
+
var isTableNodesDifferent = (pluginPrevState === null || pluginPrevState === void 0 ? void 0 : pluginPrevState.tableNode) !== (tableNode === null || tableNode === void 0 ? void 0 : tableNode.node);
|
|
118
|
+
if (pluginPrevState !== null && pluginPrevState !== void 0 && pluginPrevState.tableNode && tableNode && isTableNodesDifferent) {
|
|
119
|
+
var oldRowsNumber = TableMap.get(pluginPrevState.tableNode).height;
|
|
120
|
+
var newRowsNumber = TableMap.get(tableNode.node).height;
|
|
121
|
+
if (oldRowsNumber !== newRowsNumber ||
|
|
122
|
+
// Add/delete row
|
|
123
|
+
tableNode.node.attrs.localId !== pluginPrevState.tableNode.attrs.localId) {
|
|
124
|
+
// Jump to another table
|
|
133
125
|
stopKeyboardColumnResizing({
|
|
134
126
|
ariaNotify: ariaNotifyPlugin,
|
|
135
127
|
getIntl: getIntl
|
|
136
128
|
})(state, dispatch);
|
|
137
129
|
}
|
|
130
|
+
} else if (!tableNode) {
|
|
131
|
+
// selection outside of table
|
|
132
|
+
stopKeyboardColumnResizing({
|
|
133
|
+
ariaNotify: ariaNotifyPlugin,
|
|
134
|
+
getIntl: getIntl
|
|
135
|
+
})(state, dispatch);
|
|
138
136
|
}
|
|
139
137
|
}
|
|
140
138
|
}
|
|
@@ -236,16 +234,14 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
|
|
|
236
234
|
handleTextInput: function handleTextInput(view, _from, _to, text) {
|
|
237
235
|
var state = view.state,
|
|
238
236
|
dispatch = view.dispatch;
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
return false;
|
|
248
|
-
}
|
|
237
|
+
var _getPluginState = getPluginState(state),
|
|
238
|
+
isKeyboardResize = _getPluginState.isKeyboardResize;
|
|
239
|
+
if (isKeyboardResize) {
|
|
240
|
+
stopKeyboardColumnResizing({
|
|
241
|
+
ariaNotify: ariaNotifyPlugin,
|
|
242
|
+
getIntl: getIntl
|
|
243
|
+
})(state, dispatch);
|
|
244
|
+
return false;
|
|
249
245
|
}
|
|
250
246
|
var tr = replaceSelectedTable(state, text, INPUT_METHOD.KEYBOARD, editorAnalyticsAPI);
|
|
251
247
|
if (tr.selectionSet) {
|
|
@@ -109,15 +109,11 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
|
|
|
109
109
|
|
|
110
110
|
// If we let go in the same place we started, don't need to do anything.
|
|
111
111
|
if (dragging && clientX === dragging.startX) {
|
|
112
|
-
if (
|
|
113
|
-
if
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
return stopKeyboardColumnResizing({})(state, dispatch, view);
|
|
118
|
-
} else {
|
|
119
|
-
return stopResizing()(state, dispatch);
|
|
120
|
-
}
|
|
112
|
+
if (isKeyboardResize || !isTableHovered) {
|
|
113
|
+
/** if column resize had started via keyboard but continued by mouse
|
|
114
|
+
* or mouse pointer leaves the table but mouse button still pressed
|
|
115
|
+
*/
|
|
116
|
+
return stopKeyboardColumnResizing({})(state, dispatch, view);
|
|
121
117
|
} else {
|
|
122
118
|
return stopResizing()(state, dispatch);
|
|
123
119
|
}
|
|
@@ -184,17 +180,13 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
|
|
|
184
180
|
}
|
|
185
181
|
})(tr);
|
|
186
182
|
}
|
|
187
|
-
if (
|
|
188
|
-
if
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
})(state, dispatch, view);
|
|
195
|
-
} else {
|
|
196
|
-
return stopResizing(tr)(state, dispatch);
|
|
197
|
-
}
|
|
183
|
+
if (isKeyboardResize || !isTableHovered) {
|
|
184
|
+
/** if column resize had started via keyboard but continued by mouse
|
|
185
|
+
* or mouse pointer leaves the table but mouse button still pressed
|
|
186
|
+
*/
|
|
187
|
+
return stopKeyboardColumnResizing({
|
|
188
|
+
originalTr: tr
|
|
189
|
+
})(state, dispatch, view);
|
|
198
190
|
} else {
|
|
199
191
|
return stopResizing(tr)(state, dispatch);
|
|
200
192
|
}
|
|
@@ -209,7 +201,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
|
|
|
209
201
|
resizeHandlePos = _getPluginState2.resizeHandlePos;
|
|
210
202
|
var _getTablePluginState3 = getTablePluginState(state),
|
|
211
203
|
isTableHovered = _getTablePluginState3.isTableHovered;
|
|
212
|
-
if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos)) || !isTableHovered
|
|
204
|
+
if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos)) || !isTableHovered) {
|
|
213
205
|
return finish(event);
|
|
214
206
|
}
|
|
215
207
|
var $cell = state.doc.resolve(resizeHandlePos);
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import classnames from 'classnames';
|
|
3
3
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
4
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
5
4
|
import { TableCssClassName as ClassName } from '../../types';
|
|
6
5
|
import { getPluginState as getTablePluginState } from '../plugin-factory';
|
|
7
6
|
import { setResizeHandlePos } from './commands';
|
|
@@ -37,16 +36,14 @@ export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorF
|
|
|
37
36
|
var _getPluginState = getPluginState(state),
|
|
38
37
|
dragging = _getPluginState.dragging;
|
|
39
38
|
var isColumnKeyboardResizeStarted = false;
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
isColumnKeyboardResizeStarted = isKeyboardResize;
|
|
49
|
-
}
|
|
39
|
+
/*
|
|
40
|
+
We need to start listening mouse events if column resize started from keyboard.
|
|
41
|
+
This will allow continue resizing via mouse
|
|
42
|
+
*/
|
|
43
|
+
var _getTablePluginState = getTablePluginState(state),
|
|
44
|
+
isKeyboardResize = _getTablePluginState.isKeyboardResize;
|
|
45
|
+
if (isKeyboardResize) {
|
|
46
|
+
isColumnKeyboardResizeStarted = isKeyboardResize;
|
|
50
47
|
}
|
|
51
48
|
if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
|
|
52
49
|
if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI, isNewColumnResizingEnabled)) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "7.18.
|
|
3
|
+
"version": "7.18.4",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -111,9 +111,6 @@
|
|
|
111
111
|
"platform.editor.a11y-table-resizing_uapcv": {
|
|
112
112
|
"type": "boolean"
|
|
113
113
|
},
|
|
114
|
-
"platform.editor.a11y-column-resizing_emcvz": {
|
|
115
|
-
"type": "boolean"
|
|
116
|
-
},
|
|
117
114
|
"platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg": {
|
|
118
115
|
"type": "boolean"
|
|
119
116
|
},
|
|
@@ -123,10 +123,6 @@ export const initiateKeyboardColumnResizing =
|
|
|
123
123
|
getIntl?: () => IntlShape;
|
|
124
124
|
}): Command =>
|
|
125
125
|
(state, dispatch, view) => {
|
|
126
|
-
if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
|
|
127
|
-
return false;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
126
|
const { selection } = state;
|
|
131
127
|
const selectionRect = isSelectionType(selection, 'cell')
|
|
132
128
|
? getSelectionRect(selection)!
|
|
@@ -160,10 +156,6 @@ export const activateNextResizeArea =
|
|
|
160
156
|
getIntl?: () => IntlShape;
|
|
161
157
|
}): Command =>
|
|
162
158
|
(state, dispatch, view) => {
|
|
163
|
-
if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
|
|
164
|
-
return false;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
159
|
const { resizeHandlePos } = getTableResizingPluginState(state) || {};
|
|
168
160
|
// If No resizing has initiated, skip to regular handler
|
|
169
161
|
if (!resizeHandlePos) {
|
|
@@ -274,9 +266,6 @@ export const changeColumnWidthByStep =
|
|
|
274
266
|
const fakeDispatch = (tr: Transaction) => {
|
|
275
267
|
customTr = tr;
|
|
276
268
|
};
|
|
277
|
-
if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
|
|
278
|
-
return false;
|
|
279
|
-
}
|
|
280
269
|
const { resizeHandlePos } = getTableResizingPluginState(state);
|
|
281
270
|
const cell = findCellClosestToPos(state.selection.$from);
|
|
282
271
|
if (!view || !resizeHandlePos || !cell) {
|
|
@@ -403,9 +392,6 @@ export const stopKeyboardColumnResizing =
|
|
|
403
392
|
originalTr?: Transaction;
|
|
404
393
|
}): Command =>
|
|
405
394
|
(state, dispatch) => {
|
|
406
|
-
if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
|
|
407
|
-
return false;
|
|
408
|
-
}
|
|
409
395
|
let customTr = originalTr || state.tr;
|
|
410
396
|
const fakeDispatch = (tr: Transaction) => {
|
|
411
397
|
customTr = tr;
|
|
@@ -8,7 +8,6 @@ import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
|
8
8
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
9
9
|
import type { Direction } from '@atlaskit/editor-tables/types';
|
|
10
10
|
import { goToNextCell as baseGotoNextCell, findTable } from '@atlaskit/editor-tables/utils';
|
|
11
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
12
11
|
|
|
13
12
|
import { insertRowWithAnalytics } from '../commands-with-analytics';
|
|
14
13
|
import { getPluginState } from '../pm-plugins/plugin-factory';
|
|
@@ -31,15 +30,13 @@ export const goToNextCell =
|
|
|
31
30
|
return false;
|
|
32
31
|
}
|
|
33
32
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
return true;
|
|
42
|
-
}
|
|
33
|
+
const isColumnResizing = getPluginState(state)?.isKeyboardResize;
|
|
34
|
+
if (isColumnResizing) {
|
|
35
|
+
stopKeyboardColumnResizing({
|
|
36
|
+
ariaNotify: ariaNotify,
|
|
37
|
+
getIntl: getIntl,
|
|
38
|
+
})(state, dispatch, view);
|
|
39
|
+
return true;
|
|
43
40
|
}
|
|
44
41
|
|
|
45
42
|
const map = TableMap.get(table.node);
|