@atlaskit/editor-plugin-table 7.5.14 → 7.5.16

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-table
 
+## 7.5.16
+
+### Patch Changes
+
+- [#83148](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83148) [`c7e46e32cf2d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c7e46e32cf2d) - [ux] add label in floating toolbar when table resize to widest guideline
+
+## 7.5.15
+
+### Patch Changes
+
+- [#83567](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83567) [`755de34e0656`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/755de34e0656) - fix preserve table width copy paste and resizing to full width behaviour
+- Updated dependencies
+
 ## 7.5.14
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -457,15 +457,20 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         return;
       }
       var tableNodeWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
-      var shouldTableScale = tableRenderWidth < tableNodeWidth;
-      if (force || shouldTableScale) {
+      var isTableResizedFullWidth = tableNodeWidth === 1800 && this.wasResizing && !isResizing;
+      // Needed for undo / redo
+      var isTableWidthChanged = tableNodeWidth !== this.tableNodeWidth;
+      var isTableSquashed = tableRenderWidth < tableNodeWidth;
+      var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth;
+      if (force || maybeScale) {
         var _this$containerWidth;
         var containerWidthValue = containerWidth.width;
         var isWidthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.width) !== containerWidthValue;
         var wasTableResized = (0, _colgroup.hasTableBeenResized)(this.node);
-        var isTableResied = (0, _colgroup.hasTableBeenResized)(tableNode);
-        var isColumnsDistributed = wasTableResized && !isTableResied;
-        if (force || !isResizing && (isWidthChanged || isColumnsDistributed)) {
+        var isTableResized = (0, _colgroup.hasTableBeenResized)(tableNode);
+        var isColumnsDistributed = wasTableResized && !isTableResized;
+        var shouldScale = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged;
+        if (force || !isResizing && shouldScale) {
           var resizeState = (0, _utils4.getResizeState)({
             minWidth: _utils4.COLUMN_MIN_WIDTH,
             maxSize: tableRenderWidth,
@@ -482,6 +487,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           });
         }
       }
+      this.tableNodeWidth = tableNodeWidth;
+      this.wasResizing = isResizing;
       this.containerWidth = containerWidth;
     }
   }, {

package/dist/cjs/pm-plugins/table-resizing/utils/resize-state.js

@@ -51,7 +51,8 @@ var getResizeState = exports.getResizeState = function getResizeState(_ref) {
       widths: _widths,
       maxSize: maxSize,
       tableWidth: _tableWidth,
-      overflow: _overflow
+      overflow: _overflow,
+      isScaled: isTableScalingEnabled
     };
   }
   var shouldReinsertColgroup = !isTableScalingEnabled;
@@ -85,7 +86,8 @@ var getResizeState = exports.getResizeState = function getResizeState(_ref) {
     widths: widths,
     maxSize: maxSize,
     tableWidth: tableWidth,
-    overflow: overflow
+    overflow: overflow,
+    isScaled: isTableScalingEnabled
   };
 };
 

package/dist/cjs/toolbar.js

@@ -31,6 +31,7 @@ var _resizeState = require("./pm-plugins/table-resizing/utils/resize-state");
 var _tableWidth = require("./pm-plugins/table-width");
 var _transforms = require("./transforms");
 var _types = require("./types");
+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; }
@@ -307,16 +308,61 @@ 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;
-      if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
+      var isTableScalingEnabled = pluginState.isTableScalingEnabled,
+        widthToWidest = pluginState.widthToWidest;
+      if (isTableScalingEnabled && isWidthResizing && widthToWidest) {
+        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 menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
         var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
           _getPluginState2$isTa = _getPluginState2.isTableScalingEnabled,
-          isTableScalingEnabled = _getPluginState2$isTa === void 0 ? false : _getPluginState2$isTa;
+          _isTableScalingEnabled = _getPluginState2$isTa === void 0 ? false : _getPluginState2$isTa;
         var cellItems;
-        cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled);
+        cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, _isTableScalingEnabled);
         var columnSettingsItems;
-        columnSettingsItems = pluginState.isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled) : [];
+        columnSettingsItems = pluginState.isDragAndDropEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, _isTableScalingEnabled) : [];
         var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
         // Check if we need to show confirm dialog for delete button
