@atlaskit/editor-plugin-table 10.9.21 → 10.9.22

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 10.9.22
+
+### Patch Changes
+
+- [#154546](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/154546)
+  [`11d9e46f3caaa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/11d9e46f3caaa) -
+  Fix tables insertion when platform_editor_usesharedpluginstateselector experiment is enabled
+- [#154340](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/154340)
+  [`982623fd6523f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/982623fd6523f) -
+  [ux] [EDITOR-325] Clean up nested tables feature gate
+  `platform_editor_nested_tables_bodied_extension_fix`
+
 ## 10.9.21
 
 ### Patch Changes

package/dist/cjs/pm-plugins/main.js

@@ -218,19 +218,11 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
 
         // transformSliceToRemoveOpenTable() transforms based on the depth of the root node, assuming that the tables will be at the root
         // Bodied extensions will contribute to the depth of the table selection so we need to remove them first
-        if ((0, _platformFeatureFlags.fg)('platform_editor_nested_tables_bodied_extension_fix')) {
-          /** If a partial paste of bodied extension, paste only text */
-          slice = (0, _transforms.transformSliceToRemoveOpenBodiedExtension)(slice, schema);
+        /** If a partial paste of bodied extension, paste only text */
+        slice = (0, _transforms.transformSliceToRemoveOpenBodiedExtension)(slice, schema);
 
-          /** If a partial paste of table, paste only table's content */
-          slice = (0, _paste.transformSliceToRemoveOpenTable)(slice, schema);
-        } else {
-          /** If a partial paste of table, paste only table's content */
-          slice = (0, _paste.transformSliceToRemoveOpenTable)(slice, schema);
-
-          /** If a partial paste of bodied extension, paste only text */
-          slice = (0, _transforms.transformSliceToRemoveOpenBodiedExtension)(slice, schema);
-        }
+        /** If a partial paste of table, paste only table's content */
+        slice = (0, _paste.transformSliceToRemoveOpenTable)(slice, schema);
 
         /** If a partial paste of multi bodied extension, paste only children */
         slice = (0, _transforms.transformSliceToRemoveOpenMultiBodiedExtension)(slice, schema);

package/dist/cjs/tablePlugin.js

@@ -128,6 +128,7 @@ var tablePlugin = function tablePlugin(_ref) {
       var stickyHeadersState = _pluginKey4.pluginKey.getState(editorState);
       var stickyHeader = stickyHeadersState ? (0, _util.findStickyHeaderForTable)(stickyHeadersState, tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tablePos) : undefined;
       var dragAndDropState = _pluginKey2.pluginKey.getState(editorState);
+      var sizeSelectorPluginState = _tableSizeSelector.pluginKey.getState(editorState);
       var sharedStateInternal = {
         isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
         wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled),
@@ -161,7 +162,9 @@ var tablePlugin = function tablePlugin(_ref) {
         stickyHeader: stickyHeader,
         dragMenuDirection: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
         dragMenuIndex: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
-        isDragMenuOpen: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.isDragMenuOpen
+        isDragMenuOpen: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.isDragMenuOpen,
+        isSizeSelectorOpen: sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.isSelectorOpen,
+        sizeSelectorTargetRef: sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.targetRef
       };
       return sharedStateInternal;
     },
@@ -474,7 +477,8 @@ var tablePlugin = function tablePlugin(_ref) {
           popupsBoundariesElement: popupsBoundariesElement,
           popupsScrollableElement: popupsScrollableElement,
           defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
-          defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
+          defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags,
+          isTableSelectorEnabled: isTableSelectorEnabled
         });
       }
       return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
