@atlaskit/editor-plugin-table 5.8.2 → 5.8.4

package/dist/es2019/ui/DragHandle/index.js

@@ -1,6 +1,8 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import ReactDOM from 'react-dom';
+import { injectIntl } from 'react-intl-next';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { browser } from '@atlaskit/editor-common/utils';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
@@ -9,7 +11,7 @@ import { TableCssClassName as ClassName } from '../../types';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { DragPreview } from '../DragPreview';
 import { HandleIconComponent } from './HandleIconComponent';
-export const DragHandle = ({
+const DragHandleComponent = ({
   isDragMenuTarget,
   tableLocalId,
   direction = 'row',
@@ -23,7 +25,10 @@ export const DragHandle = ({
   onMouseUp,
   onClick,
   editorView,
-  canDrag = false
+  canDrag = false,
+  intl: {
+    formatMessage
+  }
 }) => {
   const dragHandleDivRef = useRef(null);
   const [previewContainer, setPreviewContainer] = useState(null);
@@ -110,6 +115,7 @@ export const DragHandle = ({
       transform: direction === 'column' ? 'none' : 'rotate(90deg)'
     },
     "data-testid": "table-drag-handle-button",
+    "aria-label": formatMessage(direction === 'row' ? messages.rowDragHandle : messages.columnDragHandle),
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     onMouseUp: e => {
@@ -128,4 +134,5 @@ export const DragHandle = ({
     width: previewWidth,
     height: previewHeight
   }), previewContainer));
-};
+};
+export const DragHandle = injectIntl(DragHandleComponent);

package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -143,7 +143,7 @@ export class ContextualMenu extends Component {
         isDragAndDropEnabled
       } = getPluginState(editorView.state);
       return {
-        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addColumn : messages.insertColumn),
+        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addColumnRight : messages.insertColumn),
         value: {
           name: 'insert_column'
         },
@@ -164,7 +164,7 @@ export class ContextualMenu extends Component {
         isDragAndDropEnabled
       } = getPluginState(editorView.state);
       return {
-        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addRow : messages.insertRow),
+        content: formatMessage(isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? messages.addRowBelow : messages.insertRow),
         value: {
           name: 'insert_row'
         },

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -2,7 +2,9 @@
 /** @jsx jsx */
 import { useState } from 'react';
 import { jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette } from '@atlaskit/editor-common/ui-color';
 import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
@@ -24,18 +26,107 @@ import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColum
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
 import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, toggleStyles } from './styles';
+const MapDragMenuOptionIdToMessage = {
+  add_row_above: {
+    message: messages.addRowAbove,
+    plural: null
+  },
+  add_row_below: {
+    message: messages.addRowBelow,
+    plural: null
+  },
+  add_column_left: {
+    message: messages.addColumnLeft,
+    plural: null
+  },
+  add_column_right: {
+    message: messages.addColumnRight,
+    plural: null
+  },
+  distribute_columns: {
+    message: messages.distributeColumns,
+    plural: 'noOfCols'
+  },
+  clear_cells: {
+    message: messages.clearCells,
+    plural: 'noOfCells'
+  },
+  delete_row: {
+    message: messages.removeRows,
+    plural: 'noOfRows'
+  },
+  delete_column: {
+    message: messages.removeColumns,
+    plural: 'noOfCols'
+  },
+  move_column_left: {
+    message: messages.moveColumnLeft,
+    plural: 'noOfCols'
+  },
+  move_column_right: {
+    message: messages.moveColumnRight,
+    plural: 'noOfCols'
+  },
+  move_row_up: {
+    message: messages.moveRowUp,
+    plural: 'noOfRows'
+  },
+  move_row_down: {
+    message: messages.moveRowDown,
+    plural: 'noOfRows'
+  },
+  sort_column_asc: {
+    message: messages.sortColumnIncreasing,
+    plural: null
+  },
+  sort_column_desc: {
+    message: messages.sortColumnDecreasing,
+    plural: null
+  }
+};
 const groupedDragMenuConfig = [['add_row_above', 'add_row_below', 'add_column_left', 'add_column_right', 'distribute_columns', 'clear_cells', 'delete_row', 'delete_column'], ['move_column_left', 'move_column_right', 'move_row_up', 'move_row_down'], ['sort_column_asc', 'sort_column_desc']];
-const convertToDropdownItems = dragMenuConfig => {
+const convertToDropdownItems = (dragMenuConfig, formatMessage, selectionRect) => {
   let menuItemsArr = [...Array(groupedDragMenuConfig.length)].map(() => []);
   let menuCallback = {};
   dragMenuConfig.forEach(item => {
+    var _MapDragMenuOptionIdT;
     const menuGroupIndex = groupedDragMenuConfig.findIndex(group => group.includes(item.id));
     if (menuGroupIndex === -1) {
       return;
     }
+    const isPlural = Boolean((_MapDragMenuOptionIdT = MapDragMenuOptionIdToMessage[item.id]) === null || _MapDragMenuOptionIdT === void 0 ? void 0 : _MapDragMenuOptionIdT.plural);
+    let plural = 0;
+    if (isPlural && selectionRect) {
+      const {
+        top,
+        bottom,
+        right,
+        left
+      } = selectionRect;
+      switch (MapDragMenuOptionIdToMessage[item.id].plural) {
+        case 'noOfCols':
+          {
+            plural = right - left;
+            break;
+          }
+        case 'noOfRows':
+          {
+            plural = bottom - top;
+            break;
+          }
+        case 'noOfCells':
+          {
+            plural = Math.max(right - left, bottom - top);
+            break;
+          }
+      }
+    }
+    const options = isPlural ? {
+      0: plural
+    } : undefined;
     menuItemsArr[menuGroupIndex].push({
       key: item.id,
-      content: item.title,
+      content: formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options),
       value: {
         name: item.id
       },
@@ -45,7 +136,7 @@ const convertToDropdownItems = dragMenuConfig => {
           display: 'flex'
         }
       }, jsx(item.icon, {
-        label: item.title
+        label: formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options)
       })) : undefined,
       elemAfter: item.keymap ? jsx("div", {
         css: shortcutStyle
@@ -77,7 +168,10 @@ export const DragMenu = ({
   getEditorContainerWidth,
   canDrag,
   editorAnalyticsAPI,
-  pluginConfig
+  pluginConfig,
+  intl: {
+    formatMessage
+  }
 }) => {
   var _pluginConfig$allowBa;
   const {
@@ -98,7 +192,7 @@ export const DragMenu = ({
   const {
     menuItems,
     menuCallback
-  } = convertToDropdownItems(dragMenuConfig);
+  } = convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect);
   const handleSubMenuRef = ref => {
     const parent = closestElement(editorView.dom, '.fabric-editor-popup-scroll-parent');
     if (!(parent && ref)) {
@@ -130,12 +224,12 @@ export const DragMenu = ({
     const node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
     const background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
     return {
-      content: 'Background color',
+      content: formatMessage(messages.backgroundColor),
       value: {
         name: 'background'
       },
       elemBefore: jsx(EditorBackgroundColorIcon, {
-        label: 'background color',
+        label: formatMessage(messages.backgroundColor),
         size: "medium"
       }),
       elemAfter: jsx("div", {
@@ -170,7 +264,7 @@ export const DragMenu = ({
   };
   const createhHeaderRowColumnMenuItem = direction => {
     return direction === 'column' ? {
-      content: 'Header column',
+      content: formatMessage(messages.headerColumn),
       value: {
         name: 'header_column'
       },
@@ -182,7 +276,7 @@ export const DragMenu = ({
         isChecked: checkIfHeaderColumnEnabled(selection)
       }))
     } : {
-      content: 'Header row',
+      content: formatMessage(messages.headerRow),
       value: {
         name: 'header_row'
       },
@@ -197,7 +291,7 @@ export const DragMenu = ({
   };
   const createRowNumbersMenuItem = () => {
     return {
-      content: 'Row numbers',
+      content: formatMessage(messages.rowNumbers),
       value: {
         name: 'row_numbers'
       },
@@ -331,4 +425,5 @@ export const DragMenu = ({
       hasSeparator: true
     }
   });
-};
+};
+export default injectIntl(DragMenu);

package/dist/es2019/ui/FloatingDragMenu/index.js

@@ -3,7 +3,7 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { dragMenuDropdownWidth } from '../consts';
-import { DragMenu } from './DragMenu';
+import DragMenu from './DragMenu';
 const FloatingDragMenu = ({
   mountPoint,
   boundariesElement,

package/dist/esm/nodeviews/TableComponent.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -20,10 +21,9 @@ import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { MAX_BROWSER_SCROLLBAR_HEIGHT, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { autoScrollForElements, autoScrollWindowForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
-import { unsafeOverflowAutoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/unsafe-overflow/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
 import { autoSizeTable, clearHoverSelection } from '../commands';
+import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
 import { META_KEYS } from '../pm-plugins/table-analytics';
@@ -31,7 +31,7 @@ import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode, scal
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
-import { dropTargetExtendedWidth, tableOverflowShadowWidth, tableOverflowShadowWidthWide } from '../ui/consts';
+import { tableOverflowShadowWidth, tableOverflowShadowWidthWide } from '../ui/consts';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
@@ -320,55 +320,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           }
         }
         if (isDragAndDropEnabled) {
-          this.dragAndDropCleanupFn = combine(autoScrollForElements({
-            element: this.wrapper,
-            canScroll: function canScroll(_ref) {
-              var source = _ref.source;
-              var _ref2 = source.data,
-                localId = _ref2.localId,
-                type = _ref2.type;
-              var node = getNode();
-              return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-column';
-            }
-          }), autoScrollWindowForElements({
-            canScroll: function canScroll(_ref3) {
-              var source = _ref3.source;
-              var _ref4 = source.data,
-                localId = _ref4.localId,
-                type = _ref4.type;
-              var node = getNode();
-              return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-row';
-            }
-          }), unsafeOverflowAutoScrollForElements({
-            element: this.wrapper,
-            canScroll: function canScroll(_ref5) {
-              var source = _ref5.source;
-              var _ref6 = source.data,
-                localId = _ref6.localId,
-                type = _ref6.type;
-              var node = getNode();
-              return localId === (node === null || node === void 0 ? void 0 : node.attrs.localId) && type === 'table-column';
-            },
-            getOverflow: function getOverflow() {
-              return {
-                fromTopEdge: {
-                  top: dropTargetExtendedWidth,
-                  right: dropTargetExtendedWidth,
-                  left: dropTargetExtendedWidth
-                },
-                fromRightEdge: {
-                  right: dropTargetExtendedWidth,
-                  top: dropTargetExtendedWidth,
-                  bottom: dropTargetExtendedWidth
-                },
-                fromLeftEdge: {
-                  top: dropTargetExtendedWidth,
-                  left: dropTargetExtendedWidth,
-                  bottom: dropTargetExtendedWidth
-                }
-              };
-            }
-          }));
+          this.dragAndDropCleanupFn = combine.apply(void 0, _toConsumableArray(autoScrollerFactory({
+            tableWrapper: this.wrapper,
+            getNode: getNode
+          })));
         }
       }
       if (allowColumnResizing) {

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

@@ -1,5 +1,5 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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) { _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 { INPUT_METHOD, TABLE_STATUS } from '@atlaskit/editor-common/analytics';
@@ -7,7 +7,9 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getCellsInRow } from '@atlaskit/editor-tables/utils';
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
 import { findNearestCellIndexToPoint, hasMergedCellsInBetween } from '../../utils';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { pluginKey as tablePluginKey } from '../plugin-key';
@@ -19,6 +21,148 @@ import { DRAGGABLE_TABLE_NODE_SIZE_LIMIT, DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 import { getDraggableDataFromEvent } from './utils/monitor';
+var destroyFn = function destroyFn(editorView, editorAnalyticsAPI) {
+  var editorPageScrollContainer = document.querySelector('.fabric-editor-popup-scroll-parent');
+  var rowAutoScrollers = editorPageScrollContainer ? [monitorForElements({
+    canMonitor: function canMonitor(_ref) {
+      var source = _ref.source;
+      var _ref2 = source.data,
+        type = _ref2.type;
+      return type === 'table-row';
+    },
+    onDragStart: function onDragStart() {
+      // auto scroller doesn't work when scroll-behavior: smooth is set, this monitor temporarily removes it via inline styles
+      editorPageScrollContainer.style.setProperty('scroll-behavior', 'unset');
+    },
+    onDrop: function onDrop() {
+      // 'null' will remove the inline style
+      editorPageScrollContainer.style.setProperty('scroll-behavior', null);
+    }
+  }), autoScrollForElements({
+    element: editorPageScrollContainer,
+    canScroll: function canScroll(_ref3) {
+      var source = _ref3.source;
+      var _ref4 = source.data,
+        type = _ref4.type;
+      return type === 'table-row';
+    }
+  })] : [];
+  return combine.apply(void 0, rowAutoScrollers.concat([monitorForElements({
+    canMonitor: function canMonitor(_ref5) {
+      var source = _ref5.source;
+      var _ref6 = source.data,
+        type = _ref6.type,
+        localId = _ref6.localId,
+        indexes = _ref6.indexes;
+
+      // First; Perform any quick checks so we can abort early.
+      if (!indexes || !localId ||
+      // FIXME: We currently don't support DragNDrop of multiple elements. For now we will not bother to monitor drags
+      // of more then 1 item.
+      indexes.length !== 1 || !(type === 'table-row' || type === 'table-column')) {
+        return false;
+      }
+      var _getTablePluginState = getTablePluginState(editorView.state),
+        tableNode = _getTablePluginState.tableNode;
+      // If the draggable localId is the same as the current selected table localId then we will allow the monitor
+      // watch for changes
+      return localId === (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId);
+    },
+    onDragStart: function onDragStart(_ref7) {
+      var location = _ref7.location;
+      toggleDragMenu(false)(editorView.state, editorView.dispatch);
+    },
+    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;
+      var sourceType = data.sourceType,
+        targetAdjustedIndex = data.targetAdjustedIndex;
+      var dropTargetType = sourceType === 'table-row' ? DropTargetType.ROW : DropTargetType.COLUMN;
+      var hasMergedCells = hasMergedCellsInBetween([targetAdjustedIndex - 1, targetAdjustedIndex], dropTargetType)(editorView.state.selection);
+      setDropTarget(dropTargetType, targetAdjustedIndex, hasMergedCells)(editorView.state, editorView.dispatch);
+    },
+    onDrop: function onDrop(event) {
+      var _cell$row, _cell$col;
+      var data = getDraggableDataFromEvent(event);
+
+      // On Drop we need to update the table main plugin hoveredCell value with the current row/col that the mouse is
+      // over. This is so the drag handles update their positions to correctly align with the users mouse. Unfortunately
+      // at this point in time and during the drag opertation, the drop targets are eating all the mouse events so
+      // it's not possible to know what row/col the mouse is over (via mouse events). This attempts to locate the nearest cell and
+      // then tries to update the main table hoveredCell value by piggy-backing the transaction onto the command
+      // triggered by this on drop event.
+      var _getTablePluginState2 = getTablePluginState(editorView.state),
+        hoveredCell = _getTablePluginState2.hoveredCell;
+      var cell = findNearestCellIndexToPoint(event.location.current.input.clientX, event.location.current.input.clientY);
+      var tr = editorView.state.tr;
+      var action = {
+        type: 'HOVER_CELL',
+        data: {
+          hoveredCell: {
+            rowIndex: (_cell$row = cell === null || cell === void 0 ? void 0 : cell.row) !== null && _cell$row !== void 0 ? _cell$row : hoveredCell.rowIndex,
+            colIndex: (_cell$col = cell === null || cell === void 0 ? void 0 : cell.col) !== null && _cell$col !== void 0 ? _cell$col : hoveredCell.colIndex
+          }
+        }
+      };
+      tr.setMeta(tablePluginKey, action);
+
+      // If no data can be found then it's most like we do not want to perform any drop action
+      if (!data) {
+        var _event$source, _event$source2;
+        // If we're able to determine the source type of the dropped element then we should report to analytics that
+        // the drop event was cancelled. Otherwise we will cancel silently.
+        if ((event === null || event === void 0 || (_event$source = event.source) === null || _event$source === void 0 || (_event$source = _event$source.data) === null || _event$source === void 0 ? void 0 : _event$source.type) === 'table-row' || (event === null || event === void 0 || (_event$source2 = event.source) === null || _event$source2 === void 0 || (_event$source2 = _event$source2.data) === null || _event$source2 === void 0 ? void 0 : _event$source2.type) === 'table-column') {
+          return clearDropTargetWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.DRAG_AND_DROP, event.source.data.type, TABLE_STATUS.CANCELLED, tr)(editorView.state, editorView.dispatch);
+        }
+        return clearDropTarget(tr)(editorView.state, editorView.dispatch);
+      }
+      var sourceType = data.sourceType,
+        sourceIndexes = data.sourceIndexes,
+        targetIndex = data.targetIndex,
+        targetAdjustedIndex = data.targetAdjustedIndex,
+        direction = data.direction;
+
+      // When we drop on a target we will know the targets row/col index for certain,
+      if (sourceType === 'table-row') {
+        action.data.hoveredCell.rowIndex = targetIndex;
+      } else {
+        action.data.hoveredCell.colIndex = targetIndex;
+      }
+
+      // If the drop target index contains merged cells then we should not allow the drop to occur.
+      if (hasMergedCellsInBetween([targetAdjustedIndex - 1, targetAdjustedIndex], sourceType === 'table-row' ? DropTargetType.ROW : DropTargetType.COLUMN)(editorView.state.selection)) {
+        clearDropTargetWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.DRAG_AND_DROP, sourceType,
+        // This event is mrked as invalid because the user is attempting to drop an element in an area which has merged cells.
+        TABLE_STATUS.INVALID, tr)(editorView.state, editorView.dispatch);
+        return;
+      }
+      var _sourceIndexes = _slicedToArray(sourceIndexes, 1),
+        sourceIndex = _sourceIndexes[0];
+      requestAnimationFrame(function () {
+        moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.DRAG_AND_DROP, sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1), tr)(editorView.state, editorView.dispatch);
+
+        // force a colgroup update here, otherwise dropped columns don't have
+        // the correct width immediately after the drop
+        if (sourceType === 'table-column') {
+          var _getTablePluginState3 = getTablePluginState(editorView.state),
+            tableRef = _getTablePluginState3.tableRef,
+            tableNode = _getTablePluginState3.tableNode;
+          if (tableRef && tableNode) {
+            insertColgroupFromNode(tableRef, tableNode);
+          }
+        }
+        editorView.focus();
+      });
+    }
+  })]));
+};
 export var createPlugin = function createPlugin(dispatch, eventDispatcher, editorAnalyticsAPI) {
   return new SafePlugin({
     state: createPluginState(dispatch, function (state) {
@@ -34,12 +178,12 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher, edito
     }),
     key: pluginKey,
     appendTransaction: function appendTransaction(transactions, oldState, newState) {
-      var _getTablePluginState = getTablePluginState(oldState),
-        oldTargetCellPosition = _getTablePluginState.targetCellPosition,
-        oldTableNode = _getTablePluginState.tableNode;
-      var _getTablePluginState2 = getTablePluginState(newState),
-        newTargetCellPosition = _getTablePluginState2.targetCellPosition,
-        newTableNode = _getTablePluginState2.tableNode;
+      var _getTablePluginState4 = getTablePluginState(oldState),
+        oldTargetCellPosition = _getTablePluginState4.targetCellPosition,
+        oldTableNode = _getTablePluginState4.tableNode;
+      var _getTablePluginState5 = getTablePluginState(newState),
+        newTargetCellPosition = _getTablePluginState5.targetCellPosition,
+        newTableNode = _getTablePluginState5.tableNode;
       var _getPluginState = getPluginState(newState),
         isDragMenuOpen = _getPluginState.isDragMenuOpen,
         dragMenuIndex = _getPluginState.dragMenuIndex,
@@ -93,121 +237,7 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher, edito
     },
     view: function view(editorView) {
       return {
-        destroy: monitorForElements({
-          canMonitor: function canMonitor(_ref) {
-            var source = _ref.source;
-            var _ref2 = source.data,
-              type = _ref2.type,
-              localId = _ref2.localId,
-              indexes = _ref2.indexes;
-
-            // First; Perform any quick checks so we can abort early.
-            if (!indexes || !localId ||
-            // FIXME: We currently don't support DragNDrop of multiple elements. For now we will not bother to monitor drags
-            // of more then 1 item.
-            indexes.length !== 1 || !(type === 'table-row' || type === 'table-column')) {
-              return false;
-            }
-            var _getTablePluginState3 = getTablePluginState(editorView.state),
-              tableNode = _getTablePluginState3.tableNode;
-            // If the draggable localId is the same as the current selected table localId then we will allow the monitor
-            // watch for changes
-            return localId === (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId);
-          },
-          onDragStart: function onDragStart(_ref3) {
-            var location = _ref3.location;
-            toggleDragMenu(false)(editorView.state, editorView.dispatch);
-          },
-          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;
-            var sourceType = data.sourceType,
-              targetAdjustedIndex = data.targetAdjustedIndex;
-            var dropTargetType = sourceType === 'table-row' ? DropTargetType.ROW : DropTargetType.COLUMN;
-            var hasMergedCells = hasMergedCellsInBetween([targetAdjustedIndex - 1, targetAdjustedIndex], dropTargetType)(editorView.state.selection);
-            setDropTarget(dropTargetType, targetAdjustedIndex, hasMergedCells)(editorView.state, editorView.dispatch);
-          },
-          onDrop: function onDrop(event) {
-            var _cell$row, _cell$col;
-            var data = getDraggableDataFromEvent(event);
-
-            // On Drop we need to update the table main plugin hoveredCell value with the current row/col that the mouse is
-            // over. This is so the drag handles update their positions to correctly align with the users mouse. Unfortunately
-            // at this point in time and during the drag opertation, the drop targets are eating all the mouse events so
-            // it's not possible to know what row/col the mouse is over (via mouse events). This attempts to locate the nearest cell and
-            // then tries to update the main table hoveredCell value by piggy-backing the transaction onto the command
-            // triggered by this on drop event.
-            var _getTablePluginState4 = getTablePluginState(editorView.state),
-              hoveredCell = _getTablePluginState4.hoveredCell;
-            var cell = findNearestCellIndexToPoint(event.location.current.input.clientX, event.location.current.input.clientY);
-            var tr = editorView.state.tr;
-            var action = {
-              type: 'HOVER_CELL',
-              data: {
-                hoveredCell: {
-                  rowIndex: (_cell$row = cell === null || cell === void 0 ? void 0 : cell.row) !== null && _cell$row !== void 0 ? _cell$row : hoveredCell.rowIndex,
-                  colIndex: (_cell$col = cell === null || cell === void 0 ? void 0 : cell.col) !== null && _cell$col !== void 0 ? _cell$col : hoveredCell.colIndex
-                }
-              }
-            };
-            tr.setMeta(tablePluginKey, action);
-
-            // If no data can be found then it's most like we do not want to perform any drop action
-            if (!data) {
-              var _event$source, _event$source2;
-              // If we're able to determine the source type of the dropped element then we should report to analytics that
-              // the drop event was cancelled. Otherwise we will cancel silently.
-              if ((event === null || event === void 0 || (_event$source = event.source) === null || _event$source === void 0 || (_event$source = _event$source.data) === null || _event$source === void 0 ? void 0 : _event$source.type) === 'table-row' || (event === null || event === void 0 || (_event$source2 = event.source) === null || _event$source2 === void 0 || (_event$source2 = _event$source2.data) === null || _event$source2 === void 0 ? void 0 : _event$source2.type) === 'table-column') {
-                return clearDropTargetWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.DRAG_AND_DROP, event.source.data.type, TABLE_STATUS.CANCELLED, tr)(editorView.state, editorView.dispatch);
-              }
-              return clearDropTarget(tr)(editorView.state, editorView.dispatch);
-            }
-            var sourceType = data.sourceType,
-              sourceIndexes = data.sourceIndexes,
-              targetIndex = data.targetIndex,
-              targetAdjustedIndex = data.targetAdjustedIndex,
-              direction = data.direction;
-
-            // When we drop on a target we will know the targets row/col index for certain,
-            if (sourceType === 'table-row') {
-              action.data.hoveredCell.rowIndex = targetIndex;
-            } else {
-              action.data.hoveredCell.colIndex = targetIndex;
-            }
-
-            // If the drop target index contains merged cells then we should not allow the drop to occur.
-            if (hasMergedCellsInBetween([targetAdjustedIndex - 1, targetAdjustedIndex], sourceType === 'table-row' ? DropTargetType.ROW : DropTargetType.COLUMN)(editorView.state.selection)) {
-              clearDropTargetWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.DRAG_AND_DROP, sourceType,
-              // This event is mrked as invalid because the user is attempting to drop an element in an area which has merged cells.
-              TABLE_STATUS.INVALID, tr)(editorView.state, editorView.dispatch);
-              return;
-            }
-            var _sourceIndexes = _slicedToArray(sourceIndexes, 1),
-              sourceIndex = _sourceIndexes[0];
-            requestAnimationFrame(function () {
-              moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.DRAG_AND_DROP, sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1), tr)(editorView.state, editorView.dispatch);
-
-              // force a colgroup update here, otherwise dropped columns don't have
-              // the correct width immediately after the drop
-              if (sourceType === 'table-column') {
-                var _getTablePluginState5 = getTablePluginState(editorView.state),
-                  tableRef = _getTablePluginState5.tableRef,
-                  tableNode = _getTablePluginState5.tableNode;
-                if (tableRef && tableNode) {
-                  insertColgroupFromNode(tableRef, tableNode);
-                }
-              }
-              editorView.focus();
-            });
-          }
-        })
+        destroy: destroyFn(editorView, editorAnalyticsAPI)
       };
     },
     props: {