@atlaskit/editor-plugin-table 7.25.19 → 7.25.21

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-table
 
+## 7.25.21
+
+### Patch Changes
+
+- [#137821](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137821)
+  [`4d2173e85f8a6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4d2173e85f8a6) -
+  [ux] Fix full-width detection in Comment editor
+- [#137928](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137928)
+  [`8b30e4c176e08`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8b30e4c176e08) -
+  ED-24841: Fixed number column table shows a scroll in comment editor
+- [#138118](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138118)
+  [`5e4d9eb1aefe4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5e4d9eb1aefe4) -
+  NOISSUE: Upgrades editor React peer dependencies to v18
+- Updated dependencies
+
+## 7.25.20
+
+### Patch Changes
+
+- [#137344](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137344)
+  [`00c81bdf34c46`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/00c81bdf34c46) -
+  [ux] Fixes an issue where tables that existed before "Support Table in Comment" are displayed as
+  centered 760px width tables when FF for Support Table in Comment is enabled.
+
 ## 7.25.19
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -551,7 +551,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7;
           var resizeState = (0, _utils4.getResizeState)({
             minWidth: _utils4.COLUMN_MIN_WIDTH,
-            maxSize: tableRenderWidth,
+            // When numbered column enabled, we need to subtract the width of the numbered column
+            maxSize: tableNode.attrs.isNumberColumnEnabled ? tableRenderWidth - _editorSharedStyles.akEditorTableNumberColumnWidth : tableRenderWidth,
             table: tableNode,
             tableRef: this.table,
             start: start,

package/dist/cjs/nodeviews/TableResizer.js

@@ -260,15 +260,9 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     if (typeof pos !== 'number') {
       return;
     }
-    (0, _utils2.previewScaleTable)(tableRef, {
-      node: node,
-      prevNode: node,
-      start: pos + 1,
-      parentWidth: newWidth
-    }, editorView.domAtPos.bind(editorView), isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isCommentEditor);
     var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() : containerWidth;
-    var closestSnap = (0, _snapping.findClosestSnap)(newWidth, isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(_snapping.PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : _snapping.defaultSnappingWidths, isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE);
-    updateActiveGuidelines(closestSnap);
+    var closestSnap = !isCommentEditor && (0, _snapping.findClosestSnap)(newWidth, isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(_snapping.PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : _snapping.defaultSnappingWidths, isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE);
+    closestSnap && updateActiveGuidelines(closestSnap);
 
     // When snapping to the full width guideline, resize the table to be 1800px
     var state = editorView.state,
@@ -277,9 +271,16 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     var fullWidthGuideline = (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig).filter(function (guideline) {
       return guideline.isFullWidth;
     })[0];
-    var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
-    var tableMaxWidth = isCommentEditor ? containerWidth - _utils2.TABLE_OFFSET_IN_COMMENT_EDITOR : _utils2.TABLE_MAX_WIDTH;
-    var shouldUpdateWidthToWidest = isCommentEditor && tableMaxWidth === newWidth || !!isTableScalingEnabled && isFullWidthGuidelineActive;
+    var isFullWidthGuidelineActive = closestSnap && closestSnap.keys.includes(fullWidthGuideline.key);
+    var tableMaxWidth = isCommentEditor ? Math.floor(containerWidth - _utils2.TABLE_OFFSET_IN_COMMENT_EDITOR) : _utils2.TABLE_MAX_WIDTH;
+    var shouldUpdateWidthToWidest = isCommentEditor ? tableMaxWidth <= newWidth : !!isTableScalingEnabled && isFullWidthGuidelineActive;
+    var previewParentWidth = isCommentEditor && shouldUpdateWidthToWidest ? tableMaxWidth : newWidth;
+    (0, _utils2.previewScaleTable)(tableRef, {
+      node: node,
+      prevNode: node,
+      start: pos + 1,
+      parentWidth: previewParentWidth
+    }, editorView.domAtPos.bind(editorView), isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isCommentEditor);
     (0, _commands.chainCommands)(function (state, dispatch) {
       return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
     }, (0, _misc.updateWidthToWidest)((0, _defineProperty2.default)({}, currentTableNodeLocalId, shouldUpdateWidthToWidest)))(state, dispatch);

package/dist/cjs/plugin.js

@@ -36,6 +36,7 @@ var _tableLocalId = require("./pm-plugins/table-local-id");
 var _tableResizing = require("./pm-plugins/table-resizing");
 var _tableSelectionKeymap = require("./pm-plugins/table-selection-keymap");
 var _tableWidth = require("./pm-plugins/table-width");
+var _tableWidthInCommentFix = require("./pm-plugins/table-width-in-comment-fix");
 var _viewModeSort = require("./pm-plugins/view-mode-sort");
 var _toDOM = require("./toDOM");
 var _toolbar = require("./toolbar");
@@ -290,21 +291,28 @@ var tablesPlugin = function tablesPlugin(_ref) {
             dispatch = _ref14.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$isTableScali = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$isTableAlign = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign !== void 0 ? _options$isTableAlign : false, (_options$isCommentEdi = options === null || options === void 0 ? void 0 : options.isCommentEditor) !== null && _options$isCommentEdi !== void 0 ? _options$isCommentEdi : false) : undefined;
         }
+      }, {
+        name: 'tableWidthInCommentFix',
+        plugin: function plugin(_ref15) {
+          var _options$isTableAlign2;
+          var dispatch = _ref15.dispatch;
+          return options !== null && options !== void 0 && options.tableResizingEnabled && options !== null && options !== void 0 && options.isCommentEditor ? (0, _tableWidthInCommentFix.createPlugin)(dispatch, (_options$isTableAlign2 = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign2 !== void 0 ? _options$isTableAlign2 : false) : undefined;
+        }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
       {
         name: 'tableOverflowAnalyticsPlugin',
-        plugin: function plugin(_ref15) {
+        plugin: function plugin(_ref16) {
           var _options$tableResizin;
-          var dispatch = _ref15.dispatch,
-            dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent;
+          var dispatch = _ref16.dispatch,
+            dispatchAnalyticsEvent = _ref16.dispatchAnalyticsEvent;
           return (0, _tableAnalytics.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false);
         }
       }, {
         name: 'tableAnalyticsPlugin',
-        plugin: function plugin(_ref16) {
-          var dispatch = _ref16.dispatch,
-            dispatchAnalyticsEvent = _ref16.dispatchAnalyticsEvent;
+        plugin: function plugin(_ref17) {
+          var dispatch = _ref17.dispatch,
+            dispatchAnalyticsEvent = _ref17.dispatchAnalyticsEvent;
           return (0, _plugin.createPlugin)(dispatch, dispatchAnalyticsEvent);
         }
       }, {
@@ -335,13 +343,13 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref17) {
+    contentComponent: function contentComponent(_ref18) {
       var _api$featureFlags;
-      var editorView = _ref17.editorView,
-        popupsMountPoint = _ref17.popupsMountPoint,
-        popupsBoundariesElement = _ref17.popupsBoundariesElement,
-        popupsScrollableElement = _ref17.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref17.dispatchAnalyticsEvent;
+      var editorView = _ref18.editorView,
+        popupsMountPoint = _ref18.popupsMountPoint,
+        popupsBoundariesElement = _ref18.popupsBoundariesElement,
+        popupsScrollableElement = _ref18.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref18.dispatchAnalyticsEvent;
       return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -357,32 +365,32 @@ var tablesPlugin = function tablesPlugin(_ref) {
           stickyHeadersState: _stickyHeaders.pluginKey,
           dragAndDropState: _dragAndDrop.pluginKey
         },
-        render: function render(_ref18) {
-          var resizingPluginState = _ref18.tableResizingPluginState,
-            stickyHeadersState = _ref18.stickyHeadersState,
-            tablePluginState = _ref18.tablePluginState,
-            tableWidthPluginState = _ref18.tableWidthPluginState,
-            dragAndDropState = _ref18.dragAndDropState;
+        render: function render(_ref19) {
+          var resizingPluginState = _ref19.tableResizingPluginState,
+            stickyHeadersState = _ref19.stickyHeadersState,
+            tablePluginState = _ref19.tablePluginState,
+            tableWidthPluginState = _ref19.tableWidthPluginState,
+            dragAndDropState = _ref19.dragAndDropState;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;
           var resizingTableRef = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableRef;
           var isResizing = isColumnResizing || isTableResizing;
           var widthToWidest = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.widthToWidest;
-          var _ref19 = tablePluginState,
-            tableNode = _ref19.tableNode,
-            tablePos = _ref19.tablePos,
-            targetCellPosition = _ref19.targetCellPosition,
-            isContextualMenuOpen = _ref19.isContextualMenuOpen,
-            tableRef = _ref19.tableRef,
-            pluginConfig = _ref19.pluginConfig,
-            insertColumnButtonIndex = _ref19.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref19.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref19.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref19.isHeaderRowEnabled,
-            isDragAndDropEnabled = _ref19.isDragAndDropEnabled,
-            tableWrapperTarget = _ref19.tableWrapperTarget,
-            isCellMenuOpenByKeyboard = _ref19.isCellMenuOpenByKeyboard;
+          var _ref20 = tablePluginState,
+            tableNode = _ref20.tableNode,
+            tablePos = _ref20.tablePos,
+            targetCellPosition = _ref20.targetCellPosition,
+            isContextualMenuOpen = _ref20.isContextualMenuOpen,
+            tableRef = _ref20.tableRef,
+            pluginConfig = _ref20.pluginConfig,
+            insertColumnButtonIndex = _ref20.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref20.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref20.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref20.isHeaderRowEnabled,
+            isDragAndDropEnabled = _ref20.isDragAndDropEnabled,
+            tableWrapperTarget = _ref20.tableWrapperTarget,
+            isCellMenuOpenByKeyboard = _ref20.isCellMenuOpenByKeyboard;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
           return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard && (0, _platformFeatureFlags.fg)('platform_editor_a11y_table_context_menu')) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
@@ -475,8 +483,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref20) {
-        var formatMessage = _ref20.formatMessage;
+      quickInsert: function quickInsert(_ref21) {
+        var formatMessage = _ref21.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(_messages.toolbarInsertBlockMessages.table),

package/dist/cjs/pm-plugins/table-width-in-comment-fix.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = exports.createPlugin = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _alignment = require("../utils/alignment");
+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; } /*
+	Existing legacy tables in Comment editor have set attributes:
+	- width = 760
+	- layout = 'default'.
+
+	When "Support Table in Comment" FF is enabled, table resizing (and table alignment in Confluence comments) is turned.
+	It results in (ED-24795) all exising tables being set 760px width. Instead they all should inherit width from
+	the editor container until a user decided to edit their old comment and set a custom table width themselves.
+
+	This plugin exists to fix the described issue. It ensures that once "Support Table in Comment" FF turned on,
+	existing tables continue to inherit the width of editor container and are 'left-aligned' by default.
+*/
+var pluginKey = exports.pluginKey = new _state.PluginKey('tableWidthInCommentFixPlugin');
+var getPluginState = function getPluginState(state) {
+  return state && pluginKey.getState(state);
+};
+var createPlugin = exports.createPlugin = function createPlugin(dispatch, isTableAlignmentEnabled) {
+  return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init() {
+        return {
+          documentHasLoadedOnce: false
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(pluginKey);
+        if (meta) {
+          var keys = Object.keys(meta);
+          var changed = keys.some(function (key) {
+            return pluginState[key] !== meta[key];
+          });
+          if (changed) {
+            var newState = _objectSpread(_objectSpread({}, pluginState), meta);
+            dispatch(pluginKey, newState);
+            return newState;
+          }
+        }
+        return pluginState;
+      }
+    },
+    view: function view() {
+      return {
+        update: function update(editorView) {
+          var state = editorView.state;
+          var pluginState = getPluginState(state);
+          if (!pluginState) {
+            return;
+          }
+          var documentHasLoadedOnce = pluginState.documentHasLoadedOnce;
+          if (documentHasLoadedOnce) {
+            return;
+          }
+          var table = state.schema.nodes.table;
+          (0, _rafSchd.default)(function () {
+            var tr = editorView.state.tr;
+            var tableWidthAndLayoutUpdated = false;
+            editorView.state.doc.descendants(function (node, pos) {
+              var isTable = node.type === table;
+              var width = node.attrs.width;
+              var layout = node.attrs.layout;
+              if (isTable && width === _editorSharedStyles.akEditorDefaultLayoutWidth && layout === 'default') {
+                tableWidthAndLayoutUpdated = true;
+                tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+                  width: null,
+                  layout: isTableAlignmentEnabled ? _alignment.ALIGN_START : 'default'
+                }));
+                return false;
+              }
+              // Returning false here because don't need to change nested tables
+              return false;
+            });
+            if (tableWidthAndLayoutUpdated) {
+              tr.setMeta('addToHistory', false);
+              editorView.dispatch(tr);
+            }
+          })();
+          editorView.dispatch(state.tr.setMeta(pluginKey, {
+            documentHasLoadedOnce: true
+          }));
+        }
+      };
+    }
+  });
+};

package/dist/es2019/nodeviews/TableComponent.js

@@ -9,7 +9,7 @@ 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';
-import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
+import { akEditorTableNumberColumnWidth, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
@@ -532,7 +532,8 @@ class TableComponent extends React.Component {
         var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7;
         const resizeState = getResizeState({
           minWidth: COLUMN_MIN_WIDTH,
-          maxSize: tableRenderWidth,
+          // When numbered column enabled, we need to subtract the width of the numbered column
+          maxSize: tableNode.attrs.isNumberColumnEnabled ? tableRenderWidth - akEditorTableNumberColumnWidth : tableRenderWidth,
           table: tableNode,
           tableRef: this.table,
           start,

package/dist/es2019/nodeviews/TableResizer.js

@@ -253,15 +253,9 @@ export const TableResizer = ({
     if (typeof pos !== 'number') {
       return;
     }
-    previewScaleTable(tableRef, {
-      node,
-      prevNode: node,
-      start: pos + 1,
-      parentWidth: newWidth
-    }, editorView.domAtPos.bind(editorView), isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isCommentEditor);
     const editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth;
-    const closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
-    updateActiveGuidelines(closestSnap);
+    const closestSnap = !isCommentEditor && findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
+    closestSnap && updateActiveGuidelines(closestSnap);
 
     // When snapping to the full width guideline, resize the table to be 1800px
     const {
@@ -270,9 +264,16 @@ export const TableResizer = ({
     } = editorView;
     const currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
     const fullWidthGuideline = defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig).filter(guideline => guideline.isFullWidth)[0];
-    const isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
-    const tableMaxWidth = isCommentEditor ? containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR : TABLE_MAX_WIDTH;
-    const shouldUpdateWidthToWidest = isCommentEditor && tableMaxWidth === newWidth || !!isTableScalingEnabled && isFullWidthGuidelineActive;
+    const isFullWidthGuidelineActive = closestSnap && closestSnap.keys.includes(fullWidthGuideline.key);
+    const tableMaxWidth = isCommentEditor ? Math.floor(containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR) : TABLE_MAX_WIDTH;
+    const shouldUpdateWidthToWidest = isCommentEditor ? tableMaxWidth <= newWidth : !!isTableScalingEnabled && isFullWidthGuidelineActive;
+    const previewParentWidth = isCommentEditor && shouldUpdateWidthToWidest ? tableMaxWidth : newWidth;
+    previewScaleTable(tableRef, {
+      node,
+      prevNode: node,
+      start: pos + 1,
+      parentWidth: previewParentWidth
+    }, editorView.domAtPos.bind(editorView), isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isCommentEditor);
     chainCommands((state, dispatch) => {
       return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
     }, updateWidthToWidest({

package/dist/es2019/plugin.js

@@ -28,6 +28,7 @@ import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-loc
 import { createPlugin as createFlexiResizingPlugin, getPluginState as getFlexiResizingPlugin, pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
 import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
+import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins/table-width-in-comment-fix';
 import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
 import { tableNodeSpecWithFixedToDOM } from './toDOM';
 import { getToolbarConfig } from './toolbar';
@@ -278,6 +279,14 @@ const tablesPlugin = ({
           var _options$fullWidthEna, _options$isTableScali, _options$isTableAlign, _options$isCommentEdi;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$isTableScali = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$isTableAlign = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign !== void 0 ? _options$isTableAlign : false, (_options$isCommentEdi = options === null || options === void 0 ? void 0 : options.isCommentEditor) !== null && _options$isCommentEdi !== void 0 ? _options$isCommentEdi : false) : undefined;
         }
+      }, {
+        name: 'tableWidthInCommentFix',
+        plugin: ({
+          dispatch
+        }) => {
+          var _options$isTableAlign2;
+          return options !== null && options !== void 0 && options.tableResizingEnabled && options !== null && options !== void 0 && options.isCommentEditor ? createTableWidthInCommentFixPlugin(dispatch, (_options$isTableAlign2 = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign2 !== void 0 ? _options$isTableAlign2 : false) : undefined;
+        }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
       {

package/dist/es2019/pm-plugins/table-width-in-comment-fix.js

@@ -0,0 +1,100 @@
+/*
+	Existing legacy tables in Comment editor have set attributes:
+	- width = 760
+	- layout = 'default'.
+
+	When "Support Table in Comment" FF is enabled, table resizing (and table alignment in Confluence comments) is turned.
+	It results in (ED-24795) all exising tables being set 760px width. Instead they all should inherit width from
+	the editor container until a user decided to edit their old comment and set a custom table width themselves.
+
+	This plugin exists to fix the described issue. It ensures that once "Support Table in Comment" FF turned on,
+	existing tables continue to inherit the width of editor container and are 'left-aligned' by default.
+*/
+
+import rafSchedule from 'raf-schd';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { ALIGN_START } from '../utils/alignment';
+export const pluginKey = new PluginKey('tableWidthInCommentFixPlugin');
+const getPluginState = state => state && pluginKey.getState(state);
+const createPlugin = (dispatch, isTableAlignmentEnabled) => {
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init() {
+        return {
+          documentHasLoadedOnce: false
+        };
+      },
+      apply(tr, pluginState) {
+        const meta = tr.getMeta(pluginKey);
+        if (meta) {
+          const keys = Object.keys(meta);
+          const changed = keys.some(key => {
+            return pluginState[key] !== meta[key];
+          });
+          if (changed) {
+            const newState = {
+              ...pluginState,
+              ...meta
+            };
+            dispatch(pluginKey, newState);
+            return newState;
+          }
+        }
+        return pluginState;
+      }
+    },
+    view: () => {
+      return {
+        update(editorView) {
+          const {
+            state
+          } = editorView;
+          const pluginState = getPluginState(state);
+          if (!pluginState) {
+            return;
+          }
+          const {
+            documentHasLoadedOnce
+          } = pluginState;
+          if (documentHasLoadedOnce) {
+            return;
+          }
+          const {
+            table
+          } = state.schema.nodes;
+          rafSchedule(() => {
+            const tr = editorView.state.tr;
+            let tableWidthAndLayoutUpdated = false;
+            editorView.state.doc.descendants((node, pos) => {
+              const isTable = node.type === table;
+              const width = node.attrs.width;
+              const layout = node.attrs.layout;
+              if (isTable && width === akEditorDefaultLayoutWidth && layout === 'default') {
+                tableWidthAndLayoutUpdated = true;
+                tr.setNodeMarkup(pos, undefined, {
+                  ...node.attrs,
+                  width: null,
+                  layout: isTableAlignmentEnabled ? ALIGN_START : 'default'
+                });
+                return false;
+              }
+              // Returning false here because don't need to change nested tables
+              return false;
+            });
+            if (tableWidthAndLayoutUpdated) {
+              tr.setMeta('addToHistory', false);
+              editorView.dispatch(tr);
+            }
+          })();
+          editorView.dispatch(state.tr.setMeta(pluginKey, {
+            documentHasLoadedOnce: true
+          }));
+        }
+      };
+    }
+  });
+};
+export { createPlugin };

package/dist/esm/nodeviews/TableComponent.js

@@ -23,7 +23,7 @@ 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';
-import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
+import { akEditorTableNumberColumnWidth, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
@@ -544,7 +544,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7;
           var resizeState = getResizeState({
             minWidth: COLUMN_MIN_WIDTH,
-            maxSize: tableRenderWidth,
+            // When numbered column enabled, we need to subtract the width of the numbered column
+            maxSize: tableNode.attrs.isNumberColumnEnabled ? tableRenderWidth - akEditorTableNumberColumnWidth : tableRenderWidth,
             table: tableNode,
             tableRef: this.table,
             start: start,

package/dist/esm/nodeviews/TableResizer.js

@@ -250,15 +250,9 @@ export var TableResizer = function TableResizer(_ref) {
     if (typeof pos !== 'number') {
       return;
     }
-    previewScaleTable(tableRef, {
-      node: node,
-      prevNode: node,
-      start: pos + 1,
-      parentWidth: newWidth
-    }, editorView.domAtPos.bind(editorView), isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isCommentEditor);
     var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth;
-    var closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
-    updateActiveGuidelines(closestSnap);
+    var closestSnap = !isCommentEditor && findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
+    closestSnap && updateActiveGuidelines(closestSnap);
 
     // When snapping to the full width guideline, resize the table to be 1800px
     var state = editorView.state,
@@ -267,9 +261,16 @@ export var TableResizer = function TableResizer(_ref) {
     var fullWidthGuideline = defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig).filter(function (guideline) {
       return guideline.isFullWidth;
     })[0];
-    var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
-    var tableMaxWidth = isCommentEditor ? containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR : TABLE_MAX_WIDTH;
-    var shouldUpdateWidthToWidest = isCommentEditor && tableMaxWidth === newWidth || !!isTableScalingEnabled && isFullWidthGuidelineActive;
+    var isFullWidthGuidelineActive = closestSnap && closestSnap.keys.includes(fullWidthGuideline.key);
+    var tableMaxWidth = isCommentEditor ? Math.floor(containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR) : TABLE_MAX_WIDTH;
+    var shouldUpdateWidthToWidest = isCommentEditor ? tableMaxWidth <= newWidth : !!isTableScalingEnabled && isFullWidthGuidelineActive;
+    var previewParentWidth = isCommentEditor && shouldUpdateWidthToWidest ? tableMaxWidth : newWidth;
+    previewScaleTable(tableRef, {
+      node: node,
+      prevNode: node,
+      start: pos + 1,
+      parentWidth: previewParentWidth
+    }, editorView.domAtPos.bind(editorView), isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isCommentEditor);
     chainCommands(function (state, dispatch) {
       return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
     }, updateWidthToWidest(_defineProperty({}, currentTableNodeLocalId, shouldUpdateWidthToWidest)))(state, dispatch);

package/dist/esm/plugin.js

@@ -31,6 +31,7 @@ import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-loc
 import { createPlugin as createFlexiResizingPlugin, getPluginState as getFlexiResizingPlugin, pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
 import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
+import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins/table-width-in-comment-fix';
 import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
 import { tableNodeSpecWithFixedToDOM } from './toDOM';
 import { getToolbarConfig } from './toolbar';
@@ -283,21 +284,28 @@ var tablesPlugin = function tablesPlugin(_ref) {
             dispatch = _ref14.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$isTableScali = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$isTableAlign = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign !== void 0 ? _options$isTableAlign : false, (_options$isCommentEdi = options === null || options === void 0 ? void 0 : options.isCommentEditor) !== null && _options$isCommentEdi !== void 0 ? _options$isCommentEdi : false) : undefined;
         }
+      }, {
+        name: 'tableWidthInCommentFix',
+        plugin: function plugin(_ref15) {
+          var _options$isTableAlign2;
+          var dispatch = _ref15.dispatch;
+          return options !== null && options !== void 0 && options.tableResizingEnabled && options !== null && options !== void 0 && options.isCommentEditor ? createTableWidthInCommentFixPlugin(dispatch, (_options$isTableAlign2 = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign2 !== void 0 ? _options$isTableAlign2 : false) : undefined;
+        }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
       {
         name: 'tableOverflowAnalyticsPlugin',
-        plugin: function plugin(_ref15) {
+        plugin: function plugin(_ref16) {
           var _options$tableResizin;
-          var dispatch = _ref15.dispatch,
-            dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent;
+          var dispatch = _ref16.dispatch,
+            dispatchAnalyticsEvent = _ref16.dispatchAnalyticsEvent;
           return createTableOverflowAnalyticsPlugin(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false);
         }
       }, {
         name: 'tableAnalyticsPlugin',
-        plugin: function plugin(_ref16) {
-          var dispatch = _ref16.dispatch,
-            dispatchAnalyticsEvent = _ref16.dispatchAnalyticsEvent;
+        plugin: function plugin(_ref17) {
+          var dispatch = _ref17.dispatch,
+            dispatchAnalyticsEvent = _ref17.dispatchAnalyticsEvent;
           return createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent);
         }
       }, {
@@ -328,13 +336,13 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref17) {
+    contentComponent: function contentComponent(_ref18) {
       var _api$featureFlags;
-      var editorView = _ref17.editorView,
-        popupsMountPoint = _ref17.popupsMountPoint,
-        popupsBoundariesElement = _ref17.popupsBoundariesElement,
-        popupsScrollableElement = _ref17.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref17.dispatchAnalyticsEvent;
+      var editorView = _ref18.editorView,
+        popupsMountPoint = _ref18.popupsMountPoint,
+        popupsBoundariesElement = _ref18.popupsBoundariesElement,
+        popupsScrollableElement = _ref18.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref18.dispatchAnalyticsEvent;
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -350,32 +358,32 @@ var tablesPlugin = function tablesPlugin(_ref) {
           stickyHeadersState: stickyHeadersPluginKey,
           dragAndDropState: dragAndDropPluginKey
         },
-        render: function render(_ref18) {
-          var resizingPluginState = _ref18.tableResizingPluginState,
-            stickyHeadersState = _ref18.stickyHeadersState,
-            tablePluginState = _ref18.tablePluginState,
-            tableWidthPluginState = _ref18.tableWidthPluginState,
-            dragAndDropState = _ref18.dragAndDropState;
+        render: function render(_ref19) {
+          var resizingPluginState = _ref19.tableResizingPluginState,
+            stickyHeadersState = _ref19.stickyHeadersState,
+            tablePluginState = _ref19.tablePluginState,
+            tableWidthPluginState = _ref19.tableWidthPluginState,
+            dragAndDropState = _ref19.dragAndDropState;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;
           var resizingTableRef = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableRef;
           var isResizing = isColumnResizing || isTableResizing;
           var widthToWidest = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.widthToWidest;
-          var _ref19 = tablePluginState,
-            tableNode = _ref19.tableNode,
-            tablePos = _ref19.tablePos,
-            targetCellPosition = _ref19.targetCellPosition,
-            isContextualMenuOpen = _ref19.isContextualMenuOpen,
-            tableRef = _ref19.tableRef,
-            pluginConfig = _ref19.pluginConfig,
-            insertColumnButtonIndex = _ref19.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref19.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref19.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref19.isHeaderRowEnabled,
-            isDragAndDropEnabled = _ref19.isDragAndDropEnabled,
-            tableWrapperTarget = _ref19.tableWrapperTarget,
-            isCellMenuOpenByKeyboard = _ref19.isCellMenuOpenByKeyboard;
+          var _ref20 = tablePluginState,
+            tableNode = _ref20.tableNode,
+            tablePos = _ref20.tablePos,
+            targetCellPosition = _ref20.targetCellPosition,
+            isContextualMenuOpen = _ref20.isContextualMenuOpen,
+            tableRef = _ref20.tableRef,
+            pluginConfig = _ref20.pluginConfig,
+            insertColumnButtonIndex = _ref20.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref20.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref20.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref20.isHeaderRowEnabled,
+            isDragAndDropEnabled = _ref20.isDragAndDropEnabled,
+            tableWrapperTarget = _ref20.tableWrapperTarget,
+            isCellMenuOpenByKeyboard = _ref20.isCellMenuOpenByKeyboard;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard && fg('platform_editor_a11y_table_context_menu')) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
@@ -468,8 +476,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref20) {
-        var formatMessage = _ref20.formatMessage;
+      quickInsert: function quickInsert(_ref21) {
+        var formatMessage = _ref21.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(messages.table),

package/dist/esm/pm-plugins/table-width-in-comment-fix.js

@@ -0,0 +1,95 @@
+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; }
+/*
+	Existing legacy tables in Comment editor have set attributes:
+	- width = 760
+	- layout = 'default'.
+
+	When "Support Table in Comment" FF is enabled, table resizing (and table alignment in Confluence comments) is turned.
+	It results in (ED-24795) all exising tables being set 760px width. Instead they all should inherit width from
+	the editor container until a user decided to edit their old comment and set a custom table width themselves.
+
+	This plugin exists to fix the described issue. It ensures that once "Support Table in Comment" FF turned on,
+	existing tables continue to inherit the width of editor container and are 'left-aligned' by default.
+*/
+
+import rafSchedule from 'raf-schd';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { ALIGN_START } from '../utils/alignment';
+export var pluginKey = new PluginKey('tableWidthInCommentFixPlugin');
+var getPluginState = function getPluginState(state) {
+  return state && pluginKey.getState(state);
+};
+var createPlugin = function createPlugin(dispatch, isTableAlignmentEnabled) {
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init() {
+        return {
+          documentHasLoadedOnce: false
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(pluginKey);
+        if (meta) {
+          var keys = Object.keys(meta);
+          var changed = keys.some(function (key) {
+            return pluginState[key] !== meta[key];
+          });
+          if (changed) {
+            var newState = _objectSpread(_objectSpread({}, pluginState), meta);
+            dispatch(pluginKey, newState);
+            return newState;
+          }
+        }
+        return pluginState;
+      }
+    },
+    view: function view() {
+      return {
+        update: function update(editorView) {
+          var state = editorView.state;
+          var pluginState = getPluginState(state);
+          if (!pluginState) {
+            return;
+          }
+          var documentHasLoadedOnce = pluginState.documentHasLoadedOnce;
+          if (documentHasLoadedOnce) {
+            return;
+          }
+          var table = state.schema.nodes.table;
+          rafSchedule(function () {
+            var tr = editorView.state.tr;
+            var tableWidthAndLayoutUpdated = false;
+            editorView.state.doc.descendants(function (node, pos) {
+              var isTable = node.type === table;
+              var width = node.attrs.width;
+              var layout = node.attrs.layout;
+              if (isTable && width === akEditorDefaultLayoutWidth && layout === 'default') {
+                tableWidthAndLayoutUpdated = true;
+                tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+                  width: null,
+                  layout: isTableAlignmentEnabled ? ALIGN_START : 'default'
+                }));
+                return false;
+              }
+              // Returning false here because don't need to change nested tables
+              return false;
+            });
+            if (tableWidthAndLayoutUpdated) {
+              tr.setMeta('addToHistory', false);
+              editorView.dispatch(tr);
+            }
+          })();
+          editorView.dispatch(state.tr.setMeta(pluginKey, {
+            documentHasLoadedOnce: true
+          }));
+        }
+      };
+    }
+  });
+};
+export { createPlugin };

package/dist/types/pm-plugins/table-width-in-comment-fix.d.ts

@@ -0,0 +1,11 @@
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+type TableWidthInCommentFixPluginState = {
+    documentHasLoadedOnce: boolean;
+};
+export declare const pluginKey: PluginKey<TableWidthInCommentFixPluginState>;
+declare const createPlugin: (dispatch: Dispatch, isTableAlignmentEnabled: boolean) => SafePlugin<{
+    documentHasLoadedOnce: boolean;
+}>;
+export { createPlugin };

package/dist/types-ts4.5/pm-plugins/table-width-in-comment-fix.d.ts

@@ -0,0 +1,11 @@
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+type TableWidthInCommentFixPluginState = {
+    documentHasLoadedOnce: boolean;
+};
+export declare const pluginKey: PluginKey<TableWidthInCommentFixPluginState>;
+declare const createPlugin: (dispatch: Dispatch, isTableAlignmentEnabled: boolean) => SafePlugin<{
+    documentHasLoadedOnce: boolean;
+}>;
+export { createPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.25.19",
+	"version": "7.25.21",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -24,13 +24,13 @@
 	"atlassian": {
 		"team": "Editor: Jenga",
 		"singleton": true,
-		"runReact18": false
+		"runReact18": true
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.9.0",
 		"@atlaskit/button": "^20.1.0",
 		"@atlaskit/custom-steps": "^0.7.0",
-		"@atlaskit/editor-common": "^88.8.0",
+		"@atlaskit/editor-common": "^88.12.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
@@ -43,7 +43,7 @@
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.15.0",
+		"@atlaskit/icon": "^22.16.0",
 		"@atlaskit/menu": "^2.12.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
@@ -51,7 +51,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/toggle": "^13.3.0",
+		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/tokens": "^1.59.0",
 		"@atlaskit/tooltip": "^18.7.0",
 		"@babel/runtime": "^7.0.0",
@@ -62,8 +62,8 @@
 		"raf-schd": "^4.0.3"
 	},
 	"peerDependencies": {
-		"react": "^16.8.0",
-		"react-dom": "^16.8.0",
+		"react": "^16.8.0 || ^17.0.0 || ~18.2.0",
+		"react-dom": "^16.8.0 || ^17.0.0 || ~18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"devDependencies": {

package/src/nodeviews/TableComponent.tsx

@@ -18,7 +18,10 @@ import type { EditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/edit
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
+import {
+	akEditorTableNumberColumnWidth,
+	akEditorTableToolbarSize as tableToolbarSize,
+} from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
@@ -456,7 +459,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			if (force || (!isResizing && shouldUpdateColgroup)) {
 				const resizeState = getResizeState({
 					minWidth: COLUMN_MIN_WIDTH,
-					maxSize: tableRenderWidth,
+					// When numbered column enabled, we need to subtract the width of the numbered column
+					maxSize: tableNode.attrs.isNumberColumnEnabled
+						? tableRenderWidth - akEditorTableNumberColumnWidth
+						: tableRenderWidth,
 					table: tableNode,
 					tableRef: this.table,
 					start,

package/src/nodeviews/TableResizer.tsx

@@ -436,45 +436,33 @@ export const TableResizer = ({
 				return;
 			}
 
-			previewScaleTable(
-				tableRef,
-				{
-					node,
-					prevNode: node,
-					start: pos + 1,
-					parentWidth: newWidth,
-				},
-				editorView.domAtPos.bind(editorView),
-				isTableScalingEnabled,
-				isTableWithFixedColumnWidthsOptionEnabled,
-				isCommentEditor,
-			);
-
 			const editorContainerWidth = isFullWidthModeEnabled
 				? lineLength + 2 * akEditorGutterPaddingDynamic()
 				: containerWidth;
 
-			const closestSnap = findClosestSnap(
-				newWidth,
-				isTableScalingEnabled
-					? defaultTablePreserveSnappingWidths(
-							PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET,
-							editorContainerWidth,
-							excludeGuidelineConfig,
-						)
-					: defaultSnappingWidths,
-				isTableScalingEnabled
-					? defaultGuidelinesForPreserveTable(
-							PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET,
-							editorContainerWidth,
-							excludeGuidelineConfig,
-						)
-					: defaultGuidelines,
-				TABLE_HIGHLIGHT_GAP,
-				TABLE_HIGHLIGHT_TOLERANCE,
-			);
+			const closestSnap =
+				!isCommentEditor &&
+				findClosestSnap(
+					newWidth,
+					isTableScalingEnabled
+						? defaultTablePreserveSnappingWidths(
+								PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET,
+								editorContainerWidth,
+								excludeGuidelineConfig,
+							)
+						: defaultSnappingWidths,
+					isTableScalingEnabled
+						? defaultGuidelinesForPreserveTable(
+								PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET,
+								editorContainerWidth,
+								excludeGuidelineConfig,
+							)
+						: defaultGuidelines,
+					TABLE_HIGHLIGHT_GAP,
+					TABLE_HIGHLIGHT_TOLERANCE,
+				);
 
-			updateActiveGuidelines(closestSnap);
+			closestSnap && updateActiveGuidelines(closestSnap);
 
 			// When snapping to the full width guideline, resize the table to be 1800px
 			const { state, dispatch } = editorView;
@@ -486,13 +474,33 @@ export const TableResizer = ({
 				excludeGuidelineConfig,
 			).filter((guideline) => guideline.isFullWidth)[0];
 
-			const isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
+			const isFullWidthGuidelineActive =
+				closestSnap && closestSnap.keys.includes(fullWidthGuideline.key);
+
 			const tableMaxWidth = isCommentEditor
-				? containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR
+				? Math.floor(containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR)
 				: TABLE_MAX_WIDTH;
-			const shouldUpdateWidthToWidest =
-				(isCommentEditor && tableMaxWidth === newWidth) ||
-				(!!isTableScalingEnabled && isFullWidthGuidelineActive);
+
+			const shouldUpdateWidthToWidest = isCommentEditor
+				? tableMaxWidth <= newWidth
+				: !!isTableScalingEnabled && isFullWidthGuidelineActive;
+
+			const previewParentWidth =
+				isCommentEditor && shouldUpdateWidthToWidest ? tableMaxWidth : newWidth;
+
+			previewScaleTable(
+				tableRef,
+				{
+					node,
+					prevNode: node,
+					start: pos + 1,
+					parentWidth: previewParentWidth,
+				},
+				editorView.domAtPos.bind(editorView),
+				isTableScalingEnabled,
+				isTableWithFixedColumnWidthsOptionEnabled,
+				isCommentEditor,
+			);
 
 			chainCommands(
 				(state, dispatch) => {

package/src/plugin.tsx

@@ -72,6 +72,7 @@ import {
 	createPlugin as createTableWidthPlugin,
 	pluginKey as tableWidthPluginKey,
 } from './pm-plugins/table-width';
+import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins/table-width-in-comment-fix';
 import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
 import { tableNodeSpecWithFixedToDOM } from './toDOM';
 import { getToolbarConfig } from './toolbar';
@@ -457,6 +458,16 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 								)
 							: undefined,
 				},
+				{
+					name: 'tableWidthInCommentFix',
+					plugin: ({ dispatch }) =>
+						options?.tableResizingEnabled && options?.isCommentEditor
+							? createTableWidthInCommentFixPlugin(
+									dispatch,
+									options?.isTableAlignmentEnabled ?? false,
+								)
+							: undefined,
+				},
 				// TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
 				{
 					name: 'tableOverflowAnalyticsPlugin',

package/src/pm-plugins/table-width-in-comment-fix.ts

@@ -0,0 +1,113 @@
+/*
+	Existing legacy tables in Comment editor have set attributes:
+	- width = 760
+	- layout = 'default'.
+
+	When "Support Table in Comment" FF is enabled, table resizing (and table alignment in Confluence comments) is turned.
+	It results in (ED-24795) all exising tables being set 760px width. Instead they all should inherit width from
+	the editor container until a user decided to edit their old comment and set a custom table width themselves.
+
+	This plugin exists to fix the described issue. It ensures that once "Support Table in Comment" FF turned on,
+	existing tables continue to inherit the width of editor container and are 'left-aligned' by default.
+*/
+
+import rafSchedule from 'raf-schd';
+
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+
+import { ALIGN_START } from '../utils/alignment';
+
+type TableWidthInCommentFixPluginState = {
+	documentHasLoadedOnce: boolean;
+};
+
+export const pluginKey = new PluginKey<TableWidthInCommentFixPluginState>(
+	'tableWidthInCommentFixPlugin',
+);
+const getPluginState = (state: EditorState): TableWidthInCommentFixPluginState | undefined | null =>
+	state && pluginKey.getState(state);
+
+const createPlugin = (dispatch: Dispatch, isTableAlignmentEnabled: boolean) => {
+	return new SafePlugin({
+		key: pluginKey,
+		state: {
+			init() {
+				return {
+					documentHasLoadedOnce: false,
+				};
+			},
+			apply(tr, pluginState) {
+				const meta = tr.getMeta(pluginKey);
+				if (meta) {
+					const keys = Object.keys(meta) as Array<keyof TableWidthInCommentFixPluginState>;
+					const changed = keys.some((key) => {
+						return pluginState[key] !== meta[key];
+					});
+
+					if (changed) {
+						const newState = { ...pluginState, ...meta };
+
+						dispatch(pluginKey, newState);
+						return newState;
+					}
+				}
+
+				return pluginState;
+			},
+		},
+		view: () => {
+			return {
+				update(editorView) {
+					const { state } = editorView;
+					const pluginState = getPluginState(state);
+					if (!pluginState) {
+						return;
+					}
+					const { documentHasLoadedOnce } = pluginState;
+
+					if (documentHasLoadedOnce) {
+						return;
+					}
+
+					const { table } = state.schema.nodes;
+					rafSchedule(() => {
+						const tr = editorView.state.tr;
+						let tableWidthAndLayoutUpdated = false;
+						editorView.state.doc.descendants((node, pos) => {
+							const isTable = node.type === table;
+							const width = node.attrs.width;
+							const layout = node.attrs.layout;
+							if (isTable && width === akEditorDefaultLayoutWidth && layout === 'default') {
+								tableWidthAndLayoutUpdated = true;
+								tr.setNodeMarkup(pos, undefined, {
+									...node.attrs,
+									width: null,
+									layout: isTableAlignmentEnabled ? ALIGN_START : 'default',
+								});
+								return false;
+							}
+							// Returning false here because don't need to change nested tables
+							return false;
+						});
+						if (tableWidthAndLayoutUpdated) {
+							tr.setMeta('addToHistory', false);
+							editorView.dispatch(tr);
+						}
+					})();
+
+					editorView.dispatch(
+						state.tr.setMeta(pluginKey, {
+							documentHasLoadedOnce: true,
+						}),
+					);
+				},
+			};
+		},
+	});
+};
+
+export { createPlugin };