@atlaskit/editor-plugin-table 7.5.5 → 7.5.7

package/dist/es2019/ui/TableFloatingControls/index.js

@@ -1,205 +1,131 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from 'react';
+import React, { useCallback } from 'react';
 import { browser } from '@atlaskit/editor-common/utils';
 import { hoverCell, hoverRows, selectRow, selectRows } from '../../commands';
 import { TableCssClassName as ClassName } from '../../types';
-import { isSelectionUpdated } from '../../utils';
 import { CornerControls, DragCornerControls } from './CornerControls';
 import NumberColumn from './NumberColumn';
 import { DragControls, RowControls } from './RowControls';
-export default class TableFloatingControls extends Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "selectRow", (row, expand) => {
-      const {
-        editorView
-      } = this.props;
-      const {
-        state,
-        dispatch
-      } = editorView;
-      // fix for issue ED-4665
-      if (browser.ie_version === 11) {
-        editorView.dom.blur();
-      }
-      selectRow(row, expand)(state, dispatch);
-    });
-    _defineProperty(this, "selectRows", rowIndexes => {
-      const {
-        editorView
-      } = this.props;
-      const {
-        state,
-        dispatch
-      } = editorView;
-      // fix for issue ED-4665
-      if (browser.ie_version === 11) {
-        editorView.dom.blur();
-      }
-      selectRows(rowIndexes)(state, dispatch);
-    });
-    _defineProperty(this, "hoverRows", (rows, danger) => {
-      const {
-        state,
-        dispatch
-      } = this.props.editorView;
-      hoverRows(rows, danger)(state, dispatch);
-    });
-    // re-use across numbered columns and row controls
-    _defineProperty(this, "updateCellHoverLocation", rowIndex => {
-      const {
-        editorView,
-        tableActive
-      } = this.props;
-      const {
-        state,
-        dispatch
-      } = editorView;
-      if (tableActive) {
-        // For context:  Whenever we mouse over a column or row drag handle, we will ALWAYS be hovering over the 0 index
-        // of the opposite dimension. For example; here when we mouse over the row drag handle then we're technically
-        // also hovering over column 0 index. And vice-versa with columns. This means we don't need to worry about knowing the
-        // current column index. We can just force it to 0.
-        hoverCell(rowIndex, 0)(state, dispatch);
-      }
-    });
-    this.state = {
-      tableWrapperWidth: 0,
-      /** Height needs to be tracked to re-render decorations correctly, do not remove */
-      tableWrapperHeight: 0
-    };
-  }
-  componentDidMount() {
-    this.tryInitResizeObserver();
-  }
-  componentDidUpdate() {
-    // tableRef prop is not guaranteed to be defined after componentDidMount, so retry to init resize observer on update
-    this.tryInitResizeObserver();
-  }
-
-  // tracking the table height changes to update floating controls
-  tryInitResizeObserver() {
-    var _window;
-    let {
-      tableRef
-    } = this.props;
-    if (tableRef && !this.resizeObserver && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
-      const tableWrapper = tableRef.closest(`.${ClassName.TABLE_NODE_WRAPPER}`);
-      this.resizeObserver = new ResizeObserver(entries => {
-        for (let entry of entries) {
-          this.setState(prev => {
-            return (prev === null || prev === void 0 ? void 0 : prev.tableWrapperWidth) === entry.contentRect.width && prev.tableWrapperHeight === entry.contentRect.height ? prev : {
-              tableWrapperWidth: entry.contentRect.width,
-              tableWrapperHeight: entry.contentRect.height
-            };
-          });
-        }
-      });
-      this.resizeObserver.observe(tableWrapper);
+export const TableFloatingControls = ({
+  editorView,
+  tableRef,
+  tableNode,
+  isInDanger,
+  isResizing,
+  isNumberColumnEnabled,
+  isHeaderRowEnabled,
+  isHeaderColumnEnabled,
+  tableActive,
+  hasHeaderRow,
+  hoveredRows,
+  stickyHeader,
+  isDragAndDropEnabled,
+  hoveredCell,
+  isTableHovered,
+  tableWrapperWidth
+}) => {
+  const _selectRow = useCallback((row, expand) => {
+    const {
+      state,
+      dispatch
+    } = editorView;
+    // fix for issue ED-4665
+    if (browser.ie_version === 11) {
+      editorView.dom.blur();
     }
-  }
-  shouldComponentUpdate(nextProps, nextState) {
+    selectRow(row, expand)(state, dispatch);
+  }, [editorView]);
+  const _selectRows = useCallback(rowIndexes => {
     const {
-      tableRef,
-      isInDanger,
-      isResizing,
-      isHeaderRowEnabled,
-      isNumberColumnEnabled,
-      hoveredRows,
-      selection,
-      tableActive,
-      isHeaderColumnEnabled,
-      ordering,
-      headerRowHeight,
-      stickyHeader,
-      hoveredCell,
-      isTableHovered
-    } = this.props;
-    return this.state.tableWrapperWidth !== nextState.tableWrapperWidth || this.state.tableWrapperHeight !== nextState.tableWrapperHeight || ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader || hoveredCell !== nextProps.hoveredCell || isTableHovered !== nextProps.isTableHovered;
-  }
-  componentWillUnmount() {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
+      state,
+      dispatch
+    } = editorView;
+    // fix for issue ED-4665
+    if (browser.ie_version === 11) {
+      editorView.dom.blur();
     }
-  }
-  render() {
+    selectRows(rowIndexes)(state, dispatch);
+  }, [editorView]);
+  const _hoverRows = useCallback((rows, danger) => {
+    const {
+      state,
+      dispatch
+    } = editorView;
+    hoverRows(rows, danger)(state, dispatch);
+  }, [editorView]);
+
+  // re-use across numbered columns and row controls
+  const updateCellHoverLocation = useCallback(rowIndex => {
     const {
-      editorView,
-      tableRef,
-      tableNode,
-      isInDanger,
-      isResizing,
-      isNumberColumnEnabled,
-      isHeaderRowEnabled,
-      isHeaderColumnEnabled,
-      tableActive,
-      hasHeaderRow,
-      hoveredRows,
-      stickyHeader,
-      isDragAndDropEnabled,
-      hoveredCell,
-      isTableHovered
-    } = this.props;
-    if (!tableRef) {
-      return null;
+      state,
+      dispatch
+    } = editorView;
+    if (tableActive) {
+      // For context:  Whenever we mouse over a column or row drag handle, we will ALWAYS be hovering over the 0 index
+      // of the opposite dimension. For example; here when we mouse over the row drag handle then we're technically
+      // also hovering over column 0 index. And vice-versa with columns. This means we don't need to worry about knowing the
+      // current column index. We can just force it to 0.
+      hoverCell(rowIndex, 0)(state, dispatch);
     }
-    const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
-    const wrapperClassName = isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER;
-    return /*#__PURE__*/React.createElement("div", {
-      className: wrapperClassName
-    }, /*#__PURE__*/React.createElement("div", {
-      onMouseDown: e => !isDragAndDropEnabled && e.preventDefault()
-    }, isNumberColumnEnabled ? /*#__PURE__*/React.createElement(NumberColumn, {
-      editorView: editorView,
-      hoverRows: this.hoverRows,
-      tableRef: tableRef,
-      tableActive: tableActive,
-      hoveredRows: hoveredRows,
-      hasHeaderRow: hasHeaderRow,
-      isInDanger: isInDanger,
-      isResizing: isResizing,
-      selectRow: this.selectRow,
-      updateCellHoverLocation: this.updateCellHoverLocation,
-      stickyTop: stickyTop,
-      isDragAndDropEnabled: isDragAndDropEnabled
-    }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DragCornerControls, {
-      editorView: editorView,
-      tableRef: tableRef,
-      isInDanger: isInDanger,
-      isResizing: isResizing
-    }), /*#__PURE__*/React.createElement(DragControls, {
-      tableRef: tableRef,
-      tableNode: tableNode,
-      hoveredCell: hoveredCell,
-      isTableHovered: isTableHovered,
-      editorView: editorView,
-      tableActive: tableActive,
-      isInDanger: isInDanger,
-      isResizing: isResizing,
-      tableWidth: this.state.tableWrapperWidth,
-      hoverRows: this.hoverRows,
-      selectRow: this.selectRow,
-      selectRows: this.selectRows,
-      updateCellHoverLocation: this.updateCellHoverLocation
-    })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
-      editorView: editorView,
-      tableRef: tableRef,
-      isInDanger: isInDanger,
-      isResizing: isResizing,
-      isHeaderRowEnabled: isHeaderRowEnabled,
-      isHeaderColumnEnabled: isHeaderColumnEnabled,
-      hoveredRows: hoveredRows,
-      stickyTop: tableActive ? stickyTop : undefined
-    }), /*#__PURE__*/React.createElement(RowControls, {
-      editorView: editorView,
-      tableRef: tableRef,
-      hoverRows: this.hoverRows,
-      hoveredRows: hoveredRows,
-      isInDanger: isInDanger,
-      isResizing: isResizing,
-      selectRow: this.selectRow,
-      stickyTop: tableActive ? stickyTop : undefined
-    })))));
+  }, [editorView, tableActive]);
+  if (!tableRef) {
+    return null;
   }