@@ -503,6 +507,8 @@ var tablePlugin = function tablePlugin(_ref) {
             tableWidthPluginState = _ref21.tableWidthPluginState,
             dragAndDropState = _ref21.dragAndDropState,
             sizeSelectorPluginState = _ref21.sizeSelectorPluginState;
+          // Any changes made inside `<WithPluginState>` need to be reflected in the
+          // `<ContentComponent>` as well.
           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;

package/dist/cjs/ui/ContentComponent.js

@@ -8,7 +8,10 @@ exports.ContentComponent = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
+var _getDomRefFromSelection = require("@atlaskit/editor-common/get-dom-ref-from-selection");
+var _resizer = require("@atlaskit/editor-common/resizer");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _FloatingContextualButton = _interopRequireDefault(require("./FloatingContextualButton"));
 var _FloatingContextualMenu = _interopRequireDefault(require("./FloatingContextualMenu"));
 var _FloatingDeleteButton = _interopRequireDefault(require("./FloatingDeleteButton"));
@@ -17,12 +20,13 @@ var _FloatingInsertButton = _interopRequireDefault(require("./FloatingInsertButt
 var _FloatingToolbarLabel = require("./FloatingToolbarLabel/FloatingToolbarLabel");
 var _globalStyles = require("./global-styles");
 var _useInternalTablePluginStateSelector = require("./hooks/useInternalTablePluginStateSelector");
+var _SizeSelector = require("./SizeSelector");
 var _TableFullWidthLabel = require("./TableFullWidthLabel");
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
 
 var ContentComponentInternal = function ContentComponentInternal(_ref) {
-  var _api$analytics, _api$accessibilityUti;
+  var _api$analytics, _api$accessibilityUti, _api$analytics2;
   var api = _ref.api,
     editorView = _ref.editorView,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
@@ -30,6 +34,7 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     popupsMountPoint = _ref.popupsMountPoint,
     popupsBoundariesElement = _ref.popupsBoundariesElement,
     popupsScrollableElement = _ref.popupsScrollableElement,
+    isTableSelectorEnabled = _ref.isTableSelectorEnabled,
     defaultGetEditorContainerWidth = _ref.defaultGetEditorContainerWidth,
     defaultGetEditorFeatureFlags = _ref.defaultGetEditorFeatureFlags;
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
@@ -57,6 +62,8 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
   var dragMenuDirection = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'dragMenuDirection');
   var dragMenuIndex = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'dragMenuIndex');
   var isDragMenuOpen = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isDragMenuOpen');
+  var isSizeSelectorOpen = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'isSizeSelectorOpen');
+  var sizeSelectorTargetRef = (0, _useInternalTablePluginStateSelector.useInternalTablePluginStateSelector)(api, 'sizeSelectorTargetRef');
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
     isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
     editorView: editorView,
@@ -135,13 +142,22 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     api: api
   }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/_react.default.createElement(_FloatingToolbarLabel.FloatingToolbarLabel, {
     target: resizingTableRef,
-    content: /*#__PURE__*/_react.default.createElement(_TableFullWidthLabel.FullWidthDisplay, null),
+    content: (0, _experiments.editorExperiment)('single_column_layouts', true) ? /*#__PURE__*/_react.default.createElement(_resizer.ResizerBreakoutModeLabel, {
+      layout: "full-width"
+    }) : /*#__PURE__*/_react.default.createElement(_TableFullWidthLabel.FullWidthDisplay, null),
     alignX: 'center',
     alignY: 'bottom',
     stick: true,
     forcePlacement: true,
     zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
     offset: [0, 10]
+  }), isTableSelectorEnabled && isSizeSelectorOpen && /*#__PURE__*/_react.default.createElement(_SizeSelector.SizeSelector, {
+    api: api,
+    isOpenedByKeyboard: false,
+    popupsMountPoint: popupsMountPoint,
+    target: sizeSelectorTargetRef !== null && sizeSelectorTargetRef !== void 0 ? sizeSelectorTargetRef : (0, _getDomRefFromSelection.getDomRefFromSelection)(editorView, _analytics.ACTION_SUBJECT_ID.PICKER_TABLE_SIZE, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions),
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement
   }));
 };
 var ContentComponent = exports.ContentComponent = function ContentComponent(_ref3) {
@@ -153,6 +169,7 @@ var ContentComponent = exports.ContentComponent = function ContentComponent(_ref
     popupsMountPoint = _ref3.popupsMountPoint,
     popupsBoundariesElement = _ref3.popupsBoundariesElement,
     popupsScrollableElement = _ref3.popupsScrollableElement,
+    isTableSelectorEnabled = _ref3.isTableSelectorEnabled,
     defaultGetEditorContainerWidth = _ref3.defaultGetEditorContainerWidth,
     defaultGetEditorFeatureFlags = _ref3.defaultGetEditorFeatureFlags;
   return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
@@ -171,6 +188,7 @@ var ContentComponent = exports.ContentComponent = function ContentComponent(_ref
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,
     popupsScrollableElement: popupsScrollableElement,
+    isTableSelectorEnabled: isTableSelectorEnabled,
     defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
     defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
   }));

