@atlaskit/editor-plugin-table 5.5.13 → 5.6.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 5.6.1
+
+### Patch Changes
+
+- [#61294](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61294) [`70b236bfd951`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/70b236bfd951) - remove raf from sticky scrollbar handler to fix jittery behaviour
+
+## 5.6.0
+
+### Minor Changes
+
+- [#60937](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60937) [`fd6ea5aa5a6e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fd6ea5aa5a6e) - Added new table analytics to cover moving row/column scenarios
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.5.13
 
 ### Patch Changes

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

@@ -190,8 +190,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
         name: 'tableDragAndDrop',
         plugin: function plugin(_ref9) {
           var dispatch = _ref9.dispatch,
-            eventDispatcher = _ref9.eventDispatcher;
-          return options !== null && options !== void 0 && options.dragAndDropEnabled ? (0, _dragAndDrop.createPlugin)(dispatch, eventDispatcher) : undefined;
+            eventDispatcher = _ref9.eventDispatcher,
+            dispatchAnalyticsEvent = _ref9.dispatchAnalyticsEvent;
+          return options !== null && options !== void 0 && options.dragAndDropEnabled ? (0, _dragAndDrop.createPlugin)(dispatch, eventDispatcher, editorAnalyticsAPI) : undefined;
         }
       }, {
         name: 'tableLocalId',
@@ -357,7 +358,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             index: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
             isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing,
             canDrag: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.canDrag,
-            getEditorContainerWidth: defaultGetEditorContainerWidth
+            getEditorContainerWidth: defaultGetEditorContainerWidth,
+            editorAnalyticsAPI: editorAnalyticsAPI
           }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/_react.default.createElement(_FloatingDeleteButton.default, {
             editorView: editorView,
             selection: editorView.state.selection,

package/dist/cjs/plugins/table/nodeviews/TableStickyScrollbar.js

@@ -8,7 +8,6 @@ exports.TableStickyScrollbar = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _types = require("../types");
 var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function () {
@@ -22,7 +21,6 @@ var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function
       }
       _this.wrapper.scrollLeft = _this.stickyScrollbarContainerElement.scrollLeft;
     });
-    (0, _defineProperty2.default)(this, "handleScrollDebounced", (0, _rafSchd.default)(this.handleScroll));
     this.wrapper = wrapper;
     this.view = view;
     this.init();
@@ -31,8 +29,7 @@ var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function
     key: "dispose",
     value: function dispose() {
       if (this.stickyScrollbarContainerElement) {
-        this.stickyScrollbarContainerElement.removeEventListener('scroll', this.handleScrollDebounced);
-        this.handleScrollDebounced.cancel();
+        this.stickyScrollbarContainerElement.removeEventListener('scroll', this.handleScroll);
       }
       this.deleteIntersectionObserver();
     }
@@ -52,7 +49,7 @@ var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function
       }
       this.stickyScrollbarContainerElement = (_this$wrapper$parentE = this.wrapper.parentElement) === null || _this$wrapper$parentE === void 0 ? void 0 : _this$wrapper$parentE.querySelector(".".concat(_types.TableCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER));
       if (this.stickyScrollbarContainerElement) {
-        this.stickyScrollbarContainerElement.addEventListener('scroll', this.handleScrollDebounced, {
+        this.stickyScrollbarContainerElement.addEventListener('scroll', this.handleScroll, {
           passive: true
         });
       }

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

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.moveSourceWithAnalytics = exports.clearDropTargetWithAnalytics = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _utils = require("../../utils");
+var _analytics2 = require("../../utils/analytics");
+var _commands = require("./commands");
+var clearDropTargetWithAnalytics = exports.clearDropTargetWithAnalytics = function clearDropTargetWithAnalytics(editorAnalyticsAPI) {
+  return function (inputMethod, sourceType, status, tr) {
+    return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref) {
+      var selection = _ref.selection;
+      var _getSelectedTableInfo = (0, _utils.getSelectedTableInfo)(selection),
+        totalRowCount = _getSelectedTableInfo.totalRowCount,
+        totalColumnCount = _getSelectedTableInfo.totalColumnCount;
+      return {
+        action: sourceType === 'table-row' ? _analytics.TABLE_ACTION.MOVED_ROW : _analytics.TABLE_ACTION.MOVED_COLUMN,
+        actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+        actionSubjectId: null,
+        attributes: {
+          inputMethod: inputMethod,
+          // TODO: When multiple sources can be moved we need to update this count to be the amount of sources which are being moved.
+          count: 1,
+          distance: 0,
+          status: status,
+          totalRowCount: totalRowCount,
+          totalColumnCount: totalColumnCount
+        },
+        eventType: _analytics.EVENT_TYPE.TRACK
+      };
+    })(editorAnalyticsAPI)(function (state, dispatch) {
+      if (dispatch) {
+        (0, _commands.clearDropTarget)(tr)(state, dispatch);
+      }
+      return true;
+    });
+  };
+};
+var moveSourceWithAnalytics = exports.moveSourceWithAnalytics = function moveSourceWithAnalytics(editorAnalyticsAPI) {
+  return function (inputMethod, sourceType, sourceIndex, targetIndex, tr) {
+    return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref2) {
+      var selection = _ref2.selection;
+      var _getSelectedTableInfo2 = (0, _utils.getSelectedTableInfo)(selection),
+        totalRowCount = _getSelectedTableInfo2.totalRowCount,
+        totalColumnCount = _getSelectedTableInfo2.totalColumnCount;
+      return {
+        action: sourceType === 'table-row' ? _analytics.TABLE_ACTION.MOVED_ROW : _analytics.TABLE_ACTION.MOVED_COLUMN,
+        actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+        actionSubjectId: null,
+        attributes: {
+          inputMethod: inputMethod,
+          // TODO: When multiple sources can be moved we need to update this count to be the amount of sources which are being moved.
+          count: 1,
+          // This identifies the total amount of row/cols the move operation covered
+          distance: targetIndex - sourceIndex,
+          // If a drop doesn't actually change anything then we're going to mark the event as cancelled.
+          status: sourceIndex === targetIndex ? _analytics.TABLE_STATUS.CANCELLED : _analytics.TABLE_STATUS.SUCCESS,
+          totalRowCount: totalRowCount,
+          totalColumnCount: totalColumnCount
+        },
+        eventType: _analytics.EVENT_TYPE.TRACK
+      };
+    })(editorAnalyticsAPI)(function (state, dispatch) {
+      if (dispatch) {
+        (0, _commands.moveSource)(sourceType, sourceIndex, targetIndex, tr)(state, dispatch);
+      }
+      return true;
+    });
+  };
+};

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.createPlugin = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
@@ -18,13 +19,14 @@ var _pluginKey = require("../plugin-key");
 var _utils3 = require("../table-resizing/utils");
 var _actions = require("./actions");
 var _commands = require("./commands");
