@atlaskit/editor-plugin-table 7.19.0 → 7.19.2

package/dist/esm/nodeviews/TableComponent.js

@@ -19,6 +19,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';
@@ -157,7 +158,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
@@ -165,7 +166,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           if (!hasTableBeenResized(prevNode)) {
             _this.scaleTable({
               parentWidth: node.attrs.width
-            });
+            }, true);
           }
         }
         _this.updateParentWidth(parentWidth);
@@ -176,6 +177,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     });
     // Function gets called when table is nested.
     _defineProperty(_assertThisInitialized(_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,
@@ -202,6 +204,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) {
+        tintDirtyTransaction(tr);
+      }
       dispatch(tr);
     });
     _defineProperty(_assertThisInitialized(_this), "setTimerToSendInitialOverflowCaptured", function (isOverflowing) {

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.2",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/adf-schema": "^38.0.0",
 		"@atlaskit/button": "^18.0.0",
 		"@atlaskit/custom-steps": "^0.4.0",
-		"@atlaskit/editor-common": "^83.3.0",
+		"@atlaskit/editor-common": "^83.4.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
 		"@atlaskit/editor-plugin-analytics": "^1.4.0",

package/src/nodeviews/TableComponent.tsx

@@ -10,6 +10,7 @@ import { injectIntl } from 'react-intl-next';
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
@@ -966,17 +967,23 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
 			// If column has been inserted/deleted avoid multi dispatch
 			if (shouldScaleTable) {
-				this.scaleTable({
-					parentWidth,
-				});
+				this.scaleTable(
+					{
+						parentWidth,
+					},
+					hasNumberedColumnChanged,
+				);
 			}
 
 			// only when table resizing is enabled and toggle numbered column to run scaleTable
 			if (options?.isTableResizingEnabled && hasNumberedColumnChanged) {
 				if (!hasTableBeenResized(prevNode)) {
-					this.scaleTable({
-						parentWidth: node.attrs.width,
-					});
+					this.scaleTable(
+						{
+							parentWidth: node.attrs.width,
+						},
+						true,
+					);
 				}
 			}
 
@@ -989,7 +996,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 	};
 
 	// Function gets called when table is nested.
-	private scaleTable = (scaleOptions: { parentWidth?: number }) => {
+	private scaleTable = (scaleOptions: { parentWidth?: number }, isUserTriggered = false) => {
 		const { view, getNode, getPos, containerWidth, options } = this.props;
 		const node = getNode();
 		const { state, dispatch } = view;
@@ -1019,6 +1026,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			false, // shouldUseIncreasedScalingPercent set to false for nested tables
 		)(state.tr);
 
+		if (!isUserTriggered) {
+			tintDirtyTransaction(tr);
+		}
+
 		dispatch(tr);
 	};
 

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