@atlaskit/editor-plugin-table 7.16.13 → 7.16.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -0
- package/dist/cjs/commands/column-resize.js +6 -3
- package/dist/cjs/commands/delete.js +2 -1
- package/dist/cjs/commands/insert.js +8 -5
- package/dist/cjs/commands/misc.js +17 -1
- package/dist/cjs/commands-with-analytics.js +6 -4
- package/dist/cjs/event-handlers.js +2 -1
- package/dist/cjs/nodeviews/TableComponent.js +21 -10
- package/dist/cjs/nodeviews/TableContainer.js +7 -3
- package/dist/cjs/nodeviews/TableResizer.js +3 -2
- package/dist/cjs/plugin.js +4 -3
- package/dist/cjs/pm-plugins/drag-and-drop/plugin.js +4 -2
- package/dist/cjs/pm-plugins/keymap.js +5 -4
- package/dist/cjs/pm-plugins/main.js +2 -2
- package/dist/cjs/pm-plugins/table-resizing/event-handlers.js +12 -7
- package/dist/cjs/pm-plugins/table-resizing/utils/colgroup.js +6 -5
- package/dist/cjs/pm-plugins/table-resizing/utils/consts.js +2 -1
- package/dist/cjs/pm-plugins/table-resizing/utils/index.js +6 -0
- package/dist/cjs/pm-plugins/table-resizing/utils/misc.js +6 -4
- package/dist/cjs/pm-plugins/table-resizing/utils/resize-column.js +5 -3
- package/dist/cjs/pm-plugins/table-resizing/utils/resize-state.js +13 -8
- package/dist/cjs/pm-plugins/table-resizing/utils/scale-table.js +17 -9
- package/dist/cjs/toolbar.js +10 -5
- package/dist/cjs/transforms/column-width.js +3 -1
- package/dist/cjs/transforms/delete-columns.js +2 -1
- package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js +4 -2
- package/dist/cjs/ui/FloatingDragMenu/DragMenu.js +3 -2
- package/dist/cjs/ui/FloatingDragMenu/index.js +4 -1
- package/dist/cjs/ui/FloatingInsertButton/index.js +3 -1
- package/dist/cjs/utils/drag-menu.js +2 -1
- package/dist/es2019/commands/column-resize.js +6 -3
- package/dist/es2019/commands/delete.js +2 -2
- package/dist/es2019/commands/insert.js +8 -8
- package/dist/es2019/commands/misc.js +17 -1
- package/dist/es2019/commands-with-analytics.js +6 -6
- package/dist/es2019/event-handlers.js +2 -2
- package/dist/es2019/nodeviews/TableComponent.js +21 -10
- package/dist/es2019/nodeviews/TableContainer.js +7 -3
- package/dist/es2019/nodeviews/TableResizer.js +3 -2
- package/dist/es2019/plugin.js +4 -3
- package/dist/es2019/pm-plugins/drag-and-drop/plugin.js +4 -2
- package/dist/es2019/pm-plugins/keymap.js +5 -5
- package/dist/es2019/pm-plugins/main.js +2 -2
- package/dist/es2019/pm-plugins/table-resizing/event-handlers.js +12 -7
- package/dist/es2019/pm-plugins/table-resizing/utils/colgroup.js +6 -6
- package/dist/es2019/pm-plugins/table-resizing/utils/consts.js +1 -0
- package/dist/es2019/pm-plugins/table-resizing/utils/index.js +1 -1
- package/dist/es2019/pm-plugins/table-resizing/utils/misc.js +7 -5
- package/dist/es2019/pm-plugins/table-resizing/utils/resize-column.js +5 -5
- package/dist/es2019/pm-plugins/table-resizing/utils/resize-state.js +12 -8
- package/dist/es2019/pm-plugins/table-resizing/utils/scale-table.js +17 -12
- package/dist/es2019/toolbar.js +10 -8
- package/dist/es2019/transforms/column-width.js +3 -2
- package/dist/es2019/transforms/delete-columns.js +2 -2
- package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js +4 -2
- package/dist/es2019/ui/FloatingDragMenu/DragMenu.js +3 -2
- package/dist/es2019/ui/FloatingDragMenu/index.js +4 -1
- package/dist/es2019/ui/FloatingInsertButton/index.js +3 -1
- package/dist/es2019/utils/drag-menu.js +2 -2
- package/dist/esm/commands/column-resize.js +6 -3
- package/dist/esm/commands/delete.js +2 -1
- package/dist/esm/commands/insert.js +8 -5
- package/dist/esm/commands/misc.js +17 -1
- package/dist/esm/commands-with-analytics.js +6 -4
- package/dist/esm/event-handlers.js +2 -1
- package/dist/esm/nodeviews/TableComponent.js +21 -10
- package/dist/esm/nodeviews/TableContainer.js +7 -3
- package/dist/esm/nodeviews/TableResizer.js +3 -2
- package/dist/esm/plugin.js +4 -3
- package/dist/esm/pm-plugins/drag-and-drop/plugin.js +4 -2
- package/dist/esm/pm-plugins/keymap.js +5 -4
- package/dist/esm/pm-plugins/main.js +2 -2
- package/dist/esm/pm-plugins/table-resizing/event-handlers.js +12 -7
- package/dist/esm/pm-plugins/table-resizing/utils/colgroup.js +6 -5
- package/dist/esm/pm-plugins/table-resizing/utils/consts.js +1 -0
- package/dist/esm/pm-plugins/table-resizing/utils/index.js +1 -1
- package/dist/esm/pm-plugins/table-resizing/utils/misc.js +7 -5
- package/dist/esm/pm-plugins/table-resizing/utils/resize-column.js +5 -3
- package/dist/esm/pm-plugins/table-resizing/utils/resize-state.js +13 -8
- package/dist/esm/pm-plugins/table-resizing/utils/scale-table.js +17 -9
- package/dist/esm/toolbar.js +10 -5
- package/dist/esm/transforms/column-width.js +3 -1
- package/dist/esm/transforms/delete-columns.js +2 -1
- package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js +4 -2
- package/dist/esm/ui/FloatingDragMenu/DragMenu.js +3 -2
- package/dist/esm/ui/FloatingDragMenu/index.js +4 -1
- package/dist/esm/ui/FloatingInsertButton/index.js +3 -1
- package/dist/esm/utils/drag-menu.js +2 -1
- package/dist/types/commands/delete.d.ts +1 -1
- package/dist/types/commands/insert.d.ts +4 -4
- package/dist/types/commands-with-analytics.d.ts +3 -3
- package/dist/types/event-handlers.d.ts +1 -1
- package/dist/types/nodeviews/TableContainer.d.ts +4 -2
- package/dist/types/nodeviews/TableResizer.d.ts +2 -1
- package/dist/types/pm-plugins/keymap.d.ts +1 -1
- package/dist/types/pm-plugins/main.d.ts +1 -1
- package/dist/types/pm-plugins/table-resizing/utils/colgroup.d.ts +2 -2
- package/dist/types/pm-plugins/table-resizing/utils/consts.d.ts +1 -0
- package/dist/types/pm-plugins/table-resizing/utils/index.d.ts +1 -1
- package/dist/types/pm-plugins/table-resizing/utils/misc.d.ts +2 -2
- package/dist/types/pm-plugins/table-resizing/utils/resize-column.d.ts +2 -2
- package/dist/types/pm-plugins/table-resizing/utils/resize-state.d.ts +3 -2
- package/dist/types/pm-plugins/table-resizing/utils/scale-table.d.ts +3 -3
- package/dist/types/toolbar.d.ts +2 -2
- package/dist/types/transforms/column-width.d.ts +1 -1
- package/dist/types/transforms/delete-columns.d.ts +1 -1
- package/dist/types/ui/FloatingDragMenu/DragMenu.d.ts +2 -1
- package/dist/types/utils/drag-menu.d.ts +1 -1
- package/dist/types-ts4.5/commands/delete.d.ts +1 -1
- package/dist/types-ts4.5/commands/insert.d.ts +4 -4
- package/dist/types-ts4.5/commands-with-analytics.d.ts +3 -3
- package/dist/types-ts4.5/event-handlers.d.ts +1 -1
- package/dist/types-ts4.5/nodeviews/TableContainer.d.ts +4 -2
- package/dist/types-ts4.5/nodeviews/TableResizer.d.ts +2 -1
- package/dist/types-ts4.5/pm-plugins/keymap.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/main.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/table-resizing/utils/colgroup.d.ts +2 -2
- package/dist/types-ts4.5/pm-plugins/table-resizing/utils/consts.d.ts +1 -0
- package/dist/types-ts4.5/pm-plugins/table-resizing/utils/index.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/table-resizing/utils/misc.d.ts +2 -2
- package/dist/types-ts4.5/pm-plugins/table-resizing/utils/resize-column.d.ts +2 -2
- package/dist/types-ts4.5/pm-plugins/table-resizing/utils/resize-state.d.ts +3 -2
- package/dist/types-ts4.5/pm-plugins/table-resizing/utils/scale-table.d.ts +3 -3
- package/dist/types-ts4.5/toolbar.d.ts +2 -2
- package/dist/types-ts4.5/transforms/column-width.d.ts +1 -1
- package/dist/types-ts4.5/transforms/delete-columns.d.ts +1 -1
- package/dist/types-ts4.5/ui/FloatingDragMenu/DragMenu.d.ts +2 -1
- package/dist/types-ts4.5/utils/drag-menu.d.ts +1 -1
- package/package.json +4 -1
- package/src/commands/column-resize.ts +9 -3
- package/src/commands/delete.ts +2 -1
- package/src/commands/insert.ts +31 -12
- package/src/commands/misc.ts +20 -4
- package/src/commands-with-analytics.ts +24 -8
- package/src/event-handlers.ts +2 -0
- package/src/nodeviews/TableComponent.tsx +41 -12
- package/src/nodeviews/TableContainer.tsx +6 -0
- package/src/nodeviews/TableResizer.tsx +4 -0
- package/src/plugin.tsx +9 -0
- package/src/pm-plugins/drag-and-drop/plugin.ts +13 -4
- package/src/pm-plugins/keymap.ts +17 -4
- package/src/pm-plugins/main.ts +2 -0
- package/src/pm-plugins/table-resizing/event-handlers.ts +21 -10
- package/src/pm-plugins/table-resizing/utils/colgroup.ts +14 -4
- package/src/pm-plugins/table-resizing/utils/consts.ts +1 -0
- package/src/pm-plugins/table-resizing/utils/index.ts +1 -0
- package/src/pm-plugins/table-resizing/utils/misc.ts +24 -5
- package/src/pm-plugins/table-resizing/utils/resize-column.ts +11 -4
- package/src/pm-plugins/table-resizing/utils/resize-state.ts +17 -6
- package/src/pm-plugins/table-resizing/utils/scale-table.ts +32 -9
- package/src/toolbar.tsx +18 -10
- package/src/transforms/column-width.ts +2 -1
- package/src/transforms/delete-columns.ts +11 -2
- package/src/ui/FloatingContextualMenu/ContextualMenu.tsx +12 -5
- package/src/ui/FloatingDragMenu/DragMenu.tsx +3 -0
- package/src/ui/FloatingDragMenu/index.tsx +7 -0
- package/src/ui/FloatingInsertButton/index.tsx +7 -0
- package/src/utils/drag-menu.ts +2 -0
|
@@ -202,7 +202,7 @@ export const changeColumnWidthByStepWithAnalytics = editorAnalyticsAPI => (stepS
|
|
|
202
202
|
ariaNotify: ariaNotify,
|
|
203
203
|
getIntl: getIntl
|
|
204
204
|
}));
|
|
205
|
-
export const insertColumnWithAnalytics = (editorAnalyticsAPI, isTableScalingEnabled = false, isCellbackgroundDuplicated = false) => (inputMethod, position) => withEditorAnalyticsAPI(state => {
|
|
205
|
+
export const insertColumnWithAnalytics = (editorAnalyticsAPI, isTableScalingEnabled = false, isCellbackgroundDuplicated = false, shouldUseIncreasedScalingPercent = false) => (inputMethod, position) => withEditorAnalyticsAPI(state => {
|
|
206
206
|
const {
|
|
207
207
|
totalRowCount,
|
|
208
208
|
totalColumnCount
|
|
@@ -219,7 +219,7 @@ export const insertColumnWithAnalytics = (editorAnalyticsAPI, isTableScalingEnab
|
|
|
219
219
|
},
|
|
220
220
|
eventType: EVENT_TYPE.TRACK
|
|
221
221
|
};
|
|
222
|
-
})(editorAnalyticsAPI)(insertColumn(isTableScalingEnabled, isCellbackgroundDuplicated)(position));
|
|
222
|
+
})(editorAnalyticsAPI)(insertColumn(isTableScalingEnabled, isCellbackgroundDuplicated, shouldUseIncreasedScalingPercent)(position));
|
|
223
223
|
export const deleteRowsWithAnalytics = editorAnalyticsAPI => (inputMethod, rect, isHeaderRowRequired) => withEditorAnalyticsAPI(({
|
|
224
224
|
selection
|
|
225
225
|
}) => {
|
|
@@ -246,7 +246,7 @@ export const deleteRowsWithAnalytics = editorAnalyticsAPI => (inputMethod, rect,
|
|
|
246
246
|
}
|
|
247
247
|
return true;
|
|
248
248
|
});
|
|
249
|
-
export const deleteColumnsWithAnalytics = (editorAnalyticsAPI, isTableScalingEnabled = false) => (inputMethod, rect) => withEditorAnalyticsAPI(({
|
|
249
|
+
export const deleteColumnsWithAnalytics = (editorAnalyticsAPI, isTableScalingEnabled = false, shouldUseIncreasedScalingPercent = false) => (inputMethod, rect) => withEditorAnalyticsAPI(({
|
|
250
250
|
selection
|
|
251
251
|
}) => {
|
|
252
252
|
const {
|
|
@@ -266,8 +266,8 @@ export const deleteColumnsWithAnalytics = (editorAnalyticsAPI, isTableScalingEna
|
|
|
266
266
|
},
|
|
267
267
|
eventType: EVENT_TYPE.TRACK
|
|
268
268
|
};
|
|
269
|
-
})(editorAnalyticsAPI)(deleteColumnsCommand(rect, isTableScalingEnabled));
|
|
270
|
-
export const deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = editorAnalyticsAPI => (state, dispatch) => {
|
|
269
|
+
})(editorAnalyticsAPI)(deleteColumnsCommand(rect, isTableScalingEnabled, shouldUseIncreasedScalingPercent));
|
|
270
|
+
export const deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = (editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent) => (state, dispatch) => {
|
|
271
271
|
const {
|
|
272
272
|
selection
|
|
273
273
|
} = state;
|
|
@@ -287,7 +287,7 @@ export const deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = editorAnalyti
|
|
|
287
287
|
const isHeaderRowRequired = pluginConfig.isHeaderRowRequired || false;
|
|
288
288
|
return deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, rect, isHeaderRowRequired)(state, dispatch);
|
|
289
289
|
} else if (selectionType === 'column') {
|
|
290
|
-
return deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, rect)(state, dispatch);
|
|
290
|
+
return deleteColumnsWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent)(INPUT_METHOD.SHORTCUT, rect)(state, dispatch);
|
|
291
291
|
} else {
|
|
292
292
|
return false;
|
|
293
293
|
}
|
|
@@ -361,7 +361,7 @@ export function handleTripleClick(view, pos) {
|
|
|
361
361
|
}
|
|
362
362
|
return false;
|
|
363
363
|
}
|
|
364
|
-
export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI, editorView, isTableScalingEnabled = false) => {
|
|
364
|
+
export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI, editorView, isTableScalingEnabled = false, shouldUseIncreasedScalingPercent = false) => {
|
|
365
365
|
const oldSelection = oldState.tr.selection;
|
|
366
366
|
let {
|
|
367
367
|
tr
|
|
@@ -410,7 +410,7 @@ export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI, editorV
|
|
|
410
410
|
} = getPluginState(newState);
|
|
411
411
|
tr = deleteRows(rect, isHeaderRowRequired)(tr);
|
|
412
412
|
} else if (tr.selection.isColSelection()) {
|
|
413
|
-
tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView, isTableScalingEnabled)(tr);
|
|
413
|
+
tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView, isTableScalingEnabled, shouldUseIncreasedScalingPercent)(tr);
|
|
414
414
|
}
|
|
415
415
|
}
|
|
416
416
|
}
|
|
@@ -165,6 +165,7 @@ class TableComponent extends React.Component {
|
|
|
165
165
|
this.containerWidth = containerWidth;
|
|
166
166
|
this.layoutSize = layoutSize;
|
|
167
167
|
});
|
|
168
|
+
// Function gets called when table is nested.
|
|
168
169
|
_defineProperty(this, "scaleTable", scaleOptions => {
|
|
169
170
|
const {
|
|
170
171
|
view,
|
|
@@ -195,7 +196,10 @@ class TableComponent extends React.Component {
|
|
|
195
196
|
containerWidth: width,
|
|
196
197
|
previousContainerWidth: this.containerWidth.width || width,
|
|
197
198
|
...options
|
|
198
|
-
}, domAtPos, false
|
|
199
|
+
}, domAtPos, false,
|
|
200
|
+
// isTableScalingEnabled doesn't change the behavior of nested tables
|
|
201
|
+
false // shouldUseIncreasedScalingPercent set to false for nested tables
|
|
202
|
+
)(state.tr);
|
|
199
203
|
dispatch(tr);
|
|
200
204
|
});
|
|
201
205
|
_defineProperty(this, "setTimerToSendInitialOverflowCaptured", isOverflowing => {
|
|
@@ -461,7 +465,7 @@ class TableComponent extends React.Component {
|
|
|
461
465
|
const isNumberOfColumnsChanged = tablesHaveDifferentNoOfColumns(tableNode, this.node);
|
|
462
466
|
const maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth || isNumberColumnChanged || isNumberOfColumnsChanged;
|
|
463
467
|
if (force || maybeScale) {
|
|
464
|
-
var _this$containerWidth;
|
|
468
|
+
var _this$containerWidth, _this$props$options;
|
|
465
469
|
const {
|
|
466
470
|
width: containerWidthValue
|
|
467
471
|
} = containerWidth;
|
|
@@ -471,8 +475,10 @@ class TableComponent extends React.Component {
|
|
|
471
475
|
const isColumnsDistributed = wasTableResized && !isTableResized;
|
|
472
476
|
const isTableDisplayModeChanged = this.node.attrs.displayMode !== tableNode.attrs.displayMode;
|
|
473
477
|
const shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged;
|
|
478
|
+
const isTableScalingEnabledWithLockButton = ((_this$props$options = this.props.options) === null || _this$props$options === void 0 ? void 0 : _this$props$options.isTableScalingEnabled) && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
|
|
479
|
+
const shouldUseIncreasedScalingPercent = isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent') || false;
|
|
474
480
|
if (force || !isResizing && shouldUpdateColgroup) {
|
|
475
|
-
var _this$props$
|
|
481
|
+
var _this$props$options2;
|
|
476
482
|
const resizeState = getResizeState({
|
|
477
483
|
minWidth: COLUMN_MIN_WIDTH,
|
|
478
484
|
maxSize: tableRenderWidth,
|
|
@@ -480,19 +486,20 @@ class TableComponent extends React.Component {
|
|
|
480
486
|
tableRef: this.table,
|
|
481
487
|
start,
|
|
482
488
|
domAtPos: view.domAtPos.bind(view),
|
|
483
|
-
isTableScalingEnabled: true
|
|
489
|
+
isTableScalingEnabled: true,
|
|
490
|
+
shouldUseIncreasedScalingPercent
|
|
484
491
|
});
|
|
485
492
|
let shouldScaleOnColgroupUpdate = false;
|
|
486
|
-
if ((_this$props$
|
|
493
|
+
if ((_this$props$options2 = this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isTableScalingEnabled && !getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
|
|
487
494
|
shouldScaleOnColgroupUpdate = true;
|
|
488
495
|
}
|
|
489
|
-
if (
|
|
496
|
+
if (isTableScalingEnabledWithLockButton && tableNode.attrs.displayMode !== 'fixed') {
|
|
490
497
|
shouldScaleOnColgroupUpdate = true;
|
|
491
498
|
}
|
|
492
499
|
|
|
493
500
|
// Request animation frame required for Firefox
|
|
494
501
|
requestAnimationFrame(() => {
|
|
495
|
-
updateColgroup(resizeState, this.table, tableNode, shouldScaleOnColgroupUpdate);
|
|
502
|
+
updateColgroup(resizeState, this.table, tableNode, shouldScaleOnColgroupUpdate, shouldUseIncreasedScalingPercent);
|
|
496
503
|
});
|
|
497
504
|
}
|
|
498
505
|
}
|
|
@@ -527,7 +534,9 @@ class TableComponent extends React.Component {
|
|
|
527
534
|
shouldScale = true;
|
|
528
535
|
shouldHandleColgroupUpdates = true;
|
|
529
536
|
}
|
|
530
|
-
|
|
537
|
+
const isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
|
|
538
|
+
const shouldUseIncreasedScalingPercent = isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
|
|
539
|
+
if (isTableScalingEnabledWithLockButton && getNode().attrs.displayMode !== 'fixed') {
|
|
531
540
|
shouldScale = true;
|
|
532
541
|
shouldHandleColgroupUpdates = true;
|
|
533
542
|
}
|
|
@@ -581,7 +590,7 @@ class TableComponent extends React.Component {
|
|
|
581
590
|
const start = getPos() || 0;
|
|
582
591
|
const depth = view.state.doc.resolve(start).depth;
|
|
583
592
|
shouldScale = depth === 0 && shouldScale;
|
|
584
|
-
insertColgroupFromNode(this.table, currentTable, shouldScale);
|
|
593
|
+
insertColgroupFromNode(this.table, currentTable, shouldScale, undefined, shouldUseIncreasedScalingPercent);
|
|
585
594
|
}
|
|
586
595
|
updateControls()(view.state);
|
|
587
596
|
}
|
|
@@ -736,6 +745,7 @@ class TableComponent extends React.Component {
|
|
|
736
745
|
const {
|
|
737
746
|
stickyScrollbar
|
|
738
747
|
} = getEditorFeatureFlags();
|
|
748
|
+
const shouldUseIncreasedScalingPercent = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
|
|
739
749
|
return /*#__PURE__*/React.createElement(TableContainer
|
|
740
750
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
741
751
|
, {
|
|
@@ -757,7 +767,8 @@ class TableComponent extends React.Component {
|
|
|
757
767
|
isResizing: isResizing,
|
|
758
768
|
isTableScalingEnabled: isTableScalingEnabled,
|
|
759
769
|
isWholeTableInDanger: isWholeTableInDanger,
|
|
760
|
-
isTableAlignmentEnabled: isTableAlignmentEnabled
|
|
770
|
+
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
771
|
+
shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
|
|
761
772
|
}, /*#__PURE__*/React.createElement("div", {
|
|
762
773
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
763
774
|
className: ClassName.TABLE_STICKY_SENTINEL_TOP,
|
|
@@ -119,7 +119,8 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
|
|
|
119
119
|
tableWrapperHeight,
|
|
120
120
|
isWholeTableInDanger,
|
|
121
121
|
isTableScalingEnabled,
|
|
122
|
-
isTableAlignmentEnabled
|
|
122
|
+
isTableAlignmentEnabled,
|
|
123
|
+
shouldUseIncreasedScalingPercent
|
|
123
124
|
}) => {
|
|
124
125
|
const containerRef = useRef(null);
|
|
125
126
|
const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
|
|
@@ -227,6 +228,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
|
|
|
227
228
|
isFullWidthModeEnabled,
|
|
228
229
|
isTableScalingEnabled,
|
|
229
230
|
isWholeTableInDanger,
|
|
231
|
+
shouldUseIncreasedScalingPercent,
|
|
230
232
|
pluginInjectionApi,
|
|
231
233
|
onResizeStart,
|
|
232
234
|
onResizeStop
|
|
@@ -281,7 +283,8 @@ export const TableContainer = ({
|
|
|
281
283
|
isWholeTableInDanger,
|
|
282
284
|
isTableResizingEnabled,
|
|
283
285
|
isTableScalingEnabled,
|
|
284
|
-
isTableAlignmentEnabled
|
|
286
|
+
isTableAlignmentEnabled,
|
|
287
|
+
shouldUseIncreasedScalingPercent
|
|
285
288
|
}) => {
|
|
286
289
|
if (isTableResizingEnabled && !isNested) {
|
|
287
290
|
return /*#__PURE__*/React.createElement(ResizableTableContainer
|
|
@@ -299,7 +302,8 @@ export const TableContainer = ({
|
|
|
299
302
|
pluginInjectionApi: pluginInjectionApi,
|
|
300
303
|
isTableScalingEnabled: isTableScalingEnabled,
|
|
301
304
|
isWholeTableInDanger: isWholeTableInDanger,
|
|
302
|
-
isTableAlignmentEnabled: isTableAlignmentEnabled
|
|
305
|
+
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
306
|
+
shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
|
|
303
307
|
}, children);
|
|
304
308
|
}
|
|
305
309
|
return /*#__PURE__*/React.createElement(InnerContainer, {
|
|
@@ -106,6 +106,7 @@ export const TableResizer = ({
|
|
|
106
106
|
isTableScalingEnabled,
|
|
107
107
|
isTableAlignmentEnabled,
|
|
108
108
|
isWholeTableInDanger,
|
|
109
|
+
shouldUseIncreasedScalingPercent,
|
|
109
110
|
pluginInjectionApi,
|
|
110
111
|
isFullWidthModeEnabled
|
|
111
112
|
}) => {
|
|
@@ -299,7 +300,7 @@ export const TableResizer = ({
|
|
|
299
300
|
prevNode: node,
|
|
300
301
|
start: pos + 1,
|
|
301
302
|
parentWidth: newWidth
|
|
302
|
-
}, editorView.domAtPos.bind(editorView), isTableScalingEnabled)(tr);
|
|
303
|
+
}, editorView.domAtPos.bind(editorView), isTableScalingEnabled, shouldUseIncreasedScalingPercent || false)(tr);
|
|
303
304
|
const scaledNode = tr.doc.nodeAt(pos);
|
|
304
305
|
(_attachAnalyticsEvent2 = attachAnalyticsEvent(generateResizedPayload({
|
|
305
306
|
originalNode: node,
|
|
@@ -330,7 +331,7 @@ export const TableResizer = ({
|
|
|
330
331
|
onResizeStop();
|
|
331
332
|
}
|
|
332
333
|
return newWidth;
|
|
333
|
-
}, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, widthToWidest, formatMessage, pluginInjectionApi]);
|
|
334
|
+
}, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi]);
|
|
334
335
|
const handleTableSizeChangeOnKeypress = useCallback(step => {
|
|
335
336
|
const newWidth = width + step;
|
|
336
337
|
if (newWidth > maxWidth || newWidth < resizerMinWidth) {
|
package/dist/es2019/plugin.js
CHANGED
|
@@ -61,6 +61,7 @@ const tablesPlugin = ({
|
|
|
61
61
|
};
|
|
62
62
|
};
|
|
63
63
|
const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
|
|
64
|
+
const shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
|
|
64
65
|
return {
|
|
65
66
|
name: 'table',
|
|
66
67
|
// Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
|
|
@@ -154,7 +155,7 @@ const tablesPlugin = ({
|
|
|
154
155
|
isTableScalingEnabled,
|
|
155
156
|
isTableAlignmentEnabled
|
|
156
157
|
} = options || {};
|
|
157
|
-
return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled);
|
|
158
|
+
return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent);
|
|
158
159
|
}
|
|
159
160
|
}, {
|
|
160
161
|
name: 'tablePMColResizing',
|
|
@@ -191,7 +192,7 @@ const tablesPlugin = ({
|
|
|
191
192
|
isTableAlignmentEnabled = false,
|
|
192
193
|
fullWidthEnabled = false
|
|
193
194
|
} = options || {};
|
|
194
|
-
return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl);
|
|
195
|
+
return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, shouldUseIncreasedScalingPercent);
|
|
195
196
|
}
|
|
196
197
|
}, {
|
|
197
198
|
name: 'tableSelectionKeymap',
|
|
@@ -459,7 +460,7 @@ const tablesPlugin = ({
|
|
|
459
460
|
return tr;
|
|
460
461
|
}
|
|
461
462
|
}],
|
|
462
|
-
floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, () => editorViewRef.current, options)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
|
|
463
|
+
floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, () => editorViewRef.current, options, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
|
|
463
464
|
}
|
|
464
465
|
};
|
|
465
466
|
};
|
|
@@ -172,10 +172,12 @@ const destroyFn = (editorView, editorAnalyticsAPI) => {
|
|
|
172
172
|
isTableScalingEnabled = false
|
|
173
173
|
} = getTablePluginState(editorView.state);
|
|
174
174
|
let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
|
|
175
|
-
|
|
175
|
+
const isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
|
|
176
|
+
const shouldUseIncreasedScalingPercent = isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
|
|
177
|
+
if (isTableScalingEnabledWithLockButton) {
|
|
176
178
|
isTableScalingEnabledOnCurrentTable = tableNode.attrs.displayMode !== 'fixed';
|
|
177
179
|
}
|
|
178
|
-
insertColgroupFromNode(tableRef, tableNode, isTableScalingEnabledOnCurrentTable);
|
|
180
|
+
insertColgroupFromNode(tableRef, tableNode, isTableScalingEnabledOnCurrentTable, shouldUseIncreasedScalingPercent);
|
|
179
181
|
}
|
|
180
182
|
}
|
|
181
183
|
editorView.focus();
|
|
@@ -8,7 +8,7 @@ import { addRowAroundSelection, changeColumnWidthByStepWithAnalytics, deleteSele
|
|
|
8
8
|
import { activateNextResizeArea, initiateKeyboardColumnResizing, stopKeyboardColumnResizing } from '../commands/column-resize';
|
|
9
9
|
import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand, createTable } from '../commands/insert';
|
|
10
10
|
import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
|
|
11
|
-
export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl) {
|
|
11
|
+
export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl, shouldUseIncreasedScalingPercent) {
|
|
12
12
|
var _pluginInjectionApi$a;
|
|
13
13
|
const list = {};
|
|
14
14
|
const ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
|
|
@@ -21,8 +21,8 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
|
|
|
21
21
|
// Add row/column shortcuts
|
|
22
22
|
bindKeymapWithCommand(addRowBefore.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
|
|
23
23
|
bindKeymapWithCommand(addRowAfter.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
|
|
24
|
-
bindKeymapWithCommand(addColumnBefore.common, addColumnBeforeCommand(isTableScalingEnabled), list);
|
|
25
|
-
bindKeymapWithCommand(addColumnAfter.common, addColumnAfterCommand(isTableScalingEnabled), list);
|
|
24
|
+
bindKeymapWithCommand(addColumnBefore.common, addColumnBeforeCommand(isTableScalingEnabled, shouldUseIncreasedScalingPercent), list);
|
|
25
|
+
bindKeymapWithCommand(addColumnAfter.common, addColumnAfterCommand(isTableScalingEnabled, shouldUseIncreasedScalingPercent), list);
|
|
26
26
|
if (dragAndDropEnabled) {
|
|
27
27
|
// Move row/column shortcuts
|
|
28
28
|
/**
|
|
@@ -38,8 +38,8 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
|
|
|
38
38
|
bindKeymapWithCommand(moveColumnRight.common, moveSourceWithAnalyticsViaShortcut(editorAnalyticsAPI)('table-column', 1), list);
|
|
39
39
|
|
|
40
40
|
// Delete row/column shortcuts
|
|
41
|
-
bindKeymapWithCommand(deleteColumn.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI), list);
|
|
42
|
-
bindKeymapWithCommand(deleteRow.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI), list);
|
|
41
|
+
bindKeymapWithCommand(deleteColumn.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent), list);
|
|
42
|
+
bindKeymapWithCommand(deleteRow.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent), list);
|
|
43
43
|
}
|
|
44
44
|
if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
|
|
45
45
|
bindKeymapWithCommand(startColumnResizing.common, initiateKeyboardColumnResizing({
|
|
@@ -22,7 +22,7 @@ import { isHeaderRowRequired } from '../utils/paste';
|
|
|
22
22
|
import { defaultHoveredCell, defaultTableSelection } from './default-table-selection';
|
|
23
23
|
import { createPluginState, getPluginState } from './plugin-factory';
|
|
24
24
|
import { pluginKey } from './plugin-key';
|
|
25
|
-
export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled) => {
|
|
25
|
+
export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent) => {
|
|
26
26
|
var _accessibilityUtils;
|
|
27
27
|
const state = createPluginState(dispatch, {
|
|
28
28
|
pluginConfig,
|
|
@@ -76,7 +76,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
|
|
|
76
76
|
}
|
|
77
77
|
if (tr) {
|
|
78
78
|
// "fixTables" removes empty rows as we don't allow that in schema
|
|
79
|
-
const updatedTr = handleCut(tr, oldState, newState, editorAnalyticsAPI, editorViewRef || undefined, isTableScalingEnabled);
|
|
79
|
+
const updatedTr = handleCut(tr, oldState, newState, editorAnalyticsAPI, editorViewRef || undefined, isTableScalingEnabled, shouldUseIncreasedScalingPercent);
|
|
80
80
|
return fixTables(updatedTr) || updatedTr;
|
|
81
81
|
}
|
|
82
82
|
if (transactions.find(tr => tr.docChanged)) {
|
|
@@ -50,7 +50,8 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
|
|
|
50
50
|
getEditorContainerWidth
|
|
51
51
|
});
|
|
52
52
|
let shouldScale = tableDepth === 0 && isTableScalingEnabled;
|
|
53
|
-
|
|
53
|
+
const isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
|
|
54
|
+
if (isTableScalingEnabledWithLockButton) {
|
|
54
55
|
shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
|
|
55
56
|
}
|
|
56
57
|
const resizeState = getResizeState({
|
|
@@ -60,7 +61,8 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
|
|
|
60
61
|
tableRef: dom,
|
|
61
62
|
start,
|
|
62
63
|
domAtPos,
|
|
63
|
-
isTableScalingEnabled: shouldScale
|
|
64
|
+
isTableScalingEnabled: shouldScale,
|
|
65
|
+
shouldUseIncreasedScalingPercent: isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent')
|
|
64
66
|
});
|
|
65
67
|
if (evenColumns({
|
|
66
68
|
resizeState,
|
|
@@ -145,7 +147,8 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
|
|
|
145
147
|
// only selected (or selected - 1) columns should be distributed
|
|
146
148
|
const resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
|
|
147
149
|
let shouldScale = tableDepth === 0 && isTableScalingEnabled;
|
|
148
|
-
|
|
150
|
+
const isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
|
|
151
|
+
if (isTableScalingEnabledWithLockButton) {
|
|
149
152
|
shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
|
|
150
153
|
}
|
|
151
154
|
const resizedDelta = clientX - startX;
|
|
@@ -154,7 +157,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
|
|
|
154
157
|
tr = updateColumnWidths(newResizeState, table, start)(tr);
|
|
155
158
|
tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
|
|
156
159
|
} else {
|
|
157
|
-
const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale);
|
|
160
|
+
const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale, isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent'));
|
|
158
161
|
tr = updateColumnWidths(newResizeState, table, start)(tr);
|
|
159
162
|
}
|
|
160
163
|
if (colIndex === map.width - 1) {
|
|
@@ -228,13 +231,15 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
|
|
|
228
231
|
const map = TableMap.get(table);
|
|
229
232
|
const colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
|
|
230
233
|
let shouldScale = tableDepth === 0 && isTableScalingEnabled;
|
|
231
|
-
|
|
234
|
+
const isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
|
|
235
|
+
const shouldUseIncreasedScalingPercent = isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
|
|
236
|
+
if (isTableScalingEnabledWithLockButton) {
|
|
232
237
|
shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
|
|
233
238
|
}
|
|
234
239
|
if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
|
|
235
|
-
resizeColumnAndTable(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
|
|
240
|
+
resizeColumnAndTable(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, undefined, shouldUseIncreasedScalingPercent);
|
|
236
241
|
} else {
|
|
237
|
-
resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
|
|
242
|
+
resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, shouldUseIncreasedScalingPercent);
|
|
238
243
|
}
|
|
239
244
|
updateControls()(state);
|
|
240
245
|
}
|
|
@@ -10,7 +10,7 @@ import { getTableScalingPercent } from './misc';
|
|
|
10
10
|
* overflow.
|
|
11
11
|
*/
|
|
12
12
|
export const getColWidthFix = (colwidth, tableColumnCount) => colwidth - 1 / tableColumnCount;
|
|
13
|
-
export const generateColgroup = (table, tableRef) => {
|
|
13
|
+
export const generateColgroup = (table, tableRef, shouldUseIncreasedScalingPercent) => {
|
|
14
14
|
const cols = [];
|
|
15
15
|
const map = TableMap.get(table);
|
|
16
16
|
table.content.firstChild.content.forEach(cell => {
|
|
@@ -19,7 +19,7 @@ export const generateColgroup = (table, tableRef) => {
|
|
|
19
19
|
// We slice here to guard against our colwidth array having more entries
|
|
20
20
|
// Than the we actually span. We'll patch the document at a later point.
|
|
21
21
|
if (tableRef) {
|
|
22
|
-
const scalePercent = getTableScalingPercent(table, tableRef);
|
|
22
|
+
const scalePercent = getTableScalingPercent(table, tableRef, shouldUseIncreasedScalingPercent);
|
|
23
23
|
cell.attrs.colwidth.slice(0, colspan).forEach(width => {
|
|
24
24
|
const fixedColWidth = getColWidthFix(width, map.width);
|
|
25
25
|
const scaledWidth = fixedColWidth * scalePercent;
|
|
@@ -48,12 +48,12 @@ export const generateColgroup = (table, tableRef) => {
|
|
|
48
48
|
});
|
|
49
49
|
return cols;
|
|
50
50
|
};
|
|
51
|
-
export const insertColgroupFromNode = (tableRef, table, isTableScalingEnabled = false, shouldRemove = true) => {
|
|
51
|
+
export const insertColgroupFromNode = (tableRef, table, isTableScalingEnabled = false, shouldRemove = true, shouldUseIncreasedScalingPercent = false) => {
|
|
52
52
|
let colgroup = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelector('colgroup');
|
|
53
53
|
if (colgroup && shouldRemove) {
|
|
54
54
|
tableRef === null || tableRef === void 0 ? void 0 : tableRef.removeChild(colgroup);
|
|
55
55
|
}
|
|
56
|
-
colgroup = renderColgroupFromNode(table, isTableScalingEnabled ? tableRef !== null && tableRef !== void 0 ? tableRef : undefined : undefined);
|
|
56
|
+
colgroup = renderColgroupFromNode(table, isTableScalingEnabled ? tableRef !== null && tableRef !== void 0 ? tableRef : undefined : undefined, shouldUseIncreasedScalingPercent);
|
|
57
57
|
if (shouldRemove) {
|
|
58
58
|
tableRef === null || tableRef === void 0 ? void 0 : tableRef.insertBefore(colgroup, tableRef === null || tableRef === void 0 ? void 0 : tableRef.firstChild);
|
|
59
59
|
}
|
|
@@ -76,8 +76,8 @@ export const isMinCellWidthTable = table => {
|
|
|
76
76
|
});
|
|
77
77
|
return isTableMinCellWidth;
|
|
78
78
|
};
|
|
79
|
-
function renderColgroupFromNode(table, maybeTableRef) {
|
|
80
|
-
const rendered = DOMSerializer.renderSpec(document, ['colgroup', {}, ...generateColgroup(table, maybeTableRef)]);
|
|
79
|
+
function renderColgroupFromNode(table, maybeTableRef, shouldUseIncreasedScalingPercent) {
|
|
80
|
+
const rendered = DOMSerializer.renderSpec(document, ['colgroup', {}, ...generateColgroup(table, maybeTableRef, shouldUseIncreasedScalingPercent)]);
|
|
81
81
|
return rendered.dom;
|
|
82
82
|
}
|
|
83
83
|
export const getColgroupChildrenLength = table => {
|
|
@@ -2,5 +2,6 @@ export const COLUMN_MIN_WIDTH = 48;
|
|
|
2
2
|
export const TABLE_DEFAULT_WIDTH = 760;
|
|
3
3
|
export const TABLE_MAX_WIDTH = 1800;
|
|
4
4
|
export const MAX_SCALING_PERCENT = 0.3;
|
|
5
|
+
export const MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
|
|
5
6
|
// Used to calculate the width of a table using the Editor width
|
|
6
7
|
export const TABLE_EDITOR_MARGIN = 76;
|
|
@@ -7,4 +7,4 @@ export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth,
|
|
|
7
7
|
export { updateControls, isClickNear, getResizeCellPos } from './dom';
|
|
8
8
|
export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
|
|
9
9
|
export { resizeColumn, resizeColumnAndTable } from './resize-column';
|
|
10
|
-
export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT } from './consts';
|
|
10
|
+
export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION } from './consts';
|
|
@@ -4,7 +4,7 @@ import { getBreakpoint, mapBreakpointToLayoutMaxWidth } from '@atlaskit/editor-c
|
|
|
4
4
|
import { calcTableColumnWidths, containsClassName } from '@atlaskit/editor-common/utils';
|
|
5
5
|
import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
|
|
6
6
|
import { hasTableBeenResized } from './colgroup';
|
|
7
|
-
import { MAX_SCALING_PERCENT } from './consts';
|
|
7
|
+
import { MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION } from './consts';
|
|
8
8
|
|
|
9
9
|
// Translates named layouts in number values.
|
|
10
10
|
export function getLayoutSize(tableLayout, containerWidth = 0, options) {
|
|
@@ -90,19 +90,21 @@ export const getTableElementWidth = table => {
|
|
|
90
90
|
export const getTableContainerElementWidth = table => {
|
|
91
91
|
return getTableContainerWidth(table);
|
|
92
92
|
};
|
|
93
|
-
export const getTableScalingPercent = (table, tableRef) => {
|
|
93
|
+
export const getTableScalingPercent = (table, tableRef, shouldUseIncreasedScalingPercent) => {
|
|
94
94
|
var _tableRef$parentEleme;
|
|
95
|
+
const maxScalingPercent = shouldUseIncreasedScalingPercent ? MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION : MAX_SCALING_PERCENT;
|
|
95
96
|
const tableWidth = getTableContainerElementWidth(table);
|
|
96
97
|
let renderWidth = (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || tableWidth;
|
|
97
98
|
// minus 1 here to avoid any 1px scroll in Firefox
|
|
98
99
|
let scalePercent = (renderWidth - 1) / tableWidth;
|
|
99
|
-
scalePercent = Math.max(scalePercent, 1 -
|
|
100
|
+
scalePercent = Math.max(scalePercent, 1 - maxScalingPercent);
|
|
100
101
|
return Math.min(scalePercent, 1);
|
|
101
102
|
};
|
|
102
|
-
export const getStaticTableScalingPercent = (table, tableRenderWidth) => {
|
|
103
|
+
export const getStaticTableScalingPercent = (table, tableRenderWidth, shouldUseIncreasedScalingPercent) => {
|
|
104
|
+
const maxScalingPercent = shouldUseIncreasedScalingPercent ? MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION : MAX_SCALING_PERCENT;
|
|
103
105
|
const tableWidth = getTableContainerElementWidth(table);
|
|
104
106
|
// minus 1 here to avoid any 1px scroll in Firefox
|
|
105
107
|
let scalePercent = (tableRenderWidth - 1) / tableWidth;
|
|
106
|
-
scalePercent = Math.max(scalePercent, 1 -
|
|
108
|
+
scalePercent = Math.max(scalePercent, 1 - maxScalingPercent);
|
|
107
109
|
return Math.min(scalePercent, 1);
|
|
108
110
|
};
|
|
@@ -4,20 +4,20 @@ import { TableCssClassName as ClassName } from '../../../types';
|
|
|
4
4
|
import { getTableContainerElementWidth, getTableScalingPercent } from './misc';
|
|
5
5
|
import { growColumn, shrinkColumn, updateAffectedColumn } from './resize-logic';
|
|
6
6
|
import { updateColgroup } from './resize-state';
|
|
7
|
-
export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false) => {
|
|
7
|
+
export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false, shouldUseIncreasedScalingPercent = false) => {
|
|
8
8
|
let scalePercent = 1;
|
|
9
9
|
let resizeAmount = amount;
|
|
10
10
|
if (isTableScalingEnabled) {
|
|
11
|
-
scalePercent = getTableScalingPercent(tableNode, tableRef);
|
|
11
|
+
scalePercent = getTableScalingPercent(tableNode, tableRef, shouldUseIncreasedScalingPercent);
|
|
12
12
|
resizeAmount = amount / scalePercent;
|
|
13
13
|
}
|
|
14
14
|
const newState = resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
|
|
15
|
-
updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
|
|
15
|
+
updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled, shouldUseIncreasedScalingPercent);
|
|
16
16
|
return newState;
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
// try not scale table during resize
|
|
20
|
-
export const resizeColumnAndTable = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false, originalTableWidth) => {
|
|
20
|
+
export const resizeColumnAndTable = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false, originalTableWidth, shouldUseIncreasedScalingPercent = false) => {
|
|
21
21
|
var _tableRef$closest;
|
|
22
22
|
// TODO: can we use document state, and apply scaling factor?
|
|
23
23
|
const tableWidth = tableRef.clientWidth;
|
|
@@ -46,7 +46,7 @@ export const resizeColumnAndTable = (resizeState, colIndex, amount, tableRef, ta
|
|
|
46
46
|
|
|
47
47
|
// this function only updates the colgroup in DOM, it reverses the scalePercent
|
|
48
48
|
// todo: change isScalingEnabled to true when reimplementing scaling
|
|
49
|
-
updateColgroup(newState, tableRef, tableNode, false);
|
|
49
|
+
updateColgroup(newState, tableRef, tableNode, false, shouldUseIncreasedScalingPercent);
|
|
50
50
|
|
|
51
51
|
// use the difference in width from affected column to update overall table width
|
|
52
52
|
const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
|
|
@@ -14,10 +14,11 @@ export const getResizeState = ({
|
|
|
14
14
|
tableRef,
|
|
15
15
|
start,
|
|
16
16
|
domAtPos,
|
|
17
|
-
isTableScalingEnabled = false
|
|
17
|
+
isTableScalingEnabled = false,
|
|
18
|
+
shouldUseIncreasedScalingPercent = false
|
|
18
19
|
}) => {
|
|
19
20
|
if (isTableScalingEnabled) {
|
|
20
|
-
const scalePercent = getTableScalingPercent(table, tableRef);
|
|
21
|
+
const scalePercent = getTableScalingPercent(table, tableRef, shouldUseIncreasedScalingPercent);
|
|
21
22
|
minWidth = Math.ceil(minWidth / scalePercent);
|
|
22
23
|
}
|
|
23
24
|
// If the table has been resized, we can use the column widths from the table node
|
|
@@ -42,8 +43,9 @@ export const getResizeState = ({
|
|
|
42
43
|
const shouldReinsertColgroup = !isTableScalingEnabled;
|
|
43
44
|
|
|
44
45
|
// Getting the resize state from DOM
|
|
45
|
-
const colgroupChildren = insertColgroupFromNode(tableRef, table, isTableScalingEnabled, shouldReinsertColgroup
|
|
46
|
-
|
|
46
|
+
const colgroupChildren = insertColgroupFromNode(tableRef, table, isTableScalingEnabled, shouldReinsertColgroup,
|
|
47
|
+
// don't reinsert colgroup when preserving table width - this causes widths to jump
|
|
48
|
+
shouldUseIncreasedScalingPercent);
|
|
47
49
|
const cols = Array.from(colgroupChildren).map((_, index) => {
|
|
48
50
|
// If the table hasn't been resized and we have a table width attribute, we can use it
|
|
49
51
|
// to calculate the widths of the columns
|
|
@@ -72,7 +74,7 @@ export const getResizeState = ({
|
|
|
72
74
|
};
|
|
73
75
|
|
|
74
76
|
// updates Colgroup DOM node with new widths
|
|
75
|
-
export const updateColgroup = (state, tableRef, tableNode, isTableScalingEnabled) => {
|
|
77
|
+
export const updateColgroup = (state, tableRef, tableNode, isTableScalingEnabled, shouldUseIncreasedScalingPercent) => {
|
|
76
78
|
const cols = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelectorAll('col');
|
|
77
79
|
const columnsCount = cols === null || cols === void 0 ? void 0 : cols.length;
|
|
78
80
|
/**
|
|
@@ -81,7 +83,7 @@ export const updateColgroup = (state, tableRef, tableNode, isTableScalingEnabled
|
|
|
81
83
|
We need to remove !isColumnResizing if we handled auto scale table when mouseUp event.
|
|
82
84
|
* */
|
|
83
85
|
if (isTableScalingEnabled && tableNode) {
|
|
84
|
-
const scalePercent = getTableScalingPercent(tableNode, tableRef);
|
|
86
|
+
const scalePercent = getTableScalingPercent(tableNode, tableRef, shouldUseIncreasedScalingPercent);
|
|
85
87
|
state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
|
|
86
88
|
.forEach((column, i) => {
|
|
87
89
|
const fixedColWidth = getColWidthFix(column.width, columnsCount !== null && columnsCount !== void 0 ? columnsCount : 0);
|
|
@@ -306,7 +308,8 @@ export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getE
|
|
|
306
308
|
});
|
|
307
309
|
let resizeState;
|
|
308
310
|
let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
|
|
309
|
-
|
|
311
|
+
const isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
|
|
312
|
+
if (isTableScalingEnabledWithLockButton) {
|
|
310
313
|
isTableScalingEnabledOnCurrentTable = table.node.attrs.displayMode !== 'fixed';
|
|
311
314
|
}
|
|
312
315
|
resizeState = getResizeState({
|
|
@@ -316,7 +319,8 @@ export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getE
|
|
|
316
319
|
tableRef,
|
|
317
320
|
start: table.start,
|
|
318
321
|
domAtPos,
|
|
319
|
-
isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
|
|
322
|
+
isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
|
|
323
|
+
shouldUseIncreasedScalingPercent: isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent')
|
|
320
324
|
});
|
|
321
325
|
const newResizeState = evenSelectedColumnsWidths(resizeState, rect);
|
|
322
326
|
const widthsBefore = resizeState.widths;
|