@atlaskit/editor-plugin-table 5.0.0 → 5.2.0

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/cjs/plugins/table/pm-plugins/main.js

@@ -18,7 +18,8 @@ var _commands = require("../commands");
 var _misc = require("../commands/misc");
 var _eventHandlers = require("../event-handlers");
 var _table = require("../nodeviews/table");
-var _tableCell = _interopRequireDefault(require("../nodeviews/tableCell"));
+var _TableCell = _interopRequireDefault(require("../nodeviews/TableCell"));
+var _TableRow = _interopRequireDefault(require("../nodeviews/TableRow"));
 var _plugin = require("../pm-plugins/decorations/plugin");
 var _transforms2 = require("../transforms");
 var _types = require("../types");
@@ -29,7 +30,7 @@ var _pluginFactory = require("./plugin-factory");
 var _pluginKey = require("./plugin-key");
 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 createPlugin = exports.createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthModeEnabled, tableResizingEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI, pluginInjectionApi) {
+var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthModeEnabled, tableResizingEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi) {
   var _window;
   var state = (0, _pluginFactory.createPluginState)(dispatch, _objectSpread(_objectSpread({
     pluginConfig: pluginConfig,
@@ -40,7 +41,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
     wasFullWidthModeEnabled: previousFullWidthModeEnabled,
     isTableResizingEnabled: tableResizingEnabled,
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
-    isHeaderColumnEnabled: false
+    isHeaderColumnEnabled: false,
+    isDragAndDropEnabled: dragAndDropEnabled
   }, _defaultTableSelection.defaultTableSelection), {}, {
     getIntl: getIntl
   }));
@@ -53,14 +55,6 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
       elementContentRects[entry.target.id] = entry.contentRect;
     });
   }) : undefined;
-  var tableCellNodeview = {
-    tableCell: function tableCell(node, view, getPos) {
-      return new _tableCell.default(node, view, getPos, observer);
-    },
-    tableHeader: function tableHeader(node, view, getPos) {
-      return new _tableCell.default(node, view, getPos, observer);
-    }
-  };
 
   // Used to prevent invalid table cell spans being reported more than once per editor/document
   var invalidTableIds = [];
@@ -236,11 +230,20 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
         }
         return false;
       },
