@atlaskit/editor-plugin-table 5.4.6 → 5.4.8

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;
 }
 
@@ -487,28 +483,26 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
     const hasHeaderRow = containsHeaderRow(node);
     const rowControls = (
-      <div className={ClassName.ROW_CONTROLS_WRAPPER}>
-        <TableFloatingControls
-          editorView={view}
-          tableRef={tableRef}
-          tableNode={node}
-          tableActive={tableActive}
-          hoveredRows={hoveredRows}
-          hoveredCell={hoveredCell}
-          isInDanger={isInDanger}
-          isResizing={isResizing}
-          isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
-          isHeaderRowEnabled={isHeaderRowEnabled}
-          isDragAndDropEnabled={isDragAndDropEnabled}
-          ordering={ordering}
-          isHeaderColumnEnabled={isHeaderColumnEnabled}
-          hasHeaderRow={hasHeaderRow}
-          // pass `selection` and `tableHeight` to control re-render
-          selection={view.state.selection}
-          headerRowHeight={headerRow ? headerRow.offsetHeight : undefined}
-          stickyHeader={this.state.stickyHeader}
-        />
-      </div>
+      <TableFloatingControls
+        editorView={view}
+        tableRef={tableRef}
+        tableNode={node}
+        tableActive={tableActive}
+        hoveredRows={hoveredRows}
+        hoveredCell={hoveredCell}
+        isInDanger={isInDanger}
+        isResizing={isResizing}
+        isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
+        isHeaderRowEnabled={isHeaderRowEnabled}
+        isDragAndDropEnabled={isDragAndDropEnabled}
+        ordering={ordering}
+        isHeaderColumnEnabled={isHeaderColumnEnabled}
+        hasHeaderRow={hasHeaderRow}
+        // pass `selection` and `tableHeight` to control re-render
+        selection={view.state.selection}
+        headerRowHeight={headerRow ? headerRow.offsetHeight : undefined}
+        stickyHeader={this.state.stickyHeader}
+      />
     );
 
     const colControls = isDragAndDropEnabled ? (
@@ -830,24 +824,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/decorations/plugin.ts

@@ -8,7 +8,6 @@ import type {
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { pluginKey as tablePluginKey } from '../plugin-key';
 import { pluginKey as tableWidthPluginKey } from '../table-width';
@@ -31,11 +30,13 @@ export const handleDocOrSelectionChanged = (
 ): DecorationSet => {
   const isResizing = tableWidthPluginKey.getState(newState)?.resizing;
   const wasResizing = tableWidthPluginKey.getState(oldState)?.resizing;
+  const { isDragAndDropEnabled = false } =
+    tablePluginKey.getState(newState) || {};
 
   const changedResizing = isResizing !== wasResizing;
 
   // Remove column controls when resizing and don't add column decoration controls when DnD enabled
-  if (isResizing || getBooleanFF('platform.editor.table.drag-and-drop')) {
+  if (isResizing) {
     return DecorationSet.empty;
   } else if (
     tr.docChanged ||
@@ -45,6 +46,9 @@ export const handleDocOrSelectionChanged = (
     return buildColumnControlsDecorations({
       decorationSet,
       tr,
+      options: {
+        isDragAndDropEnabled,
+      },
     });
   } else if (tr.selectionSet) {
     const isTransactionFromMouseClick =
@@ -70,6 +74,7 @@ export const createPlugin = () => {
 
       apply: (tr, decorationSet, oldState, newState) => {
         let pluginState = decorationSet;
+        // main table plugin --->
         const meta = tr.getMeta(tablePluginKey);
 
         if (meta && meta.data && meta.data.decorationSet) {

package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts

@@ -17,7 +17,10 @@ import {
 } from '../../../utils/decoration';
 
 import { composeDecorations } from './compose-decorations';
-import type { DecorationTransformer } from './types';
+import type {
+  BuildDecorationTransformerParams,
+  DecorationTransformer,
+} from './types';
 
 const isColumnSelected = (tr: Transaction | ReadonlyTransaction): boolean =>
   tr.selection instanceof CellSelection && tr.selection.isColSelection();
@@ -25,13 +28,12 @@ const isColumnSelected = (tr: Transaction | ReadonlyTransaction): boolean =>
 // @see: https://product-fabric.atlassian.net/browse/ED-3796
 const removeControlsHoverDecoration: DecorationTransformer = ({
   decorationSet,
-}): DecorationSet =>
-  decorationSet.remove(findControlsHoverDecoration(decorationSet));
+}) => decorationSet.remove(findControlsHoverDecoration(decorationSet));
 
 const maybeUpdateColumnSelectedDecoration: DecorationTransformer = ({
   decorationSet,
   tr,
-}): DecorationSet => {
+}) => {
   if (!isColumnSelected(tr)) {
     return decorationSet;
   }
@@ -47,10 +49,9 @@ const maybeUpdateColumnSelectedDecoration: DecorationTransformer = ({
 const maybeUpdateColumnControlsDecoration: DecorationTransformer = ({
   decorationSet,
   tr,
-}): DecorationSet => {
+}) => {
   const table = findTable(tr.selection);
 
-  // avoid re-drawing state if dnd decorations don't need to be updated
   if (!table) {
     return decorationSet;
   }
@@ -66,14 +67,13 @@ const maybeUpdateColumnControlsDecoration: DecorationTransformer = ({
 // @see: https://product-fabric.atlassian.net/browse/ED-7304
 const removeColumnControlsSelectedDecoration: DecorationTransformer = ({
   decorationSet,
-}): DecorationSet =>
-  decorationSet.remove(findColumnControlSelectedDecoration(decorationSet));
+}) => decorationSet.remove(findColumnControlSelectedDecoration(decorationSet));
 
 const hasColumnSelectedDecorations = (decorationSet: DecorationSet): boolean =>
   !!findColumnControlSelectedDecoration(decorationSet).length;
 
 export const maybeUpdateColumnControlsSelectedDecoration: DecorationTransformer =
-  ({ decorationSet, tr }): DecorationSet => {
+  ({ decorationSet, tr }) => {
     if (!hasColumnSelectedDecorations(decorationSet)) {
       return decorationSet;
     }
@@ -81,10 +81,19 @@ export const maybeUpdateColumnControlsSelectedDecoration: DecorationTransformer
     return removeColumnControlsSelectedDecoration({ decorationSet, tr });
   };
 
-export const buildColumnControlsDecorations: DecorationTransformer = ({
+export const buildColumnControlsDecorations = ({
   decorationSet,
   tr,
-}): DecorationSet => {
+  options,
+}: BuildDecorationTransformerParams): DecorationSet => {
+  if (options.isDragAndDropEnabled) {
+    return composeDecorations([
+      removeColumnControlsSelectedDecoration,
+      removeControlsHoverDecoration,
+      maybeUpdateColumnSelectedDecoration,
+    ])({ decorationSet, tr });
+  }
+
   return composeDecorations([
     removeColumnControlsSelectedDecoration,
     removeControlsHoverDecoration,

package/src/plugins/table/pm-plugins/decorations/utils/compose-decorations.ts

@@ -1,10 +1,8 @@
-import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-
-import { DecorationTransformer } from './types';
+import type { DecorationTransformer } from './types';
 
 export const composeDecorations =
   (transformers: Array<DecorationTransformer>): DecorationTransformer =>
-  ({ decorationSet, tr }): DecorationSet =>
+  ({ decorationSet, tr }) =>
     transformers.reduce(
       (decorationSet, transform) => transform({ decorationSet, tr }),
       decorationSet,

package/src/plugins/table/pm-plugins/decorations/utils/types.ts

@@ -1,14 +1,21 @@
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
-import {
+import type {
   ReadonlyTransaction,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
-import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 
-export type DecorationTransformer = ({
-  decorationSet,
-  tr,
-}: {
+export type DecorationTransformer = (
+  params: DecorationTransformerParams,
+) => DecorationSet;
+
+export type DecorationTransformerParams = {
   decorationSet: DecorationSet;
   tr: Transaction | ReadonlyTransaction;
-}) => DecorationSet;
+};
+
+export type BuildDecorationTransformerParams = DecorationTransformerParams & {
+  options: {
+    isDragAndDropEnabled: boolean;
+  };
+};

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/src/plugins/table/types.ts

@@ -309,7 +309,8 @@ export const TableCssClassName = {
   CORNER_CONTROLS_INSERT_COLUMN_MARKER: `${tablePrefixSelector}-corner-controls__insert-column-marker`,
   CONTROLS_CORNER_BUTTON: `${tablePrefixSelector}-corner-button`,
 
-  /** Controls with drag handle */
+  /** drag and drop controls */
+  DRAG_ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-drag-row-controls-wrapper`,
   DRAG_ROW_CONTROLS: `${tablePrefixSelector}-drag-row-controls`,
   DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-row-floating-insert-dot-wrapper`,
   DRAG_ROW_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-row-floating-insert-dot`,