@atlaskit/editor-plugin-table 7.16.13 → 7.16.15

package/dist/es2019/pm-plugins/table-resizing/utils/scale-table.js

@@ -11,7 +11,7 @@ import { hasTableBeenResized, insertColgroupFromNode } from './colgroup';
 import { syncStickyRowToTable } from './dom';
 // Base function to trigger the actual scale on a table node.
 // Will only resize/scale if a table has been previously resized.
-export const scale = (tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable = false) => {
+export const scale = (tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable = false, shouldUseIncreasedScalingPercent = false) => {
   const {
     node,
     containerWidth,
@@ -49,11 +49,12 @@ export const scale = (tableRef, options, domAtPos, isTableScalingEnabledOnCurren
     tableRef,
     start,
     domAtPos,
-    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
+    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
+    shouldUseIncreasedScalingPercent
   });
   return scaleTableTo(resizeState, newWidth);
 };
-export const scaleWithParent = (tableRef, parentWidth, table, start, domAtPos, isTableScalingEnabledOnCurrentTable = false) => {
+export const scaleWithParent = (tableRef, parentWidth, table, start, domAtPos, isTableScalingEnabledOnCurrentTable = false, shouldUseIncreasedScalingPercent = false) => {
   const resizeState = getResizeState({
     minWidth: tableCellMinWidth,
     maxSize: parentWidth,
@@ -61,7 +62,8 @@ export const scaleWithParent = (tableRef, parentWidth, table, start, domAtPos, i
     tableRef,
     start,
     domAtPos,
-    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
+    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
+    shouldUseIncreasedScalingPercent
   });
   if (table.attrs.isNumberColumnEnabled) {
     parentWidth -= akEditorTableNumberColumnWidth;
@@ -111,7 +113,8 @@ export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEna
     tableRef.style.width = `${width}px`;
   }
   let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
-  if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+  const isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+  if (isTableScalingEnabledWithLockButton) {
     isTableScalingEnabledOnCurrentTable = isTableScalingEnabled && node.attrs.displayMode !== 'fixed';
   }
   // If the table hasn't been resize, the colgroup 48px width values will gracefully scale down.
@@ -120,15 +123,17 @@ export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEna
     syncStickyRowToTable(tableRef);
     return;
   }
-  const resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false) // Here last value is isTableScalingEnabled = false
-  : scale(tableRef, options, domAtPos, false);
+  const shouldUseIncreasedScalingPercent = isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+  const resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false,
+  // Here isTableScalingEnabled = false
+  shouldUseIncreasedScalingPercent) : scale(tableRef, options, domAtPos, false, shouldUseIncreasedScalingPercent);
   if (resizeState) {
-    updateColgroup(resizeState, tableRef, node, false);
+    updateColgroup(resizeState, tableRef, node, false, shouldUseIncreasedScalingPercent);
   }
 };
 
 // Scale the table to meet new requirements (col, layout change etc)