@@ -343,10 +389,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) {
@@ -355,14 +401,14 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
           }
           return element;
         };
-        var _getEditorFeatureFlag = getEditorFeatureFlags(),
-          stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
+        var _getEditorFeatureFlag2 = getEditorFeatureFlags(),
+          _stickyScrollbar = _getEditorFeatureFlag2.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
@@ -377,7 +423,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/transforms/column-width.js

@@ -33,6 +33,10 @@ var updateColumnWidths = exports.updateColumnWidths = function updateColumnWidth
     for (var columnIndex = 0; columnIndex < map.width; columnIndex++) {
       for (var rowIndex = 0; rowIndex < map.height; rowIndex++) {
         var width = resizeState.cols[columnIndex].width;
+        if (resizeState.isScaled) {
+          // Ensure that the width is an integer if the table has been scaled
+          width = Math.floor(width);
+        }
         var mapIndex = rowIndex * map.width + columnIndex;
         var cellPos = map.map[mapIndex];
         var attrs = updatedCellsAttrs[cellPos] || _objectSpread({}, table.nodeAt(cellPos).attrs);

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullWidthDisplay = void 0;
+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)",
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var FullWidthDisplay = exports.FullWidthDisplay = function FullWidthDisplay() {
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: tableFullWidthLabelStyles
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, null, formatMessage(_messages.tableMessages.fullWidthLabel)));
+};

package/dist/es2019/nodeviews/TableComponent.js

@@ -439,17 +439,22 @@ class TableComponent extends React.Component {
       return;
     }
     const tableNodeWidth = getTableContainerWidth(tableNode);
