@atlaskit/editor-plugin-table 7.12.2 → 7.12.4

package/dist/esm/nodeviews/TableComponent.js

@@ -467,7 +467,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       // Needed for undo / redo
       var isTableWidthChanged = tableNodeWidth !== this.tableNodeWidth;
       var isTableSquashed = tableRenderWidth < tableNodeWidth;
-      var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth;
+      var isNumberColumnChanged = tableNode.attrs.isNumberColumnEnabled !== this.node.attrs.isNumberColumnEnabled;
+      var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth || isNumberColumnChanged;
       if (force || maybeScale) {
         var _this$containerWidth;
         var containerWidthValue = containerWidth.width;
@@ -476,7 +477,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         var isTableResized = hasTableBeenResized(tableNode);
         var isColumnsDistributed = wasTableResized && !isTableResized;
         var isTableDisplayModeChanged = this.node.attrs.displayMode !== tableNode.attrs.displayMode;
-        var shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged;
+        var shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged || isNumberColumnChanged;
         if (force || !isResizing && shouldUpdateColgroup) {
           var _this$props$options, _this$props$options2;
           var resizeState = getResizeState({

package/dist/esm/nodeviews/TableResizer.js

@@ -139,7 +139,9 @@ export var TableResizer = function TableResizer(_ref) {
         displayGapCursor(true);
         displayGuideline([]);
         _tr.setMeta(tableWidthPluginKey, {
-          resizing: false
+          resizing: false,
+          tableLocalId: '',
+          tableRef: null
         });
         dispatch(_tr);
       }
@@ -152,7 +154,9 @@ export var TableResizer = function TableResizer(_ref) {
       tr = editorView.state.tr;
     displayGapCursor(false);
     tr.setMeta(tableWidthPluginKey, {
-      resizing: true
+      resizing: true,
+      tableLocalId: node.attrs.localId,
+      tableRef: tableRef
     });
     tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
@@ -163,7 +167,7 @@ export var TableResizer = function TableResizer(_ref) {
     if (onResizeStart) {
       onResizeStart();
     }
-  }, [startMeasure, editorView, displayGapCursor, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
+  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
   var handleResize = useCallback(function (originalState, delta) {
     var _node$attrs$localId, _node$attrs;
     countFrames();
@@ -212,7 +216,9 @@ export var TableResizer = function TableResizer(_ref) {
     var currentTableNodeLocalId = (_node$attrs$localId2 = node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId) !== null && _node$attrs$localId2 !== void 0 ? _node$attrs$localId2 : '';
     newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? TABLE_MAX_WIDTH : newWidth;
     var tr = state.tr.setMeta(tableWidthPluginKey, {
-      resizing: false
+      resizing: false,
+      tableLocalId: '',
+      tableRef: null
     });
     var frameRateSamples = endMeasure();
     if (frameRateSamples.length > 0) {

package/dist/esm/plugin.js

@@ -8,6 +8,7 @@ import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { browser } from '@atlaskit/editor-common/utils';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { insertTableWithSize } from './commands/insert';
@@ -34,6 +35,8 @@ import FloatingContextualMenu from './ui/FloatingContextualMenu';
 import FloatingDeleteButton from './ui/FloatingDeleteButton';
 import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
+import { FloatingToolbarLabel } from './ui/FloatingToolbarLabel/FloatingToolbarLabel';
+import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { createTableWithWidth } from './utils';
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
@@ -312,7 +315,10 @@ var tablesPlugin = function tablesPlugin(_ref) {
             dragAndDropState = _ref17.dragAndDropState;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
+          var resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;
+          var resizingTableRef = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableRef;
           var isResizing = isColumnResizing || isTableResizing;
+          var widthToWidest = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.widthToWidest;
           var _ref18 = tablePluginState,
             tableNode = _ref18.tableNode,
             tablePos = _ref18.tablePos,
@@ -390,6 +396,15 @@ var tablesPlugin = function tablesPlugin(_ref) {
             stickyHeaders: stickyHeader,
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
             editorAnalyticsAPI: editorAnalyticsAPI
+          }), (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
+            target: resizingTableRef,
+            content: /*#__PURE__*/React.createElement(FullWidthDisplay, null),
+            alignX: 'center',
+            alignY: 'bottom',
+            stick: true,
+            forcePlacement: true,
+            zIndex: akEditorFloatingPanelZIndex,
+            offset: [0, 10]
           }));
         }
       }));

package/dist/esm/pm-plugins/table-width.js

@@ -1,5 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["width"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -24,17 +24,23 @@ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullW
     state: {
       init: function init() {
         return {
-          resizing: false
+          resizing: false,
+          tableLocalId: '',
+          tableRef: null
         };
       },
       apply: function apply(tr, pluginState) {
         var meta = tr.getMeta(pluginKey);
-        if (meta && meta.resizing !== pluginState.resizing) {
-          var newState = {
-            resizing: meta.resizing
-          };
-          dispatch(pluginKey, newState);
-          return newState;
+        if (meta) {
+          var keys = Object.keys(meta);
+          var changed = keys.some(function (key) {
+            return pluginState[key] !== meta[key];
+          });
+          if (changed) {
+            var newState = _objectSpread(_objectSpread({}, pluginState), meta);
+            dispatch(pluginKey, newState);
+            return newState;
+          }
         }
         return pluginState;
       }

package/dist/esm/toolbar.js

@@ -26,7 +26,6 @@ import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { canMergeCells } from './transforms';
 import { TableCssClassName } from './types';
 import { DisplayModeIcon } from './ui/icons';
-import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes, isTableNested } from './utils';
 export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
   var formatMessage = _ref.formatMessage;
@@ -305,7 +304,6 @@ export var getClosestSelectionOrTableRect = function getClosestSelectionOrTableR
 export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options) {
   return function (config) {
     return function (state, intl) {
-      var _tableObject$node$att, _tableObject$node;
       var tableObject = findTable(state.selection);
       var pluginState = getPluginState(state);
       var resizeState = tableResizingPluginKey.getState(state);
@@ -313,53 +311,8 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
 
       // We don't want to show floating toolbar while resizing the table
       var isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
-      var widthToWidest = pluginState.widthToWidest;
-      var currentTableNodeLocalId = (_tableObject$node$att = tableObject === null || tableObject === void 0 || (_tableObject$node = tableObject.node) === null || _tableObject$node === void 0 || (_tableObject$node = _tableObject$node.attrs) === null || _tableObject$node === void 0 ? void 0 : _tableObject$node.localId) !== null && _tableObject$node$att !== void 0 ? _tableObject$node$att : '';
-      if (options !== null && options !== void 0 && options.isTableScalingEnabled && isWidthResizing && widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId]) {
-        var _getEditorFeatureFlag = getEditorFeatureFlags(),
-          stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
-        var nodeType = state.schema.nodes.table;
-        var getDomRef = function getDomRef(editorView) {
-          var element;
-          var domAtPos = editorView.domAtPos.bind(editorView);
-          var parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
-          if (parent) {
-            var tableRef = parent.querySelector('table') || undefined;
-            if (tableRef) {
-              element = closestElement(tableRef, ".".concat(TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
-            }
-          }
-          return element;
-        };
-        var fullWidthLabel = {
-          id: 'editor.table.fullWidthLabel',
-          type: 'custom',
-          fallback: [],
-          render: function render() {
-            return jsx(FullWidthDisplay, {
-              key: 'full-width-label'
-            });
-          }
-        };
-        return {
-          title: 'Table floating label',
-          getDomRef: getDomRef,
-          nodeType: nodeType,
-          key: 'full-width-label',
-          offset: [0, 18],
-          absoluteOffset: stickyScrollbar ? {
-            top: -6
-          } : {
-            top: 0
-          },
-          zIndex: akEditorFloatingPanelZIndex + 1,
-          // Place the context menu slightly above the others
-          items: [fullWidthLabel],
-          scrollable: true
-        };
-      }
       if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
-        var _nodeType = state.schema.nodes.table;
+        var nodeType = state.schema.nodes.table;
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
         var cellItems;
         cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled);
@@ -391,10 +344,10 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
             };
           };
         }
-        var _getDomRef = function _getDomRef(editorView) {
+        var getDomRef = function getDomRef(editorView) {
           var element;
           var domAtPos = editorView.domAtPos.bind(editorView);
-          var parent = findParentDomRefOfType(_nodeType, domAtPos)(state.selection);
+          var parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
           if (parent) {
             var tableRef = parent.querySelector('table') || undefined;
             if (tableRef) {
@@ -403,14 +356,14 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
           }
           return element;
         };
-        var _getEditorFeatureFlag2 = getEditorFeatureFlags(),
-          _stickyScrollbar = _getEditorFeatureFlag2.stickyScrollbar;
+        var _getEditorFeatureFlag = getEditorFeatureFlags(),
+          stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
         return {
           title: 'Table floating controls',
-          getDomRef: _getDomRef,
-          nodeType: _nodeType,
+          getDomRef: getDomRef,
+          nodeType: nodeType,
           offset: [0, 18],
-          absoluteOffset: _stickyScrollbar ? {
+          absoluteOffset: stickyScrollbar ? {
             top: -6
           } : {
             top: 0
@@ -425,7 +378,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
             items: [{
               state: state,
               formatMessage: intl.formatMessage,
-              nodeType: _nodeType,
+              nodeType: nodeType,
               onMouseEnter: hoverTable(false, true),
               onMouseLeave: clearHoverSelection(),
               onFocus: hoverTable(false, true),

package/dist/esm/ui/FloatingToolbarLabel/FloatingToolbarLabel.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Popup } from '@atlaskit/editor-common/ui';
+export var FloatingToolbarLabel = /*#__PURE__*/React.memo(function (props) {
+  var target = props.target,
+    content = props.content,
+    alignX = props.alignX,
+    alignY = props.alignY,
+    zIndex = props.zIndex,
+    forcePlacement = props.forcePlacement,
+    stick = props.stick,
+    offset = props.offset;
+  return /*#__PURE__*/React.createElement(Popup, {
+    target: target,
+    alignX: alignX,
+    alignY: alignY,
+    zIndex: zIndex,
+    stick: stick,
+    forcePlacement: forcePlacement,
+    offset: offset
+  }, content);
+});

package/dist/esm/ui/TableFullWidthLabel/index.js

@@ -2,17 +2,30 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { Box, Inline, xcss } from '@atlaskit/primitives';
-var tableFullWidthLabelStyles = xcss({
-  minWidth: '120px',
-  height: "var(--ds-space-300, 24px)",
+var tableFullWidthLabelWrapperStyles = xcss({
+  height: "var(--ds-space-400, 32px)",
   display: 'flex',
-  justifyContent: 'center',
+  backgroundColor: 'elevation.surface.overlay',
+  borderRadius: 'border.radius',
+  boxShadow: 'elevation.shadow.overlay',
+  lineHeight: 1,
+  boxSizing: 'border-box',
   alignItems: 'center'
 });
+var tableFullWidthLabelStyles = xcss({
+  marginLeft: 'space.100',
+  marginRight: 'space.100',
+  paddingLeft: 'space.075',
+  paddingRight: 'space.075',
+  paddingTop: 'space.050',
+  paddingBottom: 'space.050'
+});
 export var FullWidthDisplay = function FullWidthDisplay() {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/React.createElement(Box, {
+    xcss: tableFullWidthLabelWrapperStyles
+  }, /*#__PURE__*/React.createElement(Inline, {
     xcss: tableFullWidthLabelStyles
-  }, /*#__PURE__*/React.createElement(Inline, null, formatMessage(messages.fullWidthLabel)));
+  }, formatMessage(messages.fullWidthLabel)));
 };

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

@@ -9,9 +9,13 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 type TableWidthPluginState = {
     resizing: boolean;
+    tableLocalId: string;
+    tableRef: HTMLTableElement | null;
 };
 export declare const pluginKey: PluginKey<TableWidthPluginState>;
 declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, isTableScalingEnabled: boolean) => SafePlugin<{
     resizing: boolean;
+    tableLocalId: string;
+    tableRef: null;
 }>;
 export { createPlugin };

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface Props {
+    target: HTMLElement;
+    content: React.ReactNode;
+    alignX?: 'left' | 'center' | 'right';
+    alignY?: "top" | "bottom" | "start";
+    zIndex?: number;
+    forcePlacement?: boolean;
+    stick?: boolean;
+    offset?: [number, number];
+}
+export declare const FloatingToolbarLabel: React.MemoExoticComponent<(props: Props) => JSX.Element>;

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

@@ -9,9 +9,13 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 type TableWidthPluginState = {
     resizing: boolean;
+    tableLocalId: string;
+    tableRef: HTMLTableElement | null;
 };
 export declare const pluginKey: PluginKey<TableWidthPluginState>;
 declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, isTableScalingEnabled: boolean) => SafePlugin<{
     resizing: boolean;
+    tableLocalId: string;
+    tableRef: null;
 }>;
 export { createPlugin };

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface Props {
+    target: HTMLElement;
+    content: React.ReactNode;
+    alignX?: 'left' | 'center' | 'right';
+    alignY?: "top" | "bottom" | "start";
+    zIndex?: number;
+    forcePlacement?: boolean;
+    stick?: boolean;
+    offset?: [
+        number,
+        number
+    ];
+}
+export declare const FloatingToolbarLabel: React.MemoExoticComponent<(props: Props) => JSX.Element>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.12.2",
+  "version": "7.12.4",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.12.2",
     "@atlaskit/custom-steps": "^0.1.0",
-    "@atlaskit/editor-common": "^79.1.0",
+    "@atlaskit/editor-common": "^79.2.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
     "@atlaskit/editor-plugin-analytics": "^1.1.0",

package/src/nodeviews/TableComponent.tsx

@@ -384,9 +384,16 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     // Needed for undo / redo
     const isTableWidthChanged = tableNodeWidth !== this.tableNodeWidth;
     const isTableSquashed = tableRenderWidth < tableNodeWidth;
+    const isNumberColumnChanged =
+      tableNode.attrs.isNumberColumnEnabled !==
+      this.node.attrs.isNumberColumnEnabled;
 
     const maybeScale =
-      isTableSquashed || isTableWidthChanged || isTableResizedFullWidth;
+      isTableSquashed ||
+      isTableWidthChanged ||
+      isTableResizedFullWidth ||
+      isNumberColumnChanged;
+
     if (force || maybeScale) {
       const { width: containerWidthValue } = containerWidth;
       const isWidthChanged = this.containerWidth?.width !== containerWidthValue;
@@ -401,7 +408,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isColumnsDistributed ||
         isTableResizedFullWidth ||
         isTableWidthChanged ||
-        isTableDisplayModeChanged;
+        isTableDisplayModeChanged ||
+        isNumberColumnChanged;
 
       if (force || (!isResizing && shouldUpdateColgroup)) {
         const resizeState = getResizeState({
@@ -758,7 +766,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
     const shadowStyle = memoizeOne(
       (visible) =>
-        ({ visibility: visible ? 'visible' : 'hidden' } as CSSProperties),
+        ({ visibility: visible ? 'visible' : 'hidden' }) as CSSProperties,
     );
 
     /**

package/src/nodeviews/TableResizer.tsx

@@ -241,7 +241,11 @@ export const TableResizer = ({
         } = editorView;
         displayGapCursor(true);
         displayGuideline([]);
-        tr.setMeta(tableWidthPluginKey, { resizing: false });
+        tr.setMeta(tableWidthPluginKey, {
+          resizing: false,
+          tableLocalId: '',
+          tableRef: null,
+        });
         dispatch(tr);
       }
     };
@@ -255,7 +259,12 @@ export const TableResizer = ({
       state: { tr },
     } = editorView;
     displayGapCursor(false);
-    tr.setMeta(tableWidthPluginKey, { resizing: true });
+
+    tr.setMeta(tableWidthPluginKey, {
+      resizing: true,
+      tableLocalId: node.attrs.localId,
+      tableRef: tableRef,
+    });
     tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED,
     });
@@ -277,6 +286,8 @@ export const TableResizer = ({
     startMeasure,
     editorView,
     displayGapCursor,
+    node.attrs.localId,
+    tableRef,
     isTableScalingEnabled,
     containerWidth,
     displayGuideline,
@@ -374,7 +385,11 @@ export const TableResizer = ({
           ? TABLE_MAX_WIDTH
           : newWidth;
 
-      let tr = state.tr.setMeta(tableWidthPluginKey, { resizing: false });
+      let tr = state.tr.setMeta(tableWidthPluginKey, {
+        resizing: false,
+        tableLocalId: '',
+        tableRef: null,
+      });
       const frameRateSamples = endMeasure();
 
       if (frameRateSamples.length > 0) {

package/src/plugin.tsx

@@ -41,6 +41,7 @@ import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
@@ -87,6 +88,8 @@ import FloatingContextualMenu from './ui/FloatingContextualMenu';
 import FloatingDeleteButton from './ui/FloatingDeleteButton';
 import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
+import { FloatingToolbarLabel } from './ui/FloatingToolbarLabel/FloatingToolbarLabel';
+import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { createTableWithWidth } from './utils';
 
 export interface TablePluginOptions {
@@ -480,7 +483,10 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
             }) => {
               const isColumnResizing = resizingPluginState?.dragging;
               const isTableResizing = tableWidthPluginState?.resizing;
+              const resizingTableLocalId = tableWidthPluginState?.tableLocalId;
+              const resizingTableRef = tableWidthPluginState?.tableRef;
               const isResizing = isColumnResizing || isTableResizing;
+              const widthToWidest = tablePluginState?.widthToWidest;
 
               const {
                 tableNode,
@@ -593,6 +599,23 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       editorAnalyticsAPI={editorAnalyticsAPI}
                     />
                   )}
+                  {options?.isTableScalingEnabled &&
+                    isTableResizing &&
+                    widthToWidest &&
+                    resizingTableLocalId &&
+                    resizingTableRef &&
+                    widthToWidest[resizingTableLocalId] && (
+                      <FloatingToolbarLabel
+                        target={resizingTableRef}
+                        content={<FullWidthDisplay />}
+                        alignX={'center'}
+                        alignY={'bottom'}
+                        stick={true}
+                        forcePlacement={true}
+                        zIndex={akEditorFloatingPanelZIndex}
+                        offset={[0, 10]}
+                      />
+                    )}
                 </>
               );
             }}

package/src/pm-plugins/table-width.ts

@@ -33,6 +33,8 @@ type __ReplaceStep = ReplaceStep & {
 
 type TableWidthPluginState = {
   resizing: boolean;
+  tableLocalId: string;
+  tableRef: HTMLTableElement | null;
 };
 
 export const pluginKey = new PluginKey<TableWidthPluginState>(
@@ -51,15 +53,24 @@ const createPlugin = (
       init() {
         return {
           resizing: false,
+          tableLocalId: '',
+          tableRef: null,
         };
       },
       apply(tr, pluginState) {
         const meta = tr.getMeta(pluginKey);
-        if (meta && meta.resizing !== pluginState.resizing) {
-          const newState = { resizing: meta.resizing };
+        if (meta) {
+          const keys = Object.keys(meta) as Array<keyof TableWidthPluginState>;
+          const changed = keys.some((key) => {
+            return pluginState[key] !== meta[key];
+          });
+
+          if (changed) {
+            const newState = { ...pluginState, ...meta };
 
-          dispatch(pluginKey, newState);
-          return newState;
+            dispatch(pluginKey, newState);
+            return newState;
+          }
         }
 
         return pluginState;

package/src/toolbar.tsx

@@ -95,7 +95,6 @@ import type {
 } from './types';
 import { TableCssClassName } from './types';
 import { DisplayModeIcon } from './ui/icons';
-import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import {
   getMergedCellsPositions,
   getSelectedColumnIndexes,
@@ -467,62 +466,6 @@ export const getToolbarConfig =
     // We don't want to show floating toolbar while resizing the table
     const isWidthResizing = tableWidthState?.resizing;
 
-    const { widthToWidest } = pluginState;
-    const currentTableNodeLocalId = tableObject?.node?.attrs?.localId ?? '';
-
-    if (
-      options?.isTableScalingEnabled &&
-      isWidthResizing &&
-      widthToWidest &&
-      currentTableNodeLocalId &&
-      widthToWidest[currentTableNodeLocalId]
-    ) {
-      const { stickyScrollbar } = getEditorFeatureFlags();
-
-      const nodeType = state.schema.nodes.table;
-      const getDomRef = (editorView: EditorView) => {
-        let element: HTMLElement | undefined;
-        const domAtPos = editorView.domAtPos.bind(editorView);
-        const parent = findParentDomRefOfType(
-          nodeType,
-          domAtPos,
-        )(state.selection);
-        if (parent) {
-          const tableRef =
-            (parent as HTMLElement).querySelector<HTMLTableElement>('table') ||
-            undefined;
-          if (tableRef) {
-            element =
-              closestElement(
-                tableRef,
-                `.${TableCssClassName.TABLE_NODE_WRAPPER}`,
-              ) || undefined;
-          }
-        }
-        return element;
-      };
-      const fullWidthLabel = {
-        id: 'editor.table.fullWidthLabel',
-        type: 'custom',
-        fallback: [],
-        render: () => {
-          return <FullWidthDisplay key={'full-width-label'} />;
-        },
-      } as FloatingToolbarItem<Command>;
-
-      return {
-        title: 'Table floating label',
-        getDomRef,
-        nodeType,
-        key: 'full-width-label',
-        offset: [0, 18],
-        absoluteOffset: stickyScrollbar ? { top: -6 } : { top: 0 },
-        zIndex: akEditorFloatingPanelZIndex + 1, // Place the context menu slightly above the others
-        items: [fullWidthLabel],
-        scrollable: true,
-      };
-    }
-
     if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
       const nodeType = state.schema.nodes.table;
       const menu = getToolbarMenuConfig(