@atlaskit/editor-plugin-table 5.3.3 → 5.3.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- [#41793](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41793) [`7e48d39f900`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7e48d39f900) - Connected the Pragmatic DnD monitor to the new drop target insert line decorations
+
 ## 5.3.3
 
 ### 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/cjs/plugins/table/pm-plugins/drag-and-drop/commands.js

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updatePluginStateDecorations = exports.setDropTarget = exports.getDecorations = exports.clearDropTarget = void 0;
+exports.updatePluginStateDecorations = exports.setDropTarget = exports.moveSource = exports.getDecorations = exports.clearDropTarget = void 0;
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _types = require("../../types");
-var _utils = require("../../utils");
+var _utils2 = require("../../utils");
 var _actions = require("./actions");
+var _consts = require("./consts");
 var _pluginFactory = require("./plugin-factory");
 var _pluginKey = require("./plugin-key");
 // TODO: This command is a placeholder example. Please replace this if required.
@@ -16,7 +18,7 @@ var getDecorations = exports.getDecorations = function getDecorations(state) {
   return ((_pluginKey$getState = _pluginKey.pluginKey.getState(state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.decorationSet) || _view.DecorationSet.empty;
 };
 var updatePluginStateDecorations = exports.updatePluginStateDecorations = function updatePluginStateDecorations(state, decorations, key) {
-  return (0, _utils.updateDecorations)(state.doc, getDecorations(state), decorations, key);
+  return (0, _utils2.updateDecorations)(state.doc, getDecorations(state), decorations, key);
 };
 var setDropTarget = exports.setDropTarget = function setDropTarget(type, index, tr) {
   return (0, _pluginFactory.createCommand)(function (state) {
@@ -28,9 +30,9 @@ var setDropTarget = exports.setDropTarget = function setDropTarget(type, index,
     }
     var decorationSet = _view.DecorationSet.empty;
     if (type === 'column') {
-      decorationSet = updatePluginStateDecorations(state, (0, _utils.createColumnInsertLine)(index, state.selection), _types.TableDecorations.COLUMN_INSERT_LINE);
+      decorationSet = updatePluginStateDecorations(state, (0, _utils2.createColumnInsertLine)(index, state.selection), _types.TableDecorations.COLUMN_INSERT_LINE);
     } else if (type === 'row') {
-      decorationSet = updatePluginStateDecorations(state, (0, _utils.createRowInsertLine)(index, state.selection), _types.TableDecorations.ROW_INSERT_LINE);
+      decorationSet = updatePluginStateDecorations(state, (0, _utils2.createRowInsertLine)(index, state.selection), _types.TableDecorations.ROW_INSERT_LINE);
     }
     return {
       type: _actions.DragAndDropActionType.SET_DROP_TARGET,
@@ -45,12 +47,36 @@ var setDropTarget = exports.setDropTarget = function setDropTarget(type, index,
   });
 };
 var clearDropTarget = exports.clearDropTarget = function clearDropTarget(tr) {
-  return (0, _pluginFactory.createCommand)({
-    type: _actions.DragAndDropActionType.CLEAR_DROP_TARGET,
-    data: {
-      decorationSet: _view.DecorationSet.empty
+  return (0, _pluginFactory.createCommand)(function (state) {
+    var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
+      dropTargetType = _getPluginState2.dropTargetType,
+      dropTargetIndex = _getPluginState2.dropTargetIndex;
+    if (dropTargetType === _consts.DropTargetType.NONE && dropTargetIndex === 0) {
+      return false;
     }
+    return {
+      type: _actions.DragAndDropActionType.CLEAR_DROP_TARGET,
+      data: {
+        decorationSet: _view.DecorationSet.empty
+      }
+    };
   }, function (originalTr) {
     return (tr || originalTr).setMeta('addToHistory', false);
   });
+};
+var moveSource = exports.moveSource = function moveSource(sourceType, sourceIndex, targetIndex) {
+  return (0, _pluginFactory.createCommand)(function (state) {
+    return {
+      type: _actions.DragAndDropActionType.CLEAR_DROP_TARGET,
+      data: {
+        decorationSet: _view.DecorationSet.empty
+      }
+    };
+  }, function (tr) {
+    if (sourceIndex === targetIndex) {
+      return tr.setMeta('addToHistory', false);
+    }
+    var move = sourceType === 'table-row' ? _utils.moveRow : _utils.moveColumn;
+    return move(sourceIndex, targetIndex + (sourceIndex > targetIndex ? 0 : -1))(tr);
+  });
 };

package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/plugin-factory.js

@@ -8,7 +8,6 @@ exports.getPluginState = exports.createPluginState = exports.createCommand = voi
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _pluginKey = require("../plugin-key");
-var _handlers = require("./handlers");
 var _pluginKey2 = require("./plugin-key");
 var _reducer = _interopRequireDefault(require("./reducer"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -29,9 +28,7 @@ var _pluginFactory = (0, _utils.pluginFactory)(_pluginKey2.pluginKey, _reducer.d
         });
       }
       return pluginState;
-    },
-    onDocChanged: _handlers.handleDocOrSelectionChanged,
-    onSelectionChanged: _handlers.handleDocOrSelectionChanged
+    }
   }),
   createPluginState = exports.createPluginState = _pluginFactory.createPluginState,
   createCommand = exports.createCommand = _pluginFactory.createCommand,

package/dist/cjs/plugins/table/pm-plugins/drag-and-drop/plugin.js

@@ -8,10 +8,10 @@ exports.createPlugin = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _view = require("@atlaskit/editor-prosemirror/view");
-var _utils = require("@atlaskit/editor-tables/utils");
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
 var _mergedCells = require("../../utils/merged-cells");
 var _pluginFactory = require("../plugin-factory");
+var _commands = require("./commands");
 var _consts = require("./consts");
 var _pluginFactory2 = require("./plugin-factory");
 var _pluginKey = require("./plugin-key");
@@ -53,25 +53,25 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
           },
           onDrag: function onDrag(event) {
             var data = (0, _monitor.getDraggableDataFromEvent)(event);
-
             // If no data can be found then it's most like we do not want to perform any drag actions
             if (!data) {
+              (0, _commands.clearDropTarget)()(editorView.state, editorView.dispatch);
               return;
             }
 
             // TODO: as we drag an element around we are going to want to update the state to acurately reflect the current
             // insert location as to where the draggable will most likely be go. For example;
-            // const { sourceType, targetAdjustedIndex } = data;
-            // const highlight = sourceType === 'table-row' ? highlightRow : highlightColumn;
-            // return editorView.dispatch(
-            //   highlight(targetAdjustedIndex)(editorView.state.tr),
-            // );
+            var sourceType = data.sourceType,
+              targetAdjustedIndex = data.targetAdjustedIndex;
+            var dropTargetType = sourceType === 'table-row' ? _consts.DropTargetType.ROW : _consts.DropTargetType.COLUMN;
+            (0, _commands.setDropTarget)(dropTargetType, targetAdjustedIndex)(editorView.state, editorView.dispatch);
           },
           onDrop: function onDrop(event) {
             var data = (0, _monitor.getDraggableDataFromEvent)(event);
 
             // If no data can be found then it's most like we do not want to perform any drop action
             if (!data) {
+              (0, _commands.clearDropTarget)()(editorView.state, editorView.dispatch);
               return;
             }
             var sourceType = data.sourceType,
@@ -81,12 +81,12 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
             // If the drop target index contains merged cells then we should not allow the drop to occur.
             var hasMergedCells = sourceType === 'table-row' ? _mergedCells.hasMergedCellsInRow : _mergedCells.hasMergedCellsInColumn;
             if (hasMergedCells(targetAdjustedIndex)(editorView.state.selection)) {
+              (0, _commands.clearDropTarget)()(editorView.state, editorView.dispatch);
               return;
             }
-            var move = sourceType === 'table-row' ? _utils.moveRow : _utils.moveColumn;
             var _sourceIndexes = (0, _slicedToArray2.default)(sourceIndexes, 1),
               sourceIndex = _sourceIndexes[0];
-            return editorView.dispatch(move(sourceIndex, targetAdjustedIndex)(editorView.state.tr));
+            (0, _commands.moveSource)(sourceType, sourceIndex, targetAdjustedIndex)(editorView.state, editorView.dispatch);
           }
         })
       };

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/es2019/plugins/table/pm-plugins/drag-and-drop/commands.js