-    const shouldTableScale = tableRenderWidth < tableNodeWidth;
-    if (force || shouldTableScale) {
+    const isTableResizedFullWidth = tableNodeWidth === 1800 && this.wasResizing && !isResizing;
+    // Needed for undo / redo
+    const isTableWidthChanged = tableNodeWidth !== this.tableNodeWidth;
+    const isTableSquashed = tableRenderWidth < tableNodeWidth;
+    const maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth;
+    if (force || maybeScale) {
       var _this$containerWidth;
       const {
         width: containerWidthValue
       } = containerWidth;
       const isWidthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.width) !== containerWidthValue;
       const wasTableResized = hasTableBeenResized(this.node);
-      const isTableResied = hasTableBeenResized(tableNode);
-      const isColumnsDistributed = wasTableResized && !isTableResied;
-      if (force || !isResizing && (isWidthChanged || isColumnsDistributed)) {
+      const isTableResized = hasTableBeenResized(tableNode);
+      const isColumnsDistributed = wasTableResized && !isTableResized;
+      const shouldScale = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged;
+      if (force || !isResizing && shouldScale) {
         const resizeState = getResizeState({
           minWidth: COLUMN_MIN_WIDTH,
           maxSize: tableRenderWidth,
@@ -466,6 +471,8 @@ class TableComponent extends React.Component {
         });
       }
     }
+    this.tableNodeWidth = tableNodeWidth;
+    this.wasResizing = isResizing;
     this.containerWidth = containerWidth;
   }
   componentDidUpdate(_, prevState) {

package/dist/es2019/pm-plugins/table-resizing/utils/resize-state.js

@@ -35,7 +35,8 @@ export const getResizeState = ({
       widths,
       maxSize,
       tableWidth,
-      overflow
+      overflow,
+      isScaled: isTableScalingEnabled
     };
   }
   const shouldReinsertColgroup = !isTableScalingEnabled;
@@ -65,7 +66,8 @@ export const getResizeState = ({
     widths,
     maxSize,
     tableWidth,
-    overflow
+    overflow,
+    isScaled: isTableScalingEnabled
   };
 };
 

package/dist/es2019/toolbar.js

@@ -23,6 +23,7 @@ import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizin
 import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { canMergeCells } from './transforms';
 import { TableCssClassName } from './types';
+import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from './utils';
 export const getToolbarMenuConfig = (config, state, {
   formatMessage
@@ -293,6 +294,54 @@ 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 {
+    isTableScalingEnabled,
+    widthToWidest
+  } = pluginState;
+  if (isTableScalingEnabled && isWidthResizing && widthToWidest) {
+    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/transforms/column-width.js

@@ -22,9 +22,13 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
   // calculating new attributes for each cell
   for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
     for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-      const {
+      let {
         width
       } = resizeState.cols[columnIndex];
+      if (resizeState.isScaled) {
+        // Ensure that the width is an integer if the table has been scaled
+        width = Math.floor(width);
+      }
       const mapIndex = rowIndex * map.width + columnIndex;
       const cellPos = map.map[mapIndex];
       const attrs = updatedCellsAttrs[cellPos] || {

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

@@ -0,0 +1,19 @@
+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)",
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+export const FullWidthDisplay = () => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: tableFullWidthLabelStyles
+  }, /*#__PURE__*/React.createElement(Inline, null, formatMessage(messages.fullWidthLabel)));
+};

package/dist/esm/nodeviews/TableComponent.js

@@ -450,15 +450,20 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         return;
       }
       var tableNodeWidth = getTableContainerWidth(tableNode);
-      var shouldTableScale = tableRenderWidth < tableNodeWidth;
-      if (force || shouldTableScale) {
+      var isTableResizedFullWidth = tableNodeWidth === 1800 && this.wasResizing && !isResizing;
+      // Needed for undo / redo
+      var isTableWidthChanged = tableNodeWidth !== this.tableNodeWidth;
+      var isTableSquashed = tableRenderWidth < tableNodeWidth;
+      var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth;
+      if (force || maybeScale) {
         var _this$containerWidth;
         var containerWidthValue = containerWidth.width;
         var isWidthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.width) !== containerWidthValue;
         var wasTableResized = hasTableBeenResized(this.node);
-        var isTableResied = hasTableBeenResized(tableNode);
-        var isColumnsDistributed = wasTableResized && !isTableResied;
-        if (force || !isResizing && (isWidthChanged || isColumnsDistributed)) {
+        var isTableResized = hasTableBeenResized(tableNode);
+        var isColumnsDistributed = wasTableResized && !isTableResized;
+        var shouldScale = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged;
+        if (force || !isResizing && shouldScale) {
           var resizeState = getResizeState({
             minWidth: COLUMN_MIN_WIDTH,
             maxSize: tableRenderWidth,
@@ -475,6 +480,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           });
         }
       }
+      this.tableNodeWidth = tableNodeWidth;
+      this.wasResizing = isResizing;
       this.containerWidth = containerWidth;
     }
   }, {

package/dist/esm/pm-plugins/table-resizing/utils/resize-state.js

@@ -44,7 +44,8 @@ export var getResizeState = function getResizeState(_ref) {
       widths: _widths,
       maxSize: maxSize,
       tableWidth: _tableWidth,
-      overflow: _overflow
+      overflow: _overflow,
+      isScaled: isTableScalingEnabled
     };
   }
   var shouldReinsertColgroup = !isTableScalingEnabled;
@@ -78,7 +79,8 @@ export var getResizeState = function getResizeState(_ref) {
     widths: widths,
     maxSize: maxSize,
     tableWidth: tableWidth,
-    overflow: overflow
+    overflow: overflow,
+    isScaled: isTableScalingEnabled
   };
 };
 

package/dist/esm/toolbar.js

@@ -24,6 +24,7 @@ import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizin
 import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { canMergeCells } from './transforms';
 import { TableCssClassName } from './types';
+import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from './utils';
 export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
   var formatMessage = _ref.formatMessage;
@@ -296,16 +297,61 @@ 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;
-      if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
+      var isTableScalingEnabled = pluginState.isTableScalingEnabled,
+        widthToWidest = pluginState.widthToWidest;
+      if (isTableScalingEnabled && isWidthResizing && widthToWidest) {
+        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 menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
         var _getPluginState2 = getPluginState(state),
           _getPluginState2$isTa = _getPluginState2.isTableScalingEnabled,
-          isTableScalingEnabled = _getPluginState2$isTa === void 0 ? false : _getPluginState2$isTa;
+          _isTableScalingEnabled = _getPluginState2$isTa === void 0 ? false : _getPluginState2$isTa;
         var cellItems;
-        cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled);
+        cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, _isTableScalingEnabled);
         var columnSettingsItems;
