@atlaskit/editor-plugin-table 5.5.12 → 5.6.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/__tests__/unit/ui/FloatingDragMenu.tsx

@@ -33,7 +33,7 @@ import {
 import { ffTest } from '@atlassian/feature-flags-test-utils';
 
 import tablePlugin from '../../../plugins/table-plugin';
-import FloatingDragMenu from '../../../plugins/table/ui/FloatingDragMenu';
+import { DragMenu } from '../../../plugins/table/ui/FloatingDragMenu/DragMenu';
 
 describe('FloatingDragMenu', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -72,14 +72,13 @@ describe('FloatingDragMenu', () => {
               editorRef,
             }}
           >
-            <FloatingDragMenu
+            <DragMenu
               editorView={editorView}
-              isOpen
+              isOpen={true}
               getEditorContainerWidth={jest.fn()}
               tableRef={tableRef as HTMLTableElement}
               tableNode={tableNode?.node}
               direction="row"
-              targetCellPosition={1}
             />
           </ReactEditorViewContext.Provider>,
         );
@@ -98,14 +97,13 @@ describe('FloatingDragMenu', () => {
               editorRef,
             }}
           >
-            <FloatingDragMenu
+            <DragMenu
               editorView={editorView}
-              isOpen
+              isOpen={true}
               getEditorContainerWidth={jest.fn()}
               tableRef={tableRef as HTMLTableElement}
               tableNode={tableNode?.node}
               direction="row"
-              targetCellPosition={1}
             />
           </ReactEditorViewContext.Provider>,
         );
@@ -127,14 +125,14 @@ describe('FloatingDragMenu', () => {
             editorRef,
           }}
         >
-          <FloatingDragMenu
+          <div id="drag-handle-button-row">dragmenu anchor</div>
+          <DragMenu
             editorView={editorView}
-            isOpen
+            isOpen={true}
             getEditorContainerWidth={jest.fn()}
             tableRef={tableRef as HTMLTableElement}
             tableNode={tableNode?.node}
             direction="row"
-            targetCellPosition={1}
           />
         </ReactEditorViewContext.Provider>,
       );
@@ -163,14 +161,13 @@ describe('FloatingDragMenu', () => {
             editorRef,
           }}
         >
-          <FloatingDragMenu
+          <DragMenu
             editorView={editorView}
-            isOpen
+            isOpen={true}
             getEditorContainerWidth={jest.fn()}
             tableRef={tableRef as HTMLTableElement}
             tableNode={tableNode?.node}
             direction="column"
-            targetCellPosition={1}
           />
         </ReactEditorViewContext.Provider>,
       );

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

@@ -33,9 +33,11 @@ type DragHandleProps = {
   onMouseUp?: MouseEventHandler;
   editorView: EditorView;
   canDrag?: boolean;
+  isDragMenuTarget: boolean; // this is identify which current handle component is
 };
 
 export const DragHandle = ({
+  isDragMenuTarget,
   tableLocalId,
   direction = 'row',
   appearance = 'default',
@@ -131,9 +133,15 @@ export const DragHandle = ({
     canDrag,
   ]);
 
+  const showDragMenuAnchorId =
+    direction === 'row'
+      ? 'drag-handle-button-row'
+      : 'drag-handle-button-column';
+
   return (
     <>
       <button
+        id={isDragMenuTarget ? showDragMenuAnchorId : undefined}
         className={classnames(
           ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
           appearance,

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,12 +1,12 @@
 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';
-import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 
 import type { TableDirection } from '../../types';
 import { dragMenuDropdownWidth } from '../consts';
@@ -26,6 +26,7 @@ export interface Props {
   targetCellPosition?: number;
   getEditorContainerWidth: GetEditorContainerWidth;
   canDrag?: boolean;
+  editorAnalyticsAPI?: EditorAnalyticsAPI;
 }
 
 const FloatingDragMenu = ({
@@ -34,13 +35,13 @@ const FloatingDragMenu = ({
   scrollableElement,
   editorView,
   isOpen,
-  tableRef,
   tableNode,
   direction,
   index,
   targetCellPosition,
   getEditorContainerWidth,
   canDrag,
+  editorAnalyticsAPI,
 }: Props) => {
   if (
     !isOpen ||
@@ -50,24 +51,26 @@ const FloatingDragMenu = ({
     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?.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 (
     <Popup
-      alignX={direction === 'row' ? 'left' : 'center'}
-      alignY="top"
-      target={targetCellRef as HTMLElement}
+      alignX={direction === 'row' ? 'right' : undefined}
+      alignY={direction === 'row' ? 'start' : undefined}
+      target={targetHandleRef as HTMLElement}
       mountTo={mountPoint}
       boundariesElement={boundariesElement}
       scrollableElement={scrollableElement}
@@ -89,6 +92,7 @@ const FloatingDragMenu = ({
         targetCellPosition={targetCellPosition}
         getEditorContainerWidth={getEditorContainerWidth}
         canDrag={canDrag}
+        editorAnalyticsAPI={editorAnalyticsAPI}
       />
     </Popup>
   );

package/src/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -217,13 +217,10 @@ 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'}
         >
           <DragHandle
+            isDragMenuTarget={!isHover}
             direction="column"
             tableLocalId={localId || ''}
             indexes={indexes}

package/src/plugins/table/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -239,13 +239,10 @@ 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'}
         >
           <DragHandle
+            isDragMenuTarget={!isHover}
             direction="row"
             tableLocalId={currentNodeLocalId}
             indexes={indexes}

package/src/plugins/table/utils/drag-menu.ts

@@ -1,4 +1,6 @@
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import {
   addColumnAfter,
   addColumnBefore,
@@ -34,7 +36,7 @@ import {
   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';
@@ -79,6 +81,7 @@ export const getDragMenuConfig = (
   index?: number,
   targetCellPosition?: number,
   selectionRect?: Rect,
+  editorAnalyticsAPI?: EditorAnalyticsAPI,
 ): DragMenuConfig[] => {
   const addOptions =
     direction === 'row'
@@ -234,11 +237,12 @@ export const getDragMenuConfig = (
       onClick: (state: EditorState, dispatch?: CommandDispatch) => {
         if (canMove(index)) {
           requestAnimationFrame(() => {
-            moveSource(
+            moveSourceWithAnalytics(editorAnalyticsAPI)(
+              INPUT_METHOD.TABLE_CONTEXT_MENU,
               `table-${direction}`,
               index!,
               index! + offset,
-            )(state, dispatch);
+            )(editorView.state, editorView.dispatch);
           });
           return true;
         }