@atlaskit/editor-plugin-table 7.5.3 → 7.5.5

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 _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _consts = require("../consts");
 var _DragMenu = _interopRequireDefault(require("./DragMenu"));
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
@@ -24,8 +25,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     getEditorContainerWidth = _ref.getEditorContainerWidth,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     stickyHeaders = _ref.stickyHeaders,
-    pluginConfig = _ref.pluginConfig,
-    getEditorFeatureFlags = _ref.getEditorFeatureFlags;
+    pluginConfig = _ref.pluginConfig;
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
@@ -35,9 +35,9 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   if (!targetHandleRef || !(editorView.state.selection instanceof _cellSelection.CellSelection)) {
     return null;
   }
-  var _getEditorFeatureFlag = getEditorFeatureFlags(),
-    _getEditorFeatureFlag2 = _getEditorFeatureFlag.tablePreserveWidth,
-    tablePreserveWidth = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
+  var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
+    _getPluginState$isTab = _getPluginState.isTableScalingEnabled,
+    isTableScalingEnabled = _getPluginState$isTab === void 0 ? false : _getPluginState$isTab;
   return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -71,7 +71,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     mountPoint: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    tablePreserveWidth: tablePreserveWidth
+    isTableScalingEnabled: isTableScalingEnabled
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

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

@@ -25,6 +25,7 @@ var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils3 = require("@atlaskit/editor-tables/utils");
 var _commandsWithAnalytics = require("../../commands-with-analytics");
+var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _types = require("../../types");
 var _utils4 = require("../../utils");
 var _getPopupOptions = _interopRequireDefault(require("./getPopupOptions"));
@@ -195,17 +196,15 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
       var _this$props4 = this.props,
         editorView = _this$props4.editorView,
         insertColumnButtonIndex = _this$props4.insertColumnButtonIndex,
-        editorAnalyticsAPI = _this$props4.editorAnalyticsAPI,
-        getEditorContainerWidth = _this$props4.getEditorContainerWidth;
+        editorAnalyticsAPI = _this$props4.editorAnalyticsAPI;
       if (typeof insertColumnButtonIndex !== 'undefined') {
-        var _this$props$getEditor, _this$props5;
         event.preventDefault();
-        var _ref = ((_this$props$getEditor = (_this$props5 = this.props).getEditorFeatureFlags) === null || _this$props$getEditor === void 0 ? void 0 : _this$props$getEditor.call(_this$props5)) || {},
-          _ref$tablePreserveWid = _ref.tablePreserveWidth,
-          tablePreserveWidth = _ref$tablePreserveWid === void 0 ? false : _ref$tablePreserveWid;
+        var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
+          _getPluginState$isTab = _getPluginState.isTableScalingEnabled,
+          isTableScalingEnabled = _getPluginState$isTab === void 0 ? false : _getPluginState$isTab;
         var state = editorView.state,
           dispatch = editorView.dispatch;
-        (0, _commandsWithAnalytics.insertColumnWithAnalytics)(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(_analytics.INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
+        (0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled)(_analytics.INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
       }
     }
   }]);

package/dist/cjs/utils/create.js

