@atlaskit/editor-plugin-table 5.3.3 → 5.3.5

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/esm/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';
 
@@ -40,12 +42,36 @@ export var setDropTarget = function setDropTarget(type, index, tr) {
   });
 };
 export var clearDropTarget = function clearDropTarget(tr) {
-  return createCommand({
-    type: DragAndDropActionType.CLEAR_DROP_TARGET,
-    data: {
-      decorationSet: DecorationSet.empty
+  return createCommand(function (state) {
+    var _getPluginState2 = getPluginState(state),
+      dropTargetType = _getPluginState2.dropTargetType,
+      dropTargetIndex = _getPluginState2.dropTargetIndex;
+    if (dropTargetType === DropTargetType.NONE && dropTargetIndex === 0) {
+      return false;
     }
+    return {
+      type: DragAndDropActionType.CLEAR_DROP_TARGET,
+      data: {
+        decorationSet: DecorationSet.empty
+      }
+    };
   }, function (originalTr) {
     return (tr || originalTr).setMeta('addToHistory', false);
   });
+};
+export var moveSource = function moveSource(sourceType, sourceIndex, targetIndex) {
+  return createCommand(function (state) {
+    return {
+      type: DragAndDropActionType.CLEAR_DROP_TARGET,
+      data: {
+        decorationSet: DecorationSet.empty
+      }
+    };
+  }, function (tr) {
+    if (sourceIndex === targetIndex) {
+      return tr.setMeta('addToHistory', false);
+    }
+    var move = sourceType === 'table-row' ? moveRow : moveColumn;
+    return move(sourceIndex, targetIndex + (sourceIndex > targetIndex ? 0 : -1))(tr);
+  });
 };

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

@@ -3,7 +3,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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';
 var _pluginFactory = pluginFactory(pluginKey, reducer, {
@@ -22,9 +21,7 @@ var _pluginFactory = pluginFactory(pluginKey, reducer, {
         });
       }
       return pluginState;
-    },
-    onDocChanged: handleDocOrSelectionChanged,
-    onSelectionChanged: handleDocOrSelectionChanged
+    }
   }),
   createPluginState = _pluginFactory.createPluginState,
   createCommand = _pluginFactory.createCommand,

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

@@ -1,10 +1,10 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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,25 +46,25 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
           },
           onDrag: function onDrag(event) {
             var 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),
-            // );
+            var sourceType = data.sourceType,
+              targetAdjustedIndex = data.targetAdjustedIndex;
+            var dropTargetType = sourceType === 'table-row' ? DropTargetType.ROW : DropTargetType.COLUMN;
+            setDropTarget(dropTargetType, targetAdjustedIndex)(editorView.state, editorView.dispatch);
           },
           onDrop: function onDrop(event) {
             var 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;
             }
             var sourceType = data.sourceType,
@@ -74,12 +74,12 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
             // If the drop target index contains merged cells then we should not allow the drop to occur.
             var hasMergedCells = sourceType === 'table-row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
             if (hasMergedCells(targetAdjustedIndex)(editorView.state.selection)) {
+              clearDropTarget()(editorView.state, editorView.dispatch);
               return;
             }
-            var move = sourceType === 'table-row' ? moveRow : moveColumn;
             var _sourceIndexes = _slicedToArray(sourceIndexes, 1),
               sourceIndex = _sourceIndexes[0];
-            return editorView.dispatch(move(sourceIndex, targetAdjustedIndex)(editorView.state.tr));
+            moveSource(sourceType, sourceIndex, targetAdjustedIndex)(editorView.state, editorView.dispatch);
           }
         })
       };

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

@@ -1,9 +1,11 @@
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { DraggableType } from '../../types';
 import { TableDecorations } from '../../types';
