@atlaskit/editor-plugin-table 15.2.1 → 15.2.2
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/nodeviews/TableComponentLegacy.js +18 -34
- package/dist/cjs/nodeviews/TableComponentNext.js +19 -34
- package/dist/cjs/nodeviews/TableContainer.js +31 -215
- package/dist/cjs/nodeviews/TableResizer.js +3 -10
- package/dist/cjs/nodeviews/table.js +1 -2
- package/dist/cjs/nodeviews/toDOM.js +9 -27
- package/dist/cjs/pm-plugins/main.js +0 -31
- package/dist/cjs/pm-plugins/table-resizing/utils/resize-state.js +1 -2
- package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js +5 -8
- package/dist/es2019/nodeviews/TableComponentLegacy.js +9 -25
- package/dist/es2019/nodeviews/TableComponentNext.js +10 -25
- package/dist/es2019/nodeviews/TableContainer.js +9 -190
- package/dist/es2019/nodeviews/TableResizer.js +3 -10
- package/dist/es2019/nodeviews/table.js +1 -2
- package/dist/es2019/nodeviews/toDOM.js +9 -28
- package/dist/es2019/pm-plugins/main.js +1 -32
- package/dist/es2019/pm-plugins/table-resizing/utils/resize-state.js +1 -2
- package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js +2 -5
- package/dist/esm/nodeviews/TableComponentLegacy.js +18 -34
- package/dist/esm/nodeviews/TableComponentNext.js +19 -34
- package/dist/esm/nodeviews/TableContainer.js +31 -215
- package/dist/esm/nodeviews/TableResizer.js +3 -10
- package/dist/esm/nodeviews/table.js +1 -2
- package/dist/esm/nodeviews/toDOM.js +10 -28
- package/dist/esm/pm-plugins/main.js +1 -32
- package/dist/esm/pm-plugins/table-resizing/utils/resize-state.js +1 -2
- package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js +5 -8
- package/dist/types/nodeviews/TableContainer.d.ts +1 -3
- package/dist/types-ts4.5/nodeviews/TableContainer.d.ts +1 -3
- package/package.json +4 -4
|
@@ -414,15 +414,8 @@ export const TableResizer = ({
|
|
|
414
414
|
}, [editorView, getPos, node, isCommentEditor, widthToWidest, isToolbarAIFCEnabled, endMeasure, displayGapCursor, displayGuideline, updateWidth, scheduleResize, onResizeStop, pluginInjectionApi, attachAnalyticsEvent, tableRef, isTableScalingEnabled, shouldUseIncreasedScalingPercent, formatMessage]);
|
|
415
415
|
const handleTableSizeChangeOnKeypress = useCallback(step => {
|
|
416
416
|
const newWidth = width + step;
|
|
417
|
-
if (
|
|
418
|
-
|
|
419
|
-
return;
|
|
420
|
-
}
|
|
421
|
-
} else {
|
|
422
|
-
// maxWidth when platform_editor_tables_scaling_css off is always a number
|
|
423
|
-
if (newWidth > maxWidth || newWidth < resizerMinWidth) {
|
|
424
|
-
return;
|
|
425
|
-
}
|
|
417
|
+
if (newWidth < resizerMinWidth) {
|
|
418
|
+
return;
|
|
426
419
|
}
|
|
427
420
|
handleResizeStop({
|
|
428
421
|
width: width,
|
|
@@ -433,7 +426,7 @@ export const TableResizer = ({
|
|
|
433
426
|
width: step,
|
|
434
427
|
height: 0
|
|
435
428
|
});
|
|
436
|
-
}, [width, handleResizeStop,
|
|
429
|
+
}, [width, handleResizeStop, resizerMinWidth]);
|
|
437
430
|
const handleEscape = useCallback(() => {
|
|
438
431
|
editorView === null || editorView === void 0 ? void 0 : editorView.focus();
|
|
439
432
|
}, [editorView]);
|
|
@@ -6,7 +6,6 @@ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
|
6
6
|
import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
|
|
7
7
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
8
8
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
10
9
|
import { pluginConfig as getPluginConfig } from '../pm-plugins/create-plugin-config';
|
|
11
10
|
import { getPluginState } from '../pm-plugins/plugin-factory';
|
|
12
11
|
import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
|
|
@@ -121,7 +120,7 @@ export default class TableView extends ReactNodeView {
|
|
|
121
120
|
if (this.view.state.selection.visible) {
|
|
122
121
|
selectionBookmark = this.view.state.selection.getBookmark();
|
|
123
122
|
}
|
|
124
|
-
if (this.dom
|
|
123
|
+
if (this.dom) {
|
|
125
124
|
this.dom.setAttribute('data-ssr-placeholder', `table-nodeview-${this.node.attrs.localId}`);
|
|
126
125
|
this.dom.setAttribute('data-ssr-placeholder-replace', `table-nodeview-${this.node.attrs.localId}`);
|
|
127
126
|
}
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import kebabCase from 'lodash/kebabCase';
|
|
2
2
|
import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
|
|
3
3
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
4
|
-
import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
|
|
5
4
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
6
|
-
import {
|
|
7
|
-
import { generateColgroup, generateColgroupFromNode, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
|
|
5
|
+
import { generateColgroupFromNode, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
|
|
8
6
|
import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
|
|
9
7
|
import { getTableResizerContainerMaxWidthInCSS, getTableResizerContainerForFullPageWidthInCSS, getTableResizerItemWidthInCSS } from '../pm-plugins/table-resizing/utils/misc';
|
|
10
8
|
import { getAlignmentStyle } from './table-container-styles';
|
|
@@ -13,19 +11,8 @@ export const tableNodeSpecWithFixedToDOM = config => {
|
|
|
13
11
|
return {
|
|
14
12
|
...tableNode,
|
|
15
13
|
toDOM: node => {
|
|
16
|
-
var _node$attrs$width;
|
|
17
|
-
const gutterPadding = () => {
|
|
18
|
-
if (editorExperiment('platform_editor_preview_panel_responsiveness', true, {
|
|
19
|
-
exposure: true
|
|
20
|
-
})) {
|
|
21
|
-
return 'calc(var(--ak-editor--large-gutter-padding) * 2)';
|
|
22
|
-
} else {
|
|
23
|
-
return `${akEditorGutterPaddingDynamic() * 2}px`;
|
|
24
|
-
}
|
|
25
|
-
};
|
|
26
14
|
const alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout)).map(([k, v]) => `${kebabCase(k)}: ${kebabCase(v)}`).join(';');
|
|
27
15
|
const tableMinWidth = getResizerMinWidth(node);
|
|
28
|
-
const tableWidthAttribute = node.attrs.width ? `${node.attrs.width}px` : `100%`;
|
|
29
16
|
const isFullPageEditor = !config.isChromelessEditor && !config.isCommentEditor;
|
|
30
17
|
const attrs = {
|
|
31
18
|
'data-number-column': node.attrs.isNumberColumnEnabled,
|
|
@@ -33,22 +20,16 @@ export const tableNodeSpecWithFixedToDOM = config => {
|
|
|
33
20
|
'data-autosize': node.attrs.__autoSize,
|
|
34
21
|
'data-table-local-id': node.attrs.localId,
|
|
35
22
|
'data-table-width': node.attrs.width,
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
'data-ssr-placeholder-replace': `table-${node.attrs.localId}`
|
|
39
|
-
})
|
|
23
|
+
'data-ssr-placeholder': `table-${node.attrs.localId}`,
|
|
24
|
+
'data-ssr-placeholder-replace': `table-${node.attrs.localId}`
|
|
40
25
|
};
|
|
41
26
|
|
|
42
27
|
// This would be used for table scaling in colgroup CSS
|
|
43
28
|
// cqw, or px is well supported
|
|
44
|
-
const resizableTableWidth =
|
|
29
|
+
const resizableTableWidth = isFullPageEditor ? getTableResizerContainerForFullPageWidthInCSS(node, config.isTableScalingEnabled) : `calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))`;
|
|
45
30
|
let colgroup = '';
|
|
46
31
|
if (config.allowColumnResizing) {
|
|
47
|
-
|
|
48
|
-
colgroup = ['colgroup', {}, ...generateColgroupFromNode(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)];
|
|
49
|
-
} else {
|
|
50
|
-
colgroup = ['colgroup', {}, ...generateColgroup(node)];
|
|
51
|
-
}
|
|
32
|
+
colgroup = ['colgroup', {}, ...generateColgroupFromNode(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)];
|
|
52
33
|
}
|
|
53
34
|
|
|
54
35
|
// For Chromeless editor, and nested tables in full page editor
|
|
@@ -97,7 +78,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
|
|
|
97
78
|
'data-testid': 'sticky-sentinel-bottom'
|
|
98
79
|
}]];
|
|
99
80
|
const tableContainerDiv = expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant1') || expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant2') || expValEquals('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant3') ? tableContainerDivNext : tableContainerDivLegacy;
|
|
100
|
-
if (!config.tableResizingEnabled ||
|
|
81
|
+
if (!config.tableResizingEnabled || config.isNested) {
|
|
101
82
|
return ['div', {
|
|
102
83
|
class: 'tableView-content-wrap',
|
|
103
84
|
'data-prosemirror-initial-toDOM-render': 'true',
|
|
@@ -114,7 +95,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
|
|
|
114
95
|
style: convertToInlineCss({
|
|
115
96
|
'--ak-editor-table-gutter-padding': config.isTableScalingEnabled ? 'calc(var(--ak-editor--large-gutter-padding) * 2)' : 'calc(var(--ak-editor--large-gutter-padding) * 2 - var(--ak-editor-resizer-handle-spacing))',
|
|
116
97
|
'--ak-editor-table-width': resizableTableWidth,
|
|
117
|
-
width:
|
|
98
|
+
width: `var(--ak-editor-table-width)`
|
|
118
99
|
})
|
|
119
100
|
}, ['div', {
|
|
120
101
|
class: 'resizer-item display-handle',
|
|
@@ -125,8 +106,8 @@ export const tableNodeSpecWithFixedToDOM = config => {
|
|
|
125
106
|
'--ak-editor-table-max-width': `${TABLE_MAX_WIDTH}px`,
|
|
126
107
|
'--ak-editor-table-min-width': `${tableMinWidth}px`,
|
|
127
108
|
minWidth: 'var(--ak-editor-table-min-width)',
|
|
128
|
-
maxWidth:
|
|
129
|
-
width:
|
|
109
|
+
maxWidth: getTableResizerContainerMaxWidthInCSS(config.isCommentEditor, config.isChromelessEditor, config.isTableScalingEnabled),
|
|
110
|
+
width: getTableResizerItemWidthInCSS(node, config.isCommentEditor, config.isChromelessEditor)
|
|
130
111
|
})
|
|
131
112
|
}, ['span', {
|
|
132
113
|
class: 'resizer-hover-zone'
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
2
|
-
import { insideTable
|
|
2
|
+
import { insideTable } from '@atlaskit/editor-common/core-utils';
|
|
3
3
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
4
4
|
import { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenLayoutNodes, transformSliceToRemoveOpenMultiBodiedExtension, transformSliceToRemoveOpenNestedExpand } from '@atlaskit/editor-common/transforms';
|
|
5
5
|
import { browser, closestElement } from '@atlaskit/editor-common/utils';
|
|
@@ -7,7 +7,6 @@ import { findParentDomRefOfType, findParentNodeOfType } from '@atlaskit/editor-p
|
|
|
7
7
|
import { TableMap } from '@atlaskit/editor-tables';
|
|
8
8
|
import { findTable } from '@atlaskit/editor-tables/utils';
|
|
9
9
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
11
10
|
import { tableCellView, tableHeaderView, tableRowView, tableView } from '../nodeviews/table-node-views';
|
|
12
11
|
import { pluginKey as decorationsPluginKey } from '../pm-plugins/decorations/plugin';
|
|
13
12
|
import { TableCssClassName as ClassName } from '../types';
|
|
@@ -52,36 +51,6 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
|
|
|
52
51
|
return editorView.state;
|
|
53
52
|
};
|
|
54
53
|
const getNodeView = () => {
|
|
55
|
-
// Because the layout shift issues has been fixed under experiment platform_editor_tables_scaling_css, so still want to load nodeview on SSR if experiment is enabled
|
|
56
|
-
if (expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
|
|
57
|
-
return {
|
|
58
|
-
table: tableView({
|
|
59
|
-
portalProviderAPI,
|
|
60
|
-
eventDispatcher,
|
|
61
|
-
getEditorContainerWidth,
|
|
62
|
-
getEditorFeatureFlags,
|
|
63
|
-
dispatchAnalyticsEvent,
|
|
64
|
-
pluginInjectionApi,
|
|
65
|
-
isCommentEditor,
|
|
66
|
-
isChromelessEditor
|
|
67
|
-
}),
|
|
68
|
-
tableRow: tableRowView({
|
|
69
|
-
eventDispatcher,
|
|
70
|
-
pluginInjectionApi
|
|
71
|
-
}),
|
|
72
|
-
tableCell: tableCellView({
|
|
73
|
-
eventDispatcher,
|
|
74
|
-
pluginInjectionApi
|
|
75
|
-
}),
|
|
76
|
-
tableHeader: tableHeaderView({
|
|
77
|
-
eventDispatcher,
|
|
78
|
-
pluginInjectionApi
|
|
79
|
-
})
|
|
80
|
-
};
|
|
81
|
-
}
|
|
82
|
-
if (isSSR()) {
|
|
83
|
-
return undefined;
|
|
84
|
-
}
|
|
85
54
|
return {
|
|
86
55
|
table: tableView({
|
|
87
56
|
portalProviderAPI,
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
|
|
2
2
|
import { tableCellMinWidth, tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
|
|
3
3
|
import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
|
|
4
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
5
4
|
import { getSelectedTableInfo } from '../../utils/analytics';
|
|
6
5
|
import { getColWidthFix, hasTableBeenResized, insertColgroupFromNode } from './colgroup';
|
|
7
6
|
import { getCellsRefsInColumn, getColumnStateFromDOM } from './column-state';
|
|
@@ -80,7 +79,7 @@ export const getResizeState = ({
|
|
|
80
79
|
|
|
81
80
|
// updates Colgroup DOM node with new widths
|
|
82
81
|
export const updateColgroup = (state, tableRef, tableNode, isTableScalingEnabled, scalePercent) => {
|
|
83
|
-
const cols =
|
|
82
|
+
const cols = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelectorAll(':scope > colgroup > col');
|
|
84
83
|
const columnsCount = cols === null || cols === void 0 ? void 0 : cols.length;
|
|
85
84
|
/**
|
|
86
85
|
updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
|
|
@@ -4,7 +4,6 @@ import classnames from 'classnames';
|
|
|
4
4
|
import { isSSR } from '@atlaskit/editor-common/core-utils';
|
|
5
5
|
import { Selection } from '@atlaskit/editor-prosemirror/state';
|
|
6
6
|
import { isRowSelected } from '@atlaskit/editor-tables/utils';
|
|
7
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
8
7
|
import { clearHoverSelection } from '../../../pm-plugins/commands';
|
|
9
8
|
import { getRowHeights } from '../../../pm-plugins/utils/row-controls';
|
|
10
9
|
import { TableCssClassName as ClassName } from '../../../types';
|
|
@@ -96,7 +95,7 @@ export default class NumberColumn extends Component {
|
|
|
96
95
|
updateCellHoverLocation
|
|
97
96
|
} = this.props;
|
|
98
97
|
const rowHeights = getRowHeights(tableRef);
|
|
99
|
-
if (isSSR()
|
|
98
|
+
if (isSSR()) {
|
|
100
99
|
return /*#__PURE__*/React.createElement("div", {
|
|
101
100
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
102
101
|
className: ClassName.NUMBERED_COLUMN,
|
|
@@ -122,9 +121,7 @@ export default class NumberColumn extends Component {
|
|
|
122
121
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
123
122
|
isDragAndDropEnabled && tableActive ? `1px solid ${tableBorderColor}` : undefined,
|
|
124
123
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
125
|
-
|
|
126
|
-
visibility: 'visible'
|
|
127
|
-
} : {})
|
|
124
|
+
visibility: 'visible'
|
|
128
125
|
},
|
|
129
126
|
contentEditable: false
|
|
130
127
|
}, rowHeights.map((rowHeight, index) => isDragAndDropEnabled ?
|
|
@@ -357,7 +357,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
357
357
|
isNumberOfColumnsChanged = params.isNumberOfColumnsChanged,
|
|
358
358
|
isFullWidthModeAndLineLengthChanged = params.isFullWidthModeAndLineLengthChanged;
|
|
359
359
|
var isFullPageEditor = !((_this$props$options = _this.props.options) !== null && _this$props$options !== void 0 && _this$props$options.isCommentEditor) && !((_this$props$options2 = _this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isChromelessEditor);
|
|
360
|
-
if (
|
|
360
|
+
if (isFullPageEditor) {
|
|
361
361
|
return !!isWindowResized || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
|
|
362
362
|
}
|
|
363
363
|
return isWidthChanged || isTableWidthChanged || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
|
|
@@ -441,10 +441,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
441
441
|
}
|
|
442
442
|
}
|
|
443
443
|
});
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
window.addEventListener('resize', this.handleWindowResizeNewDebounced);
|
|
447
|
-
}
|
|
444
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
445
|
+
window.addEventListener('resize', this.handleWindowResizeNewDebounced);
|
|
448
446
|
}
|
|
449
447
|
}
|
|
450
448
|
}, {
|
|
@@ -459,9 +457,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
459
457
|
allowTableResizing = _this$props7.allowTableResizing,
|
|
460
458
|
eventDispatcher = _this$props7.eventDispatcher,
|
|
461
459
|
isDragAndDropEnabled = _this$props7.isDragAndDropEnabled,
|
|
462
|
-
getNode = _this$props7.getNode
|
|
463
|
-
getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
|
|
464
|
-
isTableScalingEnabled = _this$props7.isTableScalingEnabled;
|
|
460
|
+
getNode = _this$props7.getNode;
|
|
465
461
|
|
|
466
462
|
// Ignored via go/ees005
|
|
467
463
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
@@ -474,17 +470,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
474
470
|
// Ignored via go/ees005
|
|
475
471
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
476
472
|
this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseover', this.handleMouseOver);
|
|
477
|
-
var _getEditorFeatureFlag = getEditorFeatureFlags(),
|
|
478
|
-
_getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
|
|
479
|
-
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
|
|
480
|
-
if (!expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
|
|
481
|
-
if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
|
|
482
|
-
this.handleColgroupUpdates(true);
|
|
483
|
-
}
|
|
484
|
-
if (isTableScalingEnabled && tableWithFixedColumnWidthsOption && getNode().attrs.displayMode !== 'fixed') {
|
|
485
|
-
this.handleColgroupUpdates(true);
|
|
486
|
-
}
|
|
487
|
-
}
|
|
488
473
|
if (this.wrapper) {
|
|
489
474
|
this.wrapperReisizeObserver = new ResizeObserver(function (entries) {
|
|
490
475
|
var _iterator2 = _createForOfIteratorHelper(entries),
|
|
@@ -589,10 +574,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
589
574
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
590
575
|
window.removeEventListener('resize', this.handleWindowResizeDebounced);
|
|
591
576
|
}
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
}
|
|
577
|
+
|
|
578
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
579
|
+
window.removeEventListener('resize', this.handleWindowResizeNewDebounced);
|
|
596
580
|
|
|
597
581
|
// Ignored via go/ees005
|
|
598
582
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
@@ -682,7 +666,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
682
666
|
containerLineLength = containerWidth.lineLength;
|
|
683
667
|
var isLineLengthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.lineLength) !== containerLineLength;
|
|
684
668
|
var isFullWidthModeAndLineLengthChanged = this.updateColGroupFromFullWidthChange && isLineLengthChanged && fg('platform_editor_table_overflow_in_full_width_fix');
|
|
685
|
-
var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged ||
|
|
669
|
+
var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || this.state.windowResized;
|
|
686
670
|
if (force || maybeScale || isFullWidthModeAndLineLengthChanged) {
|
|
687
671
|
var _this$containerWidth2, _this$props$options3, _this$props$options4, _this$props$options5;
|
|
688
672
|
var isWidthChanged = ((_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width) !== containerWidthValue;
|
|
@@ -701,9 +685,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
701
685
|
isNumberOfColumnsChanged: isNumberOfColumnsChanged,
|
|
702
686
|
isFullWidthModeAndLineLengthChanged: isFullWidthModeAndLineLengthChanged
|
|
703
687
|
});
|
|
704
|
-
var
|
|
705
|
-
|
|
706
|
-
tableWithFixedColumnWidthsOption =
|
|
688
|
+
var _getEditorFeatureFlag = getEditorFeatureFlags(),
|
|
689
|
+
_getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
|
|
690
|
+
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
|
|
707
691
|
var isTableScalingWithFixedColumnWidthsOptionEnabled = !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
|
|
708
692
|
var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || !!((_this$props$options4 = this.props.options) !== null && _this$props$options4 !== void 0 && _this$props$options4.isTableScalingEnabled) && !!((_this$props$options5 = this.props.options) !== null && _this$props$options5 !== void 0 && _this$props$options5.isCommentEditor);
|
|
709
693
|
if (force || !isResizing && shouldUpdateColgroup) {
|
|
@@ -787,9 +771,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
787
771
|
var table = findTable(view.state.selection);
|
|
788
772
|
var shouldScale = false;
|
|
789
773
|
var shouldHandleColgroupUpdates = false;
|
|
790
|
-
var
|
|
791
|
-
|
|
792
|
-
tableWithFixedColumnWidthsOption =
|
|
774
|
+
var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
|
|
775
|
+
_getEditorFeatureFlag4 = _getEditorFeatureFlag3.tableWithFixedColumnWidthsOption,
|
|
776
|
+
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag4 === void 0 ? false : _getEditorFeatureFlag4;
|
|
793
777
|
if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
|
|
794
778
|
shouldScale = true;
|
|
795
779
|
shouldHandleColgroupUpdates = true;
|
|
@@ -800,7 +784,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
800
784
|
shouldScale = true;
|
|
801
785
|
shouldHandleColgroupUpdates = true;
|
|
802
786
|
}
|
|
803
|
-
if (
|
|
787
|
+
if (this.state.windowResized) {
|
|
804
788
|
shouldHandleColgroupUpdates = true;
|
|
805
789
|
}
|
|
806
790
|
if (shouldHandleColgroupUpdates) {
|
|
@@ -1015,9 +999,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
1015
999
|
var topShadowPadding = isDragAndDropEnabled ? 0 : shadowPadding;
|
|
1016
1000
|
var topOffset = 0;
|
|
1017
1001
|
var topStickyShadowPosition = !this.props.limitedMode && this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
|
|
1018
|
-
var
|
|
1019
|
-
|
|
1020
|
-
tableWithFixedColumnWidthsOption =
|
|
1002
|
+
var _getEditorFeatureFlag5 = getEditorFeatureFlags(),
|
|
1003
|
+
_getEditorFeatureFlag6 = _getEditorFeatureFlag5.tableWithFixedColumnWidthsOption,
|
|
1004
|
+
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag6 === void 0 ? false : _getEditorFeatureFlag6;
|
|
1021
1005
|
var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption || !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor));
|
|
1022
1006
|
return /*#__PURE__*/React.createElement(TableContainer
|
|
1023
1007
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
@@ -300,7 +300,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
300
300
|
isNumberOfColumnsChanged = params.isNumberOfColumnsChanged,
|
|
301
301
|
isFullWidthModeAndLineLengthChanged = params.isFullWidthModeAndLineLengthChanged;
|
|
302
302
|
var isFullPageEditor = !((_this$props$options = _this.props.options) !== null && _this$props$options !== void 0 && _this$props$options.isCommentEditor) && !((_this$props$options2 = _this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isChromelessEditor);
|
|
303
|
-
if (
|
|
303
|
+
if (isFullPageEditor) {
|
|
304
304
|
return !!isWindowResized || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
|
|
305
305
|
}
|
|
306
306
|
return isWidthChanged || isTableWidthChanged || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
|
|
@@ -382,10 +382,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
382
382
|
}
|
|
383
383
|
}
|
|
384
384
|
});
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
}
|
|
385
|
+
|
|
386
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
387
|
+
window.addEventListener('resize', this.handleWindowResizeNewDebounced);
|
|
389
388
|
}
|
|
390
389
|
}
|
|
391
390
|
}, {
|
|
@@ -400,9 +399,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
400
399
|
allowTableResizing = _this$props6.allowTableResizing,
|
|
401
400
|
eventDispatcher = _this$props6.eventDispatcher,
|
|
402
401
|
isDragAndDropEnabled = _this$props6.isDragAndDropEnabled,
|
|
403
|
-
getNode = _this$props6.getNode
|
|
404
|
-
getEditorFeatureFlags = _this$props6.getEditorFeatureFlags,
|
|
405
|
-
isTableScalingEnabled = _this$props6.isTableScalingEnabled;
|
|
402
|
+
getNode = _this$props6.getNode;
|
|
406
403
|
|
|
407
404
|
// Ignored via go/ees005
|
|
408
405
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
@@ -415,17 +412,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
415
412
|
// Ignored via go/ees005
|
|
416
413
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
417
414
|
this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseover', this.handleMouseOver);
|
|
418
|
-
var _getEditorFeatureFlag = getEditorFeatureFlags(),
|
|
419
|
-
_getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
|
|
420
|
-
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
|
|
421
|
-
if (!expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
|
|
422
|
-
if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
|
|
423
|
-
this.handleColgroupUpdates(true);
|
|
424
|
-
}
|
|
425
|
-
if (isTableScalingEnabled && tableWithFixedColumnWidthsOption && getNode().attrs.displayMode !== 'fixed') {
|
|
426
|
-
this.handleColgroupUpdates(true);
|
|
427
|
-
}
|
|
428
|
-
}
|
|
429
415
|
if (this.wrapper) {
|
|
430
416
|
this.wrapperReisizeObserver = new ResizeObserver(function (entries) {
|
|
431
417
|
var _iterator2 = _createForOfIteratorHelper(entries),
|
|
@@ -526,10 +512,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
526
512
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
527
513
|
window.removeEventListener('resize', this.handleWindowResizeDebounced);
|
|
528
514
|
}
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
}
|
|
515
|
+
|
|
516
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
517
|
+
window.removeEventListener('resize', this.handleWindowResizeNewDebounced);
|
|
533
518
|
|
|
534
519
|
// Ignored via go/ees005
|
|
535
520
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
@@ -616,7 +601,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
616
601
|
containerLineLength = containerWidth.lineLength;
|
|
617
602
|
var isLineLengthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.lineLength) !== containerLineLength;
|
|
618
603
|
var isFullWidthModeAndLineLengthChanged = this.updateColGroupFromFullWidthChange && isLineLengthChanged && fg('platform_editor_table_overflow_in_full_width_fix');
|
|
619
|
-
var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged ||
|
|
604
|
+
var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || this.state.windowResized;
|
|
620
605
|
if (force || maybeScale || isFullWidthModeAndLineLengthChanged) {
|
|
621
606
|
var _this$containerWidth2, _this$props$options3, _this$props$options4, _this$props$options5;
|
|
622
607
|
var isWidthChanged = ((_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width) !== containerWidthValue;
|
|
@@ -635,9 +620,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
635
620
|
isNumberOfColumnsChanged: isNumberOfColumnsChanged,
|
|
636
621
|
isFullWidthModeAndLineLengthChanged: isFullWidthModeAndLineLengthChanged
|
|
637
622
|
});
|
|
638
|
-
var
|
|
639
|
-
|
|
640
|
-
tableWithFixedColumnWidthsOption =
|
|
623
|
+
var _getEditorFeatureFlag = getEditorFeatureFlags(),
|
|
624
|
+
_getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
|
|
625
|
+
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
|
|
641
626
|
var isTableScalingWithFixedColumnWidthsOptionEnabled = !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
|
|
642
627
|
var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || !!((_this$props$options4 = this.props.options) !== null && _this$props$options4 !== void 0 && _this$props$options4.isTableScalingEnabled) && !!((_this$props$options5 = this.props.options) !== null && _this$props$options5 !== void 0 && _this$props$options5.isCommentEditor);
|
|
643
628
|
if (force || !isResizing && shouldUpdateColgroup) {
|
|
@@ -718,9 +703,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
718
703
|
var table = findTable(view.state.selection);
|
|
719
704
|
var shouldScale = false;
|
|
720
705
|
var shouldHandleColgroupUpdates = false;
|
|
721
|
-
var
|
|
722
|
-
|
|
723
|
-
tableWithFixedColumnWidthsOption =
|
|
706
|
+
var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
|
|
707
|
+
_getEditorFeatureFlag4 = _getEditorFeatureFlag3.tableWithFixedColumnWidthsOption,
|
|
708
|
+
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag4 === void 0 ? false : _getEditorFeatureFlag4;
|
|
724
709
|
if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
|
|
725
710
|
shouldScale = true;
|
|
726
711
|
shouldHandleColgroupUpdates = true;
|
|
@@ -731,7 +716,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
731
716
|
shouldScale = true;
|
|
732
717
|
shouldHandleColgroupUpdates = true;
|
|
733
718
|
}
|
|
734
|
-
if (
|
|
719
|
+
if (this.state.windowResized) {
|
|
735
720
|
shouldHandleColgroupUpdates = true;
|
|
736
721
|
}
|
|
737
722
|
if (shouldHandleColgroupUpdates) {
|
|
@@ -889,9 +874,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
889
874
|
tablePos = undefined;
|
|
890
875
|
}
|
|
891
876
|
var isNested = isTableNested(view.state, tablePos);
|
|
892
|
-
var
|
|
893
|
-
|
|
894
|
-
tableWithFixedColumnWidthsOption =
|
|
877
|
+
var _getEditorFeatureFlag5 = getEditorFeatureFlags(),
|
|
878
|
+
_getEditorFeatureFlag6 = _getEditorFeatureFlag5.tableWithFixedColumnWidthsOption,
|
|
879
|
+
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag6 === void 0 ? false : _getEditorFeatureFlag6;
|
|
895
880
|
var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption || !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor));
|
|
896
881
|
return /*#__PURE__*/React.createElement(TableContainer
|
|
897
882
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|