-      nodeViews: _objectSpread(_objectSpread({}, tableCellNodeview), {}, {
+      nodeViews: {
         table: function table(node, view, getPos) {
           return (0, _table.createTableView)(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi);
+        },
+        tableRow: function tableRow(node, view, getPos) {
+          return new _TableRow.default(node, view, getPos, eventDispatcher);
+        },
+        tableCell: function tableCell(node, view, getPos) {
+          return new _TableCell.default(node, view, getPos, eventDispatcher, observer);
+        },
+        tableHeader: function tableHeader(node, view, getPos) {
+          return new _TableCell.default(node, view, getPos, eventDispatcher, observer);
         }
-      }),
+      },
       handleDOMEvents: {
         focus: _eventHandlers.handleFocus,
         blur: _eventHandlers.handleBlur,

package/dist/cjs/plugins/table/pm-plugins/sticky-headers/index.js

@@ -3,12 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "TableRowNodeView", {
-  enumerable: true,
-  get: function get() {
-    return _tableRow.TableRowNodeView;
-  }
-});
 Object.defineProperty(exports, "createPlugin", {
   enumerable: true,
   get: function get() {
@@ -42,5 +36,4 @@ Object.defineProperty(exports, "updateStickyState", {
 var _plugin = require("./plugin");
 var _pluginKey = require("./plugin-key");
 var _util = require("./util");
-var _commands = require("./commands");
-var _tableRow = require("./nodeviews/tableRow");
+var _commands = require("./commands");

package/dist/cjs/plugins/table/pm-plugins/sticky-headers/plugin.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createPlugin = void 0;
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _tableRow = require("./nodeviews/tableRow");
 var _pluginKey = require("./plugin-key");
 var _pluginState = require("./plugin-state");
 var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventDispatcher) {
@@ -15,13 +14,6 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
   var getEditorFeatureFlags = arguments.length > 3 ? arguments[3] : undefined;
   return new _safePlugin.SafePlugin({
     state: (0, _pluginState.createPluginState)(dispatch, initialState),
-    key: _pluginKey.pluginKey,
-    props: {
-      nodeViews: {
-        tableRow: function tableRow(node, view, getPos) {
-          return new _tableRow.TableRowNodeView(node, view, getPos, eventDispatcher);
-        }
-      }
-    }
+    key: _pluginKey.pluginKey
   });
 };

package/dist/cjs/plugins/table/utils/dom.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateResizeHandles = exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isCornerButton = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getColumnOrRowIndex = void 0;
+exports.updateResizeHandles = exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isCornerButton = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getTree = exports.getTop = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getColumnOrRowIndex = void 0;
 var _utils = require("@atlaskit/editor-common/utils");
 var _types = require("../types");
 var _consts = require("../ui/consts");
@@ -156,4 +156,34 @@ var hasResizeHandler = exports.hasResizeHandler = function hasResizeHandler(_ref
     return false;
   }
   return true;
+};
+var getTree = exports.getTree = function getTree(tr) {
+  // pm renders into tbody, owned by react
+  var tbody = tr.parentElement;
+  if (!tbody) {
+    return null;
+  }
+
+  // rendered by react
+  var table = tbody.parentElement;
+  if (!table) {
+    return null;
+  }
+
+  // rendered by react
+  var wrapper = table.parentElement;
+  if (!wrapper) {
+    return null;
+  }
+  return {
+    wrapper: wrapper,
+    table: table
+  };
+};
+var getTop = exports.getTop = function getTop(element) {
+  var _element$getBoundingC, _element$getBoundingC2;
+  if (!element || element instanceof Window) {
+    return 0;
+  }
+  return (_element$getBoundingC = element === null || element === void 0 || (_element$getBoundingC2 = element.getBoundingClientRect) === null || _element$getBoundingC2 === void 0 || (_element$getBoundingC2 = _element$getBoundingC2.call(element)) === null || _element$getBoundingC2 === void 0 ? void 0 : _element$getBoundingC2.top) !== null && _element$getBoundingC !== void 0 ? _element$getBoundingC : 0;
 };

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

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "anyChildCellMergedAcrossRow", {
+  enumerable: true,
+  get: function get() {
+    return _nodes.anyChildCellMergedAcrossRow;
+  }
+});
 Object.defineProperty(exports, "checkIfHeaderColumnEnabled", {
   enumerable: true,
   get: function get() {
@@ -285,6 +291,12 @@ Object.defineProperty(exports, "removeTableFromLastChild", {
     return _paste.removeTableFromLastChild;
   }
 });
+Object.defineProperty(exports, "supportedHeaderRow", {
+  enumerable: true,
+  get: function get() {
+    return _nodes.supportedHeaderRow;
+  }
+});
 Object.defineProperty(exports, "tablesHaveDifferentColumnWidths", {
   enumerable: true,
   get: function get() {

package/dist/cjs/plugins/table/utils/nodes.js

@@ -4,11 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tablesHaveDifferentNoOfColumns = exports.tablesHaveDifferentColumnWidths = exports.isTableNested = exports.isLayoutSupported = exports.isIsolating = exports.getTableWidth = exports.containsHeaderRow = exports.containsHeaderColumn = exports.checkIfNumberColumnEnabled = exports.checkIfHeaderRowEnabled = exports.checkIfHeaderColumnEnabled = void 0;
+exports.tablesHaveDifferentNoOfColumns = exports.tablesHaveDifferentColumnWidths = exports.supportedHeaderRow = exports.isTableNested = exports.isLayoutSupported = exports.isIsolating = exports.getTableWidth = exports.containsHeaderRow = exports.containsHeaderColumn = exports.checkIfNumberColumnEnabled = exports.checkIfHeaderRowEnabled = exports.checkIfHeaderColumnEnabled = exports.anyChildCellMergedAcrossRow = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _utils = require("@atlaskit/editor-common/utils");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
-var _utils2 = require("@atlaskit/editor-tables/utils");
+var _utils3 = require("@atlaskit/editor-tables/utils");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var isIsolating = exports.isIsolating = function isIsolating(node) {
   return !!node.type.spec.isolating;
@@ -45,13 +46,13 @@ var containsHeaderRow = exports.containsHeaderRow = function containsHeaderRow(t
   return true;
 };
 var checkIfHeaderColumnEnabled = exports.checkIfHeaderColumnEnabled = function checkIfHeaderColumnEnabled(selection) {
-  return filterNearSelection(selection, _utils2.findTable, containsHeaderColumn, false);
+  return filterNearSelection(selection, _utils3.findTable, containsHeaderColumn, false);
 };
 var checkIfHeaderRowEnabled = exports.checkIfHeaderRowEnabled = function checkIfHeaderRowEnabled(selection) {
-  return filterNearSelection(selection, _utils2.findTable, containsHeaderRow, false);
+  return filterNearSelection(selection, _utils3.findTable, containsHeaderRow, false);
 };
 var checkIfNumberColumnEnabled = exports.checkIfNumberColumnEnabled = function checkIfNumberColumnEnabled(selection) {
-  return filterNearSelection(selection, _utils2.findTable, function (table) {
+  return filterNearSelection(selection, _utils3.findTable, function (table) {
     return !!table.attrs.isNumberColumnEnabled;
   }, false);
 };
@@ -63,7 +64,7 @@ var isLayoutSupported = exports.isLayoutSupported = function isLayoutSupported(s
     bodiedExtension = _state$schema$nodes.bodiedExtension,
     layoutSection = _state$schema$nodes.layoutSection,
     expand = _state$schema$nodes.expand;
-  return !(0, _utils.hasParentNodeOfType)([expand, layoutSection, bodiedExtension])(state.selection) && !!permittedLayouts && (permittedLayouts === 'all' || permittedLayouts.indexOf('default') > -1 && permittedLayouts.indexOf('wide') > -1 && permittedLayouts.indexOf('full-width') > -1);
+  return !(0, _utils2.hasParentNodeOfType)([expand, layoutSection, bodiedExtension])(state.selection) && !!permittedLayouts && (permittedLayouts === 'all' || permittedLayouts.indexOf('default') > -1 && permittedLayouts.indexOf('wide') > -1 && permittedLayouts.indexOf('full-width') > -1);
 };
 var getTableWidth = exports.getTableWidth = function getTableWidth(node) {
   return getTableWidths(node).reduce(function (acc, current) {
@@ -111,4 +112,27 @@ var isTableNested = exports.isTableNested = function isTableNested(state) {
   var parent = state.doc.resolve(tablePos).parent;
   var nodeTypes = state.schema.nodes;
   return parent.type === nodeTypes.layoutColumn || parent.type === nodeTypes.expand || parent.type === nodeTypes.bodiedExtension;
+};
+var anyChildCellMergedAcrossRow = exports.anyChildCellMergedAcrossRow = function anyChildCellMergedAcrossRow(node) {
+  return (0, _utils.mapChildren)(node, function (child) {
+    return child.attrs.rowspan || 0;
+  }).some(function (rowspan) {
+    return rowspan > 1;
+  });
+};
+
+/**
+ * Check if a given node is a header row with this definition:
+ *  - all children are tableHeader cells
+ *  - no table cells have been have merged with other table row cells
+ *
+ * @param node ProseMirror node
+ * @return boolean if it meets definition
+ */
+var supportedHeaderRow = exports.supportedHeaderRow = function supportedHeaderRow(node) {
+  var allHeaders = (0, _utils.mapChildren)(node, function (child) {
+    return child.type.name === 'tableHeader';
+  }).every(Boolean);
+  var someMerged = anyChildCellMergedAcrossRow(node);
+  return allHeaders && !someMerged;
 };

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';
@@ -102,9 +103,10 @@ const tablesPlugin = ({
             tableResizingEnabled,
             breakoutEnabled,
             tableOptions,
-            getEditorFeatureFlags
+            getEditorFeatureFlags,
+            dragAndDropEnabled
           } = options || {};
-          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthEnabled, tableResizingEnabled, wasFullWidthEnabled, editorAnalyticsAPI, api);
+          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthEnabled, tableResizingEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api);
         }
       }, {
         name: 'tablePMColResizing',
@@ -159,6 +161,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 +235,8 @@ const tablesPlugin = ({
           tablePluginState: pluginKey,
           tableWidthPluginState: tableWidthPluginKey,
           tableResizingPluginState: tableResizingPluginKey,
-          stickyHeadersState: stickyHeadersPluginKey
+          stickyHeadersState: stickyHeadersPluginKey,
+          dragAndDropState: dragAndDropPluginKey
         },
         render: ({
           tableResizingPluginState: resizingPluginState,

package/dist/es2019/plugins/table/nodeviews/{tableCell.js → TableCell.js}

@@ -1,25 +1,41 @@
 import uuid from 'uuid';
 import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
-import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { getPluginState } from '../pm-plugins/plugin-factory';
+import TableNodeView from './TableNodeViewBase';
 const DEFAULT_COL_SPAN = 1;
 const DEFAULT_ROW_SPAN = 1;
-export default class TableCellNodeView {
-  constructor(node, view, getPos, observer) {
-    this.view = view;
-    this.node = node;
+export default class TableCell extends TableNodeView {
+  constructor(node, view, getPos, eventDispatcher, observer) {
+    super(node, view, getPos, eventDispatcher);
+    this.observer = observer;
     const {
-      dom,
-      contentDOM
-    } = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node));
-    this.getPos = getPos;
-    this.dom = dom;
-    this.contentDOM = contentDOM;
+      pluginConfig,
+      isDragAndDropEnabled
+    } = getPluginState(view.state);
+    this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
+    this.isDragAndDropEnabled = !!isDragAndDropEnabled;
     if (observer) {
       this.contentDOM.id = uuid();
-      this.observer = observer;
       observer.observe(this.contentDOM);
     }
   }
+
+  // @ts-ignore
+
+  // @ts-ignore
+
+  update(node) {
+    const didUpdate = this.updateNodeView(node);
+    if (didUpdate) {
+      this.node = node;
+    }
+    return didUpdate;
+  }
+  destroy() {
+    if (this.observer) {
+      this.observer.unobserve(this.contentDOM);
+    }
+  }
   updateNodeView(node) {
     if (this.node.type !== node.type) {
       return false;
@@ -52,16 +68,4 @@ export default class TableCellNodeView {
     }
     return false;
   }
-  update(node) {
-    const didUpdate = this.updateNodeView(node);
-    if (didUpdate) {
-      this.node = node;
-    }
-    return didUpdate;
-  }
-  destroy() {
-    if (this.observer) {
-      this.observer.unobserve(this.contentDOM);
-    }
-  }
 }

package/dist/es2019/plugins/table/nodeviews/TableNodeViewBase.js

@@ -0,0 +1,22 @@
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+export default class TableNodeView {
+  /**
+   * @constructor
+   */
+  constructor(node, view, getPos, eventDispatcher) {
+    this.node = node;
+    this.view = view;
+    this.getPos = getPos;
+    this.eventDispatcher = eventDispatcher;
+    const {
+      dom,
+      contentDOM
+    } = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node));
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+  }
+
+  /**
+   * Variables
+   */
+}