package/dist/es2019/pm-plugins/main.js

@@ -210,19 +210,11 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
 
         // transformSliceToRemoveOpenTable() transforms based on the depth of the root node, assuming that the tables will be at the root
         // Bodied extensions will contribute to the depth of the table selection so we need to remove them first
-        if (fg('platform_editor_nested_tables_bodied_extension_fix')) {
-          /** If a partial paste of bodied extension, paste only text */
-          slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
+        /** If a partial paste of bodied extension, paste only text */
+        slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
 
-          /** If a partial paste of table, paste only table's content */
-          slice = transformSliceToRemoveOpenTable(slice, schema);
-        } else {
-          /** If a partial paste of table, paste only table's content */
-          slice = transformSliceToRemoveOpenTable(slice, schema);
-
-          /** If a partial paste of bodied extension, paste only text */
-          slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
-        }
+        /** If a partial paste of table, paste only table's content */
+        slice = transformSliceToRemoveOpenTable(slice, schema);
 
         /** If a partial paste of multi bodied extension, paste only children */
         slice = transformSliceToRemoveOpenMultiBodiedExtension(slice, schema);

package/dist/es2019/tablePlugin.js

@@ -116,6 +116,7 @@ const tablePlugin = ({
       const stickyHeadersState = stickyHeadersPluginKey.getState(editorState);
       const stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tablePos) : undefined;
       const dragAndDropState = dragAndDropPluginKey.getState(editorState);
+      const sizeSelectorPluginState = sizeSelectorPluginKey.getState(editorState);
       const sharedStateInternal = {
         isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
         wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled),
@@ -149,7 +150,9 @@ const tablePlugin = ({
         stickyHeader,
         dragMenuDirection: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
         dragMenuIndex: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
-        isDragMenuOpen: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.isDragMenuOpen
+        isDragMenuOpen: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.isDragMenuOpen,
+        isSizeSelectorOpen: sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.isSelectorOpen,
+        sizeSelectorTargetRef: sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.targetRef
       };
       return sharedStateInternal;
     },
@@ -463,7 +466,8 @@ const tablePlugin = ({
           popupsBoundariesElement: popupsBoundariesElement,
           popupsScrollableElement: popupsScrollableElement,
           defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
-          defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
+          defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags,
+          isTableSelectorEnabled: isTableSelectorEnabled
         });
       }
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
@@ -493,6 +497,8 @@ const tablePlugin = ({
           sizeSelectorPluginState
         }) => {
           var _sizeSelectorPluginSt, _api$analytics3;
+          // Any changes made inside `<WithPluginState>` need to be reflected in the
+          // `<ContentComponent>` as well.
           const isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           const isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           const resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;

package/dist/es2019/ui/ContentComponent.js

@@ -1,7 +1,10 @@
 import React from 'react';
-import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+import { ACTION_SUBJECT, ACTION_SUBJECT_ID } 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 { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import FloatingContextualButton from './FloatingContextualButton';
 import FloatingContextualMenu from './FloatingContextualMenu';
 import FloatingDeleteButton from './FloatingDeleteButton';
@@ -12,6 +15,7 @@ import FloatingInsertButton from './FloatingInsertButton';
 import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
 import { GlobalStylesWrapper } from './global-styles';
 import { useInternalTablePluginStateSelector } from './hooks/useInternalTablePluginStateSelector';
+import { SizeSelector } from './SizeSelector';
 import { FullWidthDisplay } from './TableFullWidthLabel';
 const ContentComponentInternal = ({
   api,
@@ -21,10 +25,11 @@ const ContentComponentInternal = ({
   popupsMountPoint,
   popupsBoundariesElement,
   popupsScrollableElement,
+  isTableSelectorEnabled,
   defaultGetEditorContainerWidth,
   defaultGetEditorFeatureFlags
 }) => {
-  var _api$analytics, _api$accessibilityUti;
+  var _api$analytics, _api$accessibilityUti, _api$analytics2;
   const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   const ariaNotifyPlugin = api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify;
   const resizingTableLocalId = useInternalTablePluginStateSelector(api, 'resizingTableLocalId');
@@ -51,6 +56,8 @@ const ContentComponentInternal = ({
   const dragMenuDirection = useInternalTablePluginStateSelector(api, 'dragMenuDirection');
   const dragMenuIndex = useInternalTablePluginStateSelector(api, 'dragMenuIndex');
   const isDragMenuOpen = useInternalTablePluginStateSelector(api, 'isDragMenuOpen');
+  const isSizeSelectorOpen = useInternalTablePluginStateSelector(api, 'isSizeSelectorOpen');
+  const sizeSelectorTargetRef = useInternalTablePluginStateSelector(api, 'sizeSelectorTargetRef');
   return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
     isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
     editorView: editorView,
@@ -129,13 +136,22 @@ const ContentComponentInternal = ({
     api: api
   }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
     target: resizingTableRef,
-    content: /*#__PURE__*/React.createElement(FullWidthDisplay, null),
+    content: editorExperiment('single_column_layouts', true) ? /*#__PURE__*/React.createElement(ResizerBreakoutModeLabel, {
+      layout: "full-width"
+    }) : /*#__PURE__*/React.createElement(FullWidthDisplay, null),
     alignX: 'center',
     alignY: 'bottom',
     stick: true,
     forcePlacement: true,
     zIndex: akEditorFloatingPanelZIndex,
     offset: [0, 10]
+  }), isTableSelectorEnabled && isSizeSelectorOpen && /*#__PURE__*/React.createElement(SizeSelector, {
+    api: api,
+    isOpenedByKeyboard: false,
+    popupsMountPoint: popupsMountPoint,
+    target: sizeSelectorTargetRef !== null && sizeSelectorTargetRef !== void 0 ? sizeSelectorTargetRef : getDomRefFromSelection(editorView, ACTION_SUBJECT_ID.PICKER_TABLE_SIZE, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions),
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement
   }));
 };
 export const ContentComponent = ({
@@ -146,6 +162,7 @@ export const ContentComponent = ({
   popupsMountPoint,
   popupsBoundariesElement,
   popupsScrollableElement,
+  isTableSelectorEnabled,
   defaultGetEditorContainerWidth,
   defaultGetEditorFeatureFlags
 }) => {
@@ -166,6 +183,7 @@ export const ContentComponent = ({
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,
     popupsScrollableElement: popupsScrollableElement,
+    isTableSelectorEnabled: isTableSelectorEnabled,
     defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
     defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
   }));

package/dist/esm/pm-plugins/main.js

@@ -211,19 +211,11 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
 
         // transformSliceToRemoveOpenTable() transforms based on the depth of the root node, assuming that the tables will be at the root
         // Bodied extensions will contribute to the depth of the table selection so we need to remove them first
-        if (fg('platform_editor_nested_tables_bodied_extension_fix')) {
-          /** If a partial paste of bodied extension, paste only text */
-          slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
+        /** If a partial paste of bodied extension, paste only text */
+        slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
 
-          /** If a partial paste of table, paste only table's content */
-          slice = transformSliceToRemoveOpenTable(slice, schema);
-        } else {
-          /** If a partial paste of table, paste only table's content */
-          slice = transformSliceToRemoveOpenTable(slice, schema);
-
-          /** If a partial paste of bodied extension, paste only text */
-          slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
-        }
+        /** If a partial paste of table, paste only table's content */
+        slice = transformSliceToRemoveOpenTable(slice, schema);
 
         /** If a partial paste of multi bodied extension, paste only children */
         slice = transformSliceToRemoveOpenMultiBodiedExtension(slice, schema);

package/dist/esm/tablePlugin.js

@@ -119,6 +119,7 @@ var tablePlugin = function tablePlugin(_ref) {
       var stickyHeadersState = stickyHeadersPluginKey.getState(editorState);
       var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tablePos) : undefined;
       var dragAndDropState = dragAndDropPluginKey.getState(editorState);
+      var sizeSelectorPluginState = sizeSelectorPluginKey.getState(editorState);
       var sharedStateInternal = {
         isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
         wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled),
@@ -152,7 +153,9 @@ var tablePlugin = function tablePlugin(_ref) {
         stickyHeader: stickyHeader,
         dragMenuDirection: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
         dragMenuIndex: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
-        isDragMenuOpen: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.isDragMenuOpen
+        isDragMenuOpen: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.isDragMenuOpen,
+        isSizeSelectorOpen: sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.isSelectorOpen,
+        sizeSelectorTargetRef: sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.targetRef
       };
       return sharedStateInternal;
     },
@@ -465,7 +468,8 @@ var tablePlugin = function tablePlugin(_ref) {
           popupsBoundariesElement: popupsBoundariesElement,
           popupsScrollableElement: popupsScrollableElement,
           defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
-          defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
+          defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags,
+          isTableSelectorEnabled: isTableSelectorEnabled
         });
       }
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
@@ -494,6 +498,8 @@ var tablePlugin = function tablePlugin(_ref) {
             tableWidthPluginState = _ref21.tableWidthPluginState,
             dragAndDropState = _ref21.dragAndDropState,
             sizeSelectorPluginState = _ref21.sizeSelectorPluginState;
+          // Any changes made inside `<WithPluginState>` need to be reflected in the
+          // `<ContentComponent>` as well.
           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;

package/dist/esm/ui/ContentComponent.js

@@ -1,7 +1,10 @@
 import React from 'react';
-import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
+import { ACTION_SUBJECT, ACTION_SUBJECT_ID } 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 { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import FloatingContextualButton from './FloatingContextualButton';
 import FloatingContextualMenu from './FloatingContextualMenu';
 import FloatingDeleteButton from './FloatingDeleteButton';
@@ -12,9 +15,10 @@ import FloatingInsertButton from './FloatingInsertButton';
 import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
 import { GlobalStylesWrapper } from './global-styles';
 import { useInternalTablePluginStateSelector } from './hooks/useInternalTablePluginStateSelector';
+import { SizeSelector } from './SizeSelector';
 import { FullWidthDisplay } from './TableFullWidthLabel';
 var ContentComponentInternal = function ContentComponentInternal(_ref) {
-  var _api$analytics, _api$accessibilityUti;
+  var _api$analytics, _api$accessibilityUti, _api$analytics2;
   var api = _ref.api,
     editorView = _ref.editorView,
     dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
@@ -22,6 +26,7 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     popupsMountPoint = _ref.popupsMountPoint,
     popupsBoundariesElement = _ref.popupsBoundariesElement,
     popupsScrollableElement = _ref.popupsScrollableElement,
+    isTableSelectorEnabled = _ref.isTableSelectorEnabled,
     defaultGetEditorContainerWidth = _ref.defaultGetEditorContainerWidth,
     defaultGetEditorFeatureFlags = _ref.defaultGetEditorFeatureFlags;
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
@@ -49,6 +54,8 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
   var dragMenuDirection = useInternalTablePluginStateSelector(api, 'dragMenuDirection');
   var dragMenuIndex = useInternalTablePluginStateSelector(api, 'dragMenuIndex');
   var isDragMenuOpen = useInternalTablePluginStateSelector(api, 'isDragMenuOpen');
+  var isSizeSelectorOpen = useInternalTablePluginStateSelector(api, 'isSizeSelectorOpen');
+  var sizeSelectorTargetRef = useInternalTablePluginStateSelector(api, 'sizeSelectorTargetRef');
   return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
     isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
     editorView: editorView,
@@ -127,13 +134,22 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     api: api
   }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
     target: resizingTableRef,
-    content: /*#__PURE__*/React.createElement(FullWidthDisplay, null),
+    content: editorExperiment('single_column_layouts', true) ? /*#__PURE__*/React.createElement(ResizerBreakoutModeLabel, {
+      layout: "full-width"
+    }) : /*#__PURE__*/React.createElement(FullWidthDisplay, null),
     alignX: 'center',
     alignY: 'bottom',
     stick: true,
     forcePlacement: true,
     zIndex: akEditorFloatingPanelZIndex,
     offset: [0, 10]
+  }), isTableSelectorEnabled && isSizeSelectorOpen && /*#__PURE__*/React.createElement(SizeSelector, {
+    api: api,
+    isOpenedByKeyboard: false,
+    popupsMountPoint: popupsMountPoint,
+    target: sizeSelectorTargetRef !== null && sizeSelectorTargetRef !== void 0 ? sizeSelectorTargetRef : getDomRefFromSelection(editorView, ACTION_SUBJECT_ID.PICKER_TABLE_SIZE, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions),
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement
   }));
 };
 export var ContentComponent = function ContentComponent(_ref3) {
@@ -145,6 +161,7 @@ export var ContentComponent = function ContentComponent(_ref3) {
     popupsMountPoint = _ref3.popupsMountPoint,
     popupsBoundariesElement = _ref3.popupsBoundariesElement,
     popupsScrollableElement = _ref3.popupsScrollableElement,
+    isTableSelectorEnabled = _ref3.isTableSelectorEnabled,
     defaultGetEditorContainerWidth = _ref3.defaultGetEditorContainerWidth,
     defaultGetEditorFeatureFlags = _ref3.defaultGetEditorFeatureFlags;
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
@@ -163,6 +180,7 @@ export var ContentComponent = function ContentComponent(_ref3) {
     popupsMountPoint: popupsMountPoint,
     popupsBoundariesElement: popupsBoundariesElement,
     popupsScrollableElement: popupsScrollableElement,
+    isTableSelectorEnabled: isTableSelectorEnabled,
     defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
     defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
   }));

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

@@ -44,6 +44,8 @@ export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEn
     dragMenuDirection?: TableDirection;
     dragMenuIndex?: number;
     isDragMenuOpen?: boolean;
+    isSizeSelectorOpen?: boolean;
+    sizeSelectorTargetRef?: HTMLElement;
 };
 export type TableSharedState = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled'>;
 export type AlignmentOptions = 'center' | 'align-start';

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

