@atlaskit/editor-plugin-table 10.9.23 → 10.9.25

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-table
 
+## 10.9.25
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

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/cjs/pm-plugins/decorations/plugin.js

@@ -4,10 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.pluginKey = exports.handleDocOrSelectionChanged = exports.getDecorations = exports.createPlugin = void 0;
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
+var _utils = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pluginKey = require("../plugin-key");
 var _tableWidth = require("../table-width");
 var _columnControls = require("./utils/column-controls");
@@ -21,7 +24,9 @@ var handleDocOrSelectionChanged = exports.handleDocOrSelectionChanged = function
   var wasResizing = (_tableWidthPluginKey$2 = _tableWidth.pluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
   var _ref = _pluginKey.pluginKey.getState(newState) || {},
     _ref$isDragAndDropEna = _ref.isDragAndDropEnabled,
-    isDragAndDropEnabled = _ref$isDragAndDropEna === void 0 ? false : _ref$isDragAndDropEna;
+    isDragAndDropEnabled = _ref$isDragAndDropEna === void 0 ? false : _ref$isDragAndDropEna,
+    isInDanger = _ref.isInDanger,
+    isTableHovered = _ref.isTableHovered;
   var changedResizing = isResizing !== wasResizing;
 
   // Remove column controls when resizing and don't add column decoration controls when DnD enabled
@@ -43,6 +48,19 @@ var handleDocOrSelectionChanged = exports.handleDocOrSelectionChanged = function
         tr: tr
       });
     }
+    if ((0, _platformFeatureFlags.fg)('platform_editor_remove_slow_table_transactions')) {
+      var _findTable, _findTable2;
+      // We're exiting a table with an existing decorations so we should clean it up
+      if ((isInDanger || isTableHovered) && (!(0, _coreUtils.insideTable)(newState) || ((_findTable = (0, _utils.findTable)(newState.selection)) === null || _findTable === void 0 ? void 0 : _findTable.node) !== ((_findTable2 = (0, _utils.findTable)(oldState.selection)) === null || _findTable2 === void 0 ? void 0 : _findTable2.node))) {
+        return (0, _columnControls.buildColumnControlsDecorations)({
+          decorationSet: decorationSet,
+          tr: tr,
+          options: {
+            isDragAndDropEnabled: isDragAndDropEnabled
+          }
+        });
+      }
+    }
   }
   return decorationSet;
 };

package/dist/cjs/ui/hooks/useInternalTablePluginStateSelector.js

@@ -15,7 +15,9 @@ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-
  *
  * @param api The editor API
  * @param key Key of TableSharedStateInternal to select
+ * @param options
  * @returns
+ * @example
  */
 var useInternalTablePluginStateSelector = exports.useInternalTablePluginStateSelector = function useInternalTablePluginStateSelector(api, key, options) {
   // Need to disable the eslint rule here because the key is for the TableSharedStateInternal type

package/dist/cjs/ui/toolbar.js

@@ -804,8 +804,8 @@ var isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEd
 
   // table may be scaled, use the scale percent to calculate the table width
   if (editorView) {
-    var tableWrapper = getDomRef(editorView);
-    var tableWrapperWidth = (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.clientWidth) || tableContainerWidth;
+    var _getDomRef;
+    var tableWrapperWidth = (0, _platformFeatureFlags.fg)('platform_editor_remove_slow_table_transactions') ? tableContainerWidth : ((_getDomRef = getDomRef(editorView)) === null || _getDomRef === void 0 ? void 0 : _getDomRef.clientWidth) || tableContainerWidth;
     var scalePercent = (0, _misc.getStaticTableScalingPercent)(selectedNode, tableWrapperWidth, shouldUseIncreasedScalingPercent);
     tableContainerWidth = tableContainerWidth * scalePercent;
   }

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/es2019/pm-plugins/decorations/plugin.js

@@ -1,7 +1,10 @@
+import { insideTable } from '@atlaskit/editor-common/core-utils';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { pluginKey as tablePluginKey } from '../plugin-key';
 import { pluginKey as tableWidthPluginKey } from '../table-width';
 import { buildColumnControlsDecorations, maybeUpdateColumnControlsSelectedDecoration } from './utils/column-controls';
@@ -12,7 +15,9 @@ export const handleDocOrSelectionChanged = (tr, decorationSet, oldState, newStat
   const isResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(newState)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
   const wasResizing = (_tableWidthPluginKey$2 = tableWidthPluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
   const {
-    isDragAndDropEnabled = false
+    isDragAndDropEnabled = false,
+    isInDanger,
+    isTableHovered
   } = tablePluginKey.getState(newState) || {};
   const changedResizing = isResizing !== wasResizing;
 
@@ -35,6 +40,19 @@ export const handleDocOrSelectionChanged = (tr, decorationSet, oldState, newStat
         tr
       });
     }
+    if (fg('platform_editor_remove_slow_table_transactions')) {
+      var _findTable, _findTable2;
+      // We're exiting a table with an existing decorations so we should clean it up
+      if ((isInDanger || isTableHovered) && (!insideTable(newState) || ((_findTable = findTable(newState.selection)) === null || _findTable === void 0 ? void 0 : _findTable.node) !== ((_findTable2 = findTable(oldState.selection)) === null || _findTable2 === void 0 ? void 0 : _findTable2.node))) {
+        return buildColumnControlsDecorations({
+          decorationSet,
+          tr,
+          options: {
+            isDragAndDropEnabled
+          }
+        });
+      }
+    }
   }
   return decorationSet;
 };

