@atlaskit/editor-plugin-table 5.5.13 → 5.6.1

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>
   );

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;
         }