-        columnSettingsItems = pluginState.isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled) : [];
+        columnSettingsItems = pluginState.isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, _isTableScalingEnabled) : [];
         var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
         // Check if we need to show confirm dialog for delete button
@@ -332,10 +378,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) {
@@ -344,14 +390,14 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
           }
           return element;
         };
-        var _getEditorFeatureFlag = getEditorFeatureFlags(),
-          stickyScrollbar = _getEditorFeatureFlag.stickyScrollbar;
+        var _getEditorFeatureFlag2 = getEditorFeatureFlags(),
+          _stickyScrollbar = _getEditorFeatureFlag2.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
@@ -366,7 +412,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/transforms/column-width.js

@@ -27,6 +27,10 @@ export var updateColumnWidths = function updateColumnWidths(resizeState, table,
     for (var columnIndex = 0; columnIndex < map.width; columnIndex++) {
       for (var rowIndex = 0; rowIndex < map.height; rowIndex++) {
         var width = resizeState.cols[columnIndex].width;
+        if (resizeState.isScaled) {
+          // Ensure that the width is an integer if the table has been scaled
+          width = Math.floor(width);
+        }
         var mapIndex = rowIndex * map.width + columnIndex;
         var cellPos = map.map[mapIndex];
         var attrs = updatedCellsAttrs[cellPos] || _objectSpread({}, table.nodeAt(cellPos).attrs);

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

@@ -0,0 +1,18 @@
+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)",
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+export var FullWidthDisplay = function FullWidthDisplay() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: tableFullWidthLabelStyles
+  }, /*#__PURE__*/React.createElement(Inline, null, formatMessage(messages.fullWidthLabel)));
+};

package/dist/types/nodeviews/TableComponent.d.ts

@@ -47,6 +47,8 @@ declare class TableComponent extends React.Component<ComponentProps, TableState>
     private table?;
     private node;
     private containerWidth?;
+    private wasResizing?;
+    private tableNodeWidth?;
     private layoutSize?;
     private overflowShadowsObserver?;
     private stickyScrollbar?;

package/dist/types/pm-plugins/table-resizing/utils/types.d.ts

