@atlaskit/editor-plugin-table 7.19.0 → 7.19.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-table
 
+## 7.19.2
+
+### Patch Changes
+
+- [#115086](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115086)
+  [`e22c1261d6b17`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e22c1261d6b17) -
+  Add a tint to table transactions that are not created by users to avoid issues for view only live
+  pages
+- Updated dependencies
+
+## 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/TableComponent.js

@@ -19,6 +19,7 @@ var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _collab = require("@atlaskit/editor-common/collab");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -164,7 +165,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         if (shouldScaleTable) {
           _this.scaleTable({
             parentWidth: parentWidth
-          });
+          }, hasNumberedColumnChanged);
         }
 
         // only when table resizing is enabled and toggle numbered column to run scaleTable
@@ -172,7 +173,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           if (!(0, _colgroup.hasTableBeenResized)(prevNode)) {
             _this.scaleTable({
               parentWidth: node.attrs.width
-            });
+            }, true);
           }
         }
         _this.updateParentWidth(parentWidth);
@@ -183,6 +184,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     });
     // Function gets called when table is nested.
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "scaleTable", function (scaleOptions) {
+      var isUserTriggered = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var _this$props2 = _this.props,
         view = _this$props2.view,
         getNode = _this$props2.getNode,
@@ -209,6 +211,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       // isTableScalingEnabled doesn't change the behavior of nested tables
       false // shouldUseIncreasedScalingPercent set to false for nested tables
       )(state.tr);
+      if (!isUserTriggered) {
+        (0, _collab.tintDirtyTransaction)(tr);
+      }
       dispatch(tr);
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "setTimerToSendInitialOverflowCaptured", function (isOverflowing) {

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/TableComponent.js

@@ -5,6 +5,7 @@ import memoizeOne from 'memoize-one';
 import rafSchedule from 'raf-schd';
 import { injectIntl } from 'react-intl-next';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
@@ -148,7 +149,7 @@ class TableComponent extends React.Component {
         if (shouldScaleTable) {
           this.scaleTable({
             parentWidth
-          });
+          }, hasNumberedColumnChanged);
         }
 
         // only when table resizing is enabled and toggle numbered column to run scaleTable
@@ -156,7 +157,7 @@ class TableComponent extends React.Component {
           if (!hasTableBeenResized(prevNode)) {
             this.scaleTable({
               parentWidth: node.attrs.width
-            });
+            }, true);
           }
         }
         this.updateParentWidth(parentWidth);
@@ -166,7 +167,7 @@ class TableComponent extends React.Component {
       this.layoutSize = layoutSize;
     });
     // Function gets called when table is nested.
-    _defineProperty(this, "scaleTable", scaleOptions => {
+    _defineProperty(this, "scaleTable", (scaleOptions, isUserTriggered = false) => {
       const {
         view,
         getNode,
@@ -200,6 +201,9 @@ class TableComponent extends React.Component {
       // isTableScalingEnabled doesn't change the behavior of nested tables
       false // shouldUseIncreasedScalingPercent set to false for nested tables
       )(state.tr);
+      if (!isUserTriggered) {
+        tintDirtyTransaction(tr);
+      }
       dispatch(tr);
     });
     _defineProperty(this, "setTimerToSendInitialOverflowCaptured", isOverflowing => {

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;