@@ -10,12 +10,9 @@ var _utils = require("@atlaskit/editor-tables/utils");
 var _utils2 = require("../pm-plugins/table-resizing/utils");
 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) { (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; }
-var createTableWithWidth = exports.createTableWithWidth = function createTableWithWidth(isFullWidthModeEnabled, getEditorFeatureFlags, createTableProps) {
+var createTableWithWidth = exports.createTableWithWidth = function createTableWithWidth(isTableScalingEnabled, isFullWidthModeEnabled, createTableProps) {
   return function (schema) {
-    var _ref = (getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags()) || {},
-      _ref$tablePreserveWid = _ref.tablePreserveWidth,
-      tablePreserveWidth = _ref$tablePreserveWid === void 0 ? false : _ref$tablePreserveWid;
-    if (tablePreserveWidth && isFullWidthModeEnabled) {
+    if (isTableScalingEnabled && isFullWidthModeEnabled) {
       return (0, _utils.createTable)(_objectSpread({
         schema: schema,
         tableWidth: _utils2.TABLE_MAX_WIDTH

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

@@ -70,7 +70,7 @@ var defaultSelectionRect = {
 };
 var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, isHeaderRowRequired) {
   var _tableMap$height, _tableMap$height2, _tableMap$width, _tableMap$width2;
-  var tablePreserveWidth = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : false;
+  var isTableScalingEnabled = arguments.length > 11 && arguments[11] !== undefined ? arguments[11] : false;
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -155,7 +155,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
             moveCursorToInsertedRow: true
           })(state, dispatch);
         } else {
-          (0, _commandsWithAnalytics.insertColumnWithAnalytics)(getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
+          (0, _commandsWithAnalytics.insertColumnWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, (index !== null && index !== void 0 ? index : 0) + offset)(state, dispatch, editorView);
         }
         return true;
       },
@@ -168,7 +168,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     onClick: function onClick(state, dispatch) {
       var selectionRect = (0, _toolbar.getClosestSelectionRect)(state);
       if (selectionRect) {
-        var newResizeState = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, tablePreserveWidth);
+        var newResizeState = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
         if (newResizeState) {
           (0, _commandsWithAnalytics.distributeColumnsWidthsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, newResizeState)(state, dispatch);
           return true;
@@ -194,7 +194,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
       if (direction === 'row') {
         (0, _commandsWithAnalytics.deleteRowsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect !== null && selectionRect !== void 0 ? selectionRect : defaultSelectionRect, !!isHeaderRowRequired)(state, dispatch);
       } else {
-        (0, _commandsWithAnalytics.deleteColumnsWithAnalytics)(editorAnalyticsAPI, tablePreserveWidth)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect !== null && selectionRect !== void 0 ? selectionRect : defaultSelectionRect)(state, dispatch, editorView);
+        (0, _commandsWithAnalytics.deleteColumnsWithAnalytics)(editorAnalyticsAPI, isTableScalingEnabled)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect !== null && selectionRect !== void 0 ? selectionRect : defaultSelectionRect)(state, dispatch, editorView);
       }
       return true;
     },

package/dist/cjs/utils/guidelines.js

@@ -4,10 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultGuidelines = void 0;
+exports.defaultGuidelinesForPreserveTable = exports.defaultGuidelines = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _guideline = require("@atlaskit/editor-common/guideline");
 var _snapping = require("./snapping");
 // NOTE: We have to take 1 pixel off every length due to the fact that the tbody is 1px smaller then the table container.
 // If we don't do this then the guidelines will not align correctly to the edge of the table
-var defaultGuidelines = exports.defaultGuidelines = (0, _guideline.createFixedGuidelinesFromLengths)([0].concat((0, _toConsumableArray2.default)((0, _snapping.calculateDefaultSnappings)(-1))));
+var defaultGuidelines = exports.defaultGuidelines = (0, _guideline.createFixedGuidelinesFromLengths)([0].concat((0, _toConsumableArray2.default)((0, _snapping.calculateDefaultSnappings)(-1))));
+var defaultGuidelinesForPreserveTable = exports.defaultGuidelinesForPreserveTable = function defaultGuidelinesForPreserveTable(editorContainerWidth) {
+  return (0, _guideline.createFixedGuidelinesFromLengths)([0].concat((0, _toConsumableArray2.default)((0, _snapping.calculateDefaultTablePreserveSnappings)(-1, editorContainerWidth))));
+};

package/dist/cjs/utils/snapping.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findClosestSnap = exports.defaultSnappingWidths = exports.calculateDefaultSnappings = void 0;
+exports.findClosestSnap = exports.defaultTablePreserveSnappingWidths = exports.defaultSnappingWidths = exports.calculateDefaultTablePreserveSnappings = exports.calculateDefaultSnappings = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _guideline = require("@atlaskit/editor-common/guideline");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -18,8 +18,21 @@ var calculateDefaultSnappings = exports.calculateDefaultSnappings = function cal
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   return [].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset)), [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, _editorSharedStyles.akEditorFullWidthLayoutWidth + lengthOffset]);
 };
+
+// FF TablePreserve for calculateDefaultSnappings
+var calculateDefaultTablePreserveSnappings = exports.calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
+  var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var editorContainerWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _editorSharedStyles.akEditorFullWidthLayoutWidth;
+  var dynamicFullWidthLine = editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide;
+  return [].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset)), [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset]);
+};
 var defaultSnappingWidths = exports.defaultSnappingWidths = calculateDefaultSnappings();
 