@@ -1,7 +1,9 @@
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
 import { TableDecorations } from '../../types';
 import { createColumnInsertLine, createRowInsertLine, updateDecorations } from '../../utils';
 import { DragAndDropActionType } from './actions';
+import { DropTargetType } from './consts';
 import { createCommand, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 
@@ -34,9 +36,32 @@ export const setDropTarget = (type, index, tr) => createCommand(state => {
     }
   };
 }, originalTr => (tr || originalTr).setMeta('addToHistory', false));
-export const clearDropTarget = tr => createCommand({
-  type: DragAndDropActionType.CLEAR_DROP_TARGET,
-  data: {
-    decorationSet: DecorationSet.empty
+export const clearDropTarget = tr => createCommand(state => {
+  const {
+    dropTargetType,
+    dropTargetIndex
+  } = getPluginState(state);
+  if (dropTargetType === DropTargetType.NONE && dropTargetIndex === 0) {
+    return false;
+  }
+  return {
+    type: DragAndDropActionType.CLEAR_DROP_TARGET,
+    data: {
+      decorationSet: DecorationSet.empty
+    }
+  };
+}, originalTr => (tr || originalTr).setMeta('addToHistory', false));
+export const moveSource = (sourceType, sourceIndex, targetIndex) => createCommand(state => {
+  return {
+    type: DragAndDropActionType.CLEAR_DROP_TARGET,
+    data: {
+      decorationSet: DecorationSet.empty
+    }
+  };
+}, tr => {
+  if (sourceIndex === targetIndex) {
+    return tr.setMeta('addToHistory', false);
   }
-}, originalTr => (tr || originalTr).setMeta('addToHistory', false));
+  const move = sourceType === 'table-row' ? moveRow : moveColumn;
+  return move(sourceIndex, targetIndex + (sourceIndex > targetIndex ? 0 : -1))(tr);
+});

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/plugin-factory.js

@@ -1,6 +1,5 @@
 import { pluginFactory } from '@atlaskit/editor-common/utils';
 import { pluginKey as tablePluginKey } from '../plugin-key';
-import { handleDocOrSelectionChanged } from './handlers';
 import { pluginKey } from './plugin-key';
 import reducer from './reducer';
 export const {
@@ -26,7 +25,5 @@ export const {
       };
     }
     return pluginState;
-  },
-  onDocChanged: handleDocOrSelectionChanged,
-  onSelectionChanged: handleDocOrSelectionChanged
+  }
 });

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/plugin.js