@@ -11,7 +11,8 @@ export type ContentComponentProps = {
     popupsMountPoint?: HTMLElement;
     popupsBoundariesElement?: HTMLElement;
     popupsScrollableElement?: HTMLElement;
+    isTableSelectorEnabled: boolean | undefined;
     defaultGetEditorContainerWidth: GetEditorContainerWidth;
     defaultGetEditorFeatureFlags: GetEditorFeatureFlags;
 };
-export declare const ContentComponent: ({ api, editorView, dispatchAnalyticsEvent, options, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, defaultGetEditorContainerWidth, defaultGetEditorFeatureFlags, }: ContentComponentProps) => React.JSX.Element;
+export declare const ContentComponent: ({ api, editorView, dispatchAnalyticsEvent, options, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, isTableSelectorEnabled, defaultGetEditorContainerWidth, defaultGetEditorFeatureFlags, }: ContentComponentProps) => React.JSX.Element;

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

@@ -16,5 +16,5 @@ type Options = {
  * @param key Key of TableSharedStateInternal to select
  * @returns
  */
-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">(api: ExtractInjectionAPI<TablePlugin> | undefined, key: K, options?: Options) => TableSharedStateInternal[K] | undefined;
+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

@@ -44,6 +44,8 @@ export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEn
     dragMenuDirection?: TableDirection;
     dragMenuIndex?: number;
     isDragMenuOpen?: boolean;
+    isSizeSelectorOpen?: boolean;
+    sizeSelectorTargetRef?: HTMLElement;
 };
 export type TableSharedState = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled'>;
 export type AlignmentOptions = 'center' | 'align-start';

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

