@atlaskit/editor-plugin-table 7.5.4 → 7.5.6

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-table
 
+## 7.5.6
+
+### Patch Changes
+
+- [#72764](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72764) [`1a23abba80b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1a23abba80b0) - Minor performance improvements to reduce reflows and re-renders
+
+## 7.5.5
+
+### Patch Changes
+
+- [#79509](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/79509) [`111e580bb58a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/111e580bb58a) - update preserve table width changes to only appear on full width pages
+- Updated dependencies
+
 ## 7.5.4
 
 ### Patch Changes

package/dist/cjs/commands/column-resize.js

@@ -128,7 +128,7 @@ var activateNextResizeArea = exports.activateNextResizeArea = function activateN
   };
 };
 var changeColumnWidthByStep = exports.changeColumnWidthByStep = function changeColumnWidthByStep(stepSize, getEditorContainerWidth) {
-  var tablePreserveWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var isTableScalingEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   return function (state, dispatch, view) {
     var customTr = state.tr;
     var fakeDispatch = function fakeDispatch(tr) {
@@ -178,14 +178,14 @@ var changeColumnWidthByStep = exports.changeColumnWidthByStep = function changeC
       tableRef: dom,
       start: tableStartPosition,
       domAtPos: domAtPos,
-      tablePreserveWidth: tablePreserveWidth
+      isTableScalingEnabled: isTableScalingEnabled
     });
     (0, _utils3.updateControls)()(state);
     var selectionRect = (0, _utils.getSelectionRect)(state.selection);
     var selectedColumns = selectionRect ? (0, _utils4.getSelectedColumnIndexes)(selectionRect) : [];
     // only selected (or selected - 1) columns should be distributed
     var resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
-    var newResizeState = (0, _utils3.resizeColumn)(initialResizeState, colIndex, stepSize, dom, resizingSelectedColumns ? selectedColumns : undefined, tablePreserveWidth);
+    var newResizeState = (0, _utils3.resizeColumn)(initialResizeState, colIndex, stepSize, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, isTableScalingEnabled);
     customTr = (0, _transforms.updateColumnWidths)(newResizeState, originalTable, tableStartPosition)(customTr);
     if (dispatch) {
       dispatch(customTr);

package/dist/cjs/commands/delete.js

@@ -7,9 +7,9 @@ exports.deleteColumnsCommand = void 0;
 var _deleteColumns = require("../transforms/delete-columns");
 var _getAllowAddColumnCustomStep = require("../utils/get-allow-add-column-custom-step");
 var deleteColumnsCommand = exports.deleteColumnsCommand = function deleteColumnsCommand(rect) {
-  var tablePreserveWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var isTableScalingEnabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (state, dispatch, view) {
-    var tr = (0, _deleteColumns.deleteColumns)(rect, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view, tablePreserveWidth)(state.tr);
+    var tr = (0, _deleteColumns.deleteColumns)(rect, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view, isTableScalingEnabled)(state.tr);
     if (dispatch) {
       dispatch(tr);
       return true;

package/dist/cjs/commands/insert.js

@@ -29,8 +29,8 @@ function addColumnAtCustomStep(column) {
     return tr;
   };
 }
-function addColumnAt(getEditorContainerWidth) {
-  var tablePreserveWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+function addColumnAt() {
+  var isTableScalingEnabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   return function (column) {
     var allowAddColumnCustomStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var view = arguments.length > 2 ? arguments[2] : undefined;
@@ -44,7 +44,7 @@ function addColumnAt(getEditorContainerWidth) {
       var table = (0, _utils2.findTable)(updatedTr.selection);
       if (table) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
-        updatedTr = (0, _columnWidth.rescaleColumns)(tablePreserveWidth)(table, view)(updatedTr);
+        updatedTr = (0, _columnWidth.rescaleColumns)(isTableScalingEnabled)(table, view)(updatedTr);
       }
       if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.analytics-plugin-moved-event') && view) {
         updatedTr = (0, _commands.updateRowOrColumnMovedTransform)({
@@ -61,8 +61,8 @@ function addColumnAt(getEditorContainerWidth) {
 
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column before the column with the selection.
-var addColumnBefore = exports.addColumnBefore = function addColumnBefore(getEditorContainerWidth) {
-  var tablePreserveWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+var addColumnBefore = exports.addColumnBefore = function addColumnBefore() {
+  var isTableScalingEnabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   return function (state, dispatch, view) {
     var table = (0, _utils2.findTable)(state.selection);
     if (!table) {
@@ -70,7 +70,7 @@ var addColumnBefore = exports.addColumnBefore = function addColumnBefore(getEdit
     }
     if (dispatch) {
       var rect = (0, _utils2.selectedRect)(state);
-      dispatch(addColumnAt(getEditorContainerWidth, tablePreserveWidth)(rect.left, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr));
+      dispatch(addColumnAt(isTableScalingEnabled)(rect.left, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr));
     }
     return true;
   };
@@ -78,7 +78,7 @@ var addColumnBefore = exports.addColumnBefore = function addColumnBefore(getEdit
 
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column after the column with the selection.
-var addColumnAfter = exports.addColumnAfter = function addColumnAfter(getEditorContainerWidth) {
+var addColumnAfter = exports.addColumnAfter = function addColumnAfter(isTableScalingEnabled) {
   return function (state, dispatch, view) {
     var table = (0, _utils2.findTable)(state.selection);
     if (!table) {
@@ -86,16 +86,16 @@ var addColumnAfter = exports.addColumnAfter = function addColumnAfter(getEditorC
     }
     if (dispatch) {
       var rect = (0, _utils2.selectedRect)(state);
-      dispatch(addColumnAt(getEditorContainerWidth)(rect.right, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr));
+      dispatch(addColumnAt(isTableScalingEnabled)(rect.right, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr));
     }
     return true;
   };
 };
-var insertColumn = exports.insertColumn = function insertColumn(getEditorContainerWidth) {
-  var tablePreserveWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+var insertColumn = exports.insertColumn = function insertColumn() {
+  var isTableScalingEnabled = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   return function (column) {
     return function (state, dispatch, view) {
-      var tr = addColumnAt(getEditorContainerWidth, tablePreserveWidth)(column, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr);
+      var tr = addColumnAt(isTableScalingEnabled)(column, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr);
       var table = (0, _utils2.findTable)(tr.selection);
       if (!table) {
         return false;
@@ -144,20 +144,20 @@ var insertRow = exports.insertRow = function insertRow(row, moveCursorToTheNewRo
     return true;
   };
 };
-var createTable = exports.createTable = function createTable(isFullWidthModeEnabled, getEditorFeatureFlags) {
+var createTable = exports.createTable = function createTable(isTableScalingEnabled, isFullWidthModeEnabled) {
   return function (state, dispatch) {
-    var table = (0, _utils3.createTableWithWidth)(isFullWidthModeEnabled, getEditorFeatureFlags)(state.schema);
+    var table = (0, _utils3.createTableWithWidth)(isTableScalingEnabled, isFullWidthModeEnabled)(state.schema);
     if (dispatch) {
       dispatch((0, _utils.safeInsert)(table)(state.tr).scrollIntoView());
     }
     return true;
   };
 };
-var insertTableWithSize = exports.insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, getEditorFeatureFlags, editorAnalyticsAPI) {
+var insertTableWithSize = exports.insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, isTableScalingEnabled, editorAnalyticsAPI) {
   return function (rowsCount, colsCount, inputMethod) {
     return function (_ref) {
       var tr = _ref.tr;
-      var tableNode = (0, _utils3.createTableWithWidth)(isFullWidthModeEnabled, getEditorFeatureFlags, {
+      var tableNode = (0, _utils3.createTableWithWidth)(isTableScalingEnabled, isFullWidthModeEnabled, {
         rowsCount: rowsCount,
         colsCount: colsCount
       })(tr.doc.type.schema);

package/dist/cjs/commands-with-analytics.js

@@ -191,7 +191,7 @@ var insertRowWithAnalytics = exports.insertRowWithAnalytics = function insertRow
   };
 };
 var changeColumnWidthByStepWithAnalytics = exports.changeColumnWidthByStepWithAnalytics = function changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI) {
-  return function (stepSize, getEditorContainerWidth, tablePreserveWidth, inputMethod) {
+  return function (stepSize, getEditorContainerWidth, isTableScalingEnabled, inputMethod) {
     return (0, _analytics2.withEditorAnalyticsAPI)(function (state) {
       var _getSelectedTableInfo2 = (0, _utils2.getSelectedTableInfo)(state.selection),
         table = _getSelectedTableInfo2.table,
@@ -213,11 +213,11 @@ var changeColumnWidthByStepWithAnalytics = exports.changeColumnWidthByStepWithAn
           totalColumnCount: totalColumnCount
         }
       };
-    })(editorAnalyticsAPI)((0, _columnResize.changeColumnWidthByStep)(stepSize, getEditorContainerWidth, tablePreserveWidth));
+    })(editorAnalyticsAPI)((0, _columnResize.changeColumnWidthByStep)(stepSize, getEditorContainerWidth, isTableScalingEnabled));
   };
 };
-var insertColumnWithAnalytics = exports.insertColumnWithAnalytics = function insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI) {
-  var tablePreserveWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+var insertColumnWithAnalytics = exports.insertColumnWithAnalytics = function insertColumnWithAnalytics(editorAnalyticsAPI) {
+  var isTableScalingEnabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (inputMethod, position) {
     return (0, _analytics2.withEditorAnalyticsAPI)(function (state) {
       var _getSelectedTableInfo3 = (0, _utils2.getSelectedTableInfo)(state.selection),
@@ -235,7 +235,7 @@ var insertColumnWithAnalytics = exports.insertColumnWithAnalytics = function ins
         },
         eventType: _analytics.EVENT_TYPE.TRACK
       };
-    })(editorAnalyticsAPI)((0, _insert.insertColumn)(getEditorContainerWidth, tablePreserveWidth)(position));
+    })(editorAnalyticsAPI)((0, _insert.insertColumn)(isTableScalingEnabled)(position));
   };
 };
 var deleteRowsWithAnalytics = exports.deleteRowsWithAnalytics = function deleteRowsWithAnalytics(editorAnalyticsAPI) {
@@ -267,7 +267,7 @@ var deleteRowsWithAnalytics = exports.deleteRowsWithAnalytics = function deleteR
   };
 };
 var deleteColumnsWithAnalytics = exports.deleteColumnsWithAnalytics = function deleteColumnsWithAnalytics(editorAnalyticsAPI) {
-  var tablePreserveWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var isTableScalingEnabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (inputMethod, rect) {
     return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref6) {
       var selection = _ref6.selection;
@@ -287,7 +287,7 @@ var deleteColumnsWithAnalytics = exports.deleteColumnsWithAnalytics = function d
         },
         eventType: _analytics.EVENT_TYPE.TRACK
       };
-    })(editorAnalyticsAPI)((0, _delete.deleteColumnsCommand)(rect, tablePreserveWidth));
+    })(editorAnalyticsAPI)((0, _delete.deleteColumnsCommand)(rect, isTableScalingEnabled));
   };
 };
 var deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = exports.deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = function deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI) {

package/dist/cjs/event-handlers.js

@@ -8,6 +8,7 @@ exports.handleMouseUp = exports.handleMouseOver = exports.handleMouseOut = expor
 exports.handleTripleClick = handleTripleClick;
 exports.withCellTracking = exports.whenTableInFocus = exports.isTableInFocus = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state5 = require("@atlaskit/editor-prosemirror/state");
@@ -257,7 +258,10 @@ var handleMouseLeave = exports.handleMouseLeave = function handleMouseLeave(view
   }
   return false;
 };
-var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, event, elementContentRects) {
+
+// IMPORTANT: The mouse move handler has been setup with RAF schedule to avoid Reflows which will occur as some methods
+// need to access the mouse event offset position and also the target clientWidth vallue.
+var handleMouseMoveDebounce = (0, _rafSchd.default)(function (view, event, offsetX) {
   if (!(event.target instanceof HTMLElement)) {
     return false;
   }
@@ -266,13 +270,12 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
     var state = view.state,
       dispatch = view.dispatch;
     var _getPluginState6 = (0, _pluginFactory2.getPluginState)(state),
-      insertColumnButtonIndex = _getPluginState6.insertColumnButtonIndex,
-      isDragAndDropEnabled = _getPluginState6.isDragAndDropEnabled;
+      insertColumnButtonIndex = _getPluginState6.insertColumnButtonIndex;
     var _getColumnOrRowIndex9 = (0, _utils3.getColumnOrRowIndex)(element),
       _getColumnOrRowIndex10 = (0, _slicedToArray2.default)(_getColumnOrRowIndex9, 2),
       startIndex = _getColumnOrRowIndex10[0],
       endIndex = _getColumnOrRowIndex10[1];
-    var positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, elementContentRects, undefined, isDragAndDropEnabled) === 'right' ? endIndex : startIndex;
+    var positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, offsetX, undefined) === 'right' ? endIndex : startIndex;
     if (positionColumn !== insertColumnButtonIndex) {
       return (0, _commands.showInsertColumnButton)(positionColumn)(state, dispatch);
     }
@@ -292,7 +295,7 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
     }
   }
   if (!(0, _utils3.isResizeHandleDecoration)(element) && (0, _utils3.isCell)(element)) {
-    var _positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, elementContentRects, _types.RESIZE_HANDLE_AREA_DECORATION_GAP);
+    var _positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, offsetX, _types.RESIZE_HANDLE_AREA_DECORATION_GAP);
     if (_positionColumn !== null) {
       var _state4 = view.state,
         _dispatch5 = view.dispatch;
@@ -317,6 +320,19 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
     }
   }
   return false;
+});
+var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, event) {
+  if (!(event.target instanceof HTMLElement)) {
+    return false;
+  }
+
+  // NOTE: When accessing offsetX in gecko from a deferred callback, it will return 0. However it will be non-zero if accessed
+  // within the scope of it's initial mouse move handler. Also Chrome does return the correct value, however it could trigger
+  // a reflow. So for now this will just grab the offsetX value immediately for gecko and chrome will calculate later
+  // in the deferred callback handler.
+  // Bug Tracking: https://bugzilla.mozilla.org/show_bug.cgi?id=1882903
+  handleMouseMoveDebounce(view, event, _utils.browser.gecko ? event.offsetX : NaN);
+  return false;
 };
 function handleTripleClick(view, pos) {
   var state = view.state,
@@ -337,7 +353,7 @@ function handleTripleClick(view, pos) {
   return false;
 }
 var handleCut = exports.handleCut = function handleCut(oldTr, oldState, newState, editorAnalyticsAPI, editorView) {
-  var tablePreserveWidth = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var isTableScalingEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var oldSelection = oldState.tr.selection;
   var tr = newState.tr;
   if (oldSelection instanceof _cellSelection.CellSelection) {
@@ -380,7 +396,7 @@ var handleCut = exports.handleCut = function handleCut(oldTr, oldState, newState
               isHeaderRowRequired = _getPluginState9.pluginConfig.isHeaderRowRequired;
             tr = (0, _transforms.deleteRows)(rect, isHeaderRowRequired)(tr);
           } else if (tr.selection.isColSelection()) {
-            tr = (0, _transforms.deleteColumns)(rect, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(oldState), editorView, tablePreserveWidth)(tr);
+            tr = (0, _transforms.deleteColumns)(rect, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(oldState), editorView, isTableScalingEnabled)(tr);
           }
         }
       }
@@ -392,12 +408,12 @@ var isTableInFocus = exports.isTableInFocus = function isTableInFocus(view) {
   var _getPluginState10, _getResizePluginState;
   return !!((_getPluginState10 = (0, _pluginFactory2.getPluginState)(view.state)) !== null && _getPluginState10 !== void 0 && _getPluginState10.tableNode) && !((_getResizePluginState = (0, _pluginFactory3.getPluginState)(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
 };
-var whenTableInFocus = exports.whenTableInFocus = function whenTableInFocus(eventHandler, elementContentRects) {
+var whenTableInFocus = exports.whenTableInFocus = function whenTableInFocus(eventHandler) {
   return function (view, mouseEvent) {
     if (!isTableInFocus(view)) {
       return false;
     }
-    return eventHandler(view, mouseEvent, elementContentRects);
+    return eventHandler(view, mouseEvent);
   };
 };
 var trackCellLocation = function trackCellLocation(view, mouseEvent) {
@@ -427,11 +443,11 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   }
   (0, _commands.hoverCell)(htmlRowIndex, colIndex)(view.state, view.dispatch);
 };
-var withCellTracking = exports.withCellTracking = function withCellTracking(eventHandler, elementContentRects) {
+var withCellTracking = exports.withCellTracking = function withCellTracking(eventHandler) {
   return function (view, mouseEvent) {
     if ((0, _pluginFactory2.getPluginState)(view.state).isDragAndDropEnabled && !(0, _pluginFactory.getPluginState)(view.state).isDragging) {
       trackCellLocation(view, mouseEvent);
     }
-    return eventHandler(view, mouseEvent, elementContentRects);
+    return eventHandler(view, mouseEvent);
   };
 };

package/dist/cjs/nodeviews/OverflowShadowsObserver.js

@@ -8,6 +8,7 @@ exports.OverflowShadowsObserver = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("../types");
 var _consts = require("../ui/consts");
@@ -49,8 +50,13 @@ var OverflowShadowsObserver = exports.OverflowShadowsObserver = /*#__PURE__*/fun
     });
     (0, _defineProperty2.default)(this, "observeShadowSentinels", function (isSticky) {
       var _this$table, _this$table2;
+      if (_this.isSticky === isSticky) {
+        return;
+      }
       _this.isSticky = !!isSticky;
 
+      // reset height
+      _this.stickyRowHeight = 0;
       // update sticky shadows
       _this.updateStickyShadowsHeightIfChanged();
       _this.leftShadowSentinel = (_this$table = _this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(".".concat(_types.TableCssClassName.TABLE_SHADOW_SENTINEL_LEFT));
@@ -67,8 +73,8 @@ var OverflowShadowsObserver = exports.OverflowShadowsObserver = /*#__PURE__*/fun
      * e.g. bounds on an IntersectionObserverEntry, otherwise proceed with
      * reading it from sticky cell
      */
-    (0, _defineProperty2.default)(this, "updateStickyShadows", function (stickyRowHeight) {
-      var _this$wrapper, _this$wrapper2, _this$wrapper3;
+    (0, _defineProperty2.default)(this, "updateStickyShadows", (0, _rafSchd.default)(function (stickyRowHeight) {
+      var _this$wrapper;
       if (!_this.isSticky) {
         return;
       }
@@ -76,14 +82,21 @@ var OverflowShadowsObserver = exports.OverflowShadowsObserver = /*#__PURE__*/fun
       if (!stickyCell || !((_this$wrapper = _this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement)) {
         return;
       }
-      var heightStyleOrCompute = "".concat(stickyRowHeight || stickyCell.clientHeight + 1, "px");
-      // Use getElementsByClassName here for a live node list to capture
-      // sticky shadows
-      var liveRightShadows = (_this$wrapper2 = _this.wrapper) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.parentElement) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.getElementsByClassName("".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW));
-      var liveLeftShadows = (_this$wrapper3 = _this.wrapper) === null || _this$wrapper3 === void 0 || (_this$wrapper3 = _this$wrapper3.parentElement) === null || _this$wrapper3 === void 0 ? void 0 : _this$wrapper3.getElementsByClassName("".concat(_types.TableCssClassName.TABLE_LEFT_SHADOW));
-      (0, _updateOverflowShadows.updateShadowListForStickyStyles)(heightStyleOrCompute, liveLeftShadows);
-      (0, _updateOverflowShadows.updateShadowListForStickyStyles)(heightStyleOrCompute, liveRightShadows);
-    });
+
+      // Reflow Warning! - stickyCell.clientHeight
+      var newStickyRowHeight = stickyRowHeight || stickyCell.clientHeight + 1;
+      if (newStickyRowHeight !== _this.stickyRowHeight) {
+        var _this$wrapper2, _this$wrapper3;
+        _this.stickyRowHeight = newStickyRowHeight;
+        var heightStyleOrCompute = "".concat(newStickyRowHeight, "px");
+        // Use getElementsByClassName here for a live node list to capture
+        // sticky shadows
+        var liveRightShadows = (_this$wrapper2 = _this.wrapper) === null || _this$wrapper2 === void 0 || (_this$wrapper2 = _this$wrapper2.parentElement) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.getElementsByClassName("".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW));
+        var liveLeftShadows = (_this$wrapper3 = _this.wrapper) === null || _this$wrapper3 === void 0 || (_this$wrapper3 = _this$wrapper3.parentElement) === null || _this$wrapper3 === void 0 ? void 0 : _this$wrapper3.getElementsByClassName("".concat(_types.TableCssClassName.TABLE_LEFT_SHADOW));
+        (0, _updateOverflowShadows.updateShadowListForStickyStyles)(heightStyleOrCompute, liveLeftShadows);
+        (0, _updateOverflowShadows.updateShadowListForStickyStyles)(heightStyleOrCompute, liveRightShadows);
+      }
+    }));
     this.updateShadowState = updateShadowState;
     this.table = _table;
     this.wrapper = wrapper;
@@ -99,11 +112,7 @@ var OverflowShadowsObserver = exports.OverflowShadowsObserver = /*#__PURE__*/fun
       if (!stickyCell) {
         return;
       }
-      var newStickyRowHeight = stickyCell.clientHeight + 1;
-      if (newStickyRowHeight === this.stickyRowHeight) {
-        this.stickyRowHeight = newStickyRowHeight;
-        this.updateStickyShadows(this.stickyRowHeight);
-      }
+      this.updateStickyShadows();
     }
   }, {
     key: "getStickyCell",

package/dist/cjs/nodeviews/TableCell.js

@@ -11,9 +11,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _uuid = _interopRequireDefault(require("uuid"));
 var _adfSchema = require("@atlaskit/adf-schema");
-var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _TableNodeViewBase = _interopRequireDefault(require("./TableNodeViewBase"));
 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; })(); }