@@ -6,6 +6,7 @@ export interface ResizeState {
     maxSize: number;
     overflow: boolean;
     tableWidth: number;
+    isScaled?: boolean;
 }
 export interface ResizeStateWithAnalytics {
     resizeState: ResizeState;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FullWidthDisplay: () => JSX.Element;

package/dist/types-ts4.5/nodeviews/TableComponent.d.ts

@@ -47,6 +47,8 @@ declare class TableComponent extends React.Component<ComponentProps, TableState>
     private table?;
     private node;
     private containerWidth?;
+    private wasResizing?;
+    private tableNodeWidth?;
     private layoutSize?;
     private overflowShadowsObserver?;
     private stickyScrollbar?;

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

@@ -6,6 +6,7 @@ export interface ResizeState {
     maxSize: number;
     overflow: boolean;
     tableWidth: number;
+    isScaled?: boolean;
 }
 export interface ResizeStateWithAnalytics {
     resizeState: ResizeState;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FullWidthDisplay: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.5.14",
+  "version": "7.5.16",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.7.0",
     "@atlaskit/custom-steps": "^0.0.16",
-    "@atlaskit/editor-common": "^78.18.0",
+    "@atlaskit/editor-common": "^78.19.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-content-insertion": "^1.0.0",
@@ -43,7 +43,7 @@
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/menu": "^2.1.5",
     "@atlaskit/platform-feature-flags": "^0.2.1",
-    "@atlaskit/pragmatic-drag-and-drop": "^1.0.0",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.0.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
     "@atlaskit/primitives": "^5.1.0",

package/src/nodeviews/TableComponent.tsx

@@ -140,6 +140,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   private table?: HTMLTableElement | null;
   private node: PmNode;
   private containerWidth?: EditorContainerWidth;
+  private wasResizing?: boolean;
+  private tableNodeWidth?: number;
   private layoutSize?: number;
   private overflowShadowsObserver?: OverflowShadowsObserver;
   private stickyScrollbar?: TableStickyScrollbar;
@@ -338,16 +340,26 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     }
 
     const tableNodeWidth = getTableContainerWidth(tableNode);
-    const shouldTableScale = tableRenderWidth < tableNodeWidth;
-    if (force || shouldTableScale) {
+    const isTableResizedFullWidth =
+      tableNodeWidth === 1800 && this.wasResizing && !isResizing;
+    // Needed for undo / redo
+    const isTableWidthChanged = tableNodeWidth !== this.tableNodeWidth;
+    const isTableSquashed = tableRenderWidth < tableNodeWidth;
+
+    const maybeScale =
+      isTableSquashed || isTableWidthChanged || isTableResizedFullWidth;
+    if (force || maybeScale) {
       const { width: containerWidthValue } = containerWidth;
       const isWidthChanged = this.containerWidth?.width !== containerWidthValue;
-
       const wasTableResized = hasTableBeenResized(this.node);
-      const isTableResied = hasTableBeenResized(tableNode);
-      const isColumnsDistributed = wasTableResized && !isTableResied;
-
-      if (force || (!isResizing && (isWidthChanged || isColumnsDistributed))) {
+      const isTableResized = hasTableBeenResized(tableNode);
+      const isColumnsDistributed = wasTableResized && !isTableResized;
+      const shouldScale =
+        isWidthChanged ||
+        isColumnsDistributed ||
+        isTableResizedFullWidth ||
+        isTableWidthChanged;
+      if (force || (!isResizing && shouldScale)) {
         const resizeState = getResizeState({
           minWidth: COLUMN_MIN_WIDTH,
           maxSize: tableRenderWidth,
@@ -364,6 +376,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         });
       }
     }
+    this.tableNodeWidth = tableNodeWidth;
+    this.wasResizing = isResizing;
     this.containerWidth = containerWidth;
   }
 

package/src/pm-plugins/table-resizing/utils/resize-state.ts

@@ -63,6 +63,7 @@ export const getResizeState = ({
       maxSize,
       tableWidth,
       overflow,
+      isScaled: isTableScalingEnabled,
     };
   }
 
@@ -101,6 +102,7 @@ export const getResizeState = ({
     maxSize,
     tableWidth,
     overflow,
+    isScaled: isTableScalingEnabled,
   };
 };
 

package/src/pm-plugins/table-resizing/utils/types.ts

@@ -8,6 +8,7 @@ export interface ResizeState {
   maxSize: number;
   overflow: boolean;
   tableWidth: number;
+  isScaled?: boolean;
 }
 export interface ResizeStateWithAnalytics {
   resizeState: ResizeState;

package/src/toolbar.tsx

@@ -90,6 +90,7 @@ import type {
   ToolbarMenuState,
 } from './types';
 import { TableCssClassName } from './types';
+import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import {
   getMergedCellsPositions,
   getSelectedColumnIndexes,
@@ -452,6 +453,55 @@ export const getToolbarConfig =
     // We don't want to show floating toolbar while resizing the table
     const isWidthResizing = tableWidthState?.resizing;
 
+    const { isTableScalingEnabled, widthToWidest } = pluginState;
+
+    if (isTableScalingEnabled && isWidthResizing && widthToWidest) {
+      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/transforms/column-width.ts

@@ -35,7 +35,11 @@ export const updateColumnWidths =
     // calculating new attributes for each cell
     for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
       for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-        const { width } = resizeState.cols[columnIndex];
+        let { width } = resizeState.cols[columnIndex];
+        if (resizeState.isScaled) {
+          // Ensure that the width is an integer if the table has been scaled
+          width = Math.floor(width);
+        }
         const mapIndex = rowIndex * map.width + columnIndex;
         const cellPos = map.map[mapIndex];
         const attrs = updatedCellsAttrs[cellPos] || {

package/src/ui/TableFullWidthLabel/index.tsx

@@ -0,0 +1,24 @@
+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';
+import { token } from '@atlaskit/tokens';
+
+const tableFullWidthLabelStyles = xcss({
+  minWidth: '120px',
+  height: token('space.300', '24px'),
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const FullWidthDisplay = () => {
+  const { formatMessage } = useIntl();
+  return (
+    <Box xcss={tableFullWidthLabelStyles}>
+      <Inline>{formatMessage(messages.fullWidthLabel)}</Inline>
+    </Box>
+  );
+};