@atlaskit/editor-plugin-table 7.16.7 → 7.16.8

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @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

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,
@@ -141,21 +144,37 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       x: isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth, isTableAlignmentEnabled) : _snapping.defaultSnappingWidths
     } : undefined;
   }, [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]);
@@ -211,10 +230,12 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     })[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, isTableAlignmentEnabled, 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/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,
@@ -128,6 +131,22 @@ export const TableResizer = ({
   const guidelineSnaps = useMemo(() => snappingEnabled ? {
     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
@@ -206,12 +225,14 @@ export const TableResizer = ({
     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, isTableAlignmentEnabled, 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/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,
@@ -131,21 +134,37 @@ export var TableResizer = function TableResizer(_ref) {
       x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths
     } : undefined;
   }, [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]);
@@ -201,10 +220,12 @@ export var TableResizer = function TableResizer(_ref) {
     })[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, isTableAlignmentEnabled, 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/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-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.16.7",
+  "version": "7.16.8",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/adf-schema": "^36.10.7",
     "@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,
@@ -249,6 +261,34 @@ export const TableResizer = ({
     ],
   );
 
+  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
@@ -378,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);
 
@@ -397,6 +442,7 @@ export const TableResizer = ({
       containerWidth,
       updateWidth,
       getPos,
+      switchToCenterAlignment,
     ],
   );
 
@@ -628,7 +674,7 @@ export const TableResizer = ({
   const resizeRatio =
     !isTableAlignmentEnabled ||
     (isTableAlignmentEnabled &&
-      normaliseAlignment(node.attrs.layout) === 'center')
+      normaliseAlignment(node.attrs.layout) === ALIGN_CENTER)
       ? 2
       : 1;