package/dist/es2019/ui/hooks/useInternalTablePluginStateSelector.js

@@ -9,7 +9,9 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
  *
  * @param api The editor API
  * @param key Key of TableSharedStateInternal to select
+ * @param options
  * @returns
+ * @example
  */
 export const useInternalTablePluginStateSelector = (api, key, options) => {
   // Need to disable the eslint rule here because the key is for the TableSharedStateInternal type

package/dist/es2019/ui/toolbar.js

@@ -754,8 +754,8 @@ const isLayoutOptionDisabled = (selectedNode, getEditorContainerWidth, getDomRef
 
   // table may be scaled, use the scale percent to calculate the table width
   if (editorView) {
-    const tableWrapper = getDomRef(editorView);
-    const tableWrapperWidth = (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.clientWidth) || tableContainerWidth;
+    var _getDomRef;
+    const tableWrapperWidth = fg('platform_editor_remove_slow_table_transactions') ? tableContainerWidth : ((_getDomRef = getDomRef(editorView)) === null || _getDomRef === void 0 ? void 0 : _getDomRef.clientWidth) || tableContainerWidth;
     const scalePercent = getStaticTableScalingPercent(selectedNode, tableWrapperWidth, shouldUseIncreasedScalingPercent);
     tableContainerWidth = tableContainerWidth * scalePercent;
   }

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/dist/esm/pm-plugins/decorations/plugin.js

@@ -1,7 +1,10 @@
+import { insideTable } from '@atlaskit/editor-common/core-utils';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { pluginKey as tablePluginKey } from '../plugin-key';
 import { pluginKey as tableWidthPluginKey } from '../table-width';
 import { buildColumnControlsDecorations, maybeUpdateColumnControlsSelectedDecoration } from './utils/column-controls';
@@ -15,7 +18,9 @@ export var handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr
   var wasResizing = (_tableWidthPluginKey$2 = tableWidthPluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
   var _ref = tablePluginKey.getState(newState) || {},
     _ref$isDragAndDropEna = _ref.isDragAndDropEnabled,
-    isDragAndDropEnabled = _ref$isDragAndDropEna === void 0 ? false : _ref$isDragAndDropEna;
+    isDragAndDropEnabled = _ref$isDragAndDropEna === void 0 ? false : _ref$isDragAndDropEna,
+    isInDanger = _ref.isInDanger,
+    isTableHovered = _ref.isTableHovered;
   var changedResizing = isResizing !== wasResizing;
 
   // Remove column controls when resizing and don't add column decoration controls when DnD enabled
@@ -37,6 +42,19 @@ export var handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr
         tr: tr
       });
     }
+    if (fg('platform_editor_remove_slow_table_transactions')) {
+      var _findTable, _findTable2;
+      // We're exiting a table with an existing decorations so we should clean it up
+      if ((isInDanger || isTableHovered) && (!insideTable(newState) || ((_findTable = findTable(newState.selection)) === null || _findTable === void 0 ? void 0 : _findTable.node) !== ((_findTable2 = findTable(oldState.selection)) === null || _findTable2 === void 0 ? void 0 : _findTable2.node))) {
+        return buildColumnControlsDecorations({
+          decorationSet: decorationSet,
+          tr: tr,
+          options: {
+            isDragAndDropEnabled: isDragAndDropEnabled
+          }
+        });
+      }
+    }
   }
   return decorationSet;
 };

