@atlaskit/editor-plugin-table 7.12.2 → 7.12.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 7.12.3
+
+### Patch Changes
+
+-   [#97034](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97034)
+    [`96595e52fb33`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/96595e52fb33) -
+    ED-22627: Fixed full-width label no show when selection outside table
+
 ## 7.12.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableResizer.js

@@ -149,7 +149,9 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
         displayGapCursor(true);
         displayGuideline([]);
         _tr.setMeta(_tableWidth.pluginKey, {
-          resizing: false
+          resizing: false,
+          tableLocalId: '',
+          tableRef: null
         });
         dispatch(_tr);
       }
@@ -162,7 +164,9 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       tr = editorView.state.tr;
     displayGapCursor(false);
     tr.setMeta(_tableWidth.pluginKey, {
-      resizing: true
+      resizing: true,
+      tableLocalId: node.attrs.localId,
+      tableRef: tableRef
     });
     tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
       name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
@@ -173,7 +177,7 @@ var TableResizer = exports.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 = (0, _react.useCallback)(function (originalState, delta) {
     var _node$attrs$localId, _node$attrs;
     countFrames();
@@ -222,7 +226,9 @@ var TableResizer = exports.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] ? _utils3.TABLE_MAX_WIDTH : newWidth;
     var tr = state.tr.setMeta(_tableWidth.pluginKey, {
-      resizing: false
+      resizing: false,
+      tableLocalId: '',
+      tableRef: null
     });
     var frameRateSamples = endMeasure();
     if (frameRateSamples.length > 0) {

package/dist/cjs/plugin.js

@@ -15,6 +15,7 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _utils = require("@atlaskit/editor-common/utils");
 var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _pmPlugins = require("@atlaskit/editor-tables/pm-plugins");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _insert = require("./commands/insert");
@@ -41,6 +42,8 @@ var _FloatingContextualMenu = _interopRequireDefault(require("./ui/FloatingConte
 var _FloatingDeleteButton = _interopRequireDefault(require("./ui/FloatingDeleteButton"));
 var _FloatingDragMenu = _interopRequireDefault(require("./ui/FloatingDragMenu"));
 var _FloatingInsertButton = _interopRequireDefault(require("./ui/FloatingInsertButton"));
+var _FloatingToolbarLabel = require("./ui/FloatingToolbarLabel/FloatingToolbarLabel");
+var _TableFullWidthLabel = require("./ui/TableFullWidthLabel");
 var _utils2 = require("./utils");
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
@@ -319,7 +322,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,
@@ -397,6 +403,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.default.createElement(_FloatingToolbarLabel.FloatingToolbarLabel, {
+            target: resizingTableRef,
+            content: /*#__PURE__*/_react.default.createElement(_TableFullWidthLabel.FullWidthDisplay, null),
+            alignX: 'center',
+            alignY: 'bottom',
+            stick: true,
+            forcePlacement: true,
+            zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
+            offset: [0, 10]
           }));
         }
       }));

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.pluginKey = exports.createPlugin = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _steps = require("@atlaskit/adf-schema/steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
@@ -16,13 +16,12 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _utils2 = require("./table-resizing/utils");
 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) { (0, _defineProperty2.default)(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; } /**
  * A plugin for handle table custom widths
  * Has login to scan the document, add width value to table's width attribute when necessary
  * Also holds resizing state to hide / show table controls
  */
-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) { (0, _defineProperty2.default)(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; }
 var pluginKey = exports.pluginKey = new _state.PluginKey('tableWidthPlugin');
 var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled) {
   return new _safePlugin.SafePlugin({
@@ -30,17 +29,23 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
     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/cjs/toolbar.js

@@ -33,7 +33,6 @@ var _tableWidth = require("./pm-plugins/table-width");
 var _transforms = require("./transforms");
 var _types = require("./types");
 var _icons = require("./ui/icons");
-var _TableFullWidthLabel = require("./ui/TableFullWidthLabel");
 var _utils4 = require("./utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -316,7 +315,6 @@ var getClosestSelectionOrTableRect = exports.getClosestSelectionOrTableRect = fu
 var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options) {
   return function (config) {
     return function (state, intl) {
-      var _tableObject$node$att, _tableObject$node;
       var tableObject = (0, _utils3.findTable)(state.selection);
       var pluginState = (0, _pluginFactory.getPluginState)(state);
       var resizeState = _tableResizing.pluginKey.getState(state);
@@ -324,53 +322,8 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
 
       // 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 = (0, _utils2.findParentDomRefOfType)(nodeType, domAtPos)(state.selection);
-          if (parent) {
-            var tableRef = parent.querySelector('table') || undefined;
-            if (tableRef) {
-              element = (0, _utils.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
-            }
-          }
-          return element;
-        };
-        var fullWidthLabel = {
-          id: 'editor.table.fullWidthLabel',
-          type: 'custom',
-          fallback: [],
-          render: function render() {
-            return (0, _react.jsx)(_TableFullWidthLabel.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: _editorSharedStyles.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);
@@ -402,10 +355,10 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
             };
           };
         }
-        var _getDomRef = function _getDomRef(editorView) {
+        var getDomRef = function getDomRef(editorView) {
           var element;
           var domAtPos = editorView.domAtPos.bind(editorView);
-          var parent = (0, _utils2.findParentDomRefOfType)(_nodeType, domAtPos)(state.selection);
+          var parent = (0, _utils2.findParentDomRefOfType)(nodeType, domAtPos)(state.selection);
           if (parent) {
             var tableRef = parent.querySelector('table') || undefined;
             if (tableRef) {
@@ -414,14 +367,14 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
           }
           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
@@ -436,7 +389,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
             items: [{
               state: state,
               formatMessage: intl.formatMessage,
-              nodeType: _nodeType,
+              nodeType: nodeType,
               onMouseEnter: (0, _commands.hoverTable)(false, true),
               onMouseLeave: (0, _commands.clearHoverSelection)(),
               onFocus: (0, _commands.hoverTable)(false, true),

package/dist/cjs/ui/FloatingToolbarLabel/FloatingToolbarLabel.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingToolbarLabel = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ui = require("@atlaskit/editor-common/ui");
+var FloatingToolbarLabel = exports.FloatingToolbarLabel = /*#__PURE__*/_react.default.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.default.createElement(_ui.Popup, {
+    target: target,
+    alignX: alignX,
+    alignY: alignY,
+    zIndex: zIndex,
+    stick: stick,
+    forcePlacement: forcePlacement,
+    offset: offset
+  }, content);
+});

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

@@ -9,17 +9,30 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _primitives = require("@atlaskit/primitives");
-var tableFullWidthLabelStyles = (0, _primitives.xcss)({
-  minWidth: '120px',
-  height: "var(--ds-space-300, 24px)",
+var tableFullWidthLabelWrapperStyles = (0, _primitives.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 = (0, _primitives.xcss)({
+  marginLeft: 'space.100',
+  marginRight: 'space.100',
+  paddingLeft: 'space.075',
+  paddingRight: 'space.075',
+  paddingTop: 'space.050',
+  paddingBottom: 'space.050'
+});
 var FullWidthDisplay = exports.FullWidthDisplay = function FullWidthDisplay() {
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: tableFullWidthLabelWrapperStyles
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     xcss: tableFullWidthLabelStyles
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, null, formatMessage(_messages.tableMessages.fullWidthLabel)));
+  }, formatMessage(_messages.tableMessages.fullWidthLabel)));
 };

package/dist/es2019/nodeviews/TableResizer.js

@@ -140,7 +140,9 @@ export const TableResizer = ({
         displayGapCursor(true);
         displayGuideline([]);
         tr.setMeta(tableWidthPluginKey, {
-          resizing: false
+          resizing: false,
+          tableLocalId: '',
+          tableRef: null
         });
         dispatch(tr);
       }
@@ -157,7 +159,9 @@ export const TableResizer = ({
     } = editorView;
     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
@@ -168,7 +172,7 @@ export const TableResizer = ({
     if (onResizeStart) {
       onResizeStart();
     }
-  }, [startMeasure, editorView, displayGapCursor, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
+  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
   const handleResize = useCallback((originalState, delta) => {
     var _node$attrs$localId, _node$attrs;
     countFrames();
@@ -219,7 +223,9 @@ export const TableResizer = ({
     const currentTableNodeLocalId = (_node$attrs$localId2 = node === null || node === void 0 ? 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;
     let tr = state.tr.setMeta(tableWidthPluginKey, {
-      resizing: false
+      resizing: false,
+      tableLocalId: '',
+      tableRef: null
     });
     const frameRateSamples = endMeasure();
     if (frameRateSamples.length > 0) {

package/dist/es2019/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';
 const defaultGetEditorFeatureFlags = () => ({});
 
@@ -312,7 +315,10 @@ const tablesPlugin = ({
         }) => {
           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;
+          const resizingTableRef = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableRef;
           const isResizing = isColumnResizing || isTableResizing;
+          const widthToWidest = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.widthToWidest;
           const {
             tableNode,
             tablePos,
@@ -393,6 +399,15 @@ const tablesPlugin = ({
             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/es2019/pm-plugins/table-width.js

@@ -19,17 +19,26 @@ const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTabl
     state: {
       init() {
         return {
-          resizing: false
+          resizing: false,
+          tableLocalId: '',
+          tableRef: null
         };
       },
       apply(tr, pluginState) {
         const meta = tr.getMeta(pluginKey);
-        if (meta && meta.resizing !== pluginState.resizing) {
-          const newState = {
-            resizing: meta.resizing
-          };
-          dispatch(pluginKey, newState);
-          return newState;
+        if (meta) {
+          const keys = Object.keys(meta);
+          const changed = keys.some(key => {
+            return pluginState[key] !== meta[key];
+          });
+          if (changed) {
+            const newState = {
+              ...pluginState,
+              ...meta
+            };
+            dispatch(pluginKey, newState);
+            return newState;
+          }
         }
         return pluginState;
       }

package/dist/es2019/toolbar.js

@@ -25,7 +25,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 const getToolbarMenuConfig = (config, state, {
   formatMessage
@@ -302,7 +301,6 @@ export const getClosestSelectionOrTableRect = state => {
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : tableRect;
 };
 export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options) => config => (state, intl) => {
-  var _tableObject$node$att, _tableObject$node, _tableObject$node$att2;
   const tableObject = findTable(state.selection);
   const pluginState = getPluginState(state);
   const resizeState = tableResizingPluginKey.getState(state);
@@ -310,54 +308,6 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
 
   // We don't want to show floating toolbar while resizing the table
   const isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
-  const {
-    widthToWidest
-  } = pluginState;
-  const currentTableNodeLocalId = (_tableObject$node$att = tableObject === null || tableObject === void 0 ? void 0 : (_tableObject$node = tableObject.node) === null || _tableObject$node === void 0 ? void 0 : (_tableObject$node$att2 = _tableObject$node.attrs) === null || _tableObject$node$att2 === void 0 ? void 0 : _tableObject$node$att2.localId) !== null && _tableObject$node$att !== void 0 ? _tableObject$node$att : '';
-  if (options !== null && options !== void 0 && options.isTableScalingEnabled && isWidthResizing && widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId]) {
-    const {
-      stickyScrollbar
-    } = getEditorFeatureFlags();
-    const nodeType = state.schema.nodes.table;
-    const getDomRef = editorView => {
-      let element;
-      const domAtPos = editorView.domAtPos.bind(editorView);
-      const parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
-      if (parent) {
-        const tableRef = parent.querySelector('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 jsx(FullWidthDisplay, {
-          key: 'full-width-label'
-        });
-      }
-    };
-    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(config, pluginState, intl, editorAnalyticsAPI);

package/dist/es2019/ui/FloatingToolbarLabel/FloatingToolbarLabel.js

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

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

@@ -2,18 +2,31 @@ 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';
-const tableFullWidthLabelStyles = xcss({
-  minWidth: '120px',
-  height: "var(--ds-space-300, 24px)",
+const 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'
 });
+const tableFullWidthLabelStyles = xcss({
+  marginLeft: 'space.100',
+  marginRight: 'space.100',
+  paddingLeft: 'space.075',
+  paddingRight: 'space.075',
+  paddingTop: 'space.050',
+  paddingBottom: 'space.050'
+});
 export const FullWidthDisplay = () => {
   const {
     formatMessage
   } = useIntl();
   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/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.3",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

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(

package/src/ui/FloatingToolbarLabel/FloatingToolbarLabel.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { Popup } from '@atlaskit/editor-common/ui';
+
+
+
+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 const FloatingToolbarLabel = React.memo(
+  (props: Props ) => {
+    const {target,content, alignX, alignY, zIndex, forcePlacement, stick, offset} = props;
+    return (
+      <Popup
+        target={target}
+        alignX={alignX}
+        alignY={alignY}
+        zIndex={zIndex}
+        stick={stick}
+        forcePlacement={forcePlacement}
+        offset={offset}
+      >
+        {content}
+      </Popup>
+    );
+  },
+);

package/src/ui/TableFullWidthLabel/index.tsx

@@ -6,19 +6,31 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { Box, Inline, xcss } from '@atlaskit/primitives';
 import { token } from '@atlaskit/tokens';
 
-const tableFullWidthLabelStyles = xcss({
-  minWidth: '120px',
-  height: token('space.300', '24px'),
+const tableFullWidthLabelWrapperStyles = xcss({
+  height: token('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',
 });
 
+const tableFullWidthLabelStyles = xcss({
+  marginLeft: 'space.100',
+  marginRight: 'space.100',
+  paddingLeft: 'space.075',
+  paddingRight: 'space.075',
+  paddingTop: 'space.050',
+  paddingBottom: 'space.050',
+});
+
 export const FullWidthDisplay = () => {
   const { formatMessage } = useIntl();
   return (
-    <Box xcss={tableFullWidthLabelStyles}>
-      <Inline>{formatMessage(messages.fullWidthLabel)}</Inline>
-    </Box>
+      <Box xcss={tableFullWidthLabelWrapperStyles}>
+        <Inline xcss={tableFullWidthLabelStyles}>{formatMessage(messages.fullWidthLabel)}</Inline>
+      </Box>
   );
 };