@atlaskit/editor-plugin-table 5.3.2 → 5.3.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- [#41701](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41701) [`168e0da8a1c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/168e0da8a1c) - [ux] ED-20425: Added DragPreview and DragInMotionIcon
+
 ## 5.3.2
 
 ### 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/cjs/plugins/table/ui/DragPreview/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragPreview = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _primitives = require("@atlaskit/primitives");
+var _DragInMotionIcon = require("../Icons/DragInMotionIcon");
+var boxStyles = (0, _primitives.xcss)({
+  borderColor: 'color.border.focused',
+  borderStyle: 'solid',
+  borderRadius: 'border.radius.100',
+  borderWidth: 'border.width.outline',
+  backgroundColor: 'color.blanket.selected'
+});
+var DragPreview = exports.DragPreview = function DragPreview(_ref) {
+  var direction = _ref.direction,
+    width = _ref.width,
+    height = _ref.height;
+  var marginLeft = direction === 'row' ? -14 : width / 2 - 14;
+  var marginTop = direction === 'row' ? height / 2 - 14 : -10;
+  var transform = direction === 'row' ? 'rotate(90deg)' : 'none';
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: boxStyles,
+    style: {
+      width: "".concat(width, "px"),
+      height: "".concat(height, "px")
+    }
+  }, /*#__PURE__*/_react.default.createElement(_DragInMotionIcon.DragInMotionIcon, {
+    style: {
+      position: 'absolute',
+      marginLeft: "".concat(marginLeft, "px"),
+      marginTop: "".concat(marginTop, "px"),
+      transform: transform
+    }
+  }));
+};

package/dist/cjs/plugins/table/ui/Icons/DragInMotionIcon.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragInMotionIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var DragInMotionIcon = exports.DragInMotionIcon = function DragInMotionIcon(_ref) {
+  var style = _ref.style;
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "28",
+    height: "20",
+    viewBox: "0 0 28 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: style
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "1",
+    y: "1",
+    width: "26",
+    height: "18",
+    rx: "5",
+    fill: "var(--ds-background-accent-blue-subtle, #579DFF)"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "9",
+    y: "6",
+    width: "2",
+    height: "8",
+    rx: "1",
+    fill: "var(--ds-border-inverse, #FFFFFF)"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "13",
+    y: "6",
+    width: "2",
+    height: "8",
+    rx: "1",
+    fill: "var(--ds-border-inverse, #FFFFFF)"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "17",
+    y: "6",
+    width: "2",
+    height: "8",
+    rx: "1",
+    fill: "var(--ds-border-inverse, #FFFFFF)"
+  }), /*#__PURE__*/_react.default.createElement("rect", {
+    x: "1",
+    y: "1",
+    width: "26",
+    height: "18",
+    rx: "5",
+    stroke: "var(--ds-border-inverse, #FFFFFF)",
+    strokeWidth: "2"
+  }));
+};

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/es2019/plugins/table/ui/DragPreview/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Box, xcss } from '@atlaskit/primitives';
+import { DragInMotionIcon } from '../Icons/DragInMotionIcon';
+const boxStyles = xcss({
+  borderColor: 'color.border.focused',
+  borderStyle: 'solid',
+  borderRadius: 'border.radius.100',
+  borderWidth: 'border.width.outline',
+  backgroundColor: 'color.blanket.selected'
+});
+export const DragPreview = ({
+  direction,
+  width,
+  height
+}) => {
+  let marginLeft = direction === 'row' ? -14 : width / 2 - 14;
+  let marginTop = direction === 'row' ? height / 2 - 14 : -10;
+  let transform = direction === 'row' ? 'rotate(90deg)' : 'none';
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: boxStyles,
+    style: {
+      width: `${width}px`,
+      height: `${height}px`
+    }
+  }, /*#__PURE__*/React.createElement(DragInMotionIcon, {
+    style: {
+      position: 'absolute',
+      marginLeft: `${marginLeft}px`,
+      marginTop: `${marginTop}px`,
+      transform: transform
+    }
+  }));
+};