@@ -22,26 +20,10 @@ var DEFAULT_ROW_SPAN = 1;
 var TableCell = exports.default = /*#__PURE__*/function (_ref) {
   (0, _inherits2.default)(TableCell, _ref);
   var _super = _createSuper(TableCell);
-  function TableCell(node, view, getPos, eventDispatcher, observer) {
-    var _this;
+  function TableCell(node, view, getPos, eventDispatcher) {
     (0, _classCallCheck2.default)(this, TableCell);
-    _this = _super.call(this, node, view, getPos, eventDispatcher);
-    _this.observer = observer;
-    var _getPluginState = (0, _pluginFactory.getPluginState)(view.state),
-      pluginConfig = _getPluginState.pluginConfig,
-      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
-    _this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
-    _this.isDragAndDropEnabled = !!isDragAndDropEnabled;
-    if (observer) {
-      _this.contentDOM.id = (0, _uuid.default)();
-      observer.observe(_this.contentDOM);
-    }
-    return _this;
+    return _super.call(this, node, view, getPos, eventDispatcher);
   }
-
-  // @ts-ignore
-
-  // @ts-ignore
   (0, _createClass2.default)(TableCell, [{
     key: "update",
     value: function update(node) {
@@ -51,17 +33,10 @@ var TableCell = exports.default = /*#__PURE__*/function (_ref) {
       }
       return didUpdate;
     }
-  }, {
-    key: "destroy",
-    value: function destroy() {
-      if (this.observer) {
-        this.observer.unobserve(this.contentDOM);
-      }
-    }
   }, {
     key: "updateNodeView",
     value: function updateNodeView(node) {
-      var _this2 = this;
+      var _this = this;
       if (this.node.type !== node.type) {
         return false;
       }
@@ -92,10 +67,10 @@ var TableCell = exports.default = /*#__PURE__*/function (_ref) {
           var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
             key = _ref5[0],
             value = _ref5[1];
-          return _this2.dom.setAttribute(key, value || '');
+          return _this.dom.setAttribute(key, value || '');
         });
         removedAttrs.forEach(function (key) {
-          return _this2.dom.removeAttribute(key);
+          return _this.dom.removeAttribute(key);
         });
         return true;
       }