@atlaskit/editor-plugin-table 7.3.6 → 7.3.8

package/dist/es2019/nodeviews/TableRow.js

@@ -2,14 +2,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
-import { browser } from '@atlaskit/editor-common/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
 import { syncStickyRowToTable, updateStickyMargins as updateTableMargin } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, TableCssClassName } from '../types';
-import { STICKY_HEADER_TOGGLE_TOLERANCE_MS, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableControlsSpacing, tableScrollbarOffset } from '../ui/consts';
+import { stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableControlsSpacing, tableScrollbarOffset } from '../ui/consts';
 import { getTop, getTree } from '../utils/dom';
 import { supportedHeaderRow } from '../utils/nodes';
 import TableNodeView from './TableNodeViewBase';
@@ -244,92 +242,34 @@ export default class TableRow extends TableNodeView {
     });
   }
   createIntersectionObserver() {
-    if (getBooleanFF('platform.editor.table.alternative-sticky-header-logic')) {
-      this.intersectionObserver = new IntersectionObserver((entries, _) => {
-        var _this$editorScrollabl2, _this$editorScrollabl3;
-        // IMPORTANT: please try and avoid using entry.rootBounds it's terribly inconsistent. For example; sometimes it may return
-        // 0 height. In safari it will multiply all values by the window scale factor, however chrome & firfox won't.
-        // This is why i just get the scroll view bounding rect here and use it, and fallback to the entry.rootBounds if needed.
-        const rootBounds = (_this$editorScrollabl2 = this.editorScrollableElement) === null || _this$editorScrollabl2 === void 0 ? void 0 : (_this$editorScrollabl3 = _this$editorScrollabl2.getBoundingClientRect) === null || _this$editorScrollabl3 === void 0 ? void 0 : _this$editorScrollabl3.call(_this$editorScrollabl2);
-        entries.forEach(entry => {
-          const {
-            target,
-            isIntersecting,
-            boundingClientRect
-          } = entry;
-          // This observer only every looks at the top/bottom sentinels, we can assume if it's not one then it's the other.
-          const targetKey = target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_TOP) ? 'top' : 'bottom';
-          // Cache the latest sentinel information
-          this.sentinelData[targetKey] = {
-            isIntersecting,
-            boundingClientRect,
-            rootBounds: rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds
-          };
-          // Keep the other sentinels rootBounds in sync with this latest one
-          this.sentinelData[targetKey === 'top' ? 'bottom' : targetKey].rootBounds = rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds;
-        });
-        this.refreshStickyState();
-      }, {
-        threshold: 0,
-        root: this.editorScrollableElement
-      });
-    } else {
-      this.intersectionObserver = new IntersectionObserver((entries, _) => {
-        const tree = getTree(this.dom);
-        if (!tree) {
-          return;
-        }
+    this.intersectionObserver = new IntersectionObserver((entries, _) => {
+      var _this$editorScrollabl2, _this$editorScrollabl3;
+      // IMPORTANT: please try and avoid using entry.rootBounds it's terribly inconsistent. For example; sometimes it may return
+      // 0 height. In safari it will multiply all values by the window scale factor, however chrome & firfox won't.
+      // This is why i just get the scroll view bounding rect here and use it, and fallback to the entry.rootBounds if needed.
+      const rootBounds = (_this$editorScrollabl2 = this.editorScrollableElement) === null || _this$editorScrollabl2 === void 0 ? void 0 : (_this$editorScrollabl3 = _this$editorScrollabl2.getBoundingClientRect) === null || _this$editorScrollabl3 === void 0 ? void 0 : _this$editorScrollabl3.call(_this$editorScrollabl2);
+      entries.forEach(entry => {
         const {
-          table
-        } = tree;
-        if (table.rows.length < 2) {
-          // ED-19307 - When there's only one row in a table the top & bottom sentinels become inverted. This creates some nasty visiblity
-          // toggling side-effects because the intersection observers gets confused.
-          return;
-        }
-        entries.forEach(entry => {
-          var _entry$rootBounds;
-          const target = entry.target;
-
-          // if the rootBounds has 0 height, e.g. confluence preview mode, we do nothing.
-          if (((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.height) === 0) {
-            return;
-          }
-          if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_TOP)) {
-            var _entry$rootBounds2;
-            const sentinelIsBelowScrollArea = (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.bottom) || 0) < entry.boundingClientRect.bottom;
-            if (!entry.isIntersecting && !sentinelIsBelowScrollArea) {
-              var _entry$rootBounds3;
-              tree && this.makeHeaderRowSticky(tree, (_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top);
-              this.lastStickyTimestamp = Date.now();
-            } else {
-              table && this.makeRowHeaderNotSticky(table);
-            }
-          }
-          if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)) {
-            var _entry$rootBounds4;
-            const sentinelIsAboveScrollArea = entry.boundingClientRect.top - this.dom.offsetHeight < (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.top) || 0);
-            if (table && !entry.isIntersecting && sentinelIsAboveScrollArea) {
-              // Not a perfect solution, but need to this code specific for FireFox ED-19177
-              if (browser.gecko) {
-                if (this.lastStickyTimestamp && Date.now() - this.lastStickyTimestamp > STICKY_HEADER_TOGGLE_TOLERANCE_MS) {
-                  this.makeRowHeaderNotSticky(table);
-                }
-              } else {
-                this.makeRowHeaderNotSticky(table);
-              }
-            } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
-              var _entry$rootBounds5;
-              tree && this.makeHeaderRowSticky(tree, entry === null || entry === void 0 ? void 0 : (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
-              this.lastStickyTimestamp = Date.now();
-            }
-          }
-          return;
-        });
-      }, {
-        root: this.editorScrollableElement
+          target,
+          isIntersecting,
+          boundingClientRect
+        } = entry;
+        // This observer only every looks at the top/bottom sentinels, we can assume if it's not one then it's the other.
+        const targetKey = target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_TOP) ? 'top' : 'bottom';
+        // Cache the latest sentinel information
+        this.sentinelData[targetKey] = {
+          isIntersecting,
+          boundingClientRect,
+          rootBounds: rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds
+        };
+        // Keep the other sentinels rootBounds in sync with this latest one
+        this.sentinelData[targetKey === 'top' ? 'bottom' : targetKey].rootBounds = rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds;
       });
