@atlaskit/editor-plugin-table 5.5.12 → 5.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 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
+
+- [#60425](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60425) [`0caaaa7105f9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0caaaa7105f9) - [ux] Fix drag menu position and anchor element
+
 ## 5.5.12
 
 ### 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/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/DragHandle/index.js

@@ -22,7 +22,8 @@ var _HandleIconComponent = require("./HandleIconComponent");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var DragHandle = exports.DragHandle = function DragHandle(_ref) {
-  var tableLocalId = _ref.tableLocalId,
+  var isDragMenuTarget = _ref.isDragMenuTarget,
+    tableLocalId = _ref.tableLocalId,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
     _ref$appearance = _ref.appearance,
@@ -114,7 +115,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       });
     }
   }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells, _canDrag]);
+  var showDragMenuAnchorId = direction === 'row' ? 'drag-handle-button-row' : 'drag-handle-button-column';
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    id: isDragMenuTarget ? showDragMenuAnchorId : undefined,
     className: (0, _classnames2.default)(_types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, (0, _defineProperty2.default)({}, _types.TableCssClassName.DRAG_HANDLE_DISABLED, !_canDrag || hasMergedCells)),
     ref: dragHandleDivRef,
     style: {

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

@@ -7,9 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ui = require("@atlaskit/editor-common/ui");
-var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _consts = require("../consts");
 var _DragMenu = require("./DragMenu");
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
@@ -18,28 +17,27 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     scrollableElement = _ref.scrollableElement,
     editorView = _ref.editorView,
     isOpen = _ref.isOpen,
-    tableRef = _ref.tableRef,
     tableNode = _ref.tableNode,
     direction = _ref.direction,
     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;
   }
-  var domAtPos = editorView.domAtPos.bind(editorView);
-  var targetCellRef = (0, _utils.findDomRefAtPos)(targetCellPosition, domAtPos);
-  if (!targetCellRef) {
+  var targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
+  if (!targetHandleRef || !(editorView.state.selection instanceof _cellSelection.CellSelection)) {
     return null;
   }
-  var tableMap = tableNode ? _tableMap.TableMap.get(tableNode) : undefined;
-  var offset = direction === 'row' ? [7, 0] : index === ((tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) || 1) - 1 ? [14, 0] : [-14, 0];
+  var offset = direction === 'row' ? [-9, 6] : [0, -7];
+
   // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
-    alignX: direction === 'row' ? 'left' : 'center',
-    alignY: "top",
-    target: targetCellRef,
+    alignX: direction === 'row' ? 'right' : undefined,
+    alignY: direction === 'row' ? 'start' : undefined,
+    target: targetHandleRef,
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
@@ -60,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/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -138,8 +138,9 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
         zIndex: 99
       },
       "data-column-control-index": hoveredCell.colIndex,
-      "data-testid": isHover ? 'table-floating-column-control-hover' : 'table-floating-column-control'
+      "data-testid": 'table-floating-column-control'
     }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
+      isDragMenuTarget: !isHover,
       direction: "column",
       tableLocalId: localId || '',
       indexes: indexes,

package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js

@@ -150,8 +150,9 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
         position: 'relative',
         right: '-0.5px'
       },
-      "data-testid": isHover ? 'table-floating-row-drag-handle-hover' : 'table-floating-row-drag-handle'
+      "data-testid": 'table-floating-row-drag-handle'
     }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
+      isDragMenuTarget: !isHover,
       direction: "row",
       tableLocalId: currentNodeLocalId,
       indexes: indexes,

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/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/DragHandle/index.js

@@ -10,6 +10,7 @@ import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { DragPreview } from '../DragPreview';
 import { HandleIconComponent } from './HandleIconComponent';
 export const DragHandle = ({
+  isDragMenuTarget,
   tableLocalId,
   direction = 'row',
   appearance = 'default',
@@ -98,7 +99,9 @@ export const DragHandle = ({
       });
     }
   }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells, canDrag]);
+  const showDragMenuAnchorId = direction === 'row' ? 'drag-handle-button-row' : 'drag-handle-button-column';
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    id: isDragMenuTarget ? showDragMenuAnchorId : undefined,
     className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, {
       [ClassName.DRAG_HANDLE_DISABLED]: !canDrag || hasMergedCells
     }),

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { dragMenuDropdownWidth } from '../consts';
 import { DragMenu } from './DragMenu';
 const FloatingDragMenu = ({
@@ -11,29 +10,28 @@ const FloatingDragMenu = ({
   scrollableElement,
   editorView,
   isOpen,
-  tableRef,
   tableNode,
   direction,
   index,
   targetCellPosition,
   getEditorContainerWidth,
-  canDrag
+  canDrag,
+  editorAnalyticsAPI
 }) => {
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
-  const domAtPos = editorView.domAtPos.bind(editorView);
-  const targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
-  if (!targetCellRef) {
+  const targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
+  if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
-  const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
-  const offset = direction === 'row' ? [7, 0] : index === ((tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) || 1) - 1 ? [14, 0] : [-14, 0];
+  const offset = direction === 'row' ? [-9, 6] : [0, -7];
+
   // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return /*#__PURE__*/React.createElement(Popup, {
-    alignX: direction === 'row' ? 'left' : 'center',
-    alignY: "top",
-    target: targetCellRef,
+    alignX: direction === 'row' ? 'right' : undefined,
+    alignY: direction === 'row' ? 'start' : undefined,
+    target: targetHandleRef,
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
@@ -54,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/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -136,8 +136,9 @@ export const ColumnControls = ({
         zIndex: 99
       },
       "data-column-control-index": hoveredCell.colIndex,
-      "data-testid": isHover ? 'table-floating-column-control-hover' : 'table-floating-column-control'
+      "data-testid": 'table-floating-column-control'
     }, /*#__PURE__*/React.createElement(DragHandle, {
+      isDragMenuTarget: !isHover,
       direction: "column",
       tableLocalId: localId || '',
       indexes: indexes,

package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js

@@ -140,8 +140,9 @@ const DragControlsComponent = ({
         position: 'relative',
         right: '-0.5px'
       },
-      "data-testid": isHover ? 'table-floating-row-drag-handle-hover' : 'table-floating-row-drag-handle'
+      "data-testid": 'table-floating-row-drag-handle'
     }, /*#__PURE__*/React.createElement(DragHandle, {
+      isDragMenuTarget: !isHover,
       direction: "row",
       tableLocalId: currentNodeLocalId,
       indexes: indexes,