@atlaskit/editor-plugin-table 5.0.0 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 5.1.0
+
+### Minor Changes
+
+- [#41273](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41273) [`322add4eb2a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/322add4eb2a) - Created table drag N drop plugin
+
 ## 5.0.0
 
 ### Major Changes

package/dist/cjs/plugins/table/index.js

@@ -20,6 +20,7 @@ var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _createPluginConfig = require("./create-plugin-config");
 var _plugin = require("./pm-plugins/decorations/plugin");
+var _dragAndDrop = require("./pm-plugins/drag-and-drop");
 var _keymap = require("./pm-plugins/keymap");
 var _main = require("./pm-plugins/main");
 var _pluginKey = require("./pm-plugins/plugin-key");
@@ -175,25 +176,32 @@ var tablesPlugin = function tablesPlugin(_ref) {
           }, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags) : undefined;
         }
       }, {
-        name: 'tableLocalId',
+        name: 'tableDragAndDrop',
         plugin: function plugin(_ref8) {
-          var dispatch = _ref8.dispatch;
+          var dispatch = _ref8.dispatch,
+            eventDispatcher = _ref8.eventDispatcher;
+          return options !== null && options !== void 0 && options.dragAndDropEnabled ? (0, _dragAndDrop.createPlugin)(dispatch, eventDispatcher) : undefined;
+        }
+      }, {
+        name: 'tableLocalId',
+        plugin: function plugin(_ref9) {
+          var dispatch = _ref9.dispatch;
           return (0, _tableLocalId.createPlugin)(dispatch);
         }
       }, {
         name: 'tableWidth',
-        plugin: function plugin(_ref9) {
+        plugin: function plugin(_ref10) {
           var _options$fullWidthEna;
-          var dispatchAnalyticsEvent = _ref9.dispatchAnalyticsEvent,
-            dispatch = _ref9.dispatch;
+          var dispatchAnalyticsEvent = _ref10.dispatchAnalyticsEvent,
+            dispatch = _ref10.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
         }
       }, {
         name: 'tableAnalyticsPlugin',
-        plugin: function plugin(_ref10) {
+        plugin: function plugin(_ref11) {
           var _options$tableResizin;
-          var dispatch = _ref10.dispatch,
-            dispatchAnalyticsEvent = _ref10.dispatchAnalyticsEvent;
+          var dispatch = _ref11.dispatch,
+            dispatchAnalyticsEvent = _ref11.dispatchAnalyticsEvent;
           return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.overflow-state-analytics') ? (0, _tableAnalytics.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false) : undefined;
         }
       }, {
@@ -224,12 +232,12 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref11) {
-      var editorView = _ref11.editorView,
-        popupsMountPoint = _ref11.popupsMountPoint,
-        popupsBoundariesElement = _ref11.popupsBoundariesElement,
-        popupsScrollableElement = _ref11.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref11.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref12) {
+      var editorView = _ref12.editorView,
+        popupsMountPoint = _ref12.popupsMountPoint,
+        popupsBoundariesElement = _ref12.popupsBoundariesElement,
+        popupsScrollableElement = _ref12.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref12.dispatchAnalyticsEvent;
       return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -240,30 +248,31 @@ var tablesPlugin = function tablesPlugin(_ref) {
           tablePluginState: _pluginKey.pluginKey,
           tableWidthPluginState: _tableWidth.pluginKey,
           tableResizingPluginState: _tableResizing.pluginKey,
-          stickyHeadersState: _stickyHeaders.pluginKey
+          stickyHeadersState: _stickyHeaders.pluginKey,
+          dragAndDropState: _dragAndDrop.pluginKey
         },
-        render: function render(_ref12) {
-          var resizingPluginState = _ref12.tableResizingPluginState,
-            stickyHeadersState = _ref12.stickyHeadersState,
-            tablePluginState = _ref12.tablePluginState,
-            tableWidthPluginState = _ref12.tableWidthPluginState;
+        render: function render(_ref13) {
+          var resizingPluginState = _ref13.tableResizingPluginState,
+            stickyHeadersState = _ref13.stickyHeadersState,
+            tablePluginState = _ref13.tablePluginState,
+            tableWidthPluginState = _ref13.tableWidthPluginState;
           var state = editorView.state;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var isResizing = isColumnResizing || isTableResizing;
-          var _ref13 = tablePluginState,
-            tableNode = _ref13.tableNode,
-            tablePos = _ref13.tablePos,
-            targetCellPosition = _ref13.targetCellPosition,
-            isContextualMenuOpen = _ref13.isContextualMenuOpen,
-            layout = _ref13.layout,
-            tableRef = _ref13.tableRef,
-            pluginConfig = _ref13.pluginConfig,
-            insertColumnButtonIndex = _ref13.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref13.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref13.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref13.isHeaderRowEnabled,
-            tableWrapperTarget = _ref13.tableWrapperTarget;
+          var _ref14 = tablePluginState,
+            tableNode = _ref14.tableNode,
+            tablePos = _ref14.tablePos,
+            targetCellPosition = _ref14.targetCellPosition,
+            isContextualMenuOpen = _ref14.isContextualMenuOpen,
+            layout = _ref14.layout,
+            tableRef = _ref14.tableRef,
+            pluginConfig = _ref14.pluginConfig,
+            insertColumnButtonIndex = _ref14.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref14.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref14.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref14.isHeaderRowEnabled,
+            tableWrapperTarget = _ref14.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = options && !options.tableResizingEnabled && (0, _utils3.isLayoutSupported)(state) && options.breakoutEnabled ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
@@ -329,8 +338,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref14) {
-        var formatMessage = _ref14.formatMessage;
+      quickInsert: function quickInsert(_ref15) {
+        var formatMessage = _ref15.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(_messages.toolbarInsertBlockMessages.table),

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragAndDropActionType = void 0;
+var DragAndDropActionType = exports.DragAndDropActionType = {
+  SET_DROP_TARGET: 'SET_DROP_TARGET',
+  CLEAR_DROP_TARGET: 'CLEAR_DROP_TARGET'
+};
+
+// NOTE: This should be a Union of all possible actions

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setDropTarget = exports.clearDropTarget = void 0;
+var _actions = require("./actions");
+var _pluginFactory = require("./plugin-factory");
+// TODO: This command is a placeholder example. Please replace this if required.
+var setDropTarget = exports.setDropTarget = function setDropTarget(type, index, tr) {
+  return (0, _pluginFactory.createCommand)({
+    type: _actions.DragAndDropActionType.SET_DROP_TARGET,
+    data: {
+      type: type,
+      index: index
+    }
+  }, function (originalTr) {
+    return (tr || originalTr).setMeta('addToHistory', false);
+  });
+};
+var clearDropTarget = exports.clearDropTarget = function clearDropTarget(tr) {
+  return (0, _pluginFactory.createCommand)({
+    type: _actions.DragAndDropActionType.CLEAR_DROP_TARGET
+  }, function (originalTr) {
+    return (tr || originalTr).setMeta('addToHistory', false);
+  });
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropTargetType = void 0;
+var DropTargetType = exports.DropTargetType = {
+  NONE: 'none',
+  ROW: 'row',
+  COLUMN: 'column'
+};

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "clearDropTarget", {
+  enumerable: true,
+  get: function get() {
+    return _commands.clearDropTarget;
+  }
+});
+Object.defineProperty(exports, "createPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.createPlugin;
+  }
+});
+Object.defineProperty(exports, "pluginKey", {
+  enumerable: true,
+  get: function get() {
+    return _pluginKey.pluginKey;
+  }
+});
+Object.defineProperty(exports, "setDropTarget", {
+  enumerable: true,
+  get: function get() {
+    return _commands.setDropTarget;
+  }
+});
+var _plugin = require("./plugin");
+var _pluginKey = require("./plugin-key");
+var _commands = require("./commands");

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

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPluginState = exports.createCommand = void 0;
+var _utils = require("@atlaskit/editor-common/utils");
+var _pluginKey = require("./plugin-key");
+var _reducer = _interopRequireDefault(require("./reducer"));
+var _pluginFactory = (0, _utils.pluginFactory)(_pluginKey.pluginKey, _reducer.default),
+  createPluginState = exports.createPluginState = _pluginFactory.createPluginState,
+  createCommand = exports.createCommand = _pluginFactory.createCommand;

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

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var pluginKey = exports.pluginKey = new _state.PluginKey('dragAndDropPlugin');

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPlugin = void 0;
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _consts = require("./consts");
+var _pluginFactory = require("./plugin-factory");
+var _pluginKey = require("./plugin-key");
+var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventDispatcher) {
+  return new _safePlugin.SafePlugin({
+    state: (0, _pluginFactory.createPluginState)(dispatch, {
+      // TODO: This is example placeholder state. We could use this to track which row/col is currently set as the drop target
+      // This would result in a blue highlight being displayed on the corrisponding row/column to single the drop target location.
+      dropTargetType: _consts.DropTargetType.NONE,
+      dropTargetIndex: 0
+    }),
+    key: _pluginKey.pluginKey,
+    view: function view(editorView) {
+      // TODO: Add Pragmatic DnD monitor when the view is constructed.
+      return {
+        // TODO: Cleanup monitor instance
+        // destroy: cleanup,
+      };
+    }
+  });
+};

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _actions = require("./actions");
+var _consts = require("./consts");
+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; }
+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) { (0, _defineProperty2.default)(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; }
+var _default = exports.default = function _default(pluginState, action) {
+  switch (action.type) {
+    case _actions.DragAndDropActionType.SET_DROP_TARGET:
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        dropTargetType: action.data.type,
+        dropTargetIndex: action.data.index
+      });
+    case _actions.DragAndDropActionType.CLEAR_DROP_TARGET:
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        dropTargetType: _consts.DropTargetType.NONE,
+        dropTargetIndex: 0
+      });
+    default:
+      return pluginState;
+  }
+};

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/es2019/plugins/table/index.js

