@atlaskit/editor-plugin-table 2.8.6 → 2.9.1

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

@@ -8,6 +8,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';
@@ -15,6 +16,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';
@@ -126,8 +128,7 @@ class TableComponent extends React.Component {
         if (shouldScaleTable) {
           this.scaleTable({
             parentWidth,
-            layoutChanged,
-            isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+            layoutChanged
           });
         }
 
@@ -135,9 +136,8 @@ class TableComponent extends React.Component {
         if (options !== null && options !== void 0 && options.isTableResizingEnabled && hasNumberedColumnChanged) {
           if (!hasTableBeenResized(prevNode)) {
             this.scaleTable({
-              parentWidth,
-              layoutChanged,
-              isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+              parentWidth: node.attrs.width,
+              layoutChanged
             });
           }
         }
@@ -501,7 +501,7 @@ class TableComponent extends React.Component {
     }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
       style: {
         position: 'absolute',
-        right: '-2px'
+        right: getBooleanFF('platform.editor.custom-table-width') ? `${tableOverflowShadowWidth}px` : '-2px'
       }
     }, /*#__PURE__*/React.createElement("div", {
       className: `${ClassName.TABLE_RIGHT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`,

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

@@ -49,6 +49,14 @@ export const ResizableTableContainer = ({
       return;
     }
     const marginLeft = getMarginLeft(lineLength, width);
+
+    // make sure during resizing
+    // the pm-table-resizer-container width is the same as its child div resizer-item
+    // otherwise when resize table from wider to narrower , pm-table-resizer-container stays wider
+    // and cause the fabric-editor-popup-scroll-parent to overflow
+    if (containerRef.current.style.width !== `${width}px`) {
+      containerRef.current.style.width = `${width}px`;
+    }
     if (marginLeftRef.current !== marginLeft) {
       marginLeftRef.current = marginLeft;
       if (Number.isFinite(marginLeft)) {
@@ -82,6 +90,7 @@ export const ResizableTableContainer = ({
   }, /*#__PURE__*/React.createElement(TableResizer, {
     width: width,
     maxWidth: maxResizerWidth,
+    containerWidth: containerWidth,
     updateWidth: updateWidth,
     editorView: editorView,
     getPos: getPos,
@@ -126,7 +135,7 @@ export const TableContainer = ({
   return /*#__PURE__*/React.createElement(InnerContainer, {
     node: node,
     className: classNames(className, {
-      'less-padding': editorWidth < akEditorMobileBreakoutPoint
+      'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested
     }),
     style: {
       width: tableWidth,

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

@@ -36,12 +36,27 @@ 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;
+};
+
+/**
+ * When guidelines are outside the viewport, filter them out, do not show
+ * So the guideline container won't make the fabric-editor-popup-scroll-parent overflow
+ * @param guidelines
+ * @param containerWidth editorWidth
+ */
+const getVisibleGuidelines = (guidelines, containerWidth) => {
+  return guidelines.filter(guideline => {
+    return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < containerWidth;
+  });
 };
 export const TableResizer = ({
   children,
   width,
   maxWidth,
+  containerWidth,
   updateWidth,
   editorView,
   getPos,
@@ -66,9 +81,10 @@ export const TableResizer = ({
   }) => {
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, defaultGuidelines));
+      const visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
+      displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [displayGuideline]);
+  }, [displayGuideline, containerWidth]);
   const guidelineSnaps = useMemo(() => snappingEnabled ? {
     x: defaultSnappingWidths
   } : undefined, [snappingEnabled]);
@@ -83,8 +99,9 @@ export const TableResizer = ({
     dispatch(tr.setMeta(tableWidthPluginKey, {
       resizing: true
     }));
-    setSnappingEnabled(displayGuideline(defaultGuidelines));
-  }, [displayGuideline, editorView, startMeasure]);
+    const visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
+    setSnappingEnabled(displayGuideline(visibleGuidelines));
+  }, [displayGuideline, containerWidth, editorView, startMeasure]);
   const handleResize = useCallback((originalState, delta) => {
     countFrames();
     const newWidth = originalState.width + delta.width;

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/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

@@ -47,6 +47,14 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
       return;
     }
     var marginLeft = getMarginLeft(lineLength, width);
+
+    // make sure during resizing
+    // the pm-table-resizer-container width is the same as its child div resizer-item
+    // otherwise when resize table from wider to narrower , pm-table-resizer-container stays wider
+    // and cause the fabric-editor-popup-scroll-parent to overflow
+    if (containerRef.current.style.width !== "".concat(width, "px")) {
+      containerRef.current.style.width = "".concat(width, "px");
+    }
     if (marginLeftRef.current !== marginLeft) {
       marginLeftRef.current = marginLeft;
       if (Number.isFinite(marginLeft)) {
@@ -80,6 +88,7 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
   }, /*#__PURE__*/React.createElement(TableResizer, {
     width: width,
     maxWidth: maxResizerWidth,
+    containerWidth: containerWidth,
     updateWidth: updateWidth,
     editorView: editorView,
     getPos: getPos,
@@ -122,7 +131,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,13 +40,28 @@ 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;
+};
+
+/**
+ * When guidelines are outside the viewport, filter them out, do not show
+ * So the guideline container won't make the fabric-editor-popup-scroll-parent overflow
+ * @param guidelines
+ * @param containerWidth editorWidth
+ */
+var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWidth) {
+  return guidelines.filter(function (guideline) {
+    return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < containerWidth;
+  });
 };
 export var TableResizer = function TableResizer(_ref) {
   var _findTable, _editorView$state;
   var children = _ref.children,
     width = _ref.width,
     maxWidth = _ref.maxWidth,
+    containerWidth = _ref.containerWidth,
     updateWidth = _ref.updateWidth,
     editorView = _ref.editorView,
     getPos = _ref.getPos,
@@ -70,9 +85,10 @@ export var TableResizer = function TableResizer(_ref) {
       keys = _ref2.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, defaultGuidelines));
+      var visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
+      displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [displayGuideline]);
+  }, [displayGuideline, containerWidth]);
   var guidelineSnaps = useMemo(function () {
     return snappingEnabled ? {
       x: defaultSnappingWidths
@@ -85,8 +101,9 @@ export var TableResizer = function TableResizer(_ref) {
     dispatch(tr.setMeta(tableWidthPluginKey, {
       resizing: true
     }));
-    setSnappingEnabled(displayGuideline(defaultGuidelines));
-  }, [displayGuideline, editorView, startMeasure]);
+    var visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
+    setSnappingEnabled(displayGuideline(visibleGuidelines));
+  }, [displayGuideline, containerWidth, editorView, startMeasure]);
   var handleResize = useCallback(function (originalState, delta) {
     countFrames();
     var newWidth = originalState.width + delta.width;

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;
   }