@atlaskit/editor-plugin-table 7.13.1 → 7.13.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-table
 
+## 7.13.3
+
+### Patch Changes
+
+-   [#99050](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99050)
+    [`d280c1f18875`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d280c1f18875) -
+    Enforce table container width when live pages view mode is enabled
+-   Updated dependencies
+
+## 7.13.2
+
+### Patch Changes
+
+-   [#97570](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97570)
+    [`d53d6981c3ce`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d53d6981c3ce) -
+    Clean up resizing logic and stop growing table container when overflowed
+
 ## 7.13.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableContainer.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableContainer = exports.ResizableTableContainer = exports.InnerContainer = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -18,8 +17,6 @@ var _types = require("../types");
 var _TableResizer = require("./TableResizer");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var InnerContainer = exports.InnerContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
     style = _ref.style,
@@ -130,12 +127,11 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     displayGapCursor: displayGapCursor,
     isTableScalingEnabled: isTableScalingEnabled,
     isWholeTableInDanger: isWholeTableInDanger,
-    pluginInjectionApi: pluginInjectionApi
-  };
-  tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
+    pluginInjectionApi: pluginInjectionApi,
     onResizeStart: onResizeStart,
     onResizeStop: onResizeStop
-  });
+  };
+  var isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',
@@ -144,13 +140,17 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: tableWidthRef.current,
-      height: resizing ? updateContainerHeight(tableWrapperHeight !== null && tableWrapperHeight !== void 0 ? tableWrapperHeight : 'auto') : 'auto'
+      height: resizing ? updateContainerHeight(tableWrapperHeight !== null && tableWrapperHeight !== void 0 ? tableWrapperHeight : 'auto') : 'auto',
+      position: isLivePageViewMode ? 'relative' : 'unset'
     },
     className: _types.TableCssClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
