@atlaskit/editor-plugin-table 7.16.13 → 7.16.15

package/dist/cjs/pm-plugins/table-resizing/utils/consts.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TABLE_MAX_WIDTH = exports.TABLE_EDITOR_MARGIN = exports.TABLE_DEFAULT_WIDTH = exports.MAX_SCALING_PERCENT = exports.COLUMN_MIN_WIDTH = void 0;
+exports.TABLE_MAX_WIDTH = exports.TABLE_EDITOR_MARGIN = exports.TABLE_DEFAULT_WIDTH = exports.MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = exports.MAX_SCALING_PERCENT = exports.COLUMN_MIN_WIDTH = void 0;
 var COLUMN_MIN_WIDTH = exports.COLUMN_MIN_WIDTH = 48;
 var TABLE_DEFAULT_WIDTH = exports.TABLE_DEFAULT_WIDTH = 760;
 var TABLE_MAX_WIDTH = exports.TABLE_MAX_WIDTH = 1800;
 var MAX_SCALING_PERCENT = exports.MAX_SCALING_PERCENT = 0.3;
+var MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = exports.MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
 // Used to calculate the width of a table using the Editor width
 var TABLE_EDITOR_MARGIN = exports.TABLE_EDITOR_MARGIN = 76;

package/dist/cjs/pm-plugins/table-resizing/utils/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "MAX_SCALING_PERCENT", {
     return _consts.MAX_SCALING_PERCENT;
   }
 });
