@atlaskit/editor-plugin-table 7.24.8 → 7.25.1
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 +27 -0
- package/dist/cjs/nodeviews/TableComponent.js +18 -4
- package/dist/cjs/nodeviews/ignore-mutation-delegate.js +23 -0
- package/dist/cjs/nodeviews/lazy-node-views.js +5 -1
- package/dist/cjs/nodeviews/table.js +2 -15
- package/dist/cjs/pm-plugins/main.js +1 -1
- package/dist/es2019/nodeviews/TableComponent.js +19 -5
- package/dist/es2019/nodeviews/ignore-mutation-delegate.js +20 -0
- package/dist/es2019/nodeviews/lazy-node-views.js +5 -1
- package/dist/es2019/nodeviews/table.js +2 -18
- package/dist/es2019/pm-plugins/main.js +1 -1
- package/dist/esm/nodeviews/TableComponent.js +19 -5
- package/dist/esm/nodeviews/ignore-mutation-delegate.js +17 -0
- package/dist/esm/nodeviews/lazy-node-views.js +5 -1
- package/dist/esm/nodeviews/table.js +2 -15
- package/dist/esm/pm-plugins/main.js +1 -1
- package/dist/types/nodeviews/ignore-mutation-delegate.d.ts +5 -0
- package/dist/types-ts4.5/nodeviews/ignore-mutation-delegate.d.ts +5 -0
- package/package.json +12 -9
- package/src/nodeviews/TableComponent.tsx +19 -1
- package/src/nodeviews/ignore-mutation-delegate.ts +28 -0
- package/src/nodeviews/lazy-node-views.ts +4 -0
- package/src/nodeviews/table.tsx +2 -26
- package/src/pm-plugins/main.ts +3 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 7.25.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#128458](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128458)
|
|
8
|
+
[`26e17a7d801e4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/26e17a7d801e4) -
|
|
9
|
+
ED-24514 Added ignore mutation for lazy node view
|
|
10
|
+
- [#128458](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128458)
|
|
11
|
+
[`f372e089c10cf`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f372e089c10cf) -
|
|
12
|
+
Fix an issue where hovering over the column divider does not show the blue hover decoration in
|
|
13
|
+
React 18
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
16
|
+
## 7.25.0
|
|
17
|
+
|
|
18
|
+
### Minor Changes
|
|
19
|
+
|
|
20
|
+
- [#128347](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128347)
|
|
21
|
+
[`e33566cebd5d1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e33566cebd5d1) -
|
|
22
|
+
[ED-24175] bump @atlaskit/adf-schema to 40.8.1 and @atlassian/adf-schema-json to 1.22.0 to
|
|
23
|
+
promotecodeblocks & media in quotes, and nested expands in expands to full schema, and allow
|
|
24
|
+
quotes in panels and decisions in lists in stage0 schema, and a validator spec change
|
|
25
|
+
|
|
26
|
+
### Patch Changes
|
|
27
|
+
|
|
28
|
+
- Updated dependencies
|
|
29
|
+
|
|
3
30
|
## 7.24.8
|
|
4
31
|
|
|
5
32
|
### Patch Changes
|
|
@@ -81,6 +81,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
81
81
|
}
|
|
82
82
|
return (0, _eventHandlers.handleMouseOut)(_this.props.view, event);
|
|
83
83
|
});
|
|
84
|
+
(0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleMouseOver", function (event) {
|
|
85
|
+
if (!(0, _eventHandlers.isTableInFocus)(_this.props.view)) {
|
|
86
|
+
return false;
|
|
87
|
+
}
|
|
88
|
+
return (0, _eventHandlers.withCellTracking)(_eventHandlers.handleMouseOver)(_this.props.view, event);
|
|
89
|
+
});
|
|
84
90
|
(0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleMouseEnter", function () {
|
|
85
91
|
var node = _this.props.getNode();
|
|
86
92
|
var pos = _this.props.getPos();
|
|
@@ -375,6 +381,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
375
381
|
var _this$table2;
|
|
376
382
|
this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.addEventListener('mouseout', this.handleMouseOut);
|
|
377
383
|
}
|
|
384
|
+
if ((0, _platformFeatureFlags.fg)('platform_editor_react_18_table_column_resize_hover')) {
|
|
385
|
+
var _this$table3;
|
|
386
|
+
this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseover', this.handleMouseOver);
|
|
387
|
+
}
|
|
378
388
|
var _getEditorFeatureFlag = getEditorFeatureFlags(),
|
|
379
389
|
_getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
|
|
380
390
|
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2,
|
|
@@ -456,12 +466,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
456
466
|
window.removeEventListener('resize', this.handleWindowResizeDebounced);
|
|
457
467
|
}
|
|
458
468
|
if ((0, _platformFeatureFlags.fg)('platform.editor.table.live-pages-sorting_4malx')) {
|
|
459
|
-
var _this$
|
|
460
|
-
this === null || this === void 0 || (_this$
|
|
469
|
+
var _this$table4;
|
|
470
|
+
this === null || this === void 0 || (_this$table4 = this.table) === null || _this$table4 === void 0 || _this$table4.removeEventListener('mouseenter', this.handleMouseEnter);
|
|
461
471
|
}
|
|
462
472
|
if ((0, _platformFeatureFlags.fg)('editor_react_18_fix_table_delete_col_decorations')) {
|
|
463
|
-
var _this$
|
|
464
|
-
this === null || this === void 0 || (_this$
|
|
473
|
+
var _this$table5;
|
|
474
|
+
this === null || this === void 0 || (_this$table5 = this.table) === null || _this$table5 === void 0 || _this$table5.removeEventListener('mouseout', this.handleMouseOut);
|
|
475
|
+
}
|
|
476
|
+
if ((0, _platformFeatureFlags.fg)('platform_editor_react_18_table_column_resize_hover')) {
|
|
477
|
+
var _this$table6;
|
|
478
|
+
this === null || this === void 0 || (_this$table6 = this.table) === null || _this$table6 === void 0 || _this$table6.removeEventListener('mouseover', this.handleMouseOver);
|
|
465
479
|
}
|
|
466
480
|
if (this.overflowShadowsObserver) {
|
|
467
481
|
this.overflowShadowsObserver.dispose();
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _default = exports.default = function _default(mutation) {
|
|
8
|
+
var type = mutation.type,
|
|
9
|
+
_mutation$target = mutation.target,
|
|
10
|
+
nodeName = _mutation$target.nodeName,
|
|
11
|
+
firstChild = _mutation$target.firstChild;
|
|
12
|
+
if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'DIV' && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'TABLE') {
|
|
13
|
+
return false;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
// ED-16668
|
|
17
|
+
// Do not remove this fixes an issue with windows firefox that relates to
|
|
18
|
+
// the addition of the shadow sentinels
|
|
19
|
+
if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'TABLE' && ((firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'COLGROUP' || (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'SPAN')) {
|
|
20
|
+
return false;
|
|
21
|
+
}
|
|
22
|
+
return true;
|
|
23
|
+
};
|
|
@@ -8,6 +8,7 @@ exports.lazyTableView = exports.lazyTableRowView = exports.lazyTableHeaderView =
|
|
|
8
8
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
9
9
|
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
|
|
10
10
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
11
|
+
var _ignoreMutationDelegate = _interopRequireDefault(require("./ignore-mutation-delegate"));
|
|
11
12
|
var _table = require("./table");
|
|
12
13
|
var _TableCell = _interopRequireDefault(require("./TableCell"));
|
|
13
14
|
var _TableRow = _interopRequireDefault(require("./TableRow"));
|
|
@@ -46,7 +47,10 @@ var lazyTableView = exports.lazyTableView = function lazyTableView(options) {
|
|
|
46
47
|
getNodeViewOptions: function getNodeViewOptions() {
|
|
47
48
|
return options;
|
|
48
49
|
},
|
|
49
|
-
loader: loader
|
|
50
|
+
loader: loader,
|
|
51
|
+
lazyNodeViewOptions: {
|
|
52
|
+
ignoreMutationDelegate: _ignoreMutationDelegate.default
|
|
53
|
+
}
|
|
50
54
|
});
|
|
51
55
|
};
|
|
52
56
|
var lazyTableCellView = exports.lazyTableCellView = function lazyTableCellView(options) {
|
|
@@ -31,6 +31,7 @@ var _tableResizing = require("../pm-plugins/table-resizing");
|
|
|
31
31
|
var _utils = require("../pm-plugins/table-resizing/utils");
|
|
32
32
|
var _tableWidth = require("../pm-plugins/table-width");
|
|
33
33
|
var _utils2 = require("../utils");
|
|
34
|
+
var _ignoreMutationDelegate = _interopRequireDefault(require("./ignore-mutation-delegate"));
|
|
34
35
|
var _TableComponent = _interopRequireDefault(require("./TableComponent"));
|
|
35
36
|
var _TableComponentWithSharedState = require("./TableComponentWithSharedState");
|
|
36
37
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
@@ -261,21 +262,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
261
262
|
}, {
|
|
262
263
|
key: "ignoreMutation",
|
|
263
264
|
value: function ignoreMutation(mutation) {
|
|
264
|
-
|
|
265
|
-
_mutation$target = mutation.target,
|
|
266
|
-
nodeName = _mutation$target.nodeName,
|
|
267
|
-
firstChild = _mutation$target.firstChild;
|
|
268
|
-
if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'DIV' && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'TABLE') {
|
|
269
|
-
return false;
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
// ED-16668
|
|
273
|
-
// Do not remove this fixes an issue with windows firefox that relates to
|
|
274
|
-
// the addition of the shadow sentinels
|
|
275
|
-
if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'TABLE' && ((firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'COLGROUP' || (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'SPAN')) {
|
|
276
|
-
return false;
|
|
277
|
-
}
|
|
278
|
-
return true;
|
|
265
|
+
return (0, _ignoreMutationDelegate.default)(mutation);
|
|
279
266
|
}
|
|
280
267
|
}, {
|
|
281
268
|
key: "destroy",
|
|
@@ -279,7 +279,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
|
|
|
279
279
|
focus: _eventHandlers.handleFocus,
|
|
280
280
|
blur: _eventHandlers.handleBlur,
|
|
281
281
|
mousedown: (0, _eventHandlers.withCellTracking)(_eventHandlers.handleMouseDown),
|
|
282
|
-
mouseover: (0, _eventHandlers.withCellTracking)((0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseOver)),
|
|
282
|
+
mouseover: (0, _platformFeatureFlags.fg)('platform_editor_react_18_table_column_resize_hover') ? undefined : (0, _eventHandlers.withCellTracking)((0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseOver)),
|
|
283
283
|
mouseleave: _eventHandlers.handleMouseLeave,
|
|
284
284
|
mouseout: (0, _platformFeatureFlags.fg)('editor_react_18_fix_table_delete_col_decorations') ? undefined : (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseOut),
|
|
285
285
|
mousemove: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseMove),
|
|
@@ -14,7 +14,7 @@ import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
|
|
|
14
14
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
15
15
|
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
|
|
16
16
|
import { autoSizeTable, clearHoverSelection } from '../commands';
|
|
17
|
-
import { handleMouseOut, isTableInFocus } from '../event-handlers';
|
|
17
|
+
import { handleMouseOut, handleMouseOver, isTableInFocus, withCellTracking } from '../event-handlers';
|
|
18
18
|
import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
|
|
19
19
|
import { getPluginState } from '../pm-plugins/plugin-factory';
|
|
20
20
|
import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
|
|
@@ -59,6 +59,12 @@ class TableComponent extends React.Component {
|
|
|
59
59
|
}
|
|
60
60
|
return handleMouseOut(this.props.view, event);
|
|
61
61
|
});
|
|
62
|
+
_defineProperty(this, "handleMouseOver", event => {
|
|
63
|
+
if (!isTableInFocus(this.props.view)) {
|
|
64
|
+
return false;
|
|
65
|
+
}
|
|
66
|
+
return withCellTracking(handleMouseOver)(this.props.view, event);
|
|
67
|
+
});
|
|
62
68
|
_defineProperty(this, "handleMouseEnter", () => {
|
|
63
69
|
const node = this.props.getNode();
|
|
64
70
|
const pos = this.props.getPos();
|
|
@@ -359,6 +365,10 @@ class TableComponent extends React.Component {
|
|
|
359
365
|
var _this$table2;
|
|
360
366
|
this === null || this === void 0 ? void 0 : (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.addEventListener('mouseout', this.handleMouseOut);
|
|
361
367
|
}
|
|
368
|
+
if (fg('platform_editor_react_18_table_column_resize_hover')) {
|
|
369
|
+
var _this$table3;
|
|
370
|
+
this === null || this === void 0 ? void 0 : (_this$table3 = this.table) === null || _this$table3 === void 0 ? void 0 : _this$table3.addEventListener('mouseover', this.handleMouseOver);
|
|
371
|
+
}
|
|
362
372
|
const {
|
|
363
373
|
tableWithFixedColumnWidthsOption = false,
|
|
364
374
|
stickyScrollbar
|
|
@@ -440,12 +450,16 @@ class TableComponent extends React.Component {
|
|
|
440
450
|
window.removeEventListener('resize', this.handleWindowResizeDebounced);
|
|
441
451
|
}
|
|
442
452
|
if (fg('platform.editor.table.live-pages-sorting_4malx')) {
|
|
443
|
-
var _this$
|
|
444
|
-
this === null || this === void 0 ? void 0 : (_this$
|
|
453
|
+
var _this$table4;
|
|
454
|
+
this === null || this === void 0 ? void 0 : (_this$table4 = this.table) === null || _this$table4 === void 0 ? void 0 : _this$table4.removeEventListener('mouseenter', this.handleMouseEnter);
|
|
445
455
|
}
|
|
446
456
|
if (fg('editor_react_18_fix_table_delete_col_decorations')) {
|
|
447
|
-
var _this$
|
|
448
|
-
this === null || this === void 0 ? void 0 : (_this$
|
|
457
|
+
var _this$table5;
|
|
458
|
+
this === null || this === void 0 ? void 0 : (_this$table5 = this.table) === null || _this$table5 === void 0 ? void 0 : _this$table5.removeEventListener('mouseout', this.handleMouseOut);
|
|
459
|
+
}
|
|
460
|
+
if (fg('platform_editor_react_18_table_column_resize_hover')) {
|
|
461
|
+
var _this$table6;
|
|
462
|
+
this === null || this === void 0 ? void 0 : (_this$table6 = this.table) === null || _this$table6 === void 0 ? void 0 : _this$table6.removeEventListener('mouseover', this.handleMouseOver);
|
|
449
463
|
}
|
|
450
464
|
if (this.overflowShadowsObserver) {
|
|
451
465
|
this.overflowShadowsObserver.dispose();
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export default (mutation => {
|
|
2
|
+
const {
|
|
3
|
+
type,
|
|
4
|
+
target: {
|
|
5
|
+
nodeName,
|
|
6
|
+
firstChild
|
|
7
|
+
}
|
|
8
|
+
} = mutation;
|
|
9
|
+
if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'DIV' && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'TABLE') {
|
|
10
|
+
return false;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// ED-16668
|
|
14
|
+
// Do not remove this fixes an issue with windows firefox that relates to
|
|
15
|
+
// the addition of the shadow sentinels
|
|
16
|
+
if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'TABLE' && ((firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'COLGROUP' || (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'SPAN')) {
|
|
17
|
+
return false;
|
|
18
|
+
}
|
|
19
|
+
return true;
|
|
20
|
+
});
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
|
|
2
2
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
|
+
import ignoreMutationDelegate from './ignore-mutation-delegate';
|
|
3
4
|
// TODO: Clean up ED-23976
|
|
4
5
|
import { createTableView } from './table';
|
|
5
6
|
import TableCell from './TableCell';
|
|
@@ -35,7 +36,10 @@ export const lazyTableView = options => {
|
|
|
35
36
|
return withLazyLoading({
|
|
36
37
|
nodeName: 'table',
|
|
37
38
|
getNodeViewOptions: () => options,
|
|
38
|
-
loader
|
|
39
|
+
loader,
|
|
40
|
+
lazyNodeViewOptions: {
|
|
41
|
+
ignoreMutationDelegate
|
|
42
|
+
}
|
|
39
43
|
});
|
|
40
44
|
};
|
|
41
45
|
export const lazyTableCellView = options => {
|
|
@@ -15,6 +15,7 @@ import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizin
|
|
|
15
15
|
import { generateColgroup } from '../pm-plugins/table-resizing/utils';
|
|
16
16
|
import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
|
|
17
17
|
import { isTableNested } from '../utils';
|
|
18
|
+
import ignoreMutationDelegate from './ignore-mutation-delegate';
|
|
18
19
|
import TableComponent from './TableComponent';
|
|
19
20
|
import { TableComponentWithSharedState } from './TableComponentWithSharedState';
|
|
20
21
|
const tableAttributes = node => {
|
|
@@ -227,24 +228,7 @@ export default class TableView extends ReactNodeView {
|
|
|
227
228
|
});
|
|
228
229
|
}
|
|
229
230
|
ignoreMutation(mutation) {
|
|
230
|
-
|
|
231
|
-
type,
|
|
232
|
-
target: {
|
|
233
|
-
nodeName,
|
|
234
|
-
firstChild
|
|
235
|
-
}
|
|
236
|
-
} = mutation;
|
|
237
|
-
if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'DIV' && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'TABLE') {
|
|
238
|
-
return false;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
// ED-16668
|
|
242
|
-
// Do not remove this fixes an issue with windows firefox that relates to
|
|
243
|
-
// the addition of the shadow sentinels
|
|
244
|
-
if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'TABLE' && ((firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'COLGROUP' || (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'SPAN')) {
|
|
245
|
-
return false;
|
|
246
|
-
}
|
|
247
|
-
return true;
|
|
231
|
+
return ignoreMutationDelegate(mutation);
|
|
248
232
|
}
|
|
249
233
|
destroy() {
|
|
250
234
|
var _this$eventDispatcher;
|
|
@@ -277,7 +277,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
|
|
|
277
277
|
focus: handleFocus,
|
|
278
278
|
blur: handleBlur,
|
|
279
279
|
mousedown: withCellTracking(handleMouseDown),
|
|
280
|
-
mouseover: withCellTracking(whenTableInFocus(handleMouseOver)),
|
|
280
|
+
mouseover: fg('platform_editor_react_18_table_column_resize_hover') ? undefined : withCellTracking(whenTableInFocus(handleMouseOver)),
|
|
281
281
|
mouseleave: handleMouseLeave,
|
|
282
282
|
mouseout: fg('editor_react_18_fix_table_delete_col_decorations') ? undefined : whenTableInFocus(handleMouseOut),
|
|
283
283
|
mousemove: whenTableInFocus(handleMouseMove),
|
|
@@ -28,7 +28,7 @@ import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
|
|
|
28
28
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
29
29
|
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
|
|
30
30
|
import { autoSizeTable, clearHoverSelection } from '../commands';
|
|
31
|
-
import { handleMouseOut, isTableInFocus } from '../event-handlers';
|
|
31
|
+
import { handleMouseOut, handleMouseOver, isTableInFocus, withCellTracking } from '../event-handlers';
|
|
32
32
|
import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
|
|
33
33
|
import { getPluginState } from '../pm-plugins/plugin-factory';
|
|
34
34
|
import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
|
|
@@ -74,6 +74,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
74
74
|
}
|
|
75
75
|
return handleMouseOut(_this.props.view, event);
|
|
76
76
|
});
|
|
77
|
+
_defineProperty(_assertThisInitialized(_this), "handleMouseOver", function (event) {
|
|
78
|
+
if (!isTableInFocus(_this.props.view)) {
|
|
79
|
+
return false;
|
|
80
|
+
}
|
|
81
|
+
return withCellTracking(handleMouseOver)(_this.props.view, event);
|
|
82
|
+
});
|
|
77
83
|
_defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function () {
|
|
78
84
|
var node = _this.props.getNode();
|
|
79
85
|
var pos = _this.props.getPos();
|
|
@@ -368,6 +374,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
368
374
|
var _this$table2;
|
|
369
375
|
this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.addEventListener('mouseout', this.handleMouseOut);
|
|
370
376
|
}
|
|
377
|
+
if (fg('platform_editor_react_18_table_column_resize_hover')) {
|
|
378
|
+
var _this$table3;
|
|
379
|
+
this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseover', this.handleMouseOver);
|
|
380
|
+
}
|
|
371
381
|
var _getEditorFeatureFlag = getEditorFeatureFlags(),
|
|
372
382
|
_getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
|
|
373
383
|
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2,
|
|
@@ -449,12 +459,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
449
459
|
window.removeEventListener('resize', this.handleWindowResizeDebounced);
|
|
450
460
|
}
|
|
451
461
|
if (fg('platform.editor.table.live-pages-sorting_4malx')) {
|
|
452
|
-
var _this$
|
|
453
|
-
this === null || this === void 0 || (_this$
|
|
462
|
+
var _this$table4;
|
|
463
|
+
this === null || this === void 0 || (_this$table4 = this.table) === null || _this$table4 === void 0 || _this$table4.removeEventListener('mouseenter', this.handleMouseEnter);
|
|
454
464
|
}
|
|
455
465
|
if (fg('editor_react_18_fix_table_delete_col_decorations')) {
|
|
456
|
-
var _this$
|
|
457
|
-
this === null || this === void 0 || (_this$
|
|
466
|
+
var _this$table5;
|
|
467
|
+
this === null || this === void 0 || (_this$table5 = this.table) === null || _this$table5 === void 0 || _this$table5.removeEventListener('mouseout', this.handleMouseOut);
|
|
468
|
+
}
|
|
469
|
+
if (fg('platform_editor_react_18_table_column_resize_hover')) {
|
|
470
|
+
var _this$table6;
|
|
471
|
+
this === null || this === void 0 || (_this$table6 = this.table) === null || _this$table6 === void 0 || _this$table6.removeEventListener('mouseover', this.handleMouseOver);
|
|
458
472
|
}
|
|
459
473
|
if (this.overflowShadowsObserver) {
|
|
460
474
|
this.overflowShadowsObserver.dispose();
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export default (function (mutation) {
|
|
2
|
+
var type = mutation.type,
|
|
3
|
+
_mutation$target = mutation.target,
|
|
4
|
+
nodeName = _mutation$target.nodeName,
|
|
5
|
+
firstChild = _mutation$target.firstChild;
|
|
6
|
+
if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'DIV' && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'TABLE') {
|
|
7
|
+
return false;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
// ED-16668
|
|
11
|
+
// Do not remove this fixes an issue with windows firefox that relates to
|
|
12
|
+
// the addition of the shadow sentinels
|
|
13
|
+
if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'TABLE' && ((firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'COLGROUP' || (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'SPAN')) {
|
|
14
|
+
return false;
|
|
15
|
+
}
|
|
16
|
+
return true;
|
|
17
|
+
});
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
|
|
2
2
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
|
+
import ignoreMutationDelegate from './ignore-mutation-delegate';
|
|
3
4
|
// TODO: Clean up ED-23976
|
|
4
5
|
import { createTableView } from './table';
|
|
5
6
|
import TableCell from './TableCell';
|
|
@@ -35,7 +36,10 @@ export var lazyTableView = function lazyTableView(options) {
|
|
|
35
36
|
getNodeViewOptions: function getNodeViewOptions() {
|
|
36
37
|
return options;
|
|
37
38
|
},
|
|
38
|
-
loader: loader
|
|
39
|
+
loader: loader,
|
|
40
|
+
lazyNodeViewOptions: {
|
|
41
|
+
ignoreMutationDelegate: ignoreMutationDelegate
|
|
42
|
+
}
|
|
39
43
|
});
|
|
40
44
|
};
|
|
41
45
|
export var lazyTableCellView = function lazyTableCellView(options) {
|
|
@@ -26,6 +26,7 @@ import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizin
|
|
|
26
26
|
import { generateColgroup } from '../pm-plugins/table-resizing/utils';
|
|
27
27
|
import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
|
|
28
28
|
import { isTableNested } from '../utils';
|
|
29
|
+
import ignoreMutationDelegate from './ignore-mutation-delegate';
|
|
29
30
|
import TableComponent from './TableComponent';
|
|
30
31
|
import { TableComponentWithSharedState } from './TableComponentWithSharedState';
|
|
31
32
|
var tableAttributes = function tableAttributes(node) {
|
|
@@ -254,21 +255,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
254
255
|
}, {
|
|
255
256
|
key: "ignoreMutation",
|
|
256
257
|
value: function ignoreMutation(mutation) {
|
|
257
|
-
|
|
258
|
-
_mutation$target = mutation.target,
|
|
259
|
-
nodeName = _mutation$target.nodeName,
|
|
260
|
-
firstChild = _mutation$target.firstChild;
|
|
261
|
-
if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'DIV' && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'TABLE') {
|
|
262
|
-
return false;
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
// ED-16668
|
|
266
|
-
// Do not remove this fixes an issue with windows firefox that relates to
|
|
267
|
-
// the addition of the shadow sentinels
|
|
268
|
-
if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'TABLE' && ((firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'COLGROUP' || (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'SPAN')) {
|
|
269
|
-
return false;
|
|
270
|
-
}
|
|
271
|
-
return true;
|
|
258
|
+
return ignoreMutationDelegate(mutation);
|
|
272
259
|
}
|
|
273
260
|
}, {
|
|
274
261
|
key: "destroy",
|
|
@@ -272,7 +272,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
|
|
|
272
272
|
focus: handleFocus,
|
|
273
273
|
blur: handleBlur,
|
|
274
274
|
mousedown: withCellTracking(handleMouseDown),
|
|
275
|
-
mouseover: withCellTracking(whenTableInFocus(handleMouseOver)),
|
|
275
|
+
mouseover: fg('platform_editor_react_18_table_column_resize_hover') ? undefined : withCellTracking(whenTableInFocus(handleMouseOver)),
|
|
276
276
|
mouseleave: handleMouseLeave,
|
|
277
277
|
mouseout: fg('editor_react_18_fix_table_delete_col_decorations') ? undefined : whenTableInFocus(handleMouseOut),
|
|
278
278
|
mousemove: whenTableInFocus(handleMouseMove),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.25.1",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -28,14 +28,14 @@
|
|
|
28
28
|
"runReact18": false
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@atlaskit/adf-schema": "^40.
|
|
31
|
+
"@atlaskit/adf-schema": "^40.8.1",
|
|
32
32
|
"@atlaskit/button": "^19.1.0",
|
|
33
|
-
"@atlaskit/custom-steps": "^0.
|
|
34
|
-
"@atlaskit/editor-common": "^87.
|
|
33
|
+
"@atlaskit/custom-steps": "^0.7.0",
|
|
34
|
+
"@atlaskit/editor-common": "^87.6.0",
|
|
35
35
|
"@atlaskit/editor-palette": "1.6.0",
|
|
36
36
|
"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
|
|
37
|
-
"@atlaskit/editor-plugin-analytics": "^1.
|
|
38
|
-
"@atlaskit/editor-plugin-content-insertion": "^1.
|
|
37
|
+
"@atlaskit/editor-plugin-analytics": "^1.7.0",
|
|
38
|
+
"@atlaskit/editor-plugin-content-insertion": "^1.7.0",
|
|
39
39
|
"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
|
|
40
40
|
"@atlaskit/editor-plugin-guideline": "^1.2.0",
|
|
41
41
|
"@atlaskit/editor-plugin-selection": "^1.3.0",
|
|
@@ -43,13 +43,13 @@
|
|
|
43
43
|
"@atlaskit/editor-prosemirror": "5.0.1",
|
|
44
44
|
"@atlaskit/editor-shared-styles": "^2.13.0",
|
|
45
45
|
"@atlaskit/editor-tables": "^2.8.0",
|
|
46
|
-
"@atlaskit/icon": "^22.
|
|
46
|
+
"@atlaskit/icon": "^22.11.0",
|
|
47
47
|
"@atlaskit/menu": "^2.10.0",
|
|
48
48
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
49
|
-
"@atlaskit/pragmatic-drag-and-drop": "^1.
|
|
49
|
+
"@atlaskit/pragmatic-drag-and-drop": "^1.3.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": "^
|
|
52
|
+
"@atlaskit/primitives": "^12.0.0",
|
|
53
53
|
"@atlaskit/theme": "^12.11.0",
|
|
54
54
|
"@atlaskit/toggle": "^13.2.0",
|
|
55
55
|
"@atlaskit/tokens": "^1.57.0",
|
|
@@ -125,6 +125,9 @@
|
|
|
125
125
|
},
|
|
126
126
|
"platform_editor_announce_cell_options_hotkeys": {
|
|
127
127
|
"type": "boolean"
|
|
128
|
+
},
|
|
129
|
+
"platform_editor_react_18_table_column_resize_hover": {
|
|
130
|
+
"type": "boolean"
|
|
128
131
|
}
|
|
129
132
|
}
|
|
130
133
|
}
|
|
@@ -26,7 +26,12 @@ import type { CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
|
|
|
26
26
|
import { token } from '@atlaskit/tokens';
|
|
27
27
|
|
|
28
28
|
import { autoSizeTable, clearHoverSelection } from '../commands';
|
|
29
|
-
import {
|
|
29
|
+
import {
|
|
30
|
+
handleMouseOut,
|
|
31
|
+
handleMouseOver,
|
|
32
|
+
isTableInFocus,
|
|
33
|
+
withCellTracking,
|
|
34
|
+
} from '../event-handlers';
|
|
30
35
|
import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
|
|
31
36
|
import { getPluginState } from '../pm-plugins/plugin-factory';
|
|
32
37
|
import type { RowStickyState, StickyPluginState } from '../pm-plugins/sticky-headers';
|
|
@@ -194,6 +199,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
|
|
|
194
199
|
return handleMouseOut(this.props.view, event);
|
|
195
200
|
};
|
|
196
201
|
|
|
202
|
+
private handleMouseOver = (event: Event) => {
|
|
203
|
+
if (!isTableInFocus(this.props.view)) {
|
|
204
|
+
return false;
|
|
205
|
+
}
|
|
206
|
+
return withCellTracking(handleMouseOver)(this.props.view, event);
|
|
207
|
+
};
|
|
208
|
+
|
|
197
209
|
componentDidMount() {
|
|
198
210
|
const {
|
|
199
211
|
allowColumnResizing,
|
|
@@ -215,6 +227,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
|
|
|
215
227
|
if (fg('editor_react_18_fix_table_delete_col_decorations')) {
|
|
216
228
|
this?.table?.addEventListener('mouseout', this.handleMouseOut);
|
|
217
229
|
}
|
|
230
|
+
if (fg('platform_editor_react_18_table_column_resize_hover')) {
|
|
231
|
+
this?.table?.addEventListener('mouseover', this.handleMouseOver);
|
|
232
|
+
}
|
|
218
233
|
|
|
219
234
|
const { tableWithFixedColumnWidthsOption = false, stickyScrollbar } = getEditorFeatureFlags();
|
|
220
235
|
|
|
@@ -322,6 +337,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
|
|
|
322
337
|
if (fg('editor_react_18_fix_table_delete_col_decorations')) {
|
|
323
338
|
this?.table?.removeEventListener('mouseout', this.handleMouseOut);
|
|
324
339
|
}
|
|
340
|
+
if (fg('platform_editor_react_18_table_column_resize_hover')) {
|
|
341
|
+
this?.table?.removeEventListener('mouseover', this.handleMouseOver);
|
|
342
|
+
}
|
|
325
343
|
|
|
326
344
|
if (this.overflowShadowsObserver) {
|
|
327
345
|
this.overflowShadowsObserver.dispose();
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export default (mutation: MutationRecord | { type: 'selection'; target: Element }) => {
|
|
2
|
+
const {
|
|
3
|
+
type,
|
|
4
|
+
target: { nodeName, firstChild },
|
|
5
|
+
} = mutation;
|
|
6
|
+
|
|
7
|
+
if (
|
|
8
|
+
type === 'selection' &&
|
|
9
|
+
nodeName?.toUpperCase() === 'DIV' &&
|
|
10
|
+
firstChild?.nodeName.toUpperCase() === 'TABLE'
|
|
11
|
+
) {
|
|
12
|
+
return false;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// ED-16668
|
|
16
|
+
// Do not remove this fixes an issue with windows firefox that relates to
|
|
17
|
+
// the addition of the shadow sentinels
|
|
18
|
+
if (
|
|
19
|
+
type === 'selection' &&
|
|
20
|
+
nodeName?.toUpperCase() === 'TABLE' &&
|
|
21
|
+
(firstChild?.nodeName.toUpperCase() === 'COLGROUP' ||
|
|
22
|
+
firstChild?.nodeName.toUpperCase() === 'SPAN')
|
|
23
|
+
) {
|
|
24
|
+
return false;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
return true;
|
|
28
|
+
};
|
|
@@ -9,6 +9,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
9
9
|
|
|
10
10
|
import type { PluginInjectionAPI } from '../types';
|
|
11
11
|
|
|
12
|
+
import ignoreMutationDelegate from './ignore-mutation-delegate';
|
|
12
13
|
// TODO: Clean up ED-23976
|
|
13
14
|
import { createTableView } from './table';
|
|
14
15
|
import TableCell from './TableCell';
|
|
@@ -93,6 +94,9 @@ export const lazyTableView = (options: TableViewOptions) => {
|
|
|
93
94
|
nodeName: 'table',
|
|
94
95
|
getNodeViewOptions: () => options,
|
|
95
96
|
loader,
|
|
97
|
+
lazyNodeViewOptions: {
|
|
98
|
+
ignoreMutationDelegate,
|
|
99
|
+
},
|
|
96
100
|
});
|
|
97
101
|
};
|
|
98
102
|
|
package/src/nodeviews/table.tsx
CHANGED
|
@@ -31,6 +31,7 @@ import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
|
|
|
31
31
|
import type { PluginInjectionAPI } from '../types';
|
|
32
32
|
import { isTableNested } from '../utils';
|
|
33
33
|
|
|
34
|
+
import ignoreMutationDelegate from './ignore-mutation-delegate';
|
|
34
35
|
import TableComponent from './TableComponent';
|
|
35
36
|
import { TableComponentWithSharedState } from './TableComponentWithSharedState';
|
|
36
37
|
import type { Props } from './types';
|
|
@@ -315,32 +316,7 @@ export default class TableView extends ReactNodeView<Props> {
|
|
|
315
316
|
}
|
|
316
317
|
|
|
317
318
|
ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
|
|
318
|
-
|
|
319
|
-
type,
|
|
320
|
-
target: { nodeName, firstChild },
|
|
321
|
-
} = mutation;
|
|
322
|
-
|
|
323
|
-
if (
|
|
324
|
-
type === 'selection' &&
|
|
325
|
-
nodeName?.toUpperCase() === 'DIV' &&
|
|
326
|
-
firstChild?.nodeName.toUpperCase() === 'TABLE'
|
|
327
|
-
) {
|
|
328
|
-
return false;
|
|
329
|
-
}
|
|
330
|
-
|
|
331
|
-
// ED-16668
|
|
332
|
-
// Do not remove this fixes an issue with windows firefox that relates to
|
|
333
|
-
// the addition of the shadow sentinels
|
|
334
|
-
if (
|
|
335
|
-
type === 'selection' &&
|
|
336
|
-
nodeName?.toUpperCase() === 'TABLE' &&
|
|
337
|
-
(firstChild?.nodeName.toUpperCase() === 'COLGROUP' ||
|
|
338
|
-
firstChild?.nodeName.toUpperCase() === 'SPAN')
|
|
339
|
-
) {
|
|
340
|
-
return false;
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
return true;
|
|
319
|
+
return ignoreMutationDelegate(mutation);
|
|
344
320
|
}
|
|
345
321
|
|
|
346
322
|
destroy() {
|
package/src/pm-plugins/main.ts
CHANGED
|
@@ -371,7 +371,9 @@ export const createPlugin = (
|
|
|
371
371
|
focus: handleFocus,
|
|
372
372
|
blur: handleBlur,
|
|
373
373
|
mousedown: withCellTracking(handleMouseDown),
|
|
374
|
-
mouseover:
|
|
374
|
+
mouseover: fg('platform_editor_react_18_table_column_resize_hover')
|
|
375
|
+
? undefined
|
|
376
|
+
: withCellTracking(whenTableInFocus(handleMouseOver)),
|
|
375
377
|
mouseleave: handleMouseLeave,
|
|
376
378
|
mouseout: fg('editor_react_18_fix_table_delete_col_decorations')
|
|
377
379
|
? undefined
|