package/dist/es2019/plugins/table/ui/Icons/DragInMotionIcon.js

@@ -0,0 +1,47 @@
+import React from 'react';
+export const DragInMotionIcon = ({
+  style
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: "28",
+  height: "20",
+  viewBox: "0 0 28 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  style: style
+}, /*#__PURE__*/React.createElement("rect", {
+  x: "1",
+  y: "1",
+  width: "26",
+  height: "18",
+  rx: "5",
+  fill: "var(--ds-background-accent-blue-subtle, #579DFF)"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "9",
+  y: "6",
+  width: "2",
+  height: "8",
+  rx: "1",
+  fill: "var(--ds-border-inverse, #FFFFFF)"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "13",
+  y: "6",
+  width: "2",
+  height: "8",
+  rx: "1",
+  fill: "var(--ds-border-inverse, #FFFFFF)"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "17",
+  y: "6",
+  width: "2",
+  height: "8",
+  rx: "1",
+  fill: "var(--ds-border-inverse, #FFFFFF)"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "1",
+  y: "1",
+  width: "26",
+  height: "18",
+  rx: "5",
+  stroke: "var(--ds-border-inverse, #FFFFFF)",
+  strokeWidth: "2"
+}));

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/esm/plugins/table/ui/DragPreview/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Box, xcss } from '@atlaskit/primitives';
+import { DragInMotionIcon } from '../Icons/DragInMotionIcon';
+var boxStyles = xcss({
+  borderColor: 'color.border.focused',
+  borderStyle: 'solid',
+  borderRadius: 'border.radius.100',
+  borderWidth: 'border.width.outline',
+  backgroundColor: 'color.blanket.selected'
+});
+export var DragPreview = function DragPreview(_ref) {
+  var direction = _ref.direction,
+    width = _ref.width,
+    height = _ref.height;
+  var marginLeft = direction === 'row' ? -14 : width / 2 - 14;
+  var marginTop = direction === 'row' ? height / 2 - 14 : -10;
+  var transform = direction === 'row' ? 'rotate(90deg)' : 'none';
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: boxStyles,
+    style: {
+      width: "".concat(width, "px"),
+      height: "".concat(height, "px")
+    }
+  }, /*#__PURE__*/React.createElement(DragInMotionIcon, {
+    style: {
+      position: 'absolute',
+      marginLeft: "".concat(marginLeft, "px"),
+      marginTop: "".concat(marginTop, "px"),
+      transform: transform
+    }
+  }));
+};

package/dist/esm/plugins/table/ui/Icons/DragInMotionIcon.js

@@ -0,0 +1,48 @@
+import React from 'react';
+export var DragInMotionIcon = function DragInMotionIcon(_ref) {
+  var style = _ref.style;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "28",
+    height: "20",
+    viewBox: "0 0 28 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: style
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "1",
+    y: "1",
+    width: "26",
+    height: "18",
+    rx: "5",
+    fill: "var(--ds-background-accent-blue-subtle, #579DFF)"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "9",
+    y: "6",
+    width: "2",
+    height: "8",
+    rx: "1",
+    fill: "var(--ds-border-inverse, #FFFFFF)"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "13",
+    y: "6",
+    width: "2",
+    height: "8",
+    rx: "1",
+    fill: "var(--ds-border-inverse, #FFFFFF)"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "17",
+    y: "6",
+    width: "2",
+    height: "8",
+    rx: "1",
+    fill: "var(--ds-border-inverse, #FFFFFF)"
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "1",
+    y: "1",
+    width: "26",
+    height: "18",
+    rx: "5",
+    stroke: "var(--ds-border-inverse, #FFFFFF)",
+    strokeWidth: "2"
+  }));
+};

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/plugins/table/ui/DragPreview/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const DragPreview: ({ direction, width, height, }: {
+    direction: 'column' | 'row';
+    width: number;
+    height: number;
+}) => JSX.Element;

