@atlaskit/editor-plugin-table 10.9.22 → 10.9.24

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-table
 
+## 10.9.24
+
+### Patch Changes
+
+- [#154343](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/154343)
+  [`65a57af636614`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/65a57af636614) -
+  [ux] ED-27894: add platform_editor_table_fw_numcol_overflow_fix to stop first-paint flash and
+  overflow on full-width numbered-column tables when refreshing page
+
+## 10.9.23
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.9.22
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableContainer.js

@@ -238,6 +238,22 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
     // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
     responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 - resizeHandleSpacing;
+
+    // platform_editor_table_fw_numcol_overflow_fix:
+    // lineLength is undefined on first paint → width: NaN → wrapper expands to page
+    // width. rAF col-sizing then runs before the number-column padding and
+    // the final shrink, so column widths are locked in wrong.
+    // With the flag ON, if the value isn’t finite we fall back to gutterWidth
+    // for that first frame—no flash, no premature rAF.
+    //
+    // Type clean-up comes later:
+    // 1) ship this runtime guard (quick fix, no breakage);
+    // 2) TODO: widen lineLength to `number|undefined` and remove this block.
+    if ((0, _platformFeatureFlags.fg)('platform_editor_table_fw_numcol_overflow_fix')) {
+      if (isTableScalingEnabled && !Number.isFinite(responsiveContainerWidth)) {
+        responsiveContainerWidth = containerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 - resizeHandleSpacing;
+      }
+    }
   } else if (isCommentEditor) {
     responsiveContainerWidth = containerWidth - _consts.TABLE_OFFSET_IN_COMMENT_EDITOR;
   } else {

package/dist/es2019/nodeviews/TableContainer.js

@@ -234,6 +234,22 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
     // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
     responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+
+    // platform_editor_table_fw_numcol_overflow_fix:
+    // lineLength is undefined on first paint → width: NaN → wrapper expands to page
+    // width. rAF col-sizing then runs before the number-column padding and
+    // the final shrink, so column widths are locked in wrong.
+    // With the flag ON, if the value isn’t finite we fall back to gutterWidth
+    // for that first frame—no flash, no premature rAF.
+    //
+    // Type clean-up comes later:
+    // 1) ship this runtime guard (quick fix, no breakage);
+    // 2) TODO: widen lineLength to `number|undefined` and remove this block.
+    if (fg('platform_editor_table_fw_numcol_overflow_fix')) {
+      if (isTableScalingEnabled && !Number.isFinite(responsiveContainerWidth)) {
+        responsiveContainerWidth = containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+      }
+    }
   } else if (isCommentEditor) {
     responsiveContainerWidth = containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR;
   } else {

package/dist/esm/nodeviews/TableContainer.js

@@ -228,6 +228,22 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
     // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
     responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+
+    // platform_editor_table_fw_numcol_overflow_fix:
+    // lineLength is undefined on first paint → width: NaN → wrapper expands to page
+    // width. rAF col-sizing then runs before the number-column padding and
+    // the final shrink, so column widths are locked in wrong.
+    // With the flag ON, if the value isn’t finite we fall back to gutterWidth
+    // for that first frame—no flash, no premature rAF.
+    //
+    // Type clean-up comes later:
+    // 1) ship this runtime guard (quick fix, no breakage);
+    // 2) TODO: widen lineLength to `number|undefined` and remove this block.
+    if (fg('platform_editor_table_fw_numcol_overflow_fix')) {
+      if (isTableScalingEnabled && !Number.isFinite(responsiveContainerWidth)) {
+        responsiveContainerWidth = containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+      }
+    }
   } else if (isCommentEditor) {
     responsiveContainerWidth = containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR;
   } else {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.9.22",
+	"version": "10.9.24",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^2.1.0",
 		"@atlaskit/editor-plugin-content-insertion": "^2.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
-		"@atlaskit/editor-plugin-extension": "5.3.7",
+		"@atlaskit/editor-plugin-extension": "5.3.8",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
 		"@atlaskit/editor-plugin-selection": "^2.2.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
@@ -51,7 +51,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.6.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
-		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
+		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/primitives": "^14.7.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^4.21.0",
@@ -209,6 +209,9 @@
 		},
 		"platform_editor_controls_patch_8": {
 			"type": "boolean"
+		},
+		"platform_editor_table_fw_numcol_overflow_fix": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/TableContainer.tsx

@@ -352,6 +352,23 @@ export const ResizableTableContainer = React.memo(
 			responsiveContainerWidth = isTableScalingEnabled
 				? lineLength
 				: containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+
+			// platform_editor_table_fw_numcol_overflow_fix:
+			// lineLength is undefined on first paint → width: NaN → wrapper expands to page
+			// width. rAF col-sizing then runs before the number-column padding and
+			// the final shrink, so column widths are locked in wrong.
+			// With the flag ON, if the value isn’t finite we fall back to gutterWidth
+			// for that first frame—no flash, no premature rAF.
+			//
+			// Type clean-up comes later:
+			// 1) ship this runtime guard (quick fix, no breakage);
+			// 2) TODO: widen lineLength to `number|undefined` and remove this block.
+			if (fg('platform_editor_table_fw_numcol_overflow_fix')) {
+				if (isTableScalingEnabled && !Number.isFinite(responsiveContainerWidth)) {
+					responsiveContainerWidth =
+						containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+				}
+			}
 		} else if (isCommentEditor) {
 			responsiveContainerWidth = containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR;
 		} else {