@@ -11,7 +11,8 @@ export type ContentComponentProps = {
     popupsMountPoint?: HTMLElement;
     popupsBoundariesElement?: HTMLElement;
     popupsScrollableElement?: HTMLElement;
+    isTableSelectorEnabled: boolean | undefined;
     defaultGetEditorContainerWidth: GetEditorContainerWidth;
     defaultGetEditorFeatureFlags: GetEditorFeatureFlags;
 };
-export declare const ContentComponent: ({ api, editorView, dispatchAnalyticsEvent, options, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, defaultGetEditorContainerWidth, defaultGetEditorFeatureFlags, }: ContentComponentProps) => React.JSX.Element;
+export declare const ContentComponent: ({ api, editorView, dispatchAnalyticsEvent, options, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, isTableSelectorEnabled, defaultGetEditorContainerWidth, defaultGetEditorFeatureFlags, }: ContentComponentProps) => React.JSX.Element;

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

@@ -16,5 +16,5 @@ type Options = {
  * @param key Key of TableSharedStateInternal to select
  * @returns
  */
-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">(api: ExtractInjectionAPI<TablePlugin> | undefined, key: K, options?: Options) => TableSharedStateInternal[K] | undefined;
+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.21",
+	"version": "10.9.22",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -144,9 +144,6 @@
 		"platform_editor_nested_tables_view_mode_sort": {
 			"type": "boolean"
 		},
-		"platform_editor_nested_tables_bodied_extension_fix": {
-			"type": "boolean"
-		},
 		"platform_editor_nested_table_drag_controls": {
 			"type": "boolean"
 		},

package/src/pm-plugins/main.ts

@@ -308,19 +308,11 @@ export const createPlugin = (
 
 				// transformSliceToRemoveOpenTable() transforms based on the depth of the root node, assuming that the tables will be at the root
 				// Bodied extensions will contribute to the depth of the table selection so we need to remove them first
-				if (fg('platform_editor_nested_tables_bodied_extension_fix')) {
-					/** If a partial paste of bodied extension, paste only text */
-					slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
-
-					/** If a partial paste of table, paste only table's content */
-					slice = transformSliceToRemoveOpenTable(slice, schema);
-				} else {
-					/** If a partial paste of table, paste only table's content */
-					slice = transformSliceToRemoveOpenTable(slice, schema);
-
-					/** If a partial paste of bodied extension, paste only text */
-					slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
-				}
+				/** If a partial paste of bodied extension, paste only text */
+				slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
+
+				/** If a partial paste of table, paste only table's content */
+				slice = transformSliceToRemoveOpenTable(slice, schema);
 
 				/** If a partial paste of multi bodied extension, paste only children */
 				slice = transformSliceToRemoveOpenMultiBodiedExtension(slice, schema);

package/src/tablePlugin.tsx

@@ -166,6 +166,7 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 				: undefined;
 
 			const dragAndDropState = dragAndDropPluginKey.getState(editorState);
+			const sizeSelectorPluginState = sizeSelectorPluginKey.getState(editorState);
 
 			const sharedStateInternal: TableSharedStateInternal = {
 				isFullWidthModeEnabled: !!options?.fullWidthEnabled,
@@ -203,6 +204,8 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 				dragMenuDirection: dragAndDropState?.dragMenuDirection,
 				dragMenuIndex: dragAndDropState?.dragMenuIndex,
 				isDragMenuOpen: dragAndDropState?.isDragMenuOpen,
+				isSizeSelectorOpen: sizeSelectorPluginState?.isSelectorOpen,
+				sizeSelectorTargetRef: sizeSelectorPluginState?.targetRef,
 			};
 
 			return sharedStateInternal;
@@ -589,6 +592,7 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 						popupsScrollableElement={popupsScrollableElement}
 						defaultGetEditorContainerWidth={defaultGetEditorContainerWidth}
 						defaultGetEditorFeatureFlags={defaultGetEditorFeatureFlags}
+						isTableSelectorEnabled={isTableSelectorEnabled}
 					/>
 				);
 			}
