@atlaskit/editor-plugin-table 5.4.5 → 5.4.7

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -11,20 +11,15 @@ import {
   EVENT_TYPE,
   TABLE_ACTION,
 } from '@atlaskit/editor-common/analytics';
-import type { AnalyticsDispatch } from '@atlaskit/editor-common/analytics';
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import { createDispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import type {
   EditorContainerWidth,
   GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
-import {
-  analyticsEventKey,
-  browser,
-  isValidPosition,
-} from '@atlaskit/editor-common/utils';
+import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
@@ -106,6 +101,7 @@ export interface ComponentProps {
   ordering: TableColumnOrdering;
   isResizing?: boolean;
   getEditorFeatureFlags: GetEditorFeatureFlags;
+  dispatchAnalyticsEvent: DispatchAnalyticsEvent;
   pluginInjectionApi?: PluginInjectionAPI;
 }
 
@@ -830,24 +826,21 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   };
 
   private setTimerToSendInitialOverflowCaptured = (isOverflowing: boolean) => {
-    const { eventDispatcher, containerWidth, options } = this.props;
-    const dispatch: AnalyticsDispatch = createDispatch(eventDispatcher);
+    const { dispatchAnalyticsEvent, containerWidth, options } = this.props;
     const parentWidth = this.state?.parentWidth || 0;
 
     this.initialOverflowCaptureTimerId = setTimeout(() => {
-      dispatch(analyticsEventKey, {
-        payload: {
-          action: TABLE_ACTION.INITIAL_OVERFLOW_CAPTURED,
-          actionSubject: ACTION_SUBJECT.TABLE,
-          actionSubjectId: null,
-          eventType: EVENT_TYPE.TRACK,
-          attributes: {
-            editorWidth: containerWidth.width || 0,
-            isOverflowing,
-            tableResizingEnabled: options?.isTableResizingEnabled || false,
-            width: this.node.attrs.width || 0,
-            parentWidth,
-          },
+      dispatchAnalyticsEvent({
+        action: TABLE_ACTION.INITIAL_OVERFLOW_CAPTURED,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        actionSubjectId: null,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          editorWidth: containerWidth.width || 0,
+          isOverflowing,
+          tableResizingEnabled: options?.isTableResizingEnabled || false,
+          width: this.node.attrs.width || 0,
+          parentWidth,
         },
       });
 

package/src/plugins/table/nodeviews/TableResizer.tsx

@@ -214,9 +214,8 @@ export const TableResizer = ({
       dispatch,
       state: { tr },
     } = editorView;
-    tr.setMeta(tableWidthPluginKey, { resizing: true });
     displayGapCursor(false);
-
+    tr.setMeta(tableWidthPluginKey, { resizing: true });
     tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED,
     });

package/src/plugins/table/nodeviews/table.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
@@ -256,6 +257,7 @@ export default class TableView extends ReactNodeView<Props> {
               containerWidth={containerWidth!}
               contentDOM={forwardRef}
               getEditorFeatureFlags={props.getEditorFeatureFlags}
+              dispatchAnalyticsEvent={props.dispatchAnalyticsEvent}
               pluginInjectionApi={props.pluginInjectionApi}
             />
           );
@@ -344,6 +346,7 @@ export const createTableView = (
   eventDispatcher: EventDispatcher,
   getEditorContainerWidth: GetEditorContainerWidth,
   getEditorFeatureFlags: GetEditorFeatureFlags,
+  dispatchAnalyticsEvent: DispatchAnalyticsEvent,
   pluginInjectionApi?: PluginInjectionAPI,
 ): NodeView => {
   const {
@@ -373,6 +376,7 @@ export const createTableView = (
     },
     getEditorContainerWidth,
     getEditorFeatureFlags,
+    dispatchAnalyticsEvent,
     hasIntlContext,
     pluginInjectionApi,
   }).init();

package/src/plugins/table/nodeviews/types.ts

@@ -1,3 +1,4 @@
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
 import type {
@@ -28,6 +29,7 @@ export interface Props {
   options?: TableOptions;
   getEditorContainerWidth: GetEditorContainerWidth;
   getEditorFeatureFlags: GetEditorFeatureFlags;
+  dispatchAnalyticsEvent: DispatchAnalyticsEvent;
   hasIntlContext: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
 }

package/src/plugins/table/pm-plugins/analytics/actions.ts

@@ -0,0 +1,23 @@
+import type { RowOrColumnMovedState } from './types';
+
+export enum AnalyticPluginTypes {
+  UpdateOverflowTriggerNameAction,
+  UpdateRowOrColumnMovedAction,
+  RemoveRowOrColumnMovedAction,
+  RemoveOverFlowTriggerNameAction,
+  UpdateRowOrColumnMovedAndOverflowTrigger,
+}
+
+export type UpdateRowOrColumnMovedAction = {
+  type: AnalyticPluginTypes.UpdateRowOrColumnMovedAction;
+  data: RowOrColumnMovedState;
+};
+
+export type RemoveRowOrColumnMovedAction = {
+  type: AnalyticPluginTypes.RemoveRowOrColumnMovedAction;
+  data: undefined;
+};
+
+export type AnalyticPluginAction =
+  | UpdateRowOrColumnMovedAction
+  | RemoveRowOrColumnMovedAction;

package/src/plugins/table/pm-plugins/analytics/commands.ts

@@ -0,0 +1,53 @@
+import type {
+  EditorState,
+  Transaction,
+} from '@atlaskit/editor-prosemirror/state';
+
+import { AnalyticPluginTypes } from './actions';
+import { createCommand, getPluginState } from './plugin-factory';
+import { pluginKey } from './plugin-key';
+import type { ActionType, RowOrColumnMovedState } from './types';
+import { getMovedPayload } from './utils/moved-event';
+
+export const updateRowOrColumnMoved = (
+  nextState: Omit<RowOrColumnMovedState, 'currentActions'>,
+  nextAction: ActionType,
+) =>
+  createCommand(
+    (state) => {
+      const { rowOrColumnMoved } = getPluginState(state);
+      const data = getMovedPayload(nextState, nextAction, rowOrColumnMoved);
+
+      return {
+        type: AnalyticPluginTypes.UpdateRowOrColumnMovedAction,
+        data,
+      };
+    },
+    (tr) => tr.setMeta('addToHistory', false),
+  );
+
+// --- transforms, prefer these over commands to avoid an extra 'dispatch'
+export const resetRowOrColumnMovedTransform = () => (tr: Transaction) => {
+  const payload = {
+    type: AnalyticPluginTypes.RemoveRowOrColumnMovedAction,
+  };
+
+  return tr.setMeta(pluginKey, payload);
+};
+
+export const updateRowOrColumnMovedTransform =
+  (
+    nextState: Omit<RowOrColumnMovedState, 'currentActions'>,
+    nextAction: ActionType,
+  ) =>
+  (state: EditorState, tr: Transaction) => {
+    const { rowOrColumnMoved } = getPluginState(state);
+    const data = getMovedPayload(nextState, nextAction, rowOrColumnMoved);
+
+    const payload = {
+      type: AnalyticPluginTypes.UpdateRowOrColumnMovedAction,
+      data,
+    };
+
+    return tr.setMeta(pluginKey, payload);
+  };

package/src/plugins/table/pm-plugins/analytics/plugin-factory.ts

@@ -0,0 +1,7 @@
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+
+import { pluginKey } from './plugin-key';
+import { reducer } from './reducer';
+
+export const { createPluginState, createCommand, getPluginState } =
+  pluginFactory(pluginKey, reducer);

package/src/plugins/table/pm-plugins/analytics/plugin-key.ts

@@ -0,0 +1,7 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+
+import type { AnalyticPluginState } from './types';
+
+export const pluginKey = new PluginKey<AnalyticPluginState>(
+  'tableAnalyticPlugin',
+);

package/src/plugins/table/pm-plugins/analytics/plugin.ts

@@ -0,0 +1,98 @@
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import {
+  ACTION_SUBJECT,
+  EVENT_TYPE,
+  TABLE_ACTION,
+} from '@atlaskit/editor-common/analytics';
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+
+import {
+  countCellsInSlice,
+  getTableElementMoveTypeBySlice,
+  getTableSelectionType,
+  isInsideFirstCellOfRowOrColumn,
+} from '../../commands/misc';
+
+import {
+  resetRowOrColumnMovedTransform,
+  updateRowOrColumnMoved,
+} from './commands';
+import { createPluginState } from './plugin-factory';
+import { pluginKey } from './plugin-key';
+import { defaultState } from './types';
+
+export const createPlugin = (
+  dispatch: Dispatch,
+  dispatchAnalyticsEvent: DispatchAnalyticsEvent,
+) =>
+  new SafePlugin({
+    key: pluginKey,
+    state: createPluginState(dispatch, defaultState),
+    appendTransaction: (transactions, oldState, newState) => {
+      const tr = transactions.find((tr) =>
+        tr.getMeta(pluginKey)?.data?.currentActions?.includes('pasted'),
+      );
+
+      if (tr) {
+        dispatchAnalyticsEvent({
+          action: TABLE_ACTION.ROW_OR_COLUMN_MOVED,
+          actionSubject: ACTION_SUBJECT.TABLE,
+          actionSubjectId: null,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            type: tr.getMeta(pluginKey)?.data?.type,
+          },
+        });
+        return resetRowOrColumnMovedTransform()(tr);
+      }
+
+      return undefined;
+    },
+    props: {
+      handlePaste: ({ state, dispatch }, event, slice) => {
+        if (
+          getBooleanFF('platform.editor.table.analytics-plugin-moved-event')
+        ) {
+          const { schema } = state;
+          const type = getTableElementMoveTypeBySlice(slice, state);
+
+          // if the selection wasn't in the first cell of a row or column, don't count it
+          if (!isInsideFirstCellOfRowOrColumn(state.selection, type)) {
+            return;
+          }
+
+          const count = countCellsInSlice(slice, schema, type);
+
+          updateRowOrColumnMoved(
+            {
+              numberOfCells: count,
+              type,
+            },
+            'pasted',
+          )(state, dispatch);
+        }
+      },
+      transformCopied: (slice, { state, dispatch }) => {
+        if (
+          getBooleanFF('platform.editor.table.analytics-plugin-moved-event')
+        ) {
+          const { schema } = state;
+
+          const type = getTableSelectionType(state.selection);
+          const count = countCellsInSlice(slice, schema, type);
+
+          updateRowOrColumnMoved(
+            {
+              numberOfCells: count,
+              type,
+            },
+            'copyOrCut',
+          )(state, dispatch);
+        }
+
+        return slice;
+      },
+    },
+  });

package/src/plugins/table/pm-plugins/analytics/reducer.ts

@@ -0,0 +1,27 @@
+import { AnalyticPluginTypes } from './actions';
+import type { AnalyticPluginAction } from './actions';
+import type { AnalyticPluginState } from './types';
+import { defaultState } from './types';
+
+export const reducer = (
+  state: AnalyticPluginState,
+  action: AnalyticPluginAction,
+): AnalyticPluginState => {
+  switch (action.type) {
+    case AnalyticPluginTypes.UpdateRowOrColumnMovedAction:
+      return {
+        ...state,
+        rowOrColumnMoved: {
+          ...state.rowOrColumnMoved,
+          ...action.data,
+        },
+      };
+    case AnalyticPluginTypes.RemoveRowOrColumnMovedAction:
+      return {
+        ...state,
+        rowOrColumnMoved: defaultState.rowOrColumnMoved,
+      };
+    default:
+      return state;
+  }
+};

package/src/plugins/table/pm-plugins/analytics/types.ts

@@ -0,0 +1,20 @@
+export type ActionType = 'none' | 'addRowOrColumn' | 'copyOrCut' | 'pasted';
+
+export type RowOrColumnMovedState = {
+  type?: 'row' | 'column';
+  /** used to confirm if same number of cells was copied and pasted */
+  numberOfCells?: number;
+  currentActions: Array<ActionType>;
+};
+
+export type AnalyticPluginState = {
+  rowOrColumnMoved: RowOrColumnMovedState;
+};
+
+export const defaultState = {
+  rowOrColumnMoved: {
+    type: undefined,
+    numberOfCells: undefined,
+    currentActions: [],
+  },
+} as AnalyticPluginState;

package/src/plugins/table/pm-plugins/analytics/utils/moved-event.ts

@@ -0,0 +1,51 @@
+import type { ActionType, RowOrColumnMovedState } from '../types';
+import { defaultState } from '../types';
+
+const getNextActionType = (
+  nextState: Omit<RowOrColumnMovedState, 'currentActions'>,
+  nextAction: ActionType,
+  prevState?: RowOrColumnMovedState,
+) => {
+  if (nextAction === 'pasted') {
+    if (
+      prevState &&
+      prevState.currentActions.includes('copyOrCut') &&
+      prevState.currentActions.includes('addRowOrColumn') &&
+      prevState.numberOfCells === nextState.numberOfCells &&
+      prevState.type === nextState.type
+    ) {
+      return 'pasted';
+    }
+    return 'none';
+  }
+  return nextAction;
+};
+
+export const getMovedPayload = (
+  nextState: Omit<RowOrColumnMovedState, 'currentActions'>,
+  nextAction: ActionType,
+  prevState: RowOrColumnMovedState,
+) => {
+  const nextActionType = getNextActionType(nextState, nextAction, prevState);
+
+  if (nextActionType === 'none') {
+    return defaultState.rowOrColumnMoved;
+  }
+
+  // a new workflow has started in the opposite axis (e.g. inserted a row, but copied a column) remove old state
+  if (prevState.type !== nextState.type) {
+    return {
+      currentActions: [nextActionType],
+      numberOfCells: nextState?.numberOfCells,
+      type: nextState.type,
+    };
+  }
+
+  return {
+    currentActions: prevState.currentActions.includes(nextActionType)
+      ? prevState.currentActions
+      : [...prevState.currentActions, nextActionType],
+    numberOfCells: nextState?.numberOfCells || prevState.numberOfCells,
+    type: nextState?.type,
+  };
+};

package/src/plugins/table/pm-plugins/main.ts

@@ -368,6 +368,7 @@ export const createPlugin = (
             eventDispatcher,
             getEditorContainerWidth,
             getEditorFeatureFlags,
+            dispatchAnalyticsEvent,
             pluginInjectionApi,
           ),
         tableRow: (node, view, getPos) =>

package/src/plugins/table/pm-plugins/table-analytics.ts

@@ -21,7 +21,7 @@ type TableAnalyticsPluginState = {
 };
 
 export const pluginKey = new PluginKey<TableAnalyticsPluginState>(
-  'tableAnalyticsPlugin',
+  'tableOverflowAnalyticsPlugin',
 );
 
 export const META_KEYS = {

package/tsconfig.dev.json

@@ -96,6 +96,9 @@
     {
       "path": "../../media/media-integration-test-helpers/tsconfig.app.json"
     },
+    {
+      "path": "../../platform/feature-flags/tsconfig.app.json"
+    },
     {
       "path": "../synchrony-test-helpers/tsconfig.app.json"
     },
@@ -108,9 +111,6 @@
     {
       "path": "../../../build/test-tooling/visual-regression/tsconfig.app.json"
     },
-    {
-      "path": "../../../build/test-tooling/webdriver-runner/tsconfig.app.json"
-    },
     {
       "path": "../../platform/feature-flags-test-utils/tsconfig.app.json"
     }