+Object.defineProperty(exports, "MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION", {
+  enumerable: true,
+  get: function get() {
+    return _consts.MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION;
+  }
+});
 Object.defineProperty(exports, "TABLE_DEFAULT_WIDTH", {
   enumerable: true,
   get: function get() {

package/dist/cjs/pm-plugins/table-resizing/utils/misc.js

@@ -100,19 +100,21 @@ var getTableElementWidth = exports.getTableElementWidth = function getTableEleme
 var getTableContainerElementWidth = exports.getTableContainerElementWidth = function getTableContainerElementWidth(table) {
   return (0, _nodeWidth.getTableContainerWidth)(table);
 };
-var getTableScalingPercent = exports.getTableScalingPercent = function getTableScalingPercent(table, tableRef) {
+var getTableScalingPercent = exports.getTableScalingPercent = function getTableScalingPercent(table, tableRef, shouldUseIncreasedScalingPercent) {
   var _tableRef$parentEleme;
+  var maxScalingPercent = shouldUseIncreasedScalingPercent ? _consts.MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION : _consts.MAX_SCALING_PERCENT;
   var tableWidth = getTableContainerElementWidth(table);
   var renderWidth = (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || tableWidth;
   // minus 1 here to avoid any 1px scroll in Firefox
   var scalePercent = (renderWidth - 1) / tableWidth;
-  scalePercent = Math.max(scalePercent, 1 - _consts.MAX_SCALING_PERCENT);
+  scalePercent = Math.max(scalePercent, 1 - maxScalingPercent);
   return Math.min(scalePercent, 1);
 };
-var getStaticTableScalingPercent = exports.getStaticTableScalingPercent = function getStaticTableScalingPercent(table, tableRenderWidth) {
+var getStaticTableScalingPercent = exports.getStaticTableScalingPercent = function getStaticTableScalingPercent(table, tableRenderWidth, shouldUseIncreasedScalingPercent) {
+  var maxScalingPercent = shouldUseIncreasedScalingPercent ? _consts.MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION : _consts.MAX_SCALING_PERCENT;
   var tableWidth = getTableContainerElementWidth(table);
   // minus 1 here to avoid any 1px scroll in Firefox
   var scalePercent = (tableRenderWidth - 1) / tableWidth;
-  scalePercent = Math.max(scalePercent, 1 - _consts.MAX_SCALING_PERCENT);
+  scalePercent = Math.max(scalePercent, 1 - maxScalingPercent);
   return Math.min(scalePercent, 1);
 };

package/dist/cjs/pm-plugins/table-resizing/utils/resize-column.js

@@ -14,14 +14,15 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { (0, _defineProperty2.default)(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; } // Resize a given column by an amount from the current state
 var resizeColumn = exports.resizeColumn = function resizeColumn(resizeState, colIndex, amount, tableRef, tableNode, selectedColumns) {
   var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
   var scalePercent = 1;
   var resizeAmount = amount;
   if (isTableScalingEnabled) {
-    scalePercent = (0, _misc.getTableScalingPercent)(tableNode, tableRef);
+    scalePercent = (0, _misc.getTableScalingPercent)(tableNode, tableRef, shouldUseIncreasedScalingPercent);
     resizeAmount = amount / scalePercent;
   }
   var newState = resizeAmount > 0 ? (0, _resizeLogic.growColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? (0, _resizeLogic.shrinkColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
-  (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, isTableScalingEnabled);
+  (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, isTableScalingEnabled, shouldUseIncreasedScalingPercent);
   return newState;
 };
 
@@ -30,6 +31,7 @@ var resizeColumnAndTable = exports.resizeColumnAndTable = function resizeColumnA
   var _tableRef$closest;
   var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   var originalTableWidth = arguments.length > 7 ? arguments[7] : undefined;
+  var shouldUseIncreasedScalingPercent = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
   // TODO: can we use document state, and apply scaling factor?
   var tableWidth = tableRef.clientWidth;
   var tableContainerWidth = (_tableRef$closest = tableRef.closest('.pm-table-container')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
@@ -57,7 +59,7 @@ var resizeColumnAndTable = exports.resizeColumnAndTable = function resizeColumnA
 
   // this function only updates the colgroup in DOM, it reverses the scalePercent
   // todo: change isScalingEnabled to true when reimplementing scaling
-  (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, false);
+  (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, false, shouldUseIncreasedScalingPercent);
 
   // use the difference in width from affected column to update overall table width
   var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;

package/dist/cjs/pm-plugins/table-resizing/utils/resize-state.js

@@ -25,9 +25,11 @@ var getResizeState = exports.getResizeState = function getResizeState(_ref) {
     start = _ref.start,
     domAtPos = _ref.domAtPos,
     _ref$isTableScalingEn = _ref.isTableScalingEnabled,
-    isTableScalingEnabled = _ref$isTableScalingEn === void 0 ? false : _ref$isTableScalingEn;
+    isTableScalingEnabled = _ref$isTableScalingEn === void 0 ? false : _ref$isTableScalingEn,
+    _ref$shouldUseIncreas = _ref.shouldUseIncreasedScalingPercent,
+    shouldUseIncreasedScalingPercent = _ref$shouldUseIncreas === void 0 ? false : _ref$shouldUseIncreas;
   if (isTableScalingEnabled) {
-    var scalePercent = (0, _misc.getTableScalingPercent)(table, tableRef);
+    var scalePercent = (0, _misc.getTableScalingPercent)(table, tableRef, shouldUseIncreasedScalingPercent);
     minWidth = Math.ceil(minWidth / scalePercent);
   }
   // If the table has been resized, we can use the column widths from the table node
@@ -58,8 +60,9 @@ var getResizeState = exports.getResizeState = function getResizeState(_ref) {
   var shouldReinsertColgroup = !isTableScalingEnabled;
 
   // Getting the resize state from DOM
-  var colgroupChildren = (0, _colgroup.insertColgroupFromNode)(tableRef, table, isTableScalingEnabled, shouldReinsertColgroup // don't reinsert colgroup when preserving table width - this causes widths to jump
-  );
+  var colgroupChildren = (0, _colgroup.insertColgroupFromNode)(tableRef, table, isTableScalingEnabled, shouldReinsertColgroup,
+  // don't reinsert colgroup when preserving table width - this causes widths to jump
+  shouldUseIncreasedScalingPercent);
   var cols = Array.from(colgroupChildren).map(function (_, index) {
     // If the table hasn't been resized and we have a table width attribute, we can use it
     // to calculate the widths of the columns
@@ -92,7 +95,7 @@ var getResizeState = exports.getResizeState = function getResizeState(_ref) {
 };
 
 // updates Colgroup DOM node with new widths
-var updateColgroup = exports.updateColgroup = function updateColgroup(state, tableRef, tableNode, isTableScalingEnabled) {
+var updateColgroup = exports.updateColgroup = function updateColgroup(state, tableRef, tableNode, isTableScalingEnabled, shouldUseIncreasedScalingPercent) {
   var cols = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelectorAll('col');
   var columnsCount = cols === null || cols === void 0 ? void 0 : cols.length;
   /**
@@ -101,7 +104,7 @@ var updateColgroup = exports.updateColgroup = function updateColgroup(state, tab
       We need to remove !isColumnResizing if we handled auto scale table when mouseUp event.
       * */
   if (isTableScalingEnabled && tableNode) {
-    var scalePercent = (0, _misc.getTableScalingPercent)(tableNode, tableRef);
+    var scalePercent = (0, _misc.getTableScalingPercent)(tableNode, tableRef, shouldUseIncreasedScalingPercent);
     state.cols.filter(function (column) {
       return column && !!column.width;
     }) // if width is 0, we dont want to apply that.
@@ -335,7 +338,8 @@ var getNewResizeStateFromSelectedColumns = exports.getNewResizeStateFromSelected
   });
   var resizeState;
   var isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
-  if (isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
+  var isTableScalingEnabledWithLockButton = isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button');
+  if (isTableScalingEnabledWithLockButton) {
     isTableScalingEnabledOnCurrentTable = table.node.attrs.displayMode !== 'fixed';
   }
   resizeState = getResizeState({
@@ -345,7 +349,8 @@ var getNewResizeStateFromSelectedColumns = exports.getNewResizeStateFromSelected
     tableRef: tableRef,
     start: table.start,
     domAtPos: domAtPos,
-    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
+    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
+    shouldUseIncreasedScalingPercent: isTableScalingEnabledWithLockButton && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-increased-scaling-percent')
   });
   var newResizeState = evenSelectedColumnsWidths(resizeState, rect);
   var widthsBefore = resizeState.widths;

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

@@ -25,6 +25,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // Will only resize/scale if a table has been previously resized.
 var scale = exports.scale = function scale(tableRef, options, domAtPos) {
   var isTableScalingEnabledOnCurrentTable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var node = options.node,
     containerWidth = options.containerWidth,
     previousContainerWidth = options.previousContainerWidth,
@@ -60,12 +61,14 @@ var scale = exports.scale = function scale(tableRef, options, domAtPos) {
     tableRef: tableRef,
     start: start,
     domAtPos: domAtPos,
-    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
+    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
+    shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
   });
   return scaleTableTo(resizeState, newWidth);
 };
 var scaleWithParent = exports.scaleWithParent = function scaleWithParent(tableRef, parentWidth, table, start, domAtPos) {
   var isTableScalingEnabledOnCurrentTable = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   var resizeState = (0, _resizeState.getResizeState)({
     minWidth: _styles.tableCellMinWidth,
     maxSize: parentWidth,
@@ -73,7 +76,8 @@ var scaleWithParent = exports.scaleWithParent = function scaleWithParent(tableRe
     tableRef: tableRef,
     start: start,
     domAtPos: domAtPos,
-    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
+    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
+    shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
   });
   if (table.attrs.isNumberColumnEnabled) {
     parentWidth -= _editorSharedStyles.akEditorTableNumberColumnWidth;
@@ -118,7 +122,8 @@ var previewScaleTable = exports.previewScaleTable = function previewScaleTable(t
     tableRef.style.width = "".concat(width, "px");
   }
   var isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
-  if (isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
+  var isTableScalingEnabledWithLockButton = isTableScalingEnabled && (0, _platformFeatureFlags.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.
@@ -127,16 +132,19 @@ var previewScaleTable = exports.previewScaleTable = function previewScaleTable(t
     (0, _dom.syncStickyRowToTable)(tableRef);
     return;
   }
-  var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false) // Here last value is isTableScalingEnabled = false
-  : scale(tableRef, options, domAtPos, false);
+  var shouldUseIncreasedScalingPercent = isTableScalingEnabledWithLockButton && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-increased-scaling-percent');
+  var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false,
+  // Here isTableScalingEnabled = false
+  shouldUseIncreasedScalingPercent) : scale(tableRef, options, domAtPos, false, shouldUseIncreasedScalingPercent);
   if (resizeState) {
-    (0, _resizeState.updateColgroup)(resizeState, tableRef, node, false);
+    (0, _resizeState.updateColgroup)(resizeState, tableRef, node, false, shouldUseIncreasedScalingPercent);
   }
 };
 
 // Scale the table to meet new requirements (col, layout change etc)
 var scaleTable = exports.scaleTable = function scaleTable(tableRef, options, domAtPos) {
   var isTableScalingEnabledOnCurrentTable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   return function (tr) {
     if (!tableRef) {
       return tr;
@@ -150,16 +158,16 @@ var scaleTable = exports.scaleTable = function scaleTable(tableRef, options, dom
       // If its not a re-sized table, we still want to re-create cols
       // To force reflow of columns upon delete.
       if (!isTableScalingEnabledOnCurrentTable) {
-        (0, _colgroup.insertColgroupFromNode)(tableRef, node);
+        (0, _colgroup.insertColgroupFromNode)(tableRef, node, false, undefined, shouldUseIncreasedScalingPercent);
       }
       tr.setMeta('scrollIntoView', false);
       return tr;
     }
     var 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 = (0, _transforms.updateColumnWidths)(resizeState, node, start)(tr);

package/dist/cjs/toolbar.js

@@ -14,6 +14,7 @@ var _customSteps = require("@atlaskit/custom-steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
+var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
@@ -117,6 +118,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
   var _pluginState$pluginCo, _pluginState$pluginCo2;
   var formatMessage = _ref2.formatMessage;
   var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
   var top = initialSelectionRect.top,
     bottom = initialSelectionRect.bottom,
     right = initialSelectionRect.right,
@@ -131,7 +133,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
       var selectionRect = getClosestSelectionRect(state);
       var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right;
       if (index) {
-        (0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled)(_analytics.INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
+        (0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent)(_analytics.INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
       }
       return true;
     },
@@ -167,7 +169,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
     onClick: function onClick(state, dispatch, view) {
       var selectionRect = getClosestSelectionRect(state);
       if (selectionRect) {
-        (0, _commandsWithAnalytics.deleteColumnsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
+        (0, _commandsWithAnalytics.deleteColumnsWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent)(_analytics.INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
       }
       return true;
     },
@@ -318,6 +320,7 @@ var getClosestSelectionOrTableRect = exports.getClosestSelectionOrTableRect = fu
   return (0, _utils3.isSelectionType)(selection, 'cell') ? (0, _utils3.getSelectionRect)(selection) : tableRect;
 };
 var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options) {
+  var shouldUseIncreasedScalingPercent = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   return function (config) {
     return function (state, intl) {
       var tableObject = (0, _utils3.findTable)(state.selection);
@@ -334,7 +337,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
         var isNested = pluginState.tablePos && (0, _utils4.isTableNested)(state, pluginState.tablePos);
         alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth) : [];
         var 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);
         var columnSettingsItems;
         columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) : [];
         var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView);
@@ -437,11 +440,12 @@ var separator = function separator(hidden) {
 var getCellItems = function getCellItems(state, view, _ref3, getEditorContainerWidth, editorAnalyticsAPI) {
   var formatMessage = _ref3.formatMessage;
   var isTableScalingEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   var initialSelectionRect = getClosestSelectionRect(state);
   if (initialSelectionRect) {
     var cellOptions = getToolbarCellOptionsConfig(state, view, initialSelectionRect, {
       formatMessage: formatMessage
-    }, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled);
+    }, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent);
     return [cellOptions, separator(cellOptions.hidden)];
   }
   return [];
@@ -661,7 +665,8 @@ var getSelectedAlignmentIcon = exports.getSelectedAlignmentIcon = function getSe
 };
 var isLayoutOptionDisabled = exports.isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth) {
   var lineLength = getEditorContainerWidth().lineLength;
-  if (selectedNode && lineLength && selectedNode.attrs.width > lineLength) {
+  var tableWidth = (0, _nodeWidth.getTableContainerWidth)(selectedNode);
+  if (selectedNode && lineLength && tableWidth > lineLength) {
     return true;
   }
   return false;

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

@@ -98,6 +98,7 @@ var updateColumnWidths = exports.updateColumnWidths = function updateColumnWidth
  */
 var rescaleColumns = exports.rescaleColumns = function rescaleColumns() {
   var isTableScalingEnabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (table, view) {
     return function (tr) {
       if (!view) {
@@ -183,7 +184,8 @@ var rescaleColumns = exports.rescaleColumns = function rescaleColumns() {
         tableRef: tableRef,
         domAtPos: domAtPos,
         maxSize: previousTableInfo.possibleMaxWidth,
-        isTableScalingEnabled: shouldScale
+        isTableScalingEnabled: shouldScale,
+        shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
       });
 
       // Two scenarios that require scaling:

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

@@ -213,6 +213,7 @@ function fixRowSpans(table) {
 }
 var deleteColumns = exports.deleteColumns = function deleteColumns(rect, allowCustomStep, view) {
   var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   return function (tr) {
     var updatedTr = tr;
     updatedTr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
@@ -225,7 +226,7 @@ var deleteColumns = exports.deleteColumns = function deleteColumns(rect, allowCu
     }
     var table = (0, _utils.findTable)(updatedTr.selection);
     if (table) {
-      updatedTr = (0, _columnWidth.rescaleColumns)(isTableScalingEnabled)(table, view)(updatedTr);
+      updatedTr = (0, _columnWidth.rescaleColumns)(isTableScalingEnabled, shouldUseIncreasedScalingPercent)(table, view)(updatedTr);
     }
     return updatedTr;
   };

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

@@ -30,6 +30,7 @@ var _utils2 = require("@atlaskit/editor-tables/utils");
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
 var _backgroundColor = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/background-color"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../../commands");
 var _commandsWithAnalytics = require("../../commands-with-analytics");
 var _pluginFactory = require("../../pm-plugins/plugin-factory");
@@ -387,6 +388,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
       var _ref2 = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
         _ref2$tableDuplicateC = _ref2.tableDuplicateCellColouring,
         tableDuplicateCellColouring = _ref2$tableDuplicateC === void 0 ? false : _ref2$tableDuplicateC;
+      var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button') && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-increased-scaling-percent');
       switch (item.value.name) {
         case 'sort_column_desc':
           (0, _commandsWithAnalytics.sortColumnWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect.left, _customSteps.TableSortOrder.DESC)(state, dispatch);
@@ -416,7 +418,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           _this.toggleOpen();
           break;
         case 'insert_column':
-          (0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
+          (0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring, shouldUseIncreasedScalingPercent)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
           _this.toggleOpen();
           break;
         case 'insert_row':
@@ -427,7 +429,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           _this.toggleOpen();
           break;
         case 'delete_column':
-          (0, _commandsWithAnalytics.deleteColumnsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch, editorView);
+          (0, _commandsWithAnalytics.deleteColumnsWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled, shouldUseIncreasedScalingPercent)(_analytics.INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch, editorView);
           _this.toggleOpen();
           break;
         case 'delete_row':

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

@@ -192,7 +192,8 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
     scrollableElement = _ref.scrollableElement,
     boundariesElement = _ref.boundariesElement,
     isTableScalingEnabled = _ref.isTableScalingEnabled,
-    tableDuplicateCellColouring = _ref.tableDuplicateCellColouring;
+    tableDuplicateCellColouring = _ref.tableDuplicateCellColouring,
+    shouldUseIncreasedScalingPercent = _ref.shouldUseIncreasedScalingPercent;
   var state = editorView.state,
     dispatch = editorView.dispatch;
   var selection = state.selection;
@@ -216,7 +217,7 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
     hasMergedCellsInTable = (0, _utils3.getMergedCellsPositions)(state.tr).length > 0;
   }
   var allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
-  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring);
+  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, shouldUseIncreasedScalingPercent);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;

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

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _consts = require("../consts");
 var _DragMenu = _interopRequireDefault(require("./DragMenu"));
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
@@ -39,6 +40,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   var _ref2 = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
     _ref2$tableDuplicateC = _ref2.tableDuplicateCellColouring,
     tableDuplicateCellColouring = _ref2$tableDuplicateC === void 0 ? false : _ref2$tableDuplicateC;
+  var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button') && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-increased-scaling-percent');
   return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -73,7 +75,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
     isTableScalingEnabled: isTableScalingEnabled,
-    tableDuplicateCellColouring: tableDuplicateCellColouring
+    tableDuplicateCellColouring: tableDuplicateCellColouring,
+    shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

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

@@ -24,6 +24,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils3 = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commandsWithAnalytics = require("../../commands-with-analytics");
 var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _types = require("../../types");
@@ -205,12 +206,13 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
         var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
           _getPluginState$isTab = _getPluginState.isTableScalingEnabled,
           isTableScalingEnabled = _getPluginState$isTab === void 0 ? false : _getPluginState$isTab;
+        var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button') && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-increased-scaling-percent');
         var _ref = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
           _ref$tableDuplicateCe = _ref.tableDuplicateCellColouring,
           tableDuplicateCellColouring = _ref$tableDuplicateCe === void 0 ? false : _ref$tableDuplicateCe;
         var state = editorView.state,
           dispatch = editorView.dispatch;
-        (0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring)(_analytics.INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
+        (0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring, shouldUseIncreasedScalingPercent)(_analytics.INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
       }
     }
   }]);

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

@@ -79,6 +79,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
   var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
   var isTableScalingEnabled = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : false;
   var tableDuplicateCellColouring = arguments.length > 12 && arguments[12] !== undefined ? arguments[12] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 13 && arguments[13] !== undefined ? arguments[13] : false;
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -163,7 +164,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
             moveCursorToInsertedRow: true
           })(state, dispatch);
         } else {
-          (0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
+          (0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring, shouldUseIncreasedScalingPercent)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
         }
         return true;
       },

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

@@ -206,9 +206,11 @@ export const changeColumnWidthByStep = ({
     getEditorContainerWidth
   });
   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 = originalTable.attrs.displayMode !== 'fixed';
   }
+  const shouldUseIncreasedScalingPercent = isTableScalingEnabledWithLockButton && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
   const initialResizeState = getResizeState({
     minWidth: tableCellMinWidth,
     maxSize,
@@ -216,14 +218,15 @@ export const changeColumnWidthByStep = ({
     tableRef: dom,
     start: tableStartPosition,
     domAtPos,
-    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
+    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
+    shouldUseIncreasedScalingPercent
   });
   updateControls()(state);
   const selectionRect = getSelectionRect(state.selection);
   const selectedColumns = selectionRect ? getSelectedColumnIndexes(selectionRect) : [];
   // only selected (or selected - 1) columns should be distributed
   const resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
-  let newResizeState = resizeColumn(initialResizeState, colIndex, stepSize, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, isTableScalingEnabled);
+  let newResizeState = resizeColumn(initialResizeState, colIndex, stepSize, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, isTableScalingEnabled, shouldUseIncreasedScalingPercent);
   customTr = updateColumnWidths(newResizeState, originalTable, tableStartPosition)(customTr);
   if (dispatch) {
     dispatch(customTr);

package/dist/es2019/commands/delete.js

@@ -1,7 +1,7 @@
 import { deleteColumns } from '../transforms/delete-columns';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
-export const deleteColumnsCommand = (rect, isTableScalingEnabled = false) => (state, dispatch, view) => {
-  const tr = deleteColumns(rect, getAllowAddColumnCustomStep(state), view, isTableScalingEnabled)(state.tr);
+export const deleteColumnsCommand = (rect, isTableScalingEnabled = false, shouldUseIncreasedScalingPercent = false) => (state, dispatch, view) => {
+  const tr = deleteColumns(rect, getAllowAddColumnCustomStep(state), view, isTableScalingEnabled, shouldUseIncreasedScalingPercent)(state.tr);
   if (dispatch) {
     dispatch(tr);
     return true;

package/dist/es2019/commands/insert.js

@@ -19,7 +19,7 @@ function addColumnAtCustomStep(column) {
     return tr;
   };
 }
-export function addColumnAt(isTableScalingEnabled = false, isCellBackgroundDuplicated) {
+export function addColumnAt(isTableScalingEnabled = false, isCellBackgroundDuplicated, shouldUseIncreasedScalingPercent) {
   return (column, allowAddColumnCustomStep = false, view) => {
     return tr => {
       let updatedTr = tr;
@@ -31,7 +31,7 @@ export function addColumnAt(isTableScalingEnabled = false, isCellBackgroundDupli
       const 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({
@@ -48,33 +48,33 @@ export function addColumnAt(isTableScalingEnabled = false, isCellBackgroundDupli
 
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
-export const addColumnBefore = (isTableScalingEnabled = false) => (state, dispatch, view) => {
+export const addColumnBefore = (isTableScalingEnabled = false, shouldUseIncreasedScalingPercent = false) => (state, dispatch, view) => {
   const table = findTable(state.selection);
   if (!table) {
     return false;
   }
   if (dispatch) {
     let 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;
 };
 
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column after the column with the selection.
-export const addColumnAfter = isTableScalingEnabled => (state, dispatch, view) => {
+export const addColumnAfter = (isTableScalingEnabled, shouldUseIncreasedScalingPercent) => (state, dispatch, view) => {
   const table = findTable(state.selection);
   if (!table) {
     return false;
   }
   if (dispatch) {
     let 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;
 };
-export const insertColumn = (isTableScalingEnabled = false, isCellBackgroundDuplicated) => column => (state, dispatch, view) => {
-  let tr = addColumnAt(isTableScalingEnabled, isCellBackgroundDuplicated)(column, getAllowAddColumnCustomStep(state), view)(state.tr);
+export const insertColumn = (isTableScalingEnabled = false, isCellBackgroundDuplicated, shouldUseIncreasedScalingPercent) => column => (state, dispatch, view) => {
+  let tr = addColumnAt(isTableScalingEnabled, isCellBackgroundDuplicated, shouldUseIncreasedScalingPercent)(column, getAllowAddColumnCustomStep(state), view)(state.tr);
   const table = findTable(tr.selection);
   if (!table) {
     return false;

package/dist/es2019/commands/misc.js

@@ -1,4 +1,5 @@
 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';
@@ -561,16 +562,31 @@ export const setTableAlignment = newAlignment => ({
     ...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) {
+    const tableWidth = getTableContainerWidth(tableObject.node);
+    nextTableAttrs.width = tableWidth;
+  }
   tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
   return tr;
 };
 export const setTableAlignmentWithTableContentWithPos = (newAlignment, tableNodeWithPos) => ({
   tr
 }) => {
+  const table = tableNodeWithPos.node;
   const nextTableAttrs = {
-    ...tableNodeWithPos.node.attrs,
+    ...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) {
+    const tableWidth = getTableContainerWidth(table);
+    nextTableAttrs.width = tableWidth;
+  }
   tr.setNodeMarkup(tableNodeWithPos.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
   return tr;
 };