-}
-_defineProperty(TableFloatingControls, "displayName", 'TableFloatingControls');
+  const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
+  const wrapperClassName = isDragAndDropEnabled ? ClassName.DRAG_ROW_CONTROLS_WRAPPER : ClassName.ROW_CONTROLS_WRAPPER;
+  return /*#__PURE__*/React.createElement("div", {
+    className: wrapperClassName
+  }, /*#__PURE__*/React.createElement("div", {
+    onMouseDown: e => !isDragAndDropEnabled && e.preventDefault()
+  }, isNumberColumnEnabled ? /*#__PURE__*/React.createElement(NumberColumn, {
+    editorView: editorView,
+    hoverRows: _hoverRows,
+    tableRef: tableRef,
+    tableActive: tableActive,
+    hoveredRows: hoveredRows,
+    hasHeaderRow: hasHeaderRow,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    selectRow: _selectRow,
+    updateCellHoverLocation: updateCellHoverLocation,
+    stickyTop: stickyTop,
+    isDragAndDropEnabled: isDragAndDropEnabled
+  }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DragCornerControls, {
+    editorView: editorView,
+    tableRef: tableRef,
+    isInDanger: isInDanger,
+    isResizing: isResizing
+  }), /*#__PURE__*/React.createElement(DragControls, {
+    tableRef: tableRef,
+    tableNode: tableNode,
+    hoveredCell: hoveredCell,
+    isTableHovered: isTableHovered,
+    editorView: editorView,
+    tableActive: tableActive,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    tableWidth: tableWrapperWidth,
+    hoverRows: _hoverRows,
+    selectRow: _selectRow,
+    selectRows: _selectRows,
+    updateCellHoverLocation: updateCellHoverLocation
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
+    editorView: editorView,
+    tableRef: tableRef,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    isHeaderRowEnabled: isHeaderRowEnabled,
+    isHeaderColumnEnabled: isHeaderColumnEnabled,
+    hoveredRows: hoveredRows,
+    stickyTop: tableActive ? stickyTop : undefined
+  }), /*#__PURE__*/React.createElement(RowControls, {
+    editorView: editorView,
+    tableRef: tableRef,
+    hoverRows: _hoverRows,
+    hoveredRows: hoveredRows,
+    isInDanger: isInDanger,
+    isResizing: isResizing,
+    selectRow: _selectRow,
+    stickyTop: tableActive ? stickyTop : undefined
+  })))));
+};
+export default TableFloatingControls;