-  }, (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? /*#__PURE__*/_react.default.createElement(InnerContainer, {
+  }, isLivePageViewMode ? /*#__PURE__*/_react.default.createElement(InnerContainer, {
     className: className,
-    node: node
+    node: node,
+    style: {
+      width: 'inherit'
+    }
   }, children) : /*#__PURE__*/_react.default.createElement(_TableResizer.TableResizer, tableResizerProps, /*#__PURE__*/_react.default.createElement(InnerContainer, {
     className: className,
     node: node

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

@@ -141,11 +141,14 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
         if (isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
           _shouldScale = _shouldScale && originalTable.attrs.displayMode !== 'fixed';
         }
-        var newResizeState = (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
         var resizedDelta = clientX - startX;
-        tr = (0, _transforms.updateColumnWidths)(newResizeState, table, start)(tr);
         if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
+          var newResizeState = (0, _utils3.resizeColumnAndTable)(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
+          tr = (0, _transforms.updateColumnWidths)(newResizeState, table, start)(tr);
           tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+        } else {
+          var _newResizeState = (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
+          tr = (0, _transforms.updateColumnWidths)(_newResizeState, table, start)(tr);
         }
         if (colIndex === map.width - 1) {
           var mouseUpTime = event.timeStamp;
@@ -215,7 +218,11 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     if (isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
-    (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
+      (0, _utils3.resizeColumnAndTable)(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    } else {
+      (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    }
     (0, _utils3.updateControls)()(state);
   }
   window.addEventListener('mouseup', finish);

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

@@ -207,6 +207,12 @@ Object.defineProperty(exports, "resizeColumn", {
     return _resizeColumn.resizeColumn;
   }
 });
+Object.defineProperty(exports, "resizeColumnAndTable", {
+  enumerable: true,
+  get: function get() {
+    return _resizeColumn.resizeColumnAndTable;
+  }
+});
 Object.defineProperty(exports, "scale", {
   enumerable: true,
   get: function get() {

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

@@ -7,7 +7,7 @@ exports.currentColWidth = currentColWidth;
 exports.domCellAround = domCellAround;
 exports.getDefaultLayoutMaxWidth = getDefaultLayoutMaxWidth;
 exports.getLayoutSize = getLayoutSize;
-exports.getTableScalingPercent = exports.getTableMaxWidth = exports.getTableElementWidth = exports.getTableContainerElementWidth = void 0;
+exports.getTableScalingPercent = exports.getTableMaxWidth = exports.getTableElementWidth = exports.getTableContainerElementWidth = exports.getStaticTableScalingPercent = void 0;
 exports.pointsAtCell = pointsAtCell;
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
@@ -108,4 +108,11 @@ var getTableScalingPercent = exports.getTableScalingPercent = function getTableS
   var scalePercent = (renderWidth - 1) / tableWidth;
   scalePercent = Math.max(scalePercent, 1 - _consts.MAX_SCALING_PERCENT);
   return Math.min(scalePercent, 1);
+};
+var getStaticTableScalingPercent = exports.getStaticTableScalingPercent = function getStaticTableScalingPercent(table, tableRenderWidth) {
+  var tableWidth = getTableContainerElementWidth(table);
+  // minus 1 here to avoid any 1px scroll in Firefox
+  var scalePercent = (tableRenderWidth - 1) / tableWidth;
+  scalePercent = Math.max(scalePercent, 1 - _consts.MAX_SCALING_PERCENT);
+  return Math.min(scalePercent, 1);
 };

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

@@ -4,9 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resizeColumn = void 0;
+exports.resizeColumnAndTable = exports.resizeColumn = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("../../../types");
 var _misc = require("./misc");
 var _resizeLogic = require("./resize-logic");
@@ -15,47 +14,65 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // Resize a given column by an amount from the current state
 var resizeColumn = exports.resizeColumn = function resizeColumn(resizeState, colIndex, amount, tableRef, tableNode, selectedColumns) {
   var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
-  // If table resize to show overflowed content, we need to re calculate the resize amount because now offset = amount amount instead of amount * 2
   var scalePercent = 1;
-  var resizeAmount;
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
-    var _tableRef$closest;
-    // when table initially not overflow, but enter overflow, we need to calculate the resize amount by two part, before and after overflow, before overflow should be double, after should not be double.
-    var tableWidth = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth;
-    var tableContainerWidth = tableRef === null || tableRef === void 0 || (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
-    var isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
-    resizeAmount = amount * 2;
-    if (isOverflowed) {
-      resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
-    } else {
-      resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
-    }
-  } else {
-    resizeAmount = amount;
-  }
-
-  // This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
-  if (isTableScalingEnabled && !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
+  var resizeAmount = amount;
+  if (isTableScalingEnabled) {
     scalePercent = (0, _misc.getTableScalingPercent)(tableNode, tableRef);
     resizeAmount = amount / scalePercent;
   }
-  var newState = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements') ? (0, _resizeLogic.updateAffectedColumn)(resizeState, colIndex, resizeAmount) : resizeAmount > 0 ? (0, _resizeLogic.growColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? (0, _resizeLogic.shrinkColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
-  (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements') ? (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, false) : (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, isTableScalingEnabled);
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
-    // use the difference in width from affected column to update overall table width
-    var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
-    updateTable(delta, tableRef, tableNode);
-    return _objectSpread(_objectSpread({}, newState), {}, {
-      tableWidth: resizeState.tableWidth + delta
-    });
-  }
+  var newState = resizeAmount > 0 ? (0, _resizeLogic.growColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? (0, _resizeLogic.shrinkColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
+  (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, isTableScalingEnabled);
   return newState;
 };
-var updateTable = function updateTable(resizeAmount, tableRef, tableNode) {
+
+// try not scale table during resize
+var resizeColumnAndTable = exports.resizeColumnAndTable = function resizeColumnAndTable(resizeState, colIndex, amount, tableRef, tableNode, selectedColumns) {
+  var _tableRef$closest;
+  var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var originalTableWidth = arguments.length > 7 ? arguments[7] : undefined;
+  // TODO: can we use document state, and apply scaling factor?
+  var tableWidth = tableRef.clientWidth;
+  var tableContainerWidth = (_tableRef$closest = tableRef.closest('.pm-table-container')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
+  var isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
+  var resizeAmount = amount * 2;
+
+  // todo: reimplement - use getTableScalingPercentFrozen to get scaled percent before table width changes dynamically
+  // let scalePercent = 1;
+  // if (isTableScalingEnabled) {
+  // import from ./misc
+  //   scalePercent = getStaticTableScalingPercent(
+  //     tableNode,
+  //     originalTableWidth || resizeState.maxSize,
+  //   );
+  //   resizeAmount = amount / scalePercent;
+  // }
+
+  // need to look at the resize amount and try to adjust the colgroups
+  if (isOverflowed) {
+    resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
+  } else {
+    resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
+  }
+  var newState = (0, _resizeLogic.updateAffectedColumn)(resizeState, colIndex, resizeAmount);
+
+  // this function only updates the colgroup in DOM, it reverses the scalePercent
+  // todo: change isScalingEnabled to true when reimplementing scaling
+  (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, false);
+
+  // use the difference in width from affected column to update overall table width
+  var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
+  if (!isOverflowed) {
+    updateTablePreview(delta, tableRef, tableNode);
+  }
+  return _objectSpread(_objectSpread({}, newState), {}, {
+    tableWidth: isOverflowed ? tableContainerWidth : resizeState.tableWidth + delta
+  });
+};
+var updateTablePreview = function updateTablePreview(resizeAmount, tableRef, tableNode) {
   var currentWidth = (0, _misc.getTableContainerElementWidth)(tableNode);
   var resizingContainer = tableRef === null || tableRef === void 0 ? void 0 : tableRef.closest(".".concat(_types.TableCssClassName.TABLE_RESIZER_CONTAINER));
   var resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
-  if (resizingContainer && resizingItem) {
+  if (resizingItem) {
     var newWidth = "".concat(currentWidth + resizeAmount, "px");
     if (tableRef) {
       tableRef.style.width = newWidth;

package/dist/es2019/nodeviews/TableContainer.js

@@ -102,7 +102,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     tableWidthRef.current = width;
   }
   const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
-  let tableResizerProps = {
+  const tableResizerProps = {
     width,
     maxWidth: maxResizerWidth,
     containerWidth,
@@ -116,13 +116,11 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     displayGapCursor,
     isTableScalingEnabled,
     isWholeTableInDanger,
-    pluginInjectionApi
-  };
-  tableResizerProps = {
-    ...tableResizerProps,
-    onResizeStart: onResizeStart,
-    onResizeStop: onResizeStop
+    pluginInjectionApi,
+    onResizeStart,
+    onResizeStop
   };
+  const isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   return /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
@@ -131,13 +129,17 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       width: tableWidthRef.current,
-      height: resizing ? updateContainerHeight(tableWrapperHeight !== null && tableWrapperHeight !== void 0 ? tableWrapperHeight : 'auto') : 'auto'
+      height: resizing ? updateContainerHeight(tableWrapperHeight !== null && tableWrapperHeight !== void 0 ? tableWrapperHeight : 'auto') : 'auto',
+      position: isLivePageViewMode ? 'relative' : 'unset'
     },
     className: ClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
-  }, (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? /*#__PURE__*/React.createElement(InnerContainer, {
+  }, isLivePageViewMode ? /*#__PURE__*/React.createElement(InnerContainer, {
     className: className,
-    node: node
+    node: node,
+    style: {
+      width: 'inherit'
+    }
   }, children) : /*#__PURE__*/React.createElement(TableResizer, tableResizerProps, /*#__PURE__*/React.createElement(InnerContainer, {
     className: className,
     node: node

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

@@ -11,7 +11,7 @@ import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
-import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, updateControls } from './utils';
+import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, resizeColumnAndTable, updateControls } from './utils';
 export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI) => {
   const {
     state,
@@ -148,11 +148,14 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
         if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
           shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
         }
-        const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale);
         const resizedDelta = clientX - startX;
-        tr = updateColumnWidths(newResizeState, table, start)(tr);
         if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+          const newResizeState = resizeColumnAndTable(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale);
+          tr = updateColumnWidths(newResizeState, table, start)(tr);
           tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+        } else {
+          const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale);
+          tr = updateColumnWidths(newResizeState, table, start)(tr);
         }
         if (colIndex === map.width - 1) {
           const mouseUpTime = event.timeStamp;
@@ -228,7 +231,11 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
-    resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+      resizeColumnAndTable(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    } else {
+      resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    }
     updateControls()(state);
   }
   window.addEventListener('mouseup', finish);

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

@@ -6,5 +6,5 @@ export { getResizeState, updateColgroup, getTotalWidth, evenAllColumnsWidths, bu
 export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, getTableMaxWidth, getTableElementWidth, getTableContainerElementWidth } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
-export { resizeColumn } from './resize-column';
+export { resizeColumn, resizeColumnAndTable } from './resize-column';
 export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT } from './consts';

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

@@ -98,4 +98,11 @@ export const getTableScalingPercent = (table, tableRef) => {
   let scalePercent = (renderWidth - 1) / tableWidth;
   scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
   return Math.min(scalePercent, 1);
+};
+export const getStaticTableScalingPercent = (table, tableRenderWidth) => {
+  const tableWidth = getTableContainerElementWidth(table);
+  // minus 1 here to avoid any 1px scroll in Firefox
+  let scalePercent = (tableRenderWidth - 1) / tableWidth;
+  scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+  return Math.min(scalePercent, 1);
 };

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

@@ -1,53 +1,68 @@
 // Resize a given column by an amount from the current state
 
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getTableContainerElementWidth, getTableScalingPercent } from './misc';
 import { growColumn, shrinkColumn, updateAffectedColumn } from './resize-logic';
 import { updateColgroup } from './resize-state';
 export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false) => {
-  // If table resize to show overflowed content, we need to re calculate the resize amount because now offset = amount amount instead of amount * 2
   let scalePercent = 1;
-  let resizeAmount;
-  if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
-    var _tableRef$closest;
-    // when table initially not overflow, but enter overflow, we need to calculate the resize amount by two part, before and after overflow, before overflow should be double, after should not be double.
-    const tableWidth = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth;
-    const tableContainerWidth = tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
-    const isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
-    resizeAmount = amount * 2;
-    if (isOverflowed) {
-      resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
-    } else {
-      resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
-    }
-  } else {
-    resizeAmount = amount;
-  }
-
-  // This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
-  if (isTableScalingEnabled && !getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+  let resizeAmount = amount;
+  if (isTableScalingEnabled) {
     scalePercent = getTableScalingPercent(tableNode, tableRef);
     resizeAmount = amount / scalePercent;
   }
-  const newState = getBooleanFF('platform.editor.table.colum-resizing-improvements') ? updateAffectedColumn(resizeState, colIndex, resizeAmount) : resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
-  getBooleanFF('platform.editor.table.colum-resizing-improvements') ? updateColgroup(newState, tableRef, tableNode, false) : updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
-  if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
-    // use the difference in width from affected column to update overall table width
-    const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
-    updateTable(delta, tableRef, tableNode);
-    return {
-      ...newState,
-      tableWidth: resizeState.tableWidth + delta
-    };
-  }
+  const newState = resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
+  updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
   return newState;
 };
-const updateTable = (resizeAmount, tableRef, tableNode) => {
+
+// try not scale table during resize
+export const resizeColumnAndTable = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false, originalTableWidth) => {
+  var _tableRef$closest;
+  // TODO: can we use document state, and apply scaling factor?
+  const tableWidth = tableRef.clientWidth;
+  const tableContainerWidth = (_tableRef$closest = tableRef.closest('.pm-table-container')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
+  const isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
+  let resizeAmount = amount * 2;
+
+  // todo: reimplement - use getTableScalingPercentFrozen to get scaled percent before table width changes dynamically
+  // let scalePercent = 1;
+  // if (isTableScalingEnabled) {
+  // import from ./misc
+  //   scalePercent = getStaticTableScalingPercent(
+  //     tableNode,
+  //     originalTableWidth || resizeState.maxSize,
+  //   );
+  //   resizeAmount = amount / scalePercent;
+  // }
+
+  // need to look at the resize amount and try to adjust the colgroups
+  if (isOverflowed) {
+    resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
+  } else {
+    resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
+  }
+  const newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
+
+  // this function only updates the colgroup in DOM, it reverses the scalePercent
+  // todo: change isScalingEnabled to true when reimplementing scaling
+  updateColgroup(newState, tableRef, tableNode, false);
+
+  // use the difference in width from affected column to update overall table width
+  const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
+  if (!isOverflowed) {
+    updateTablePreview(delta, tableRef, tableNode);
+  }
+  return {
+    ...newState,
+    tableWidth: isOverflowed ? tableContainerWidth : resizeState.tableWidth + delta
+  };
+};
+const updateTablePreview = (resizeAmount, tableRef, tableNode) => {
   const currentWidth = getTableContainerElementWidth(tableNode);
   const resizingContainer = tableRef === null || tableRef === void 0 ? void 0 : tableRef.closest(`.${ClassName.TABLE_RESIZER_CONTAINER}`);
   const resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
-  if (resizingContainer && resizingItem) {
+  if (resizingItem) {
     const newWidth = `${currentWidth + resizeAmount}px`;
     if (tableRef) {
       tableRef.style.width = newWidth;

package/dist/esm/nodeviews/TableContainer.js

@@ -1,7 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { forwardRef, useCallback, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
@@ -120,12 +117,11 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     displayGapCursor: displayGapCursor,
     isTableScalingEnabled: isTableScalingEnabled,
     isWholeTableInDanger: isWholeTableInDanger,
-    pluginInjectionApi: pluginInjectionApi
-  };
-  tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
+    pluginInjectionApi: pluginInjectionApi,
     onResizeStart: onResizeStart,
     onResizeStop: onResizeStop
-  });
+  };
+  var isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   return /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
@@ -134,13 +130,17 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       width: tableWidthRef.current,
-      height: resizing ? updateContainerHeight(tableWrapperHeight !== null && tableWrapperHeight !== void 0 ? tableWrapperHeight : 'auto') : 'auto'
+      height: resizing ? updateContainerHeight(tableWrapperHeight !== null && tableWrapperHeight !== void 0 ? tableWrapperHeight : 'auto') : 'auto',
+      position: isLivePageViewMode ? 'relative' : 'unset'
     },
     className: ClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
-  }, (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? /*#__PURE__*/React.createElement(InnerContainer, {
+  }, isLivePageViewMode ? /*#__PURE__*/React.createElement(InnerContainer, {
     className: className,
-    node: node
+    node: node,
+    style: {
+      width: 'inherit'
+    }
   }, children) : /*#__PURE__*/React.createElement(TableResizer, tableResizerProps, /*#__PURE__*/React.createElement(InnerContainer, {
     className: className,
     node: node

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

@@ -11,7 +11,7 @@ import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
-import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, updateControls } from './utils';
+import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, resizeColumnAndTable, updateControls } from './utils';
 export var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI) {
   var state = view.state,
     dispatch = view.dispatch;
@@ -135,11 +135,14 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
         if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
           _shouldScale = _shouldScale && originalTable.attrs.displayMode !== 'fixed';
         }
-        var newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
         var resizedDelta = clientX - startX;
-        tr = updateColumnWidths(newResizeState, table, start)(tr);
         if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+          var newResizeState = resizeColumnAndTable(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
+          tr = updateColumnWidths(newResizeState, table, start)(tr);
           tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+        } else {
+          var _newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
+          tr = updateColumnWidths(_newResizeState, table, start)(tr);
         }
         if (colIndex === map.width - 1) {
           var mouseUpTime = event.timeStamp;
@@ -209,7 +212,11 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
-    resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+      resizeColumnAndTable(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    } else {
+      resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    }
     updateControls()(state);
   }
   window.addEventListener('mouseup', finish);

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

@@ -6,5 +6,5 @@ export { getResizeState, updateColgroup, getTotalWidth, evenAllColumnsWidths, bu
 export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, getTableMaxWidth, getTableElementWidth, getTableContainerElementWidth } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
-export { resizeColumn } from './resize-column';
+export { resizeColumn, resizeColumnAndTable } from './resize-column';
 export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT } from './consts';

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

@@ -98,4 +98,11 @@ export var getTableScalingPercent = function getTableScalingPercent(table, table
   var scalePercent = (renderWidth - 1) / tableWidth;
   scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
   return Math.min(scalePercent, 1);
+};
+export var getStaticTableScalingPercent = function getStaticTableScalingPercent(table, tableRenderWidth) {
+  var tableWidth = getTableContainerElementWidth(table);
+  // minus 1 here to avoid any 1px scroll in Firefox
+  var scalePercent = (tableRenderWidth - 1) / tableWidth;
+  scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+  return Math.min(scalePercent, 1);
 };