@atlaskit/editor-plugin-table 1.5.5 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-table
 
+## 1.6.0
+
+### Minor Changes
+
+- [`89989e06f43`](https://bitbucket.org/atlassian/atlassian-frontend/commits/89989e06f43) - [ux] Adding initial Resizer to table plugin behind a platform feature flag, allowing tables to resize to a custom width. This change also includes the following refactors:- change calcTableWidth function to return number instead of px- allowing tables to use breakout values when allowColumnResize is disabled
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.5.5
 
 ### Patch Changes

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

@@ -239,6 +239,17 @@ var tablesPlugin = function tablesPlugin(options, api) {
             tableWrapperTarget = _ref10.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
+          var LayoutContent = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? null : (0, _utils3.isLayoutSupported)(state) && options && options.breakoutEnabled ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
+            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.default.createElement(_react.default.Fragment, null, targetCellPosition && tableRef && !isDragging && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
             editorView: editorView,
@@ -285,17 +296,7 @@ var tablesPlugin = function tablesPlugin(options, api) {
             stickyHeaders: stickyHeader,
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
             editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI
-          }), (0, _utils3.isLayoutSupported)(state) && options && options.breakoutEnabled && /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
-            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/cjs/plugins/table/nodeviews/TableComponent.js

@@ -16,7 +16,6 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _utils = require("@atlaskit/editor-tables/utils");
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils2 = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -24,7 +23,6 @@ var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _commands = require("../commands");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _stickyHeaders = require("../pm-plugins/sticky-headers");
-var _tableResizing = require("../pm-plugins/table-resizing");
 var _utils3 = require("../pm-plugins/table-resizing/utils");
 var _dom = require("../pm-plugins/table-resizing/utils/dom");
 var _types = require("../types");
@@ -33,6 +31,7 @@ var _utils4 = require("../utils");
 var _updateOverflowShadows = require("./update-overflow-shadows");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _OverflowShadowsObserver = require("./OverflowShadowsObserver");
+var _TableContainer = require("./TableContainer");
 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) { (0, _defineProperty3.default)(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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -51,7 +50,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     _this = _super.call(this, props);
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "state", (_defineProperty2 = {
       scroll: 0,
-      tableContainerWidth: 'inherit',
       parentWidth: undefined,
       isLoading: true
     }, (0, _defineProperty3.default)(_defineProperty2, _types.ShadowEvent.SHOW_BEFORE_SHADOW, false), (0, _defineProperty3.default)(_defineProperty2, _types.ShadowEvent.SHOW_AFTER_SHADOW, false), _defineProperty2));
@@ -89,18 +87,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "prevTableState", null);
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "getMarginLeft", function (tableContainerCssWidth) {
-      var containerWidth = _this.props.containerWidth;
-      var lineLength = containerWidth.lineLength;
-      var marginLeft;
-      if (tableContainerCssWidth !== 'inherit' && lineLength) {
-        var _containerWidth2 = (0, _utils2.parsePx)(tableContainerCssWidth);
-        if (_containerWidth2) {
-          marginLeft = (lineLength - _containerWidth2) / 2;
-        }
-      }
-      return marginLeft;
-    });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleScroll", function (event) {
       if (!_this.wrapper || event.target !== _this.wrapper) {
         return;
@@ -157,7 +143,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
         _this.updateParentWidth(parentWidth);
       }
-      _this.updateTableContainerWidth();
       _this.node = node;
       _this.containerWidth = containerWidth;
       _this.layoutSize = layoutSize;
@@ -179,13 +164,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var domAtPos = view.domAtPos.bind(view);
       var width = containerWidth.width;
       _this.scaleTableDebounced.cancel();
-      (0, _tableResizing.scaleTable)(_this.table, _objectSpread(_objectSpread({}, scaleOptions), {}, {
+      var tr = (0, _utils3.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);
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleAutoSize", function () {
       if (_this.table) {
@@ -223,36 +209,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         parentWidth: parentWidth
       });
     });
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "updateTableContainerWidth", function () {
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_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 = (0, _styles.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
-        };
-      });
-    });
-    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_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 (!(0, _utils2.isValidPosition)(pos, state)) {
         return;
@@ -310,9 +272,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(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);
       }
@@ -322,7 +284,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 = _stickyHeaders.pluginKey.getState(this.props.view.state);
@@ -353,11 +314,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 = (0, _pluginFactory.getPluginState)(view.state),
         isInDanger = _getPluginState.isInDanger;
       var table = (0, _utils.findTable)(view.state.selection);
@@ -413,20 +374,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();
@@ -474,18 +436,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           visibility: visible ? 'visible' : 'hidden'
         };
       }) : NOOP;
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width')) {
-        // new table experience code goes here
-        // return <Resizer>...
-      }
-      return /*#__PURE__*/_react.default.createElement("div", {
-        style: {
-          width: tableContainerWidth,
-          marginLeft: this.getMarginLeft(tableContainerWidth)
-        },
+      return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer, {
         className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_CONTAINER, (_classnames = {}, (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_SELECTED, (0, _utils.isTableSelected)(view.state.selection)), (0, _defineProperty3.default)(_classnames, 'less-padding', containerWidth.width < _editorSharedStyles.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.default.createElement("div", {
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"

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

@@ -0,0 +1,131 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableContainer = exports.ResizableTableContainer = exports.InnerContainer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _nodeWidth = require("@atlaskit/editor-common/node-width");
+var _styles = require("@atlaskit/editor-common/styles");
+var _types = require("../types");
+var _TableResizer = require("./TableResizer");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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;
+};
+var InnerContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var marginLeft = _ref2.marginLeft,
+    className = _ref2.className,
+    width = _ref2.width,
+    node = _ref2.node,
+    children = _ref2.children;
+  return /*#__PURE__*/_react.default.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);
+});
+exports.InnerContainer = InnerContainer;
+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 = (0, _react.useRef)(null);
+  var innerContainerRef = (0, _react.useRef)(null);
+  var updateWidth = (0, _react.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 = (0, _nodeWidth.getTableContainerWidth)(node);
+  var marginLeft = getMarginLeft({
+    lineLength: lineLength,
+    tableWidth: width
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginLeft: marginLeft,
+      width: width
+    },
+    className: _types.TableCssClassName.TABLE_RESIZER_CONTAINER,
+    ref: containerRef
+  }, /*#__PURE__*/_react.default.createElement(_TableResizer.TableResizer, {
+    width: width,
+    updateWidth: updateWidth,
+    editorView: editorView,
+    getPos: getPos,
+    node: node,
+    tableRef: tableRef
+  }, /*#__PURE__*/_react.default.createElement(InnerContainer, {
+    ref: innerContainerRef,
+    className: className,
+    node: node,
+    width: width,
+    marginLeft: 0
+  }, children)));
+};
+exports.ResizableTableContainer = ResizableTableContainer;
+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) && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width')) {
+    return /*#__PURE__*/_react.default.createElement(ResizableTableContainer, {
+      className: className,
+      node: node,
+      lineLength: lineLength,
+      containerWidth: editorWidth,
+      editorView: editorView,
+      getPos: getPos,
+      tableRef: tableRef
+    }, children);
+  }
+  var tableWidth = isBreakoutEnabled ? (0, _styles.calcTableWidth)(node.attrs.layout, editorWidth) : 'inherit';
+  return /*#__PURE__*/_react.default.createElement(InnerContainer, {
+    node: node,
+    className: className,
+    width: tableWidth,
+    marginLeft: getMarginLeft({
+      lineLength: lineLength,
+      tableWidth: tableWidth
+    })
+  }, children);
+};
+exports.TableContainer = TableContainer;

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

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableResizer = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _resizer = require("@atlaskit/editor-common/resizer");
+var _utils = require("../pm-plugins/table-resizing/utils");
+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) { (0, _defineProperty2.default)(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; }
+var handles = {
+  right: true
+};
+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.default.createElement(_resizer.ResizerNext, {
+    enable: handles,
+    width: width,
+    handleResizeStart: function handleResizeStart() {
+      return width;
+    },
+    handleResize: (0, _rafSchd.default)(function (originalState, delta) {
+      var newWidth = originalState.width + delta.width;
+      (0, _utils.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 = (0, _utils.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);
+};
+exports.TableResizer = TableResizer;

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

@@ -3,56 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.stopResizing = exports.setResizeHandlePos = exports.setLastClick = exports.setDragging = exports.scaleTable = exports.evenColumns = exports.distributeColumnsWidths = void 0;
+exports.stopResizing = exports.setResizeHandlePos = exports.setLastClick = exports.setDragging = exports.evenColumns = exports.distributeColumnsWidths = void 0;
 var _utils = require("@atlaskit/editor-tables/utils");
-var _transforms = require("../../transforms");
 var _pluginFactory = require("./plugin-factory");
 var _utils2 = require("./utils");
-// Scale the table to meet new requirements (col, layout change etc)
-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 ((0, _utils2.hasTableBeenResized)(node) === false) {
-      // If its not a re-sized table, we still want to re-create cols
-      // To force reflow of columns upon delete.
-      (0, _utils2.insertColgroupFromNode)(tableRef, node);
-      return false;
-    }
-    var resizeState;
-    if (parentWidth) {
-      resizeState = (0, _utils2.scaleWithParent)(tableRef, parentWidth, node, start, domAtPos);
-    } else {
-      resizeState = (0, _utils2.scale)(tableRef, options, domAtPos);
-    }
-    if (resizeState) {
-      var _tr = state.tr;
-      _tr = (0, _transforms.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;
-  };
-};
-exports.scaleTable = scaleTable;
+var _transforms = require("../../transforms");
 var evenColumns = function evenColumns(_ref) {
   var resizeState = _ref.resizeState,
     table = _ref.table,
@@ -87,8 +42,8 @@ exports.evenColumns = evenColumns;
 var distributeColumnsWidths = function distributeColumnsWidths(newResizeState, table) {
   return function (state, dispatch) {
     if (dispatch) {
-      var _tr2 = (0, _transforms.updateColumnWidths)(newResizeState, table.node, table.start)(state.tr);
-      stopResizing(_tr2)(state, dispatch);
+      var _tr = (0, _transforms.updateColumnWidths)(newResizeState, table.node, table.start)(state.tr);
+      stopResizing(_tr)(state, dispatch);
     }
     return true;
   };

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

@@ -21,13 +21,6 @@ Object.defineProperty(exports, "pluginKey", {
     return _pluginKey.pluginKey;
   }
 });
-Object.defineProperty(exports, "scaleTable", {
-  enumerable: true,
-  get: function get() {
-    return _commands.scaleTable;
-  }
-});
 var _plugin = require("./plugin");
-var _commands = require("./commands");
 var _pluginKey = require("./plugin-key");
 var _pluginFactory = require("./plugin-factory");

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

@@ -141,6 +141,12 @@ Object.defineProperty(exports, "pointsAtCell", {
     return _misc.pointsAtCell;
   }
 });
+Object.defineProperty(exports, "previewScaleTable", {
+  enumerable: true,
+  get: function get() {
+    return _scaleTable.previewScaleTable;
+  }
+});
 Object.defineProperty(exports, "reduceSpace", {
   enumerable: true,
   get: function get() {
@@ -159,22 +165,22 @@ Object.defineProperty(exports, "scale", {
     return _scaleTable.scale;
   }
 });
-Object.defineProperty(exports, "scaleWithParent", {
+Object.defineProperty(exports, "scaleTable", {
   enumerable: true,
   get: function get() {
-    return _scaleTable.scaleWithParent;
+    return _scaleTable.scaleTable;
   }
 });
-Object.defineProperty(exports, "shrinkColumn", {
+Object.defineProperty(exports, "scaleWithParent", {
   enumerable: true,
   get: function get() {
-    return _resizeLogic.shrinkColumn;
+    return _scaleTable.scaleWithParent;
   }
 });
-Object.defineProperty(exports, "tableLayoutToSize", {
+Object.defineProperty(exports, "shrinkColumn", {
   enumerable: true,
   get: function get() {
-    return _misc.tableLayoutToSize;
+    return _resizeLogic.shrinkColumn;
   }
 });
 Object.defineProperty(exports, "updateColgroup", {

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

@@ -9,20 +9,12 @@ exports.getDefaultLayoutMaxWidth = getDefaultLayoutMaxWidth;
 exports.getLayoutSize = getLayoutSize;
 exports.getTableMaxWidth = void 0;
 exports.pointsAtCell = pointsAtCell;
-exports.tableLayoutToSize = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
-var tableLayoutToSize = {
-  default: _editorSharedStyles.akEditorDefaultLayoutWidth,
-  wide: _editorSharedStyles.akEditorWideLayoutWidth,
-  'full-width': _editorSharedStyles.akEditorFullWidthLayoutWidth
-};
-
 // Translates named layouts in number values.
-exports.tableLayoutToSize = tableLayoutToSize;
 function getLayoutSize(tableLayout) {
   var containerWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   var options = arguments.length > 2 ? arguments[2] : undefined;
@@ -31,10 +23,10 @@ function getLayoutSize(tableLayout) {
     return containerWidth ? Math.min(containerWidth - _editorSharedStyles.akEditorGutterPadding * 2, _editorSharedStyles.akEditorFullWidthLayoutWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
   }
   var calculatedTableWidth = (0, _styles.calcTableWidth)(tableLayout, containerWidth, true);
-  if (calculatedTableWidth.endsWith('px')) {
-    return parseInt(calculatedTableWidth, 10);
+  if (calculatedTableWidth !== 'inherit') {
+    return calculatedTableWidth;
   }
-  return tableLayoutToSize[tableLayout] || containerWidth;
+  return _nodeWidth.layoutToWidth[tableLayout] || containerWidth;
 }
 function getDefaultLayoutMaxWidth(containerWidth) {
   return (0, _ui.mapBreakpointToLayoutMaxWidth)((0, _ui.getBreakpoint)(containerWidth));