@atlaskit/editor-plugin-table 5.3.3 → 5.3.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 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/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/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);
           }
         })
       };

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/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/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.4",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

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);
-};

package/dist/types/plugins/table/pm-plugins/drag-and-drop/handlers.d.ts

@@ -1,3 +0,0 @@
-import type { ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { DragAndDropPluginState } from './types';
-export declare const handleDocOrSelectionChanged: (tr: Transaction | ReadonlyTransaction, pluginState: DragAndDropPluginState) => DragAndDropPluginState;

package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/handlers.d.ts

@@ -1,3 +0,0 @@
-import type { ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { DragAndDropPluginState } from './types';
-export declare const handleDocOrSelectionChanged: (tr: Transaction | ReadonlyTransaction, pluginState: DragAndDropPluginState) => DragAndDropPluginState;

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

@@ -1,35 +0,0 @@
-// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
-import type {
-  ReadonlyTransaction,
-  Transaction,
-} from '@atlaskit/editor-prosemirror/state';
-import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
-import { findTable } from '@atlaskit/editor-tables/utils';
-
-import type { DragAndDropPluginState } from './types';
-
-type BuilderDragAndDropPluginState = (props: {
-  tr: Transaction | ReadonlyTransaction;
-  table?: ContentNodeWithPos;
-}) => (pluginState: DragAndDropPluginState) => DragAndDropPluginState;
-
-const buildPluginState =
-  (
-    builders: Array<BuilderDragAndDropPluginState>,
-  ): BuilderDragAndDropPluginState =>
-  (props) =>
-  (pluginState) => {
-    return builders.reduce(
-      (_pluginState, transform) => transform(props)(_pluginState),
-      pluginState,
-    );
-  };
-
-export const handleDocOrSelectionChanged = (
-  tr: Transaction | ReadonlyTransaction,
-  pluginState: DragAndDropPluginState,
-): DragAndDropPluginState =>
-  buildPluginState([])({
-    tr,
-    table: findTable(tr.selection),
-  })(pluginState);