@atlaskit/editor-plugin-table 7.12.2 → 7.12.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-table
 
+## 7.12.4
+
+### Patch Changes
+
+-   [#98128](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98128)
+    [`befad90f2a13`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/befad90f2a13) -
+    Visually scale table when number column is enabled
+-   Updated dependencies
+
+## 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/TableComponent.js

@@ -474,7 +474,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;
@@ -483,7 +484,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         var isTableResized = (0, _colgroup.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 = (0, _utils4.getResizeState)({

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/TableComponent.js

@@ -457,7 +457,8 @@ class TableComponent extends React.Component {
     // Needed for undo / redo
     const isTableWidthChanged = tableNodeWidth !== this.tableNodeWidth;
     const isTableSquashed = tableRenderWidth < tableNodeWidth;
-    const maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth;
+    const isNumberColumnChanged = tableNode.attrs.isNumberColumnEnabled !== this.node.attrs.isNumberColumnEnabled;
+    const maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth || isNumberColumnChanged;
     if (force || maybeScale) {
       var _this$containerWidth;
       const {
@@ -468,7 +469,7 @@ class TableComponent extends React.Component {
       const isTableResized = hasTableBeenResized(tableNode);
       const isColumnsDistributed = wasTableResized && !isTableResized;
       const isTableDisplayModeChanged = this.node.attrs.displayMode !== tableNode.attrs.displayMode;
-      const shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged;
+      const shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged || isNumberColumnChanged;
       if (force || !isResizing && shouldUpdateColgroup) {
         var _this$props$options, _this$props$options2;
         const resizeState = getResizeState({

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)));
 };