@atlaskit/editor-plugin-table 1.5.4 → 1.6.0

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.scale = void 0;
+exports.scaleTable = exports.scale = exports.previewScaleTable = void 0;
 exports.scaleTableTo = scaleTableTo;
 exports.scaleWithParent = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -14,6 +14,8 @@ var _utils = require("../../../utils");
 var _misc = require("../utils/misc");
 var _resizeLogic = require("../utils/resize-logic");
 var _resizeState = require("../utils/resize-state");
+var _colgroup = require("./colgroup");
+var _transforms = require("../../../transforms");
 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; }
 // Base function to trigger the actual scale on a table node.
@@ -105,4 +107,61 @@ function scaleTableTo(state, maxSize) {
     newState = (0, _resizeLogic.reduceSpace)(newState, newTotalWidth - maxSize);
   }
   return (0, _resizeState.adjustColumnsWidths)(newState, maxSize);
-}
+}
+var previewScaleTable = function previewScaleTable(tableRef, options, domAtPos) {
+  var node = options.node,
+    start = options.start,
+    parentWidth = options.parentWidth;
+  if (!tableRef || !(0, _colgroup.hasTableBeenResized)(node)) {
+    return;
+  }
+  var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos) : scale(tableRef, options, domAtPos);
+  if (resizeState) {
+    (0, _resizeState.updateColgroup)(resizeState, tableRef);
+  }
+};
+
+// Scale the table to meet new requirements (col, layout change etc)
+exports.previewScaleTable = previewScaleTable;
+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 ((0, _colgroup.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, _colgroup.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 = (0, _transforms.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;
+  };
+};
+exports.scaleTable = scaleTable;

package/dist/cjs/version.json

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

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

@@ -229,6 +229,17 @@ const tablesPlugin = (options, api) => {
             allowControls
           } = pluginConfig;
           const stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
+          const 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,
@@ -275,17 +286,7 @@ const 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/es2019/plugins/table/nodeviews/TableComponent.js

@@ -4,17 +4,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';
@@ -22,6 +19,7 @@ import { containsHeaderRow, tablesHaveDifferentColumnWidths, tablesHaveDifferent
 import { updateOverflowShadows } from './update-overflow-shadows';
 import memoizeOne from 'memoize-one';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
+import { TableContainer } from './TableContainer';
 const isIE11 = browser.ie_version === 11;
 const NOOP = () => undefined;
 class TableComponent extends React.Component {
@@ -29,7 +27,6 @@ class TableComponent extends React.Component {
     super(props);
     _defineProperty(this, "state", {
       scroll: 0,
-      tableContainerWidth: 'inherit',
       parentWidth: undefined,
       isLoading: true,
       [ShadowEvent.SHOW_BEFORE_SHADOW]: false,
@@ -72,22 +69,6 @@ class TableComponent extends React.Component {
       }
     });
     _defineProperty(this, "prevTableState", null);
-    _defineProperty(this, "getMarginLeft", tableContainerCssWidth => {
-      const {
-        containerWidth
-      } = this.props;
-      const {
-        lineLength
-      } = containerWidth;
-      let marginLeft;
-      if (tableContainerCssWidth !== 'inherit' && lineLength) {
-        const containerWidth = parsePx(tableContainerCssWidth);
-        if (containerWidth) {
-          marginLeft = (lineLength - containerWidth) / 2;
-        }
-      }
-      return marginLeft;
-    });
     _defineProperty(this, "handleScroll", event => {
       if (!this.wrapper || event.target !== this.wrapper) {
         return;
@@ -148,7 +129,6 @@ class TableComponent extends React.Component {
         }
         this.updateParentWidth(parentWidth);
       }
-      this.updateTableContainerWidth();
       this.node = node;
       this.containerWidth = containerWidth;
       this.layoutSize = layoutSize;
@@ -175,7 +155,7 @@ class TableComponent extends React.Component {
         width
       } = containerWidth;
       this.scaleTableDebounced.cancel();
-      scaleTable(this.table, {
+      const tr = scaleTable(this.table, {
         ...scaleOptions,
         node,
         prevNode: this.node || node,
@@ -183,7 +163,8 @@ class TableComponent extends React.Component {
         containerWidth: width,
         previousContainerWidth: this.containerWidth.width || width,
         ...options
-      }, domAtPos)(state, dispatch);
+      }, domAtPos)(state.tr);
+      dispatch(tr);
     });
     _defineProperty(this, "handleAutoSize", () => {
       if (this.table) {
@@ -223,31 +204,6 @@ class TableComponent extends React.Component {
         parentWidth: parentWidth
       });
     });
-    _defineProperty(this, "updateTableContainerWidth", () => {
-      const {
-        getNode,
-        containerWidth,
-        options
-      } = this.props;
-      const node = getNode();
-      if (options && options.isBreakoutEnabled === false) {
-        return;
-      }
-      const tableContainerWidth = calcTableWidth(node.attrs.layout, containerWidth.width);
-      if (this.state.tableContainerWidth === tableContainerWidth) {
-        return null;
-      }
-      this.setState(prevState => {
-        if (options && options.isBreakoutEnabled === false && prevState.tableContainerWidth !== 'inherit') {
-          return {
-            tableContainerWidth: 'inherit'
-          };
-        }
-        return {
-          tableContainerWidth
-        };
-      });
-    });
     _defineProperty(this, "getParentNodeWidth", () => {
       const {
         getPos,
@@ -325,7 +281,6 @@ class TableComponent extends React.Component {
        * Instead we use the resize event to only trigger updates when necessary.
        */
       window.addEventListener('resize', this.handleWindowResizeDebounced);
-      this.updateTableContainerWidth();
       this.handleTableResizingDebounced();
     }
     const currentStickyState = stickyHeadersPluginKey.getState(this.props.view.state);
@@ -420,11 +375,12 @@ class TableComponent extends React.Component {
       ordering,
       isHeaderColumnEnabled,
       tableActive,
-      containerWidth
+      containerWidth,
+      options,
+      getPos
     } = this.props;
     const {
       isLoading,
-      tableContainerWidth,
       showBeforeShadow,
       showAfterShadow
     } = this.state;
@@ -473,15 +429,7 @@ class TableComponent extends React.Component {
     const shadowStyle = tableOverflowShadowsOptimization ? memoizeOne(visible => ({
       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, {
         [ClassName.WITH_CONTROLS]: allowControls && tableActive,
         [ClassName.TABLE_STICKY]: this.state.stickyHeader && hasHeaderRow,
@@ -489,8 +437,13 @@ class TableComponent extends React.Component {
         [ClassName.TABLE_SELECTED]: isTableSelected(view.state.selection),
         'less-padding': containerWidth.width < akEditorMobileBreakoutPoint
       }),
-      "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/es2019/plugins/table/nodeviews/TableContainer.js

@@ -0,0 +1,124 @@
+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';
+const getMarginLeft = ({
+  lineLength,
+  tableWidth
+}) => {
+  let marginLeft;
+  if (tableWidth !== 'inherit' && lineLength) {
+    const containerWidth = tableWidth;
+    if (containerWidth) {
+      marginLeft = (lineLength - containerWidth) / 2;
+    }
+  }
+  return marginLeft;
+};
+export const InnerContainer = /*#__PURE__*/forwardRef(({
+  marginLeft,
+  className,
+  width,
+  node,
+  children
+}, ref) => {
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    style: {
+      width,
+      marginLeft
+    },
+    className: className,
+    "data-number-column": node.attrs.isNumberColumnEnabled,
+    "data-layout": node.attrs.layout,
+    "data-test-id": "table-container"
+  }, children);
+});
+export const ResizableTableContainer = ({
+  children,
+  className,
+  node,
+  lineLength,
+  editorView,
+  getPos,
+  tableRef
+}) => {
+  const containerRef = useRef(null);
+  const innerContainerRef = useRef(null);
+  const updateWidth = useCallback(width => {
+    if (!containerRef.current || !innerContainerRef.current) {
+      return;
+    }
+    innerContainerRef.current.style.width = `${width}px`;
+    const marginLeft = getMarginLeft({
+      lineLength,
+      tableWidth: width
+    });
+    containerRef.current.style.width = `${width}px`;
+    containerRef.current.style.marginLeft = `${marginLeft}px`;
+  }, [lineLength]);
+  const width = getTableContainerWidth(node);
+  const marginLeft = getMarginLeft({
+    lineLength,
+    tableWidth: width
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginLeft,
+      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 const TableContainer = ({
+  children,
+  node,
+  className,
+  containerWidth: {
+    lineLength,
+    width: editorWidth
+  },
+  isFullWidthModeEnabled,
+  isBreakoutEnabled,
+  editorView,
+  getPos,
+  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);
+  }
+  const tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';
+  return /*#__PURE__*/React.createElement(InnerContainer, {
+    node: node,
+    className: className,
+    width: tableWidth,
+    marginLeft: getMarginLeft({
+      lineLength: lineLength,
+      tableWidth
+    })
+  }, children);
+};

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

@@ -0,0 +1,56 @@
+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';
+const handles = {
+  right: true
+};
+export const TableResizer = ({
+  children,
+  width,
+  updateWidth,
+  editorView,
+  getPos,
+  node,
+  tableRef
+}) => {
+  return /*#__PURE__*/React.createElement(ResizerNext, {
+    enable: handles,
+    width: width,
+    handleResizeStart: () => width,
+    handleResize: rafSchd((originalState, delta) => {
+      const newWidth = originalState.width + delta.width;
+      previewScaleTable(tableRef, {
+        node,
+        prevNode: node,
+        start: getPos() + 1,
+        parentWidth: newWidth
+      }, editorView.domAtPos.bind(editorView));
+      updateWidth(newWidth);
+      return newWidth;
+    }),
+    handleResizeStop: (originalState, delta) => {
+      const newWidth = originalState.width + delta.width;
+      const {
+        state,
+        dispatch
+      } = editorView;
+      const pos = getPos();
+      let tr = state.tr.setNodeMarkup(pos, undefined, {
+        ...node.attrs,
+        width: newWidth
+      });
+      const 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/es2019/plugins/table/pm-plugins/table-resizing/commands.js

@@ -1,53 +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 const scaleTable = (tableRef, options, domAtPos) => (state, dispatch) => {
-  if (!tableRef) {
-    return false;
-  }
-  const {
-    node,
-    start,
-    parentWidth,
-    layoutChanged
-  } = options;
-
-  // 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;
-  }
-  let resizeState;
-  if (parentWidth) {
-    resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos);
-  } else {
-    resizeState = scale(tableRef, options, domAtPos);
-  }
-  if (resizeState) {
-    let {
-      tr
-    } = state;
-    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 const evenColumns = ({
   resizeState,
   table,

package/dist/es2019/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/es2019/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/es2019/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 const 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, containerWidth = 0, options) {
@@ -18,10 +13,10 @@ export function getLayoutSize(tableLayout, containerWidth = 0, options) {
     return containerWidth ? Math.min(containerWidth - akEditorGutterPadding * 2, akEditorFullWidthLayoutWidth) : akEditorFullWidthLayoutWidth;
   }
   const 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/es2019/plugins/table/pm-plugins/table-resizing/utils/scale-table.js

@@ -3,7 +3,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 const scale = (tableRef, options, domAtPos) => {
@@ -97,4 +99,61 @@ export function scaleTableTo(state, maxSize) {
     newState = reduceSpace(newState, newTotalWidth - maxSize);
   }
   return adjustColumnsWidths(newState, maxSize);
-}
+}
+export const previewScaleTable = (tableRef, options, domAtPos) => {
+  const {
+    node,
+    start,
+    parentWidth
+  } = options;
+  if (!tableRef || !hasTableBeenResized(node)) {
+    return;
+  }
+  const 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 const scaleTable = (tableRef, options, domAtPos) => tr => {
+  if (!tableRef) {
+    return tr;
+  }
+  const {
+    node,
+    start,
+    parentWidth,
+    layoutChanged
+  } = options;
+
+  // 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;
+  }
+  let 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/es2019/version.json

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