@atlaskit/editor-plugin-table 2.8.6 → 2.9.0

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

@@ -36,7 +36,9 @@ const getResizerHandleHeight = tableRef => {
 const getResizerMinWidth = node => {
   const currentColumnCount = getColgroupChildrenLength(node);
   const minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
-  return minColumnWidth;
+  // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
+  // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
+  return minColumnWidth + 1;
 };
 export const TableResizer = ({
   children,

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

@@ -4,6 +4,7 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { updateColumnWidths } from '../../transforms';
 import { getSelectedColumnIndexes, updateResizeHandles } from '../../utils';
 import { evenColumns, setDragging, stopResizing } from './commands';
@@ -31,7 +32,9 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
   }
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(start, state, containerWidth);
-  let maxSize = parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
+  let maxSize = getBooleanFF('platform.editor.custom-table-width') ? parentWidth ||
+  // its safe to reference table width from node as this will not have changed
+  originalTable.attrs.width || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {}) : parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
   if (originalTable.attrs.isNumberColumnEnabled) {
     maxSize -= akEditorTableNumberColumnWidth;
   }

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

@@ -3,9 +3,17 @@ import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+/**
+ * This ensures the combined width of the columns (and tbody) of table is always smaller or equal
+ * than the table and table wrapper elements. This is necessary as there is no longer
+ * padding on the .pm-table-wrapper, so all elements need to be the same width to avoid
+ * overflow.
+ */
+export const getColWidthFix = (colwidth, tableColumnCount) => colwidth - 1 / tableColumnCount;
 export const generateColgroup = table => {
   const cols = [];
   if (getBooleanFF('platform.editor.custom-table-width')) {
+    const map = TableMap.get(table);
     table.content.firstChild.content.forEach(cell => {
       const colspan = cell.attrs.colspan || 1;
       if (Array.isArray(cell.attrs.colwidth)) {
@@ -13,7 +21,7 @@ export const generateColgroup = table => {
         // Than the we actually span. We'll patch the document at a later point.
         cell.attrs.colwidth.slice(0, colspan).forEach(width => {
           cols.push(['col', {
-            style: `width: ${width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth}px;`
+            style: `width: ${getColWidthFix(width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth, map.width)}px;`
           }]);
         });
       } else {

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

@@ -66,12 +66,7 @@ export const getTableMaxWidth = ({
 }) => {
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
-  let maxWidth;
-  if (getBooleanFF('platform.editor.custom-table-width')) {
-    maxWidth = parentWidth || table.attrs.width || getLayoutSize(layout, containerWidth.width, {});
-  } else {
-    maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
-  }
+  let maxWidth = getBooleanFF('platform.editor.custom-table-width') ? parentWidth || table.attrs.width || getLayoutSize(layout, containerWidth.width, {}) : parentWidth || getLayoutSize(layout, containerWidth.width, {});
   if (table.attrs.isNumberColumnEnabled) {
     maxWidth -= akEditorTableNumberColumnWidth;
   }

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

@@ -1,7 +1,8 @@
 import { tableCellMinWidth, tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
 import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getSelectedTableInfo } from '../../../utils';
-import { hasTableBeenResized, insertColgroupFromNode } from './colgroup';
+import { getColWidthFix, hasTableBeenResized, insertColgroupFromNode } from './colgroup';
 import { getCellsRefsInColumn, getColumnStateFromDOM } from './column-state';
 import { syncStickyRowToTable } from './dom';
 import { getTableMaxWidth } from './misc';
@@ -52,12 +53,22 @@ export const getResizeState = ({
 // updates Colgroup DOM node with new widths
 export const updateColgroup = (state, tableRef) => {
   const cols = tableRef.querySelectorAll('col');
-  state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
-  .forEach((column, i) => {
-    if (cols[i]) {
-      cols[i].style.width = `${column.width}px`;
-    }
-  });
+  if (getBooleanFF('platform.editor.custom-table-width')) {
+    const columnsCount = cols.length;
+    state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
+    .forEach((column, i) => {
+      if (cols[i]) {
+        cols[i].style.width = `${getColWidthFix(column.width, columnsCount)}px`;
+      }
+    });
+  } else {
+    state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
+    .forEach((column, i) => {
+      if (cols[i]) {
+        cols[i].style.width = `${column.width}px`;
+      }
+    });
+  }
 
   // colgroup has updated, reflect new widths in sticky header
   syncStickyRowToTable(tableRef);

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

@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
 import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, relativeFontSizeToBase16, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
@@ -88,6 +89,31 @@ const breakoutWidthStyling = () => {
     }
   `;
 };
+const tableWrapperStyles = () => {
+  if (getBooleanFF('platform.editor.custom-table-width')) {
+    return css`
+      .${ClassName.TABLE_NODE_WRAPPER} {
+        padding-bottom: 0px;
+        /* fixes gap cursor height */
+        overflow: auto;
+        overflow-y: hidden;
+        position: relative;
+      }
+    `;
+  } else {
+    return css`
+      .${ClassName.TABLE_NODE_WRAPPER} {
+        padding-right: ${insertColumnButtonOffset}px;
+        margin-right: -${insertColumnButtonOffset}px;
+        padding-bottom: 0px;
+        /* fixes gap cursor height */
+        overflow: auto;
+        overflow-y: hidden;
+        position: relative;
+      }
+    `;
+  }
+};
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
 export const tableStyles = props => {
@@ -658,15 +684,7 @@ export const tableStyles = props => {
     .${ClassName.ROW_CONTROLS_WRAPPER} {
       left: -${tableToolbarSize}px;
     }
-    .${ClassName.TABLE_NODE_WRAPPER} {
-      padding-right: ${insertColumnButtonOffset}px;
-      margin-right: -${insertColumnButtonOffset}px;
-      padding-bottom: 0px;
-      /* fixes gap cursor height */
-      overflow: auto;
-      overflow-y: hidden;
-      position: relative;
-    }
+    ${tableWrapperStyles()}
   }
 
   .ProseMirror.${ClassName.IS_RESIZING} {

package/dist/es2019/plugins/table/ui/consts.js

@@ -97,6 +97,7 @@ export const contextualMenuDropdownWidth = 180;
 export const stickyRowZIndex = resizeHandlerZIndex + 2;
 export const stickyRowOffsetTop = 8;
 export const stickyHeaderBorderBottomWidth = 1;
+export const tableOverflowShadowWidth = 8;
 export const TABLE_SNAP_GAP = 9;
 export const TABLE_HIGHLIGHT_GAP = 10;
 export const TABLE_HIGHLIGHT_TOLERANCE = 2;

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

@@ -1,10 +1,11 @@
 import { css } from '@emotion/react';
 import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from '@atlaskit/editor-common/styles';
 import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
-import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
+import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
 const InsertLine = (props, cssString) => css`
   .${ClassName.CONTROLS_INSERT_LINE} {
     background: ${tableBorderSelectedColor(props)};
@@ -186,7 +187,7 @@ export const OverflowShadow = props => css`
     pointer-events: none;
     top: ${tableMarginTop}px;
     z-index: ${akEditorShadowZIndex};
-    width: 8px;
+    width: ${tableOverflowShadowWidth}px;
   }
   .${ClassName.TABLE_LEFT_SHADOW} {
     background: linear-gradient(
@@ -215,9 +216,8 @@ export const OverflowShadow = props => css`
         ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
         transparent 1px
       );
-    left: calc(100% + 2px);
+    left: ${getBooleanFF('platform.editor.custom-table-width') ? `calc(100% - ${tableOverflowShadowWidth}px)` : 'calc(100% + 2px)'};
   }
-
   .${ClassName.WITH_CONTROLS} {
     .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
       height: calc(100% - ${tableMarginTopWithControl}px);
@@ -247,6 +247,26 @@ const columnHeaderButtonSelected = props => css`
   border-color: ${tableBorderSelectedColor(props)};
   z-index: ${columnControlsSelectedZIndex};
 `;
+const getFloatingDotOverrides = props => {
+  return getBooleanFF('platform.editor.custom-table-width') ? css`
+        tr
+          th:last-child
+          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before,
+          tr
+          td:last-child
+          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before {
+          content: '';
+          background-color: ${tableBorderColor(props)};
+          position: absolute;
+          height: ${lineMarkerSize}px;
+          width: ${lineMarkerSize}px;
+          border-radius: 50%;
+          pointer-events: none;
+          top: ${"var(--ds-space-025, 2px)"};
+          right: 0px;
+        }
+      ` : '';
+};
 export const columnControlsDecoration = props => css`
   .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
     display: none;
@@ -256,6 +276,7 @@ export const columnControlsDecoration = props => css`
     left: -1px;
     top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
     height: ${columnControlsDecorationHeight}px;
+    // floating dot for adding column button
     &::before {
       content: ' ';
       background-color: ${tableBorderColor(props)};
@@ -284,6 +305,9 @@ export const columnControlsDecoration = props => css`
     }
   }
 
+  // floating dot for adding column button - overriding style on last column to avoid scroll
+  ${getFloatingDotOverrides(props)}
+
   div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
     content: ' ';
     background-color: ${tableBorderColor(props)};
@@ -366,6 +390,27 @@ export const hoveredWarningCell = css`
     }
   }
 `;
+
+// move the resize handle zone completely inside the table cell to avoid overflow
+const getLastColumnResizerOverrides = () => {
+  return getBooleanFF('platform.editor.custom-table-width') ? css`
+        tr
+          th:last-child
+          .${ClassName.RESIZE_HANDLE_DECORATION},
+          tr
+          td:last-child
+          .${ClassName.RESIZE_HANDLE_DECORATION} {
+          background-color: transparent;
+          position: absolute;
+          width: ${resizeHandlerAreaWidth}px;
+          height: 100%;
+          top: 0;
+          right: 0;
+          cursor: col-resize;
+          z-index: ${resizeHandlerZIndex};
+        }
+      ` : '';
+};
 export const resizeHandle = props => css`
   .${ClassName.TABLE_CONTAINER} {
     .${ClassName.RESIZE_HANDLE_DECORATION} {
@@ -379,6 +424,8 @@ export const resizeHandle = props => css`
       z-index: ${resizeHandlerZIndex};
     }
 
+    ${getLastColumnResizerOverrides()}
+
     td.${ClassName.WITH_RESIZE_LINE}::before {
       content: ' ';
       position: absolute;

package/dist/es2019/version.json

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

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

@@ -1,6 +1,7 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import { tableInsertColumnButtonSize } from '../ui/consts';
 import { updateShadowListForStickyStyles } from './update-overflow-shadows';
@@ -34,7 +35,7 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
         }, {
           threshold: [0, 1],
           root: _this.wrapper,
-          rootMargin: "0px ".concat(tableInsertColumnButtonSize / 2, "px 0px 0px")
+          rootMargin: getBooleanFF('platform.editor.custom-table-width') ? '0px' : "0px ".concat(tableInsertColumnButtonSize / 2, "px 0px 0px")
         });
         return;
       }

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

@@ -18,6 +18,7 @@ import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { autoSizeTable, clearHoverSelection } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
@@ -25,6 +26,7 @@ import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode, scal
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
+import { tableOverflowShadowWidth } from '../ui/consts';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
@@ -134,8 +136,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         if (shouldScaleTable) {
           _this.scaleTable({
             parentWidth: parentWidth,
-            layoutChanged: layoutChanged,
-            isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+            layoutChanged: layoutChanged
           });
         }
 
@@ -143,9 +144,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         if (options !== null && options !== void 0 && options.isTableResizingEnabled && hasNumberedColumnChanged) {
           if (!hasTableBeenResized(prevNode)) {
             _this.scaleTable({
-              parentWidth: parentWidth,
-              layoutChanged: layoutChanged,
-              isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+              parentWidth: node.attrs.width,
+              layoutChanged: layoutChanged
             });
           }
         }
@@ -496,7 +496,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
         style: {
           position: 'absolute',
-          right: '-2px'
+          right: getBooleanFF('platform.editor.custom-table-width') ? "".concat(tableOverflowShadowWidth, "px") : '-2px'
         }
       }, /*#__PURE__*/React.createElement("div", {
         className: "".concat(ClassName.TABLE_RIGHT_SHADOW, " ").concat(ClassName.TABLE_STICKY_SHADOW),

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

@@ -122,7 +122,7 @@ export var TableContainer = function TableContainer(_ref3) {
   return /*#__PURE__*/React.createElement(InnerContainer, {
     node: node,
     className: classNames(className, {
-      'less-padding': editorWidth < akEditorMobileBreakoutPoint
+      'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested
     }),
     style: {
       width: tableWidth,

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

@@ -40,7 +40,9 @@ var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
 var getResizerMinWidth = function getResizerMinWidth(node) {
   var currentColumnCount = getColgroupChildrenLength(node);
   var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
-  return minColumnWidth;
+  // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
+  // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
+  return minColumnWidth + 1;
 };
 export var TableResizer = function TableResizer(_ref) {
   var _findTable, _editorView$state;

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

@@ -4,6 +4,7 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { updateColumnWidths } from '../../transforms';
 import { getSelectedColumnIndexes, updateResizeHandles } from '../../utils';
 import { evenColumns, setDragging, stopResizing } from './commands';
@@ -29,7 +30,9 @@ 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, {});
+  var maxSize = getBooleanFF('platform.editor.custom-table-width') ? parentWidth ||
+  // its safe to reference table width from node as this will not have changed
+  originalTable.attrs.width || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {}) : parentWidth || 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

@@ -4,9 +4,19 @@ import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+/**
+ * This ensures the combined width of the columns (and tbody) of table is always smaller or equal
+ * than the table and table wrapper elements. This is necessary as there is no longer
+ * padding on the .pm-table-wrapper, so all elements need to be the same width to avoid
+ * overflow.
+ */
+export var getColWidthFix = function getColWidthFix(colwidth, tableColumnCount) {
+  return colwidth - 1 / tableColumnCount;
+};
 export var generateColgroup = function generateColgroup(table) {
   var cols = [];
   if (getBooleanFF('platform.editor.custom-table-width')) {
+    var map = TableMap.get(table);
     table.content.firstChild.content.forEach(function (cell) {
       var colspan = cell.attrs.colspan || 1;
       if (Array.isArray(cell.attrs.colwidth)) {
@@ -14,7 +24,7 @@ export var generateColgroup = function generateColgroup(table) {
         // Than the we actually span. We'll patch the document at a later point.
         cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
           cols.push(['col', {
-            style: "width: ".concat(width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth, "px;")
+            style: "width: ".concat(getColWidthFix(width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth, map.width), "px;")
           }]);
         });
       } else {

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

@@ -64,12 +64,7 @@ export var getTableMaxWidth = function getTableMaxWidth(_ref2) {
     getEditorContainerWidth = _ref2.getEditorContainerWidth;
   var containerWidth = getEditorContainerWidth();
   var parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
-  var maxWidth;
-  if (getBooleanFF('platform.editor.custom-table-width')) {
-    maxWidth = parentWidth || table.attrs.width || getLayoutSize(layout, containerWidth.width, {});
-  } else {
-    maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
-  }
+  var maxWidth = getBooleanFF('platform.editor.custom-table-width') ? parentWidth || table.attrs.width || getLayoutSize(layout, containerWidth.width, {}) : parentWidth || getLayoutSize(layout, containerWidth.width, {});
   if (table.attrs.isNumberColumnEnabled) {
     maxWidth -= akEditorTableNumberColumnWidth;
   }

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

@@ -3,8 +3,9 @@ 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 { tableCellMinWidth, tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
 import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getSelectedTableInfo } from '../../../utils';
-import { hasTableBeenResized, insertColgroupFromNode } from './colgroup';
+import { getColWidthFix, hasTableBeenResized, insertColgroupFromNode } from './colgroup';
 import { getCellsRefsInColumn, getColumnStateFromDOM } from './column-state';
 import { syncStickyRowToTable } from './dom';
 import { getTableMaxWidth } from './misc';
@@ -64,14 +65,26 @@ export var getResizeState = function getResizeState(_ref) {
 // updates Colgroup DOM node with new widths
 export var updateColgroup = function updateColgroup(state, tableRef) {
   var cols = tableRef.querySelectorAll('col');
-  state.cols.filter(function (column) {
-    return column && !!column.width;
-  }) // if width is 0, we dont want to apply that.
-  .forEach(function (column, i) {
-    if (cols[i]) {
-      cols[i].style.width = "".concat(column.width, "px");
-    }
-  });
+  if (getBooleanFF('platform.editor.custom-table-width')) {
+    var columnsCount = cols.length;
+    state.cols.filter(function (column) {
+      return column && !!column.width;
+    }) // if width is 0, we dont want to apply that.
+    .forEach(function (column, i) {
+      if (cols[i]) {
+        cols[i].style.width = "".concat(getColWidthFix(column.width, columnsCount), "px");
+      }
+    });
+  } else {
+    state.cols.filter(function (column) {
+      return column && !!column.width;
+    }) // if width is 0, we dont want to apply that.
+    .forEach(function (column, i) {
+      if (cols[i]) {
+        cols[i].style.width = "".concat(column.width, "px");
+      }
+    });
+  }
 
   // colgroup has updated, reflect new widths in sticky header
   syncStickyRowToTable(tableRef);