-    }
+      this.refreshStickyState();
+    }, {
+      threshold: 0,
+      root: this.editorScrollableElement
+    });
   }
   refreshStickyState() {
     const tree = getTree(this.dom);

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

@@ -10,7 +10,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../commands';
 import { stopKeyboardColumnResizing } from '../commands/column-resize';
 import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from '../commands/misc';
-import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, whenTableInFocus, withCellTracking } from '../event-handlers';
+import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleMouseUp, handleTripleClick, whenTableInFocus, withCellTracking } from '../event-handlers';
 import { createTableView } from '../nodeviews/table';
 import TableCell from '../nodeviews/TableCell';
 import TableRow from '../nodeviews/TableRow';
@@ -270,6 +270,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         mouseout: whenTableInFocus(handleMouseOut),
         mousemove: whenTableInFocus(handleMouseMove, elementContentRects),
         mouseenter: handleMouseEnter,
+        mouseup: whenTableInFocus(handleMouseUp),
         click: withCellTracking(whenTableInFocus(handleClick))
       },
       handleTripleClick

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

@@ -58,12 +58,15 @@ export class FloatingInsertButton extends React.Component {
     if (tr.selection instanceof CellSelection && (tr.selection.isColSelection() || tr.selection.isRowSelection())) {
       return null;
     }
-    const cellPosition = this.getCellPosition(type);
-    if (!cellPosition) {
+    const tablePos = findTable(tr.selection);
+    if (!tablePos) {
       return null;
     }
-    const tablePos = findTable(editorView.state.selection);
-    if (!tablePos) {
+
+    // the tableNode props is not always latest (when you type some text in a cell, it's not updated yet)
+    // we need to get the latest one by calling findTable(tr.selection)
+    const cellPosition = this.getCellPosition(type, tablePos === null || tablePos === void 0 ? void 0 : tablePos.node);
+    if (!cellPosition) {
       return null;
     }
     const domAtPos = editorView.domAtPos.bind(editorView);
@@ -128,9 +131,8 @@ export class FloatingInsertButton extends React.Component {
       hasStickyHeaders: this.props.hasStickyHeaders || false
     }));
   }