@@ -1,9 +1,9 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils/merged-cells';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
+import { clearDropTarget, moveSource, setDropTarget } from './commands';
 import { DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
@@ -46,26 +46,27 @@ export const createPlugin = (dispatch, eventDispatcher) => {
           },
           onDrag(event) {
             const data = getDraggableDataFromEvent(event);
-
             // If no data can be found then it's most like we do not want to perform any drag actions
             if (!data) {
+              clearDropTarget()(editorView.state, editorView.dispatch);
               return;
             }
 
             // TODO: as we drag an element around we are going to want to update the state to acurately reflect the current
             // insert location as to where the draggable will most likely be go. For example;
-            // const { sourceType, targetAdjustedIndex } = data;
-            // const highlight = sourceType === 'table-row' ? highlightRow : highlightColumn;
-            // return editorView.dispatch(
-            //   highlight(targetAdjustedIndex)(editorView.state.tr),
-            // );
+            const {
+              sourceType,
+              targetAdjustedIndex
+            } = data;
+            const dropTargetType = sourceType === 'table-row' ? DropTargetType.ROW : DropTargetType.COLUMN;
+            setDropTarget(dropTargetType, targetAdjustedIndex)(editorView.state, editorView.dispatch);
           },
-
           onDrop(event) {
             const data = getDraggableDataFromEvent(event);
 
             // If no data can be found then it's most like we do not want to perform any drop action
             if (!data) {
+              clearDropTarget()(editorView.state, editorView.dispatch);
               return;
             }
             const {
@@ -77,11 +78,11 @@ export const createPlugin = (dispatch, eventDispatcher) => {
             // If the drop target index contains merged cells then we should not allow the drop to occur.
             const hasMergedCells = sourceType === 'table-row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
             if (hasMergedCells(targetAdjustedIndex)(editorView.state.selection)) {
+              clearDropTarget()(editorView.state, editorView.dispatch);
               return;
             }
-            const move = sourceType === 'table-row' ? moveRow : moveColumn;
             const [sourceIndex] = sourceIndexes;
-            return editorView.dispatch(move(sourceIndex, targetAdjustedIndex)(editorView.state.tr));
+            moveSource(sourceType, sourceIndex, targetAdjustedIndex)(editorView.state, editorView.dispatch);
           }
         })
       };