@atlaskit/editor-plugin-table 1.1.2 → 1.1.4

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

@@ -1,5 +1,6 @@
 import { DOMSerializer } from 'prosemirror-model';
 import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 export const generateColgroup = table => {
   const cols = [];
   table.content.firstChild.content.forEach(cell => {
@@ -35,6 +36,20 @@ export const insertColgroupFromNode = (tableRef, table) => {
 export const hasTableBeenResized = table => {
   return !!getFragmentBackingArray(table.content.firstChild.content).find(cell => cell.attrs.colwidth);
 };
+
+/**
+ * Check if a table has all the column width set to tableCellMinWidth(48px) or null
+ *
+ * @param table
+ * @returns true if all column width is equal to tableCellMinWidth or null, false otherwise
+ */
+export const isMinCellWidthTable = table => {
+  const cellArray = getFragmentBackingArray(table.content.firstChild.content);
+  const isTableMinCellWidth = cellArray.every(cell => {
+    return cell.attrs.colwidth && cell.attrs.colwidth[0] === tableCellMinWidth || cell.attrs.colwidth === null;
+  });
+  return isTableMinCellWidth;
+};
 function renderColgroupFromNode(table) {
   const rendered = DOMSerializer.renderSpec(document, ['colgroup', {}, ...generateColgroup(table)]);
   return rendered.dom;

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

@@ -3,6 +3,8 @@ import { getBreakpoint, mapBreakpointToLayoutMaxWidth } from '@atlaskit/editor-c
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorWideLayoutWidth, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { containsClassName } from '@atlaskit/editor-common/utils';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
+import { gridSize } from '@atlaskit/theme/constants';
+import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 export const tableLayoutToSize = {
   default: akEditorDefaultLayoutWidth,
   wide: akEditorWideLayoutWidth,
@@ -21,9 +23,6 @@ export function getLayoutSize(tableLayout, containerWidth = 0, options) {
   if (calculatedTableWidth.endsWith('px')) {
     return parseInt(calculatedTableWidth, 10);
   }
-  if (tableLayout === 'default') {
-    return getDefaultLayoutMaxWidth(containerWidth);
-  }
   return tableLayoutToSize[tableLayout] || containerWidth;
 }
 export function getDefaultLayoutMaxWidth(containerWidth) {
@@ -74,9 +73,43 @@ export const getTableMaxWidth = ({
 }) => {
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
-  let maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
+
+  // TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
+  const parentActualWidth = getParentWidthWithoutPadding(parentWidth, tableStart, state);
+  let maxWidth = parentActualWidth || getLayoutSize(layout, containerWidth.width, {});
   if (table.attrs.isNumberColumnEnabled) {
     maxWidth -= akEditorTableNumberColumnWidth;
   }
   return maxWidth;
+};
+export const getParentWidthWithoutPadding = (parentWidth, tableStartPos, state) => {
+  const node = getNestedParentNode(tableStartPos, state);
+  if (!node) {
+    return;
+  }
+  const {
+    schema
+  } = state;
+  if (node.type === schema.nodes.expand) {
+    // padding
+    parentWidth -= gridSize() * 2;
+    // gutter offset
+    parentWidth += gridSize() * 1.5 * 2;
+    // padding right
+    parentWidth -= gridSize();
+    // padding left
+    parentWidth -= gridSize() * 4 - gridSize() / 2;
+  }
+  return parentWidth;
+};
+
+// copy of getNestedParentNode() from packages/editor/editor-common/src/node-width/index.ts
+// to be removed later when we will move getParentWidthWithoutPadding() logic to editor-common
+const getNestedParentNode = (tablePos, state) => {
+  if (tablePos === undefined) {
+    return null;
+  }
+  const $pos = state.doc.resolve(tablePos);
+  const parent = findParentNodeOfTypeClosestToPos($pos, [state.schema.nodes.bodiedExtension, state.schema.nodes.layoutSection, state.schema.nodes.expand]);
+  return parent ? parent.node : null;
 };

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

@@ -11,7 +11,7 @@ export const growColumn = (state, colIndex, amount, selectedColumns) => {
   if (remaining > 0) {
     newState = stackSpace(newState, colIndex, remaining).state;
   }
-  if (selectedColumns) {
+  if (selectedColumns && selectedColumns.length > 1) {
     return bulkColumnsResize(newState, selectedColumns, colIndex);
   }
   return newState;
@@ -34,7 +34,7 @@ export const shrinkColumn = (state, colIndex, amount, selectedColumns) => {
   if (remaining < 0) {
     newState = stackSpace(newState, colIndex + 1, remaining).state;
   }
-  if (selectedColumns) {
+  if (selectedColumns && selectedColumns.length > 1) {
     return bulkColumnsResize(newState, selectedColumns, colIndex);
   }
   return newState;

package/dist/es2019/plugins/table/transforms/column-width.js

@@ -1,11 +1,14 @@
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
+import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
 import { setMeta } from './metadata';
 import { getResizeState, normaliseTableLayout } from '../pm-plugins/table-resizing/utils/resize-state';
 import { getTableMaxWidth } from '../pm-plugins/table-resizing/utils/misc';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
+import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
+import { insertColumnButtonOffset } from '../ui/common-styles';
 export const updateColumnWidths = (resizeState, table, start) => tr => {
   const map = TableMap.get(table);
   const updatedCellsAttrs = {};
@@ -108,18 +111,19 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
  * @returns Updated transaction with rescaled columns for a given table
  */
 export const rescaleColumns = getEditorContainerWidth => (table, view) => tr => {
-  // If the table has been not been resized we skip updating the size
-  // of columns here.
-  if (!view || !hasTableBeenResized(table.node)) {
+  var _tableRef$parentEleme;
+  if (!view) {
     return tr;
   }
+  const pos = table.pos;
+  const newTable = tr.doc.nodeAt(pos);
   const {
     state
   } = view;
   const domAtPos = view.domAtPos.bind(view);
   const maybeTable = domAtPos(table.start).node;
   const tableRef = maybeTable.closest('table');
-  if (!tableRef) {
+  if (!tableRef || !newTable) {
     return tr;
   }
   const layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout);
@@ -131,6 +135,42 @@ export const rescaleColumns = getEditorContainerWidth => (table, view) => tr =>
     layout,
     getEditorContainerWidth
   });
+  const tableWidth = tableRef.clientWidth || akEditorDefaultLayoutWidth;
+  let tableMaxWidth = (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0;
+  tableMaxWidth -= insertColumnButtonOffset;
+  const newTableMap = TableMap.get(newTable);
+  const noOfColumns = newTableMap.width;
+  if (!noOfColumns || noOfColumns <= 0) {
+    return tr;
+  }
+  const columnWidthUnresized = tableWidth / noOfColumns;
+
+  // If the table has not been resized, and the column width is bigger than the minimum column width
+  // we skip updating the size of columns here.
+  if (!hasTableBeenResized(table.node) && columnWidthUnresized > tableCellMinWidth) {
+    return tr;
+  }
+
+  // If the table has not been resized, and the column width is smaller than the minimum column width
+  // Or if the table has been resized, but each column width is either 48px or null
+  // we update the table to have 48px for each column
+  if (!hasTableBeenResized(table.node) && columnWidthUnresized <= tableCellMinWidth || hasTableBeenResized(table.node) && isMinCellWidthTable(table.node)) {
+    const widths = new Array(noOfColumns).fill(tableCellMinWidth);
+    const cols = widths.map((width, index) => ({
+      width: tableCellMinWidth,
+      minWidth: tableCellMinWidth,
+      index
+    }));
+    const overflow = tableWidth > maxSize;
+    const minWidthResizeState = {
+      cols,
+      widths,
+      maxSize,
+      tableWidth,
+      overflow
+    };
+    return updateColumnWidths(minWidthResizeState, table.node, table.start)(tr);
+  }
   let resizeState = getResizeState({
     minWidth: tableCellMinWidth,
     table: table.node,
@@ -140,7 +180,7 @@ export const rescaleColumns = getEditorContainerWidth => (table, view) => tr =>
     maxSize
   });
   const previousTableWidth = resizeState.tableWidth - tableNewColumnMinWidth;
-  const tableDidntPreviouslyOverflow = previousTableWidth <= maxSize;
+  const tableDidntPreviouslyOverflow = previousTableWidth <= Math.max(maxSize, tableMaxWidth);
 
   // If the new table width will result in the table going into an overflow state
   // we resize the cells to avoid the overflow occuring

package/dist/es2019/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -6,6 +6,7 @@ import { splitCell } from '@atlaskit/editor-tables/utils';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import { ColorPalette, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
+import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { cellColourPreviewStyles } from './styles';
@@ -115,7 +116,9 @@ export class ContextualMenu extends Component {
           value: {
             name: 'background'
           },
-          elemAfter: jsx("div", null, jsx("div", {
+          elemAfter: jsx("div", {
+            className: DropdownMenuSharedCssClassName.SUBMENU
+          }, jsx("div", {
             css: cellColourPreviewStyles(background),
             className: ClassName.CONTEXTUAL_MENU_ICON
           }), isSubmenuOpen && jsx("div", {

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -14,7 +14,7 @@ const cornerControlHeight = tableToolbarSize + 1;
   that is aligned to the right edge initially on hover of the top right column control when table overflown,
   its center should be aligned with the edge
 */
-const insertColumnButtonOffset = tableInsertColumnButtonSize / 2;
+export const insertColumnButtonOffset = tableInsertColumnButtonSize / 2;
 const rangeSelectionStyles = `
 .${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} table tbody tr {
   th,td {
@@ -523,6 +523,8 @@ export const tableStyles = props => {
       table-layout: fixed;
       white-space: normal;
       border-top: none;
+      // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212
+      margin-right: -1px;
 
       > tbody > tr {
         white-space: pre-wrap;
@@ -643,7 +645,8 @@ export const tableStyles = props => {
 export const tableFullPageEditorStyles = css`
   .ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
     margin-left: 0;
-    margin-right: 0;
+    // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212
+    margin-right: -1px;
     width: 100%;
   }
 `;

package/dist/es2019/version.json

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

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

@@ -31,6 +31,7 @@ import { containsHeaderRow, tablesHaveDifferentColumnWidths, tablesHaveDifferent
 import { updateOverflowShadows } from './update-overflow-shadows';
 import memoizeOne from 'memoize-one';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
+import { getParentWidthWithoutPadding } from '../pm-plugins/table-resizing/utils/misc';
 var isIE11 = browser.ie_version === 11;
 var NOOP = function NOOP() {
   return undefined;
@@ -192,15 +193,23 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "handleWindowResize", function () {
+      var _node$attrs, _node$attrs2;
       var _this$props4 = _this.props,
         getNode = _this$props4.getNode,
         containerWidth = _this$props4.containerWidth;
-      var layoutSize = _this.tableNodeLayoutSize(getNode());
+      var node = getNode();
+      var prevNode = _this.node;
+      var layoutSize = _this.tableNodeLayoutSize(node);
+      var prevAttrs = prevNode === null || prevNode === void 0 ? void 0 : prevNode.attrs;
+      var layoutChanged = (prevAttrs === null || prevAttrs === void 0 ? void 0 : prevAttrs.layout) !== (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) && (prevAttrs === null || prevAttrs === void 0 ? void 0 : prevAttrs.__autoSize) === (node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.__autoSize);
       if (containerWidth.width > layoutSize) {
         return;
       }
       var parentWidth = _this.getParentNodeWidth();
-      _this.scaleTableDebounced(parentWidth);
+      _this.scaleTableDebounced({
+        layoutChanged: layoutChanged,
+        parentWidth: parentWidth
+      });
     });
     _defineProperty(_assertThisInitialized(_this), "updateTableContainerWidth", function () {
       var _this$props5 = _this.props,
@@ -236,7 +245,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (!isValidPosition(pos, state)) {
         return;
       }
-      return getParentNodeWidth(pos, state, containerWidth, options && options.isFullWidthModeEnabled);
+      var parentNodeWith = getParentNodeWidth(pos, state, containerWidth, options && options.isFullWidthModeEnabled);
+      return getParentWidthWithoutPadding(parentNodeWith, pos, state);
     });
     _defineProperty(_assertThisInitialized(_this), "updateParentWidth", function (width) {
       _this.setState({

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

@@ -10,7 +10,8 @@ export var scaleTable = function scaleTable(tableRef, options, domAtPos) {
     }
     var node = options.node,
       start = options.start,
-      parentWidth = options.parentWidth;
+      parentWidth = options.parentWidth,
+      layoutChanged = options.layoutChanged;
 
     // If a table has not been resized yet, columns should be auto.
     if (hasTableBeenResized(node) === false) {
@@ -33,7 +34,11 @@ export var scaleTable = function scaleTable(tableRef, options, domAtPos) {
         // 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
-        _tr.setMeta('scaleTable', true);
+        /* 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;
       }

package/dist/esm/plugins/table/pm-plugins/table-resizing/event-handlers.js

@@ -9,6 +9,7 @@ import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
 import { currentColWidth, getLayoutSize, getResizeState, pointsAtCell, resizeColumn, updateControls } from './utils';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { getParentWidthWithoutPadding } from './utils/misc';
 export var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) {
   var state = view.state,
     dispatch = view.dispatch;
@@ -29,7 +30,10 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
   }
   var containerWidth = getEditorContainerWidth();
   var parentWidth = getParentNodeWidth(start, state, containerWidth);
-  var maxSize = parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
+
+  // TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
+  var parentActualWidth = getParentWidthWithoutPadding(parentWidth, start, state);
+  var maxSize = parentActualWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
   if (originalTable.attrs.isNumberColumnEnabled) {
     maxSize -= akEditorTableNumberColumnWidth;
   }

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

@@ -1,6 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { DOMSerializer } from 'prosemirror-model';
 import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 export var generateColgroup = function generateColgroup(table) {
   var cols = [];
   table.content.firstChild.content.forEach(function (cell) {
@@ -40,6 +41,20 @@ export var hasTableBeenResized = function hasTableBeenResized(table) {
     return cell.attrs.colwidth;
   });
 };
+
+/**
+ * Check if a table has all the column width set to tableCellMinWidth(48px) or null
+ *
+ * @param table
+ * @returns true if all column width is equal to tableCellMinWidth or null, false otherwise
+ */
+export var isMinCellWidthTable = function isMinCellWidthTable(table) {
+  var cellArray = getFragmentBackingArray(table.content.firstChild.content);
+  var isTableMinCellWidth = cellArray.every(function (cell) {
+    return cell.attrs.colwidth && cell.attrs.colwidth[0] === tableCellMinWidth || cell.attrs.colwidth === null;
+  });
+  return isTableMinCellWidth;
+};
 function renderColgroupFromNode(table) {
   var rendered = DOMSerializer.renderSpec(document, ['colgroup', {}].concat(_toConsumableArray(generateColgroup(table))));
   return rendered.dom;

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

@@ -3,6 +3,8 @@ import { getBreakpoint, mapBreakpointToLayoutMaxWidth } from '@atlaskit/editor-c
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorWideLayoutWidth, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { containsClassName } from '@atlaskit/editor-common/utils';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
+import { gridSize } from '@atlaskit/theme/constants';
+import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 export var tableLayoutToSize = {
   default: akEditorDefaultLayoutWidth,
   wide: akEditorWideLayoutWidth,
@@ -21,9 +23,6 @@ export function getLayoutSize(tableLayout) {
   if (calculatedTableWidth.endsWith('px')) {
     return parseInt(calculatedTableWidth, 10);
   }
-  if (tableLayout === 'default') {
-    return getDefaultLayoutMaxWidth(containerWidth);
-  }
   return tableLayoutToSize[tableLayout] || containerWidth;
 }
 export function getDefaultLayoutMaxWidth(containerWidth) {
@@ -72,9 +71,41 @@ export var getTableMaxWidth = function getTableMaxWidth(_ref2) {
     getEditorContainerWidth = _ref2.getEditorContainerWidth;
   var containerWidth = getEditorContainerWidth();
   var parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
-  var maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
+
+  // TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
+  var parentActualWidth = getParentWidthWithoutPadding(parentWidth, tableStart, state);
+  var maxWidth = parentActualWidth || getLayoutSize(layout, containerWidth.width, {});
   if (table.attrs.isNumberColumnEnabled) {
     maxWidth -= akEditorTableNumberColumnWidth;
   }
   return maxWidth;
+};
+export var getParentWidthWithoutPadding = function getParentWidthWithoutPadding(parentWidth, tableStartPos, state) {
+  var node = getNestedParentNode(tableStartPos, state);
+  if (!node) {
+    return;
+  }
+  var schema = state.schema;
+  if (node.type === schema.nodes.expand) {
+    // padding
+    parentWidth -= gridSize() * 2;
+    // gutter offset
+    parentWidth += gridSize() * 1.5 * 2;
+    // padding right
+    parentWidth -= gridSize();
+    // padding left
+    parentWidth -= gridSize() * 4 - gridSize() / 2;
+  }
+  return parentWidth;
+};
+
+// copy of getNestedParentNode() from packages/editor/editor-common/src/node-width/index.ts
+// to be removed later when we will move getParentWidthWithoutPadding() logic to editor-common
+var getNestedParentNode = function getNestedParentNode(tablePos, state) {
+  if (tablePos === undefined) {
+    return null;
+  }
+  var $pos = state.doc.resolve(tablePos);
+  var parent = findParentNodeOfTypeClosestToPos($pos, [state.schema.nodes.bodiedExtension, state.schema.nodes.layoutSection, state.schema.nodes.expand]);
+  return parent ? parent.node : null;
 };

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

@@ -16,7 +16,7 @@ export var growColumn = function growColumn(state, colIndex, amount, selectedCol
   if (remaining > 0) {
     newState = stackSpace(newState, colIndex, remaining).state;
   }
-  if (selectedColumns) {
+  if (selectedColumns && selectedColumns.length > 1) {
     return bulkColumnsResize(newState, selectedColumns, colIndex);
   }
   return newState;
@@ -39,7 +39,7 @@ export var shrinkColumn = function shrinkColumn(state, colIndex, amount, selecte
   if (remaining < 0) {
     newState = stackSpace(newState, colIndex + 1, remaining).state;
   }
-  if (selectedColumns) {
+  if (selectedColumns && selectedColumns.length > 1) {
     return bulkColumnsResize(newState, selectedColumns, colIndex);
   }
   return newState;

package/dist/esm/plugins/table/transforms/column-width.js

@@ -3,12 +3,15 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 { TableMap } from '@atlaskit/editor-tables/table-map';
 import { tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
+import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
 import { setMeta } from './metadata';
 import { getResizeState, normaliseTableLayout } from '../pm-plugins/table-resizing/utils/resize-state';
 import { getTableMaxWidth } from '../pm-plugins/table-resizing/utils/misc';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
+import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
+import { insertColumnButtonOffset } from '../ui/common-styles';
 export var updateColumnWidths = function updateColumnWidths(resizeState, table, start) {
   return function (tr) {
     var map = TableMap.get(table);
@@ -112,16 +115,17 @@ export var updateColumnWidths = function updateColumnWidths(resizeState, table,
 export var rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
   return function (table, view) {
     return function (tr) {
-      // If the table has been not been resized we skip updating the size
-      // of columns here.
-      if (!view || !hasTableBeenResized(table.node)) {
+      var _tableRef$parentEleme;
+      if (!view) {
         return tr;
       }
+      var pos = table.pos;
+      var newTable = tr.doc.nodeAt(pos);
       var state = view.state;
       var domAtPos = view.domAtPos.bind(view);
       var maybeTable = domAtPos(table.start).node;
       var tableRef = maybeTable.closest('table');
-      if (!tableRef) {
+      if (!tableRef || !newTable) {
         return tr;
       }
       var layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout);
@@ -133,6 +137,44 @@ export var rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
         layout: layout,
         getEditorContainerWidth: getEditorContainerWidth
       });
+      var tableWidth = tableRef.clientWidth || akEditorDefaultLayoutWidth;
+      var tableMaxWidth = (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0;
+      tableMaxWidth -= insertColumnButtonOffset;
+      var newTableMap = TableMap.get(newTable);
+      var noOfColumns = newTableMap.width;
+      if (!noOfColumns || noOfColumns <= 0) {
+        return tr;
+      }
+      var columnWidthUnresized = tableWidth / noOfColumns;
+
+      // If the table has not been resized, and the column width is bigger than the minimum column width
+      // we skip updating the size of columns here.
+      if (!hasTableBeenResized(table.node) && columnWidthUnresized > tableCellMinWidth) {
+        return tr;
+      }
+
+      // If the table has not been resized, and the column width is smaller than the minimum column width
+      // Or if the table has been resized, but each column width is either 48px or null
+      // we update the table to have 48px for each column
+      if (!hasTableBeenResized(table.node) && columnWidthUnresized <= tableCellMinWidth || hasTableBeenResized(table.node) && isMinCellWidthTable(table.node)) {
+        var widths = new Array(noOfColumns).fill(tableCellMinWidth);
+        var cols = widths.map(function (width, index) {
+          return {
+            width: tableCellMinWidth,
+            minWidth: tableCellMinWidth,
+            index: index
+          };
+        });
+        var overflow = tableWidth > maxSize;
+        var minWidthResizeState = {
+          cols: cols,
+          widths: widths,
+          maxSize: maxSize,
+          tableWidth: tableWidth,
+          overflow: overflow
+        };
+        return updateColumnWidths(minWidthResizeState, table.node, table.start)(tr);
+      }
       var resizeState = getResizeState({
         minWidth: tableCellMinWidth,
         table: table.node,
@@ -142,7 +184,7 @@ export var rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
         maxSize: maxSize
       });
       var previousTableWidth = resizeState.tableWidth - tableNewColumnMinWidth;
-      var tableDidntPreviouslyOverflow = previousTableWidth <= maxSize;
+      var tableDidntPreviouslyOverflow = previousTableWidth <= Math.max(maxSize, tableMaxWidth);
 
       // If the new table width will result in the table going into an overflow state
       // we resize the cells to avoid the overflow occuring

package/dist/esm/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -16,6 +16,7 @@ import { splitCell } from '@atlaskit/editor-tables/utils';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import { ColorPalette, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
+import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { cellColourPreviewStyles } from './styles';
@@ -122,7 +123,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           value: {
             name: 'background'
           },
-          elemAfter: jsx("div", null, jsx("div", {
+          elemAfter: jsx("div", {
+            className: DropdownMenuSharedCssClassName.SUBMENU
+          }, jsx("div", {
             css: cellColourPreviewStyles(background),
             className: ClassName.CONTEXTUAL_MENU_ICON
           }), isSubmenuOpen && jsx("div", {