-import type { DropTargetType } from './consts';
+import { DropTargetType } from './consts';
 export declare const getDecorations: (state: EditorState) => DecorationSet;
 export declare const updatePluginStateDecorations: (state: EditorState, decorations: Decoration[], key: TableDecorations) => DecorationSet;
 export declare const setDropTarget: (type: DropTargetType, index: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const clearDropTarget: (tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
+export declare const moveSource: (sourceType: DraggableType, sourceIndex: number, targetIndex: number) => import("@atlaskit/editor-common/types").Command;

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/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/commands.d.ts

@@ -1,9 +1,11 @@
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { DraggableType } from '../../types';
 import { TableDecorations } from '../../types';
-import type { DropTargetType } from './consts';
+import { DropTargetType } from './consts';
 export declare const getDecorations: (state: EditorState) => DecorationSet;
 export declare const updatePluginStateDecorations: (state: EditorState, decorations: Decoration[], key: TableDecorations) => DecorationSet;
 export declare const setDropTarget: (type: DropTargetType, index: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
 export declare const clearDropTarget: (tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
+export declare const moveSource: (sourceType: DraggableType, sourceIndex: number, targetIndex: number) => import("@atlaskit/editor-common/types").Command;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.3",
+  "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);

package/src/plugins/table/pm-plugins/drag-and-drop/commands.ts

@@ -4,7 +4,9 @@ import type {
 } from '@atlaskit/editor-prosemirror/state';
 import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
 
+import type { DraggableType } from '../../types';
 import { TableDecorations } from '../../types';
 import {
   createColumnInsertLine,
@@ -13,7 +15,7 @@ import {
 } from '../../utils';
 
 import { DragAndDropActionType } from './actions';
-import type { DropTargetType } from './consts';
+import { DropTargetType } from './consts';
 import { createCommand, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 
@@ -71,12 +73,46 @@ export const setDropTarget = (
 
 export const clearDropTarget = (tr?: Transaction) =>
   createCommand(
-    {
-      type: DragAndDropActionType.CLEAR_DROP_TARGET,
-      data: {
-        decorationSet: DecorationSet.empty,
-      },
+    (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: Transaction) =>
       (tr || originalTr).setMeta('addToHistory', false),
   );
+
+export const moveSource = (
+  sourceType: DraggableType,
+  sourceIndex: number,
+  targetIndex: number,
+) =>
+  createCommand(
+    (state) => {
+      return {
+        type: DragAndDropActionType.CLEAR_DROP_TARGET,
+        data: {
+          decorationSet: DecorationSet.empty,
+        },
+      };
+    },
+    (tr: Transaction) => {
+      if (sourceIndex === targetIndex) {
+        return tr.setMeta('addToHistory', false);
+      }
+
+      const move = sourceType === 'table-row' ? moveRow : moveColumn;
+      return move(
+        sourceIndex,
+        targetIndex + (sourceIndex > targetIndex ? 0 : -1),
+      )(tr);
+    },
+  );

package/src/plugins/table/pm-plugins/drag-and-drop/plugin-factory.ts

@@ -2,7 +2,6 @@ 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';
 
@@ -28,6 +27,4 @@ export const { createPluginState, createCommand, getPluginState } =
       }
       return pluginState;
     },
-    onDocChanged: handleDocOrSelectionChanged,
-    onSelectionChanged: handleDocOrSelectionChanged,
   });

package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts

@@ -5,7 +5,6 @@ import type {
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 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 type { DraggableSourceData } from '../../types';
@@ -15,6 +14,7 @@ import {
 } 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';
@@ -59,25 +59,31 @@ export const createPlugin = (
           },
           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;
             }
 
@@ -91,15 +97,16 @@ export const createPlugin = (
             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);
           },
         }),
       };

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

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.handleDocOrSelectionChanged = void 0;
-var _utils = require("@atlaskit/editor-tables/utils");
-// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
-
-var buildPluginState = function buildPluginState(builders) {
-  return function (props) {
-    return function (pluginState) {
-      return builders.reduce(function (_pluginState, transform) {
-        return transform(props)(_pluginState);
-      }, pluginState);
-    };
-  };
-};
-var handleDocOrSelectionChanged = exports.handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr, pluginState) {
-  return buildPluginState([])({
-    tr: tr,
-    table: (0, _utils.findTable)(tr.selection)
-  })(pluginState);
-};

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

@@ -1,10 +0,0 @@
-// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
-
-import { findTable } from '@atlaskit/editor-tables/utils';
-const buildPluginState = builders => props => pluginState => {
-  return builders.reduce((_pluginState, transform) => transform(props)(_pluginState), pluginState);
-};
-export const handleDocOrSelectionChanged = (tr, pluginState) => buildPluginState([])({
-  tr,
-  table: findTable(tr.selection)
-})(pluginState);

package/dist/esm/plugins/table/pm-plugins/drag-and-drop/handlers.js

@@ -1,18 +0,0 @@
-// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
-
-import { findTable } from '@atlaskit/editor-tables/utils';
-var buildPluginState = function buildPluginState(builders) {
-  return function (props) {
-    return function (pluginState) {
-      return builders.reduce(function (_pluginState, transform) {
-        return transform(props)(_pluginState);
-      }, pluginState);
-    };
-  };
-};
-export var handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr, pluginState) {
-  return buildPluginState([])({
-    tr: tr,
-    table: findTable(tr.selection)
-  })(pluginState);
-};