@atlaskit/editor-plugin-table 7.21.3 → 7.21.5

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-table
 
+## 7.21.5
+
+### Patch Changes
+
+- [#122514](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122514)
+  [`91276c81ef8a8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/91276c81ef8a8) -
+  [ED-24019] This change is cleaning up the feature flag
+  'platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg' which was introduced for new
+  keyboard shortcuts for inserting columns and rows to a table.
+- [#122054](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122054)
+  [`2ead5fa12242d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2ead5fa12242d) -
+  Use scaled amounts for new column resizing, and update logic to cater for more scenarios
+- Updated dependencies
+
+## 7.21.4
+
+### Patch Changes
+
+- [#122264](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122264)
+  [`257d7e96264e0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/257d7e96264e0) -
+  [ux] Fix table column delete decorations showing when expected in React 18.
+
 ## 7.21.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -28,6 +28,7 @@ var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _commands = require("../commands");
+var _eventHandlers = require("../event-handlers");
 var _utils3 = require("../pm-plugins/drag-and-drop/utils");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _stickyHeaders = require("../pm-plugins/sticky-headers");
@@ -74,6 +75,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       scroll: 0,
       parentWidth: undefined
     }, (0, _defineProperty3.default)(_defineProperty2, _types.ShadowEvent.SHOW_BEFORE_SHADOW, false), (0, _defineProperty3.default)(_defineProperty2, _types.ShadowEvent.SHOW_AFTER_SHADOW, false), (0, _defineProperty3.default)(_defineProperty2, "tableWrapperWidth", undefined), (0, _defineProperty3.default)(_defineProperty2, "tableWrapperHeight", undefined), _defineProperty2));
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleMouseOut", function (event) {
+      if (!(0, _eventHandlers.isTableInFocus)(_this.props.view)) {
+        return false;
+      }
+      return (0, _eventHandlers.handleMouseOut)(_this.props.view, event);
+    });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleMouseEnter", function () {
       var node = _this.props.getNode();
       var pos = _this.props.getPos();
@@ -364,6 +371,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
         }
       }
+      if ((0, _platformFeatureFlags.fg)('editor_react_18_fix_table_delete_col_decorations')) {
+        var _this$table2;
+        this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.addEventListener('mouseout', this.handleMouseOut);
+      }
       var _getEditorFeatureFlag = getEditorFeatureFlags(),
         _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2,
@@ -445,8 +456,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
       if ((0, _platformFeatureFlags.fg)('platform.editor.table.live-pages-sorting_4malx')) {
-        var _this$table2;
-        this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.removeEventListener('mouseenter', this.handleMouseEnter);
+        var _this$table3;
+        this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.removeEventListener('mouseenter', this.handleMouseEnter);
+      }
+      if ((0, _platformFeatureFlags.fg)('editor_react_18_fix_table_delete_col_decorations')) {
+        var _this$table4;
+        this === null || this === void 0 || (_this$table4 = this.table) === null || _this$table4 === void 0 || _this$table4.removeEventListener('mouseout', this.handleMouseOut);
       }
       if (this.overflowShadowsObserver) {
         this.overflowShadowsObserver.dispose();

package/dist/cjs/pm-plugins/keymap.js

@@ -40,12 +40,10 @@ function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEn
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.addRowAfter.common, (0, _commandsWithAnalytics.addRowAroundSelection)(editorAnalyticsAPI)('BOTTOM'), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.addColumnBefore.common, (0, _insert.addColumnBefore)(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.addColumnAfter.common, (0, _insert.addColumnAfter)(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
-  if ((0, _platformFeatureFlags.fg)('platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg')) {
-    (0, _keymaps.bindKeymapWithCommand)(_keymaps.addRowBeforeVO.common, (0, _commandsWithAnalytics.addRowAroundSelection)(editorAnalyticsAPI)('TOP'), list);
-    (0, _keymaps.bindKeymapWithCommand)(_keymaps.addRowAfterVO.common, (0, _commandsWithAnalytics.addRowAroundSelection)(editorAnalyticsAPI)('BOTTOM'), list);
-    (0, _keymaps.bindKeymapWithCommand)(_keymaps.addColumnBeforeVO.common, (0, _insert.addColumnBefore)(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
-    (0, _keymaps.bindKeymapWithCommand)(_keymaps.addColumnAfterVO.common, (0, _insert.addColumnAfter)(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
-  }
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.addRowBeforeVO.common, (0, _commandsWithAnalytics.addRowAroundSelection)(editorAnalyticsAPI)('TOP'), list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.addRowAfterVO.common, (0, _commandsWithAnalytics.addRowAroundSelection)(editorAnalyticsAPI)('BOTTOM'), list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.addColumnBeforeVO.common, (0, _insert.addColumnBefore)(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.addColumnAfterVO.common, (0, _insert.addColumnAfter)(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
   if (dragAndDropEnabled) {
     // Move row/column shortcuts
     /**

package/dist/cjs/pm-plugins/main.js

@@ -282,7 +282,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         mousedown: (0, _eventHandlers.withCellTracking)(_eventHandlers.handleMouseDown),
         mouseover: (0, _eventHandlers.withCellTracking)((0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseOver)),
         mouseleave: _eventHandlers.handleMouseLeave,
-        mouseout: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseOut),
+        mouseout: (0, _platformFeatureFlags.fg)('editor_react_18_fix_table_delete_col_decorations') ? undefined : (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseOut),
         mousemove: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseMove),
         mouseenter: _eventHandlers.handleMouseEnter,
         mouseup: (0, _eventHandlers.whenTableInFocus)(_eventHandlers.handleMouseUp),

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

@@ -21,6 +21,7 @@ var _tableAnalytics = require("../table-analytics");
 var _commands = require("./commands");
 var _pluginFactory2 = require("./plugin-factory");
 var _utils3 = require("./utils");
+var _resizeColumn = require("./utils/resize-column");
 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 handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled) {
@@ -29,7 +30,8 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
   var editorDisabled = !view.editable;
   var domAtPos = view.domAtPos.bind(view);
   var _getEditorContainerWi = getEditorContainerWidth(),
-    lineLength = _getEditorContainerWi.lineLength;
+    lineLength = _getEditorContainerWi.lineLength,
+    editorWidth = _getEditorContainerWi.width;
   if (editorDisabled || localResizeHandlePos === null || !(0, _utils3.pointsAtCell)(state.doc.resolve(localResizeHandlePos))) {
     return false;
   }
@@ -95,6 +97,17 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
   // When we start resizing a column we need to ensure the underlying tooltip is removed from the decoration to avoid
   // unnecessary tooltips being displayed during drag.
   (0, _misc.updateResizeHandleDecorations)(undefined, undefined, false)(state, dispatch);
+
+  // for new column resizing, take the current scaled version of table widths and use those as the basis for resizing
+  // implication: the scaled version of the table becomes the source of truth
+  if (isNewColumnResizingEnabled && shouldScale) {
+    resizeState = (0, _resizeColumn.scaleResizeState)({
+      resizeState: resizeState,
+      tableRef: dom,
+      tableNode: originalTable,
+      editorWidth: editorWidth
+    });
+  }
   function finish(event) {
     window.removeEventListener('mouseup', finish);
     window.removeEventListener('mousemove', move);
@@ -154,18 +167,23 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
         var resizedDelta = clientX - startX;
         var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && (0, _platformFeatureFlags.fg)('platform.editor.table.use-increased-scaling-percent');
         if (isNewColumnResizingEnabled && !(0, _utils2.isTableNested)(state, tablePos)) {
-          var newResizeState = (0, _utils3.resizeColumnAndTable)(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale,
-          // isTableScalingEnabled
-          undefined,
-          // originalTableWidth
-          shouldUseIncreasedScalingPercent, lineLength, isTableAlignmentEnabled);
+          var newResizeState = (0, _utils3.resizeColumnAndTable)({
+            resizeState: resizeState,
+            colIndex: colIndex,
+            amount: resizedDelta,
+            tableRef: dom,
+            tableNode: originalTable,
+            width: editorWidth,
+            lineLength: lineLength,
+            isTableAlignmentEnabled: isTableAlignmentEnabled
+          });
           tr = (0, _transforms.updateColumnWidths)(newResizeState, table, start)(tr);
 
           // If the table is aligned to the start and the table width is greater than the line length, we should change the alignment to center
-          var shouldChangeAlignment = (0, _alignment.shouldChangeAlignmentToCenterResized)(isTableAlignmentEnabled, originalTable, lineLength, newResizeState.tableWidth);
+          var shouldChangeAlignment = (0, _alignment.shouldChangeAlignmentToCenterResized)(isTableAlignmentEnabled, originalTable, lineLength, newResizeState.maxSize);
           if (shouldChangeAlignment) {
             tr = tr.setNodeMarkup(start - 1, state.schema.nodes.table, _objectSpread(_objectSpread({}, table.attrs), {}, {
-              width: newResizeState.tableWidth,
+              width: newResizeState.maxSize,
               layout: _alignment.ALIGN_CENTER
             }));
             editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
@@ -173,7 +191,7 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
               actionSubject: _analytics.ACTION_SUBJECT.TABLE,
               actionSubjectId: null,
               attributes: {
-                tableWidth: newResizeState.tableWidth,
+                tableWidth: newResizeState.maxSize,
                 newAlignment: _alignment.ALIGN_CENTER,
                 previousAlignment: _alignment.ALIGN_START,
                 totalRowCount: totalRowCount,
@@ -184,7 +202,7 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
               eventType: _analytics.EVENT_TYPE.TRACK
             })(tr);
           } else {
-            tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+            tr.setNodeAttribute(start - 1, 'width', newResizeState.maxSize);
           }
         } else {
           var _newResizeState = (0, _utils3.resizeColumn)(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale, shouldUseIncreasedScalingPercent);
@@ -256,10 +274,20 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
+    var resizedDelta = clientX - dragging.startX;
     if (isNewColumnResizingEnabled && !(0, _utils2.isTableNested)(state, tablePos)) {
-      (0, _utils3.resizeColumnAndTable)(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, undefined, shouldUseIncreasedScalingPercent, lineLength, isTableAlignmentEnabled);
+      (0, _utils3.resizeColumnAndTable)({
+        resizeState: resizeState,
+        colIndex: colIndex,
+        amount: resizedDelta,
+        tableRef: dom,
+        tableNode: originalTable,
+        width: editorWidth,
+        lineLength: lineLength,
+        isTableAlignmentEnabled: isTableAlignmentEnabled
+      });
     } else {
-      (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale, shouldUseIncreasedScalingPercent);
+      (0, _utils3.resizeColumn)(resizeState, colIndex, resizedDelta, dom, table, undefined, shouldScale, shouldUseIncreasedScalingPercent);
     }
     (0, _utils3.updateControls)()(state);
   }

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

@@ -4,8 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resizeColumnAndTable = exports.resizeColumn = void 0;
+exports.scaleResizeState = exports.resizeColumnAndTable = exports.resizeColumn = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _types = require("../../../types");
 var _alignment = require("../../../utils/alignment");
 var _misc = require("./misc");
@@ -26,68 +27,115 @@ var resizeColumn = exports.resizeColumn = function resizeColumn(resizeState, col
   (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, isTableScalingEnabled, shouldUseIncreasedScalingPercent);
   return newState;
 };
+var resizeColumnAndTable = exports.resizeColumnAndTable = function resizeColumnAndTable(_ref) {
+  var resizeState = _ref.resizeState,
+    colIndex = _ref.colIndex,
+    amount = _ref.amount,
+    tableRef = _ref.tableRef,
+    tableNode = _ref.tableNode,
+    lineLength = _ref.lineLength,
+    editorWidth = _ref.width,
+    isTableAlignmentEnabled = _ref.isTableAlignmentEnabled;
+  var editorContainerWidth = getEditorContainerWidth(editorWidth);
+  var isTableLeftAligned = tableNode.attrs.layout === _alignment.ALIGN_START;
+  var resizeAmount = isTableLeftAligned ? amount : amount * 2;
+  var willTableHitEditorEdge = resizeState.maxSize + resizeAmount > editorContainerWidth;
+  var willResizedTableStayInOverflow = resizeState.overflow && resizeState.tableWidth + resizeAmount / 2 > resizeState.maxSize;
 
-// 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;
-  var shouldUseIncreasedScalingPercent = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
-  var lineLength = arguments.length > 9 ? arguments[9] : undefined;
-  var isTableAlignmentEnabled = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : false;
-  // 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 = tableNode.attrs.layout === _alignment.ALIGN_START && !isOverflowed ? amount : 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;
+  // STEP 1: Update col width
+  if (willTableHitEditorEdge || willResizedTableStayInOverflow) {
+    var _tableRef$closest;
+    var tableContainerWidth = (_tableRef$closest = tableRef.closest('.pm-table-container')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
+    resizeAmount = amount < 0 ? amount : resizeAmount - (resizeState.maxSize + resizeAmount - tableContainerWidth) / 2;
+  }
+  if (!willResizedTableStayInOverflow && !willTableHitEditorEdge) {
+    var diff = -(resizeState.tableWidth - resizeState.maxSize);
+    var rest = amount - diff;
+    var final = isTableLeftAligned ? diff + rest : diff + rest * 2;
+    resizeAmount = final;
   }
   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, shouldUseIncreasedScalingPercent);
-
-  // use the difference in width from affected column to update overall table width
+  // STEP 2: Update table container width
+  // columns have a min width, so delta !== resizeAmount when this is reached, use this for calculations
   var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
-  if (!isOverflowed) {
-    // If the table is aligned to the start and the table width is greater than the line length, we should change the alignment to center
-    var shouldChangeAlignment = (0, _alignment.shouldChangeAlignmentToCenterResized)(isTableAlignmentEnabled, tableNode, lineLength, newState.tableWidth + delta);
-    shouldChangeAlignment ? updateTablePreview(delta, tableRef, tableNode, _alignment.ALIGN_CENTER) : updateTablePreview(delta, tableRef, tableNode);
+  newState.maxSize = Math.round(resizeState.overflow ? willResizedTableStayInOverflow ?
+  // CASE 1A: table will stay in overflow
+  // do not grow the table because resize is happening in the overflow region
+  // and the overall table container needs to be retained
+  resizeState.maxSize :
+  // CASE 1B: table will no longer be in overflow, so adjust container width
+  // ensure the table is resized without any 'big jumps' by working out
+  // the difference between the new table width and the max size and adding the resize
+  resizeState.maxSize + (resizeState.tableWidth - resizeState.maxSize + delta) : willTableHitEditorEdge ?
+  // CASE 2: table will hit editor edge
+  editorContainerWidth :
+  // CASE 3: table is being resized from a non-overflow state
+  resizeState.maxSize + delta);
+
+  // do not apply scaling logic because resize state is already scaled
+  (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, false, false);
+  if (!willTableHitEditorEdge && !willResizedTableStayInOverflow) {
+    updateTablePreview(tableRef, newState.maxSize, (0, _alignment.shouldChangeAlignmentToCenterResized)(isTableAlignmentEnabled, tableNode, lineLength, newState.maxSize));
   }
-  return _objectSpread(_objectSpread({}, newState), {}, {
-    // resizeState.tableWidth sometimes is off by ~3px on load on resized table when !isOverflowed, using resizeState.maxSize instead
-    tableWidth: isOverflowed ? tableContainerWidth : resizeState.maxSize + delta
-  });
+  return newState;
 };
-var updateTablePreview = function updateTablePreview(resizeAmount, tableRef, tableNode, tableAligment) {
-  var currentWidth = (0, _misc.getTableContainerElementWidth)(tableNode);
-  var resizingContainer = tableRef === null || tableRef === void 0 ? void 0 : tableRef.closest(".".concat(_types.TableCssClassName.TABLE_RESIZER_CONTAINER));
+var updateTablePreview = function updateTablePreview(tableRef, newTableWidth, shouldChangeAlignment) {
+  var resizingContainer = tableRef.closest(".".concat(_types.TableCssClassName.TABLE_RESIZER_CONTAINER));
   var resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
   var alignmentContainer = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.parentElement;
   if (resizingItem) {
-    var newWidth = "".concat(currentWidth + resizeAmount, "px");
-    if (tableRef) {
-      tableRef.style.width = newWidth;
-    }
+    var newWidth = "".concat(newTableWidth, "px");
     resizingContainer.style.width = newWidth;
     resizingItem.style.width = newWidth;
-    if (tableAligment && alignmentContainer) {
-      alignmentContainer.style.justifyContent = tableAligment;
+    if (shouldChangeAlignment && alignmentContainer) {
+      alignmentContainer.style.justifyContent = _alignment.ALIGN_CENTER;
     }
   }
+};
+var getEditorContainerWidth = function getEditorContainerWidth(editorWidth) {
+  return Math.min(editorWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2, _editorSharedStyles.akEditorFullWidthLayoutWidth);
+};
+
+/**
+ * Apply a scaling factor to resize state
+ */
+var scaleResizeState = exports.scaleResizeState = function scaleResizeState(_ref2) {
+  var resizeState = _ref2.resizeState,
+    tableRef = _ref2.tableRef,
+    tableNode = _ref2.tableNode,
+    editorWidth = _ref2.editorWidth;
+  // check if table is scaled, if not then avoid applying scaling values down
+  if (resizeState.maxSize < getEditorContainerWidth(editorWidth)) {
+    return resizeState;
+  }
+  var scalePercent = (0, _misc.getTableScalingPercent)(tableNode, tableRef);
+  var cols = resizeState.cols.map(function (col) {
+    return _objectSpread(_objectSpread({}, col), {}, {
+      width: Math.round(Math.max(col.width * scalePercent, col.minWidth))
+    });
+  });
+  var scaledTableWidth = Math.round(resizeState.tableWidth * scalePercent);
+  var calculatedTableWidth = cols.reduce(function (prev, curr) {
+    return prev + curr.width;
+  }, 0);
+
+  // using Math.round can cause the sum of col widths to be larger than the table width
+  // distribute the difference to the smallest column
+  if (calculatedTableWidth > scaledTableWidth) {
+    var diff = calculatedTableWidth - scaledTableWidth;
+    cols = cols.map(function (col) {
+      return col.width - diff >= col.minWidth ? _objectSpread(_objectSpread({}, col), {}, {
+        width: col.width - diff
+      }) : col;
+    });
+  }
+  return _objectSpread(_objectSpread({}, resizeState), {}, {
+    widths: cols.map(function (col) {
+      return col.width;
+    }),
+    tableWidth: scaledTableWidth,
+    maxSize: Math.round(resizeState.maxSize * scalePercent),
+    cols: cols
+  });
 };

package/dist/cjs/toolbar.js

@@ -42,7 +42,10 @@ var _alignment = require("./utils/alignment");
 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; } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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; } /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
   var formatMessage = _ref.formatMessage;
   var isTableScalingWithFixedColumnWidthsOptionShown = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;

package/dist/cjs/ui/ColumnResizeWidget/index.js

@@ -12,7 +12,10 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _types = require("../../types");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var ColumnResizeWidget = exports.ColumnResizeWidget = function ColumnResizeWidget(_ref) {

package/dist/cjs/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.js

@@ -8,7 +8,10 @@ var _react = require("@emotion/react");
 var _button = require("@atlaskit/button");
 var _ui = require("@atlaskit/editor-common/ui");
 var _primitives = require("@atlaskit/primitives");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var containerStyles = (0, _primitives.xcss)({

package/dist/cjs/ui/FloatingContextualButton/index.js

@@ -25,7 +25,10 @@ var _FixedButton = _interopRequireDefault(require("./FixedButton"));
 var _styles = require("./styles");
 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; }
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js

@@ -48,7 +48,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/prefer-primitives */ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/prefer-primitives */ /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var arrowsList = new Set(['ArrowRight', 'ArrowLeft']);
 var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ContextualMenu, _Component);

package/dist/cjs/ui/FloatingContextualMenu/index.js

@@ -14,7 +14,10 @@ var _pluginFactory = require("../../pm-plugins/plugin-factory");
 var _consts = require("../consts");
 var _ContextualMenu = _interopRequireDefault(require("./ContextualMenu"));
 var _styles = require("./styles");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var FloatingContextualMenu = function FloatingContextualMenu(_ref) {

package/dist/cjs/ui/FloatingDragMenu/DragMenu.js

@@ -38,7 +38,10 @@ var _styles2 = require("./styles");
 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; }
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 /** @jsxFrag */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/cjs/utils/alignment.js

@@ -20,5 +20,5 @@ var normaliseAlignment = exports.normaliseAlignment = function normaliseAlignmen
  * We don't want to switch alignment in Full-width editor
  */
 var shouldChangeAlignmentToCenterResized = exports.shouldChangeAlignmentToCenterResized = function shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, tableNode, lineLength, updatedTableWidth) {
-  return isTableAlignmentEnabled && tableNode && tableNode.attrs.layout === ALIGN_START && lineLength && updatedTableWidth > lineLength && lineLength < _consts.FULL_WIDTH_EDITOR_CONTENT_WIDTH;
+  return Boolean(isTableAlignmentEnabled && tableNode && tableNode.attrs.layout === ALIGN_START && lineLength && updatedTableWidth > lineLength && lineLength < _consts.FULL_WIDTH_EDITOR_CONTENT_WIDTH);
 };

package/dist/es2019/nodeviews/TableComponent.js

@@ -14,6 +14,7 @@ import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { autoSizeTable, clearHoverSelection } from '../commands';
+import { handleMouseOut, isTableInFocus } from '../event-handlers';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
@@ -52,6 +53,12 @@ class TableComponent extends React.Component {
       tableWrapperWidth: undefined,
       tableWrapperHeight: undefined
     });
+    _defineProperty(this, "handleMouseOut", event => {
+      if (!isTableInFocus(this.props.view)) {
+        return false;
+      }
+      return handleMouseOut(this.props.view, event);
+    });
     _defineProperty(this, "handleMouseEnter", () => {
       const node = this.props.getNode();
       const pos = this.props.getPos();
@@ -348,6 +355,10 @@ class TableComponent extends React.Component {
         this === null || this === void 0 ? void 0 : (_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.addEventListener('mouseenter', this.handleMouseEnter);
       }
     }
+    if (fg('editor_react_18_fix_table_delete_col_decorations')) {
+      var _this$table2;
+      this === null || this === void 0 ? void 0 : (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.addEventListener('mouseout', this.handleMouseOut);
+    }
     const {
       tableWithFixedColumnWidthsOption = false,
       stickyScrollbar
@@ -429,8 +440,12 @@ class TableComponent extends React.Component {
       window.removeEventListener('resize', this.handleWindowResizeDebounced);
     }
     if (fg('platform.editor.table.live-pages-sorting_4malx')) {
-      var _this$table2;
-      this === null || this === void 0 ? void 0 : (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.removeEventListener('mouseenter', this.handleMouseEnter);
+      var _this$table3;
+      this === null || this === void 0 ? void 0 : (_this$table3 = this.table) === null || _this$table3 === void 0 ? void 0 : _this$table3.removeEventListener('mouseenter', this.handleMouseEnter);
+    }
+    if (fg('editor_react_18_fix_table_delete_col_decorations')) {
+      var _this$table4;
+      this === null || this === void 0 ? void 0 : (_this$table4 = this.table) === null || _this$table4 === void 0 ? void 0 : _this$table4.removeEventListener('mouseout', this.handleMouseOut);
     }
     if (this.overflowShadowsObserver) {
       this.overflowShadowsObserver.dispose();

package/dist/es2019/pm-plugins/keymap.js

@@ -23,12 +23,10 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
   bindKeymapWithCommand(addRowAfter.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
   bindKeymapWithCommand(addColumnBefore.common, addColumnBeforeCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
   bindKeymapWithCommand(addColumnAfter.common, addColumnAfterCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
-  if (fg('platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg')) {
-    bindKeymapWithCommand(addRowBeforeVO.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
-    bindKeymapWithCommand(addRowAfterVO.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
-    bindKeymapWithCommand(addColumnBeforeVO.common, addColumnBeforeCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
-    bindKeymapWithCommand(addColumnAfterVO.common, addColumnAfterCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
-  }
+  bindKeymapWithCommand(addRowBeforeVO.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
+  bindKeymapWithCommand(addRowAfterVO.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
+  bindKeymapWithCommand(addColumnBeforeVO.common, addColumnBeforeCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
+  bindKeymapWithCommand(addColumnAfterVO.common, addColumnAfterCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
   if (dragAndDropEnabled) {
     // Move row/column shortcuts
     /**

package/dist/es2019/pm-plugins/main.js

@@ -280,7 +280,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         mousedown: withCellTracking(handleMouseDown),
         mouseover: withCellTracking(whenTableInFocus(handleMouseOver)),
         mouseleave: handleMouseLeave,
-        mouseout: whenTableInFocus(handleMouseOut),
+        mouseout: fg('editor_react_18_fix_table_delete_col_decorations') ? undefined : whenTableInFocus(handleMouseOut),
         mousemove: whenTableInFocus(handleMouseMove),
         mouseenter: handleMouseEnter,
         mouseup: whenTableInFocus(handleMouseUp),