@atlaskit/editor-plugin-table 7.25.20 → 7.25.22

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-table
 
+## 7.25.22
+
+### Patch Changes
+
+- [#138699](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138699)
+  [`aa5140e59db5a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/aa5140e59db5a) -
+  Cleanup feature flag moving styles from editor-core to tables plugin.
+- Updated dependencies
+
+## 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

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/ui/global-styles.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GlobalStylesWrapper = void 0;
 var _react = require("@emotion/react");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commonStyles = require("./common-styles");
 /**
  * @jsxRuntime classic
@@ -15,9 +14,9 @@ var _commonStyles = require("./common-styles");
 
 var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
   var featureFlags = _ref.featureFlags;
-  return (0, _platformFeatureFlags.fg)('platform_editor_move_table_styles_to_plugin') ? (0, _react.jsx)(_react.Global, {
+  return (0, _react.jsx)(_react.Global, {
     styles: (0, _commonStyles.tableStyles)({
       featureFlags: featureFlags
     })
-  }) : null;
+  });
 };

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/ui/global-styles.js

@@ -4,14 +4,13 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { Global, jsx } from '@emotion/react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { tableStyles } from './common-styles';
 export const GlobalStylesWrapper = ({
   featureFlags
 }) => {
-  return fg('platform_editor_move_table_styles_to_plugin') ? jsx(Global, {
+  return jsx(Global, {
     styles: tableStyles({
       featureFlags
     })
-  }) : null;
+  });
 };

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/ui/global-styles.js

@@ -4,13 +4,12 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { Global, jsx } from '@emotion/react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { tableStyles } from './common-styles';
 export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
   var featureFlags = _ref.featureFlags;
-  return fg('platform_editor_move_table_styles_to_plugin') ? jsx(Global, {
+  return jsx(Global, {
     styles: tableStyles({
       featureFlags: featureFlags
     })
-  }) : null;
+  });
 };

package/dist/types/ui/global-styles.d.ts

@@ -6,4 +6,4 @@ import { jsx } from '@emotion/react';
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
 export declare const GlobalStylesWrapper: ({ featureFlags, }: {
     featureFlags: FeatureFlags | undefined;
-}) => jsx.JSX.Element | null;
+}) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/global-styles.d.ts

@@ -6,4 +6,4 @@ import { jsx } from '@emotion/react';
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
 export declare const GlobalStylesWrapper: ({ featureFlags, }: {
     featureFlags: FeatureFlags | undefined;
-}) => jsx.JSX.Element | null;
+}) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.25.20",
+	"version": "7.25.22",
 	"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.13.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": {
@@ -117,9 +117,6 @@
 		"platform_editor_dark_mode_cell_header_color_fix": {
 			"type": "boolean"
 		},
-		"platform_editor_move_table_styles_to_plugin": {
-			"type": "boolean"
-		},
 		"platform_editor_a11y_table_context_menu": {
 			"type": "boolean"
 		},

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/ui/global-styles.tsx

@@ -6,7 +6,6 @@
 import { Global, jsx } from '@emotion/react';
 
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
-import { fg } from '@atlaskit/platform-feature-flags';
 
 import { tableStyles } from './common-styles';
 
@@ -15,7 +14,5 @@ export const GlobalStylesWrapper = ({
 }: {
 	featureFlags: FeatureFlags | undefined;
 }) => {
-	return fg('platform_editor_move_table_styles_to_plugin') ? (
-		<Global styles={tableStyles({ featureFlags })} />
-	) : null;
+	return <Global styles={tableStyles({ featureFlags })} />;
 };