@atlaskit/editor-plugin-table 5.3.1 → 5.3.3

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

@@ -1,4 +1,4 @@
-export { hoverColumns, hoverRows, hoverTable, hoverMergedCells, clearHoverSelection, showResizeHandleLine, hideResizeHandleLine, } from './hover';
+export { hoverColumns, hoverRows, hoverTable, hoverCell, hoverMergedCells, clearHoverSelection, showResizeHandleLine, hideResizeHandleLine, } from './hover';
 export { insertColumn, insertRow, createTable } from './insert';
 export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout, } from './toggle';
 export { clearMultipleCells } from './clear';

package/dist/types-ts4.5/plugins/table/event-handlers.d.ts

@@ -13,3 +13,4 @@ export declare const handleMouseMove: (view: EditorView, event: Event, elementCo
 export declare function handleTripleClick(view: EditorView, pos: number): boolean;
 export declare const handleCut: (oldTr: Transaction, oldState: EditorState, newState: EditorState, editorAnalyticsAPI?: EditorAnalyticsAPI, editorView?: EditorView) => Transaction;
 export declare const whenTableInFocus: (eventHandler: (view: EditorView, mouseEvent: Event, elementContentRects?: ElementContentRects) => boolean, elementContentRects?: ElementContentRects) => (view: EditorView, mouseEvent: Event) => boolean;
+export declare const withCellTracking: (eventHandler: (view: EditorView, mouseEvent: Event, elementContentRects?: ElementContentRects) => boolean, elementContentRects?: ElementContentRects) => (view: EditorView, mouseEvent: Event) => boolean;

package/dist/types-ts4.5/plugins/table/nodeviews/types.d.ts

@@ -1,14 +1,15 @@
-import { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { PluginInjectionAPI } from '../types';
 export type TableOptions = {
     isBreakoutEnabled?: boolean;
     isFullWidthModeEnabled?: boolean;
     wasFullWidthModeEnabled?: boolean;
     isTableResizingEnabled?: boolean;
+    isDragAndDropEnabled?: boolean;
 };
 export interface Props {
     node: PmNode;

package/dist/types-ts4.5/plugins/table/pm-plugins/decorations/plugin.d.ts

@@ -1,5 +1,6 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { EditorState, PluginKey, ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export declare const pluginKey: PluginKey<any>;
 export declare const getDecorations: (state: EditorState) => DecorationSet;

package/dist/types-ts4.5/plugins/table/pm-plugins/decorations/utils/column-controls.d.ts

@@ -1,3 +1,3 @@
-import { DecorationTransformer } from './types';
+import type { DecorationTransformer } from './types';
 export declare const maybeUpdateColumnControlsSelectedDecoration: DecorationTransformer;
 export declare const buildColumnControlsDecorations: DecorationTransformer;

package/dist/types-ts4.5/plugins/table/pm-plugins/default-table-selection.d.ts

@@ -2,3 +2,15 @@ export declare const defaultTableSelection: {
     hoveredColumns: never[];
     hoveredRows: never[];
 };
+/**
+ * Creating a separate object for hoveredCell so it doesn't get defaulted when `handleDocOrSelectionChanged` runs.
+ *
+ * It is safe to persist this value as it gets removed when the mouse cursor leaves the table, so no need to remove it
+ * when doc changes.
+ */
+export declare const defaultHoveredCell: {
+    hoveredCell: {
+        rowIndex: undefined;
+        colIndex: undefined;
+    };
+};

package/dist/types-ts4.5/plugins/table/pm-plugins/main.d.ts

@@ -5,4 +5,4 @@ import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider'
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { PluginConfig, PluginInjectionAPI } from '../types';
-export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, breakoutEnabled?: boolean, fullWidthModeEnabled?: boolean, tableResizingEnabled?: boolean, previousFullWidthModeEnabled?: boolean, dragAndDropEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI) => SafePlugin<import("../types").TablePluginState>;
+export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, breakoutEnabled?: boolean, tableResizingEnabled?: boolean, fullWidthModeEnabled?: boolean, previousFullWidthModeEnabled?: boolean, dragAndDropEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI) => SafePlugin<import("../types").TablePluginState>;

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

@@ -44,10 +44,15 @@ export interface PluginConfig {
 }
 export type { ColumnResizingPluginState } from '@atlaskit/editor-common/types';
 export type CellColumnPositioning = Pick<Rect, 'right' | 'left'>;
+export type CellHoverCoordinates = {
+    colIndex?: number;
+    rowIndex?: number;
+};
 export interface TablePluginState {
     editorHasFocus?: boolean;
     hoveredColumns: number[];
     hoveredRows: number[];
+    hoveredCell: CellHoverCoordinates;
     pluginConfig: PluginConfig;
     isHeaderColumnEnabled: boolean;
     isHeaderRowEnabled: boolean;
@@ -108,7 +113,7 @@ export type TablePluginAction = {
         isInDanger?: boolean;
     };
 } | {
-    type: 'HOVER_CELLS';
+    type: 'HOVER_MERGED_CELLS';
     data: {
         decorationSet: DecorationSet;
     };
@@ -163,6 +168,9 @@ export type TablePluginAction = {
     data: {
         decorationSet: DecorationSet;
     };
+} | {
+    type: 'HOVER_CELL';
+    data: CellHoverCoordinates;
 } | {
     type: 'SET_TARGET_CELL_POSITION';
     data: {
@@ -220,6 +228,7 @@ export type ColumnResizingPluginAction = {
     };
 };
 export declare enum TableDecorations {
+    /** Classic controls */
     ALL_CONTROLS_HOVER = "CONTROLS_HOVER",
     ROW_CONTROLS_HOVER = "ROW_CONTROLS_HOVER",
     COLUMN_CONTROLS_HOVER = "COLUMN_CONTROLS_HOVER",
@@ -236,6 +245,7 @@ export declare enum TableDecorations {
     LAST_CELL_ELEMENT = "LAST_CELL_ELEMENT"
 }
 export declare const TableCssClassName: {
+    /** Classic controls */
     COLUMN_CONTROLS: string;
     COLUMN_CONTROLS_DECORATIONS: string;
     COLUMN_SELECTED: string;
@@ -266,8 +276,13 @@ export declare const TableCssClassName: {
     CORNER_CONTROLS_INSERT_ROW_MARKER: string;
     CORNER_CONTROLS_INSERT_COLUMN_MARKER: string;
     CONTROLS_CORNER_BUTTON: string;
+    /** Controls with drag handle */
+    COLUMN_CONTROLS_DECORATIONS_WITH_DRAG: string;
+    ROW_CONTROLS_WITH_DRAG: string;
+    /** Other classes */
     NUMBERED_COLUMN: string;
     NUMBERED_COLUMN_BUTTON: string;
+    NUMBERED_COLUMN_BUTTON_DISABLED: string;
     HOVERED_COLUMN: string;
     HOVERED_ROW: string;
     HOVERED_TABLE: string;

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

@@ -0,0 +1,11 @@
+import type { MouseEventHandler } from 'react';
+type DragHandleProps = {
+    tableLocalId: string;
+    indexes: number[];
+    direction?: 'column' | 'row';
+    onClick?: MouseEventHandler;
+    onMouseOver?: MouseEventHandler;
+    onMouseOut?: MouseEventHandler;
+};
+export declare const DragHandle: ({ tableLocalId, direction, indexes, onClick, onMouseOver, onMouseOut, }: DragHandleProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const DragPreview: ({ direction, width, height, }: {
+    direction: 'column' | 'row';
+    width: number;
+    height: number;
+}) => JSX.Element;

package/dist/types-ts4.5/plugins/table/ui/Icons/DragInMotionIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface DragInMotionIconProps {
+    style?: React.CSSProperties;
+}
+export declare const DragInMotionIcon: ({ style }: DragInMotionIconProps) => JSX.Element;
+export {};

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

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export interface Props {
     editorView: EditorView;
     tableRef: HTMLTableElement;
@@ -11,11 +11,14 @@ export interface Props {
     isInDanger?: boolean;
     isResizing?: boolean;
     stickyTop?: number;
+    isDragAndDropEnabled?: boolean;
 }
 export default class NumberColumn extends Component<Props, any> {
     render(): JSX.Element;
     private hoverRows;
     private selectRow;
     private clearHoverSelection;
+    private updateDragHandleLocation;
+    private getCellStyles;
     private getClassNames;
 }

package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/RowControls/ClassicControls.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export interface Props {
+    editorView: EditorView;
+    tableRef: HTMLTableElement;
+    selectRow: (row: number, expand: boolean) => void;
+    hoverRows: (rows: number[], danger?: boolean) => void;
+    hoveredRows?: number[];
+    isInDanger?: boolean;
+    isResizing?: boolean;
+    insertRowButtonIndex?: number;
+    stickyTop?: number;
+}
+export declare const RowControls: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+};

package/dist/types-ts4.5/plugins/table/ui/TableFloatingControls/RowControls/DragControls.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { CellHoverCoordinates } from '../../../types';
+type DragControlsProps = {
+    editorView: EditorView;
+    tableRef: HTMLTableElement;
+    tableActive?: boolean;
+    hoveredCell?: CellHoverCoordinates;
+    hoverRows?: (rows: number[], danger?: boolean) => void;
+    selectRow?: (row: number, expand: boolean) => void;
+};
+export declare const DragControls: React.FC<import("react-intl-next").WithIntlProps<DragControlsProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<DragControlsProps & WrappedComponentProps<"intl">>;
+};
+export {};

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

@@ -1,17 +1,2 @@
-import React from 'react';
-import type { WrappedComponentProps } from 'react-intl-next';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-export interface Props {
-    editorView: EditorView;
-    tableRef: HTMLTableElement;
-    selectRow: (row: number, expand: boolean) => void;
-    hoverRows: (rows: number[], danger?: boolean) => void;
-    hoveredRows?: number[];
-    isInDanger?: boolean;
-    isResizing?: boolean;
-    insertRowButtonIndex?: number;
-    stickyTop?: number;
-}
-export declare const RowControls: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
-};
+export { RowControls } from './ClassicControls';
+export { DragControls } from './DragControls';

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

@@ -1,12 +1,11 @@
 import { Component } from 'react';
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
-import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
+import type { CellHoverCoordinates } from '../../types';
 export interface Props {
     editorView: EditorView;
-    getEditorFeatureFlags: GetEditorFeatureFlags;
     selection?: Selection;
     tableRef?: HTMLTableElement;
     tableActive?: boolean;
@@ -15,9 +14,11 @@ export interface Props {
     isHeaderRowEnabled?: boolean;
     isHeaderColumnEnabled?: boolean;
     isNumberColumnEnabled?: boolean;
+    isDragAndDropEnabled?: boolean;
     hasHeaderRow?: boolean;
     headerRowHeight?: number;
     hoveredRows?: number[];
+    hoveredCell?: CellHoverCoordinates;
     ordering?: TableColumnOrdering;
     stickyHeader?: RowStickyState;
 }

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

@@ -33,6 +33,7 @@ export declare const lineMarkerSize = 4;
 export declare const columnControlsDecorationHeight = 25;
 export declare const columnControlsZIndex: number;
 export declare const columnControlsSelectedZIndex: number;
+export declare const rowControlsZIndex: number;
 export declare const columnResizeHandleZIndex: number;
 export declare const insertLineWidth = 3;
 export declare const resizeHandlerAreaWidth: number;

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

@@ -3,14 +3,14 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { ReadonlyTransaction, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import type { Cell, CellColumnPositioning } from '../types';
+import type { Cell, CellColumnPositioning, CellHoverCoordinates } from '../types';
 import { TableDecorations } from '../types';
 export declare const findColumnControlSelectedDecoration: (decorationSet: DecorationSet) => Decoration[];
 export declare const findControlsHoverDecoration: (decorationSet: DecorationSet) => Decoration[];
 export declare const createCellHoverDecoration: (cells: Cell[]) => Decoration[];
 export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row' | 'column' | 'table', tr: Transaction | ReadonlyTransaction, danger?: boolean, selected?: boolean) => Decoration[];
 export declare const createColumnSelectedDecoration: (tr: Transaction | ReadonlyTransaction) => Decoration[];
-export declare const createColumnControlsDecoration: (selection: Selection) => Decoration[];
+export declare const createColumnControlsDecoration: (selection: Selection, hoverLocation?: CellHoverCoordinates) => Decoration[];
 export declare const updateDecorations: (node: PmNode, decorationSet: DecorationSet, decorations: Decoration[], key: TableDecorations) => DecorationSet;
 export declare const createResizeHandleDecoration: (tr: Transaction | ReadonlyTransaction, rowIndexTarget: number, columnEndIndexTarget: Omit<CellColumnPositioning, 'left'>, includeTooltip: boolean | undefined, getIntl: () => IntlShape) => [
     Decoration[],

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

@@ -7,7 +7,9 @@ export declare const getColumnOrRowIndex: (target: HTMLElement) => [
     number
 ];
 export declare const isColumnControlsDecorations: (node: HTMLElement | null) => boolean;
+export declare const isColumnDragControlsDecorations: (node: HTMLElement | null) => true | HTMLElement | null;
 export declare const isRowControlsButton: (node: HTMLElement | null) => boolean;
+export declare const isRowDragControlsButton: (node: HTMLElement | null) => true | HTMLElement | null;
 export declare const isResizeHandleDecoration: (node: HTMLElement | null) => boolean;
 export declare const isTableControlsButton: (node: HTMLElement | null) => boolean;
 export declare const isTableContainerOrWrapper: (node: HTMLElement | null) => boolean;

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

@@ -2,7 +2,7 @@ export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, is
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine, } from './decoration';
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow, } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, } from './paste';
-export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isColumnDragControlsDecorations, isRowDragControlsButton, isRowControlsButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, } from './dom';
 export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow, } from './row-controls';
 export type { RowParams } from './row-controls';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.1",
+  "version": "5.3.3",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^32.0.0",
     "@atlaskit/custom-steps": "^0.0.2",
-    "@atlaskit/editor-common": "^76.11.0",
+    "@atlaskit/editor-common": "^76.12.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
@@ -40,8 +40,10 @@
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/pragmatic-drag-and-drop": "^0.23.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.11.8",
+    "@atlaskit/pragmatic-drag-and-drop-react-accessibility": "^0.4.0",
+    "@atlaskit/primitives": "^1.6.7",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.26.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

package/src/__tests__/unit/event-handlers.ts

@@ -25,6 +25,7 @@ import {
   tdEmpty,
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
+import { ffTest } from '@atlassian/feature-flags-test-utils';
 
 import tablePlugin from '../../plugins/table-plugin';
 import {
@@ -36,7 +37,9 @@ import {
   handleMouseMove,
   handleMouseOut,
   handleMouseOver,
+  withCellTracking,
 } from '../../plugins/table/event-handlers';
+import { getPluginState } from '../../plugins/table/pm-plugins/plugin-factory';
 import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
 import { TableCssClassName as ClassName } from '../../plugins/table/types';
 
@@ -60,7 +63,7 @@ describe('table plugin: decorations', () => {
     beforeEach(() => {
       jest.resetAllMocks();
     });
-    it('should return true & prevent default behaviour for table wrappers: pm-table-contianer', () => {
+    it('should return true & prevent default behaviour for table wrappers: pm-table-container', () => {
       const { editorView } = editor(
         doc(table()(tr(td({})(p())), tr(td({})(p())), tr(td({})(p())))),
       );
@@ -232,3 +235,73 @@ describe('table event handlers', () => {
     });
   });
 });
+
+describe('withCellTracking', () => {
+  const createEditor = createProsemirrorEditorFactory();
+  const editor = (doc: DocBuilder, isDragAndDropEnabled = false) =>
+    createEditor({
+      doc,
+      attachTo: document.body,
+      preset: new Preset<LightEditorPlugin>()
+        .add([featureFlagsPlugin, {}])
+        .add([analyticsPlugin, {}])
+        .add(contentInsertionPlugin)
+        .add(decorationsPlugin)
+        .add(widthPlugin)
+        .add(guidelinePlugin)
+        .add(gridPlugin)
+        .add(selectionPlugin)
+        .add([
+          tablePlugin,
+          {
+            dragAndDropEnabled: isDragAndDropEnabled,
+            tableOptions: { advanced: true },
+          },
+        ]),
+      pluginKey,
+    });
+
+  describe('should fire event handler passed in', () => {
+    ffTest(
+      'platform.editor.table.drag-and-drop',
+      () => {
+        const { editorView } = editor(
+          doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+          true,
+        );
+        const eventHandlerSpy = jest.fn();
+        withCellTracking(eventHandlerSpy)(editorView, {} as any);
+
+        expect(eventHandlerSpy).toHaveBeenCalled();
+      },
+      () => {
+        const { editorView } = editor(
+          doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+        );
+        const eventHandlerSpy = jest.fn();
+        withCellTracking(eventHandlerSpy)(editorView, {} as any);
+
+        expect(eventHandlerSpy).toHaveBeenCalled();
+      },
+    );
+  });
+
+  describe('should correctly set table cell coordinates based on mouse location', () => {
+    ffTest('platform.editor.table.drag-and-drop', () => {
+      const { editorView, refs } = editor(
+        doc(table()(tr(tdCursor, tdEmpty), tr(tdEmpty, tdEmpty))),
+        true,
+      );
+      const firstCell = editorView.domAtPos(refs['<>']);
+
+      const event = {
+        target: firstCell.node,
+      };
+
+      withCellTracking(jest.fn())(editorView, event as any);
+
+      const pluginState = getPluginState(editorView.state);
+      expect(pluginState.hoveredCell).toEqual({ colIndex: 0, rowIndex: 0 });
+    });
+  });
+});

package/src/__tests__/unit/pm-plugins/decorations/column-controls.ts

@@ -9,27 +9,47 @@ import {
   tdEmpty,
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
+import { ffTest } from '@atlassian/feature-flags-test-utils';
 
 import { buildColumnControlsDecorations } from '../../../../plugins/table/pm-plugins/decorations/utils';
 import { TableDecorations } from '../../../../plugins/table/types';
 
 describe('tables: column controls decorations', () => {
-  describe('#buildColumnControlsDecorations', () => {
-    const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
-    it(`should return a decorationSet with 2 ${decorationKey} type`, () => {
-      const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
-      const nextDecorationSet = buildColumnControlsDecorations({
-        decorationSet: DecorationSet.empty,
-        tr: state.tr,
-      });
+  describe(`should return a decorationSet with 2 ${TableDecorations.COLUMN_CONTROLS_DECORATIONS} type`, () => {
+    ffTest(
+      'platform.editor.table.drag-and-drop',
+      () => {
+        const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
+        const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
+        const nextDecorationSet = buildColumnControlsDecorations({
+          decorationSet: DecorationSet.empty,
+          tr: state.tr,
+        });
 
-      const decorations = nextDecorationSet.find(
-        undefined,
-        undefined,
-        (spec: any) => spec.key.indexOf(decorationKey) > -1,
-      );
+        const decorations = nextDecorationSet.find(
+          undefined,
+          undefined,
+          (spec: any) => spec.key.indexOf(decorationKey) > -1,
+        );
 
-      expect(decorations).toHaveLength(2);
-    });
+        expect(decorations).toHaveLength(2);
+      },
+      () => {
+        const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
+        const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
+        const nextDecorationSet = buildColumnControlsDecorations({
+          decorationSet: DecorationSet.empty,
+          tr: state.tr,
+        });
+
+        const decorations = nextDecorationSet.find(
+          undefined,
+          undefined,
+          (spec: any) => spec.key.indexOf(decorationKey) > -1,
+        );
+
+        expect(decorations).toHaveLength(2);
+      },
+    );
   });
 });