+// FF TablePreserve for defaultSnappingWidths
+var defaultTablePreserveSnappingWidths = exports.defaultTablePreserveSnappingWidths = function defaultTablePreserveSnappingWidths(editorContainerWidth) {
+  return editorContainerWidth - _editorSharedStyles.akEditorGutterPadding * 2 > _editorSharedStyles.akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth);
+};
+
 /**
  * Returns keys of guidelines that are closest to the table and withthin the snapGap
  */

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

@@ -121,7 +121,7 @@ export const activateNextResizeArea = direction => (state, dispatch, view) => {
   }
   return false;
 };
-export const changeColumnWidthByStep = (stepSize, getEditorContainerWidth, tablePreserveWidth = false) => (state, dispatch, view) => {
+export const changeColumnWidthByStep = (stepSize, getEditorContainerWidth, isTableScalingEnabled = false) => (state, dispatch, view) => {
   let customTr = state.tr;
   const fakeDispatch = tr => {
     customTr = tr;
@@ -171,14 +171,14 @@ export const changeColumnWidthByStep = (stepSize, getEditorContainerWidth, table
     tableRef: dom,
     start: tableStartPosition,
     domAtPos,
-    tablePreserveWidth
+    isTableScalingEnabled
   });
   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;
-  const newResizeState = resizeColumn(initialResizeState, colIndex, stepSize, dom, resizingSelectedColumns ? selectedColumns : undefined, tablePreserveWidth);
+  const newResizeState = resizeColumn(initialResizeState, colIndex, stepSize, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, isTableScalingEnabled);
   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, tablePreserveWidth = false) => (state, dispatch, view) => {
-  const tr = deleteColumns(rect, getAllowAddColumnCustomStep(state), view, tablePreserveWidth)(state.tr);
+export const deleteColumnsCommand = (rect, isTableScalingEnabled = false) => (state, dispatch, view) => {
+  const tr = deleteColumns(rect, getAllowAddColumnCustomStep(state), view, isTableScalingEnabled)(state.tr);
   if (dispatch) {
     dispatch(tr);
     return true;

package/dist/es2019/commands/insert.js

@@ -20,7 +20,7 @@ function addColumnAtCustomStep(column) {
     return tr;
   };
 }
-export function addColumnAt(getEditorContainerWidth, tablePreserveWidth = false) {
+export function addColumnAt(isTableScalingEnabled = false) {
   return (column, allowAddColumnCustomStep = false, view) => {
     return tr => {
       let updatedTr = tr;
@@ -32,7 +32,7 @@ export function addColumnAt(getEditorContainerWidth, tablePreserveWidth = false)
       const table = findTable(updatedTr.selection);
       if (table) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
-        updatedTr = rescaleColumns(tablePreserveWidth)(table, view)(updatedTr);
+        updatedTr = rescaleColumns(isTableScalingEnabled)(table, view)(updatedTr);
       }
       if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event') && view) {
         updatedTr = updateRowOrColumnMovedTransform({
@@ -49,33 +49,33 @@ export function addColumnAt(getEditorContainerWidth, tablePreserveWidth = false)
 
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
-export const addColumnBefore = (getEditorContainerWidth, tablePreserveWidth = false) => (state, dispatch, view) => {
+export const addColumnBefore = (isTableScalingEnabled = false) => (state, dispatch, view) => {
   const table = findTable(state.selection);
   if (!table) {
     return false;
   }
   if (dispatch) {
     let rect = selectedRect(state);
-    dispatch(addColumnAt(getEditorContainerWidth, tablePreserveWidth)(rect.left, getAllowAddColumnCustomStep(state), view)(state.tr));
+    dispatch(addColumnAt(isTableScalingEnabled)(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 = getEditorContainerWidth => (state, dispatch, view) => {
+export const addColumnAfter = isTableScalingEnabled => (state, dispatch, view) => {
   const table = findTable(state.selection);
   if (!table) {
     return false;
   }
   if (dispatch) {
     let rect = selectedRect(state);
-    dispatch(addColumnAt(getEditorContainerWidth)(rect.right, getAllowAddColumnCustomStep(state), view)(state.tr));
+    dispatch(addColumnAt(isTableScalingEnabled)(rect.right, getAllowAddColumnCustomStep(state), view)(state.tr));
   }
   return true;
 };
-export const insertColumn = (getEditorContainerWidth, tablePreserveWidth = false) => column => (state, dispatch, view) => {
-  let tr = addColumnAt(getEditorContainerWidth, tablePreserveWidth)(column, getAllowAddColumnCustomStep(state), view)(state.tr);
+export const insertColumn = (isTableScalingEnabled = false) => column => (state, dispatch, view) => {
+  let tr = addColumnAt(isTableScalingEnabled)(column, getAllowAddColumnCustomStep(state), view)(state.tr);
   const table = findTable(tr.selection);
   if (!table) {
     return false;
@@ -122,18 +122,18 @@ export const insertRow = (row, moveCursorToTheNewRow) => (state, dispatch) => {
   }
   return true;
 };
-export const createTable = (isFullWidthModeEnabled, getEditorFeatureFlags) => (state, dispatch) => {
-  const table = createTableWithWidth(isFullWidthModeEnabled, getEditorFeatureFlags)(state.schema);
+export const createTable = (isTableScalingEnabled, isFullWidthModeEnabled) => (state, dispatch) => {
+  const table = createTableWithWidth(isTableScalingEnabled, isFullWidthModeEnabled)(state.schema);
   if (dispatch) {
     dispatch(safeInsert(table)(state.tr).scrollIntoView());
   }
   return true;
 };
-export const insertTableWithSize = (isFullWidthModeEnabled, getEditorFeatureFlags, editorAnalyticsAPI) => (rowsCount, colsCount, inputMethod) => {
+export const insertTableWithSize = (isFullWidthModeEnabled, isTableScalingEnabled, editorAnalyticsAPI) => (rowsCount, colsCount, inputMethod) => {
   return ({
     tr
   }) => {
-    const tableNode = createTableWithWidth(isFullWidthModeEnabled, getEditorFeatureFlags, {
+    const tableNode = createTableWithWidth(isTableScalingEnabled, isFullWidthModeEnabled, {
       rowsCount: rowsCount,
       colsCount: colsCount
     })(tr.doc.type.schema);

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

@@ -168,7 +168,7 @@ export const insertRowWithAnalytics = editorAnalyticsAPI => (inputMethod, option
     eventType: EVENT_TYPE.TRACK
   };
 })(editorAnalyticsAPI)(insertRow(options.index, options.moveCursorToInsertedRow));
-export const changeColumnWidthByStepWithAnalytics = editorAnalyticsAPI => (stepSize, getEditorContainerWidth, tablePreserveWidth, inputMethod) => withEditorAnalyticsAPI(state => {
+export const changeColumnWidthByStepWithAnalytics = editorAnalyticsAPI => (stepSize, getEditorContainerWidth, isTableScalingEnabled, inputMethod) => withEditorAnalyticsAPI(state => {
   const {
     table,
     totalRowCount,
@@ -193,8 +193,8 @@ export const changeColumnWidthByStepWithAnalytics = editorAnalyticsAPI => (stepS
       totalColumnCount
     }
   };
-})(editorAnalyticsAPI)(changeColumnWidthByStep(stepSize, getEditorContainerWidth, tablePreserveWidth));
-export const insertColumnWithAnalytics = (getEditorContainerWidth, editorAnalyticsAPI, tablePreserveWidth = false) => (inputMethod, position) => withEditorAnalyticsAPI(state => {
+})(editorAnalyticsAPI)(changeColumnWidthByStep(stepSize, getEditorContainerWidth, isTableScalingEnabled));
+export const insertColumnWithAnalytics = (editorAnalyticsAPI, isTableScalingEnabled = false) => (inputMethod, position) => withEditorAnalyticsAPI(state => {
   const {
     totalRowCount,
     totalColumnCount
@@ -211,7 +211,7 @@ export const insertColumnWithAnalytics = (getEditorContainerWidth, editorAnalyti
     },
     eventType: EVENT_TYPE.TRACK
   };
-})(editorAnalyticsAPI)(insertColumn(getEditorContainerWidth, tablePreserveWidth)(position));
+})(editorAnalyticsAPI)(insertColumn(isTableScalingEnabled)(position));
 export const deleteRowsWithAnalytics = editorAnalyticsAPI => (inputMethod, rect, isHeaderRowRequired) => withEditorAnalyticsAPI(({
   selection
 }) => {
@@ -238,7 +238,7 @@ export const deleteRowsWithAnalytics = editorAnalyticsAPI => (inputMethod, rect,
   }
   return true;
 });
-export const deleteColumnsWithAnalytics = (editorAnalyticsAPI, tablePreserveWidth = false) => (inputMethod, rect) => withEditorAnalyticsAPI(({
+export const deleteColumnsWithAnalytics = (editorAnalyticsAPI, isTableScalingEnabled = false) => (inputMethod, rect) => withEditorAnalyticsAPI(({
   selection
 }) => {
   const {
@@ -258,7 +258,7 @@ export const deleteColumnsWithAnalytics = (editorAnalyticsAPI, tablePreserveWidt
     },
     eventType: EVENT_TYPE.TRACK
   };
-})(editorAnalyticsAPI)(deleteColumnsCommand(rect, tablePreserveWidth));
+})(editorAnalyticsAPI)(deleteColumnsCommand(rect, isTableScalingEnabled));
 export const deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = editorAnalyticsAPI => (state, dispatch) => {
   const {
     selection

package/dist/es2019/event-handlers.js

@@ -345,7 +345,7 @@ export function handleTripleClick(view, pos) {
   }
   return false;
 }
-export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI, editorView, tablePreserveWidth = false) => {
+export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI, editorView, isTableScalingEnabled = false) => {
   const oldSelection = oldState.tr.selection;
   let {
     tr
@@ -394,7 +394,7 @@ export const handleCut = (oldTr, oldState, newState, editorAnalyticsAPI, editorV
             } = getPluginState(newState);
             tr = deleteRows(rect, isHeaderRowRequired)(tr);
           } else if (tr.selection.isColSelection()) {
-            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView, tablePreserveWidth)(tr);
+            tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView, isTableScalingEnabled)(tr);
           }
         }
       }

package/dist/es2019/nodeviews/TableComponent.js

@@ -6,7 +6,7 @@ import rafSchedule from 'raf-schd';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
-import { browser, calcTableColumnWidths, isValidPosition } from '@atlaskit/editor-common/utils';
+import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { MAX_BROWSER_SCROLLBAR_HEIGHT, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -18,6 +18,7 @@ import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '.
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import { COLUMN_MIN_WIDTH, getLayoutSize, getResizeState, insertColgroupFromNode, scaleTable, updateColgroup } from '../pm-plugins/table-resizing/utils';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
+import { TABLE_EDITOR_MARGIN } from '../pm-plugins/table-resizing/utils/consts';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import { tableOverflowShadowWidth, tableOverflowShadowWidthWide } from '../ui/consts';
@@ -161,7 +162,7 @@ class TableComponent extends React.Component {
         getPos,
         containerWidth,
         options,
-        getEditorFeatureFlags
+        isTableScalingEnabled
       } = this.props;
       const node = getNode();
       const {
@@ -177,9 +178,6 @@ class TableComponent extends React.Component {
         width
       } = containerWidth;
       this.scaleTableDebounced.cancel();
-      const {
-        tablePreserveWidth = false
-      } = getEditorFeatureFlags();
       const tr = scaleTable(this.table, {
         ...scaleOptions,
         node,
@@ -188,7 +186,7 @@ class TableComponent extends React.Component {
         containerWidth: width,
         previousContainerWidth: this.containerWidth.width || width,
         ...options
-      }, domAtPos, tablePreserveWidth)(state.tr);
+      }, domAtPos, isTableScalingEnabled)(state.tr);
       dispatch(tr);
     });
     _defineProperty(this, "setTimerToSendInitialOverflowCaptured", isOverflowing => {
@@ -313,8 +311,12 @@ class TableComponent extends React.Component {
       options,
       isDragAndDropEnabled,
       getNode,
-      getEditorFeatureFlags
+      getEditorFeatureFlags,
+      isTableScalingEnabled
     } = this.props;
+    if (isTableScalingEnabled) {
+      this.handleColgroupUpdates(true);
+    }
     if (allowColumnResizing && this.wrapper && !isIE11) {
       this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
         passive: true
@@ -392,24 +394,22 @@ class TableComponent extends React.Component {
       clearTimeout(this.initialOverflowCaptureTimerId);
     }
   }
-  handleColgroupUpdates() {
+  handleColgroupUpdates(force = false) {
     var _this$containerWidth;
     const {
       getNode,
       containerWidth,
       isResizing,
       view,
-      getPos,
-      tableRef
+      getPos
     } = this.props;
-    if (!tableRef) {
+    if (!this.table) {
       return;
     }
-    const TABLE_MARGIN = 76;
 
     // Remove any widths styles after resizing preview is completed
-    tableRef.style.width = '';
-    const tableRenderWidth = containerWidth.width - TABLE_MARGIN;
+    this.table.style.width = '';
+    const tableRenderWidth = containerWidth.width - TABLE_EDITOR_MARGIN;
     const tableNode = getNode();
     const start = getPos() || 0;
     const depth = view.state.doc.resolve(start).depth;
@@ -421,17 +421,12 @@ class TableComponent extends React.Component {
     const {
       width: tableNodeWidth
     } = tableNode.attrs;
-    const tableColumnWidths = calcTableColumnWidths(tableNode);
     const shouldTableScale = tableRenderWidth < tableNodeWidth;
-    let isTableColumnWidthsSame = false;
-    if (this.tableColumnWidths) {
-      isTableColumnWidthsSame = tableColumnWidths === null || tableColumnWidths === void 0 ? void 0 : tableColumnWidths.every((width, index) => width === this.tableColumnWidths[index]);
-    }
     const {
       width: containerWidthValue
     } = containerWidth;
     const isWidthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.width) !== containerWidthValue;
-    if (shouldTableScale && !isResizing && (!isTableColumnWidthsSame || isWidthChanged)) {
+    if (force || shouldTableScale && !isResizing && isWidthChanged) {
       const resizeState = getResizeState({
         minWidth: COLUMN_MIN_WIDTH,
         maxSize: tableRenderWidth,
@@ -439,14 +434,11 @@ class TableComponent extends React.Component {
         tableRef: this.table,
         start,
         domAtPos: view.domAtPos,
-        tablePreserveWidth: true
-      });
-      requestAnimationFrame(() => {
-        updateColgroup(resizeState, this.table, true);
+        isTableScalingEnabled: true
       });
-      this.tableColumnWidths = tableColumnWidths;
-      this.containerWidth = containerWidth;
+      updateColgroup(resizeState, this.table, tableNode, true);
     }
+    this.containerWidth = containerWidth;
   }
   componentDidUpdate(_, prevState) {
     var _this$wrapper;
@@ -457,16 +449,13 @@ class TableComponent extends React.Component {
       allowColumnResizing,
       isResizing,
       options,
-      getEditorFeatureFlags
+      isTableScalingEnabled
     } = this.props;
     const {
       isInDanger
     } = getPluginState(view.state);
-    const {
-      tablePreserveWidth = false
-    } = getEditorFeatureFlags();
     const table = findTable(view.state.selection);
-    if (tablePreserveWidth) {
+    if (isTableScalingEnabled) {
       this.handleColgroupUpdates();
     }
     if (isInDanger && !table) {
@@ -505,7 +494,7 @@ class TableComponent extends React.Component {
         } = this.props;
         const shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || tablesHaveDifferentNoOfColumns(currentTable, previousTable) && isResizing;
         if (shouldRecreateResizeCols) {
-          insertColgroupFromNode(this.table, currentTable, tablePreserveWidth);
+          insertColgroupFromNode(this.table, currentTable, isTableScalingEnabled);
         }
         updateControls()(view.state);
       }
@@ -551,7 +540,8 @@ class TableComponent extends React.Component {
       getPos,
       pluginInjectionApi,
       isDragAndDropEnabled,
-      getEditorFeatureFlags
+      getEditorFeatureFlags,
+      isTableScalingEnabled
     } = this.props;
     const {
       showBeforeShadow,
@@ -635,8 +625,7 @@ class TableComponent extends React.Component {
     const isNested = isTableNested(view.state, tablePos);
     const topStickyShadowPosition = isDragAndDropEnabled ? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2 : this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
     const {
-      stickyScrollbar,
-      tablePreserveWidth
+      stickyScrollbar
     } = getEditorFeatureFlags();
     return /*#__PURE__*/React.createElement(TableContainer, {
       className: classnames(ClassName.TABLE_CONTAINER, {
@@ -655,7 +644,7 @@ class TableComponent extends React.Component {
       pluginInjectionApi: pluginInjectionApi,
       isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
       isResizing: isResizing,
-      tablePreserveWidth: tablePreserveWidth
+      isTableScalingEnabled: isTableScalingEnabled
     }, /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SENTINEL_TOP,
       "data-testid": "sticky-sentinel-top"

package/dist/es2019/nodeviews/TableContainer.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useCallback, useRef } from 'react';
 import classNames from 'classnames';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
-import { akEditorDefaultLayoutWidth, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
@@ -42,7 +42,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   tableRef,
   isResizing,
   pluginInjectionApi,
-  tablePreserveWidth
+  isTableScalingEnabled
 }) => {
   const containerRef = useRef(null);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
@@ -107,7 +107,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   }, [pluginInjectionApi]);
   const tableWidth = getTableContainerWidth(node);
   // 76 is currently an accepted padding value considering the spacing for resizer handle
-  const responsiveContainerWidth = containerWidth - 76;
+  const responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
   const width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;
@@ -125,7 +125,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     displayGuideline,
     attachAnalyticsEvent,
     displayGapCursor,
-    tablePreserveWidth
+    isTableScalingEnabled
   };
   if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
     tableResizerProps = {
@@ -166,7 +166,7 @@ export const TableContainer = ({
   isNested,
   isResizing,
   pluginInjectionApi,
-  tablePreserveWidth
+  isTableScalingEnabled
 }) => {
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer, {
@@ -178,7 +178,7 @@ export const TableContainer = ({
       tableRef: tableRef,
       isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi,
-      tablePreserveWidth: tablePreserveWidth
+      isTableScalingEnabled: isTableScalingEnabled
     }, children);
   }
   const tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';