@atlaskit/editor-plugin-table 5.3.4 → 5.3.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 5.3.5
+
+### Patch Changes
+
+- [#41864](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41864) [`34e85d7299e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/34e85d7299e) - The table row nodeview needs to fetch the current live index and id when the canDrop and getData DnD methods are called. This is due to the fact that prosemirror reorders the tr elements efficently which causes the target indexes to be reordered and never updated.
+
 ## 5.3.4
 
 ### Patch Changes

package/dist/cjs/plugins/table/nodeviews/TableRow.js

@@ -168,6 +168,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
   }, {
     key: "addDropTarget",
     value: function addDropTarget(element) {
+      var _this2 = this;
       var pos = this.getPos();
       if (!Number.isFinite(pos)) {
         return;
@@ -175,15 +176,15 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
       if (this.dropTargetCleanup) {
         this.dropTargetCleanup();
       }
-      var resolvedPos = this.view.state.doc.resolve(pos);
-      var targetIndex = resolvedPos.index();
-      var localId = resolvedPos.parent.attrs.localId;
       this.dropTargetCleanup = (0, _element.dropTargetForElements)({
         element: element,
         canDrop: function canDrop(_ref2) {
           var _data$indexes, _data$indexes2;
           var source = _ref2.source;
           var data = source.data;
+          var _this2$getCurrentData = _this2.getCurrentData(),
+            localId = _this2$getCurrentData.localId,
+            targetIndex = _this2$getCurrentData.targetIndex;
           return (
             // Only draggables of row type can be dropped on this target
             data.type === 'table-row' &&
@@ -193,9 +194,15 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
             !!((_data$indexes = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(targetIndex)) === -1
           );
         },
+        getIsSticky: function getIsSticky() {
+          return true;
+        },
         getData: function getData(_ref3) {
           var input = _ref3.input,
             element = _ref3.element;
+          var _this2$getCurrentData2 = _this2.getCurrentData(),
+            localId = _this2$getCurrentData2.localId,
+            targetIndex = _this2$getCurrentData2.targetIndex;
           var data = {
             localId: localId,
             type: 'table-row',
@@ -209,6 +216,17 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
         }
       });
     }
+  }, {
+    key: "getCurrentData",
+    value: function getCurrentData() {
+      var resolvedPos = this.view.state.doc.resolve(this.getPos());
+      var targetIndex = resolvedPos.index();
+      var localId = resolvedPos.parent.attrs.localId;
+      return {
+        targetIndex: targetIndex,
+        localId: localId
+      };
+    }
   }, {
     key: "subscribe",
     value: function subscribe() {
@@ -257,7 +275,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
   }, {
     key: "initObservers",
     value: function initObservers() {
-      var _this2 = this;
+      var _this3 = this;
       if (!this.dom || this.dom.dataset.isObserved) {
         return;
       }
@@ -274,15 +292,15 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
       window.requestAnimationFrame(function () {
         var _getTree;
         // we expect tree to be defined after animation frame
-        var tableContainer = (_getTree = (0, _dom2.getTree)(_this2.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(_types.TableCssClassName.NODEVIEW_WRAPPER));
+        var tableContainer = (_getTree = (0, _dom2.getTree)(_this3.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(_types.TableCssClassName.NODEVIEW_WRAPPER));
         if (tableContainer) {
-          _this2.sentinels.top = tableContainer.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP).item(0);
-          _this2.sentinels.bottom = tableContainer.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM).item(0);
-          [_this2.sentinels.top, _this2.sentinels.bottom].forEach(function (el) {
+          _this3.sentinels.top = tableContainer.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP).item(0);
+          _this3.sentinels.bottom = tableContainer.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM).item(0);
+          [_this3.sentinels.top, _this3.sentinels.bottom].forEach(function (el) {
             // skip if already observed for another row on this table
             if (el && !el.dataset.isObserved) {
               el.dataset.isObserved = 'true';
-              _this2.intersectionObserver.observe(el);
+              _this3.intersectionObserver.observe(el);
             }
           });
         }
@@ -294,27 +312,27 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
   }, {
     key: "createResizeObserver",
     value: function createResizeObserver() {
-      var _this3 = this;
+      var _this4 = this;
       this.resizeObserver = new ResizeObserver(function (entries) {
-        var tree = (0, _dom2.getTree)(_this3.dom);
+        var tree = (0, _dom2.getTree)(_this4.dom);
         if (!tree) {
           return;
         }
         var table = tree.table;
         entries.forEach(function (entry) {
-          var _this3$editorScrollab;
+          var _this4$editorScrollab;
           // On resize of the parent scroll element we need to adjust the width
           // of the sticky header
-          if (entry.target.className === ((_this3$editorScrollab = _this3.editorScrollableElement) === null || _this3$editorScrollab === void 0 ? void 0 : _this3$editorScrollab.className)) {
-            _this3.updateStickyHeaderWidth();
+          if (entry.target.className === ((_this4$editorScrollab = _this4.editorScrollableElement) === null || _this4$editorScrollab === void 0 ? void 0 : _this4$editorScrollab.className)) {
+            _this4.updateStickyHeaderWidth();
           } else {
             var newHeight = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;
-            if (_this3.sentinels.bottom &&
+            if (_this4.sentinels.bottom &&
             // When the table header is sticky, it would be taller by a 1px (border-bottom),
             // So we adding this check to allow a 1px difference.
-            Math.abs(newHeight - (_this3.stickyRowHeight || 0)) > _consts.stickyHeaderBorderBottomWidth) {
-              _this3.stickyRowHeight = newHeight;
-              _this3.sentinels.bottom.style.bottom = "".concat(_consts.tableScrollbarOffset + _consts.stickyRowOffsetTop + newHeight, "px");
+            Math.abs(newHeight - (_this4.stickyRowHeight || 0)) > _consts.stickyHeaderBorderBottomWidth) {
+              _this4.stickyRowHeight = newHeight;
+              _this4.sentinels.bottom.style.bottom = "".concat(_consts.tableScrollbarOffset + _consts.stickyRowOffsetTop + newHeight, "px");
               (0, _dom.updateStickyMargins)(table);
             }
           }
@@ -324,9 +342,9 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
   }, {
     key: "createIntersectionObserver",
     value: function createIntersectionObserver() {
-      var _this4 = this;
+      var _this5 = this;
       this.intersectionObserver = new IntersectionObserver(function (entries, _) {
-        var tree = (0, _dom2.getTree)(_this4.dom);
+        var tree = (0, _dom2.getTree)(_this5.dom);
         if (!tree) {
           return;
         }
@@ -349,28 +367,28 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
             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();
+              tree && _this5.makeHeaderRowSticky(tree, (_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top);
+              _this5.lastStickyTimestamp = Date.now();
             } else {
-              table && _this4.makeRowHeaderNotSticky(table);
+              table && _this5.makeRowHeaderNotSticky(table);
             }
           }
           if (target.classList.contains(_types.TableCssClassName.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);
+            var sentinelIsAboveScrollArea = entry.boundingClientRect.top - _this5.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 (_utils.browser.gecko) {
-                if (_this4.lastStickyTimestamp && Date.now() - _this4.lastStickyTimestamp > _consts.STICKY_HEADER_TOGGLE_TOLERANCE_MS) {
-                  _this4.makeRowHeaderNotSticky(table);
+                if (_this5.lastStickyTimestamp && Date.now() - _this5.lastStickyTimestamp > _consts.STICKY_HEADER_TOGGLE_TOLERANCE_MS) {
+                  _this5.makeRowHeaderNotSticky(table);
                 }
               } else {
-                _this4.makeRowHeaderNotSticky(table);
+                _this5.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();
+              tree && _this5.makeHeaderRowSticky(tree, entry === null || entry === void 0 || (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
+              _this5.lastStickyTimestamp = Date.now();
             }
           }
           return;
@@ -445,12 +463,12 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
   }, {
     key: "refireIntersectionObservers",
     value: function refireIntersectionObservers() {
-      var _this5 = this;
+      var _this6 = this;
       if (this.isSticky) {
         [this.sentinels.top, this.sentinels.bottom].forEach(function (el) {
-          if (el && _this5.intersectionObserver) {
-            _this5.intersectionObserver.unobserve(el);
-            _this5.intersectionObserver.observe(el);
+          if (el && _this6.intersectionObserver) {
+            _this6.intersectionObserver.unobserve(el);
+            _this6.intersectionObserver.observe(el);
           }
         });
       }
@@ -459,7 +477,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
     key: "makeHeaderRowSticky",
     value: function makeHeaderRowSticky(tree, scrollTop) {
       var _tbody$firstChild,
-        _this6 = this;
+        _this7 = this;
       // If header row height is more than 50% of viewport height don't do this
       if (this.isSticky || this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2) {
         return;
@@ -496,7 +514,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_ref) {
         });
         var fastScrollThresholdMs = 500;
         setTimeout(function () {
-          _this6.refireIntersectionObservers();
+          _this7.refireIntersectionObservers();
         }, fastScrollThresholdMs);
       }
       this.dom.style.top = "".concat(domTop, "px");

package/dist/es2019/plugins/table/nodeviews/TableRow.js

@@ -150,16 +150,17 @@ export default class TableRow extends TableNodeView {
     if (this.dropTargetCleanup) {
       this.dropTargetCleanup();
     }
-    const resolvedPos = this.view.state.doc.resolve(pos);
-    const targetIndex = resolvedPos.index();
-    const localId = resolvedPos.parent.attrs.localId;
     this.dropTargetCleanup = dropTargetForElements({
       element: element,
-      canDrop({
+      canDrop: ({
         source
-      }) {
+      }) => {
         var _data$indexes, _data$indexes2;
         const data = source.data;
+        const {
+          localId,
+          targetIndex
+        } = this.getCurrentData();
         return (
           // Only draggables of row type can be dropped on this target
           data.type === 'table-row' &&
@@ -169,10 +170,15 @@ export default class TableRow extends TableNodeView {
           !!((_data$indexes = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(targetIndex)) === -1
         );
       },
-      getData({
+      getIsSticky: () => true,
+      getData: ({
         input,
         element
-      }) {
+      }) => {
+        const {
+          localId,
+          targetIndex
+        } = this.getCurrentData();
         const data = {
           localId,
           type: 'table-row',
@@ -186,6 +192,15 @@ export default class TableRow extends TableNodeView {
       }
     });
   }
+  getCurrentData() {
+    const resolvedPos = this.view.state.doc.resolve(this.getPos());
+    const targetIndex = resolvedPos.index();
+    const localId = resolvedPos.parent.attrs.localId;
+    return {
+      targetIndex,
+      localId
+    };
+  }
   subscribe() {
     this.editorScrollableElement = findOverflowScrollParent(this.view.dom) || window;
     if (this.editorScrollableElement) {

package/dist/esm/plugins/table/nodeviews/TableRow.js

@@ -162,6 +162,7 @@ var TableRow = /*#__PURE__*/function (_ref) {
   }, {
     key: "addDropTarget",
     value: function addDropTarget(element) {
+      var _this2 = this;
       var pos = this.getPos();
       if (!Number.isFinite(pos)) {
         return;
@@ -169,15 +170,15 @@ var TableRow = /*#__PURE__*/function (_ref) {
       if (this.dropTargetCleanup) {
         this.dropTargetCleanup();
       }
-      var resolvedPos = this.view.state.doc.resolve(pos);
-      var targetIndex = resolvedPos.index();
-      var localId = resolvedPos.parent.attrs.localId;
       this.dropTargetCleanup = dropTargetForElements({
         element: element,
         canDrop: function canDrop(_ref2) {
           var _data$indexes, _data$indexes2;
           var source = _ref2.source;
           var data = source.data;
+          var _this2$getCurrentData = _this2.getCurrentData(),
+            localId = _this2$getCurrentData.localId,
+            targetIndex = _this2$getCurrentData.targetIndex;
           return (
             // Only draggables of row type can be dropped on this target
             data.type === 'table-row' &&
@@ -187,9 +188,15 @@ var TableRow = /*#__PURE__*/function (_ref) {
             !!((_data$indexes = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(targetIndex)) === -1
           );
         },
+        getIsSticky: function getIsSticky() {
+          return true;
+        },
         getData: function getData(_ref3) {
           var input = _ref3.input,
             element = _ref3.element;
+          var _this2$getCurrentData2 = _this2.getCurrentData(),
+            localId = _this2$getCurrentData2.localId,
+            targetIndex = _this2$getCurrentData2.targetIndex;
           var data = {
             localId: localId,
             type: 'table-row',
@@ -203,6 +210,17 @@ var TableRow = /*#__PURE__*/function (_ref) {
         }
       });
     }
+  }, {
+    key: "getCurrentData",
+    value: function getCurrentData() {
+      var resolvedPos = this.view.state.doc.resolve(this.getPos());
+      var targetIndex = resolvedPos.index();
+      var localId = resolvedPos.parent.attrs.localId;
+      return {
+        targetIndex: targetIndex,
+        localId: localId
+      };
+    }
   }, {
     key: "subscribe",
     value: function subscribe() {
@@ -251,7 +269,7 @@ var TableRow = /*#__PURE__*/function (_ref) {
   }, {
     key: "initObservers",
     value: function initObservers() {
-      var _this2 = this;
+      var _this3 = this;
       if (!this.dom || this.dom.dataset.isObserved) {
         return;
       }
@@ -268,15 +286,15 @@ var TableRow = /*#__PURE__*/function (_ref) {
       window.requestAnimationFrame(function () {
         var _getTree;
         // we expect tree to be defined after animation frame
-        var tableContainer = (_getTree = getTree(_this2.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(TableCssClassName.NODEVIEW_WRAPPER));
+        var tableContainer = (_getTree = getTree(_this3.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(TableCssClassName.NODEVIEW_WRAPPER));
         if (tableContainer) {
-          _this2.sentinels.top = tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_TOP).item(0);
-          _this2.sentinels.bottom = tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM).item(0);
-          [_this2.sentinels.top, _this2.sentinels.bottom].forEach(function (el) {
+          _this3.sentinels.top = tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_TOP).item(0);
+          _this3.sentinels.bottom = tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM).item(0);
+          [_this3.sentinels.top, _this3.sentinels.bottom].forEach(function (el) {
             // skip if already observed for another row on this table
             if (el && !el.dataset.isObserved) {
               el.dataset.isObserved = 'true';
-              _this2.intersectionObserver.observe(el);
+              _this3.intersectionObserver.observe(el);
             }
           });
         }
@@ -288,27 +306,27 @@ var TableRow = /*#__PURE__*/function (_ref) {
   }, {
     key: "createResizeObserver",
     value: function createResizeObserver() {
-      var _this3 = this;
+      var _this4 = this;
       this.resizeObserver = new ResizeObserver(function (entries) {
-        var tree = getTree(_this3.dom);
+        var tree = getTree(_this4.dom);
         if (!tree) {
           return;
         }
         var table = tree.table;
         entries.forEach(function (entry) {
-          var _this3$editorScrollab;
+          var _this4$editorScrollab;
           // On resize of the parent scroll element we need to adjust the width
           // of the sticky header
-          if (entry.target.className === ((_this3$editorScrollab = _this3.editorScrollableElement) === null || _this3$editorScrollab === void 0 ? void 0 : _this3$editorScrollab.className)) {
-            _this3.updateStickyHeaderWidth();
+          if (entry.target.className === ((_this4$editorScrollab = _this4.editorScrollableElement) === null || _this4$editorScrollab === void 0 ? void 0 : _this4$editorScrollab.className)) {
+            _this4.updateStickyHeaderWidth();
           } else {
             var newHeight = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;
-            if (_this3.sentinels.bottom &&
+            if (_this4.sentinels.bottom &&
             // When the table header is sticky, it would be taller by a 1px (border-bottom),
             // So we adding this check to allow a 1px difference.
-            Math.abs(newHeight - (_this3.stickyRowHeight || 0)) > stickyHeaderBorderBottomWidth) {
-              _this3.stickyRowHeight = newHeight;
-              _this3.sentinels.bottom.style.bottom = "".concat(tableScrollbarOffset + stickyRowOffsetTop + newHeight, "px");
+            Math.abs(newHeight - (_this4.stickyRowHeight || 0)) > stickyHeaderBorderBottomWidth) {
+              _this4.stickyRowHeight = newHeight;
+              _this4.sentinels.bottom.style.bottom = "".concat(tableScrollbarOffset + stickyRowOffsetTop + newHeight, "px");
               updateTableMargin(table);
             }
           }
@@ -318,9 +336,9 @@ var TableRow = /*#__PURE__*/function (_ref) {
   }, {
     key: "createIntersectionObserver",
     value: function createIntersectionObserver() {
-      var _this4 = this;
+      var _this5 = this;
       this.intersectionObserver = new IntersectionObserver(function (entries, _) {
-        var tree = getTree(_this4.dom);
+        var tree = getTree(_this5.dom);
         if (!tree) {
           return;
         }
@@ -343,28 +361,28 @@ var TableRow = /*#__PURE__*/function (_ref) {
             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();
+              tree && _this5.makeHeaderRowSticky(tree, (_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top);
+              _this5.lastStickyTimestamp = Date.now();
             } else {
-              table && _this4.makeRowHeaderNotSticky(table);
+              table && _this5.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);
+            var sentinelIsAboveScrollArea = entry.boundingClientRect.top - _this5.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);
+                if (_this5.lastStickyTimestamp && Date.now() - _this5.lastStickyTimestamp > STICKY_HEADER_TOGGLE_TOLERANCE_MS) {
+                  _this5.makeRowHeaderNotSticky(table);
                 }
               } else {
-                _this4.makeRowHeaderNotSticky(table);
+                _this5.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();
+              tree && _this5.makeHeaderRowSticky(tree, entry === null || entry === void 0 || (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
+              _this5.lastStickyTimestamp = Date.now();
             }
           }
           return;
@@ -439,12 +457,12 @@ var TableRow = /*#__PURE__*/function (_ref) {
   }, {
     key: "refireIntersectionObservers",
     value: function refireIntersectionObservers() {
-      var _this5 = this;
+      var _this6 = this;
       if (this.isSticky) {
         [this.sentinels.top, this.sentinels.bottom].forEach(function (el) {
-          if (el && _this5.intersectionObserver) {
-            _this5.intersectionObserver.unobserve(el);
-            _this5.intersectionObserver.observe(el);
+          if (el && _this6.intersectionObserver) {
+            _this6.intersectionObserver.unobserve(el);
+            _this6.intersectionObserver.observe(el);
           }
         });
       }
@@ -453,7 +471,7 @@ var TableRow = /*#__PURE__*/function (_ref) {
     key: "makeHeaderRowSticky",
     value: function makeHeaderRowSticky(tree, scrollTop) {
       var _tbody$firstChild,
-        _this6 = this;
+        _this7 = this;
       // If header row height is more than 50% of viewport height don't do this
       if (this.isSticky || this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2) {
         return;
@@ -490,7 +508,7 @@ var TableRow = /*#__PURE__*/function (_ref) {
         });
         var fastScrollThresholdMs = 500;
         setTimeout(function () {
-          _this6.refireIntersectionObservers();
+          _this7.refireIntersectionObservers();
         }, fastScrollThresholdMs);
       }
       this.dom.style.top = "".concat(domTop, "px");

package/dist/types/plugins/table/nodeviews/TableRow.d.ts

@@ -37,6 +37,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
      * Methods
      */
     private addDropTarget;
+    private getCurrentData;
     private headerRowMouseScrollEnd;
     private headerRowMouseScroll;
     private subscribe;

package/dist/types-ts4.5/plugins/table/nodeviews/TableRow.d.ts

@@ -37,6 +37,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
      * Methods
      */
     private addDropTarget;
+    private getCurrentData;
     private headerRowMouseScrollEnd;
     private headerRowMouseScroll;
     private subscribe;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.4",
+  "version": "5.3.5",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/plugins/table/nodeviews/TableRow.ts

@@ -192,14 +192,11 @@ export default class TableRow
       this.dropTargetCleanup();
     }
 
-    const resolvedPos = this.view.state.doc.resolve(pos);
-    const targetIndex = resolvedPos.index();
-    const localId = resolvedPos.parent.attrs.localId;
-
     this.dropTargetCleanup = dropTargetForElements({
       element: element,
-      canDrop({ source }) {
+      canDrop: ({ source }) => {
         const data = source.data as DraggableSourceData;
+        const { localId, targetIndex } = this.getCurrentData();
         return (
           // Only draggables of row type can be dropped on this target
           data.type === 'table-row' &&
@@ -210,7 +207,9 @@ export default class TableRow
           data.indexes?.indexOf(targetIndex) === -1
         );
       },
-      getData({ input, element }) {
+      getIsSticky: () => true,
+      getData: ({ input, element }) => {
+        const { localId, targetIndex } = this.getCurrentData();
         const data = {
           localId,
           type: 'table-row',
@@ -225,6 +224,13 @@ export default class TableRow
     });
   }
 
+  private getCurrentData() {
+    const resolvedPos = this.view.state.doc.resolve(this.getPos()!);
+    const targetIndex = resolvedPos.index();
+    const localId = resolvedPos.parent.attrs.localId;
+    return { targetIndex, localId };
+  }
+
   private headerRowMouseScrollEnd = debounce(() => {
     this.dom.classList.remove('no-pointer-events');
   }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT);