@atlaskit/editor-plugin-table 5.5.13 → 5.6.0

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

@@ -68,7 +68,8 @@ export var 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.get(tableNode) : undefined;
   var state = editorView.state,
     dispatch = editorView.dispatch;
@@ -77,7 +78,7 @@ export var DragMenu = function DragMenu(_ref) {
   var hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
   var shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
   var hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
-  var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect);
+  var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;

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

@@ -15,7 +15,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;
   }
@@ -50,7 +51,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     index: index,
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,
-    canDrag: canDrag
+    canDrag: canDrag,
+    editorAnalyticsAPI: editorAnalyticsAPI
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

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

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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';
@@ -12,7 +13,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';
@@ -35,7 +36,7 @@ var isDistributeColumnsEnabled = function isDistributeColumnsEnabled(state) {
   }
   return false;
 };
-export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect) {
+export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorContainerWidth, canDrag, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI) {
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -169,7 +170,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
       onClick: function onClick(state, dispatch) {
         if (canMove(index)) {
           requestAnimationFrame(function () {
-            moveSource("table-".concat(direction), index, index + offset)(state, dispatch);
+            moveSourceWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, "table-".concat(direction), index, index + offset)(editorView.state, editorView.dispatch);
           });
           return true;
         }

package/dist/types/plugins/table/pm-plugins/drag-and-drop/commands-with-analytics.d.ts

@@ -0,0 +1,6 @@
+import { TABLE_STATUS } from '@atlaskit/editor-common/analytics';
+import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { DraggableType } from '../../types';
+export declare const clearDropTargetWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP, sourceType: DraggableType, status: TABLE_STATUS.CANCELLED | TABLE_STATUS.INVALID, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
+export declare const moveSourceWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP, sourceType: DraggableType, sourceIndex: number, targetIndex: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;

package/dist/types/plugins/table/pm-plugins/drag-and-drop/plugin.d.ts

@@ -1,4 +1,5 @@
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { DragAndDropPluginState } from './types';
-export declare const createPlugin: (dispatch: Dispatch, eventDispatcher: EventDispatcher) => SafePlugin<DragAndDropPluginState>;
+export declare const createPlugin: (dispatch: Dispatch, eventDispatcher: EventDispatcher, editorAnalyticsAPI?: EditorAnalyticsAPI) => SafePlugin<DragAndDropPluginState>;

package/dist/types/plugins/table/ui/FloatingDragMenu/DragMenu.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -18,6 +19,7 @@ type DragMenuProps = {
     pluginConfig?: PluginConfig;
     getEditorContainerWidth: GetEditorContainerWidth;
     canDrag?: boolean;
+    editorAnalyticsAPI?: EditorAnalyticsAPI;
 };
-export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, canDrag, }: DragMenuProps) => jsx.JSX.Element | null;
+export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, }: DragMenuProps) => jsx.JSX.Element | null;
 export {};

package/dist/types/plugins/table/ui/FloatingDragMenu/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -16,9 +17,10 @@ export interface Props {
     targetCellPosition?: number;
     getEditorContainerWidth: GetEditorContainerWidth;
     canDrag?: boolean;
+    editorAnalyticsAPI?: EditorAnalyticsAPI;
 }
 declare const FloatingDragMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, }: Props): JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, }: Props): JSX.Element | null;
     displayName: string;
 };
 export default FloatingDragMenu;

package/dist/types/plugins/table/utils/drag-menu.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, DropdownOptionT, GetEditorContainerWidth, IconProps } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
@@ -8,4 +9,4 @@ export interface DragMenuConfig extends DropdownOptionT<Command> {
     icon?: React.ComponentType<IconProps>;
     keymap?: string;
 }
-export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect) => DragMenuConfig[];
+export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI) => DragMenuConfig[];

package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/commands-with-analytics.d.ts

@@ -0,0 +1,6 @@
+import { TABLE_STATUS } from '@atlaskit/editor-common/analytics';
+import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { DraggableType } from '../../types';
+export declare const clearDropTargetWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP, sourceType: DraggableType, status: TABLE_STATUS.CANCELLED | TABLE_STATUS.INVALID, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;
+export declare const moveSourceWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP, sourceType: DraggableType, sourceIndex: number, targetIndex: number, tr?: Transaction) => import("@atlaskit/editor-common/types").Command;

package/dist/types-ts4.5/plugins/table/pm-plugins/drag-and-drop/plugin.d.ts

@@ -1,4 +1,5 @@
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { DragAndDropPluginState } from './types';
-export declare const createPlugin: (dispatch: Dispatch, eventDispatcher: EventDispatcher) => SafePlugin<DragAndDropPluginState>;
+export declare const createPlugin: (dispatch: Dispatch, eventDispatcher: EventDispatcher, editorAnalyticsAPI?: EditorAnalyticsAPI) => SafePlugin<DragAndDropPluginState>;

package/dist/types-ts4.5/plugins/table/ui/FloatingDragMenu/DragMenu.d.ts

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -18,6 +19,7 @@ type DragMenuProps = {
     pluginConfig?: PluginConfig;
     getEditorContainerWidth: GetEditorContainerWidth;
     canDrag?: boolean;
+    editorAnalyticsAPI?: EditorAnalyticsAPI;
 };
-export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, canDrag, }: DragMenuProps) => jsx.JSX.Element | null;
+export declare const DragMenu: ({ direction, index, isOpen, editorView, tableNode, mountPoint, boundariesElement, scrollableElement, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, }: DragMenuProps) => jsx.JSX.Element | null;
 export {};

package/dist/types-ts4.5/plugins/table/ui/FloatingDragMenu/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -16,9 +17,10 @@ export interface Props {
     targetCellPosition?: number;
     getEditorContainerWidth: GetEditorContainerWidth;
     canDrag?: boolean;
+    editorAnalyticsAPI?: EditorAnalyticsAPI;
 }
 declare const FloatingDragMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, }: Props): JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, }: Props): JSX.Element | null;
     displayName: string;
 };
 export default FloatingDragMenu;

package/dist/types-ts4.5/plugins/table/utils/drag-menu.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, DropdownOptionT, GetEditorContainerWidth, IconProps } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
@@ -8,4 +9,4 @@ export interface DragMenuConfig extends DropdownOptionT<Command> {
     icon?: React.ComponentType<IconProps>;
     keymap?: string;
 }
-export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect) => DragMenuConfig[];
+export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI) => DragMenuConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.5.13",
+  "version": "5.6.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.1.1",
     "@atlaskit/custom-steps": "^0.0.9",
-    "@atlaskit/editor-common": "^76.26.0",
+    "@atlaskit/editor-common": "^76.27.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",

package/src/__tests__/unit/analytics.ts

@@ -1,5 +1,5 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { INPUT_METHOD, TABLE_STATUS } from '@atlaskit/editor-common/analytics';
 import type { DocBuilder } from '@atlaskit/editor-common/types';
 // eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
@@ -8,6 +8,7 @@ import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
@@ -49,6 +50,11 @@ import {
   toggleTableLayoutWithAnalytics,
 } from '../../plugins/table/commands-with-analytics';
 import { handleCut } from '../../plugins/table/event-handlers';
+import { setDropTarget } from '../../plugins/table/pm-plugins/drag-and-drop/commands';
+import {
+  clearDropTargetWithAnalytics,
+  moveSourceWithAnalytics,
+} from '../../plugins/table/pm-plugins/drag-and-drop/commands-with-analytics';
 import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
 import { replaceSelectedTable } from '../../plugins/table/transforms';
 import type { PluginConfig } from '../../plugins/table/types';
@@ -77,9 +83,10 @@ const analyticsPluginFake = () => ({
 
 describe('Table analytic events', () => {
   let editorAnalyticsAPIFake: EditorAnalyticsAPI;
-  const analyticFireMock = jest.fn().mockReturnValue(jest.fn());
+  let analyticFireMock: jest.Mock;
 
   beforeEach(() => {
+    analyticFireMock = jest.fn().mockReturnValue(jest.fn());
     editorAnalyticsAPIFake = {
       attachAnalyticsEvent: analyticFireMock,
       fireAnalyticsEvent: jest.fn(),
@@ -108,7 +115,7 @@ describe('Table analytic events', () => {
         .add(widthPlugin)
         .add(guidelinePlugin)
         .add(selectionPlugin)
-        .add([tablePlugin, { tableOptions }]),
+        .add([tablePlugin, { tableOptions, dragAndDropEnabled: true }]),
       pluginKey,
     });
 
@@ -741,4 +748,101 @@ describe('Table analytic events', () => {
       });
     });
   });
+
+  describe('track moved', () => {
+    it.each([
+      ['Column', INPUT_METHOD.TABLE_CONTEXT_MENU, 0, 1, TABLE_STATUS.SUCCESS],
+      ['Column', INPUT_METHOD.TABLE_CONTEXT_MENU, 2, 0, TABLE_STATUS.SUCCESS],
+      ['Column', INPUT_METHOD.TABLE_CONTEXT_MENU, 2, 2, TABLE_STATUS.CANCELLED],
+
+      ['Row', INPUT_METHOD.TABLE_CONTEXT_MENU, 0, 1, TABLE_STATUS.SUCCESS],
+      ['Row', INPUT_METHOD.TABLE_CONTEXT_MENU, 2, 0, TABLE_STATUS.SUCCESS],
+      ['Row', INPUT_METHOD.TABLE_CONTEXT_MENU, 2, 2, TABLE_STATUS.CANCELLED],
+
+      ['Column', INPUT_METHOD.DRAG_AND_DROP, 0, 1, TABLE_STATUS.SUCCESS],
+      ['Column', INPUT_METHOD.DRAG_AND_DROP, 2, 0, TABLE_STATUS.SUCCESS],
+      ['Column', INPUT_METHOD.DRAG_AND_DROP, 2, 2, TABLE_STATUS.CANCELLED],
+
+      ['Row', INPUT_METHOD.DRAG_AND_DROP, 0, 1, TABLE_STATUS.SUCCESS],
+      ['Row', INPUT_METHOD.DRAG_AND_DROP, 2, 0, TABLE_STATUS.SUCCESS],
+      ['Row', INPUT_METHOD.DRAG_AND_DROP, 2, 2, TABLE_STATUS.CANCELLED],
+    ])(
+      'should fire v3 analytics for %s using input %s moving index from %i to %i with status %s',
+      (type, inputMethod, sourceIndex, targetIndex, status) => {
+        const { editorView } = editor(defaultTableDoc);
+        moveSourceWithAnalytics(editorAnalyticsAPIFake)(
+          inputMethod as
+            | INPUT_METHOD.TABLE_CONTEXT_MENU
+            | INPUT_METHOD.DRAG_AND_DROP,
+          type === 'Row' ? 'table-row' : 'table-column',
+          sourceIndex,
+          targetIndex,
+        )(editorView.state, editorView.dispatch);
+
+        expect(analyticFireMock).toHaveBeenCalledWith({
+          action: `moved${type}`,
+          actionSubject: 'table',
+          actionSubjectId: null,
+          attributes: expect.objectContaining({
+            inputMethod,
+            count: 1,
+            distance: targetIndex - sourceIndex,
+            status,
+            totalRowCount: 3,
+            totalColumnCount: 3,
+          }),
+          eventType: 'track',
+        });
+      },
+    );
+
+    describe('track moved', () => {
+      let editorView: EditorView;
+
+      beforeEach(() => {
+        editorView = editor(defaultTableDoc).editorView;
+        // Note: we cannot clean a drop target, util one has been set.
+        setDropTarget('column', 0)(editorView.state, editorView.dispatch);
+      });
+
+      it.each([
+        ['Column', INPUT_METHOD.TABLE_CONTEXT_MENU, TABLE_STATUS.CANCELLED],
+        ['Column', INPUT_METHOD.TABLE_CONTEXT_MENU, TABLE_STATUS.INVALID],
+        ['Row', INPUT_METHOD.TABLE_CONTEXT_MENU, TABLE_STATUS.CANCELLED],
+        ['Row', INPUT_METHOD.TABLE_CONTEXT_MENU, TABLE_STATUS.INVALID],
+
+        ['Column', INPUT_METHOD.DRAG_AND_DROP, TABLE_STATUS.CANCELLED],
+        ['Column', INPUT_METHOD.DRAG_AND_DROP, TABLE_STATUS.INVALID],
+        ['Row', INPUT_METHOD.DRAG_AND_DROP, TABLE_STATUS.CANCELLED],
+        ['Row', INPUT_METHOD.DRAG_AND_DROP, TABLE_STATUS.INVALID],
+      ])(
+        'should fire v3 analytics for %s using input %s with status %s',
+        (type, inputMethod, status) => {
+          // const { editorView } = editor(defaultTableDoc);
+          clearDropTargetWithAnalytics(editorAnalyticsAPIFake)(
+            inputMethod as
+              | INPUT_METHOD.TABLE_CONTEXT_MENU
+              | INPUT_METHOD.DRAG_AND_DROP,
+            type === 'Row' ? 'table-row' : 'table-column',
+            status as TABLE_STATUS.CANCELLED | TABLE_STATUS.INVALID,
+          )(editorView.state, editorView.dispatch);
+
+          expect(analyticFireMock).toHaveBeenCalledWith({
+            action: `moved${type}`,
+            actionSubject: 'table',
+            actionSubjectId: null,
+            attributes: expect.objectContaining({
+              inputMethod,
+              count: 1,
+              distance: 0,
+              status,
+              totalRowCount: 3,
+              totalColumnCount: 3,
+            }),
+            eventType: 'track',
+          });
+        },
+      );
+    });
+  });
 });

package/src/plugins/table/index.tsx

@@ -295,9 +295,13 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         },
         {
           name: 'tableDragAndDrop',
-          plugin: ({ dispatch, eventDispatcher }) =>
+          plugin: ({ dispatch, eventDispatcher, dispatchAnalyticsEvent }) =>
             options?.dragAndDropEnabled
-              ? createDragAndDropPlugin(dispatch, eventDispatcher)
+              ? createDragAndDropPlugin(
+                  dispatch,
+                  eventDispatcher,
+                  editorAnalyticsAPI,
+                )
               : undefined,
         },
         {
@@ -510,6 +514,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       isOpen={!!dragAndDropState?.isDragMenuOpen && !isResizing}
                       canDrag={dragAndDropState?.canDrag}
                       getEditorContainerWidth={defaultGetEditorContainerWidth}
+                      editorAnalyticsAPI={editorAnalyticsAPI}
                     />
                   )}
                   {allowControls && !isDragAndDropEnabled && !isResizing && (

package/src/plugins/table/pm-plugins/drag-and-drop/commands-with-analytics.ts

@@ -0,0 +1,100 @@
+import {
+  ACTION_SUBJECT,
+  EVENT_TYPE,
+  TABLE_ACTION,
+  TABLE_STATUS,
+} from '@atlaskit/editor-common/analytics';
+import type {
+  EditorAnalyticsAPI,
+  INPUT_METHOD,
+} from '@atlaskit/editor-common/analytics';
+import type {
+  EditorState,
+  Transaction,
+} from '@atlaskit/editor-prosemirror/state';
+
+import type { DraggableType } from '../../types';
+import { getSelectedTableInfo } from '../../utils';
+import { withEditorAnalyticsAPI } from '../../utils/analytics';
+
+import { clearDropTarget, moveSource } from './commands';
+
+export const clearDropTargetWithAnalytics =
+  (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
+  (
+    inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP,
+    sourceType: DraggableType,
+    status: TABLE_STATUS.CANCELLED | TABLE_STATUS.INVALID,
+    tr?: Transaction,
+  ) => {
+    return withEditorAnalyticsAPI(({ selection }: EditorState) => {
+      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: EditorAnalyticsAPI | undefined | null) =>
+  (
+    inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP,
+    sourceType: DraggableType,
+    sourceIndex: number,
+    targetIndex: number,
+    tr?: Transaction,
+  ) => {
+    return withEditorAnalyticsAPI(({ selection }: EditorState) => {
+      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/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts

@@ -1,3 +1,5 @@
+import { INPUT_METHOD, TABLE_STATUS } from '@atlaskit/editor-common/analytics';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type {
   Dispatch,
   EventDispatcher,
@@ -19,12 +21,11 @@ import { pluginKey as tablePluginKey } from '../plugin-key';
 import { insertColgroupFromNode } from '../table-resizing/utils';
 
 import { DragAndDropActionType } from './actions';
+import { clearDropTarget, setDropTarget, toggleDragMenu } from './commands';
 import {
-  clearDropTarget,
-  moveSource,
-  setDropTarget,
-  toggleDragMenu,
-} from './commands';
+  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';
@@ -34,6 +35,7 @@ import { getDraggableDataFromEvent } from './utils/monitor';
 export const createPlugin = (
   dispatch: Dispatch,
   eventDispatcher: EventDispatcher,
+  editorAnalyticsAPI?: EditorAnalyticsAPI,
 ) => {
   return new SafePlugin({
     state: createPluginState(dispatch, (state) => ({
@@ -195,8 +197,20 @@ export const createPlugin = (
 
             // 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;
+              // 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?.source?.data?.type === 'table-row' ||
+                event?.source?.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 {
@@ -223,14 +237,21 @@ export const createPlugin = (
                   : 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(
+              moveSourceWithAnalytics(editorAnalyticsAPI)(
+                INPUT_METHOD.DRAG_AND_DROP,
                 sourceType,
                 sourceIndex,
                 targetAdjustedIndex + (direction === -1 ? 0 : -1),

package/src/plugins/table/ui/FloatingDragMenu/DragMenu.tsx

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type {
   Command,
   GetEditorContainerWidth,
@@ -51,6 +52,7 @@ type DragMenuProps = {
   pluginConfig?: PluginConfig;
   getEditorContainerWidth: GetEditorContainerWidth;
   canDrag?: boolean;
+  editorAnalyticsAPI?: EditorAnalyticsAPI;
 };
 
 const groupedDragMenuConfig = [
@@ -122,6 +124,7 @@ export const DragMenu = ({
   targetCellPosition,
   getEditorContainerWidth,
   canDrag,
+  editorAnalyticsAPI,
 }: DragMenuProps) => {
   const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
 
@@ -149,6 +152,7 @@ export const DragMenu = ({
     index,
     targetCellPosition,
     selectionRect,
+    editorAnalyticsAPI,
   );
 
   const { menuItems, menuCallback } = convertToDropdownItems(dragMenuConfig);

package/src/plugins/table/ui/FloatingDragMenu/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { Popup } from '@atlaskit/editor-common/ui';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -25,6 +26,7 @@ export interface Props {
   targetCellPosition?: number;
   getEditorContainerWidth: GetEditorContainerWidth;
   canDrag?: boolean;
+  editorAnalyticsAPI?: EditorAnalyticsAPI;
 }
 
 const FloatingDragMenu = ({
@@ -39,6 +41,7 @@ const FloatingDragMenu = ({
   targetCellPosition,
   getEditorContainerWidth,
   canDrag,
+  editorAnalyticsAPI,
 }: Props) => {
   if (
     !isOpen ||
@@ -89,6 +92,7 @@ const FloatingDragMenu = ({
         targetCellPosition={targetCellPosition}
         getEditorContainerWidth={getEditorContainerWidth}
         canDrag={canDrag}
+        editorAnalyticsAPI={editorAnalyticsAPI}
       />
     </Popup>
   );