@@ -622,6 +626,8 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 							dragAndDropState,
 							sizeSelectorPluginState,
 						}) => {
+							// Any changes made inside `<WithPluginState>` need to be reflected in the
+							// `<ContentComponent>` as well.
 							const isColumnResizing = resizingPluginState?.dragging;
 							const isTableResizing = tableWidthPluginState?.resizing;
 							const resizingTableLocalId = tableWidthPluginState?.tableLocalId;

package/src/types/index.ts

@@ -79,6 +79,8 @@ export type TableSharedStateInternal = Pick<
 	dragMenuDirection?: TableDirection;
 	dragMenuIndex?: number;
 	isDragMenuOpen?: boolean;
+	isSizeSelectorOpen?: boolean;
+	sizeSelectorTargetRef?: HTMLElement;
 };
 
 export type TableSharedState = Pick<

package/src/ui/ContentComponent.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
 
-import { ACTION_SUBJECT, DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import {
+	ACTION_SUBJECT,
+	ACTION_SUBJECT_ID,
+	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,
@@ -9,6 +15,7 @@ import {
 } 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';
 
@@ -22,6 +29,7 @@ import FloatingInsertButton from './FloatingInsertButton';
 import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
 import { GlobalStylesWrapper } from './global-styles';
 import { useInternalTablePluginStateSelector } from './hooks/useInternalTablePluginStateSelector';
+import { SizeSelector } from './SizeSelector';
 import { FullWidthDisplay } from './TableFullWidthLabel';
 
 export type ContentComponentProps = {
@@ -32,6 +40,7 @@ export type ContentComponentProps = {
 	popupsMountPoint?: HTMLElement;
 	popupsBoundariesElement?: HTMLElement;
 	popupsScrollableElement?: HTMLElement;
+	isTableSelectorEnabled: boolean | undefined;
 	defaultGetEditorContainerWidth: GetEditorContainerWidth;
 	defaultGetEditorFeatureFlags: GetEditorFeatureFlags;
 };
@@ -44,6 +53,7 @@ const ContentComponentInternal = ({
 	popupsMountPoint,
 	popupsBoundariesElement,
 	popupsScrollableElement,
+	isTableSelectorEnabled,
 	defaultGetEditorContainerWidth,
 	defaultGetEditorFeatureFlags,
 }: ContentComponentProps) => {
@@ -83,6 +93,9 @@ const ContentComponentInternal = ({
 	const dragMenuIndex = useInternalTablePluginStateSelector(api, 'dragMenuIndex');
 	const isDragMenuOpen = useInternalTablePluginStateSelector(api, 'isDragMenuOpen');
 
+	const isSizeSelectorOpen = useInternalTablePluginStateSelector(api, 'isSizeSelectorOpen');
+	const sizeSelectorTargetRef = useInternalTablePluginStateSelector(api, 'sizeSelectorTargetRef');
+
 	return (
 		<>
 			{targetCellPosition &&
@@ -189,7 +202,13 @@ const ContentComponentInternal = ({
 				widthToWidest[resizingTableLocalId] && (
 					<FloatingToolbarLabel
 						target={resizingTableRef}
-						content={<FullWidthDisplay />}
+						content={
+							editorExperiment('single_column_layouts', true) ? (
+								<ResizerBreakoutModeLabel layout="full-width" />
+							) : (
+								<FullWidthDisplay />
+							)
+						}
 						alignX={'center'}
 						alignY={'bottom'}
 						stick={true}
@@ -198,6 +217,24 @@ const ContentComponentInternal = ({
 						offset={[0, 10]}
 					/>
 				)}
+
+			{isTableSelectorEnabled && isSizeSelectorOpen && (
+				<SizeSelector
+					api={api}
+					isOpenedByKeyboard={false}
+					popupsMountPoint={popupsMountPoint}
+					target={
+						sizeSelectorTargetRef ??
+						getDomRefFromSelection(
+							editorView,
+							ACTION_SUBJECT_ID.PICKER_TABLE_SIZE,
+							api?.analytics?.actions,
+						)
+					}
+					popupsBoundariesElement={popupsBoundariesElement}
+					popupsScrollableElement={popupsScrollableElement}
+				/>
+			)}
 		</>
 	);
 };
@@ -210,6 +247,7 @@ export const ContentComponent = ({
 	popupsMountPoint,
 	popupsBoundariesElement,
 	popupsScrollableElement,
+	isTableSelectorEnabled,
 	defaultGetEditorContainerWidth,
 	defaultGetEditorFeatureFlags,
 }: ContentComponentProps) => {
@@ -232,6 +270,7 @@ export const ContentComponent = ({
 				popupsMountPoint={popupsMountPoint}
 				popupsBoundariesElement={popupsBoundariesElement}
 				popupsScrollableElement={popupsScrollableElement}
+				isTableSelectorEnabled={isTableSelectorEnabled}
 				defaultGetEditorContainerWidth={defaultGetEditorContainerWidth}
 				defaultGetEditorFeatureFlags={defaultGetEditorFeatureFlags}
 			/>

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -114,7 +114,7 @@ export const ColumnControls = ({
 	const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
 
 	const rowControlStickyTop = 45;
-	const marginTop = hasHeaderRow && stickyTop !== undefined ? (rowControlStickyTop ?? 0) : 0;
+	const marginTop = hasHeaderRow && stickyTop !== undefined ? rowControlStickyTop ?? 0 : 0;
 
 	const handleClick = useCallback(
 		(event: MouseEvent) => {