@atlaskit/editor-plugin-table 28.1.15 → 29.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +44 -0
- package/dist/cjs/nodeviews/TableComponentWithSharedState.js +10 -5
- package/dist/cjs/nodeviews/TableRow.js +73 -40
- package/dist/cjs/nodeviews/TableRowNativeStickyWithFallback.js +119 -86
- package/dist/cjs/nodeviews/table.js +3 -1
- package/dist/cjs/tablePlugin.js +3 -5
- package/dist/es2019/nodeviews/TableComponentWithSharedState.js +10 -5
- package/dist/es2019/nodeviews/TableRow.js +42 -8
- package/dist/es2019/nodeviews/TableRowNativeStickyWithFallback.js +42 -8
- package/dist/es2019/nodeviews/table.js +3 -1
- package/dist/es2019/tablePlugin.js +3 -5
- package/dist/esm/nodeviews/TableComponentWithSharedState.js +10 -5
- package/dist/esm/nodeviews/TableRow.js +73 -40
- package/dist/esm/nodeviews/TableRowNativeStickyWithFallback.js +119 -86
- package/dist/esm/nodeviews/table.js +3 -1
- package/dist/esm/tablePlugin.js +3 -5
- package/dist/types/nodeviews/TableRow.d.ts +1 -0
- package/dist/types/nodeviews/TableRowNativeStickyWithFallback.d.ts +1 -0
- package/package.json +18 -21
|
@@ -7,6 +7,7 @@ import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
|
|
|
7
7
|
import { tableMarginTop } from '@atlaskit/editor-common/styles';
|
|
8
8
|
import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
|
|
9
9
|
import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
|
|
10
|
+
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
10
11
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
11
12
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
12
13
|
import { INITIAL_STATIC_VIEWPORT_HEIGHT } from '../pm-plugins/editor-content-area-height';
|
|
@@ -27,7 +28,6 @@ const HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
|
|
|
27
28
|
const HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
|
|
28
29
|
export default class TableRowNativeStickyWithFallback extends TableNodeView {
|
|
29
30
|
constructor(node, view, getPos, eventDispatcher, api) {
|
|
30
|
-
var _api$limitedMode, _api$limitedMode$shar, _api$limitedMode$shar2;
|
|
31
31
|
super(node, view, getPos, eventDispatcher);
|
|
32
32
|
_defineProperty(this, "cleanup", () => {
|
|
33
33
|
var _this$onEditorContent;
|
|
@@ -104,10 +104,39 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
|
|
|
104
104
|
} = getPluginState(view.state);
|
|
105
105
|
this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
|
|
106
106
|
this.api = api;
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
107
|
+
|
|
108
|
+
// Sticky headers are the only thing limited mode turns off here, so there is nothing to read
|
|
109
|
+
// or subscribe to when they were never enabled for this editor.
|
|
110
|
+
if (isExperimentEnabled('platform_editor_dynamic_limited_mode')) {
|
|
111
|
+
var _api$limitedMode, _limitedMode$currentS;
|
|
112
|
+
const limitedMode = this.isStickyHeaderEnabled ? api === null || api === void 0 ? void 0 : (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 ? void 0 : _api$limitedMode.sharedState : undefined;
|
|
113
|
+
if (limitedMode !== null && limitedMode !== void 0 && (_limitedMode$currentS = limitedMode.currentState()) !== null && _limitedMode$currentS !== void 0 && _limitedMode$currentS.enabled) {
|
|
114
|
+
this.isStickyHeaderEnabled = false;
|
|
115
|
+
} else {
|
|
116
|
+
this.limitedModeUnsubscribe = limitedMode === null || limitedMode === void 0 ? void 0 : limitedMode.onChange(({
|
|
117
|
+
nextSharedState
|
|
118
|
+
}) => {
|
|
119
|
+
var _this$limitedModeUnsu;
|
|
120
|
+
if (!(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.enabled)) {
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
// Order matters: cleanup() short-circuits unless sticky headers are still marked enabled.
|
|
125
|
+
this.cleanup();
|
|
126
|
+
this.isStickyHeaderEnabled = false;
|
|
127
|
+
|
|
128
|
+
// Limited mode never turns back off, so this listener has done its job.
|
|
129
|
+
(_this$limitedModeUnsu = this.limitedModeUnsubscribe) === null || _this$limitedModeUnsu === void 0 ? void 0 : _this$limitedModeUnsu.call(this);
|
|
130
|
+
this.limitedModeUnsubscribe = undefined;
|
|
131
|
+
});
|
|
132
|
+
}
|
|
133
|
+
} else {
|
|
134
|
+
var _api$limitedMode2, _api$limitedMode2$sha, _api$limitedMode2$sha2;
|
|
135
|
+
if (api !== null && api !== void 0 && (_api$limitedMode2 = api.limitedMode) !== null && _api$limitedMode2 !== void 0 && (_api$limitedMode2$sha = _api$limitedMode2.sharedState.currentState()) !== null && _api$limitedMode2$sha !== void 0 && (_api$limitedMode2$sha2 = _api$limitedMode2$sha.limitedModePluginKey.getState(view.state)) !== null && _api$limitedMode2$sha2 !== void 0 && _api$limitedMode2$sha2.documentSizeBreachesThreshold) {
|
|
136
|
+
this.isStickyHeaderEnabled = false;
|
|
137
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
138
|
+
document.addEventListener('limited-mode-activated', this.cleanup);
|
|
139
|
+
}
|
|
111
140
|
}
|
|
112
141
|
const pos = this.getPos();
|
|
113
142
|
this.isInNestedTable = false;
|
|
@@ -225,9 +254,14 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
|
|
|
225
254
|
}
|
|
226
255
|
this.emitOff(true);
|
|
227
256
|
}
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
257
|
+
if (isExperimentEnabled('platform_editor_dynamic_limited_mode')) {
|
|
258
|
+
var _this$limitedModeUnsu2;
|
|
259
|
+
(_this$limitedModeUnsu2 = this.limitedModeUnsubscribe) === null || _this$limitedModeUnsu2 === void 0 ? void 0 : _this$limitedModeUnsu2.call(this);
|
|
260
|
+
this.limitedModeUnsubscribe = undefined;
|
|
261
|
+
} else {
|
|
262
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
263
|
+
document.removeEventListener('limited-mode-activated', this.cleanup);
|
|
264
|
+
}
|
|
231
265
|
if (this.tableContainerObserver) {
|
|
232
266
|
this.tableContainerObserver.disconnect();
|
|
233
267
|
}
|
|
@@ -241,8 +241,10 @@ export default class TableView extends ReactNodeView {
|
|
|
241
241
|
// Read limited mode from the nodeView's own `this.view.state` via the plugin key exposed on
|
|
242
242
|
// the (already-typed) shared state, NOT `currentState().enabled`: during initial EditorView
|
|
243
243
|
// construction the injection API's editor state is undefined, so `.enabled` reads a stale false.
|
|
244
|
+
//
|
|
245
|
+
// Reads the plugin's derived `enabled`, so this covers every reason limited mode can be on.
|
|
244
246
|
const limitedMode = (_this$reactComponentP9 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP9 === void 0 ? void 0 : _this$reactComponentP9.limitedMode;
|
|
245
|
-
const enabled = Boolean(limitedMode === null || limitedMode === void 0 ? void 0 : (_limitedMode$sharedSt = limitedMode.sharedState.currentState()) === null || _limitedMode$sharedSt === void 0 ? void 0 : (_limitedMode$sharedSt2 = _limitedMode$sharedSt.limitedModePluginKey) === null || _limitedMode$sharedSt2 === void 0 ? void 0 : (_limitedMode$sharedSt3 = _limitedMode$sharedSt2.getState(this.view.state)) === null || _limitedMode$sharedSt3 === void 0 ? void 0 : _limitedMode$sharedSt3.
|
|
247
|
+
const enabled = Boolean(limitedMode === null || limitedMode === void 0 ? void 0 : (_limitedMode$sharedSt = limitedMode.sharedState.currentState()) === null || _limitedMode$sharedSt === void 0 ? void 0 : (_limitedMode$sharedSt2 = _limitedMode$sharedSt.limitedModePluginKey) === null || _limitedMode$sharedSt2 === void 0 ? void 0 : (_limitedMode$sharedSt3 = _limitedMode$sharedSt2.getState(this.view.state)) === null || _limitedMode$sharedSt3 === void 0 ? void 0 : _limitedMode$sharedSt3.enabled);
|
|
246
248
|
const applied = applyContentVisibility(this.table, enabled, () => ({
|
|
247
249
|
// The `<table>` is content-sized (`display: table`), so it needs an explicit intrinsic
|
|
248
250
|
// width or it collapses to 0 wide while contained. `getTableContainerWidth` covers
|
|
@@ -453,11 +453,9 @@ const tablePlugin = ({
|
|
|
453
453
|
dispatchAnalyticsEvent(payload);
|
|
454
454
|
}
|
|
455
455
|
}
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
dispatchAnalyticsEvent(payloadHeight);
|
|
460
|
-
}
|
|
456
|
+
const payloadHeight = getHeightInfoPayload(editorViewRef.current);
|
|
457
|
+
if (payloadHeight) {
|
|
458
|
+
dispatchAnalyticsEvent(payloadHeight);
|
|
461
459
|
}
|
|
462
460
|
}
|
|
463
461
|
};
|
|
@@ -24,8 +24,8 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
|
|
|
24
24
|
allowTableAlignment = _ref.allowTableAlignment,
|
|
25
25
|
allowTableResizing = _ref.allowTableResizing,
|
|
26
26
|
allowFixedColumnWidthOption = _ref.allowFixedColumnWidthOption;
|
|
27
|
-
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['table', 'width', 'media', 'selection', 'editorViewMode', 'interaction'], function (states) {
|
|
28
|
-
var _states$tableState, _states$tableState2, _states$tableState3, _states$tableState4, _states$tableState5, _states$tableState6, _states$tableState7, _states$tableState8, _states$tableState9, _states$tableState0, _states$tableState1, _states$mediaState, _states$selectionStat, _states$editorViewMod, _states$widthState, _states$widthState2, _states$interactionSt;
|
|
27
|
+
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['table', 'width', 'media', 'selection', 'editorViewMode', 'interaction', 'limitedMode'], function (states) {
|
|
28
|
+
var _states$tableState, _states$tableState2, _states$tableState3, _states$tableState4, _states$tableState5, _states$tableState6, _states$tableState7, _states$tableState8, _states$tableState9, _states$tableState0, _states$tableState1, _states$mediaState, _states$selectionStat, _states$editorViewMod, _states$widthState, _states$widthState2, _states$interactionSt, _states$limitedModeSt;
|
|
29
29
|
return {
|
|
30
30
|
// tableState
|
|
31
31
|
isTableResizing: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.isTableResizing,
|
|
@@ -50,7 +50,10 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
|
|
|
50
50
|
width: (_states$widthState = states.widthState) === null || _states$widthState === void 0 ? void 0 : _states$widthState.width,
|
|
51
51
|
lineLength: (_states$widthState2 = states.widthState) === null || _states$widthState2 === void 0 ? void 0 : _states$widthState2.lineLength,
|
|
52
52
|
// interactionState
|
|
53
|
-
interaction: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState
|
|
53
|
+
interaction: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
|
|
54
|
+
// limitedModeState — selected (rather than read once) so sticky headers stop when limited
|
|
55
|
+
// mode latches mid-session, not only when it was already on as the table mounted.
|
|
56
|
+
limitedModeEnabled: (_states$limitedModeSt = states.limitedModeState) === null || _states$limitedModeSt === void 0 ? void 0 : _states$limitedModeSt.enabled
|
|
54
57
|
};
|
|
55
58
|
}),
|
|
56
59
|
isTableResizing = _useSharedPluginState.isTableResizing,
|
|
@@ -68,7 +71,8 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
|
|
|
68
71
|
lineLength = _useSharedPluginState.lineLength,
|
|
69
72
|
mode = _useSharedPluginState.mode,
|
|
70
73
|
selection = _useSharedPluginState.selection,
|
|
71
|
-
width = _useSharedPluginState.width
|
|
74
|
+
width = _useSharedPluginState.width,
|
|
75
|
+
limitedModeEnabled = _useSharedPluginState.limitedModeEnabled;
|
|
72
76
|
var isLivePageViewMode = mode === 'view';
|
|
73
77
|
|
|
74
78
|
/**
|
|
@@ -120,6 +124,7 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
|
|
|
120
124
|
hoveredCell: hoveredCell,
|
|
121
125
|
isTableHovered: isTableHovered,
|
|
122
126
|
isWholeTableInDanger: isWholeTableInDanger,
|
|
123
|
-
selection: selection
|
|
127
|
+
selection: selection,
|
|
128
|
+
limitedMode: limitedModeEnabled
|
|
124
129
|
});
|
|
125
130
|
};
|
|
@@ -12,6 +12,7 @@ import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
|
|
|
12
12
|
import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
|
|
13
13
|
import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
|
|
14
14
|
import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
|
|
15
|
+
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
15
16
|
import { fg } from '@atlaskit/platform-feature-flags/fg';
|
|
16
17
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
17
18
|
import { getPluginState } from '../pm-plugins/plugin-factory';
|
|
@@ -31,7 +32,6 @@ var HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
|
|
|
31
32
|
var HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
|
|
32
33
|
var TableRow = /*#__PURE__*/function (_TableNodeView) {
|
|
33
34
|
function TableRow(node, view, getPos, eventDispatcher, api) {
|
|
34
|
-
var _api$limitedMode;
|
|
35
35
|
var _this;
|
|
36
36
|
_classCallCheck(this, TableRow);
|
|
37
37
|
_this = _callSuper(this, TableRow, [node, view, getPos, eventDispatcher]);
|
|
@@ -87,10 +87,38 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
|
|
|
87
87
|
var _getPluginState = getPluginState(view.state),
|
|
88
88
|
pluginConfig = _getPluginState.pluginConfig;
|
|
89
89
|
_this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
90
|
+
|
|
91
|
+
// Sticky headers are the only thing limited mode turns off here, so there is nothing to read
|
|
92
|
+
// or subscribe to when they were never enabled for this editor.
|
|
93
|
+
if (isExperimentEnabled('platform_editor_dynamic_limited_mode')) {
|
|
94
|
+
var _api$limitedMode, _limitedMode$currentS;
|
|
95
|
+
var limitedMode = _this.isStickyHeaderEnabled ? api === null || api === void 0 || (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 ? void 0 : _api$limitedMode.sharedState : undefined;
|
|
96
|
+
if (limitedMode !== null && limitedMode !== void 0 && (_limitedMode$currentS = limitedMode.currentState()) !== null && _limitedMode$currentS !== void 0 && _limitedMode$currentS.enabled) {
|
|
97
|
+
_this.isStickyHeaderEnabled = false;
|
|
98
|
+
} else {
|
|
99
|
+
_this.limitedModeUnsubscribe = limitedMode === null || limitedMode === void 0 ? void 0 : limitedMode.onChange(function (_ref) {
|
|
100
|
+
var _this$limitedModeUnsu, _this2;
|
|
101
|
+
var nextSharedState = _ref.nextSharedState;
|
|
102
|
+
if (!(nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.enabled)) {
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
// Order matters: cleanup() short-circuits unless sticky headers are still marked enabled.
|
|
107
|
+
_this.cleanup();
|
|
108
|
+
_this.isStickyHeaderEnabled = false;
|
|
109
|
+
|
|
110
|
+
// Limited mode never turns back off, so this listener has done its job.
|
|
111
|
+
(_this$limitedModeUnsu = (_this2 = _this).limitedModeUnsubscribe) === null || _this$limitedModeUnsu === void 0 || _this$limitedModeUnsu.call(_this2);
|
|
112
|
+
_this.limitedModeUnsubscribe = undefined;
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
} else {
|
|
116
|
+
var _api$limitedMode2;
|
|
117
|
+
if (api !== null && api !== void 0 && (_api$limitedMode2 = api.limitedMode) !== null && _api$limitedMode2 !== void 0 && (_api$limitedMode2 = _api$limitedMode2.sharedState.currentState()) !== null && _api$limitedMode2 !== void 0 && (_api$limitedMode2 = _api$limitedMode2.limitedModePluginKey.getState(view.state)) !== null && _api$limitedMode2 !== void 0 && _api$limitedMode2.documentSizeBreachesThreshold) {
|
|
118
|
+
_this.isStickyHeaderEnabled = false;
|
|
119
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
120
|
+
document.addEventListener('limited-mode-activated', _this.cleanup);
|
|
121
|
+
}
|
|
94
122
|
}
|
|
95
123
|
var pos = _this.getPos();
|
|
96
124
|
_this.isInNestedTable = false;
|
|
@@ -188,9 +216,14 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
|
|
|
188
216
|
}
|
|
189
217
|
this.emitOff(true);
|
|
190
218
|
}
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
219
|
+
if (isExperimentEnabled('platform_editor_dynamic_limited_mode')) {
|
|
220
|
+
var _this$limitedModeUnsu2;
|
|
221
|
+
(_this$limitedModeUnsu2 = this.limitedModeUnsubscribe) === null || _this$limitedModeUnsu2 === void 0 || _this$limitedModeUnsu2.call(this);
|
|
222
|
+
this.limitedModeUnsubscribe = undefined;
|
|
223
|
+
} else {
|
|
224
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
225
|
+
document.removeEventListener('limited-mode-activated', this.cleanup);
|
|
226
|
+
}
|
|
194
227
|
if (this.tableContainerObserver) {
|
|
195
228
|
this.tableContainerObserver.disconnect();
|
|
196
229
|
}
|
|
@@ -285,7 +318,7 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
|
|
|
285
318
|
}, {
|
|
286
319
|
key: "initObservers",
|
|
287
320
|
value: function initObservers() {
|
|
288
|
-
var
|
|
321
|
+
var _this3 = this;
|
|
289
322
|
if (!this.dom || this.dom.dataset.isObserved) {
|
|
290
323
|
return;
|
|
291
324
|
}
|
|
@@ -304,7 +337,7 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
|
|
|
304
337
|
window.requestAnimationFrame(function () {
|
|
305
338
|
var getTableContainer = function getTableContainer() {
|
|
306
339
|
var _getTree;
|
|
307
|
-
return (_getTree = getTree(
|
|
340
|
+
return (_getTree = getTree(_this3.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(TableCssClassName.NODEVIEW_WRAPPER));
|
|
308
341
|
};
|
|
309
342
|
|
|
310
343
|
// we expect tree to be defined after animation frame
|
|
@@ -330,16 +363,16 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
|
|
|
330
363
|
return getSentinelTop() !== null && getSentinelBottom() !== null;
|
|
331
364
|
};
|
|
332
365
|
var observeStickySentinels = function observeStickySentinels() {
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
[
|
|
366
|
+
_this3.sentinels.top = getSentinelTop();
|
|
367
|
+
_this3.sentinels.bottom = getSentinelBottom();
|
|
368
|
+
[_this3.sentinels.top, _this3.sentinels.bottom].forEach(function (el) {
|
|
336
369
|
// skip if already observed for another row on this table
|
|
337
370
|
if (el && !el.dataset.isObserved) {
|
|
338
371
|
el.dataset.isObserved = 'true';
|
|
339
372
|
|
|
340
373
|
// Ignored via go/ees005
|
|
341
374
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
342
|
-
|
|
375
|
+
_this3.intersectionObserver.observe(el);
|
|
343
376
|
}
|
|
344
377
|
});
|
|
345
378
|
};
|
|
@@ -354,7 +387,7 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
|
|
|
354
387
|
// observe sentinels before they are in the DOM, use MutationObserver
|
|
355
388
|
// to wait for sentinels to be added to the parent Table node DOM
|
|
356
389
|
// then attach the IntersectionObserver
|
|
357
|
-
|
|
390
|
+
_this3.tableContainerObserver = new MutationObserver(function () {
|
|
358
391
|
// Check if the tableContainer is still connected to the DOM. It can become disconnected when the placholder
|
|
359
392
|
// prosemirror node is replaced with the fully rendered React node (see _handleTableRef).
|
|
360
393
|
|
|
@@ -362,14 +395,14 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
|
|
|
362
395
|
tableContainer = getTableContainer();
|
|
363
396
|
}
|
|
364
397
|
if (sentinelsInDom()) {
|
|
365
|
-
var
|
|
398
|
+
var _this3$tableContainer;
|
|
366
399
|
observeStickySentinels();
|
|
367
|
-
(
|
|
400
|
+
(_this3$tableContainer = _this3.tableContainerObserver) === null || _this3$tableContainer === void 0 || _this3$tableContainer.disconnect();
|
|
368
401
|
}
|
|
369
402
|
});
|
|
370
403
|
var mutatingNode = tableContainer;
|
|
371
|
-
if (mutatingNode &&
|
|
372
|
-
|
|
404
|
+
if (mutatingNode && _this3.tableContainerObserver) {
|
|
405
|
+
_this3.tableContainerObserver.observe(mutatingNode, {
|
|
373
406
|
subtree: true,
|
|
374
407
|
childList: true
|
|
375
408
|
});
|
|
@@ -384,32 +417,32 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
|
|
|
384
417
|
}, {
|
|
385
418
|
key: "createResizeObserver",
|
|
386
419
|
value: function createResizeObserver() {
|
|
387
|
-
var
|
|
420
|
+
var _this4 = this;
|
|
388
421
|
this.resizeObserver = new ResizeObserver(function (entries) {
|
|
389
|
-
var tree = getTree(
|
|
422
|
+
var tree = getTree(_this4.dom);
|
|
390
423
|
if (!tree) {
|
|
391
424
|
return;
|
|
392
425
|
}
|
|
393
426
|
var table = tree.table;
|
|
394
427
|
entries.forEach(function (entry) {
|
|
395
|
-
var
|
|
428
|
+
var _this4$editorScrollab;
|
|
396
429
|
// On resize of the parent scroll element we need to adjust the width
|
|
397
430
|
// of the sticky header
|
|
398
431
|
// Ignored via go/ees005
|
|
399
432
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
400
|
-
if (entry.target.className === ((
|
|
401
|
-
|
|
433
|
+
if (entry.target.className === ((_this4$editorScrollab = _this4.editorScrollableElement) === null || _this4$editorScrollab === void 0 ? void 0 : _this4$editorScrollab.className)) {
|
|
434
|
+
_this4.updateStickyHeaderWidth();
|
|
402
435
|
} else {
|
|
403
436
|
var newHeight = entry.contentRect ? entry.contentRect.height :
|
|
404
437
|
// Ignored via go/ees005
|
|
405
438
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
406
439
|
entry.target.offsetHeight;
|
|
407
|
-
if (
|
|
440
|
+
if (_this4.sentinels.bottom &&
|
|
408
441
|
// When the table header is sticky, it would be taller by a 1px (border-bottom),
|
|
409
442
|
// So we adding this check to allow a 1px difference.
|
|
410
|
-
Math.abs(newHeight - (
|
|
411
|
-
|
|
412
|
-
|
|
443
|
+
Math.abs(newHeight - (_this4.stickyRowHeight || 0)) > stickyHeaderBorderBottomWidth) {
|
|
444
|
+
_this4.stickyRowHeight = newHeight;
|
|
445
|
+
_this4.sentinels.bottom.style.bottom = "".concat(tableScrollbarOffset + stickyRowOffsetTop + newHeight, "px");
|
|
413
446
|
updateTableMargin(table);
|
|
414
447
|
}
|
|
415
448
|
}
|
|
@@ -419,13 +452,13 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
|
|
|
419
452
|
}, {
|
|
420
453
|
key: "createIntersectionObserver",
|
|
421
454
|
value: function createIntersectionObserver() {
|
|
422
|
-
var
|
|
455
|
+
var _this5 = this;
|
|
423
456
|
this.intersectionObserver = new IntersectionObserver(function (entries, _) {
|
|
424
|
-
var
|
|
457
|
+
var _this5$editorScrollab, _this5$editorScrollab2;
|
|
425
458
|
// IMPORTANT: please try and avoid using entry.rootBounds it's terribly inconsistent. For example; sometimes it may return
|
|
426
459
|
// 0 height. In safari it will multiply all values by the window scale factor, however chrome & firfox won't.
|
|
427
460
|
// This is why i just get the scroll view bounding rect here and use it, and fallback to the entry.rootBounds if needed.
|
|
428
|
-
var rootBounds = (
|
|
461
|
+
var rootBounds = (_this5$editorScrollab = _this5.editorScrollableElement) === null || _this5$editorScrollab === void 0 || (_this5$editorScrollab2 = _this5$editorScrollab.getBoundingClientRect) === null || _this5$editorScrollab2 === void 0 ? void 0 : _this5$editorScrollab2.call(_this5$editorScrollab);
|
|
429
462
|
entries.forEach(function (entry) {
|
|
430
463
|
var target = entry.target,
|
|
431
464
|
isIntersecting = entry.isIntersecting,
|
|
@@ -433,15 +466,15 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
|
|
|
433
466
|
// This observer only every looks at the top/bottom sentinels, we can assume if it's not one then it's the other.
|
|
434
467
|
var targetKey = target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_TOP) ? 'top' : 'bottom';
|
|
435
468
|
// Cache the latest sentinel information
|
|
436
|
-
|
|
469
|
+
_this5.sentinelData[targetKey] = {
|
|
437
470
|
isIntersecting: isIntersecting,
|
|
438
471
|
boundingClientRect: boundingClientRect,
|
|
439
472
|
rootBounds: rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds
|
|
440
473
|
};
|
|
441
474
|
// Keep the other sentinels rootBounds in sync with this latest one
|
|
442
|
-
|
|
475
|
+
_this5.sentinelData[targetKey === 'top' ? 'bottom' : targetKey].rootBounds = rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds;
|
|
443
476
|
});
|
|
444
|
-
|
|
477
|
+
_this5.refreshStickyState();
|
|
445
478
|
}, {
|
|
446
479
|
threshold: 0,
|
|
447
480
|
root: this.editorScrollableElement
|
|
@@ -647,12 +680,12 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
|
|
|
647
680
|
}, {
|
|
648
681
|
key: "refireIntersectionObservers",
|
|
649
682
|
value: function refireIntersectionObservers() {
|
|
650
|
-
var
|
|
683
|
+
var _this6 = this;
|
|
651
684
|
if (this.isSticky) {
|
|
652
685
|
[this.sentinels.top, this.sentinels.bottom].forEach(function (el) {
|
|
653
|
-
if (el &&
|
|
654
|
-
|
|
655
|
-
|
|
686
|
+
if (el && _this6.intersectionObserver) {
|
|
687
|
+
_this6.intersectionObserver.unobserve(el);
|
|
688
|
+
_this6.intersectionObserver.observe(el);
|
|
656
689
|
}
|
|
657
690
|
});
|
|
658
691
|
}
|
|
@@ -661,7 +694,7 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
|
|
|
661
694
|
key: "makeHeaderRowSticky",
|
|
662
695
|
value: function makeHeaderRowSticky(tree, scrollTop) {
|
|
663
696
|
var _tbody$firstChild,
|
|
664
|
-
|
|
697
|
+
_this7 = this;
|
|
665
698
|
// If header row height is more than 50% of viewport height don't do this
|
|
666
699
|
if (this.isSticky || this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2 || this.isInNestedTable) {
|
|
667
700
|
return;
|
|
@@ -700,7 +733,7 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
|
|
|
700
733
|
});
|
|
701
734
|
var fastScrollThresholdMs = 500;
|
|
702
735
|
setTimeout(function () {
|
|
703
|
-
|
|
736
|
+
_this7.refireIntersectionObservers();
|
|
704
737
|
}, fastScrollThresholdMs);
|
|
705
738
|
}
|
|
706
739
|
this.dom.style.top = "0px";
|