-  getCellPosition(type) {
+  getCellPosition(type, tableNode) {
     const {
-      tableNode,
       insertColumnButtonIndex,
       insertRowButtonIndex
     } = this.props;

package/dist/es2019/ui/common-styles.js

@@ -165,7 +165,7 @@ const tableStickyHeaderFirefoxFixStyle = () => {
     This fixes a bug which occurs in firefox when the first row becomes sticky.
     see https://product-fabric.atlassian.net/browse/ED-19177
   */
-  if (browser.gecko && getBooleanFF('platform.editor.table.alternative-sticky-header-logic')) {
+  if (browser.gecko) {
     return css`
       .${ClassName.TABLE_STICKY} > tbody::before {
         content: '';
@@ -628,6 +628,7 @@ export const tableStyles = props => {
         height: 4px;
         width: 4px;
         border-radius: 50%;
+        pointer-events: none;
       }
     }
 

package/dist/esm/event-handlers.js

@@ -138,6 +138,31 @@ export var handleMouseOver = function handleMouseOver(view, mouseEvent) {
   }
   return false;
 };
+export var handleMouseUp = function handleMouseUp(view, mouseEvent) {
+  if (!getBooleanFF('platform.editor.table.insert-last-column-btn-stays-in-place')) {
+    return false;
+  }
+  if (!(mouseEvent instanceof MouseEvent)) {
+    return false;
+  }
+  var state = view.state,
+    dispatch = view.dispatch;
+  var _getPluginState2 = getPluginState(state),
+    insertColumnButtonIndex = _getPluginState2.insertColumnButtonIndex,
+    tableNode = _getPluginState2.tableNode,
+    tableRef = _getPluginState2.tableRef;
+  if (insertColumnButtonIndex !== undefined && tableRef && tableRef.parentElement && tableNode) {
+    var _TableMap$get = TableMap.get(tableNode),
+      width = _TableMap$get.width;
+    var newInsertColumnButtonIndex = insertColumnButtonIndex + 1;
+    if (width === newInsertColumnButtonIndex) {
+      var tableWidth = tableRef.clientWidth;
+      tableRef.parentElement.scrollTo(tableWidth, 0);
+      return showInsertColumnButton(newInsertColumnButtonIndex)(state, dispatch);
+    }
+  }
+  return false;
+};
 
 // Ignore any `mousedown` `event` from control and numbered column buttons
 // PM end up changing selection during shift selection if not prevented
@@ -165,8 +190,8 @@ export var handleMouseOut = function handleMouseOut(view, mouseEvent) {
     var _state2 = view.state,
       _dispatch3 = view.dispatch;
     if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-      var _getPluginState2 = getPluginState(_state2),
-        isKeyboardResize = _getPluginState2.isKeyboardResize;
+      var _getPluginState3 = getPluginState(_state2),
+        isKeyboardResize = _getPluginState3.isKeyboardResize;
       if (isKeyboardResize) {
         // no need to hide decoration if column resizing started by keyboard
         return false;
@@ -181,8 +206,8 @@ export var handleMouseOut = function handleMouseOut(view, mouseEvent) {
 export var handleMouseEnter = function handleMouseEnter(view, mouseEvent) {
   var state = view.state,
     dispatch = view.dispatch;
-  var _getPluginState3 = getPluginState(state),
-    isTableHovered = _getPluginState3.isTableHovered;
+  var _getPluginState4 = getPluginState(state),
+    isTableHovered = _getPluginState4.isTableHovered;
   if (!isTableHovered) {
     return setTableHovered(true)(state, dispatch);
   }
@@ -194,11 +219,11 @@ export var handleMouseLeave = function handleMouseLeave(view, event) {
   }
   var state = view.state,
     dispatch = view.dispatch;
-  var _getPluginState4 = getPluginState(state),
-    insertColumnButtonIndex = _getPluginState4.insertColumnButtonIndex,
-    insertRowButtonIndex = _getPluginState4.insertRowButtonIndex,
-    isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled,
-    isTableHovered = _getPluginState4.isTableHovered;
+  var _getPluginState5 = getPluginState(state),
+    insertColumnButtonIndex = _getPluginState5.insertColumnButtonIndex,
+    insertRowButtonIndex = _getPluginState5.insertRowButtonIndex,
+    isDragAndDropEnabled = _getPluginState5.isDragAndDropEnabled,
+    isTableHovered = _getPluginState5.isTableHovered;
   if (isTableHovered) {
     if (isDragAndDropEnabled) {
       var _getDragDropPluginSta = getDragDropPluginState(state),
@@ -231,9 +256,9 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
   if (isColumnControlsDecorations(element) || isDragColumnFloatingInsertDot(element)) {
     var state = view.state,
       dispatch = view.dispatch;
-    var _getPluginState5 = getPluginState(state),
-      insertColumnButtonIndex = _getPluginState5.insertColumnButtonIndex,
-      isDragAndDropEnabled = _getPluginState5.isDragAndDropEnabled;
+    var _getPluginState6 = getPluginState(state),
+      insertColumnButtonIndex = _getPluginState6.insertColumnButtonIndex,
+      isDragAndDropEnabled = _getPluginState6.isDragAndDropEnabled;
     var _getColumnOrRowIndex9 = getColumnOrRowIndex(element),
       _getColumnOrRowIndex10 = _slicedToArray(_getColumnOrRowIndex9, 2),
       startIndex = _getColumnOrRowIndex10[0],
@@ -246,8 +271,8 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
   if (isRowControlsButton(element) || isDragRowFloatingInsertDot(element)) {
     var _state3 = view.state,
       _dispatch4 = view.dispatch;
-    var _getPluginState6 = getPluginState(_state3),
-      insertRowButtonIndex = _getPluginState6.insertRowButtonIndex;
+    var _getPluginState7 = getPluginState(_state3),
+      insertRowButtonIndex = _getPluginState7.insertRowButtonIndex;
     var _getColumnOrRowIndex11 = getColumnOrRowIndex(element),
       _getColumnOrRowIndex12 = _slicedToArray(_getColumnOrRowIndex11, 2),
       _startIndex3 = _getColumnOrRowIndex12[0],
@@ -262,9 +287,9 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
     if (_positionColumn !== null) {
       var _state4 = view.state,
         _dispatch5 = view.dispatch;
-      var _getPluginState7 = getPluginState(_state4),
-        resizeHandleColumnIndex = _getPluginState7.resizeHandleColumnIndex,
-        resizeHandleRowIndex = _getPluginState7.resizeHandleRowIndex;
+      var _getPluginState8 = getPluginState(_state4),
+        resizeHandleColumnIndex = _getPluginState8.resizeHandleColumnIndex,
+        resizeHandleRowIndex = _getPluginState8.resizeHandleRowIndex;
       var isKeyboardResize = getBooleanFF('platform.editor.a11y-column-resizing_emcvz') ? getPluginState(_state4).isKeyboardResize : false;
       var tableCell = closestElement(element, 'td, th');
       var cellStartPosition = view.posAtDOM(tableCell, 0);
@@ -341,8 +366,8 @@ export var handleCut = function handleCut(oldTr, oldState, newState, editorAnaly
           if (isTableSelected) {
             tr = removeTable(tr);
           } else if (tr.selection.isRowSelection()) {
-            var _getPluginState8 = getPluginState(newState),
-              isHeaderRowRequired = _getPluginState8.pluginConfig.isHeaderRowRequired;
+            var _getPluginState9 = getPluginState(newState),
+              isHeaderRowRequired = _getPluginState9.pluginConfig.isHeaderRowRequired;
             tr = deleteRows(rect, isHeaderRowRequired)(tr);
           } else if (tr.selection.isColSelection()) {
             tr = deleteColumns(rect, getAllowAddColumnCustomStep(oldState), editorView)(tr);
@@ -354,8 +379,8 @@ export var handleCut = function handleCut(oldTr, oldState, newState, editorAnaly
   return tr;
 };
 export var isTableInFocus = function isTableInFocus(view) {
-  var _getPluginState9, _getResizePluginState;
-  return !!((_getPluginState9 = getPluginState(view.state)) !== null && _getPluginState9 !== void 0 && _getPluginState9.tableNode) && !((_getResizePluginState = getResizePluginState(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
+  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) {
   return function (view, mouseEvent) {
@@ -369,9 +394,9 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   var _tableElement$dataset;
   var target = mouseEvent.target;
   var maybeTableCell = isElementInTableCell(target);
-  var _getPluginState10 = getPluginState(view.state),
-    tableNode = _getPluginState10.tableNode,
-    tableRef = _getPluginState10.tableRef;
+  var _getPluginState11 = getPluginState(view.state),
+    tableNode = _getPluginState11.tableNode,
+    tableRef = _getPluginState11.tableRef;
   var tableElement = closestElement(target, 'table');
 
   // hover will only trigger if target localId is the same with selected localId

package/dist/esm/nodeviews/TableResizer.js

@@ -376,6 +376,7 @@ export var TableResizer = function TableResizer(_ref) {
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
     isHandleVisible: isTableSelected,
+    needExtendedResizeZone: !isTableSelected,
     appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
     handleHighlight: "shadow",
     handleTooltipContent: getBooleanFF('platform.editor.a11y-table-resizing_uapcv') ? function (_ref3) {

package/dist/esm/nodeviews/TableRow.js

@@ -10,14 +10,12 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
-import { browser } from '@atlaskit/editor-common/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
 import { syncStickyRowToTable, updateStickyMargins as updateTableMargin } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, TableCssClassName } from '../types';
-import { STICKY_HEADER_TOGGLE_TOLERANCE_MS, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableControlsSpacing, tableScrollbarOffset } from '../ui/consts';
+import { stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableControlsSpacing, tableScrollbarOffset } from '../ui/consts';
 import { getTop, getTree } from '../utils/dom';
 import { supportedHeaderRow } from '../utils/nodes';
 import TableNodeView from './TableNodeViewBase';
@@ -273,88 +271,32 @@ var TableRow = /*#__PURE__*/function (_ref) {
     key: "createIntersectionObserver",
     value: function createIntersectionObserver() {
       var _this4 = this;
-      if (getBooleanFF('platform.editor.table.alternative-sticky-header-logic')) {
-        this.intersectionObserver = new IntersectionObserver(function (entries, _) {
-          var _this4$editorScrollab, _this4$editorScrollab2;
-          // IMPORTANT: please try and avoid using entry.rootBounds it's terribly inconsistent. For example; sometimes it may return
-          // 0 height. In safari it will multiply all values by the window scale factor, however chrome & firfox won't.
-          // This is why i just get the scroll view bounding rect here and use it, and fallback to the entry.rootBounds if needed.
-          var rootBounds = (_this4$editorScrollab = _this4.editorScrollableElement) === null || _this4$editorScrollab === void 0 || (_this4$editorScrollab2 = _this4$editorScrollab.getBoundingClientRect) === null || _this4$editorScrollab2 === void 0 ? void 0 : _this4$editorScrollab2.call(_this4$editorScrollab);
-          entries.forEach(function (entry) {
-            var target = entry.target,
-              isIntersecting = entry.isIntersecting,
-              boundingClientRect = entry.boundingClientRect;
-            // This observer only every looks at the top/bottom sentinels, we can assume if it's not one then it's the other.
-            var targetKey = target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_TOP) ? 'top' : 'bottom';
-            // Cache the latest sentinel information
-            _this4.sentinelData[targetKey] = {
-              isIntersecting: isIntersecting,
-              boundingClientRect: boundingClientRect,
-              rootBounds: rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds
-            };
-            // Keep the other sentinels rootBounds in sync with this latest one
-            _this4.sentinelData[targetKey === 'top' ? 'bottom' : targetKey].rootBounds = rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds;
-          });
-          _this4.refreshStickyState();
-        }, {
-          threshold: 0,
-          root: this.editorScrollableElement
-        });
-      } else {
-        this.intersectionObserver = new IntersectionObserver(function (entries, _) {
-          var tree = getTree(_this4.dom);
-          if (!tree) {
-            return;
-          }
-          var table = tree.table;
-          if (table.rows.length < 2) {
-            // ED-19307 - When there's only one row in a table the top & bottom sentinels become inverted. This creates some nasty visiblity
-            // toggling side-effects because the intersection observers gets confused.
-            return;
-          }
-          entries.forEach(function (entry) {
-            var _entry$rootBounds;
-            var target = entry.target;
-
-            // if the rootBounds has 0 height, e.g. confluence preview mode, we do nothing.
-            if (((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.height) === 0) {
-              return;
-            }
-            if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_TOP)) {
-              var _entry$rootBounds2;
-              var sentinelIsBelowScrollArea = (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.bottom) || 0) < entry.boundingClientRect.bottom;
-              if (!entry.isIntersecting && !sentinelIsBelowScrollArea) {
-                var _entry$rootBounds3;
-                tree && _this4.makeHeaderRowSticky(tree, (_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top);
-                _this4.lastStickyTimestamp = Date.now();
-              } else {
-                table && _this4.makeRowHeaderNotSticky(table);
-              }
-            }
-            if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)) {
-              var _entry$rootBounds4;
-              var sentinelIsAboveScrollArea = entry.boundingClientRect.top - _this4.dom.offsetHeight < (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.top) || 0);
-              if (table && !entry.isIntersecting && sentinelIsAboveScrollArea) {
-                // Not a perfect solution, but need to this code specific for FireFox ED-19177
-                if (browser.gecko) {
-                  if (_this4.lastStickyTimestamp && Date.now() - _this4.lastStickyTimestamp > STICKY_HEADER_TOGGLE_TOLERANCE_MS) {
-                    _this4.makeRowHeaderNotSticky(table);
-                  }
-                } else {
-                  _this4.makeRowHeaderNotSticky(table);
-                }
-              } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
-                var _entry$rootBounds5;
-                tree && _this4.makeHeaderRowSticky(tree, entry === null || entry === void 0 || (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
-                _this4.lastStickyTimestamp = Date.now();
-              }
-            }
-            return;
-          });
-        }, {
-          root: this.editorScrollableElement
+      this.intersectionObserver = new IntersectionObserver(function (entries, _) {
+        var _this4$editorScrollab, _this4$editorScrollab2;
+        // IMPORTANT: please try and avoid using entry.rootBounds it's terribly inconsistent. For example; sometimes it may return
+        // 0 height. In safari it will multiply all values by the window scale factor, however chrome & firfox won't.
+        // This is why i just get the scroll view bounding rect here and use it, and fallback to the entry.rootBounds if needed.
+        var rootBounds = (_this4$editorScrollab = _this4.editorScrollableElement) === null || _this4$editorScrollab === void 0 || (_this4$editorScrollab2 = _this4$editorScrollab.getBoundingClientRect) === null || _this4$editorScrollab2 === void 0 ? void 0 : _this4$editorScrollab2.call(_this4$editorScrollab);
+        entries.forEach(function (entry) {
+          var target = entry.target,
+            isIntersecting = entry.isIntersecting,
+            boundingClientRect = entry.boundingClientRect;
+          // This observer only every looks at the top/bottom sentinels, we can assume if it's not one then it's the other.
+          var targetKey = target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_TOP) ? 'top' : 'bottom';
+          // Cache the latest sentinel information
+          _this4.sentinelData[targetKey] = {
+            isIntersecting: isIntersecting,
+            boundingClientRect: boundingClientRect,
+            rootBounds: rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds
+          };
+          // Keep the other sentinels rootBounds in sync with this latest one
+          _this4.sentinelData[targetKey === 'top' ? 'bottom' : targetKey].rootBounds = rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds;
         });
-      }
+        _this4.refreshStickyState();
+      }, {
+        threshold: 0,
+        root: this.editorScrollableElement
+      });
     }
   }, {
     key: "refreshStickyState",

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

@@ -13,7 +13,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../commands';
 import { stopKeyboardColumnResizing } from '../commands/column-resize';
 import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from '../commands/misc';
-import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, whenTableInFocus, withCellTracking } from '../event-handlers';
+import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleMouseUp, handleTripleClick, whenTableInFocus, withCellTracking } from '../event-handlers';
 import { createTableView } from '../nodeviews/table';
 import TableCell from '../nodeviews/TableCell';
 import TableRow from '../nodeviews/TableRow';
@@ -273,6 +273,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         mouseout: whenTableInFocus(handleMouseOut),
         mousemove: whenTableInFocus(handleMouseMove, elementContentRects),
         mouseenter: handleMouseEnter,
+        mouseup: whenTableInFocus(handleMouseUp),
         click: withCellTracking(whenTableInFocus(handleClick))
       },
       handleTripleClick: handleTripleClick

package/dist/esm/ui/FloatingInsertButton/index.js

@@ -68,12 +68,15 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
       if (tr.selection instanceof CellSelection && (tr.selection.isColSelection() || tr.selection.isRowSelection())) {
         return null;
       }
-      var cellPosition = this.getCellPosition(type);
-      if (!cellPosition) {
+      var tablePos = findTable(tr.selection);
+      if (!tablePos) {
         return null;
       }
-      var tablePos = findTable(editorView.state.selection);
-      if (!tablePos) {
+
+      // the tableNode props is not always latest (when you type some text in a cell, it's not updated yet)
+      // we need to get the latest one by calling findTable(tr.selection)
+      var cellPosition = this.getCellPosition(type, tablePos === null || tablePos === void 0 ? void 0 : tablePos.node);
+      if (!cellPosition) {
         return null;
       }
       var domAtPos = editorView.domAtPos.bind(editorView);
@@ -140,9 +143,8 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "getCellPosition",
-    value: function getCellPosition(type) {
+    value: function getCellPosition(type, tableNode) {
       var _this$props2 = this.props,
-        tableNode = _this$props2.tableNode,
         insertColumnButtonIndex = _this$props2.insertColumnButtonIndex,
         insertRowButtonIndex = _this$props2.insertRowButtonIndex;
       var tableMap = TableMap.get(tableNode);