@atlaskit/editor-plugin-table 7.19.0 → 7.19.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 7.19.1
+
+### Patch Changes
+
+- [`0c728cec893a0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0c728cec893a0) -
+  ED-23730: Change table to align center when column resizing makes table width wider than
+  linelength
+
 ## 7.19.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/TableResizer.js

@@ -37,7 +37,6 @@ 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
 };
@@ -174,9 +173,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     } : undefined;
   }, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, isFullWidthModeEnabled]);
   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) {
+    if ((0, _alignment.shouldChangeAlignmentToCenterResized)(isTableAlignmentEnabled, node, lineLength, newWidth) && isResizing.current) {
       var _pluginInjectionApi$a;
       var tableNodeWithPos = {
         pos: pos,

package/dist/cjs/plugin.js

@@ -178,12 +178,13 @@ var tablesPlugin = function tablesPlugin(_ref) {
             tableOptions = _ref5.tableOptions,
             getEditorFeatureFlags = _ref5.getEditorFeatureFlags,
             isTableScalingEnabled = _ref5.isTableScalingEnabled,
-            isNewColumnResizingEnabled = _ref5.isNewColumnResizingEnabled;
+            isNewColumnResizingEnabled = _ref5.isNewColumnResizingEnabled,
+            isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled;
           var _pluginConfig = (0, _createPluginConfig.pluginConfig)(tableOptions),
             allowColumnResizing = _pluginConfig.allowColumnResizing;
           return allowColumnResizing ? (0, _tableResizing.createPlugin)(dispatch, {
             lastColumnResizable: !fullWidthEnabled
-          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled) : undefined;
+          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled, isTableAlignmentEnabled) : undefined;
         }
       }, {
         name: 'tableEditing',

package/dist/cjs/pm-plugins/table-resizing/event-handlers.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.handleMouseDown = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _styles = require("@atlaskit/editor-common/styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
@@ -13,16 +15,21 @@ var _columnResize = require("../../commands/column-resize");
 var _misc = require("../../commands/misc");
 var _transforms = require("../../transforms");
 var _utils2 = require("../../utils");
+var _alignment = require("../../utils/alignment");
 var _pluginFactory = require("../plugin-factory");
 var _tableAnalytics = require("../table-analytics");
 var _commands = require("./commands");
 var _pluginFactory2 = require("./plugin-factory");
 var _utils3 = require("./utils");
-var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI, isNewColumnResizingEnabled) {
+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 handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled) {
   var state = view.state,
     dispatch = view.dispatch;
   var editorDisabled = !view.editable;
   var domAtPos = view.domAtPos.bind(view);
+  var _getEditorContainerWi = getEditorContainerWidth(),
+    lineLength = _getEditorContainerWi.lineLength;
   if (editorDisabled || localResizeHandlePos === null || !(0, _utils3.pointsAtCell)(state.doc.resolve(localResizeHandlePos))) {
     return false;
   }
@@ -133,6 +140,8 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
       // There may be a more elegant solution to this, to avoid a jarring experience.
       if (table.eq(originalTable)) {
         var map = _tableMap.TableMap.get(table);
+        var totalRowCount = map.height;
+        var totalColumnCount = map.width;
         var colIndex = map.colCount($cell.pos - start) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;
         var selectionRect = (0, _utils.getSelectionRect)(state.selection);
         var selectedColumns = selectionRect ? (0, _utils2.getSelectedColumnIndexes)(selectionRect) : [];
@@ -149,9 +158,34 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
           // isTableScalingEnabled
           undefined,
           // originalTableWidth
-          shouldUseIncreasedScalingPercent);
+          shouldUseIncreasedScalingPercent, lineLength, isTableAlignmentEnabled);
           tr = (0, _transforms.updateColumnWidths)(newResizeState, table, start)(tr);
-          tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+
+          // If the table is aligned to the start and the table width is greater than the line length, we should change the alignment to center
+          var shouldChangeAlignment = (0, _alignment.shouldChangeAlignmentToCenterResized)(isTableAlignmentEnabled, originalTable, lineLength, newResizeState.tableWidth);
+          if (shouldChangeAlignment) {
+            tr = tr.setNodeMarkup(start - 1, state.schema.nodes.table, _objectSpread(_objectSpread({}, table.attrs), {}, {
+              width: newResizeState.tableWidth,
+              layout: _alignment.ALIGN_CENTER
+            }));
+            editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+              action: _analytics.TABLE_ACTION.CHANGED_ALIGNMENT,
+              actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+              actionSubjectId: null,
+              attributes: {
+                tableWidth: newResizeState.tableWidth,
+                newAlignment: _alignment.ALIGN_CENTER,
+                previousAlignment: _alignment.ALIGN_START,
+                totalRowCount: totalRowCount,
+                totalColumnCount: totalColumnCount,
+                inputMethod: _analytics.INPUT_METHOD.AUTO,
+                reason: _analytics.CHANGE_ALIGNMENT_REASON.TABLE_COLUMN_RESIZED
+              },
+              eventType: _analytics.EVENT_TYPE.TRACK
+            })(tr);
+          } else {
+            tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+          }
         } else {
           var _newResizeState = (0, _utils3.resizeColumn)(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale, shouldUseIncreasedScalingPercent);
           tr = (0, _transforms.updateColumnWidths)(_newResizeState, table, start)(tr);
@@ -222,7 +256,7 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
     if (isNewColumnResizingEnabled && !(0, _utils2.isTableNested)(state, tablePos)) {
-      (0, _utils3.resizeColumnAndTable)(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, undefined, shouldUseIncreasedScalingPercent);
+      (0, _utils3.resizeColumnAndTable)(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, undefined, shouldUseIncreasedScalingPercent, lineLength, isTableAlignmentEnabled);
     } else {
       (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, shouldUseIncreasedScalingPercent);
     }

package/dist/cjs/pm-plugins/table-resizing/plugin.js

@@ -15,7 +15,7 @@ var _eventHandlers = require("./event-handlers");
 var _pluginFactory2 = require("./plugin-factory");
 var _pluginKey = require("./plugin-key");
 var _utils = require("./utils");
-function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled) {
+function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled, isTableAlignmentEnabled) {
   var _ref$lastColumnResiza = _ref.lastColumnResizable,
     lastColumnResizable = _ref$lastColumnResiza === void 0 ? true : _ref$lastColumnResiza;
   return new _safePlugin.SafePlugin({
@@ -53,7 +53,7 @@ function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureF
             isColumnKeyboardResizeStarted = isKeyboardResize;
           }
           if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
-            if ((0, _eventHandlers.handleMouseDown)(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI, isNewColumnResizingEnabled)) {
+            if ((0, _eventHandlers.handleMouseDown)(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled)) {
               var _state = view.state,
                 _dispatch = view.dispatch;
               return (0, _commands.setResizeHandlePos)(resizeHandlePos)(_state, _dispatch);

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

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

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

@@ -33,6 +33,8 @@ var resizeColumnAndTable = exports.resizeColumnAndTable = function resizeColumnA
   var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   var originalTableWidth = arguments.length > 7 ? arguments[7] : undefined;
   var shouldUseIncreasedScalingPercent = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
+  var lineLength = arguments.length > 9 ? arguments[9] : undefined;
+  var isTableAlignmentEnabled = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : false;
   // TODO: can we use document state, and apply scaling factor?
   var tableWidth = tableRef.clientWidth;
   var tableContainerWidth = (_tableRef$closest = tableRef.closest('.pm-table-container')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
@@ -63,17 +65,20 @@ var resizeColumnAndTable = exports.resizeColumnAndTable = function resizeColumnA
   // use the difference in width from affected column to update overall table width
   var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
   if (!isOverflowed) {
-    updateTablePreview(delta, tableRef, tableNode);
+    // If the table is aligned to the start and the table width is greater than the line length, we should change the alignment to center
+    var shouldChangeAlignment = (0, _alignment.shouldChangeAlignmentToCenterResized)(isTableAlignmentEnabled, tableNode, lineLength, newState.tableWidth + delta);
+    shouldChangeAlignment ? updateTablePreview(delta, tableRef, tableNode, _alignment.ALIGN_CENTER) : updateTablePreview(delta, tableRef, tableNode);
   }
   return _objectSpread(_objectSpread({}, newState), {}, {
     // resizeState.tableWidth sometimes is off by ~3px on load on resized table when !isOverflowed, using resizeState.maxSize instead
     tableWidth: isOverflowed ? tableContainerWidth : resizeState.maxSize + delta
   });
 };
-var updateTablePreview = function updateTablePreview(resizeAmount, tableRef, tableNode) {
+var updateTablePreview = function updateTablePreview(resizeAmount, tableRef, tableNode, tableAligment) {
   var currentWidth = (0, _misc.getTableContainerElementWidth)(tableNode);
   var resizingContainer = tableRef === null || tableRef === void 0 ? void 0 : tableRef.closest(".".concat(_types.TableCssClassName.TABLE_RESIZER_CONTAINER));
   var resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
+  var alignmentContainer = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.parentElement;
   if (resizingItem) {
     var newWidth = "".concat(currentWidth + resizeAmount, "px");
     if (tableRef) {
@@ -81,5 +86,8 @@ var updateTablePreview = function updateTablePreview(resizeAmount, tableRef, tab
     }
     resizingContainer.style.width = newWidth;
     resizingItem.style.width = newWidth;
+    if (tableAligment && alignmentContainer) {
+      alignmentContainer.style.justifyContent = tableAligment;
+    }
   }
 };

package/dist/cjs/toolbar.js

@@ -350,7 +350,10 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
 
       // We don't want to show floating toolbar while resizing the table
       var isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
-      if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
+
+      // Hide floating toolbar when resizing column and internal column width is on
+      var shouldHideToolbarForInternalColumnWidth = Boolean((options === null || options === void 0 ? void 0 : options.isNewColumnResizingEnabled) && resizeState && resizeState.dragging);
+      if (tableObject && pluginState.editorHasFocus && !isWidthResizing && !shouldHideToolbarForInternalColumnWidth) {
         var nodeType = state.schema.nodes.table;
         var isNested = pluginState.tablePos && (0, _utils4.isTableNested)(state, pluginState.tablePos);
         var isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;

package/dist/cjs/utils/alignment.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.normaliseAlignment = exports.ALIGN_START = exports.ALIGN_CENTER = void 0;
+exports.shouldChangeAlignmentToCenterResized = exports.normaliseAlignment = exports.ALIGN_START = exports.ALIGN_CENTER = void 0;
+var _consts = require("../pm-plugins/table-resizing/utils/consts");
 var ALIGN_START = exports.ALIGN_START = 'align-start';
 var ALIGN_CENTER = exports.ALIGN_CENTER = 'center';
 
@@ -13,4 +14,11 @@ var ALIGN_CENTER = exports.ALIGN_CENTER = 'center';
  */
 var normaliseAlignment = exports.normaliseAlignment = function normaliseAlignment(layout) {
   return layout === ALIGN_CENTER || layout === ALIGN_START ? layout : ALIGN_CENTER;
+};
+
+/**
+ * We don't want to switch alignment in Full-width editor
+ */
+var shouldChangeAlignmentToCenterResized = exports.shouldChangeAlignmentToCenterResized = function shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, tableNode, lineLength, updatedTableWidth) {
+  return isTableAlignmentEnabled && tableNode && tableNode.attrs.layout === ALIGN_START && lineLength && updatedTableWidth > lineLength && lineLength < _consts.FULL_WIDTH_EDITOR_CONTENT_WIDTH;
 };

package/dist/es2019/nodeviews/TableResizer.js

@@ -18,12 +18,11 @@ 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 { ALIGN_CENTER, ALIGN_START, normaliseAlignment } from '../utils/alignment';
+import { ALIGN_CENTER, ALIGN_START, normaliseAlignment, shouldChangeAlignmentToCenterResized } from '../utils/alignment';
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
 import { defaultGuidelines, defaultGuidelinesForPreserveTable, PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET } from '../utils/guidelines';
 import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap, PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET } from '../utils/snapping';
 const RESIZE_STEP_VALUE = 10;
-const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 const handles = {
   right: true
 };
@@ -159,9 +158,7 @@ export const TableResizer = ({
     isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
   } : undefined, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, isFullWidthModeEnabled]);
   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) {
+    if (shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, node, lineLength, newWidth) && isResizing.current) {
       var _pluginInjectionApi$a;
       const tableNodeWithPos = {
         pos,

package/dist/es2019/plugin.js

@@ -170,14 +170,15 @@ const tablesPlugin = ({
             tableOptions,
             getEditorFeatureFlags,
             isTableScalingEnabled,
-            isNewColumnResizingEnabled
+            isNewColumnResizingEnabled,
+            isTableAlignmentEnabled
           } = options || {};
           const {
             allowColumnResizing
           } = pluginConfig(tableOptions);
           return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
             lastColumnResizable: !fullWidthEnabled
-          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled) : undefined;
+          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled, isTableAlignmentEnabled) : undefined;
         }
       }, {
         name: 'tableEditing',

package/dist/es2019/pm-plugins/table-resizing/event-handlers.js

@@ -1,4 +1,4 @@
-import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
+import { ACTION_SUBJECT, CHANGE_ALIGNMENT_REASON, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
@@ -7,18 +7,22 @@ import { stopKeyboardColumnResizing } from '../../commands/column-resize';
 import { updateResizeHandleDecorations } from '../../commands/misc';
 import { updateColumnWidths } from '../../transforms';
 import { getSelectedColumnIndexes, isTableNested } from '../../utils';
+import { ALIGN_CENTER, ALIGN_START, shouldChangeAlignmentToCenterResized } from '../../utils/alignment';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
 import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, resizeColumnAndTable, updateControls } from './utils';
-export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI, isNewColumnResizingEnabled) => {
+export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled) => {
   const {
     state,
     dispatch
   } = view;
   const editorDisabled = !view.editable;
   const domAtPos = view.domAtPos.bind(view);
+  const {
+    lineLength
+  } = getEditorContainerWidth();
   if (editorDisabled || localResizeHandlePos === null || !pointsAtCell(state.doc.resolve(localResizeHandlePos))) {
     return false;
   }
@@ -140,6 +144,8 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
       // There may be a more elegant solution to this, to avoid a jarring experience.
       if (table.eq(originalTable)) {
         const map = TableMap.get(table);
+        const totalRowCount = map.height;
+        const totalColumnCount = map.width;
         const colIndex = map.colCount($cell.pos - start) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;
         const selectionRect = getSelectionRect(state.selection);
         const selectedColumns = selectionRect ? getSelectedColumnIndexes(selectionRect) : [];
@@ -156,9 +162,35 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
           // isTableScalingEnabled
           undefined,
           // originalTableWidth
-          shouldUseIncreasedScalingPercent);
+          shouldUseIncreasedScalingPercent, lineLength, isTableAlignmentEnabled);
           tr = updateColumnWidths(newResizeState, table, start)(tr);
-          tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+
+          // If the table is aligned to the start and the table width is greater than the line length, we should change the alignment to center
+          const shouldChangeAlignment = shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, originalTable, lineLength, newResizeState.tableWidth);
+          if (shouldChangeAlignment) {
+            tr = tr.setNodeMarkup(start - 1, state.schema.nodes.table, {
+              ...table.attrs,
+              width: newResizeState.tableWidth,
+              layout: ALIGN_CENTER
+            });
+            editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+              action: TABLE_ACTION.CHANGED_ALIGNMENT,
+              actionSubject: ACTION_SUBJECT.TABLE,
+              actionSubjectId: null,
+              attributes: {
+                tableWidth: newResizeState.tableWidth,
+                newAlignment: ALIGN_CENTER,
+                previousAlignment: ALIGN_START,
+                totalRowCount: totalRowCount,
+                totalColumnCount: totalColumnCount,
+                inputMethod: INPUT_METHOD.AUTO,
+                reason: CHANGE_ALIGNMENT_REASON.TABLE_COLUMN_RESIZED
+              },
+              eventType: EVENT_TYPE.TRACK
+            })(tr);
+          } else {
+            tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+          }
         } else {
           const newResizeState = resizeColumn(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale, shouldUseIncreasedScalingPercent);
           tr = updateColumnWidths(newResizeState, table, start)(tr);
@@ -235,7 +267,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
     if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
-      resizeColumnAndTable(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, undefined, shouldUseIncreasedScalingPercent);
+      resizeColumnAndTable(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, undefined, shouldUseIncreasedScalingPercent, lineLength, isTableAlignmentEnabled);
     } else {
       resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, shouldUseIncreasedScalingPercent);
     }

package/dist/es2019/pm-plugins/table-resizing/plugin.js

@@ -9,7 +9,7 @@ import { pluginKey } from './plugin-key';
 import { getResizeCellPos } from './utils';
 export function createPlugin(dispatch, {
   lastColumnResizable = true
-}, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled) {
+}, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled, isTableAlignmentEnabled) {
   return new SafePlugin({
     key: pluginKey,
     state: createPluginState(dispatch, {
@@ -51,7 +51,7 @@ export function createPlugin(dispatch, {
             isColumnKeyboardResizeStarted = isKeyboardResize;
           }
           if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
-            if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI, isNewColumnResizingEnabled)) {
+            if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled)) {
               const {
                 state,
                 dispatch

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

@@ -1,6 +1,7 @@
 export const COLUMN_MIN_WIDTH = 48;
 export const TABLE_DEFAULT_WIDTH = 760;
 export const TABLE_MAX_WIDTH = 1800;
+export const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 export const MAX_SCALING_PERCENT = 0.3;
 export const MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
 // Used to calculate the width of a table using the Editor width

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

@@ -1,7 +1,7 @@
 // Resize a given column by an amount from the current state
 
 import { TableCssClassName as ClassName } from '../../../types';
-import { ALIGN_START } from '../../../utils/alignment';
+import { ALIGN_CENTER, ALIGN_START, shouldChangeAlignmentToCenterResized } from '../../../utils/alignment';
 import { getTableContainerElementWidth, getTableScalingPercent } from './misc';
 import { growColumn, shrinkColumn, updateAffectedColumn } from './resize-logic';
 import { updateColgroup } from './resize-state';
@@ -18,7 +18,7 @@ export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode,
 };
 
 // try not scale table during resize
-export const resizeColumnAndTable = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false, originalTableWidth, shouldUseIncreasedScalingPercent = false) => {
+export const resizeColumnAndTable = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false, originalTableWidth, shouldUseIncreasedScalingPercent = false, lineLength, isTableAlignmentEnabled = false) => {
   var _tableRef$closest;
   // TODO: can we use document state, and apply scaling factor?
   const tableWidth = tableRef.clientWidth;
@@ -50,7 +50,9 @@ export const resizeColumnAndTable = (resizeState, colIndex, amount, tableRef, ta
   // use the difference in width from affected column to update overall table width
   const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
   if (!isOverflowed) {
-    updateTablePreview(delta, tableRef, tableNode);
+    // If the table is aligned to the start and the table width is greater than the line length, we should change the alignment to center
+    const shouldChangeAlignment = shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, tableNode, lineLength, newState.tableWidth + delta);
+    shouldChangeAlignment ? updateTablePreview(delta, tableRef, tableNode, ALIGN_CENTER) : updateTablePreview(delta, tableRef, tableNode);
   }
   return {
     ...newState,
@@ -58,10 +60,11 @@ export const resizeColumnAndTable = (resizeState, colIndex, amount, tableRef, ta
     tableWidth: isOverflowed ? tableContainerWidth : resizeState.maxSize + delta
   };
 };
-const updateTablePreview = (resizeAmount, tableRef, tableNode) => {
+const updateTablePreview = (resizeAmount, tableRef, tableNode, tableAligment) => {
   const currentWidth = getTableContainerElementWidth(tableNode);
   const resizingContainer = tableRef === null || tableRef === void 0 ? void 0 : tableRef.closest(`.${ClassName.TABLE_RESIZER_CONTAINER}`);
   const resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
+  const alignmentContainer = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.parentElement;
   if (resizingItem) {
     const newWidth = `${currentWidth + resizeAmount}px`;
     if (tableRef) {
@@ -69,5 +72,8 @@ const updateTablePreview = (resizeAmount, tableRef, tableNode) => {
     }
     resizingContainer.style.width = newWidth;
     resizingItem.style.width = newWidth;
+    if (tableAligment && alignmentContainer) {
+      alignmentContainer.style.justifyContent = tableAligment;
+    }
   }
 };

package/dist/es2019/toolbar.js

@@ -329,7 +329,10 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
 
   // We don't want to show floating toolbar while resizing the table
   const isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
-  if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
+
+  // Hide floating toolbar when resizing column and internal column width is on
+  const shouldHideToolbarForInternalColumnWidth = Boolean((options === null || options === void 0 ? void 0 : options.isNewColumnResizingEnabled) && resizeState && resizeState.dragging);
+  if (tableObject && pluginState.editorHasFocus && !isWidthResizing && !shouldHideToolbarForInternalColumnWidth) {
     const nodeType = state.schema.nodes.table;
     const isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
     const isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;

package/dist/es2019/utils/alignment.js

@@ -1,3 +1,4 @@
+import { FULL_WIDTH_EDITOR_CONTENT_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
 export const ALIGN_START = 'align-start';
 export const ALIGN_CENTER = 'center';
 
@@ -5,4 +6,9 @@ export const ALIGN_CENTER = 'center';
  * Normalise table layout attribute an alignment value ('center' or 'align-start'), returns
  * center if layout equals a breakout value (e.g. 'default', 'wide', 'full-width')
  */
-export const normaliseAlignment = layout => layout === ALIGN_CENTER || layout === ALIGN_START ? layout : ALIGN_CENTER;
+export const normaliseAlignment = layout => layout === ALIGN_CENTER || layout === ALIGN_START ? layout : ALIGN_CENTER;
+
+/**
+ * We don't want to switch alignment in Full-width editor
+ */
+export const shouldChangeAlignmentToCenterResized = (isTableAlignmentEnabled, tableNode, lineLength, updatedTableWidth) => isTableAlignmentEnabled && tableNode && tableNode.attrs.layout === ALIGN_START && lineLength && updatedTableWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH;

package/dist/esm/nodeviews/TableResizer.js

@@ -22,12 +22,11 @@ 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 { ALIGN_CENTER, ALIGN_START, normaliseAlignment } from '../utils/alignment';
+import { ALIGN_CENTER, ALIGN_START, normaliseAlignment, shouldChangeAlignmentToCenterResized } from '../utils/alignment';
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
 import { defaultGuidelines, defaultGuidelinesForPreserveTable, PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET } from '../utils/guidelines';
 import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap, PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET } from '../utils/snapping';
 var RESIZE_STEP_VALUE = 10;
-var FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 var handles = {
   right: true
 };
@@ -164,9 +163,7 @@ export var TableResizer = function TableResizer(_ref) {
     } : undefined;
   }, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, isFullWidthModeEnabled]);
   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) {
+    if (shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, node, lineLength, newWidth) && isResizing.current) {
       var _pluginInjectionApi$a;
       var tableNodeWithPos = {
         pos: pos,

package/dist/esm/plugin.js

@@ -171,12 +171,13 @@ var tablesPlugin = function tablesPlugin(_ref) {
             tableOptions = _ref5.tableOptions,
             getEditorFeatureFlags = _ref5.getEditorFeatureFlags,
             isTableScalingEnabled = _ref5.isTableScalingEnabled,
-            isNewColumnResizingEnabled = _ref5.isNewColumnResizingEnabled;
+            isNewColumnResizingEnabled = _ref5.isNewColumnResizingEnabled,
+            isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled;
           var _pluginConfig = pluginConfig(tableOptions),
             allowColumnResizing = _pluginConfig.allowColumnResizing;
           return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
             lastColumnResizable: !fullWidthEnabled
-          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled) : undefined;
+          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled, isTableAlignmentEnabled) : undefined;
         }
       }, {
         name: 'tableEditing',

package/dist/esm/pm-plugins/table-resizing/event-handlers.js

@@ -1,4 +1,7 @@
-import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { ACTION_SUBJECT, CHANGE_ALIGNMENT_REASON, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
@@ -7,16 +10,19 @@ import { stopKeyboardColumnResizing } from '../../commands/column-resize';
 import { updateResizeHandleDecorations } from '../../commands/misc';
 import { updateColumnWidths } from '../../transforms';
 import { getSelectedColumnIndexes, isTableNested } from '../../utils';
+import { ALIGN_CENTER, ALIGN_START, shouldChangeAlignmentToCenterResized } from '../../utils/alignment';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
 import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, resizeColumnAndTable, updateControls } from './utils';
-export var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI, isNewColumnResizingEnabled) {
+export var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled) {
   var state = view.state,
     dispatch = view.dispatch;
   var editorDisabled = !view.editable;
   var domAtPos = view.domAtPos.bind(view);
+  var _getEditorContainerWi = getEditorContainerWidth(),
+    lineLength = _getEditorContainerWi.lineLength;
   if (editorDisabled || localResizeHandlePos === null || !pointsAtCell(state.doc.resolve(localResizeHandlePos))) {
     return false;
   }
@@ -127,6 +133,8 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
       // There may be a more elegant solution to this, to avoid a jarring experience.
       if (table.eq(originalTable)) {
         var map = TableMap.get(table);
+        var totalRowCount = map.height;
+        var totalColumnCount = map.width;
         var colIndex = map.colCount($cell.pos - start) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;
         var selectionRect = getSelectionRect(state.selection);
         var selectedColumns = selectionRect ? getSelectedColumnIndexes(selectionRect) : [];
@@ -143,9 +151,34 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
           // isTableScalingEnabled
           undefined,
           // originalTableWidth
-          shouldUseIncreasedScalingPercent);
+          shouldUseIncreasedScalingPercent, lineLength, isTableAlignmentEnabled);
           tr = updateColumnWidths(newResizeState, table, start)(tr);
-          tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+
+          // If the table is aligned to the start and the table width is greater than the line length, we should change the alignment to center
+          var shouldChangeAlignment = shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, originalTable, lineLength, newResizeState.tableWidth);
+          if (shouldChangeAlignment) {
+            tr = tr.setNodeMarkup(start - 1, state.schema.nodes.table, _objectSpread(_objectSpread({}, table.attrs), {}, {
+              width: newResizeState.tableWidth,
+              layout: ALIGN_CENTER
+            }));
+            editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+              action: TABLE_ACTION.CHANGED_ALIGNMENT,
+              actionSubject: ACTION_SUBJECT.TABLE,
+              actionSubjectId: null,
+              attributes: {
+                tableWidth: newResizeState.tableWidth,
+                newAlignment: ALIGN_CENTER,
+                previousAlignment: ALIGN_START,
+                totalRowCount: totalRowCount,
+                totalColumnCount: totalColumnCount,
+                inputMethod: INPUT_METHOD.AUTO,
+                reason: CHANGE_ALIGNMENT_REASON.TABLE_COLUMN_RESIZED
+              },
+              eventType: EVENT_TYPE.TRACK
+            })(tr);
+          } else {
+            tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+          }
         } else {
           var _newResizeState = resizeColumn(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale, shouldUseIncreasedScalingPercent);
           tr = updateColumnWidths(_newResizeState, table, start)(tr);
@@ -216,7 +249,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
     if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
-      resizeColumnAndTable(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, undefined, shouldUseIncreasedScalingPercent);
+      resizeColumnAndTable(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, undefined, shouldUseIncreasedScalingPercent, lineLength, isTableAlignmentEnabled);
     } else {
       resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, shouldUseIncreasedScalingPercent);
     }

package/dist/esm/pm-plugins/table-resizing/plugin.js

@@ -8,7 +8,7 @@ import { handleMouseDown } from './event-handlers';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 import { getResizeCellPos } from './utils';
-export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled) {
+export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled, isTableAlignmentEnabled) {
   var _ref$lastColumnResiza = _ref.lastColumnResizable,
     lastColumnResizable = _ref$lastColumnResiza === void 0 ? true : _ref$lastColumnResiza;
   return new SafePlugin({
@@ -46,7 +46,7 @@ export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorF
             isColumnKeyboardResizeStarted = isKeyboardResize;
           }
           if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
-            if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI, isNewColumnResizingEnabled)) {
+            if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled)) {
               var _state = view.state,
                 _dispatch = view.dispatch;
               return setResizeHandlePos(resizeHandlePos)(_state, _dispatch);

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

@@ -1,6 +1,7 @@
 export var COLUMN_MIN_WIDTH = 48;
 export var TABLE_DEFAULT_WIDTH = 760;
 export var TABLE_MAX_WIDTH = 1800;
+export var FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 export var MAX_SCALING_PERCENT = 0.3;
 export var MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
 // Used to calculate the width of a table using the Editor width

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

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // Resize a given column by an amount from the current state
 
 import { TableCssClassName as ClassName } from '../../../types';
-import { ALIGN_START } from '../../../utils/alignment';
+import { ALIGN_CENTER, ALIGN_START, shouldChangeAlignmentToCenterResized } from '../../../utils/alignment';
 import { getTableContainerElementWidth, getTableScalingPercent } from './misc';
 import { growColumn, shrinkColumn, updateAffectedColumn } from './resize-logic';
 import { updateColgroup } from './resize-state';
@@ -28,6 +28,8 @@ export var resizeColumnAndTable = function resizeColumnAndTable(resizeState, col
   var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   var originalTableWidth = arguments.length > 7 ? arguments[7] : undefined;
   var shouldUseIncreasedScalingPercent = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
+  var lineLength = arguments.length > 9 ? arguments[9] : undefined;
+  var isTableAlignmentEnabled = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : false;
   // TODO: can we use document state, and apply scaling factor?
   var tableWidth = tableRef.clientWidth;
   var tableContainerWidth = (_tableRef$closest = tableRef.closest('.pm-table-container')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
@@ -58,17 +60,20 @@ export var resizeColumnAndTable = function resizeColumnAndTable(resizeState, col
   // use the difference in width from affected column to update overall table width
   var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
   if (!isOverflowed) {
-    updateTablePreview(delta, tableRef, tableNode);
+    // If the table is aligned to the start and the table width is greater than the line length, we should change the alignment to center
+    var shouldChangeAlignment = shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, tableNode, lineLength, newState.tableWidth + delta);
+    shouldChangeAlignment ? updateTablePreview(delta, tableRef, tableNode, ALIGN_CENTER) : updateTablePreview(delta, tableRef, tableNode);
   }
   return _objectSpread(_objectSpread({}, newState), {}, {
     // resizeState.tableWidth sometimes is off by ~3px on load on resized table when !isOverflowed, using resizeState.maxSize instead
     tableWidth: isOverflowed ? tableContainerWidth : resizeState.maxSize + delta
   });
 };
-var updateTablePreview = function updateTablePreview(resizeAmount, tableRef, tableNode) {
+var updateTablePreview = function updateTablePreview(resizeAmount, tableRef, tableNode, tableAligment) {
   var currentWidth = getTableContainerElementWidth(tableNode);
   var resizingContainer = tableRef === null || tableRef === void 0 ? void 0 : tableRef.closest(".".concat(ClassName.TABLE_RESIZER_CONTAINER));
   var resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
+  var alignmentContainer = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.parentElement;
   if (resizingItem) {
     var newWidth = "".concat(currentWidth + resizeAmount, "px");
     if (tableRef) {
@@ -76,5 +81,8 @@ var updateTablePreview = function updateTablePreview(resizeAmount, tableRef, tab
     }
     resizingContainer.style.width = newWidth;
     resizingItem.style.width = newWidth;
+    if (tableAligment && alignmentContainer) {
+      alignmentContainer.style.justifyContent = tableAligment;
+    }
   }
 };

package/dist/esm/toolbar.js

@@ -342,7 +342,10 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
 
       // We don't want to show floating toolbar while resizing the table
       var isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
-      if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
+
+      // Hide floating toolbar when resizing column and internal column width is on
+      var shouldHideToolbarForInternalColumnWidth = Boolean((options === null || options === void 0 ? void 0 : options.isNewColumnResizingEnabled) && resizeState && resizeState.dragging);
+      if (tableObject && pluginState.editorHasFocus && !isWidthResizing && !shouldHideToolbarForInternalColumnWidth) {
         var nodeType = state.schema.nodes.table;
         var isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
         var isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;

package/dist/esm/utils/alignment.js

@@ -1,3 +1,4 @@
+import { FULL_WIDTH_EDITOR_CONTENT_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
 export var ALIGN_START = 'align-start';
 export var ALIGN_CENTER = 'center';
 
@@ -7,4 +8,11 @@ export var ALIGN_CENTER = 'center';
  */
 export var normaliseAlignment = function normaliseAlignment(layout) {
   return layout === ALIGN_CENTER || layout === ALIGN_START ? layout : ALIGN_CENTER;
+};
+
+/**
+ * We don't want to switch alignment in Full-width editor
+ */
+export var shouldChangeAlignmentToCenterResized = function shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, tableNode, lineLength, updatedTableWidth) {
+  return isTableAlignmentEnabled && tableNode && tableNode.attrs.layout === ALIGN_START && lineLength && updatedTableWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH;
 };

package/dist/types/pm-plugins/table-resizing/event-handlers.d.ts

@@ -1,4 +1,4 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export declare const handleMouseDown: (view: EditorView, event: MouseEvent, localResizeHandlePos: number, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, isTableScalingEnabled: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, isNewColumnResizingEnabled?: boolean) => boolean;
+export declare const handleMouseDown: (view: EditorView, event: MouseEvent, localResizeHandlePos: number, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, isTableScalingEnabled: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, isNewColumnResizingEnabled?: boolean, isTableAlignmentEnabled?: boolean) => boolean;

package/dist/types/pm-plugins/table-resizing/plugin.d.ts

@@ -3,4 +3,4 @@ import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { ColumnResizingPluginState } from '../../types';
-export declare function createPlugin(dispatch: Dispatch<ColumnResizingPluginState>, { lastColumnResizable }: ColumnResizingPluginState, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, editorAnalyticsAPI?: EditorAnalyticsAPI, isTableScalingEnabled?: boolean, isNewColumnResizingEnabled?: boolean): SafePlugin<ColumnResizingPluginState>;
+export declare function createPlugin(dispatch: Dispatch<ColumnResizingPluginState>, { lastColumnResizable }: ColumnResizingPluginState, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, editorAnalyticsAPI?: EditorAnalyticsAPI, isTableScalingEnabled?: boolean, isNewColumnResizingEnabled?: boolean, isTableAlignmentEnabled?: boolean): SafePlugin<ColumnResizingPluginState>;

package/dist/types/pm-plugins/table-resizing/utils/consts.d.ts

@@ -1,6 +1,7 @@
 export declare const COLUMN_MIN_WIDTH = 48;
 export declare const TABLE_DEFAULT_WIDTH = 760;
 export declare const TABLE_MAX_WIDTH = 1800;
+export declare const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 export declare const MAX_SCALING_PERCENT = 0.3;
 export declare const MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
 export declare const TABLE_EDITOR_MARGIN = 76;

package/dist/types/pm-plugins/table-resizing/utils/resize-column.d.ts

@@ -1,4 +1,4 @@
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { ResizeState } from './types';
 export declare const resizeColumn: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement | null, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => ResizeState;
-export declare const resizeColumnAndTable: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean, originalTableWidth?: number, shouldUseIncreasedScalingPercent?: boolean) => ResizeState;
+export declare const resizeColumnAndTable: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean, originalTableWidth?: number, shouldUseIncreasedScalingPercent?: boolean, lineLength?: number, isTableAlignmentEnabled?: boolean) => ResizeState;

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

@@ -1,4 +1,5 @@
 import type { TableLayout } from '@atlaskit/adf-schema';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { AlignmentOptions } from '../types';
 export declare const ALIGN_START = "align-start";
 export declare const ALIGN_CENTER = "center";
@@ -7,3 +8,7 @@ export declare const ALIGN_CENTER = "center";
  * center if layout equals a breakout value (e.g. 'default', 'wide', 'full-width')
  */
 export declare const normaliseAlignment: (layout: TableLayout) => AlignmentOptions;
+/**
+ * We don't want to switch alignment in Full-width editor
+ */
+export declare const shouldChangeAlignmentToCenterResized: (isTableAlignmentEnabled: boolean | undefined, tableNode: PmNode, lineLength: number | undefined, updatedTableWidth: number) => boolean | 0 | undefined;

package/dist/types-ts4.5/pm-plugins/table-resizing/event-handlers.d.ts

@@ -1,4 +1,4 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export declare const handleMouseDown: (view: EditorView, event: MouseEvent, localResizeHandlePos: number, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, isTableScalingEnabled: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, isNewColumnResizingEnabled?: boolean) => boolean;
+export declare const handleMouseDown: (view: EditorView, event: MouseEvent, localResizeHandlePos: number, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, isTableScalingEnabled: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, isNewColumnResizingEnabled?: boolean, isTableAlignmentEnabled?: boolean) => boolean;

package/dist/types-ts4.5/pm-plugins/table-resizing/plugin.d.ts

@@ -3,4 +3,4 @@ import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { ColumnResizingPluginState } from '../../types';
-export declare function createPlugin(dispatch: Dispatch<ColumnResizingPluginState>, { lastColumnResizable }: ColumnResizingPluginState, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, editorAnalyticsAPI?: EditorAnalyticsAPI, isTableScalingEnabled?: boolean, isNewColumnResizingEnabled?: boolean): SafePlugin<ColumnResizingPluginState>;
+export declare function createPlugin(dispatch: Dispatch<ColumnResizingPluginState>, { lastColumnResizable }: ColumnResizingPluginState, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, editorAnalyticsAPI?: EditorAnalyticsAPI, isTableScalingEnabled?: boolean, isNewColumnResizingEnabled?: boolean, isTableAlignmentEnabled?: boolean): SafePlugin<ColumnResizingPluginState>;

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/consts.d.ts

@@ -1,6 +1,7 @@
 export declare const COLUMN_MIN_WIDTH = 48;
 export declare const TABLE_DEFAULT_WIDTH = 760;
 export declare const TABLE_MAX_WIDTH = 1800;
+export declare const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 export declare const MAX_SCALING_PERCENT = 0.3;
 export declare const MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
 export declare const TABLE_EDITOR_MARGIN = 76;

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/resize-column.d.ts

@@ -1,4 +1,4 @@
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { ResizeState } from './types';
 export declare const resizeColumn: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement | null, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => ResizeState;
-export declare const resizeColumnAndTable: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean, originalTableWidth?: number, shouldUseIncreasedScalingPercent?: boolean) => ResizeState;
+export declare const resizeColumnAndTable: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean, originalTableWidth?: number, shouldUseIncreasedScalingPercent?: boolean, lineLength?: number, isTableAlignmentEnabled?: boolean) => ResizeState;

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

@@ -1,4 +1,5 @@
 import type { TableLayout } from '@atlaskit/adf-schema';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { AlignmentOptions } from '../types';
 export declare const ALIGN_START = "align-start";
 export declare const ALIGN_CENTER = "center";
@@ -7,3 +8,7 @@ export declare const ALIGN_CENTER = "center";
  * center if layout equals a breakout value (e.g. 'default', 'wide', 'full-width')
  */
 export declare const normaliseAlignment: (layout: TableLayout) => AlignmentOptions;
+/**
+ * We don't want to switch alignment in Full-width editor
+ */
+export declare const shouldChangeAlignmentToCenterResized: (isTableAlignmentEnabled: boolean | undefined, tableNode: PmNode, lineLength: number | undefined, updatedTableWidth: number) => boolean | 0 | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.19.0",
+	"version": "7.19.1",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"

package/src/nodeviews/TableResizer.tsx

@@ -45,7 +45,12 @@ import {
 	TABLE_HIGHLIGHT_TOLERANCE,
 	TABLE_SNAP_GAP,
 } from '../ui/consts';
-import { ALIGN_CENTER, ALIGN_START, normaliseAlignment } from '../utils/alignment';
+import {
+	ALIGN_CENTER,
+	ALIGN_START,
+	normaliseAlignment,
+	shouldChangeAlignmentToCenterResized,
+} from '../utils/alignment';
 import {
 	generateResizedPayload,
 	generateResizeFrameRatePayloads,
@@ -94,8 +99,6 @@ 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: {
@@ -296,11 +299,7 @@ export const TableResizer = ({
 			dispatch: ((tr: Transaction) => void) | undefined,
 		) => {
 			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
+				shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, node, lineLength, newWidth) &&
 				isResizing.current
 			) {
 				const tableNodeWithPos = { pos, node };

package/src/plugin.tsx

@@ -303,6 +303,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							getEditorFeatureFlags,
 							isTableScalingEnabled,
 							isNewColumnResizingEnabled,
+							isTableAlignmentEnabled,
 						} = options || ({} as TablePluginOptions);
 						const { allowColumnResizing } = pluginConfig(tableOptions);
 						return allowColumnResizing
@@ -316,6 +317,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 									editorAnalyticsAPI,
 									isTableScalingEnabled || false,
 									isNewColumnResizingEnabled,
+									isTableAlignmentEnabled,
 								)
 							: undefined;
 					},

package/src/pm-plugins/table-resizing/event-handlers.ts

@@ -1,6 +1,7 @@
 import type { CellAttributes } from '@atlaskit/adf-schema';
 import {
 	ACTION_SUBJECT,
+	CHANGE_ALIGNMENT_REASON,
 	EVENT_TYPE,
 	INPUT_METHOD,
 	TABLE_ACTION,
@@ -18,6 +19,11 @@ import { stopKeyboardColumnResizing } from '../../commands/column-resize';
 import { updateResizeHandleDecorations } from '../../commands/misc';
 import { updateColumnWidths } from '../../transforms';
 import { getSelectedColumnIndexes, isTableNested } from '../../utils';
+import {
+	ALIGN_CENTER,
+	ALIGN_START,
+	shouldChangeAlignmentToCenterResized,
+} from '../../utils/alignment';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { META_KEYS } from '../table-analytics';
 
@@ -42,10 +48,12 @@ export const handleMouseDown = (
 	isTableScalingEnabled: boolean,
 	editorAnalyticsAPI?: EditorAnalyticsAPI,
 	isNewColumnResizingEnabled?: boolean,
+	isTableAlignmentEnabled?: boolean,
 ): boolean => {
 	const { state, dispatch } = view;
 	const editorDisabled = !view.editable;
 	const domAtPos = view.domAtPos.bind(view);
+	const { lineLength } = getEditorContainerWidth();
 
 	if (
 		editorDisabled ||
@@ -171,6 +179,8 @@ export const handleMouseDown = (
 			// There may be a more elegant solution to this, to avoid a jarring experience.
 			if (table.eq(originalTable)) {
 				const map = TableMap.get(table);
+				const totalRowCount = map.height;
+				const totalColumnCount = map.width;
 				const colIndex =
 					map.colCount($cell.pos - start) +
 					($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) -
@@ -202,9 +212,43 @@ export const handleMouseDown = (
 						shouldScale, // isTableScalingEnabled
 						undefined, // originalTableWidth
 						shouldUseIncreasedScalingPercent,
+						lineLength,
+						isTableAlignmentEnabled,
 					);
 					tr = updateColumnWidths(newResizeState, table, start)(tr);
-					tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+
+					// If the table is aligned to the start and the table width is greater than the line length, we should change the alignment to center
+					const shouldChangeAlignment = shouldChangeAlignmentToCenterResized(
+						isTableAlignmentEnabled,
+						originalTable,
+						lineLength,
+						newResizeState.tableWidth,
+					);
+					if (shouldChangeAlignment) {
+						tr = tr.setNodeMarkup(start - 1, state.schema.nodes.table, {
+							...table.attrs,
+							width: newResizeState.tableWidth,
+							layout: ALIGN_CENTER,
+						});
+
+						editorAnalyticsAPI?.attachAnalyticsEvent({
+							action: TABLE_ACTION.CHANGED_ALIGNMENT,
+							actionSubject: ACTION_SUBJECT.TABLE,
+							actionSubjectId: null,
+							attributes: {
+								tableWidth: newResizeState.tableWidth,
+								newAlignment: ALIGN_CENTER,
+								previousAlignment: ALIGN_START,
+								totalRowCount: totalRowCount,
+								totalColumnCount: totalColumnCount,
+								inputMethod: INPUT_METHOD.AUTO,
+								reason: CHANGE_ALIGNMENT_REASON.TABLE_COLUMN_RESIZED,
+							},
+							eventType: EVENT_TYPE.TRACK,
+						})(tr);
+					} else {
+						tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+					}
 				} else {
 					const newResizeState = resizeColumn(
 						resizeState,
@@ -304,6 +348,8 @@ export const handleMouseDown = (
 				shouldScale,
 				undefined,
 				shouldUseIncreasedScalingPercent,
+				lineLength,
+				isTableAlignmentEnabled,
 			);
 		} else {
 			resizeColumn(

package/src/pm-plugins/table-resizing/plugin.ts

@@ -23,6 +23,7 @@ export function createPlugin(
 	editorAnalyticsAPI?: EditorAnalyticsAPI,
 	isTableScalingEnabled?: boolean,
 	isNewColumnResizingEnabled?: boolean,
+	isTableAlignmentEnabled?: boolean,
 ) {
 	return new SafePlugin({
 		key: pluginKey,
@@ -74,6 +75,7 @@ export function createPlugin(
 								isTableScalingEnabled || false,
 								editorAnalyticsAPI,
 								isNewColumnResizingEnabled,
+								isTableAlignmentEnabled,
 							)
 						) {
 							const { state, dispatch } = view;

package/src/pm-plugins/table-resizing/utils/consts.ts

@@ -1,6 +1,7 @@
 export const COLUMN_MIN_WIDTH = 48;
 export const TABLE_DEFAULT_WIDTH = 760;
 export const TABLE_MAX_WIDTH = 1800;
+export const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 export const MAX_SCALING_PERCENT = 0.3;
 export const MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
 // Used to calculate the width of a table using the Editor width

package/src/pm-plugins/table-resizing/utils/resize-column.ts

@@ -1,8 +1,12 @@
 // Resize a given column by an amount from the current state
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 
-import { TableCssClassName as ClassName } from '../../../types';
-import { ALIGN_START } from '../../../utils/alignment';
+import { type AlignmentOptions, TableCssClassName as ClassName } from '../../../types';
+import {
+	ALIGN_CENTER,
+	ALIGN_START,
+	shouldChangeAlignmentToCenterResized,
+} from '../../../utils/alignment';
 
 import { getTableContainerElementWidth, getTableScalingPercent } from './misc';
 import { growColumn, shrinkColumn, updateAffectedColumn } from './resize-logic';
@@ -56,6 +60,8 @@ export const resizeColumnAndTable = (
 	isTableScalingEnabled = false,
 	originalTableWidth?: number,
 	shouldUseIncreasedScalingPercent = false,
+	lineLength?: number,
+	isTableAlignmentEnabled = false,
 ): ResizeState => {
 	// TODO: can we use document state, and apply scaling factor?
 	const tableWidth = tableRef.clientWidth;
@@ -93,7 +99,17 @@ export const resizeColumnAndTable = (
 	const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
 
 	if (!isOverflowed) {
-		updateTablePreview(delta, tableRef, tableNode);
+		// If the table is aligned to the start and the table width is greater than the line length, we should change the alignment to center
+		const shouldChangeAlignment = shouldChangeAlignmentToCenterResized(
+			isTableAlignmentEnabled,
+			tableNode,
+			lineLength,
+			newState.tableWidth + delta,
+		);
+
+		shouldChangeAlignment
+			? updateTablePreview(delta, tableRef, tableNode, ALIGN_CENTER)
+			: updateTablePreview(delta, tableRef, tableNode);
 	}
 
 	return {
@@ -107,10 +123,12 @@ const updateTablePreview = (
 	resizeAmount: number,
 	tableRef: HTMLElement | null,
 	tableNode: PmNode,
+	tableAligment?: AlignmentOptions,
 ) => {
 	const currentWidth = getTableContainerElementWidth(tableNode);
 	const resizingContainer = tableRef?.closest(`.${ClassName.TABLE_RESIZER_CONTAINER}`);
 	const resizingItem = resizingContainer?.querySelector('.resizer-item');
+	const alignmentContainer = resizingContainer?.parentElement;
 
 	if (resizingItem) {
 		const newWidth = `${currentWidth + resizeAmount}px`;
@@ -119,5 +137,9 @@ const updateTablePreview = (
 		}
 		(resizingContainer as HTMLElement).style.width = newWidth;
 		(resizingItem as HTMLElement).style.width = newWidth;
+
+		if (tableAligment && alignmentContainer) {
+			alignmentContainer.style.justifyContent = tableAligment;
+		}
 	}
 };

package/src/toolbar.tsx

@@ -468,7 +468,17 @@ export const getToolbarConfig =
 		// We don't want to show floating toolbar while resizing the table
 		const isWidthResizing = tableWidthState?.resizing;
 
-		if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
+		// Hide floating toolbar when resizing column and internal column width is on
+		const shouldHideToolbarForInternalColumnWidth = Boolean(
+			options?.isNewColumnResizingEnabled && resizeState && resizeState.dragging,
+		);
+
+		if (
+			tableObject &&
+			pluginState.editorHasFocus &&
+			!isWidthResizing &&
+			!shouldHideToolbarForInternalColumnWidth
+		) {
 			const nodeType = state.schema.nodes.table;
 			const isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
 			const isTableScalingWithFixedColumnWidthsOptionShown =

package/src/utils/alignment.ts

@@ -1,5 +1,7 @@
 import type { TableLayout } from '@atlaskit/adf-schema';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 
+import { FULL_WIDTH_EDITOR_CONTENT_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
 import type { AlignmentOptions } from '../types';
 
 export const ALIGN_START = 'align-start';
@@ -11,3 +13,19 @@ export const ALIGN_CENTER = 'center';
  */
 export const normaliseAlignment = (layout: TableLayout): AlignmentOptions =>
 	layout === ALIGN_CENTER || layout === ALIGN_START ? layout : ALIGN_CENTER;
+
+/**
+ * We don't want to switch alignment in Full-width editor
+ */
+export const shouldChangeAlignmentToCenterResized = (
+	isTableAlignmentEnabled: boolean | undefined,
+	tableNode: PmNode,
+	lineLength: number | undefined,
+	updatedTableWidth: number,
+) =>
+	isTableAlignmentEnabled &&
+	tableNode &&
+	tableNode.attrs.layout === ALIGN_START &&
+	lineLength &&
+	updatedTableWidth > lineLength &&
+	lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH;