@atlaskit/editor-plugin-table 1.5.5 → 1.6.0

package/dist/esm/plugins/table/index.js

@@ -232,6 +232,17 @@ var tablesPlugin = function tablesPlugin(options, api) {
             tableWrapperTarget = _ref10.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
+          var LayoutContent = getBooleanFF('platform.editor.custom-table-width') ? null : isLayoutSupported(state) && options && options.breakoutEnabled ? /*#__PURE__*/React.createElement(LayoutButton, {
+            editorView: editorView,
+            mountPoint: popupsMountPoint,
+            boundariesElement: popupsBoundariesElement,
+            scrollableElement: popupsScrollableElement,
+            targetRef: tableWrapperTarget,
+            layout: layout,
+            isResizing: !!resizingPluginState && !!resizingPluginState.dragging,
+            stickyHeader: stickyHeader,
+            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI
+          }) : null;
           return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && tableRef && !isDragging && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
             editorView: editorView,
@@ -278,17 +289,7 @@ var tablesPlugin = function tablesPlugin(options, api) {
             stickyHeaders: stickyHeader,
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
             editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI
-          }), isLayoutSupported(state) && options && options.breakoutEnabled && /*#__PURE__*/React.createElement(LayoutButton, {
-            editorView: editorView,
-            mountPoint: popupsMountPoint,
-            boundariesElement: popupsBoundariesElement,
-            scrollableElement: popupsScrollableElement,
-            targetRef: tableWrapperTarget,
-            layout: layout,
-            isResizing: !!resizingPluginState && !!resizingPluginState.dragging,
-            stickyHeader: stickyHeader,
-            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI
-          }));
+          }), LayoutContent);
         }
       }));
     },

package/dist/esm/plugins/table/nodeviews/TableComponent.js

@@ -14,17 +14,14 @@ import classnames from 'classnames';
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
 import rafSchedule from 'raf-schd';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { calcTableWidth, tableMarginSides } from '@atlaskit/editor-common/styles';
+import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorMobileBreakoutPoint, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
-import { parsePx } from '@atlaskit/editor-common/utils';
 import { autoSizeTable, clearHoverSelection } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
-import { scaleTable } from '../pm-plugins/table-resizing';
-import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode } from '../pm-plugins/table-resizing/utils';
+import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode, scaleTable } from '../pm-plugins/table-resizing/utils';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import TableFloatingControls from '../ui/TableFloatingControls';
@@ -32,6 +29,7 @@ import { containsHeaderRow, tablesHaveDifferentColumnWidths, tablesHaveDifferent
 import { updateOverflowShadows } from './update-overflow-shadows';
 import memoizeOne from 'memoize-one';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
+import { TableContainer } from './TableContainer';
 var isIE11 = browser.ie_version === 11;
 var NOOP = function NOOP() {
   return undefined;
@@ -46,7 +44,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     _this = _super.call(this, props);
     _defineProperty(_assertThisInitialized(_this), "state", (_defineProperty2 = {
       scroll: 0,
-      tableContainerWidth: 'inherit',
       parentWidth: undefined,
       isLoading: true
     }, _defineProperty(_defineProperty2, ShadowEvent.SHOW_BEFORE_SHADOW, false), _defineProperty(_defineProperty2, ShadowEvent.SHOW_AFTER_SHADOW, false), _defineProperty2));
@@ -84,18 +81,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "prevTableState", null);
-    _defineProperty(_assertThisInitialized(_this), "getMarginLeft", function (tableContainerCssWidth) {
-      var containerWidth = _this.props.containerWidth;
-      var lineLength = containerWidth.lineLength;
-      var marginLeft;
-      if (tableContainerCssWidth !== 'inherit' && lineLength) {
-        var _containerWidth2 = parsePx(tableContainerCssWidth);
-        if (_containerWidth2) {
-          marginLeft = (lineLength - _containerWidth2) / 2;
-        }
-      }
-      return marginLeft;
-    });
     _defineProperty(_assertThisInitialized(_this), "handleScroll", function (event) {
       if (!_this.wrapper || event.target !== _this.wrapper) {
         return;
@@ -152,7 +137,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
         _this.updateParentWidth(parentWidth);
       }
-      _this.updateTableContainerWidth();
       _this.node = node;
       _this.containerWidth = containerWidth;
       _this.layoutSize = layoutSize;
@@ -174,13 +158,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var domAtPos = view.domAtPos.bind(view);
       var width = containerWidth.width;
       _this.scaleTableDebounced.cancel();
-      scaleTable(_this.table, _objectSpread(_objectSpread({}, scaleOptions), {}, {
+      var tr = scaleTable(_this.table, _objectSpread(_objectSpread({}, scaleOptions), {}, {
         node: node,
         prevNode: _this.node || node,
         start: pos + 1,
         containerWidth: width,
         previousContainerWidth: _this.containerWidth.width || width
-      }, options), domAtPos)(state, dispatch);
+      }, options), domAtPos)(state.tr);
+      dispatch(tr);
     });
     _defineProperty(_assertThisInitialized(_this), "handleAutoSize", function () {
       if (_this.table) {
@@ -218,36 +203,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         parentWidth: parentWidth
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "updateTableContainerWidth", function () {
+    _defineProperty(_assertThisInitialized(_this), "getParentNodeWidth", function () {
       var _this$props5 = _this.props,
-        getNode = _this$props5.getNode,
+        getPos = _this$props5.getPos,
         containerWidth = _this$props5.containerWidth,
-        options = _this$props5.options;
-      var node = getNode();
-      if (options && options.isBreakoutEnabled === false) {
-        return;
-      }
-      var tableContainerWidth = calcTableWidth(node.attrs.layout, containerWidth.width);
-      if (_this.state.tableContainerWidth === tableContainerWidth) {
-        return null;
-      }
-      _this.setState(function (prevState) {
-        if (options && options.isBreakoutEnabled === false && prevState.tableContainerWidth !== 'inherit') {
-          return {
-            tableContainerWidth: 'inherit'
-          };
-        }
-        return {
-          tableContainerWidth: tableContainerWidth
-        };
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "getParentNodeWidth", function () {
-      var _this$props6 = _this.props,
-        getPos = _this$props6.getPos,
-        containerWidth = _this$props6.containerWidth,
-        options = _this$props6.options,
-        state = _this$props6.view.state;
+        options = _this$props5.options,
+        state = _this$props5.view.state;
       var pos = getPos();
       if (!isValidPosition(pos, state)) {
         return;
@@ -305,9 +266,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   _createClass(TableComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props7 = this.props,
-        allowColumnResizing = _this$props7.allowColumnResizing,
-        eventDispatcher = _this$props7.eventDispatcher;
+      var _this$props6 = this.props,
+        allowColumnResizing = _this$props6.allowColumnResizing,
+        eventDispatcher = _this$props6.eventDispatcher;
       if (allowColumnResizing && this.wrapper && !isIE11) {
         this.wrapper.addEventListener('scroll', this.handleScrollDebounced);
       }
@@ -317,7 +278,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
          * Instead we use the resize event to only trigger updates when necessary.
          */
         window.addEventListener('resize', this.handleWindowResizeDebounced);
-        this.updateTableContainerWidth();
         this.handleTableResizingDebounced();
       }
       var currentStickyState = stickyHeadersPluginKey.getState(this.props.view.state);
@@ -348,11 +308,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$props8 = this.props,
-        view = _this$props8.view,
-        getNode = _this$props8.getNode,
-        isMediaFullscreen = _this$props8.isMediaFullscreen,
-        allowColumnResizing = _this$props8.allowColumnResizing;
+      var _this$props7 = this.props,
+        view = _this$props7.view,
+        getNode = _this$props7.getNode,
+        isMediaFullscreen = _this$props7.isMediaFullscreen,
+        allowColumnResizing = _this$props7.allowColumnResizing;
       var _getPluginState = getPluginState(view.state),
         isInDanger = _getPluginState.isInDanger;
       var table = findTable(view.state.selection);
@@ -408,20 +368,21 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _classnames,
         _this2 = this;
-      var _this$props9 = this.props,
-        view = _this$props9.view,
-        getNode = _this$props9.getNode,
-        tableResizingPluginState = _this$props9.tableResizingPluginState,
-        _this$props9$allowCon = _this$props9.allowControls,
-        allowControls = _this$props9$allowCon === void 0 ? true : _this$props9$allowCon,
-        isHeaderRowEnabled = _this$props9.isHeaderRowEnabled,
-        ordering = _this$props9.ordering,
-        isHeaderColumnEnabled = _this$props9.isHeaderColumnEnabled,
-        tableActive = _this$props9.tableActive,
-        containerWidth = _this$props9.containerWidth;
+      var _this$props8 = this.props,
+        view = _this$props8.view,
+        getNode = _this$props8.getNode,
+        tableResizingPluginState = _this$props8.tableResizingPluginState,
+        _this$props8$allowCon = _this$props8.allowControls,
+        allowControls = _this$props8$allowCon === void 0 ? true : _this$props8$allowCon,
+        isHeaderRowEnabled = _this$props8.isHeaderRowEnabled,
+        ordering = _this$props8.ordering,
+        isHeaderColumnEnabled = _this$props8.isHeaderColumnEnabled,
+        tableActive = _this$props8.tableActive,
+        containerWidth = _this$props8.containerWidth,
+        options = _this$props8.options,
+        getPos = _this$props8.getPos;
       var _this$state = this.state,
         isLoading = _this$state.isLoading,
-        tableContainerWidth = _this$state.tableContainerWidth,
         showBeforeShadow = _this$state.showBeforeShadow,
         showAfterShadow = _this$state.showAfterShadow;
       var node = getNode();
@@ -469,18 +430,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           visibility: visible ? 'visible' : 'hidden'
         };
       }) : NOOP;
-      if (getBooleanFF('platform.editor.custom-table-width')) {
-        // new table experience code goes here
-        // return <Resizer>...
-      }
-      return /*#__PURE__*/React.createElement("div", {
-        style: {
-          width: tableContainerWidth,
-          marginLeft: this.getMarginLeft(tableContainerWidth)
-        },
+      return /*#__PURE__*/React.createElement(TableContainer, {
         className: classnames(ClassName.TABLE_CONTAINER, (_classnames = {}, _defineProperty(_classnames, ClassName.WITH_CONTROLS, allowControls && tableActive), _defineProperty(_classnames, ClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), _defineProperty(_classnames, ClassName.HOVERED_DELETE_BUTTON, isInDanger), _defineProperty(_classnames, ClassName.TABLE_SELECTED, isTableSelected(view.state.selection)), _defineProperty(_classnames, 'less-padding', containerWidth.width < akEditorMobileBreakoutPoint), _classnames)),
-        "data-number-column": node.attrs.isNumberColumnEnabled,
-        "data-layout": node.attrs.layout
+        editorView: view,
+        getPos: getPos,
+        node: node,
+        tableRef: tableRef,
+        containerWidth: containerWidth,
+        isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.isFullWidthModeEnabled,
+        isBreakoutEnabled: options === null || options === void 0 ? void 0 : options.isBreakoutEnabled
       }, stickyHeadersOptimization && /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"

package/dist/esm/plugins/table/nodeviews/TableContainer.js

@@ -0,0 +1,119 @@
+import React, { useCallback, useRef, forwardRef } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { calcTableWidth } from '@atlaskit/editor-common/styles';
+import { TableCssClassName as ClassName } from '../types';
+import { TableResizer } from './TableResizer';
+var getMarginLeft = function getMarginLeft(_ref) {
+  var lineLength = _ref.lineLength,
+    tableWidth = _ref.tableWidth;
+  var marginLeft;
+  if (tableWidth !== 'inherit' && lineLength) {
+    var containerWidth = tableWidth;
+    if (containerWidth) {
+      marginLeft = (lineLength - containerWidth) / 2;
+    }
+  }
+  return marginLeft;
+};
+export var InnerContainer = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var marginLeft = _ref2.marginLeft,
+    className = _ref2.className,
+    width = _ref2.width,
+    node = _ref2.node,
+    children = _ref2.children;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    style: {
+      width: width,
+      marginLeft: marginLeft
+    },
+    className: className,
+    "data-number-column": node.attrs.isNumberColumnEnabled,
+    "data-layout": node.attrs.layout,
+    "data-test-id": "table-container"
+  }, children);
+});
+export var ResizableTableContainer = function ResizableTableContainer(_ref3) {
+  var children = _ref3.children,
+    className = _ref3.className,
+    node = _ref3.node,
+    lineLength = _ref3.lineLength,
+    editorView = _ref3.editorView,
+    getPos = _ref3.getPos,
+    tableRef = _ref3.tableRef;
+  var containerRef = useRef(null);
+  var innerContainerRef = useRef(null);
+  var updateWidth = useCallback(function (width) {
+    if (!containerRef.current || !innerContainerRef.current) {
+      return;
+    }
+    innerContainerRef.current.style.width = "".concat(width, "px");
+    var marginLeft = getMarginLeft({
+      lineLength: lineLength,
+      tableWidth: width
+    });
+    containerRef.current.style.width = "".concat(width, "px");
+    containerRef.current.style.marginLeft = "".concat(marginLeft, "px");
+  }, [lineLength]);
+  var width = getTableContainerWidth(node);
+  var marginLeft = getMarginLeft({
+    lineLength: lineLength,
+    tableWidth: width
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginLeft: marginLeft,
+      width: width
+    },
+    className: ClassName.TABLE_RESIZER_CONTAINER,
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement(TableResizer, {
+    width: width,
+    updateWidth: updateWidth,
+    editorView: editorView,
+    getPos: getPos,
+    node: node,
+    tableRef: tableRef
+  }, /*#__PURE__*/React.createElement(InnerContainer, {
+    ref: innerContainerRef,
+    className: className,
+    node: node,
+    width: width,
+    marginLeft: 0
+  }, children)));
+};
+export var TableContainer = function TableContainer(_ref4) {
+  var children = _ref4.children,
+    node = _ref4.node,
+    className = _ref4.className,
+    _ref4$containerWidth = _ref4.containerWidth,
+    lineLength = _ref4$containerWidth.lineLength,
+    editorWidth = _ref4$containerWidth.width,
+    isFullWidthModeEnabled = _ref4.isFullWidthModeEnabled,
+    isBreakoutEnabled = _ref4.isBreakoutEnabled,
+    editorView = _ref4.editorView,
+    getPos = _ref4.getPos,
+    tableRef = _ref4.tableRef;
+  if ((isFullWidthModeEnabled || isBreakoutEnabled) && getBooleanFF('platform.editor.custom-table-width')) {
+    return /*#__PURE__*/React.createElement(ResizableTableContainer, {
+      className: className,
+      node: node,
+      lineLength: lineLength,
+      containerWidth: editorWidth,
+      editorView: editorView,
+      getPos: getPos,
+      tableRef: tableRef
+    }, children);
+  }
+  var tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';
+  return /*#__PURE__*/React.createElement(InnerContainer, {
+    node: node,
+    className: className,
+    width: tableWidth,
+    marginLeft: getMarginLeft({
+      lineLength: lineLength,
+      tableWidth: tableWidth
+    })
+  }, children);
+};

package/dist/esm/plugins/table/nodeviews/TableResizer.js

@@ -0,0 +1,57 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from 'react';
+import rafSchd from 'raf-schd';
+import { ResizerNext } from '@atlaskit/editor-common/resizer';
+import { scaleTable, previewScaleTable } from '../pm-plugins/table-resizing/utils';
+var handles = {
+  right: true
+};
+export var TableResizer = function TableResizer(_ref) {
+  var children = _ref.children,
+    width = _ref.width,
+    updateWidth = _ref.updateWidth,
+    editorView = _ref.editorView,
+    getPos = _ref.getPos,
+    node = _ref.node,
+    tableRef = _ref.tableRef;
+  return /*#__PURE__*/React.createElement(ResizerNext, {
+    enable: handles,
+    width: width,
+    handleResizeStart: function handleResizeStart() {
+      return width;
+    },
+    handleResize: rafSchd(function (originalState, delta) {
+      var newWidth = originalState.width + delta.width;
+      previewScaleTable(tableRef, {
+        node: node,
+        prevNode: node,
+        start: getPos() + 1,
+        parentWidth: newWidth
+      }, editorView.domAtPos.bind(editorView));
+      updateWidth(newWidth);
+      return newWidth;
+    }),
+    handleResizeStop: function handleResizeStop(originalState, delta) {
+      var newWidth = originalState.width + delta.width;
+      var state = editorView.state,
+        dispatch = editorView.dispatch;
+      var pos = getPos();
+      var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+        width: newWidth
+      }));
+      var newNode = tr.doc.nodeAt(pos);
+      tr = scaleTable(tableRef, {
+        node: newNode,
+        prevNode: node,
+        start: getPos() + 1,
+        parentWidth: newWidth
+      }, editorView.domAtPos.bind(editorView))(tr);
+      dispatch(tr);
+      updateWidth(newWidth);
+      return newWidth;
+    },
+    resizeRatio: 2
+  }, children);
+};

package/dist/esm/plugins/table/pm-plugins/table-resizing/commands.js

@@ -1,51 +1,7 @@
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
-import { updateColumnWidths } from '../../transforms';
 import { createCommand, getPluginState } from './plugin-factory';
-import { evenAllColumnsWidths, hasTableBeenResized, isClickNear, insertColgroupFromNode as recreateResizeColsByNode, scale, scaleWithParent } from './utils';
-// Scale the table to meet new requirements (col, layout change etc)
-export var scaleTable = function scaleTable(tableRef, options, domAtPos) {
-  return function (state, dispatch) {
-    if (!tableRef) {
-      return false;
-    }
-    var node = options.node,
-      start = options.start,
-      parentWidth = options.parentWidth,
-      layoutChanged = options.layoutChanged;
-
-    // If a table has not been resized yet, columns should be auto.
-    if (hasTableBeenResized(node) === false) {
-      // If its not a re-sized table, we still want to re-create cols
-      // To force reflow of columns upon delete.
-      recreateResizeColsByNode(tableRef, node);
-      return false;
-    }
-    var resizeState;
-    if (parentWidth) {
-      resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos);
-    } else {
-      resizeState = scale(tableRef, options, domAtPos);
-    }
-    if (resizeState) {
-      var _tr = state.tr;
-      _tr = updateColumnWidths(resizeState, node, start)(_tr);
-      if (_tr.docChanged && dispatch) {
-        _tr.setMeta('scrollIntoView', false);
-        // TODO: ED-8995
-        // We need to do this check to reduce the number of race conditions when working with tables.
-        // This metadata is been used in the sendTransaction function in the Collab plugin
-        /* Added !layoutChanged check here to solve unnecessary scroll bar after publish when click on breakout button multiple times and publish
-           scaleTable is only called once every time a breakout button is clicked, so it is safe not to add the meta 'scaleTable' to the tr.
-           Leaving the tr.setMeta('scaleTable', true) here for race conditions that we aren't aware of.
-         */
-        !layoutChanged && _tr.setMeta('scaleTable', true);
-        dispatch(_tr);
-        return true;
-      }
-    }
-    return false;
-  };
-};
+import { evenAllColumnsWidths, isClickNear } from './utils';
+import { updateColumnWidths } from '../../transforms';
 export var evenColumns = function evenColumns(_ref) {
   var resizeState = _ref.resizeState,
     table = _ref.table,
@@ -79,8 +35,8 @@ export var evenColumns = function evenColumns(_ref) {
 export var distributeColumnsWidths = function distributeColumnsWidths(newResizeState, table) {
   return function (state, dispatch) {
     if (dispatch) {
-      var _tr2 = updateColumnWidths(newResizeState, table.node, table.start)(state.tr);
-      stopResizing(_tr2)(state, dispatch);
+      var _tr = updateColumnWidths(newResizeState, table.node, table.start)(state.tr);
+      stopResizing(_tr)(state, dispatch);
     }
     return true;
   };

package/dist/esm/plugins/table/pm-plugins/table-resizing/index.js

@@ -1,4 +1,3 @@
 export { createPlugin } from './plugin';
-export { scaleTable } from './commands';
 export { pluginKey } from './plugin-key';
 export { getPluginState } from './plugin-factory';

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

@@ -3,7 +3,7 @@ export { contentWidth } from './content-width';
 export { getColumnStateFromDOM, getFreeSpace, getCellsRefsInColumn, calculateColumnWidth, addContainerLeftRightPadding } from './column-state';
 export { growColumn, shrinkColumn, reduceSpace } from './resize-logic';
 export { getResizeState, updateColgroup, getTotalWidth, evenAllColumnsWidths, bulkColumnsResize, areColumnsEven, adjustColumnsWidths } from './resize-state';
-export { tableLayoutToSize, getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround } from './misc';
+export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
-export { scale, scaleWithParent } from './scale-table';
+export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
 export { resizeColumn } from './resize-column';

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

@@ -1,13 +1,8 @@
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { getBreakpoint, mapBreakpointToLayoutMaxWidth } from '@atlaskit/editor-common/ui';
-import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorWideLayoutWidth, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { containsClassName } from '@atlaskit/editor-common/utils';
-import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
-export var tableLayoutToSize = {
-  default: akEditorDefaultLayoutWidth,
-  wide: akEditorWideLayoutWidth,
-  'full-width': akEditorFullWidthLayoutWidth
-};
+import { getParentNodeWidth, layoutToWidth } from '@atlaskit/editor-common/node-width';
 
 // Translates named layouts in number values.
 export function getLayoutSize(tableLayout) {
@@ -18,10 +13,10 @@ export function getLayoutSize(tableLayout) {
     return containerWidth ? Math.min(containerWidth - akEditorGutterPadding * 2, akEditorFullWidthLayoutWidth) : akEditorFullWidthLayoutWidth;
   }
   var calculatedTableWidth = calcTableWidth(tableLayout, containerWidth, true);
-  if (calculatedTableWidth.endsWith('px')) {
-    return parseInt(calculatedTableWidth, 10);
+  if (calculatedTableWidth !== 'inherit') {
+    return calculatedTableWidth;
   }
-  return tableLayoutToSize[tableLayout] || containerWidth;
+  return layoutToWidth[tableLayout] || containerWidth;
 }
 export function getDefaultLayoutMaxWidth(containerWidth) {
   return mapBreakpointToLayoutMaxWidth(getBreakpoint(containerWidth));

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

@@ -6,7 +6,9 @@ import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { getTableWidth } from '../../../utils';
 import { getLayoutSize } from '../utils/misc';
 import { reduceSpace } from '../utils/resize-logic';
-import { adjustColumnsWidths, getResizeState, getTotalWidth } from '../utils/resize-state';
+import { adjustColumnsWidths, getResizeState, getTotalWidth, updateColgroup } from '../utils/resize-state';
+import { hasTableBeenResized, insertColgroupFromNode } from './colgroup';
+import { updateColumnWidths } from '../../../transforms';
 // Base function to trigger the actual scale on a table node.
 // Will only resize/scale if a table has been previously resized.
 export var scale = function scale(tableRef, options, domAtPos) {
@@ -94,4 +96,59 @@ export function scaleTableTo(state, maxSize) {
     newState = reduceSpace(newState, newTotalWidth - maxSize);
   }
   return adjustColumnsWidths(newState, maxSize);
-}
+}
+export var previewScaleTable = function previewScaleTable(tableRef, options, domAtPos) {
+  var node = options.node,
+    start = options.start,
+    parentWidth = options.parentWidth;
+  if (!tableRef || !hasTableBeenResized(node)) {
+    return;
+  }
+  var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos) : scale(tableRef, options, domAtPos);
+  if (resizeState) {
+    updateColgroup(resizeState, tableRef);
+  }
+};
+
+// Scale the table to meet new requirements (col, layout change etc)
+export var scaleTable = function scaleTable(tableRef, options, domAtPos) {
+  return function (tr) {
+    if (!tableRef) {
+      return tr;
+    }
+    var node = options.node,
+      start = options.start,
+      parentWidth = options.parentWidth,
+      layoutChanged = options.layoutChanged;
+
+    // If a table has not been resized yet, columns should be auto.
+    if (hasTableBeenResized(node) === false) {
+      // If its not a re-sized table, we still want to re-create cols
+      // To force reflow of columns upon delete.
+      insertColgroupFromNode(tableRef, node);
+      return tr;
+    }
+    var resizeState;
+    if (parentWidth) {
+      resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos);
+    } else {
+      resizeState = scale(tableRef, options, domAtPos);
+    }
+    if (resizeState) {
+      tr = updateColumnWidths(resizeState, node, start)(tr);
+      if (tr.docChanged) {
+        tr.setMeta('scrollIntoView', false);
+        // TODO: ED-8995
+        // We need to do this check to reduce the number of race conditions when working with tables.
+        // This metadata is been used in the sendTransaction function in the Collab plugin
+        /* Added !layoutChanged check here to solve unnecessary scroll bar after publish when click on breakout button multiple times and publish
+           scaleTable is only called once every time a breakout button is clicked, so it is safe not to add the meta 'scaleTable' to the tr.
+           Leaving the tr.setMeta('scaleTable', true) here for race conditions that we aren't aware of.
+         */
+        !layoutChanged && tr.setMeta('scaleTable', true);
+        return tr;
+      }
+    }
+    return tr;
+  };
+};

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "1.5.5",
+	"version": "1.6.0",
 	"sideEffects": false
 }

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

@@ -28,7 +28,6 @@ export interface ComponentProps {
 }
 interface TableState {
     scroll: number;
-    tableContainerWidth: string;
     parentWidth?: number;
     isLoading: boolean;
     stickyHeader?: RowStickyState;
@@ -54,13 +53,11 @@ declare class TableComponent extends React.Component<ComponentProps, TableState>
     onStickyState: (state: StickyPluginState) => void;
     prevTableState: any;
     render(): JSX.Element;
-    private getMarginLeft;
     private handleScroll;
     private handleTableResizing;
     private scaleTable;
     private handleAutoSize;
     private handleWindowResize;
-    private updateTableContainerWidth;
     private getParentNodeWidth;
     private updateParentWidth;
     private tableNodeLayoutSize;