@atlaskit/editor-plugin-table 7.5.5 → 7.5.6

package/dist/es2019/nodeviews/OverflowShadowsObserver.js

@@ -1,4 +1,5 @@
 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';
@@ -36,8 +37,13 @@ export class OverflowShadowsObserver {
     });
     _defineProperty(this, "observeShadowSentinels", 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(`.${ClassName.TABLE_SHADOW_SENTINEL_LEFT}`);
@@ -54,8 +60,8 @@ export class OverflowShadowsObserver {
      * e.g. bounds on an IntersectionObserverEntry, otherwise proceed with
      * reading it from sticky cell
      */
-    _defineProperty(this, "updateStickyShadows", stickyRowHeight => {
-      var _this$wrapper, _this$wrapper2, _this$wrapper2$parent, _this$wrapper3, _this$wrapper3$parent;
+    _defineProperty(this, "updateStickyShadows", rafSchedule(stickyRowHeight => {
+      var _this$wrapper;
       if (!this.isSticky) {
         return;
       }
@@ -63,14 +69,21 @@ export class OverflowShadowsObserver {
       if (!stickyCell || !((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement)) {
         return;
       }
-      const heightStyleOrCompute = `${stickyRowHeight || stickyCell.clientHeight + 1}px`;
-      // Use getElementsByClassName here for a live node list to capture
-      // sticky shadows
-      const liveRightShadows = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : (_this$wrapper2$parent = _this$wrapper2.parentElement) === null || _this$wrapper2$parent === void 0 ? void 0 : _this$wrapper2$parent.getElementsByClassName(`${ClassName.TABLE_RIGHT_SHADOW}`);
-      const liveLeftShadows = (_this$wrapper3 = this.wrapper) === null || _this$wrapper3 === void 0 ? void 0 : (_this$wrapper3$parent = _this$wrapper3.parentElement) === null || _this$wrapper3$parent === void 0 ? void 0 : _this$wrapper3$parent.getElementsByClassName(`${ClassName.TABLE_LEFT_SHADOW}`);
-      updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
-      updateShadowListForStickyStyles(heightStyleOrCompute, liveRightShadows);
-    });
+
+      // Reflow Warning! - stickyCell.clientHeight
+      const newStickyRowHeight = stickyRowHeight || stickyCell.clientHeight + 1;
+      if (newStickyRowHeight !== this.stickyRowHeight) {
+        var _this$wrapper2, _this$wrapper2$parent, _this$wrapper3, _this$wrapper3$parent;
+        this.stickyRowHeight = newStickyRowHeight;
+        const heightStyleOrCompute = `${newStickyRowHeight}px`;
+        // Use getElementsByClassName here for a live node list to capture
+        // sticky shadows
+        const liveRightShadows = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : (_this$wrapper2$parent = _this$wrapper2.parentElement) === null || _this$wrapper2$parent === void 0 ? void 0 : _this$wrapper2$parent.getElementsByClassName(`${ClassName.TABLE_RIGHT_SHADOW}`);
+        const liveLeftShadows = (_this$wrapper3 = this.wrapper) === null || _this$wrapper3 === void 0 ? void 0 : (_this$wrapper3$parent = _this$wrapper3.parentElement) === null || _this$wrapper3$parent === void 0 ? void 0 : _this$wrapper3$parent.getElementsByClassName(`${ClassName.TABLE_LEFT_SHADOW}`);
+        updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
+        updateShadowListForStickyStyles(heightStyleOrCompute, liveRightShadows);
+      }
+    }));
     this.updateShadowState = updateShadowState;
     this.table = _table;
     this.wrapper = wrapper;
@@ -84,11 +97,7 @@ export class OverflowShadowsObserver {
     if (!stickyCell) {
       return;
     }
-    const newStickyRowHeight = stickyCell.clientHeight + 1;
-    if (newStickyRowHeight === this.stickyRowHeight) {
-      this.stickyRowHeight = newStickyRowHeight;
-      this.updateStickyShadows(this.stickyRowHeight);
-    }
+    this.updateStickyShadows();
   }
   getStickyCell() {
     var _this$wrapper4;

package/dist/es2019/nodeviews/TableCell.js

@@ -1,29 +1,11 @@
-import uuid from 'uuid';
 import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
-import { getPluginState } from '../pm-plugins/plugin-factory';
 import TableNodeView from './TableNodeViewBase';
 const DEFAULT_COL_SPAN = 1;
 const DEFAULT_ROW_SPAN = 1;
 export default class TableCell extends TableNodeView {
-  constructor(node, view, getPos, eventDispatcher, observer) {
+  constructor(node, view, getPos, eventDispatcher) {
     super(node, view, getPos, eventDispatcher);
-    this.observer = observer;
-    const {
-      pluginConfig,
-      isDragAndDropEnabled
-    } = getPluginState(view.state);
-    this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
-    this.isDragAndDropEnabled = !!isDragAndDropEnabled;
-    if (observer) {
-      this.contentDOM.id = uuid();
-      observer.observe(this.contentDOM);
-    }
   }
-
-  // @ts-ignore
-
-  // @ts-ignore
-
   update(node) {
     const didUpdate = this.updateNodeView(node);
     if (didUpdate) {
@@ -31,11 +13,6 @@ export default class TableCell extends TableNodeView {
     }
     return didUpdate;
   }
-  destroy() {
-    if (this.observer) {
-      this.observer.unobserve(this.contentDOM);
-    }
-  }
   updateNodeView(node) {
     if (this.node.type !== node.type) {
       return false;

package/dist/es2019/nodeviews/TableComponent.js

@@ -34,6 +34,12 @@ const isIE11 = browser.ie_version === 11;
 // componentDidUpdate is called multiple times. The isOverflowing value is correct only on the last update.
 // To make sure we capture the last update, we use setTimeout.
 const initialOverflowCaptureTimeroutDelay = 300;
+
+// This is a hard switch for controlling whether the overflow analytics should be dispatched. There has been 6months of data
+// already collected which we could use but have not. This has been disabled rather then removed entirely in the event that
+// the current collected data becomes stale and we want to start collecting fresh data again in future.
+// PLEASE NOTE: that the current way this alaytics has been configured WILL cause reflows to occur. This is why the has been disabled.
+const isOverflowAnalyticsEnabled = false;
 class TableComponent extends React.Component {
   constructor(props) {
     super(props);
@@ -41,7 +47,9 @@ class TableComponent extends React.Component {
       scroll: 0,
       parentWidth: undefined,
       [ShadowEvent.SHOW_BEFORE_SHADOW]: false,
-      [ShadowEvent.SHOW_AFTER_SHADOW]: false
+      [ShadowEvent.SHOW_AFTER_SHADOW]: false,
+      tableWrapperWidth: undefined,
+      tableWrapperHeight: undefined
     });
     _defineProperty(this, "updateShadowState", (shadowKey, value) => {
       if (this.state[shadowKey] === value) {
@@ -293,6 +301,18 @@ class TableComponent extends React.Component {
     this.layoutSize = this.tableNodeLayoutSize(this.node, _containerWidth.width, {
       isFullWidthModeEnabled
     });
+    this.resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        this.setState(prev => {
+          var _entry$contentRect, _entry$contentRect2;
+          return (prev === null || prev === void 0 ? void 0 : prev.tableWrapperWidth) === ((_entry$contentRect = entry.contentRect) === null || _entry$contentRect === void 0 ? void 0 : _entry$contentRect.width) && (prev === null || prev === void 0 ? void 0 : prev.tableWrapperHeight) === ((_entry$contentRect2 = entry.contentRect) === null || _entry$contentRect2 === void 0 ? void 0 : _entry$contentRect2.height) ? prev : {
+            ...prev,
+            tableWrapperWidth: entry.contentRect.width,
+            tableWrapperHeight: entry.contentRect.height
+          };
+        });
+      }
+    });
 
     // Disable inline table editing and resizing controls in Firefox
     // https://github.com/ProseMirror/prosemirror/issues/432
@@ -351,10 +371,13 @@ class TableComponent extends React.Component {
       this.onStickyState(currentStickyState);
     }
     eventDispatcher.on(stickyHeadersPluginKey.key, this.onStickyState);
-    const initialIsOveflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
-    this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+    if (isOverflowAnalyticsEnabled) {
+      const initialIsOveflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+      this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+    }
   }
   componentWillUnmount() {
+    var _this$resizeObserver;
     const {
       allowColumnResizing,
       eventDispatcher,
@@ -368,6 +391,7 @@ class TableComponent extends React.Component {
     if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
       this.dragAndDropCleanupFn();
     }
+    (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 ? void 0 : _this$resizeObserver.disconnect();
     const {
       stickyScrollbar
     } = getEditorFeatureFlags();
@@ -500,29 +524,37 @@ class TableComponent extends React.Component {
       }
       this.handleTableResizingDebounced();
     }
-    const newIsOverflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
-    const prevIsOverflowing = prevState[ShadowEvent.SHOW_BEFORE_SHADOW] || prevState[ShadowEvent.SHOW_AFTER_SHADOW];
-    if (this.initialOverflowCaptureTimerId) {
-      clearTimeout(this.initialOverflowCaptureTimerId);
-    }
-    if (!this.isInitialOverflowSent) {
-      this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
+    if (isOverflowAnalyticsEnabled) {
+      const newIsOverflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+      const prevIsOverflowing = prevState[ShadowEvent.SHOW_BEFORE_SHADOW] || prevState[ShadowEvent.SHOW_AFTER_SHADOW];
+      if (this.initialOverflowCaptureTimerId) {
+        clearTimeout(this.initialOverflowCaptureTimerId);
+      }
+      if (!this.isInitialOverflowSent) {
+        this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
+      }
+      if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
+        var _this$state2;
+        const {
+          dispatch,
+          state: {
+            tr
+          }
+        } = this.props.view;
+        dispatch(tr.setMeta(META_KEYS.OVERFLOW_STATE_CHANGED, {
+          isOverflowing: newIsOverflowing,
+          wasOverflowing: prevIsOverflowing,
+          editorWidth: this.props.containerWidth.width || 0,
+          width: this.node.attrs.width || 0,
+          parentWidth: ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.parentWidth) || 0
+        }));
+      }
     }
-    if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
-      var _this$state2;
-      const {
-        dispatch,
-        state: {
-          tr
-        }
-      } = this.props.view;
-      dispatch(tr.setMeta(META_KEYS.OVERFLOW_STATE_CHANGED, {
-        isOverflowing: newIsOverflowing,
-        wasOverflowing: prevIsOverflowing,
-        editorWidth: this.props.containerWidth.width || 0,
-        width: this.node.attrs.width || 0,
-        parentWidth: ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.parentWidth) || 0
-      }));
+  }
+  observeTable(table) {
+    if (table) {
+      var _this$resizeObserver2;
+      (_this$resizeObserver2 = this.resizeObserver) === null || _this$resizeObserver2 === void 0 ? void 0 : _this$resizeObserver2.observe(table);
     }
   }
   render() {
@@ -578,7 +610,8 @@ class TableComponent extends React.Component {
       ,
       selection: view.state.selection,
       headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
-      stickyHeader: this.state.stickyHeader
+      stickyHeader: this.state.stickyHeader,
+      tableWrapperWidth: this.state.tableWrapperWidth
     });
     const tableContainerWidth = getTableContainerWidth(node);
     const colControls = isDragAndDropEnabled ? /*#__PURE__*/React.createElement(TableFloatingColumnControls, {
@@ -604,7 +637,8 @@ class TableComponent extends React.Component {
       getScrollOffset: () => {
         var _this$wrapper2;
         return ((_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.scrollLeft) || 0;
-      }
+      },
+      tableWrapperHeight: this.state.tableWrapperHeight
     }) : null;
     const shadowPadding = allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
     const shadowStyle = memoizeOne(visible => ({
@@ -642,6 +676,7 @@ class TableComponent extends React.Component {
       isBreakoutEnabled: options === null || options === void 0 ? void 0 : options.isBreakoutEnabled,
       isNested: isNested,
       pluginInjectionApi: pluginInjectionApi,
+      tableWrapperHeight: this.state.tableWrapperHeight,
       isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
       isResizing: isResizing,
       isTableScalingEnabled: isTableScalingEnabled
@@ -682,6 +717,7 @@ class TableComponent extends React.Component {
           if (tableElement !== this.table) {
             this.table = tableElement;
             this.createShadowSentinels(this.table);
+            this.observeTable(this.table);
           }
         }
       }

package/dist/es2019/nodeviews/TableContainer.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useRef } from 'react';
+import React, { forwardRef, useCallback, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
@@ -42,10 +42,12 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   tableRef,
   isResizing,
   pluginInjectionApi,
-  isTableScalingEnabled
+  isTableScalingEnabled,
+  tableWrapperHeight
 }) => {
   const containerRef = useRef(null);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
+  const [resizing, setIsResizing] = useState(false);
   const updateContainerHeight = useCallback(height => {
     var _containerRef$current;
     // current StickyHeader State is not stable to be fetch.
@@ -53,31 +55,24 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     //    consistently fetch and refactor below
     const stickyHeaders = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getElementsByClassName('pm-table-sticky');
     if (!stickyHeaders || stickyHeaders.length < 1) {
-      var _containerRef$current2;
       // when starting to drag, we need to keep the original space,
       // -- When sticky header not appear, margin top(24px) and margin bottom(16px), should be 40px,
       //    1px is border width but collapse make it 0.5.
       // -- When sticky header appear, we should add first row height but reduce
       //    collapsed border
-      (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.style.setProperty('height', typeof height === 'number' ? `${height + 40.5}px` : 'auto');
+      return typeof height === 'number' ? `${height + 40.5}px` : 'auto';
     } else {
-      var _containerRef$current3, _containerRef$current4;
-      const stickyHeaderHeight = ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getElementsByTagName('th')[0].getBoundingClientRect().height) || 0;
-      (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.style.setProperty('height', typeof height === 'number' ? `${height + stickyHeaderHeight + 39.5}px` : 'auto');
+      var _containerRef$current2;
+      const stickyHeaderHeight = ((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getElementsByTagName('th')[0].getBoundingClientRect().height) || 0;
+      return typeof height === 'number' ? `${height + stickyHeaderHeight + 39.5}px` : 'auto';
     }
   }, []);
-  const resizeObserverRef = useRef(new ResizeObserver(entries => {
-    updateContainerHeight(entries[entries.length - 1].contentRect.height);
-  }));
   const onResizeStart = useCallback(() => {
-    if (tableRef) {
-      resizeObserverRef.current.observe(tableRef);
-    }
-  }, [tableRef]);
+    setIsResizing(true);
+  }, []);
   const onResizeStop = useCallback(() => {
-    updateContainerHeight('auto');
-    resizeObserverRef.current.disconnect();
-  }, [updateContainerHeight]);
+    setIsResizing(false);
+  }, []);
   const updateWidth = useCallback(width => {
     if (!containerRef.current) {
       return;
@@ -141,7 +136,8 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      width: tableWidthRef.current
+      width: tableWidthRef.current,
+      height: resizing ? updateContainerHeight(tableWrapperHeight !== null && tableWrapperHeight !== void 0 ? tableWrapperHeight : 'auto') : 'auto'
     },
     className: ClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
@@ -164,6 +160,7 @@ export const TableContainer = ({
   getPos,
   tableRef,
   isNested,
+  tableWrapperHeight,
   isResizing,
   pluginInjectionApi,
   isTableScalingEnabled
@@ -176,6 +173,7 @@ export const TableContainer = ({
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,
+      tableWrapperHeight: tableWrapperHeight,
       isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi,
       isTableScalingEnabled: isTableScalingEnabled

package/dist/es2019/nodeviews/TableResizer.js

@@ -51,7 +51,7 @@ const getResizerHandleHeight = tableRef => {
 };
 const getResizerMinWidth = node => {
   const currentColumnCount = getColgroupChildrenLength(node);
-  const minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
+  const minColumnWidth = Math.min(3, currentColumnCount) * COLUMN_MIN_WIDTH;
   // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
   // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
   return minColumnWidth + 1;

package/dist/es2019/plugin.js

@@ -49,11 +49,10 @@ const tablesPlugin = ({
     current: null
   };
   const defaultGetEditorContainerWidth = () => {
-    var _document$body$offset, _document, _document$body, _api$width$sharedStat, _api$width;
-    const defaultState = {
+    var _api$width$sharedStat, _api$width, _document$body$offset, _document, _document$body;
+    return (_api$width$sharedStat = api === null || api === void 0 ? void 0 : (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : {
       width: (_document$body$offset = (_document = document) === null || _document === void 0 ? void 0 : (_document$body = _document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 500
     };
-    return (_api$width$sharedStat = api === null || api === void 0 ? void 0 : (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : defaultState;
   };
   const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   return {

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

@@ -23,7 +23,6 @@ import { defaultHoveredCell, defaultTableSelection } from './default-table-selec
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled) => {
-  var _window;
   const state = createPluginState(dispatch, {
     pluginConfig,
     isTableHovered: false,
@@ -41,15 +40,6 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
     ...defaultTableSelection,
     getIntl
   });
-  let elementContentRects = {};
-  const observer = (_window = window) !== null && _window !== void 0 && _window.ResizeObserver ? new ResizeObserver(entries => {
-    entries.forEach(entry => {
-      if (!entry.target.id) {
-        return;
-      }
-      elementContentRects[entry.target.id] = entry.contentRect;
-    });
-  }) : undefined;
 
   // Used to prevent invalid table cell spans being reported more than once per editor/document
   const invalidTableIds = [];
@@ -151,11 +141,6 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
           } else if (pluginState.isResizeHandleWidgetAdded) {
             removeResizeHandleDecorations()(state, dispatch);
           }
-        },
-        destroy: () => {
-          if (observer) {
-            observer.disconnect();
-          }
         }
       };
     },
@@ -264,8 +249,8 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       nodeViews: {
         table: (node, view, getPos) => createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi),
         tableRow: (node, view, getPos) => new TableRow(node, view, getPos, eventDispatcher),
-        tableCell: (node, view, getPos) => new TableCell(node, view, getPos, eventDispatcher, observer),
-        tableHeader: (node, view, getPos) => new TableCell(node, view, getPos, eventDispatcher, observer)
+        tableCell: (node, view, getPos) => new TableCell(node, view, getPos, eventDispatcher),
+        tableHeader: (node, view, getPos) => new TableCell(node, view, getPos, eventDispatcher)
       },
       handleDOMEvents: {
         focus: handleFocus,
@@ -274,7 +259,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         mouseover: withCellTracking(whenTableInFocus(handleMouseOver)),
         mouseleave: handleMouseLeave,
         mouseout: whenTableInFocus(handleMouseOut),
-        mousemove: whenTableInFocus(handleMouseMove, elementContentRects),
+        mousemove: whenTableInFocus(handleMouseMove),
         mouseenter: handleMouseEnter,
         mouseup: whenTableInFocus(handleMouseUp),
         click: withCellTracking(whenTableInFocus(handleClick))

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

@@ -18,37 +18,15 @@ export const TableFloatingColumnControls = ({
   isTableHovered,
   tableContainerWidth,
   isNumberColumnEnabled,
-  getScrollOffset
+  getScrollOffset,
+  tableWrapperHeight
 }) => {
-  const [tableRect, setTableRect] = useState({
-    width: 0,
-    height: 0
-  });
   const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef(null);
   const node = getNode();
   const currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
   const hasHeaderColumn = containsHeaderColumn(node);
   const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
-  useEffect(() => {
-    var _window;
-    if (tableRef && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
-      const resizeObserver = new ResizeObserver(entries => {
-        for (let entry of entries) {
-          setTableRect(prev => {
-            if (prev.width !== entry.contentRect.width || prev.height !== entry.contentRect.height) {
-              return entry.contentRect;
-            }
-            return prev;
-          });
-        }
-      });
-      resizeObserver.observe(tableRef);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, [tableRef]);
   useEffect(() => {
     return monitorForElements({
       canMonitor({
@@ -71,11 +49,11 @@ export const TableFloatingColumnControls = ({
   }, [editorView, currentNodeLocalId]);
   const rowHeights = useMemo(() => {
     // NOTE: we don't care so much as to what tableHeight is, we only care that it changed and is a sane value.
-    if (tableRef && !!tableRect.height) {
+    if (tableRef && !!tableWrapperHeight) {
       return getRowHeights(tableRef);
     }
     return [0];
-  }, [tableRef, tableRect.height]);
+  }, [tableRef, tableWrapperHeight]);
   if (!tableRef || !tableActive || isResizing) {
     return null;
   }
@@ -112,7 +90,7 @@ export const TableFloatingColumnControls = ({
   }), isDragging && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
     isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,
-    tableHeight: tableRect.height,
+    tableHeight: tableWrapperHeight,
     localId: currentNodeLocalId,
     colWidths: colWidths,
     getScrollOffset: getScrollOffset