@atlaskit/editor-plugin-table 7.16.6 → 7.16.8

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-table
 
+## 7.16.8
+
+### Patch Changes
+
+-   [#103615](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103615)
+    [`fd239f714374`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fd239f714374) -
+    [ux] When table with left alignmnent is resized to be wider than line length, alignment
+    automatically changes to center.
+
+## 7.16.7
+
+### Patch Changes
+
+-   [#103100](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103100)
+    [`07d25a4f1dd9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/07d25a4f1dd9) -
+    Add new parameter to remove inner guidelines, enabled when table alignment is enabled
+-   Updated dependencies
+
 ## 7.16.6
 
 ### Patch Changes

package/dist/cjs/commands/misc.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateWidthToWidest = exports.updateResizeHandleDecorations = exports.triggerUnlessTableHeader = exports.transformSliceToRemoveColumnsWidths = exports.transformSliceToAddTableHeaders = exports.transformSliceRemoveCellBackgroundColor = exports.showInsertRowButton = exports.showInsertColumnButton = exports.setTableRef = exports.setTableAlignment = exports.setMultipleCellAttrs = exports.setEditorFocus = exports.setCellAttr = exports.selectRows = exports.selectRow = exports.selectColumns = exports.selectColumn = exports.removeResizeHandleDecorations = exports.moveCursorBackward = exports.isInsideFirstCellOfRowOrColumn = exports.hideInsertColumnOrRowButton = exports.getTableSelectionType = exports.getTableElementMoveTypeBySlice = exports.deleteTableIfSelected = exports.deleteTable = exports.countCellsInSlice = exports.convertFirstRowToHeader = exports.autoSizeTable = exports.addResizeHandleDecorations = exports.addBoldInEmptyHeaderCells = void 0;
+exports.updateWidthToWidest = exports.updateResizeHandleDecorations = exports.triggerUnlessTableHeader = exports.transformSliceToRemoveColumnsWidths = exports.transformSliceToAddTableHeaders = exports.transformSliceRemoveCellBackgroundColor = exports.showInsertRowButton = exports.showInsertColumnButton = exports.setTableRef = exports.setTableAlignmentWithTableContentWithPos = exports.setTableAlignment = exports.setMultipleCellAttrs = exports.setEditorFocus = exports.setCellAttr = exports.selectRows = exports.selectRow = exports.selectColumns = exports.selectColumn = exports.removeResizeHandleDecorations = exports.moveCursorBackward = exports.isInsideFirstCellOfRowOrColumn = exports.hideInsertColumnOrRowButton = exports.getTableSelectionType = exports.getTableElementMoveTypeBySlice = exports.deleteTableIfSelected = exports.deleteTable = exports.countCellsInSlice = exports.convertFirstRowToHeader = exports.autoSizeTable = exports.addResizeHandleDecorations = exports.addBoldInEmptyHeaderCells = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
@@ -600,4 +600,14 @@ var setTableAlignment = exports.setTableAlignment = function setTableAlignment(n
     tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
     return tr;
   };
+};
+var setTableAlignmentWithTableContentWithPos = exports.setTableAlignmentWithTableContentWithPos = function setTableAlignmentWithTableContentWithPos(newAlignment, tableNodeWithPos) {
+  return function (_ref3) {
+    var tr = _ref3.tr;
+    var nextTableAttrs = _objectSpread(_objectSpread({}, tableNodeWithPos.node.attrs), {}, {
+      layout: newAlignment
+    });
+    tr.setNodeMarkup(tableNodeWithPos.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
+    return tr;
+  };
 };

package/dist/cjs/nodeviews/TableContainer.js

@@ -73,6 +73,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     className = _ref4.className,
     node = _ref4.node,
     containerWidth = _ref4.containerWidth,
+    lineLength = _ref4.lineLength,
     editorView = _ref4.editorView,
     getPos = _ref4.getPos,
     tableRef = _ref4.tableRef,
@@ -155,6 +156,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     width: width,
     maxWidth: maxResizerWidth,
     containerWidth: containerWidth,
+    lineLength: lineLength,
     updateWidth: updateWidth,
     editorView: editorView,
     getPos: getPos,
@@ -197,7 +199,9 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref5) {
   var children = _ref5.children,
     node = _ref5.node,
     className = _ref5.className,
-    editorWidth = _ref5.containerWidth.width,
+    _ref5$containerWidth = _ref5.containerWidth,
+    editorWidth = _ref5$containerWidth.width,
+    lineLength = _ref5$containerWidth.lineLength,
     editorView = _ref5.editorView,
     getPos = _ref5.getPos,
     tableRef = _ref5.tableRef,
@@ -214,6 +218,7 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref5) {
       className: className,
       node: node,
       containerWidth: editorWidth,
+      lineLength: lineLength,
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,

package/dist/cjs/nodeviews/TableResizer.js

@@ -18,6 +18,7 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _resizer = require("@atlaskit/editor-common/resizer");
 var _utils = require("@atlaskit/editor-common/utils");
+var _commands = require("@atlaskit/editor-prosemirror/commands");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _misc = require("../commands/misc");
@@ -34,6 +35,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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 RESIZE_STEP_VALUE = 10;
+var FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 var handles = {
   right: true
 };
@@ -88,6 +90,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     width = _ref.width,
     maxWidth = _ref.maxWidth,
     containerWidth = _ref.containerWidth,
+    lineLength = _ref.lineLength,
     updateWidth = _ref.updateWidth,
     onResizeStop = _ref.onResizeStop,
     onResizeStart = _ref.onResizeStart,
@@ -132,30 +135,46 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       keys = _ref3.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth) : _guidelines.defaultGuidelines, containerWidth);
+      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, isTableAlignmentEnabled) : _guidelines.defaultGuidelines, containerWidth);
       displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _consts.TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [isTableScalingEnabled, containerWidth, displayGuideline]);
+  }, [isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline]);
   var guidelineSnaps = (0, _react.useMemo)(function () {
     return snappingEnabled ? {
-      x: isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth) : _snapping.defaultSnappingWidths
+      x: isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth, isTableAlignmentEnabled) : _snapping.defaultSnappingWidths
     } : undefined;
-  }, [snappingEnabled, isTableScalingEnabled, containerWidth]);
+  }, [snappingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth]);
+  var switchToCenterAlignment = (0, _react.useCallback)(function (pos, node, newWidth, state, dispatch) {
+    if (isTableAlignmentEnabled && node && node.attrs.layout === _alignment.ALIGN_START && newWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH &&
+    // We don't want to switch alignment in Full-width editor
+    isResizing.current) {
+      var tableNodeWithPos = {
+        pos: pos,
+        node: node
+      };
+      var _tr = (0, _misc.setTableAlignmentWithTableContentWithPos)(_alignment.ALIGN_CENTER, tableNodeWithPos)(state);
+      if (_tr) {
+        dispatch(_tr);
+      }
+      return true;
+    }
+    return false;
+  }, [lineLength, isTableAlignmentEnabled, isResizing]);
   (0, _react.useEffect)(function () {
     return function () {
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
       // deleted this table
       if (isResizing.current) {
         var dispatch = editorView.dispatch,
-          _tr = editorView.state.tr;
+          _tr2 = editorView.state.tr;
         displayGapCursor(true);
         displayGuideline([]);
-        _tr.setMeta(_tableWidth.pluginKey, {
+        _tr2.setMeta(_tableWidth.pluginKey, {
           resizing: false,
           tableLocalId: '',
           tableRef: null
         });
-        dispatch(_tr);
+        dispatch(_tr2);
       }
     };
   }, [editorView, displayGuideline, displayGapCursor]);
@@ -174,12 +193,12 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth) : _guidelines.defaultGuidelines, containerWidth);
+    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, isTableAlignmentEnabled) : _guidelines.defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (onResizeStart) {
       onResizeStart();
     }
-  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
+  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline, onResizeStart]);
   var handleResize = (0, _react.useCallback)(function (originalState, delta) {
     var _node$attrs$localId, _node$attrs;
     countFrames();
@@ -199,22 +218,24 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
-    var closestSnap = (0, _snapping.findClosestSnap)(newWidth, isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth) : _snapping.defaultSnappingWidths, isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth) : _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE);
+    var closestSnap = (0, _snapping.findClosestSnap)(newWidth, isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth, isTableAlignmentEnabled) : _snapping.defaultSnappingWidths, isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, isTableAlignmentEnabled) : _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE);
     updateActiveGuidelines(closestSnap);
 
     // When snapping to the full width guideline, resize the table to be 1800px
     var state = editorView.state,
       dispatch = editorView.dispatch;
     var currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
-    var fullWidthGuideline = (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth).filter(function (guideline) {
+    var fullWidthGuideline = (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, isTableAlignmentEnabled).filter(function (guideline) {
       return guideline.isFullWidth;
     })[0];
     var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
     var shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
-    (0, _misc.updateWidthToWidest)((0, _defineProperty2.default)({}, currentTableNodeLocalId, shouldUpdateWidthToWidest))(state, dispatch);
+    (0, _commands.chainCommands)(function (state, dispatch) {
+      return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
+    }, (0, _misc.updateWidthToWidest)((0, _defineProperty2.default)({}, currentTableNodeLocalId, shouldUpdateWidthToWidest)))(state, dispatch);
     updateWidth(shouldUpdateWidthToWidest ? _utils3.TABLE_MAX_WIDTH : newWidth);
     return newWidth;
-  }, [countFrames, isTableScalingEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
+  }, [countFrames, isTableScalingEnabled, isTableAlignmentEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
   var scheduleResize = (0, _react.useMemo)(function () {
     return (0, _rafSchd.default)(handleResize);
   }, [handleResize]);
@@ -367,7 +388,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       (_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 || _updateTooltip$curren.call(updateTooltip);
     }
   }, [width]);
-  var resizeRatio = !isTableAlignmentEnabled || isTableAlignmentEnabled && (0, _alignment.normaliseAlignment)(node.attrs.layout) === 'center' ? 2 : 1;
+  var resizeRatio = !isTableAlignmentEnabled || isTableAlignmentEnabled && (0, _alignment.normaliseAlignment)(node.attrs.layout) === _alignment.ALIGN_CENTER ? 2 : 1;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_resizer.ResizerNext, {
     ref: resizerRef,
     enable: handles,

package/dist/cjs/utils/guidelines.js

@@ -12,5 +12,7 @@ var _snapping = require("./snapping");
 // 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 defaultGuidelinesForPreserveTable = exports.defaultGuidelinesForPreserveTable = function defaultGuidelinesForPreserveTable(editorContainerWidth) {
-  return (0, _guideline.createFixedGuidelinesFromLengths)([0].concat((0, _toConsumableArray2.default)((0, _snapping.calculateDefaultTablePreserveSnappings)(-1, editorContainerWidth))), undefined, true);
+  var excludeInnerGuidelines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var lengths = (0, _snapping.calculateDefaultTablePreserveSnappings)(-1, editorContainerWidth, excludeInnerGuidelines);
+  return (0, _guideline.createFixedGuidelinesFromLengths)(lengths, undefined, true);
 };

package/dist/cjs/utils/snapping.js

@@ -24,14 +24,19 @@ var calculateDefaultSnappings = exports.calculateDefaultSnappings = function cal
 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 excludeInnerGuidelines = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var dynamicFullWidthLine = editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 - _consts.tableResizerWidth;
-  return [].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset)), [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset]);
+  if (excludeInnerGuidelines) {
+    return [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
+  }
+  return [0].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);
+  var excludeInnerGuidelines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return editorContainerWidth - _editorSharedStyles.akEditorGutterPadding * 2 > _editorSharedStyles.akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, excludeInnerGuidelines);
 };
 
 /**

package/dist/es2019/commands/misc.js

@@ -563,4 +563,14 @@ export const setTableAlignment = newAlignment => ({
   };
   tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
   return tr;
+};
+export const setTableAlignmentWithTableContentWithPos = (newAlignment, tableNodeWithPos) => ({
+  tr
+}) => {
+  const nextTableAttrs = {
+    ...tableNodeWithPos.node.attrs,
+    layout: newAlignment
+  };
+  tr.setNodeMarkup(tableNodeWithPos.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
+  return tr;
 };

package/dist/es2019/nodeviews/TableContainer.js

@@ -65,6 +65,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   className,
   node,
   containerWidth,
+  lineLength,
   editorView,
   getPos,
   tableRef,
@@ -146,6 +147,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     width,
     maxWidth: maxResizerWidth,
     containerWidth,
+    lineLength,
     updateWidth,
     editorView,
     getPos,
@@ -189,7 +191,8 @@ export const TableContainer = ({
   node,
   className,
   containerWidth: {
-    width: editorWidth
+    width: editorWidth,
+    lineLength
   },
   editorView,
   getPos,
@@ -208,6 +211,7 @@ export const TableContainer = ({
       className: className,
       node: node,
       containerWidth: editorWidth,
+      lineLength: lineLength,
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,

package/dist/es2019/nodeviews/TableResizer.js

@@ -8,18 +8,20 @@ import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keyma
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { browser } from '@atlaskit/editor-common/utils';
+import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { updateWidthToWidest } from '../commands/misc';
+import { setTableAlignmentWithTableContentWithPos, updateWidthToWidest } from '../commands/misc';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable, TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
-import { normaliseAlignment } from '../utils/alignment';
+import { ALIGN_CENTER, ALIGN_START, normaliseAlignment } from '../utils/alignment';
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
 import { defaultGuidelines, defaultGuidelinesForPreserveTable } from '../utils/guidelines';
 import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap } from '../utils/snapping';
 const RESIZE_STEP_VALUE = 10;
+const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 const handles = {
   right: true
 };
@@ -73,6 +75,7 @@ export const TableResizer = ({
   width,
   maxWidth,
   containerWidth,
+  lineLength,
   updateWidth,
   onResizeStop,
   onResizeStart,
@@ -121,13 +124,29 @@ export const TableResizer = ({
   }) => {
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
+      const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
       displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [isTableScalingEnabled, containerWidth, displayGuideline]);
+  }, [isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline]);
   const guidelineSnaps = useMemo(() => snappingEnabled ? {
-    x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths
-  } : undefined, [snappingEnabled, isTableScalingEnabled, containerWidth]);
+    x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths
+  } : undefined, [snappingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth]);
+  const switchToCenterAlignment = useCallback((pos, node, newWidth, state, dispatch) => {
+    if (isTableAlignmentEnabled && node && node.attrs.layout === ALIGN_START && newWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH &&
+    // We don't want to switch alignment in Full-width editor
+    isResizing.current) {
+      const tableNodeWithPos = {
+        pos,
+        node
+      };
+      const tr = setTableAlignmentWithTableContentWithPos(ALIGN_CENTER, tableNodeWithPos)(state);
+      if (tr) {
+        dispatch(tr);
+      }
+      return true;
+    }
+    return false;
+  }, [lineLength, isTableAlignmentEnabled, isResizing]);
   useEffect(() => {
     return () => {
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
@@ -169,12 +188,12 @@ export const TableResizer = ({
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
+    const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (onResizeStart) {
       onResizeStart();
     }
-  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
+  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline, onResizeStart]);
   const handleResize = useCallback((originalState, delta) => {
     var _node$attrs$localId, _node$attrs;
     countFrames();
@@ -194,7 +213,7 @@ export const TableResizer = ({
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
-    const closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
+    const closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
     updateActiveGuidelines(closestSnap);
 
     // When snapping to the full width guideline, resize the table to be 1800px
@@ -203,15 +222,17 @@ export const TableResizer = ({
       dispatch
     } = editorView;
     const currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
-    const fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth).filter(guideline => guideline.isFullWidth)[0];
+    const fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled).filter(guideline => guideline.isFullWidth)[0];
     const isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
     const shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
-    updateWidthToWidest({
+    chainCommands((state, dispatch) => {
+      return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
+    }, updateWidthToWidest({
       [currentTableNodeLocalId]: shouldUpdateWidthToWidest
-    })(state, dispatch);
+    }))(state, dispatch);
     updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
     return newWidth;
-  }, [countFrames, isTableScalingEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
+  }, [countFrames, isTableScalingEnabled, isTableAlignmentEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
   const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
   const handleResizeStop = useCallback((originalState, delta) => {
     var _node$attrs$localId2, _node$attrs2;
@@ -365,7 +386,7 @@ export const TableResizer = ({
       (_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 ? void 0 : _updateTooltip$curren.call(updateTooltip);
     }
   }, [width]);
-  const resizeRatio = !isTableAlignmentEnabled || isTableAlignmentEnabled && normaliseAlignment(node.attrs.layout) === 'center' ? 2 : 1;
+  const resizeRatio = !isTableAlignmentEnabled || isTableAlignmentEnabled && normaliseAlignment(node.attrs.layout) === ALIGN_CENTER ? 2 : 1;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizerNext, {
     ref: resizerRef,
     enable: handles,

package/dist/es2019/utils/guidelines.js

@@ -4,4 +4,7 @@ import { calculateDefaultSnappings, calculateDefaultTablePreserveSnappings } fro
 // 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
 export const defaultGuidelines = createFixedGuidelinesFromLengths([0, ...calculateDefaultSnappings(-1)]);
-export const defaultGuidelinesForPreserveTable = editorContainerWidth => createFixedGuidelinesFromLengths([0, ...calculateDefaultTablePreserveSnappings(-1, editorContainerWidth)], undefined, true);
+export const defaultGuidelinesForPreserveTable = (editorContainerWidth, excludeInnerGuidelines = false) => {
+  const lengths = calculateDefaultTablePreserveSnappings(-1, editorContainerWidth, excludeInnerGuidelines);
+  return createFixedGuidelinesFromLengths(lengths, undefined, true);
+};

package/dist/es2019/utils/snapping.js

@@ -6,15 +6,18 @@ const calculateSubSnappingWidths = (totalLanes, totalWidth) => new Array(Math.ro
 export const calculateDefaultSnappings = (lengthOffset = 0) => [...calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset), akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, akEditorFullWidthLayoutWidth + lengthOffset];
 
 // FF TablePreserve for calculateDefaultSnappings
-export const calculateDefaultTablePreserveSnappings = (lengthOffset = 0, editorContainerWith = akEditorFullWidthLayoutWidth) => {
+export const calculateDefaultTablePreserveSnappings = (lengthOffset = 0, editorContainerWith = akEditorFullWidthLayoutWidth, excludeInnerGuidelines = false) => {
   const dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - tableResizerWidth;
-  return [...calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset), akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
+  if (excludeInnerGuidelines) {
+    return [akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
+  }
+  return [0, ...calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset), akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
 };
 export const defaultSnappingWidths = calculateDefaultSnappings();
 
 // FF TablePreserve for defaultSnappingWidths
-export const defaultTablePreserveSnappingWidths = editorContainerWidth => {
-  return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth);
+export const defaultTablePreserveSnappingWidths = (editorContainerWidth, excludeInnerGuidelines = false) => {
+  return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, excludeInnerGuidelines);
 };
 
 /**

package/dist/esm/commands/misc.js

@@ -593,4 +593,14 @@ export var setTableAlignment = function setTableAlignment(newAlignment) {
     tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
     return tr;
   };
+};
+export var setTableAlignmentWithTableContentWithPos = function setTableAlignmentWithTableContentWithPos(newAlignment, tableNodeWithPos) {
+  return function (_ref3) {
+    var tr = _ref3.tr;
+    var nextTableAttrs = _objectSpread(_objectSpread({}, tableNodeWithPos.node.attrs), {}, {
+      layout: newAlignment
+    });
+    tr.setNodeMarkup(tableNodeWithPos.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
+    return tr;
+  };
 };

package/dist/esm/nodeviews/TableContainer.js

@@ -63,6 +63,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     className = _ref4.className,
     node = _ref4.node,
     containerWidth = _ref4.containerWidth,
+    lineLength = _ref4.lineLength,
     editorView = _ref4.editorView,
     getPos = _ref4.getPos,
     tableRef = _ref4.tableRef,
@@ -145,6 +146,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     width: width,
     maxWidth: maxResizerWidth,
     containerWidth: containerWidth,
+    lineLength: lineLength,
     updateWidth: updateWidth,
     editorView: editorView,
     getPos: getPos,
@@ -187,7 +189,9 @@ export var TableContainer = function TableContainer(_ref5) {
   var children = _ref5.children,
     node = _ref5.node,
     className = _ref5.className,
-    editorWidth = _ref5.containerWidth.width,
+    _ref5$containerWidth = _ref5.containerWidth,
+    editorWidth = _ref5$containerWidth.width,
+    lineLength = _ref5$containerWidth.lineLength,
     editorView = _ref5.editorView,
     getPos = _ref5.getPos,
     tableRef = _ref5.tableRef,
@@ -204,6 +208,7 @@ export var TableContainer = function TableContainer(_ref5) {
       className: className,
       node: node,
       containerWidth: editorWidth,
+      lineLength: lineLength,
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,

package/dist/esm/nodeviews/TableResizer.js

@@ -12,18 +12,20 @@ import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keyma
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { browser } from '@atlaskit/editor-common/utils';
+import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { updateWidthToWidest } from '../commands/misc';
+import { setTableAlignmentWithTableContentWithPos, updateWidthToWidest } from '../commands/misc';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable, TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
-import { normaliseAlignment } from '../utils/alignment';
+import { ALIGN_CENTER, ALIGN_START, normaliseAlignment } from '../utils/alignment';
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
 import { defaultGuidelines, defaultGuidelinesForPreserveTable } from '../utils/guidelines';
 import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap } from '../utils/snapping';
 var RESIZE_STEP_VALUE = 10;
+var FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 var handles = {
   right: true
 };
@@ -78,6 +80,7 @@ export var TableResizer = function TableResizer(_ref) {
     width = _ref.width,
     maxWidth = _ref.maxWidth,
     containerWidth = _ref.containerWidth,
+    lineLength = _ref.lineLength,
     updateWidth = _ref.updateWidth,
     onResizeStop = _ref.onResizeStop,
     onResizeStart = _ref.onResizeStart,
@@ -122,30 +125,46 @@ export var TableResizer = function TableResizer(_ref) {
       keys = _ref3.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
+      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
       displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [isTableScalingEnabled, containerWidth, displayGuideline]);
+  }, [isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline]);
   var guidelineSnaps = useMemo(function () {
     return snappingEnabled ? {
-      x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths
+      x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths
     } : undefined;
-  }, [snappingEnabled, isTableScalingEnabled, containerWidth]);
+  }, [snappingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth]);
+  var switchToCenterAlignment = useCallback(function (pos, node, newWidth, state, dispatch) {
+    if (isTableAlignmentEnabled && node && node.attrs.layout === ALIGN_START && newWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH &&
+    // We don't want to switch alignment in Full-width editor
+    isResizing.current) {
+      var tableNodeWithPos = {
+        pos: pos,
+        node: node
+      };
+      var _tr = setTableAlignmentWithTableContentWithPos(ALIGN_CENTER, tableNodeWithPos)(state);
+      if (_tr) {
+        dispatch(_tr);
+      }
+      return true;
+    }
+    return false;
+  }, [lineLength, isTableAlignmentEnabled, isResizing]);
   useEffect(function () {
     return function () {
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
       // deleted this table
       if (isResizing.current) {
         var dispatch = editorView.dispatch,
-          _tr = editorView.state.tr;
+          _tr2 = editorView.state.tr;
         displayGapCursor(true);
         displayGuideline([]);
-        _tr.setMeta(tableWidthPluginKey, {
+        _tr2.setMeta(tableWidthPluginKey, {
           resizing: false,
           tableLocalId: '',
           tableRef: null
         });
-        dispatch(_tr);
+        dispatch(_tr2);
       }
     };
   }, [editorView, displayGuideline, displayGapCursor]);
@@ -164,12 +183,12 @@ export var TableResizer = function TableResizer(_ref) {
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
+    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (onResizeStart) {
       onResizeStart();
     }
-  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
+  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline, onResizeStart]);
   var handleResize = useCallback(function (originalState, delta) {
     var _node$attrs$localId, _node$attrs;
     countFrames();
@@ -189,22 +208,24 @@ export var TableResizer = function TableResizer(_ref) {
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
-    var closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
+    var closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
     updateActiveGuidelines(closestSnap);
 
     // When snapping to the full width guideline, resize the table to be 1800px
     var state = editorView.state,
       dispatch = editorView.dispatch;
     var currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
-    var fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth).filter(function (guideline) {
+    var fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled).filter(function (guideline) {
       return guideline.isFullWidth;
     })[0];
     var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
     var shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
-    updateWidthToWidest(_defineProperty({}, currentTableNodeLocalId, shouldUpdateWidthToWidest))(state, dispatch);
+    chainCommands(function (state, dispatch) {
+      return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
+    }, updateWidthToWidest(_defineProperty({}, currentTableNodeLocalId, shouldUpdateWidthToWidest)))(state, dispatch);
     updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
     return newWidth;
-  }, [countFrames, isTableScalingEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
+  }, [countFrames, isTableScalingEnabled, isTableAlignmentEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
   var scheduleResize = useMemo(function () {
     return rafSchd(handleResize);
   }, [handleResize]);
@@ -357,7 +378,7 @@ export var TableResizer = function TableResizer(_ref) {
       (_updateTooltip$curren = updateTooltip.current) === null || _updateTooltip$curren === void 0 || _updateTooltip$curren.call(updateTooltip);
     }
   }, [width]);
-  var resizeRatio = !isTableAlignmentEnabled || isTableAlignmentEnabled && normaliseAlignment(node.attrs.layout) === 'center' ? 2 : 1;
+  var resizeRatio = !isTableAlignmentEnabled || isTableAlignmentEnabled && normaliseAlignment(node.attrs.layout) === ALIGN_CENTER ? 2 : 1;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ResizerNext, {
     ref: resizerRef,
     enable: handles,

package/dist/esm/utils/guidelines.js

@@ -6,5 +6,7 @@ import { calculateDefaultSnappings, calculateDefaultTablePreserveSnappings } fro
 // If we don't do this then the guidelines will not align correctly to the edge of the table
 export var defaultGuidelines = createFixedGuidelinesFromLengths([0].concat(_toConsumableArray(calculateDefaultSnappings(-1))));
 export var defaultGuidelinesForPreserveTable = function defaultGuidelinesForPreserveTable(editorContainerWidth) {
-  return createFixedGuidelinesFromLengths([0].concat(_toConsumableArray(calculateDefaultTablePreserveSnappings(-1, editorContainerWidth))), undefined, true);
+  var excludeInnerGuidelines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var lengths = calculateDefaultTablePreserveSnappings(-1, editorContainerWidth, excludeInnerGuidelines);
+  return createFixedGuidelinesFromLengths(lengths, undefined, true);
 };

package/dist/esm/utils/snapping.js

@@ -17,14 +17,19 @@ export var calculateDefaultSnappings = function calculateDefaultSnappings() {
 export var calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   var editorContainerWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : akEditorFullWidthLayoutWidth;
+  var excludeInnerGuidelines = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - tableResizerWidth;
-  return [].concat(_toConsumableArray(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset)), [akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset]);
+  if (excludeInnerGuidelines) {
+    return [akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
+  }
+  return [0].concat(_toConsumableArray(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset)), [akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset]);
 };
 export var defaultSnappingWidths = calculateDefaultSnappings();
 
 // FF TablePreserve for defaultSnappingWidths
 export var defaultTablePreserveSnappingWidths = function defaultTablePreserveSnappingWidths(editorContainerWidth) {
-  return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth);
+  var excludeInnerGuidelines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, excludeInnerGuidelines);
 };
 
 /**

package/dist/types/commands/misc.d.ts

@@ -2,7 +2,7 @@ import type { TableLayout } from '@atlaskit/adf-schema';
 import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import type { Node as PMNode, Schema, Slice } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type { ContentNodeWithPos, NodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { WidthToWidest } from '../types';
 export declare const setEditorFocus: (editorHasFocus: boolean) => Command;
@@ -37,3 +37,4 @@ export declare const autoSizeTable: (view: EditorView, node: PMNode, table: HTML
 export declare const addBoldInEmptyHeaderCells: (tableCellHeader: ContentNodeWithPos) => Command;
 export declare const updateWidthToWidest: (widthToWidest: WidthToWidest) => Command;
 export declare const setTableAlignment: (newAlignment: TableLayout) => EditorCommand;
+export declare const setTableAlignmentWithTableContentWithPos: (newAlignment: TableLayout, tableNodeWithPos: NodeWithPos) => EditorCommand;

package/dist/types/nodeviews/TableContainer.d.ts

@@ -17,6 +17,7 @@ export declare const InnerContainer: React.ForwardRefExoticComponent<InnerContai
 } & React.RefAttributes<HTMLDivElement>>;
 type ResizableTableContainerProps = {
     containerWidth: number;
+    lineLength: number;
     node: PMNode;
     className: string;
     editorView: EditorView;
@@ -29,7 +30,7 @@ type ResizableTableContainerProps = {
     isTableScalingEnabled?: boolean;
     isTableAlignmentEnabled?: boolean;
 };
-export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, tableWrapperHeight, isWholeTableInDanger, isTableScalingEnabled, isTableAlignmentEnabled, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
+export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, lineLength, editorView, getPos, tableRef, isResizing, pluginInjectionApi, tableWrapperHeight, isWholeTableInDanger, isTableScalingEnabled, isTableAlignmentEnabled, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
 type TableContainerProps = {
     node: PMNode;
     className: string;
@@ -46,5 +47,5 @@ type TableContainerProps = {
     isTableScalingEnabled?: boolean;
     isTableAlignmentEnabled?: boolean;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
 export {};

package/dist/types/nodeviews/TableResizer.d.ts

@@ -9,6 +9,7 @@ interface TableResizerProps {
     width: number;
     maxWidth: number;
     containerWidth: number;
+    lineLength: number;
     updateWidth: (width: number) => void;
     editorView: EditorView;
     getPos: () => number | undefined;
@@ -26,5 +27,5 @@ export interface TableResizerImprovementProps extends TableResizerProps {
     onResizeStop?: () => void;
     onResizeStart?: () => void;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableAlignmentEnabled, isWholeTableInDanger, pluginInjectionApi, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, lineLength, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableAlignmentEnabled, isWholeTableInDanger, pluginInjectionApi, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
 export {};

package/dist/types/utils/guidelines.d.ts

@@ -1,3 +1,3 @@
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 export declare const defaultGuidelines: GuidelineConfig[];
-export declare const defaultGuidelinesForPreserveTable: (editorContainerWidth: number) => GuidelineConfig[];
+export declare const defaultGuidelinesForPreserveTable: (editorContainerWidth: number, excludeInnerGuidelines?: boolean) => GuidelineConfig[];

package/dist/types/utils/snapping.d.ts

@@ -1,8 +1,8 @@
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 export declare const calculateDefaultSnappings: (lengthOffset?: number) => number[];
-export declare const calculateDefaultTablePreserveSnappings: (lengthOffset?: number, editorContainerWith?: number) => number[];
+export declare const calculateDefaultTablePreserveSnappings: (lengthOffset?: number, editorContainerWith?: number, excludeInnerGuidelines?: boolean) => number[];
 export declare const defaultSnappingWidths: number[];
-export declare const defaultTablePreserveSnappingWidths: (editorContainerWidth: number) => number[];
+export declare const defaultTablePreserveSnappingWidths: (editorContainerWidth: number, excludeInnerGuidelines?: boolean) => number[];
 /**
  * Returns keys of guidelines that are closest to the table and withthin the snapGap
  */

package/dist/types-ts4.5/commands/misc.d.ts

@@ -2,7 +2,7 @@ import type { TableLayout } from '@atlaskit/adf-schema';
 import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import type { Node as PMNode, Schema, Slice } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type { ContentNodeWithPos, NodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { WidthToWidest } from '../types';
 export declare const setEditorFocus: (editorHasFocus: boolean) => Command;
@@ -37,3 +37,4 @@ export declare const autoSizeTable: (view: EditorView, node: PMNode, table: HTML
 export declare const addBoldInEmptyHeaderCells: (tableCellHeader: ContentNodeWithPos) => Command;
 export declare const updateWidthToWidest: (widthToWidest: WidthToWidest) => Command;
 export declare const setTableAlignment: (newAlignment: TableLayout) => EditorCommand;
+export declare const setTableAlignmentWithTableContentWithPos: (newAlignment: TableLayout, tableNodeWithPos: NodeWithPos) => EditorCommand;

package/dist/types-ts4.5/nodeviews/TableContainer.d.ts

@@ -17,6 +17,7 @@ export declare const InnerContainer: React.ForwardRefExoticComponent<InnerContai
 } & React.RefAttributes<HTMLDivElement>>;
 type ResizableTableContainerProps = {
     containerWidth: number;
+    lineLength: number;
     node: PMNode;
     className: string;
     editorView: EditorView;
@@ -29,7 +30,7 @@ type ResizableTableContainerProps = {
     isTableScalingEnabled?: boolean;
     isTableAlignmentEnabled?: boolean;
 };
-export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, tableWrapperHeight, isWholeTableInDanger, isTableScalingEnabled, isTableAlignmentEnabled, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
+export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, lineLength, editorView, getPos, tableRef, isResizing, pluginInjectionApi, tableWrapperHeight, isWholeTableInDanger, isTableScalingEnabled, isTableAlignmentEnabled, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
 type TableContainerProps = {
     node: PMNode;
     className: string;
@@ -46,5 +47,5 @@ type TableContainerProps = {
     isTableScalingEnabled?: boolean;
     isTableAlignmentEnabled?: boolean;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
 export {};

package/dist/types-ts4.5/nodeviews/TableResizer.d.ts

@@ -9,6 +9,7 @@ interface TableResizerProps {
     width: number;
     maxWidth: number;
     containerWidth: number;
+    lineLength: number;
     updateWidth: (width: number) => void;
     editorView: EditorView;
     getPos: () => number | undefined;
@@ -26,5 +27,5 @@ export interface TableResizerImprovementProps extends TableResizerProps {
     onResizeStop?: () => void;
     onResizeStart?: () => void;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableAlignmentEnabled, isWholeTableInDanger, pluginInjectionApi, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, lineLength, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableAlignmentEnabled, isWholeTableInDanger, pluginInjectionApi, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
 export {};

package/dist/types-ts4.5/utils/guidelines.d.ts

@@ -1,3 +1,3 @@
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 export declare const defaultGuidelines: GuidelineConfig[];
-export declare const defaultGuidelinesForPreserveTable: (editorContainerWidth: number) => GuidelineConfig[];
+export declare const defaultGuidelinesForPreserveTable: (editorContainerWidth: number, excludeInnerGuidelines?: boolean) => GuidelineConfig[];

package/dist/types-ts4.5/utils/snapping.d.ts

@@ -1,8 +1,8 @@
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 export declare const calculateDefaultSnappings: (lengthOffset?: number) => number[];
-export declare const calculateDefaultTablePreserveSnappings: (lengthOffset?: number, editorContainerWith?: number) => number[];
+export declare const calculateDefaultTablePreserveSnappings: (lengthOffset?: number, editorContainerWith?: number, excludeInnerGuidelines?: boolean) => number[];
 export declare const defaultSnappingWidths: number[];
-export declare const defaultTablePreserveSnappingWidths: (editorContainerWidth: number) => number[];
+export declare const defaultTablePreserveSnappingWidths: (editorContainerWidth: number, excludeInnerGuidelines?: boolean) => number[];
 /**
  * Returns keys of guidelines that are closest to the table and withthin the snapGap
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.16.6",
+  "version": "7.16.8",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,9 +29,9 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^36.10.7",
-    "@atlaskit/button": "^17.16.0",
+    "@atlaskit/button": "^17.17.0",
     "@atlaskit/custom-steps": "^0.2.0",
-    "@atlaskit/editor-common": "^81.0.0",
+    "@atlaskit/editor-common": "^81.1.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",

package/src/commands/misc.ts

@@ -19,7 +19,10 @@ import type {
   Selection,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
-import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type {
+  ContentNodeWithPos,
+  NodeWithPos,
+} from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -831,3 +834,19 @@ export const setTableAlignment =
 
     return tr;
   };
+
+export const setTableAlignmentWithTableContentWithPos =
+  (newAlignment: TableLayout, tableNodeWithPos: NodeWithPos): EditorCommand =>
+  ({ tr }) => {
+    const nextTableAttrs = {
+      ...tableNodeWithPos.node.attrs,
+      layout: newAlignment,
+    };
+
+    tr.setNodeMarkup(tableNodeWithPos.pos, undefined, nextTableAttrs).setMeta(
+      'scrollIntoView',
+      false,
+    );
+
+    return tr;
+  };

package/src/nodeviews/TableContainer.tsx

@@ -109,6 +109,7 @@ const AlignmentTableContainerWrapper = ({
 
 type ResizableTableContainerProps = {
   containerWidth: number;
+  lineLength: number;
   node: PMNode;
   className: string;
   editorView: EditorView;
@@ -129,6 +130,7 @@ export const ResizableTableContainer = React.memo(
     className,
     node,
     containerWidth,
+    lineLength,
     editorView,
     getPos,
     tableRef,
@@ -246,6 +248,7 @@ export const ResizableTableContainer = React.memo(
       width,
       maxWidth: maxResizerWidth,
       containerWidth,
+      lineLength,
       updateWidth,
       editorView,
       getPos,
@@ -323,7 +326,7 @@ export const TableContainer = ({
   children,
   node,
   className,
-  containerWidth: { width: editorWidth },
+  containerWidth: { width: editorWidth, lineLength },
   editorView,
   getPos,
   tableRef,
@@ -342,6 +345,7 @@ export const TableContainer = ({
         className={className}
         node={node}
         containerWidth={editorWidth!}
+        lineLength={lineLength!}
         editorView={editorView}
         getPos={getPos}
         tableRef={tableRef}

package/src/nodeviews/TableResizer.tsx

@@ -24,6 +24,7 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import type { HandleResize, HandleSize } from '@atlaskit/editor-common/resizer';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { browser } from '@atlaskit/editor-common/utils';
+import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -31,7 +32,10 @@ import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { token } from '@atlaskit/tokens';
 
-import { updateWidthToWidest } from '../commands/misc';
+import {
+  setTableAlignmentWithTableContentWithPos,
+  updateWidthToWidest,
+} from '../commands/misc';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import {
   COLUMN_MIN_WIDTH,
@@ -48,7 +52,11 @@ import {
   TABLE_HIGHLIGHT_TOLERANCE,
   TABLE_SNAP_GAP,
 } from '../ui/consts';
-import { normaliseAlignment } from '../utils/alignment';
+import {
+  ALIGN_CENTER,
+  ALIGN_START,
+  normaliseAlignment,
+} from '../utils/alignment';
 import {
   generateResizedPayload,
   generateResizeFrameRatePayloads,
@@ -68,6 +76,7 @@ interface TableResizerProps {
   width: number;
   maxWidth: number;
   containerWidth: number;
+  lineLength: number;
   updateWidth: (width: number) => void;
   editorView: EditorView;
   getPos: () => number | undefined;
@@ -93,6 +102,8 @@ type ResizerNextHandler = React.ElementRef<typeof ResizerNext>;
 
 const RESIZE_STEP_VALUE = 10;
 
+const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
+
 const handles = { right: true };
 const handleStyles = {
   right: {
@@ -160,6 +171,7 @@ export const TableResizer = ({
   width,
   maxWidth,
   containerWidth,
+  lineLength,
   updateWidth,
   onResizeStop,
   onResizeStart,
@@ -203,7 +215,10 @@ export const TableResizer = ({
         currentGap.current = gap;
         const visibleGuidelines = getVisibleGuidelines(
           isTableScalingEnabled
-            ? defaultGuidelinesForPreserveTable(containerWidth)
+            ? defaultGuidelinesForPreserveTable(
+                containerWidth,
+                isTableAlignmentEnabled,
+              )
             : defaultGuidelines,
           containerWidth,
         );
@@ -218,7 +233,12 @@ export const TableResizer = ({
         );
       }
     },
-    [isTableScalingEnabled, containerWidth, displayGuideline],
+    [
+      isTableScalingEnabled,
+      isTableAlignmentEnabled,
+      containerWidth,
+      displayGuideline,
+    ],
   );
 
   const guidelineSnaps = useMemo(
@@ -226,11 +246,47 @@ export const TableResizer = ({
       snappingEnabled
         ? {
             x: isTableScalingEnabled
-              ? defaultTablePreserveSnappingWidths(containerWidth)
+              ? defaultTablePreserveSnappingWidths(
+                  containerWidth,
+                  isTableAlignmentEnabled,
+                )
               : defaultSnappingWidths,
           }
         : undefined,
-    [snappingEnabled, isTableScalingEnabled, containerWidth],
+    [
+      snappingEnabled,
+      isTableScalingEnabled,
+      isTableAlignmentEnabled,
+      containerWidth,
+    ],
+  );
+
+  const switchToCenterAlignment = useCallback(
+    (pos, node, newWidth, state, dispatch) => {
+      if (
+        isTableAlignmentEnabled &&
+        node &&
+        node.attrs.layout === ALIGN_START &&
+        newWidth > lineLength &&
+        lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH && // We don't want to switch alignment in Full-width editor
+        isResizing.current
+      ) {
+        const tableNodeWithPos = { pos, node };
+        const tr = setTableAlignmentWithTableContentWithPos(
+          ALIGN_CENTER,
+          tableNodeWithPos,
+        )(state);
+
+        if (tr) {
+          dispatch(tr);
+        }
+
+        return true;
+      }
+
+      return false;
+    },
+    [lineLength, isTableAlignmentEnabled, isResizing],
   );
 
   useEffect(() => {
@@ -276,7 +332,10 @@ export const TableResizer = ({
 
     const visibleGuidelines = getVisibleGuidelines(
       isTableScalingEnabled
-        ? defaultGuidelinesForPreserveTable(containerWidth)
+        ? defaultGuidelinesForPreserveTable(
+            containerWidth,
+            isTableAlignmentEnabled,
+          )
         : defaultGuidelines,
       containerWidth,
     );
@@ -292,6 +351,7 @@ export const TableResizer = ({
     node.attrs.localId,
     tableRef,
     isTableScalingEnabled,
+    isTableAlignmentEnabled,
     containerWidth,
     displayGuideline,
     onResizeStart,
@@ -326,10 +386,16 @@ export const TableResizer = ({
       const closestSnap = findClosestSnap(
         newWidth,
         isTableScalingEnabled
-          ? defaultTablePreserveSnappingWidths(containerWidth)
+          ? defaultTablePreserveSnappingWidths(
+              containerWidth,
+              isTableAlignmentEnabled,
+            )
           : defaultSnappingWidths,
         isTableScalingEnabled
-          ? defaultGuidelinesForPreserveTable(containerWidth)
+          ? defaultGuidelinesForPreserveTable(
+              containerWidth,
+              isTableAlignmentEnabled,
+            )
           : defaultGuidelines,
         TABLE_HIGHLIGHT_GAP,
         TABLE_HIGHLIGHT_TOLERANCE,
@@ -343,6 +409,7 @@ export const TableResizer = ({
 
       const fullWidthGuideline = defaultGuidelinesForPreserveTable(
         containerWidth,
+        isTableAlignmentEnabled,
       ).filter((guideline) => guideline.isFullWidth)[0];
 
       const isFullWidthGuidelineActive = closestSnap.keys.includes(
@@ -351,9 +418,14 @@ export const TableResizer = ({
       const shouldUpdateWidthToWidest =
         !!isTableScalingEnabled && isFullWidthGuidelineActive;
 
-      updateWidthToWidest({
-        [currentTableNodeLocalId]: shouldUpdateWidthToWidest,
-      })(state, dispatch);
+      chainCommands(
+        (state, dispatch) => {
+          return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
+        },
+        updateWidthToWidest({
+          [currentTableNodeLocalId]: shouldUpdateWidthToWidest,
+        }),
+      )(state, dispatch);
 
       updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
 
@@ -362,6 +434,7 @@ export const TableResizer = ({
     [
       countFrames,
       isTableScalingEnabled,
+      isTableAlignmentEnabled,
       tableRef,
       node,
       editorView,
@@ -369,6 +442,7 @@ export const TableResizer = ({
       containerWidth,
       updateWidth,
       getPos,
+      switchToCenterAlignment,
     ],
   );
 
@@ -600,7 +674,7 @@ export const TableResizer = ({
   const resizeRatio =
     !isTableAlignmentEnabled ||
     (isTableAlignmentEnabled &&
-      normaliseAlignment(node.attrs.layout) === 'center')
+      normaliseAlignment(node.attrs.layout) === ALIGN_CENTER)
       ? 2
       : 1;
 

package/src/utils/guidelines.ts

@@ -15,9 +15,17 @@ export const defaultGuidelines = createFixedGuidelinesFromLengths([
 
 export const defaultGuidelinesForPreserveTable = (
   editorContainerWidth: number,
-) =>
-  createFixedGuidelinesFromLengths(
-    [0, ...calculateDefaultTablePreserveSnappings(-1, editorContainerWidth)],
+  excludeInnerGuidelines = false,
+) => {
+  const lengths = calculateDefaultTablePreserveSnappings(
+    -1,
+    editorContainerWidth,
+    excludeInnerGuidelines,
+  );
+
+  return createFixedGuidelinesFromLengths(
+    lengths,
     undefined,
     true,
   ) as GuidelineConfig[];
+};

package/src/utils/snapping.ts

@@ -30,6 +30,7 @@ export const calculateDefaultSnappings = (lengthOffset: number = 0) => [
 export const calculateDefaultTablePreserveSnappings = (
   lengthOffset: number = 0,
   editorContainerWith: number = akEditorFullWidthLayoutWidth,
+  excludeInnerGuidelines = false,
 ) => {
   const dynamicFullWidthLine =
     editorContainerWith - akEditorGutterPadding * 2 >=
@@ -37,7 +38,16 @@ export const calculateDefaultTablePreserveSnappings = (
       ? akEditorFullWidthLayoutWidth
       : editorContainerWith - akEditorGutterPadding * 2 - tableResizerWidth;
 
+  if (excludeInnerGuidelines) {
+    return [
+      akEditorDefaultLayoutWidth + lengthOffset,
+      akEditorCalculatedWideLayoutWidth + lengthOffset,
+      dynamicFullWidthLine - lengthOffset,
+    ];
+  }
+
   return [
+    0,
     ...calculateSubSnappingWidths(
       numberOfLanesInDefaultLayoutWidth,
       akEditorDefaultLayoutWidth + lengthOffset,
@@ -53,11 +63,16 @@ export const defaultSnappingWidths = calculateDefaultSnappings();
 // FF TablePreserve for defaultSnappingWidths
 export const defaultTablePreserveSnappingWidths = (
   editorContainerWidth: number,
+  excludeInnerGuidelines = false,
 ) => {
   return editorContainerWidth - akEditorGutterPadding * 2 >
     akEditorFullWidthLayoutWidth
     ? calculateDefaultSnappings()
-    : calculateDefaultTablePreserveSnappings(0, editorContainerWidth);
+    : calculateDefaultTablePreserveSnappings(
+        0,
+        editorContainerWidth,
+        excludeInnerGuidelines,
+      );
 };
 
 /**