package/dist/types/plugins/table/ui/Icons/DragInMotionIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface DragInMotionIconProps {
+    style?: React.CSSProperties;
+}
+export declare const DragInMotionIcon: ({ style }: DragInMotionIconProps) => JSX.Element;
+export {};

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/dist/types-ts4.5/plugins/table/ui/DragPreview/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const DragPreview: ({ direction, width, height, }: {
+    direction: 'column' | 'row';
+    width: number;
+    height: number;
+}) => JSX.Element;

package/dist/types-ts4.5/plugins/table/ui/Icons/DragInMotionIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface DragInMotionIconProps {
+    style?: React.CSSProperties;
+}
+export declare const DragInMotionIcon: ({ style }: DragInMotionIconProps) => JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.2",
+  "version": "5.3.4",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^32.0.0",
     "@atlaskit/custom-steps": "^0.0.2",
-    "@atlaskit/editor-common": "^76.11.0",
+    "@atlaskit/editor-common": "^76.12.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
@@ -41,8 +41,9 @@
     "@atlaskit/pragmatic-drag-and-drop": "^0.23.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.11.8",
     "@atlaskit/pragmatic-drag-and-drop-react-accessibility": "^0.4.0",
+    "@atlaskit/primitives": "^1.6.7",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.27.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

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/src/plugins/table/ui/DragPreview/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { Box, xcss } from '@atlaskit/primitives';
+
+import { DragInMotionIcon } from '../Icons/DragInMotionIcon';
+
+const boxStyles = xcss({
+  borderColor: 'color.border.focused',
+  borderStyle: 'solid',
+  borderRadius: 'border.radius.100',
+  borderWidth: 'border.width.outline',
+  backgroundColor: 'color.blanket.selected',
+});
+
+export const DragPreview = ({
+  direction,
+  width,
+  height,
+}: {
+  direction: 'column' | 'row';
+  width: number;
+  height: number;
+}) => {
+  let marginLeft = direction === 'row' ? -14 : width / 2 - 14;
+  let marginTop = direction === 'row' ? height / 2 - 14 : -10;
+  let transform = direction === 'row' ? 'rotate(90deg)' : 'none';
+  return (
+    <Box
+      xcss={boxStyles}
+      style={{
+        width: `${width}px`,
+        height: `${height}px`,
+      }}
+    >
+      <DragInMotionIcon
+        style={{
+          position: 'absolute',
+          marginLeft: `${marginLeft}px`,
+          marginTop: `${marginTop}px`,
+          transform: transform,
+        }}
+      />
+    </Box>
+  );
+};

package/src/plugins/table/ui/Icons/DragInMotionIcon.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { token } from '@atlaskit/tokens';
+
+interface DragInMotionIconProps {
+  style?: React.CSSProperties;
+}
+
+export const DragInMotionIcon = ({ style }: DragInMotionIconProps) => (
+  <svg
+    width="28"
+    height="20"
+    viewBox="0 0 28 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style={style}
+  >
+    <rect
+      x="1"
+      y="1"
+      width="26"
+      height="18"
+      rx="5"
+      fill={token('color.background.accent.blue.subtle', '#579DFF')}
+    />
+    <rect
+      x="9"
+      y="6"
+      width="2"
+      height="8"
+      rx="1"
+      fill={token('color.border.inverse', '#FFFFFF')}
+    />
+    <rect
+      x="13"
+      y="6"
+      width="2"
+      height="8"
+      rx="1"
+      fill={token('color.border.inverse', '#FFFFFF')}
+    />
+    <rect
+      x="17"
+      y="6"
+      width="2"
+      height="8"
+      rx="1"
+      fill={token('color.border.inverse', '#FFFFFF')}
+    />
+    <rect
+      x="1"
+      y="1"
+      width="26"
+      height="18"
+      rx="5"
+      stroke={token('color.border.inverse', '#FFFFFF')}
+      strokeWidth="2"
+    />
+  </svg>
+);

package/tsconfig.app.json

@@ -78,6 +78,9 @@
     {
       "path": "../../pragmatic-drag-and-drop/react-accessibility/tsconfig.app.json"
     },
+    {
+      "path": "../../design-system/primitives/tsconfig.app.json"
+    },
     {
       "path": "../../design-system/theme/tsconfig.app.json"
     },

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