@@ -13,6 +13,7 @@ import { createTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
+import { createPlugin as createDragAndDropPlugin, pluginKey as dragAndDropPluginKey } from './pm-plugins/drag-and-drop';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
@@ -159,6 +160,12 @@ const tablesPlugin = ({
           dispatch,
           eventDispatcher
         }) => options && options.tableOptions.stickyHeaders ? createStickyHeadersPlugin(dispatch, eventDispatcher, () => [], (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags) : undefined
+      }, {
+        name: 'tableDragAndDrop',
+        plugin: ({
+          dispatch,
+          eventDispatcher
+        }) => options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, eventDispatcher) : undefined
       }, {
         name: 'tableLocalId',
         plugin: ({
@@ -227,7 +234,8 @@ const tablesPlugin = ({
           tablePluginState: pluginKey,
           tableWidthPluginState: tableWidthPluginKey,
           tableResizingPluginState: tableResizingPluginKey,
-          stickyHeadersState: stickyHeadersPluginKey
+          stickyHeadersState: stickyHeadersPluginKey,
+          dragAndDropState: dragAndDropPluginKey
         },
         render: ({
           tableResizingPluginState: resizingPluginState,

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

@@ -0,0 +1,6 @@
+export const DragAndDropActionType = {
+  SET_DROP_TARGET: 'SET_DROP_TARGET',
+  CLEAR_DROP_TARGET: 'CLEAR_DROP_TARGET'
+};
+
+// NOTE: This should be a Union of all possible actions

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

@@ -0,0 +1,14 @@
+import { DragAndDropActionType } from './actions';
+import { createCommand } from './plugin-factory';
+
+// TODO: This command is a placeholder example. Please replace this if required.
+export const setDropTarget = (type, index, tr) => createCommand({
+  type: DragAndDropActionType.SET_DROP_TARGET,
+  data: {
+    type,
+    index
+  }
+}, originalTr => (tr || originalTr).setMeta('addToHistory', false));
+export const clearDropTarget = tr => createCommand({
+  type: DragAndDropActionType.CLEAR_DROP_TARGET
+}, originalTr => (tr || originalTr).setMeta('addToHistory', false));

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

@@ -0,0 +1,5 @@
+export const DropTargetType = {
+  NONE: 'none',
+  ROW: 'row',
+  COLUMN: 'column'
+};

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

@@ -0,0 +1,3 @@
+export { createPlugin } from './plugin';
+export { pluginKey } from './plugin-key';
+export { setDropTarget, clearDropTarget } from './commands';

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

@@ -0,0 +1,8 @@
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { pluginKey } from './plugin-key';
+import reducer from './reducer';
+const {
+  createPluginState,
+  createCommand
+} = pluginFactory(pluginKey, reducer);
+export { createPluginState, createCommand };

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

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const pluginKey = new PluginKey('dragAndDropPlugin');

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

@@ -0,0 +1,22 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { DropTargetType } from './consts';
+import { createPluginState } from './plugin-factory';
+import { pluginKey } from './plugin-key';
+export const createPlugin = (dispatch, eventDispatcher) => {
+  return new SafePlugin({
+    state: createPluginState(dispatch, {
+      // TODO: This is example placeholder state. We could use this to track which row/col is currently set as the drop target
+      // This would result in a blue highlight being displayed on the corrisponding row/column to single the drop target location.
+      dropTargetType: DropTargetType.NONE,
+      dropTargetIndex: 0
+    }),
+    key: pluginKey,
+    view: editorView => {
+      // TODO: Add Pragmatic DnD monitor when the view is constructed.
+      return {
+        // TODO: Cleanup monitor instance
+        // destroy: cleanup,
+      };
+    }
+  });
+};

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

@@ -0,0 +1,20 @@
+import { DragAndDropActionType } from './actions';
+import { DropTargetType } from './consts';
+export default ((pluginState, action) => {
+  switch (action.type) {
+    case DragAndDropActionType.SET_DROP_TARGET:
+      return {
+        ...pluginState,
+        dropTargetType: action.data.type,
+        dropTargetIndex: action.data.index
+      };
+    case DragAndDropActionType.CLEAR_DROP_TARGET:
+      return {
+        ...pluginState,
+        dropTargetType: DropTargetType.NONE,
+        dropTargetIndex: 0
+      };
+    default:
+      return pluginState;
+  }
+});

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/plugins/table/index.js

@@ -13,6 +13,7 @@ import { createTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
+import { createPlugin as createDragAndDropPlugin, pluginKey as dragAndDropPluginKey } from './pm-plugins/drag-and-drop';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
@@ -168,25 +169,32 @@ var tablesPlugin = function tablesPlugin(_ref) {
           }, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags) : undefined;
         }
       }, {
-        name: 'tableLocalId',
+        name: 'tableDragAndDrop',
         plugin: function plugin(_ref8) {
-          var dispatch = _ref8.dispatch;
+          var dispatch = _ref8.dispatch,
+            eventDispatcher = _ref8.eventDispatcher;
+          return options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, eventDispatcher) : undefined;
+        }
+      }, {
+        name: 'tableLocalId',
+        plugin: function plugin(_ref9) {
+          var dispatch = _ref9.dispatch;
           return createTableLocalIdPlugin(dispatch);
         }
       }, {
         name: 'tableWidth',
-        plugin: function plugin(_ref9) {
+        plugin: function plugin(_ref10) {
           var _options$fullWidthEna;
-          var dispatchAnalyticsEvent = _ref9.dispatchAnalyticsEvent,
-            dispatch = _ref9.dispatch;
+          var dispatchAnalyticsEvent = _ref10.dispatchAnalyticsEvent,
+            dispatch = _ref10.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
         }
       }, {
         name: 'tableAnalyticsPlugin',
-        plugin: function plugin(_ref10) {
+        plugin: function plugin(_ref11) {
           var _options$tableResizin;
-          var dispatch = _ref10.dispatch,
-            dispatchAnalyticsEvent = _ref10.dispatchAnalyticsEvent;
+          var dispatch = _ref11.dispatch,
+            dispatchAnalyticsEvent = _ref11.dispatchAnalyticsEvent;
           return getBooleanFF('platform.editor.table.overflow-state-analytics') ? createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false) : undefined;
         }
       }, {
@@ -217,12 +225,12 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref11) {
-      var editorView = _ref11.editorView,
-        popupsMountPoint = _ref11.popupsMountPoint,
-        popupsBoundariesElement = _ref11.popupsBoundariesElement,
-        popupsScrollableElement = _ref11.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref11.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref12) {
+      var editorView = _ref12.editorView,
+        popupsMountPoint = _ref12.popupsMountPoint,
+        popupsBoundariesElement = _ref12.popupsBoundariesElement,
+        popupsScrollableElement = _ref12.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref12.dispatchAnalyticsEvent;
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -233,30 +241,31 @@ var tablesPlugin = function tablesPlugin(_ref) {
           tablePluginState: pluginKey,
           tableWidthPluginState: tableWidthPluginKey,
           tableResizingPluginState: tableResizingPluginKey,
-          stickyHeadersState: stickyHeadersPluginKey
+          stickyHeadersState: stickyHeadersPluginKey,
+          dragAndDropState: dragAndDropPluginKey
         },
-        render: function render(_ref12) {
-          var resizingPluginState = _ref12.tableResizingPluginState,
-            stickyHeadersState = _ref12.stickyHeadersState,
-            tablePluginState = _ref12.tablePluginState,
-            tableWidthPluginState = _ref12.tableWidthPluginState;
+        render: function render(_ref13) {
+          var resizingPluginState = _ref13.tableResizingPluginState,
+            stickyHeadersState = _ref13.stickyHeadersState,
+            tablePluginState = _ref13.tablePluginState,
+            tableWidthPluginState = _ref13.tableWidthPluginState;
           var state = editorView.state;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var isResizing = isColumnResizing || isTableResizing;
-          var _ref13 = tablePluginState,
-            tableNode = _ref13.tableNode,
-            tablePos = _ref13.tablePos,
-            targetCellPosition = _ref13.targetCellPosition,
-            isContextualMenuOpen = _ref13.isContextualMenuOpen,
-            layout = _ref13.layout,
-            tableRef = _ref13.tableRef,
-            pluginConfig = _ref13.pluginConfig,
-            insertColumnButtonIndex = _ref13.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref13.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref13.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref13.isHeaderRowEnabled,
-            tableWrapperTarget = _ref13.tableWrapperTarget;
+          var _ref14 = tablePluginState,
+            tableNode = _ref14.tableNode,
+            tablePos = _ref14.tablePos,
+            targetCellPosition = _ref14.targetCellPosition,
+            isContextualMenuOpen = _ref14.isContextualMenuOpen,
+            layout = _ref14.layout,
+            tableRef = _ref14.tableRef,
+            pluginConfig = _ref14.pluginConfig,
+            insertColumnButtonIndex = _ref14.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref14.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref14.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref14.isHeaderRowEnabled,
+            tableWrapperTarget = _ref14.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = options && !options.tableResizingEnabled && isLayoutSupported(state) && options.breakoutEnabled ? /*#__PURE__*/React.createElement(LayoutButton, {
@@ -322,8 +331,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref14) {
-        var formatMessage = _ref14.formatMessage;
+      quickInsert: function quickInsert(_ref15) {
+        var formatMessage = _ref15.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(messages.table),

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

@@ -0,0 +1,6 @@
+export var DragAndDropActionType = {
+  SET_DROP_TARGET: 'SET_DROP_TARGET',
+  CLEAR_DROP_TARGET: 'CLEAR_DROP_TARGET'
+};
+
+// NOTE: This should be a Union of all possible actions

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

@@ -0,0 +1,22 @@
+import { DragAndDropActionType } from './actions';
+import { createCommand } from './plugin-factory';
+
+// TODO: This command is a placeholder example. Please replace this if required.
+export var setDropTarget = function setDropTarget(type, index, tr) {
+  return createCommand({
+    type: DragAndDropActionType.SET_DROP_TARGET,
+    data: {
+      type: type,
+      index: index
+    }
+  }, function (originalTr) {
+    return (tr || originalTr).setMeta('addToHistory', false);
+  });
+};
+export var clearDropTarget = function clearDropTarget(tr) {
+  return createCommand({
+    type: DragAndDropActionType.CLEAR_DROP_TARGET
+  }, function (originalTr) {
+    return (tr || originalTr).setMeta('addToHistory', false);
+  });
+};

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

@@ -0,0 +1,5 @@
+export var DropTargetType = {
+  NONE: 'none',
+  ROW: 'row',
+  COLUMN: 'column'
+};

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

@@ -0,0 +1,3 @@
+export { createPlugin } from './plugin';
+export { pluginKey } from './plugin-key';
+export { setDropTarget, clearDropTarget } from './commands';

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

@@ -0,0 +1,7 @@
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { pluginKey } from './plugin-key';
+import reducer from './reducer';
+var _pluginFactory = pluginFactory(pluginKey, reducer),
+  createPluginState = _pluginFactory.createPluginState,
+  createCommand = _pluginFactory.createCommand;
+export { createPluginState, createCommand };

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

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export var pluginKey = new PluginKey('dragAndDropPlugin');