-export const scaleTable = (tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable = false) => tr => {
+export const scaleTable = (tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable = false, shouldUseIncreasedScalingPercent = false) => tr => {
   if (!tableRef) {
     return tr;
   }
@@ -143,16 +148,16 @@ export const scaleTable = (tableRef, options, domAtPos, isTableScalingEnabledOnC
     // If its not a re-sized table, we still want to re-create cols
     // To force reflow of columns upon delete.
     if (!isTableScalingEnabledOnCurrentTable) {
-      insertColgroupFromNode(tableRef, node);
+      insertColgroupFromNode(tableRef, node, false, undefined, shouldUseIncreasedScalingPercent);
     }
     tr.setMeta('scrollIntoView', false);
     return tr;
   }
   let resizeState;
   if (parentWidth) {
-    resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos, isTableScalingEnabledOnCurrentTable);
+    resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos, isTableScalingEnabledOnCurrentTable, shouldUseIncreasedScalingPercent);
   } else {
-    resizeState = scale(tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable);
+    resizeState = scale(tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable, shouldUseIncreasedScalingPercent);
   }
   if (resizeState) {
     tr = updateColumnWidths(resizeState, node, start)(tr);

package/dist/es2019/toolbar.js

@@ -5,6 +5,7 @@ import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import commonMessages, { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { cellBackgroundColorPalette, DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 import { closestElement, getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
 import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
@@ -99,7 +100,7 @@ export const getToolbarMenuConfig = (config, state, {
 // with native widgets. It's enabled via a plugin config.
 export const getToolbarCellOptionsConfig = (editorState, editorView, initialSelectionRect, {
   formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false) => {
+}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, shouldUseIncreasedScalingPercent = false) => {
   var _pluginState$pluginCo, _pluginState$pluginCo2;
   const {
     top,
@@ -117,7 +118,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
       const selectionRect = getClosestSelectionRect(state);
       const index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right;
       if (index) {
-        insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
+        insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent)(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
       }
       return true;
     },
@@ -153,7 +154,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     onClick: (state, dispatch, view) => {
       const selectionRect = getClosestSelectionRect(state);
       if (selectionRect) {
-        deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
+        deleteColumnsWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent)(INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
       }
       return true;
     },
@@ -304,7 +305,7 @@ export const getClosestSelectionOrTableRect = state => {
   const tableRect = new Rect(0, 0, map.width, map.height);
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : tableRect;
 };
-export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options) => config => (state, intl) => {
+export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options, shouldUseIncreasedScalingPercent = false) => config => (state, intl) => {
   const tableObject = findTable(state.selection);
   const pluginState = getPluginState(state);
   const resizeState = tableResizingPluginKey.getState(state);
@@ -319,7 +320,7 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     const isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
     alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth) : [];
     let cellItems;
-    cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled);
+    cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, shouldUseIncreasedScalingPercent);
     let columnSettingsItems;
     columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) : [];
     const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView);
@@ -413,12 +414,12 @@ const separator = hidden => {
 };
 const getCellItems = (state, view, {
   formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false) => {
+}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, shouldUseIncreasedScalingPercent = false) => {
   const initialSelectionRect = getClosestSelectionRect(state);
   if (initialSelectionRect) {
     const cellOptions = getToolbarCellOptionsConfig(state, view, initialSelectionRect, {
       formatMessage
-    }, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled);
+    }, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent);
     return [cellOptions, separator(cellOptions.hidden)];
   }
   return [];
@@ -629,7 +630,8 @@ export const getSelectedAlignmentIcon = (alignmentIcons, selectedNode) => {
 };
 export const isLayoutOptionDisabled = (selectedNode, getEditorContainerWidth) => {
   const lineLength = getEditorContainerWidth().lineLength;
-  if (selectedNode && lineLength && selectedNode.attrs.width > lineLength) {
+  const tableWidth = getTableContainerWidth(selectedNode);
+  if (selectedNode && lineLength && tableWidth > lineLength) {
     return true;
   }
   return false;

package/dist/es2019/transforms/column-width.js

@@ -88,7 +88,7 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
  * @param view
  * @returns Updated transaction with rescaled columns for a given table
  */
-export const rescaleColumns = (isTableScalingEnabled = false) => (table, view) => tr => {
+export const rescaleColumns = (isTableScalingEnabled = false, shouldUseIncreasedScalingPercent = false) => (table, view) => tr => {
   if (!view) {
     return tr;
   }
@@ -170,7 +170,8 @@ export const rescaleColumns = (isTableScalingEnabled = false) => (table, view) =
     tableRef,
     domAtPos,
     maxSize: previousTableInfo.possibleMaxWidth,
-    isTableScalingEnabled: shouldScale
+    isTableScalingEnabled: shouldScale,
+    shouldUseIncreasedScalingPercent
   });
 
   // Two scenarios that require scaling:

package/dist/es2019/transforms/delete-columns.js

@@ -192,7 +192,7 @@ function fixRowSpans(table) {
   }
   return table.type.createChecked(table.attrs, rows, table.marks);
 }
-export const deleteColumns = (rect, allowCustomStep, view, isTableScalingEnabled = false) => tr => {
+export const deleteColumns = (rect, allowCustomStep, view, isTableScalingEnabled = false, shouldUseIncreasedScalingPercent = false) => tr => {
   let updatedTr = tr;
   updatedTr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
     name: TABLE_OVERFLOW_CHANGE_TRIGGER.DELETED_COLUMN
@@ -204,7 +204,7 @@ export const deleteColumns = (rect, allowCustomStep, view, isTableScalingEnabled
   }
   const table = findTable(updatedTr.selection);
   if (table) {
-    updatedTr = rescaleColumns(isTableScalingEnabled)(table, view)(updatedTr);
+    updatedTr = rescaleColumns(isTableScalingEnabled, shouldUseIncreasedScalingPercent)(table, view)(updatedTr);
   }
   return updatedTr;
 };

package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -18,6 +18,7 @@ import { splitCell } from '@atlaskit/editor-tables/utils';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, toggleContextualMenu } from '../../commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics } from '../../commands-with-analytics';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
@@ -419,6 +420,7 @@ export class ContextualMenu extends Component {
       const {
         tableDuplicateCellColouring = false
       } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
+      const shouldUseIncreasedScalingPercent = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
       switch (item.value.name) {
         case 'sort_column_desc':
           sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.left, SortOrder.DESC)(state, dispatch);
@@ -448,7 +450,7 @@ export class ContextualMenu extends Component {
           this.toggleOpen();
           break;
         case 'insert_column':
-          insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
+          insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring, shouldUseIncreasedScalingPercent)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
           this.toggleOpen();
           break;
         case 'insert_row':
@@ -459,7 +461,7 @@ export class ContextualMenu extends Component {
           this.toggleOpen();
           break;
         case 'delete_column':
-          deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch, editorView);
+          deleteColumnsWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent)(INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch, editorView);
           this.toggleOpen();
           break;
         case 'delete_row':

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -177,7 +177,8 @@ export const DragMenu = /*#__PURE__*/React.memo(({
   scrollableElement,
   boundariesElement,
   isTableScalingEnabled,
-  tableDuplicateCellColouring
+  tableDuplicateCellColouring,
+  shouldUseIncreasedScalingPercent
 }) => {
   var _pluginConfig$allowBa;
   const {
@@ -205,7 +206,7 @@ export const DragMenu = /*#__PURE__*/React.memo(({
     hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
   }
   const allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
-  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring);
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, shouldUseIncreasedScalingPercent);
   const {
     menuItems,
     menuCallback

package/dist/es2019/ui/FloatingDragMenu/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
 import DragMenu from './DragMenu';
 const FloatingDragMenu = ({
@@ -33,6 +34,7 @@ const FloatingDragMenu = ({
   const {
     tableDuplicateCellColouring = false
   } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
+  const shouldUseIncreasedScalingPercent = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
   return /*#__PURE__*/React.createElement(Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -67,7 +69,8 @@ const FloatingDragMenu = ({
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     isTableScalingEnabled: isTableScalingEnabled,
-    tableDuplicateCellColouring: tableDuplicateCellColouring
+    tableDuplicateCellColouring: tableDuplicateCellColouring,
+    shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

package/dist/es2019/ui/FloatingInsertButton/index.js

@@ -10,6 +10,7 @@ import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-s
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../commands-with-analytics';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../types';
@@ -184,6 +185,7 @@ export class FloatingInsertButton extends React.Component {
       const {
         isTableScalingEnabled = false
       } = getPluginState(editorView.state);
+      const shouldUseIncreasedScalingPercent = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
       const {
         tableDuplicateCellColouring = false
       } = getEditorFeatureFlags ? getEditorFeatureFlags() : {};
@@ -191,7 +193,7 @@ export class FloatingInsertButton extends React.Component {
         state,
         dispatch
       } = editorView;
-      insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
+      insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring, shouldUseIncreasedScalingPercent)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
     }
   }
 }

package/dist/es2019/utils/drag-menu.js

@@ -65,7 +65,7 @@ const defaultSelectionRect = {
   right: 0,
   bottom: 0
 };
-export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired, isTableScalingEnabled = false, tableDuplicateCellColouring = false) => {
+export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired, isTableScalingEnabled = false, tableDuplicateCellColouring = false, shouldUseIncreasedScalingPercent = false) => {
   var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
   const addOptions = direction === 'row' ? [{
     label: 'above',
@@ -145,7 +145,7 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
           moveCursorToInsertedRow: true
         })(state, dispatch);
       } else {
-        insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring)(INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
+        insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring, shouldUseIncreasedScalingPercent)(INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
       }
       return true;
     },

package/dist/esm/commands/column-resize.js

@@ -205,9 +205,11 @@ export var changeColumnWidthByStep = function changeColumnWidthByStep(_ref4) {
       getEditorContainerWidth: getEditorContainerWidth
     });
     var isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
-    if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+    var isTableScalingEnabledWithLockButton = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+    if (isTableScalingEnabledWithLockButton) {
       isTableScalingEnabledOnCurrentTable = originalTable.attrs.displayMode !== 'fixed';
     }
+    var shouldUseIncreasedScalingPercent = isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
     var initialResizeState = getResizeState({
       minWidth: tableCellMinWidth,
       maxSize: maxSize,
@@ -215,14 +217,15 @@ export var changeColumnWidthByStep = function changeColumnWidthByStep(_ref4) {
       tableRef: dom,
       start: tableStartPosition,
       domAtPos: domAtPos,
-      isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
+      isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
+      shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
     });
     updateControls()(state);
     var selectionRect = getSelectionRect(state.selection);
     var selectedColumns = selectionRect ? getSelectedColumnIndexes(selectionRect) : [];
     // only selected (or selected - 1) columns should be distributed
     var resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
-    var newResizeState = resizeColumn(initialResizeState, colIndex, stepSize, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, isTableScalingEnabled);
+    var newResizeState = resizeColumn(initialResizeState, colIndex, stepSize, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, isTableScalingEnabled, shouldUseIncreasedScalingPercent);
     customTr = updateColumnWidths(newResizeState, originalTable, tableStartPosition)(customTr);
     if (dispatch) {
       dispatch(customTr);

package/dist/esm/commands/delete.js

@@ -2,8 +2,9 @@ import { deleteColumns } from '../transforms/delete-columns';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
 export var deleteColumnsCommand = function deleteColumnsCommand(rect) {
   var isTableScalingEnabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return function (state, dispatch, view) {
-    var tr = deleteColumns(rect, getAllowAddColumnCustomStep(state), view, isTableScalingEnabled)(state.tr);
+    var tr = deleteColumns(rect, getAllowAddColumnCustomStep(state), view, isTableScalingEnabled, shouldUseIncreasedScalingPercent)(state.tr);
     if (dispatch) {
       dispatch(tr);
       return true;

package/dist/esm/commands/insert.js

@@ -22,6 +22,7 @@ function addColumnAtCustomStep(column) {
 export function addColumnAt() {
   var isTableScalingEnabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   var isCellBackgroundDuplicated = arguments.length > 1 ? arguments[1] : undefined;
+  var shouldUseIncreasedScalingPercent = arguments.length > 2 ? arguments[2] : undefined;
   return function (column) {
     var allowAddColumnCustomStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var view = arguments.length > 2 ? arguments[2] : undefined;
@@ -35,7 +36,7 @@ export function addColumnAt() {
       var table = findTable(updatedTr.selection);
       if (table) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
-        updatedTr = rescaleColumns(isTableScalingEnabled)(table, view)(updatedTr);
+        updatedTr = rescaleColumns(isTableScalingEnabled, shouldUseIncreasedScalingPercent)(table, view)(updatedTr);
       }
       if (view) {
         updatedTr = updateRowOrColumnMovedTransform({
@@ -54,6 +55,7 @@ export function addColumnAt() {
 // Command to add a column before the column with the selection.
 export var addColumnBefore = function addColumnBefore() {
   var isTableScalingEnabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (state, dispatch, view) {
     var table = findTable(state.selection);
     if (!table) {
@@ -61,7 +63,7 @@ export var addColumnBefore = function addColumnBefore() {
     }
     if (dispatch) {
       var rect = selectedRect(state);
-      dispatch(addColumnAt(isTableScalingEnabled)(rect.left, getAllowAddColumnCustomStep(state), view)(state.tr));
+      dispatch(addColumnAt(isTableScalingEnabled, shouldUseIncreasedScalingPercent)(rect.left, getAllowAddColumnCustomStep(state), view)(state.tr));
     }
     return true;
   };
@@ -69,7 +71,7 @@ export var addColumnBefore = function addColumnBefore() {
 
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column after the column with the selection.
-export var addColumnAfter = function addColumnAfter(isTableScalingEnabled) {
+export var addColumnAfter = function addColumnAfter(isTableScalingEnabled, shouldUseIncreasedScalingPercent) {
   return function (state, dispatch, view) {
     var table = findTable(state.selection);
     if (!table) {
@@ -77,7 +79,7 @@ export var addColumnAfter = function addColumnAfter(isTableScalingEnabled) {
     }
     if (dispatch) {
       var rect = selectedRect(state);
-      dispatch(addColumnAt(isTableScalingEnabled)(rect.right, getAllowAddColumnCustomStep(state), view)(state.tr));
+      dispatch(addColumnAt(isTableScalingEnabled, shouldUseIncreasedScalingPercent)(rect.right, getAllowAddColumnCustomStep(state), view)(state.tr));
     }
     return true;
   };
@@ -85,9 +87,10 @@ export var addColumnAfter = function addColumnAfter(isTableScalingEnabled) {
 export var insertColumn = function insertColumn() {
   var isTableScalingEnabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   var isCellBackgroundDuplicated = arguments.length > 1 ? arguments[1] : undefined;
+  var shouldUseIncreasedScalingPercent = arguments.length > 2 ? arguments[2] : undefined;
   return function (column) {
     return function (state, dispatch, view) {
-      var tr = addColumnAt(isTableScalingEnabled, isCellBackgroundDuplicated)(column, getAllowAddColumnCustomStep(state), view)(state.tr);
+      var tr = addColumnAt(isTableScalingEnabled, isCellBackgroundDuplicated, shouldUseIncreasedScalingPercent)(column, getAllowAddColumnCustomStep(state), view)(state.tr);
       var table = findTable(tr.selection);
       if (!table) {
         return false;

package/dist/esm/commands/misc.js

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import isEqual from 'lodash/isEqual';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { closestElement, isParagraph, isTextSelection, mapSlice } from '@atlaskit/editor-common/utils';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -590,6 +591,13 @@ export var setTableAlignment = function setTableAlignment(newAlignment) {
     var nextTableAttrs = _objectSpread(_objectSpread({}, tableObject.node.attrs), {}, {
       layout: newAlignment
     });
+
+    // table uses old breakout values in layout attribute to determine width
+    // but that information is lost when alignment changes, so we need to ensure we retain that info
+    if (!tableObject.node.attrs.width) {
+      var tableWidth = getTableContainerWidth(tableObject.node);
+      nextTableAttrs.width = tableWidth;
+    }
     tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
     return tr;
   };
@@ -597,9 +605,17 @@ export var setTableAlignment = function setTableAlignment(newAlignment) {
 export var setTableAlignmentWithTableContentWithPos = function setTableAlignmentWithTableContentWithPos(newAlignment, tableNodeWithPos) {
   return function (_ref3) {
     var tr = _ref3.tr;
-    var nextTableAttrs = _objectSpread(_objectSpread({}, tableNodeWithPos.node.attrs), {}, {
+    var table = tableNodeWithPos.node;
+    var nextTableAttrs = _objectSpread(_objectSpread({}, table.attrs), {}, {
       layout: newAlignment
     });
+
+    // table uses old breakout values in layout attribute to determine width
+    // but that information is lost when alignment changes, so we need to ensure we retain that info
+    if (!table.attrs.width) {
+      var tableWidth = getTableContainerWidth(table);
+      nextTableAttrs.width = tableWidth;
+    }
     tr.setNodeMarkup(tableNodeWithPos.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
     return tr;
   };

package/dist/esm/commands-with-analytics.js

@@ -221,6 +221,7 @@ export var changeColumnWidthByStepWithAnalytics = function changeColumnWidthBySt
 export var insertColumnWithAnalytics = function insertColumnWithAnalytics(editorAnalyticsAPI) {
   var isTableScalingEnabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var isCellbackgroundDuplicated = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   return function (inputMethod, position) {
     return withEditorAnalyticsAPI(function (state) {
       var _getSelectedTableInfo3 = getSelectedTableInfo(state.selection),
@@ -238,7 +239,7 @@ export var insertColumnWithAnalytics = function insertColumnWithAnalytics(editor
         },
         eventType: EVENT_TYPE.TRACK
       };
-    })(editorAnalyticsAPI)(insertColumn(isTableScalingEnabled, isCellbackgroundDuplicated)(position));
+    })(editorAnalyticsAPI)(insertColumn(isTableScalingEnabled, isCellbackgroundDuplicated, shouldUseIncreasedScalingPercent)(position));
   };
 };
 export var deleteRowsWithAnalytics = function deleteRowsWithAnalytics(editorAnalyticsAPI) {
@@ -271,6 +272,7 @@ export var deleteRowsWithAnalytics = function deleteRowsWithAnalytics(editorAnal
 };
 export var deleteColumnsWithAnalytics = function deleteColumnsWithAnalytics(editorAnalyticsAPI) {
   var isTableScalingEnabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return function (inputMethod, rect) {
     return withEditorAnalyticsAPI(function (_ref6) {
       var selection = _ref6.selection;
@@ -290,10 +292,10 @@ export var deleteColumnsWithAnalytics = function deleteColumnsWithAnalytics(edit
         },
         eventType: EVENT_TYPE.TRACK
       };
-    })(editorAnalyticsAPI)(deleteColumnsCommand(rect, isTableScalingEnabled));
+    })(editorAnalyticsAPI)(deleteColumnsCommand(rect, isTableScalingEnabled, shouldUseIncreasedScalingPercent));
   };
 };
-export var deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = function deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI) {
+export var deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = function deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent) {
   return function (state, dispatch) {
     var selection = state.selection;
     var isCellSelection = selection instanceof CellSelection;
@@ -311,7 +313,7 @@ export var deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = function delete
       var isHeaderRowRequired = pluginConfig.isHeaderRowRequired || false;
       return deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, rect, isHeaderRowRequired)(state, dispatch);
     } else if (selectionType === 'column') {
-      return deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, rect)(state, dispatch);
+      return deleteColumnsWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent)(INPUT_METHOD.SHORTCUT, rect)(state, dispatch);
     } else {
       return false;
     }

package/dist/esm/event-handlers.js

@@ -345,6 +345,7 @@ export function handleTripleClick(view, pos) {
 }
 export var handleCut = function handleCut(oldTr, oldState, newState, editorAnalyticsAPI, editorView) {
   var isTableScalingEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   var oldSelection = oldState.tr.selection;
   var tr = newState.tr;
   if (oldSelection instanceof CellSelection) {
@@ -387,7 +388,7 @@ export var handleCut = function handleCut(oldTr, oldState, newState, editorAnaly
               isHeaderRowRequired = _getPluginState9.pluginConfig.isHeaderRowRequired;
             tr = deleteRows(rect, isHeaderRowRequired)(tr);
           } else if (tr.selection.isColSelection()) {
-            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView, isTableScalingEnabled)(tr);
+            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView, isTableScalingEnabled, shouldUseIncreasedScalingPercent)(tr);
           }
         }
       }