package/dist/es2019/utils/column-controls.js

@@ -2,7 +2,7 @@ import { maphElem } from '@atlaskit/editor-common/utils';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { findTable, getCellsInColumn, getSelectionRect, isColumnSelected, isTableSelected } from '@atlaskit/editor-tables/utils';
+import { findTable, getSelectionRect, isColumnSelected, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { tableDeleteButtonSize } from '../ui/consts';
 export const getColumnsWidths = view => {
@@ -20,13 +20,13 @@ export const getColumnsWidths = view => {
       length: map.width
     });
     for (let i = 0; i < map.width; i++) {
-      const cells = getCellsInColumn(i)(selection);
-      const cell = cells[0];
-      if (cell) {
-        const cellRef = findDomRefAtPos(cell.pos, domAtPos);
+      if (!map.isCellMergedTopLeft(0, i)) {
+        const node = table.node.nodeAt(map.map[i]);
+        const pos = map.map[i] + table.start;
+        const cellRef = findDomRefAtPos(pos, domAtPos);
         const rect = cellRef.getBoundingClientRect();
         widths[i] = (rect ? rect.width : cellRef.offsetWidth) + 1;
-        i += cell.node.attrs.colspan - 1;
+        i += node.attrs.colspan - 1;
       }
     }
   }

package/dist/es2019/utils/dom.js

@@ -1,6 +1,5 @@
 import { closestElement, containsClassName } from '@atlaskit/editor-common/utils';
 import { TableCssClassName as ClassName } from '../types';
-const SELECTOR_TABLE_LEAFS = `.${ClassName.TABLE_CELL}, .${ClassName.TABLE_HEADER_CELL}`;
 export const isCell = node => {
   return Boolean(node && (['TH', 'TD'].indexOf(node.tagName) > -1 || !!closestElement(node, `.${ClassName.TABLE_HEADER_CELL}`) || !!closestElement(node, `.${ClassName.TABLE_CELL}`)));
 };
@@ -72,22 +71,21 @@ export const isDragCornerButton = node => containsClassName(node, ClassName.DRAG
  *
  * the same is valid to the right side.
  */
-
-export const getMousePositionHorizontalRelativeByElement = (mouseEvent, elementContentRects, gapInPixels, isDragAndDropEnabled) => {
+/**
+ * This can be used with mouse events to determine the left/right side of the target the pointer is closest too.
+ *
+ * WARNING: This metod reads properties which can trigger a reflow; use this wisely.
+ *
+ * @param mouseEvent
+ * @param gapInPixels
+ * @returns
+ */
+export const getMousePositionHorizontalRelativeByElement = (mouseEvent, offsetX, gapInPixels) => {
   const element = mouseEvent.target;
   if (element instanceof HTMLElement) {
-    let width, x;
-    if (isDragAndDropEnabled) {
-      // mouse event fires for new overlapping column controls, so the cell can not get detected. Get width
-      // directly from element that will be .pm-table-drag-columns-floating-insert-dot-wrapper
-      width = element.clientWidth;
-    } else {
-      var _closestCell$id, _elementContentRects$, _elementContentRects$2;
-      const closestCell = element.closest(SELECTOR_TABLE_LEAFS);
-      const id = (_closestCell$id = closestCell === null || closestCell === void 0 ? void 0 : closestCell.id) !== null && _closestCell$id !== void 0 ? _closestCell$id : '';
-      width = (_elementContentRects$ = elementContentRects === null || elementContentRects === void 0 ? void 0 : (_elementContentRects$2 = elementContentRects[id]) === null || _elementContentRects$2 === void 0 ? void 0 : _elementContentRects$2.width) !== null && _elementContentRects$ !== void 0 ? _elementContentRects$ : 0;
-    }
-    x = mouseEvent.offsetX;
+    const width = element.clientWidth; // reflow
+    const x = !Number.isNaN(offsetX) ? offsetX : mouseEvent.offsetX; // reflow
+
     if (width <= 0) {
       return null;
     }

package/dist/esm/commands/selection.js

@@ -413,4 +413,26 @@ export var shiftArrowUpFromTable = function shiftArrowUpFromTable(editorSelectio
       return false;
     };
   };
+};
+export var modASelectTable = function modASelectTable(editorSelectionAPI) {
+  return function () {
+    return function (state, dispatch) {
+      var selection = state.selection;
+      var table = findTable(selection);
+      if (!table) {
+        return false;
+      }
+      var $from = selection.$from,
+        $to = selection.$to;
+      var tableSelected = isTableSelected(selection);
+      if (!tableSelected && $from.pos > table.start + 1 && $to.pos < table.start + table.node.nodeSize) {
+        return selectFullTable(editorSelectionAPI)({
+          node: table.node,
+          startPos: table.start,
+          dir: TableSelectionDirection.BottomToTop
+        })(state, dispatch);
+      }
+      return false;
+    };
+  };
 };

package/dist/esm/event-handlers.js

@@ -1,4 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import rafSchedule from 'raf-schd';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { browser, closestElement, isElementInTableCell, isLastItemMediaGroup, setNodeSelection } from '@atlaskit/editor-common/utils';
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -248,7 +249,10 @@ export var handleMouseLeave = function handleMouseLeave(view, event) {
   }
   return false;
 };
-export var 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 = rafSchedule(function (view, event, offsetX) {
   if (!(event.target instanceof HTMLElement)) {
     return false;
   }
@@ -257,13 +261,12 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
     var state = view.state,
       dispatch = view.dispatch;
     var _getPluginState6 = getPluginState(state),
-      insertColumnButtonIndex = _getPluginState6.insertColumnButtonIndex,
-      isDragAndDropEnabled = _getPluginState6.isDragAndDropEnabled;
+      insertColumnButtonIndex = _getPluginState6.insertColumnButtonIndex;
     var _getColumnOrRowIndex9 = getColumnOrRowIndex(element),
       _getColumnOrRowIndex10 = _slicedToArray(_getColumnOrRowIndex9, 2),
       startIndex = _getColumnOrRowIndex10[0],
       endIndex = _getColumnOrRowIndex10[1];
-    var positionColumn = getMousePositionHorizontalRelativeByElement(event, elementContentRects, undefined, isDragAndDropEnabled) === 'right' ? endIndex : startIndex;
+    var positionColumn = getMousePositionHorizontalRelativeByElement(event, offsetX, undefined) === 'right' ? endIndex : startIndex;
     if (positionColumn !== insertColumnButtonIndex) {
       return showInsertColumnButton(positionColumn)(state, dispatch);
     }
@@ -283,7 +286,7 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
     }
   }
   if (!isResizeHandleDecoration(element) && isCell(element)) {
-    var _positionColumn = getMousePositionHorizontalRelativeByElement(event, elementContentRects, RESIZE_HANDLE_AREA_DECORATION_GAP);
+    var _positionColumn = getMousePositionHorizontalRelativeByElement(event, offsetX, RESIZE_HANDLE_AREA_DECORATION_GAP);
     if (_positionColumn !== null) {
       var _state4 = view.state,
         _dispatch5 = view.dispatch;
@@ -308,6 +311,19 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
     }
   }
   return false;
+});
+export var 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, browser.gecko ? event.offsetX : NaN);
+  return false;
 };
 export function handleTripleClick(view, pos) {
   var state = view.state,
@@ -383,12 +399,12 @@ export var isTableInFocus = function isTableInFocus(view) {
   var _getPluginState10, _getResizePluginState;
   return !!((_getPluginState10 = getPluginState(view.state)) !== null && _getPluginState10 !== void 0 && _getPluginState10.tableNode) && !((_getResizePluginState = getResizePluginState(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
 };
-export var whenTableInFocus = function whenTableInFocus(eventHandler, elementContentRects) {
+export var 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) {
@@ -418,11 +434,11 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   }
   hoverCell(htmlRowIndex, colIndex)(view.state, view.dispatch);
 };
-export var withCellTracking = function withCellTracking(eventHandler, elementContentRects) {
+export var withCellTracking = function withCellTracking(eventHandler) {
   return function (view, mouseEvent) {
     if (getPluginState(view.state).isDragAndDropEnabled && !getDragDropPluginState(view.state).isDragging) {
       trackCellLocation(view, mouseEvent);
     }
-    return eventHandler(view, mouseEvent, elementContentRects);
+    return eventHandler(view, mouseEvent);
   };
 };

package/dist/esm/nodeviews/OverflowShadowsObserver.js

@@ -1,6 +1,7 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import rafSchedule from 'raf-schd';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import { tableInsertColumnButtonSize } from '../ui/consts';
@@ -42,8 +43,13 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
     });
     _defineProperty(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(ClassName.TABLE_SHADOW_SENTINEL_LEFT));
@@ -60,8 +66,8 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
      * e.g. bounds on an IntersectionObserverEntry, otherwise proceed with
      * reading it from sticky cell
      */
-    _defineProperty(this, "updateStickyShadows", function (stickyRowHeight) {
-      var _this$wrapper, _this$wrapper2, _this$wrapper3;
+    _defineProperty(this, "updateStickyShadows", rafSchedule(function (stickyRowHeight) {
+      var _this$wrapper;
       if (!_this.isSticky) {
         return;
       }
@@ -69,14 +75,21 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
       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(ClassName.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(ClassName.TABLE_LEFT_SHADOW));
-      updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
-      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(ClassName.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(ClassName.TABLE_LEFT_SHADOW));
+        updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
+        updateShadowListForStickyStyles(heightStyleOrCompute, liveRightShadows);
+      }
+    }));
     this.updateShadowState = updateShadowState;
     this.table = _table;
     this.wrapper = wrapper;
@@ -92,11 +105,7 @@ export var OverflowShadowsObserver = /*#__PURE__*/function () {
       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/esm/nodeviews/TableCell.js

@@ -6,35 +6,17 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import uuid from 'uuid';
 import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
-import { getPluginState } from '../pm-plugins/plugin-factory';
 import TableNodeView from './TableNodeViewBase';
 var DEFAULT_COL_SPAN = 1;
 var DEFAULT_ROW_SPAN = 1;
 var TableCell = /*#__PURE__*/function (_ref) {
   _inherits(TableCell, _ref);
   var _super = _createSuper(TableCell);
-  function TableCell(node, view, getPos, eventDispatcher, observer) {
-    var _this;
+  function TableCell(node, view, getPos, eventDispatcher) {
     _classCallCheck(this, TableCell);
-    _this = _super.call(this, node, view, getPos, eventDispatcher);
-    _this.observer = observer;
-    var _getPluginState = getPluginState(view.state),
-      pluginConfig = _getPluginState.pluginConfig,
-      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
-    _this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
-    _this.isDragAndDropEnabled = !!isDragAndDropEnabled;
-    if (observer) {
-      _this.contentDOM.id = uuid();
-      observer.observe(_this.contentDOM);
-    }
-    return _this;
+    return _super.call(this, node, view, getPos, eventDispatcher);
   }
-
-  // @ts-ignore
-
-  // @ts-ignore
   _createClass(TableCell, [{
     key: "update",
     value: function update(node) {
@@ -44,17 +26,10 @@ var TableCell = /*#__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;
       }
@@ -85,10 +60,10 @@ var TableCell = /*#__PURE__*/function (_ref) {
           var _ref5 = _slicedToArray(_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;
       }