+var _commandsWithAnalytics = require("./commands-with-analytics");
 var _consts = require("./consts");
 var _pluginFactory2 = require("./plugin-factory");
 var _pluginKey2 = require("./plugin-key");
 var _monitor = require("./utils/monitor");
 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(dispatch, eventDispatcher) {
+var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventDispatcher, editorAnalyticsAPI) {
   return new _safePlugin.SafePlugin({
     state: (0, _pluginFactory2.createPluginState)(dispatch, function (state) {
       return {
@@ -165,8 +167,13 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
 
             // 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)(tr)(editorView.state, editorView.dispatch);
-              return;
+              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 (0, _commandsWithAnalytics.clearDropTargetWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.DRAG_AND_DROP, event.source.data.type, _analytics.TABLE_STATUS.CANCELLED, tr)(editorView.state, editorView.dispatch);
+              }
+              return (0, _commands.clearDropTarget)(tr)(editorView.state, editorView.dispatch);
             }
             var sourceType = data.sourceType,
               sourceIndexes = data.sourceIndexes,
@@ -183,13 +190,15 @@ 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.
             if ((0, _utils2.hasMergedCellsInBetween)([targetAdjustedIndex - 1, targetAdjustedIndex], sourceType === 'table-row' ? _consts.DropTargetType.ROW : _consts.DropTargetType.COLUMN)(editorView.state.selection)) {
-              (0, _commands.clearDropTarget)(tr)(editorView.state, editorView.dispatch);
+              (0, _commandsWithAnalytics.clearDropTargetWithAnalytics)(editorAnalyticsAPI)(_analytics.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.
+              _analytics.TABLE_STATUS.INVALID, tr)(editorView.state, editorView.dispatch);
               return;
             }
             var _sourceIndexes = (0, _slicedToArray2.default)(sourceIndexes, 1),
               sourceIndex = _sourceIndexes[0];
             requestAnimationFrame(function () {
-              (0, _commands.moveSource)(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1), tr)(editorView.state, editorView.dispatch);
+              (0, _commandsWithAnalytics.moveSourceWithAnalytics)(editorAnalyticsAPI)(_analytics.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

package/dist/cjs/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -76,7 +76,8 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
     scrollableElement = _ref.scrollableElement,
     targetCellPosition = _ref.targetCellPosition,
     getEditorContainerWidth = _ref.getEditorContainerWidth,
-    canDrag = _ref.canDrag;
+    canDrag = _ref.canDrag,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
   var tableMap = tableNode ? _tableMap.TableMap.get(tableNode) : undefined;
   var state = editorView.state,
     dispatch = editorView.dispatch;
@@ -85,7 +86,7 @@ var DragMenu = exports.DragMenu = function DragMenu(_ref) {
   var hasMergedCells = direction === 'row' ? _utils2.hasMergedCellsInRow : _utils2.hasMergedCellsInColumn;
   var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
   var hasMergedCellsInTable = (0, _utils2.getMergedCellsPositions)(state.tr).length > 0;
-  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect);
+  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;

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

@@ -22,7 +22,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     index = _ref.index,
     targetCellPosition = _ref.targetCellPosition,
     getEditorContainerWidth = _ref.getEditorContainerWidth,
-    canDrag = _ref.canDrag;
+    canDrag = _ref.canDrag,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
@@ -57,7 +58,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     index: index,
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,
-    canDrag: canDrag
+    canDrag: canDrag,
+    editorAnalyticsAPI: editorAnalyticsAPI
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

package/dist/cjs/plugins/table/utils/drag-menu.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getDragMenuConfig = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _customSteps = require("@atlaskit/custom-steps");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-down"));
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left"));
@@ -19,8 +20,8 @@ var _chevronDoubleDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hi
 var _chevronDoubleUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-double-up"));
 var _commands = require("../commands");
 var _delete = require("../commands/delete");
-var _commands2 = require("../pm-plugins/drag-and-drop/commands");
-var _commands3 = require("../pm-plugins/table-resizing/commands");
+var _commandsWithAnalytics = require("../pm-plugins/drag-and-drop/commands-with-analytics");
+var _commands2 = require("../pm-plugins/table-resizing/commands");
 var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
 var _toolbar = require("../toolbar");
 var _transforms = require("../transforms");
@@ -42,7 +43,7 @@ var isDistributeColumnsEnabled = function isDistributeColumnsEnabled(state) {
   }
   return false;
 };
-var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect) {
+var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI) {
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -134,7 +135,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
         if (newResizeState) {
           var resizeState = newResizeState.resizeState,
             table = newResizeState.table;
-          (0, _commands3.distributeColumnsWidths)(resizeState, table)(state, dispatch);
+          (0, _commands2.distributeColumnsWidths)(resizeState, table)(state, dispatch);
           return true;
         }
         return false;
@@ -176,7 +177,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
       onClick: function onClick(state, dispatch) {
         if (canMove(index)) {
           requestAnimationFrame(function () {
-            (0, _commands2.moveSource)("table-".concat(direction), index, index + offset)(state, dispatch);
+            (0, _commandsWithAnalytics.moveSourceWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, "table-".concat(direction), index, index + offset)(editorView.state, editorView.dispatch);
           });
           return true;
         }

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

@@ -178,8 +178,9 @@ const tablesPlugin = ({
         name: 'tableDragAndDrop',
         plugin: ({
           dispatch,
-          eventDispatcher
-        }) => options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, eventDispatcher) : undefined
+          eventDispatcher,
+          dispatchAnalyticsEvent
+        }) => options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, eventDispatcher, editorAnalyticsAPI) : undefined
       }, {
         name: 'tableLocalId',
         plugin: ({
@@ -351,7 +352,8 @@ const tablesPlugin = ({
             index: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
             isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing,
             canDrag: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.canDrag,
-            getEditorContainerWidth: defaultGetEditorContainerWidth
+            getEditorContainerWidth: defaultGetEditorContainerWidth,
+            editorAnalyticsAPI: editorAnalyticsAPI
           }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,

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

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import rafSchedule from 'raf-schd';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { TableCssClassName as ClassName } from '../types';
 export class TableStickyScrollbar {
@@ -11,15 +10,13 @@ export class TableStickyScrollbar {
       }
       this.wrapper.scrollLeft = this.stickyScrollbarContainerElement.scrollLeft;
     });
-    _defineProperty(this, "handleScrollDebounced", rafSchedule(this.handleScroll));
     this.wrapper = wrapper;
     this.view = view;
     this.init();
   }
   dispose() {
     if (this.stickyScrollbarContainerElement) {
-      this.stickyScrollbarContainerElement.removeEventListener('scroll', this.handleScrollDebounced);
-      this.handleScrollDebounced.cancel();
+      this.stickyScrollbarContainerElement.removeEventListener('scroll', this.handleScroll);
     }
     this.deleteIntersectionObserver();
   }
@@ -35,7 +32,7 @@ export class TableStickyScrollbar {
     }
     this.stickyScrollbarContainerElement = (_this$wrapper$parentE = this.wrapper.parentElement) === null || _this$wrapper$parentE === void 0 ? void 0 : _this$wrapper$parentE.querySelector(`.${ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER}`);
     if (this.stickyScrollbarContainerElement) {
-      this.stickyScrollbarContainerElement.addEventListener('scroll', this.handleScrollDebounced, {
+      this.stickyScrollbarContainerElement.addEventListener('scroll', this.handleScroll, {
         passive: true
       });
     }

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

@@ -0,0 +1,66 @@
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION, TABLE_STATUS } from '@atlaskit/editor-common/analytics';
+import { getSelectedTableInfo } from '../../utils';
+import { withEditorAnalyticsAPI } from '../../utils/analytics';
+import { clearDropTarget, moveSource } from './commands';
+export const clearDropTargetWithAnalytics = editorAnalyticsAPI => (inputMethod, sourceType, status, tr) => {
+  return withEditorAnalyticsAPI(({
+    selection
+  }) => {
+    const {
+      totalRowCount,
+      totalColumnCount
+    } = getSelectedTableInfo(selection);
+    return {
+      action: sourceType === 'table-row' ? TABLE_ACTION.MOVED_ROW : TABLE_ACTION.MOVED_COLUMN,
+      actionSubject: ACTION_SUBJECT.TABLE,
+      actionSubjectId: null,
+      attributes: {
+        inputMethod,
+        // TODO: When multiple sources can be moved we need to update this count to be the amount of sources which are being moved.
+        count: 1,
+        distance: 0,
+        status,
+        totalRowCount,
+        totalColumnCount
+      },
+      eventType: EVENT_TYPE.TRACK
+    };
+  })(editorAnalyticsAPI)((state, dispatch) => {
+    if (dispatch) {
+      clearDropTarget(tr)(state, dispatch);
+    }
+    return true;
+  });
+};
+export const moveSourceWithAnalytics = editorAnalyticsAPI => (inputMethod, sourceType, sourceIndex, targetIndex, tr) => {
+  return withEditorAnalyticsAPI(({
+    selection
+  }) => {
+    const {
+      totalRowCount,
+      totalColumnCount
+    } = getSelectedTableInfo(selection);
+    return {
+      action: sourceType === 'table-row' ? TABLE_ACTION.MOVED_ROW : TABLE_ACTION.MOVED_COLUMN,
+      actionSubject: ACTION_SUBJECT.TABLE,
+      actionSubjectId: null,
+      attributes: {
+        inputMethod,
+        // TODO: When multiple sources can be moved we need to update this count to be the amount of sources which are being moved.
+        count: 1,
+        // This identifies the total amount of row/cols the move operation covered
+        distance: targetIndex - sourceIndex,
+        // If a drop doesn't actually change anything then we're going to mark the event as cancelled.
+        status: sourceIndex === targetIndex ? TABLE_STATUS.CANCELLED : TABLE_STATUS.SUCCESS,
+        totalRowCount,
+        totalColumnCount
+      },
+      eventType: EVENT_TYPE.TRACK
+    };
+  })(editorAnalyticsAPI)((state, dispatch) => {
+    if (dispatch) {
+      moveSource(sourceType, sourceIndex, targetIndex, tr)(state, dispatch);
+    }
+    return true;
+  });
+};

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

@@ -1,3 +1,4 @@
+import { INPUT_METHOD, TABLE_STATUS } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -8,12 +9,13 @@ import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { pluginKey as tablePluginKey } from '../plugin-key';
 import { insertColgroupFromNode } from '../table-resizing/utils';
 import { DragAndDropActionType } from './actions';
-import { clearDropTarget, moveSource, setDropTarget, toggleDragMenu } from './commands';
+import { clearDropTarget, setDropTarget, toggleDragMenu } from './commands';
+import { clearDropTargetWithAnalytics, moveSourceWithAnalytics } from './commands-with-analytics';
 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';
-export const createPlugin = (dispatch, eventDispatcher) => {
+export const createPlugin = (dispatch, eventDispatcher, editorAnalyticsAPI) => {
   return new SafePlugin({
     state: createPluginState(dispatch, state => ({
       decorationSet: DecorationSet.empty,
@@ -165,8 +167,13 @@ export const createPlugin = (dispatch, eventDispatcher) => {
 
             // If no data can be found then it's most like we do not want to perform any drop action
             if (!data) {
-              clearDropTarget(tr)(editorView.state, editorView.dispatch);
-              return;
+              var _event$source, _event$source$data, _event$source2, _event$source2$data;
+              // 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 ? void 0 : (_event$source = event.source) === null || _event$source === void 0 ? void 0 : (_event$source$data = _event$source.data) === null || _event$source$data === void 0 ? void 0 : _event$source$data.type) === 'table-row' || (event === null || event === void 0 ? void 0 : (_event$source2 = event.source) === null || _event$source2 === void 0 ? void 0 : (_event$source2$data = _event$source2.data) === null || _event$source2$data === void 0 ? void 0 : _event$source2$data.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);
             }
             const {
               sourceType,
@@ -185,12 +192,14 @@ export const createPlugin = (dispatch, eventDispatcher) => {
 
             // 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)) {
-              clearDropTarget(tr)(editorView.state, editorView.dispatch);
+              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;
             }
             const [sourceIndex] = sourceIndexes;
             requestAnimationFrame(() => {
-              moveSource(sourceType, sourceIndex, targetAdjustedIndex + (direction === -1 ? 0 : -1), tr)(editorView.state, editorView.dispatch);
+              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

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

@@ -62,7 +62,8 @@ export const DragMenu = ({
   scrollableElement,
   targetCellPosition,
   getEditorContainerWidth,
-  canDrag
+  canDrag,
+  editorAnalyticsAPI
 }) => {
   const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
   const {
@@ -76,7 +77,7 @@ export const DragMenu = ({
   const hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
   const shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
   const hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
-  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect);
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI);
   const {
     menuItems,
     menuCallback

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

@@ -15,7 +15,8 @@ const FloatingDragMenu = ({
   index,
   targetCellPosition,
   getEditorContainerWidth,
-  canDrag
+  canDrag,
+  editorAnalyticsAPI
 }) => {
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
@@ -51,7 +52,8 @@ const FloatingDragMenu = ({
     index: index,
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,
-    canDrag: canDrag
+    canDrag: canDrag,
+    editorAnalyticsAPI: editorAnalyticsAPI
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

package/dist/es2019/plugins/table/utils/drag-menu.js

@@ -1,4 +1,5 @@
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import ArrowDownIcon from '@atlaskit/icon/glyph/arrow-down';
 import ArrowLeftIcon from '@atlaskit/icon/glyph/arrow-left';
@@ -11,7 +12,7 @@ import HipchatChevronDoubleDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-d
 import HipchatChevronDoubleUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-up';
 import { clearMultipleCells, insertColumn, insertRow, sortByColumn } from '../commands';
 import { deleteColumnsCommand } from '../commands/delete';
-import { moveSource } from '../pm-plugins/drag-and-drop/commands';
+import { moveSourceWithAnalytics } from '../pm-plugins/drag-and-drop/commands-with-analytics';
 import { distributeColumnsWidths } from '../pm-plugins/table-resizing/commands';
 import { getNewResizeStateFromSelectedColumns } from '../pm-plugins/table-resizing/utils/resize-state';
 import { getClosestSelectionRect } from '../toolbar';
@@ -28,7 +29,7 @@ const isDistributeColumnsEnabled = state => {
   }
   return false;
 };
-export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect) => {
+export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI) => {
   const addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -159,7 +160,7 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, canDrag, h
     onClick: (state, dispatch) => {
       if (canMove(index)) {
         requestAnimationFrame(() => {
-          moveSource(`table-${direction}`, index, index + offset)(state, dispatch);
+          moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, `table-${direction}`, index, index + offset)(editorView.state, editorView.dispatch);
         });
         return true;
       }

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

@@ -183,8 +183,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
         name: 'tableDragAndDrop',
         plugin: function plugin(_ref9) {
           var dispatch = _ref9.dispatch,
-            eventDispatcher = _ref9.eventDispatcher;
-          return options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, eventDispatcher) : undefined;
+            eventDispatcher = _ref9.eventDispatcher,
+            dispatchAnalyticsEvent = _ref9.dispatchAnalyticsEvent;
+          return options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, eventDispatcher, editorAnalyticsAPI) : undefined;
         }
       }, {
         name: 'tableLocalId',
@@ -350,7 +351,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             index: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
             isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing,
             canDrag: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.canDrag,
-            getEditorContainerWidth: defaultGetEditorContainerWidth
+            getEditorContainerWidth: defaultGetEditorContainerWidth,
+            editorAnalyticsAPI: editorAnalyticsAPI
           }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,

package/dist/esm/plugins/table/nodeviews/TableStickyScrollbar.js

@@ -1,7 +1,6 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import rafSchedule from 'raf-schd';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { TableCssClassName as ClassName } from '../types';
 export var TableStickyScrollbar = /*#__PURE__*/function () {
@@ -15,7 +14,6 @@ export var TableStickyScrollbar = /*#__PURE__*/function () {
       }
       _this.wrapper.scrollLeft = _this.stickyScrollbarContainerElement.scrollLeft;
     });
-    _defineProperty(this, "handleScrollDebounced", rafSchedule(this.handleScroll));
     this.wrapper = wrapper;
     this.view = view;
     this.init();
@@ -24,8 +22,7 @@ export var TableStickyScrollbar = /*#__PURE__*/function () {
     key: "dispose",
     value: function dispose() {
       if (this.stickyScrollbarContainerElement) {
-        this.stickyScrollbarContainerElement.removeEventListener('scroll', this.handleScrollDebounced);
-        this.handleScrollDebounced.cancel();
+        this.stickyScrollbarContainerElement.removeEventListener('scroll', this.handleScroll);
       }
       this.deleteIntersectionObserver();
     }
@@ -45,7 +42,7 @@ export var TableStickyScrollbar = /*#__PURE__*/function () {
       }
       this.stickyScrollbarContainerElement = (_this$wrapper$parentE = this.wrapper.parentElement) === null || _this$wrapper$parentE === void 0 ? void 0 : _this$wrapper$parentE.querySelector(".".concat(ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER));
       if (this.stickyScrollbarContainerElement) {
-        this.stickyScrollbarContainerElement.addEventListener('scroll', this.handleScrollDebounced, {
+        this.stickyScrollbarContainerElement.addEventListener('scroll', this.handleScroll, {
           passive: true
         });
       }