package/dist/esm/ui/hooks/useInternalTablePluginStateSelector.js

@@ -9,7 +9,9 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
  *
  * @param api The editor API
  * @param key Key of TableSharedStateInternal to select
+ * @param options
  * @returns
+ * @example
  */
 export var useInternalTablePluginStateSelector = function useInternalTablePluginStateSelector(api, key, options) {
   // Need to disable the eslint rule here because the key is for the TableSharedStateInternal type

package/dist/esm/ui/toolbar.js

@@ -796,8 +796,8 @@ var isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEd
 
   // table may be scaled, use the scale percent to calculate the table width
   if (editorView) {
-    var tableWrapper = getDomRef(editorView);
-    var tableWrapperWidth = (tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.clientWidth) || tableContainerWidth;
+    var _getDomRef;
+    var tableWrapperWidth = fg('platform_editor_remove_slow_table_transactions') ? tableContainerWidth : ((_getDomRef = getDomRef(editorView)) === null || _getDomRef === void 0 ? void 0 : _getDomRef.clientWidth) || tableContainerWidth;
     var scalePercent = getStaticTableScalingPercent(selectedNode, tableWrapperWidth, shouldUseIncreasedScalingPercent);
     tableContainerWidth = tableContainerWidth * scalePercent;
   }

package/dist/types/types/index.d.ts

@@ -8,7 +8,7 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
-import { RowStickyState } from '../pm-plugins/sticky-headers/types';
+import type { RowStickyState } from '../pm-plugins/sticky-headers/types';
 import type { TablePlugin } from '../tablePluginType';
 export declare const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
 export type RowInsertPosition = 'TOP' | 'BOTTOM';

package/dist/types/ui/ContentComponent.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
-import { ExtractInjectionAPI, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { type ExtractInjectionAPI, type GetEditorContainerWidth, type GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { TablePlugin, TablePluginOptions } from '../tablePluginType';
+import { type TablePlugin, type TablePluginOptions } from '../tablePluginType';
 export type ContentComponentProps = {
     api: ExtractInjectionAPI<TablePlugin> | undefined;
     editorView: EditorView;

package/dist/types/ui/SizeSelector/index.d.ts

@@ -1,7 +1,7 @@
 import { jsx } from '@emotion/react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { type TableSelectorPopupProps } from '@atlaskit/editor-common/ui';
-import { TablePlugin } from '../../tablePluginType';
+import type { TablePlugin } from '../../tablePluginType';
 interface SizeSelectorProps extends Omit<TableSelectorPopupProps, 'handleClickOutside' | 'onSelection' | 'unUnmount'> {
     api?: ExtractInjectionAPI<TablePlugin>;
 }

package/dist/types/ui/hooks/useInternalTablePluginStateSelector.d.ts

@@ -1,6 +1,6 @@
-import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { TablePlugin } from '../../tablePluginType';
-import { TableSharedStateInternal } from '../../types';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TablePlugin } from '../../tablePluginType';
+import type { TableSharedStateInternal } from '../../types';
 type Options = {
     disabled?: boolean;
 };
@@ -14,7 +14,9 @@ type Options = {
  *
  * @param api The editor API
  * @param key Key of TableSharedStateInternal to select
+ * @param options
  * @returns
+ * @example
  */
 export declare const useInternalTablePluginStateSelector: <K extends "isFullWidthModeEnabled" | "wasFullWidthModeEnabled" | "isHeaderRowEnabled" | "isHeaderColumnEnabled" | "ordering" | "isInDanger" | "hoveredRows" | "hoveredColumns" | "hoveredCell" | "isTableHovered" | "tableNode" | "widthToWidest" | "tableRef" | "tablePos" | "targetCellPosition" | "isContextualMenuOpen" | "pluginConfig" | "insertColumnButtonIndex" | "insertRowButtonIndex" | "isDragAndDropEnabled" | "tableWrapperTarget" | "isCellMenuOpenByKeyboard" | "isWholeTableInDanger" | "isDragMenuOpen" | "dragMenuDirection" | "dragMenuIndex" | "isResizing" | "isTableResizing" | "resizingTableRef" | "resizingTableLocalId" | "stickyHeader" | "isSizeSelectorOpen" | "sizeSelectorTargetRef">(api: ExtractInjectionAPI<TablePlugin> | undefined, key: K, options?: Options) => TableSharedStateInternal[K] | undefined;
 export {};

package/dist/types-ts4.5/types/index.d.ts

@@ -8,7 +8,7 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
-import { RowStickyState } from '../pm-plugins/sticky-headers/types';
+import type { RowStickyState } from '../pm-plugins/sticky-headers/types';
 import type { TablePlugin } from '../tablePluginType';
 export declare const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
 export type RowInsertPosition = 'TOP' | 'BOTTOM';

package/dist/types-ts4.5/ui/ContentComponent.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
-import { ExtractInjectionAPI, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { type ExtractInjectionAPI, type GetEditorContainerWidth, type GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { TablePlugin, TablePluginOptions } from '../tablePluginType';
+import { type TablePlugin, type TablePluginOptions } from '../tablePluginType';
 export type ContentComponentProps = {
     api: ExtractInjectionAPI<TablePlugin> | undefined;
     editorView: EditorView;

package/dist/types-ts4.5/ui/SizeSelector/index.d.ts

@@ -1,7 +1,7 @@
 import { jsx } from '@emotion/react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { type TableSelectorPopupProps } from '@atlaskit/editor-common/ui';
-import { TablePlugin } from '../../tablePluginType';
+import type { TablePlugin } from '../../tablePluginType';
 interface SizeSelectorProps extends Omit<TableSelectorPopupProps, 'handleClickOutside' | 'onSelection' | 'unUnmount'> {
     api?: ExtractInjectionAPI<TablePlugin>;
 }

package/dist/types-ts4.5/ui/hooks/useInternalTablePluginStateSelector.d.ts

@@ -1,6 +1,6 @@
-import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { TablePlugin } from '../../tablePluginType';
-import { TableSharedStateInternal } from '../../types';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TablePlugin } from '../../tablePluginType';
+import type { TableSharedStateInternal } from '../../types';
 type Options = {
     disabled?: boolean;
 };
@@ -14,7 +14,9 @@ type Options = {
  *
  * @param api The editor API
  * @param key Key of TableSharedStateInternal to select
+ * @param options
  * @returns
+ * @example
  */
 export declare const useInternalTablePluginStateSelector: <K extends "isFullWidthModeEnabled" | "wasFullWidthModeEnabled" | "isHeaderRowEnabled" | "isHeaderColumnEnabled" | "ordering" | "isInDanger" | "hoveredRows" | "hoveredColumns" | "hoveredCell" | "isTableHovered" | "tableNode" | "widthToWidest" | "tableRef" | "tablePos" | "targetCellPosition" | "isContextualMenuOpen" | "pluginConfig" | "insertColumnButtonIndex" | "insertRowButtonIndex" | "isDragAndDropEnabled" | "tableWrapperTarget" | "isCellMenuOpenByKeyboard" | "isWholeTableInDanger" | "isDragMenuOpen" | "dragMenuDirection" | "dragMenuIndex" | "isResizing" | "isTableResizing" | "resizingTableRef" | "resizingTableLocalId" | "stickyHeader" | "isSizeSelectorOpen" | "sizeSelectorTargetRef">(api: ExtractInjectionAPI<TablePlugin> | undefined, key: K, options?: Options) => TableSharedStateInternal[K] | undefined;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.9.23",
+	"version": "10.9.25",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/custom-steps": "^0.11.0",
-		"@atlaskit/editor-common": "^105.2.0",
+		"@atlaskit/editor-common": "^105.5.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
@@ -47,14 +47,14 @@
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/icon": "^26.0.0",
-		"@atlaskit/menu": "^5.0.0",
+		"@atlaskit/menu": "^6.0.0",
 		"@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",
+		"@atlaskit/tmp-editor-statsig": "^4.22.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",
@@ -195,6 +195,9 @@
 		"platform_editor_controls_table_picker": {
 			"type": "boolean"
 		},
+		"platform_editor_remove_slow_table_transactions": {
+			"type": "boolean"
+		},
 		"platform_editor_controls_patch_6": {
 			"type": "boolean"
 		},
@@ -209,6 +212,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 {

package/src/pm-plugins/decorations/plugin.ts

@@ -1,3 +1,4 @@
+import { insideTable } from '@atlaskit/editor-common/core-utils';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type {
 	EditorState,
@@ -8,6 +9,8 @@ import type {
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import { pluginKey as tablePluginKey } from '../plugin-key';
 import { pluginKey as tableWidthPluginKey } from '../table-width';
@@ -29,7 +32,11 @@ export const handleDocOrSelectionChanged = (
 ): DecorationSet => {
 	const isResizing = tableWidthPluginKey.getState(newState)?.resizing;
 	const wasResizing = tableWidthPluginKey.getState(oldState)?.resizing;
-	const { isDragAndDropEnabled = false } = tablePluginKey.getState(newState) || {};
+	const {
+		isDragAndDropEnabled = false,
+		isInDanger,
+		isTableHovered,
+	} = tablePluginKey.getState(newState) || {};
 
 	const changedResizing = isResizing !== wasResizing;
 
@@ -52,6 +59,22 @@ export const handleDocOrSelectionChanged = (
 				tr,
 			});
 		}
+		if (fg('platform_editor_remove_slow_table_transactions')) {
+			// We're exiting a table with an existing decorations so we should clean it up
+			if (
+				(isInDanger || isTableHovered) &&
+				(!insideTable(newState) ||
+					findTable(newState.selection)?.node !== findTable(oldState.selection)?.node)
+			) {
+				return buildColumnControlsDecorations({
+					decorationSet,
+					tr,
+					options: {
+						isDragAndDropEnabled,
+					},
+				});
+			}
+		}
 	}
 
 	return decorationSet;

package/src/types/index.ts

@@ -15,7 +15,7 @@ import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 
-import { RowStickyState } from '../pm-plugins/sticky-headers/types';
+import type { RowStickyState } from '../pm-plugins/sticky-headers/types';
 import type { TablePlugin } from '../tablePluginType';
 
 export const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;

package/src/ui/ContentComponent.tsx

@@ -3,21 +3,21 @@ import React from 'react';
 import {
 	ACTION_SUBJECT,
 	ACTION_SUBJECT_ID,
-	DispatchAnalyticsEvent,
+	type DispatchAnalyticsEvent,
 } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
 import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import {
-	ExtractInjectionAPI,
-	GetEditorContainerWidth,
-	GetEditorFeatureFlags,
+	type ExtractInjectionAPI,
+	type GetEditorContainerWidth,
+	type GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
-import { TablePlugin, TablePluginOptions } from '../tablePluginType';
+import { type TablePlugin, type TablePluginOptions } from '../tablePluginType';
 
 import FloatingContextualButton from './FloatingContextualButton';
 import FloatingContextualMenu from './FloatingContextualMenu';

package/src/ui/SizeSelector/index.tsx

@@ -11,7 +11,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { TableSelectorPopup, type TableSelectorPopupProps } from '@atlaskit/editor-common/ui';
 
 import { pluginKey } from '../../pm-plugins/table-size-selector';
-import { TablePlugin } from '../../tablePluginType';
+import type { TablePlugin } from '../../tablePluginType';
 
 interface SizeSelectorProps
 	extends Omit<TableSelectorPopupProps, 'handleClickOutside' | 'onSelection' | 'unUnmount'> {

package/src/ui/hooks/useInternalTablePluginStateSelector.ts

@@ -1,8 +1,8 @@
-import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 
-import { TablePlugin } from '../../tablePluginType';
-import { TableSharedStateInternal } from '../../types';
+import type { TablePlugin } from '../../tablePluginType';
+import type { TableSharedStateInternal } from '../../types';
 
 type Options = {
 	disabled?: boolean;
@@ -18,7 +18,9 @@ type Options = {
  *
  * @param api The editor API
  * @param key Key of TableSharedStateInternal to select
+ * @param options
  * @returns
+ * @example
  */
 export const useInternalTablePluginStateSelector = <K extends keyof TableSharedStateInternal>(
 	api: ExtractInjectionAPI<TablePlugin> | undefined,

package/src/ui/toolbar.tsx

@@ -1144,8 +1144,9 @@ const isLayoutOptionDisabled = (
 
 	// table may be scaled, use the scale percent to calculate the table width
 	if (editorView) {
-		const tableWrapper = getDomRef(editorView);
-		const tableWrapperWidth = tableWrapper?.clientWidth || tableContainerWidth;
+		const tableWrapperWidth = fg('platform_editor_remove_slow_table_transactions')
+			? tableContainerWidth
+			: getDomRef(editorView)?.clientWidth || tableContainerWidth;
 		const scalePercent = getStaticTableScalingPercent(
 			selectedNode,
 			tableWrapperWidth,