@atlaskit/editor-plugin-table 5.3.9 → 5.3.10

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 5.3.10
+
+### Patch Changes
+
+- [#42000](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42000) [`62e03b45cf6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62e03b45cf6) - Updated the column drag handle to display the drag preview correctly
+
 ## 5.3.9
 
 ### Patch Changes

package/dist/cjs/plugins/table/commands/hover.js

@@ -138,14 +138,16 @@ var hideResizeHandleLine = exports.hideResizeHandleLine = function hideResizeHan
     };
   });
 };
-var hoverCell = exports.hoverCell = function hoverCell(rowIndex, colIndex) {
+var hoverCell = exports.hoverCell = function hoverCell(rowIndex, colIndex, colWidth, colHeight) {
   return (0, _pluginFactory.createCommand)(function () {
     return {
       type: 'HOVER_CELL',
       data: {
         hoveredCell: {
           rowIndex: rowIndex,
-          colIndex: colIndex
+          colIndex: colIndex,
+          colWidth: colWidth,
+          colHeight: colHeight
         }
       }
     };

package/dist/cjs/plugins/table/event-handlers.js

@@ -180,7 +180,7 @@ var handleMouseLeave = exports.handleMouseLeave = function handleMouseLeave(view
     return true;
   }
   if (isDragAndDropEnabled) {
-    (0, _commands.hoverCell)(undefined, undefined)(state, dispatch);
+    (0, _commands.hoverCell)()(state, dispatch);
   }
   if ((typeof insertColumnButtonIndex !== 'undefined' || typeof insertRowButtonIndex !== 'undefined') && (0, _commands.hideInsertColumnOrRowButton)()(state, dispatch)) {
     return true;
@@ -326,7 +326,8 @@ var whenTableInFocus = exports.whenTableInFocus = function whenTableInFocus(even
 var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   var target = mouseEvent.target;
   var maybeTableCell = (0, _utils.isElementInTableCell)(target);
-  if (!maybeTableCell) {
+  var tableRef = (0, _pluginFactory.getPluginState)(view.state).tableRef;
+  if (!maybeTableCell || !tableRef) {
     return;
   }
   var colIndex = maybeTableCell.cellIndex;
@@ -334,8 +335,10 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   var rowIndex = rowElement && rowElement.rowIndex;
   var _getPluginState8 = (0, _pluginFactory.getPluginState)(view.state),
     hoveredCell = _getPluginState8.hoveredCell;
-  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex) {
-    (0, _commands.hoverCell)(rowIndex, colIndex)(view.state, view.dispatch);
+  var colHeight = tableRef.offsetHeight;
+  var colWidth = maybeTableCell.offsetWidth;
+  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex || hoveredCell.colWidth !== colWidth || hoveredCell.colHeight !== colHeight) {
+    (0, _commands.hoverCell)(rowIndex, colIndex, colWidth, colHeight)(view.state, view.dispatch);
   }
 };
 var withCellTracking = exports.withCellTracking = function withCellTracking(eventHandler, elementContentRects) {

package/dist/cjs/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -28,7 +28,6 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
     return width ? "".concat(width - 1, "px") : '0px';
   }).join(' ')) !== null && _colWidths$map$join !== void 0 ? _colWidths$map$join : '0px';
-  var colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
   var _onClick = function onClick(index, event) {};
   var onMouseOver = function onMouseOver() {};
   var onMouseOut = function onMouseOut() {};
@@ -41,22 +40,24 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
       gridTemplateColumns: widths,
       marginTop: marginTop
     }
-  }, tableActive && !isResizing && Number.isFinite(colIndex) && /*#__PURE__*/_react.default.createElement("div", {
+  }, tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      gridColumn: "".concat(colIndex + 1, " / span 1"),
+      gridColumn: "".concat(hoveredCell.colIndex + 1, " / span 1"),
       marginTop: "-15px"
     },
-    "data-column-control-index": colIndex,
+    "data-column-control-index": hoveredCell.colIndex,
     "data-testid": "table-floating-column-control"
   }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
     direction: "column",
-    indexes: [colIndex],
+    indexes: [hoveredCell.colIndex],
     onClick: function onClick(event) {
-      return _onClick(colIndex, event);
+      return _onClick(hoveredCell.colIndex, event);
     },
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
-    tableLocalId: localId || ''
+    tableLocalId: localId || '',
+    previewWidth: hoveredCell.colWidth,
+    previewHeight: hoveredCell.colHeight
   }))));
 };
 var _default = exports.default = ColumnControls;

package/dist/es2019/plugins/table/commands/hover.js

@@ -99,13 +99,15 @@ export const hideResizeHandleLine = () => createCommand(state => ({
     decorationSet: updatePluginStateDecorations(state, [], TableDecorations.COLUMN_RESIZING_HANDLE_LINE)
   }
 }));
-export const hoverCell = (rowIndex, colIndex) => createCommand(() => {
+export const hoverCell = (rowIndex, colIndex, colWidth, colHeight) => createCommand(() => {
   return {
     type: 'HOVER_CELL',
     data: {
       hoveredCell: {
         rowIndex,
-        colIndex
+        colIndex,
+        colWidth,
+        colHeight
       }
     }
   };

package/dist/es2019/plugins/table/event-handlers.js

@@ -179,7 +179,7 @@ export const handleMouseLeave = (view, event) => {
     return true;
   }
   if (isDragAndDropEnabled) {
-    hoverCell(undefined, undefined)(state, dispatch);
+    hoverCell()(state, dispatch);
   }
   if ((typeof insertColumnButtonIndex !== 'undefined' || typeof insertRowButtonIndex !== 'undefined') && hideInsertColumnOrRowButton()(state, dispatch)) {
     return true;
@@ -334,7 +334,8 @@ export const whenTableInFocus = (eventHandler, elementContentRects) => (view, mo
 const trackCellLocation = (view, mouseEvent) => {
   const target = mouseEvent.target;
   const maybeTableCell = isElementInTableCell(target);
-  if (!maybeTableCell) {
+  const tableRef = getPluginState(view.state).tableRef;
+  if (!maybeTableCell || !tableRef) {
     return;
   }
   const colIndex = maybeTableCell.cellIndex;
@@ -343,8 +344,10 @@ const trackCellLocation = (view, mouseEvent) => {
   const {
     hoveredCell
   } = getPluginState(view.state);
-  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex) {
-    hoverCell(rowIndex, colIndex)(view.state, view.dispatch);
+  const colHeight = tableRef.offsetHeight;
+  const colWidth = maybeTableCell.offsetWidth;
+  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex || hoveredCell.colWidth !== colWidth || hoveredCell.colHeight !== colHeight) {
+    hoverCell(rowIndex, colIndex, colWidth, colHeight)(view.state, view.dispatch);
   }
 };
 export const withCellTracking = (eventHandler, elementContentRects) => (view, mouseEvent) => {

package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -20,7 +20,6 @@ export const ColumnControls = ({
   const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
   const marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
   const widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(width => width ? `${width - 1}px` : '0px').join(' ')) !== null && _colWidths$map$join !== void 0 ? _colWidths$map$join : '0px';
-  const colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
   const onClick = (index, event) => {};
   const onMouseOver = () => {};
   const onMouseOut = () => {};
@@ -33,20 +32,22 @@ export const ColumnControls = ({
       gridTemplateColumns: widths,
       marginTop
     }
-  }, tableActive && !isResizing && Number.isFinite(colIndex) && /*#__PURE__*/React.createElement("div", {
+  }, tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.createElement("div", {
     style: {
-      gridColumn: `${colIndex + 1} / span 1`,
+      gridColumn: `${hoveredCell.colIndex + 1} / span 1`,
       marginTop: `-15px`
     },
-    "data-column-control-index": colIndex,
+    "data-column-control-index": hoveredCell.colIndex,
     "data-testid": "table-floating-column-control"
   }, /*#__PURE__*/React.createElement(DragHandle, {
     direction: "column",
-    indexes: [colIndex],
-    onClick: event => onClick(colIndex, event),
+    indexes: [hoveredCell.colIndex],
+    onClick: event => onClick(hoveredCell.colIndex, event),
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
-    tableLocalId: localId || ''
+    tableLocalId: localId || '',
+    previewWidth: hoveredCell.colWidth,
+    previewHeight: hoveredCell.colHeight
   }))));
 };
 export default ColumnControls;

package/dist/esm/plugins/table/commands/hover.js

@@ -131,14 +131,16 @@ export var hideResizeHandleLine = function hideResizeHandleLine() {
     };
   });
 };
-export var hoverCell = function hoverCell(rowIndex, colIndex) {
+export var hoverCell = function hoverCell(rowIndex, colIndex, colWidth, colHeight) {
   return createCommand(function () {
     return {
       type: 'HOVER_CELL',
       data: {
         hoveredCell: {
           rowIndex: rowIndex,
-          colIndex: colIndex
+          colIndex: colIndex,
+          colWidth: colWidth,
+          colHeight: colHeight
         }
       }
     };

package/dist/esm/plugins/table/event-handlers.js

@@ -171,7 +171,7 @@ export var handleMouseLeave = function handleMouseLeave(view, event) {
     return true;
   }
   if (isDragAndDropEnabled) {
-    hoverCell(undefined, undefined)(state, dispatch);
+    hoverCell()(state, dispatch);
   }
   if ((typeof insertColumnButtonIndex !== 'undefined' || typeof insertRowButtonIndex !== 'undefined') && hideInsertColumnOrRowButton()(state, dispatch)) {
     return true;
@@ -317,7 +317,8 @@ export var whenTableInFocus = function whenTableInFocus(eventHandler, elementCon
 var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   var target = mouseEvent.target;
   var maybeTableCell = isElementInTableCell(target);
-  if (!maybeTableCell) {
+  var tableRef = getPluginState(view.state).tableRef;
+  if (!maybeTableCell || !tableRef) {
     return;
   }
   var colIndex = maybeTableCell.cellIndex;
@@ -325,8 +326,10 @@ var trackCellLocation = function trackCellLocation(view, mouseEvent) {
   var rowIndex = rowElement && rowElement.rowIndex;
   var _getPluginState8 = getPluginState(view.state),
     hoveredCell = _getPluginState8.hoveredCell;
-  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex) {
-    hoverCell(rowIndex, colIndex)(view.state, view.dispatch);
+  var colHeight = tableRef.offsetHeight;
+  var colWidth = maybeTableCell.offsetWidth;
+  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex || hoveredCell.colWidth !== colWidth || hoveredCell.colHeight !== colHeight) {
+    hoverCell(rowIndex, colIndex, colWidth, colHeight)(view.state, view.dispatch);
   }
 };
 export var withCellTracking = function withCellTracking(eventHandler, elementContentRects) {

package/dist/esm/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -21,7 +21,6 @@ export var ColumnControls = function ColumnControls(_ref) {
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
     return width ? "".concat(width - 1, "px") : '0px';
   }).join(' ')) !== null && _colWidths$map$join !== void 0 ? _colWidths$map$join : '0px';
-  var colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
   var _onClick = function onClick(index, event) {};
   var onMouseOver = function onMouseOver() {};
   var onMouseOut = function onMouseOut() {};
@@ -34,22 +33,24 @@ export var ColumnControls = function ColumnControls(_ref) {
       gridTemplateColumns: widths,
       marginTop: marginTop
     }
-  }, tableActive && !isResizing && Number.isFinite(colIndex) && /*#__PURE__*/React.createElement("div", {
+  }, tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.createElement("div", {
     style: {
-      gridColumn: "".concat(colIndex + 1, " / span 1"),
+      gridColumn: "".concat(hoveredCell.colIndex + 1, " / span 1"),
       marginTop: "-15px"
     },
-    "data-column-control-index": colIndex,
+    "data-column-control-index": hoveredCell.colIndex,
     "data-testid": "table-floating-column-control"
   }, /*#__PURE__*/React.createElement(DragHandle, {
     direction: "column",
-    indexes: [colIndex],
+    indexes: [hoveredCell.colIndex],
     onClick: function onClick(event) {
-      return _onClick(colIndex, event);
+      return _onClick(hoveredCell.colIndex, event);
     },
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
-    tableLocalId: localId || ''
+    tableLocalId: localId || '',
+    previewWidth: hoveredCell.colWidth,
+    previewHeight: hoveredCell.colHeight
   }))));
 };
 export default ColumnControls;

package/dist/types/plugins/table/commands/hover.d.ts

@@ -6,4 +6,4 @@ export declare const hoverTable: (isInDanger?: boolean, isSelected?: boolean) =>
 export declare const clearHoverSelection: () => import("@atlaskit/editor-common/types").Command;
 export declare const showResizeHandleLine: (cellColumnPositioning: CellColumnPositioning) => import("@atlaskit/editor-common/types").Command;
 export declare const hideResizeHandleLine: () => import("@atlaskit/editor-common/types").Command;
-export declare const hoverCell: (rowIndex?: number, colIndex?: number) => import("@atlaskit/editor-common/types").Command;
+export declare const hoverCell: (rowIndex?: number, colIndex?: number, colWidth?: number, colHeight?: number) => import("@atlaskit/editor-common/types").Command;

package/dist/types/plugins/table/types.d.ts

@@ -44,15 +44,17 @@ export interface PluginConfig {
 }
 export type { ColumnResizingPluginState } from '@atlaskit/editor-common/types';
 export type CellColumnPositioning = Pick<Rect, 'right' | 'left'>;
-export type CellHoverCoordinates = {
+export interface CellHoverMeta {
     colIndex?: number;
     rowIndex?: number;
-};
+    colWidth?: number;
+    colHeight?: number;
+}
 export interface TablePluginState {
     editorHasFocus?: boolean;
     hoveredColumns: number[];
     hoveredRows: number[];
-    hoveredCell: CellHoverCoordinates;
+    hoveredCell: CellHoverMeta;
     pluginConfig: PluginConfig;
     isHeaderColumnEnabled: boolean;
     isHeaderRowEnabled: boolean;
@@ -170,7 +172,9 @@ export type TablePluginAction = {
     };
 } | {
     type: 'HOVER_CELL';
-    data: CellHoverCoordinates;
+    data: {
+        hoveredCell: CellHoverMeta;
+    };
 } | {
     type: 'SET_TARGET_CELL_POSITION';
     data: {

package/dist/types/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { CellHoverCoordinates } from '../../../types';
+import type { CellHoverMeta } from '../../../types';
 export interface Props {
     editorView: EditorView;
     tableActive?: boolean;
     tableRef: HTMLTableElement;
-    hoveredCell?: CellHoverCoordinates;
+    hoveredCell?: CellHoverMeta;
     isResizing?: boolean;
     stickyTop?: number;
     localId?: string;

package/dist/types/plugins/table/ui/TableFloatingColumnControls/index.d.ts

@@ -5,7 +5,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 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';
+import type { CellHoverMeta } from '../../types';
 export interface Props {
     editorView: EditorView;
     getEditorFeatureFlags: GetEditorFeatureFlags;
@@ -16,7 +16,7 @@ export interface Props {
     hasHeaderRow?: boolean;
     headerRowHeight?: number;
     hoveredRows?: number[];
-    hoveredCell?: CellHoverCoordinates;
+    hoveredCell?: CellHoverMeta;
     isResizing?: boolean;
     ordering?: TableColumnOrdering;
     stickyHeader?: RowStickyState;

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { CellHoverCoordinates } from '../../../types';
+import type { CellHoverMeta } from '../../../types';
 type DragControlsProps = {
     editorView: EditorView;
     tableRef: HTMLTableElement;
     tableActive?: boolean;
-    hoveredCell?: CellHoverCoordinates;
+    hoveredCell?: CellHoverMeta;
     hoverRows?: (rows: number[], danger?: boolean) => void;
     selectRow?: (row: number, expand: boolean) => void;
 };

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

@@ -3,7 +3,7 @@ import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 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';
+import type { CellHoverMeta } from '../../types';
 export interface Props {
     editorView: EditorView;
     selection?: Selection;
@@ -18,7 +18,7 @@ export interface Props {
     hasHeaderRow?: boolean;
     headerRowHeight?: number;
     hoveredRows?: number[];
-    hoveredCell?: CellHoverCoordinates;
+    hoveredCell?: CellHoverMeta;
     ordering?: TableColumnOrdering;
     stickyHeader?: RowStickyState;
 }

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

@@ -6,4 +6,4 @@ export declare const hoverTable: (isInDanger?: boolean, isSelected?: boolean) =>
 export declare const clearHoverSelection: () => import("@atlaskit/editor-common/types").Command;
 export declare const showResizeHandleLine: (cellColumnPositioning: CellColumnPositioning) => import("@atlaskit/editor-common/types").Command;
 export declare const hideResizeHandleLine: () => import("@atlaskit/editor-common/types").Command;
-export declare const hoverCell: (rowIndex?: number, colIndex?: number) => import("@atlaskit/editor-common/types").Command;
+export declare const hoverCell: (rowIndex?: number, colIndex?: number, colWidth?: number, colHeight?: number) => import("@atlaskit/editor-common/types").Command;

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

@@ -44,15 +44,17 @@ export interface PluginConfig {
 }
 export type { ColumnResizingPluginState } from '@atlaskit/editor-common/types';
 export type CellColumnPositioning = Pick<Rect, 'right' | 'left'>;
-export type CellHoverCoordinates = {
+export interface CellHoverMeta {
     colIndex?: number;
     rowIndex?: number;
-};
+    colWidth?: number;
+    colHeight?: number;
+}
 export interface TablePluginState {
     editorHasFocus?: boolean;
     hoveredColumns: number[];
     hoveredRows: number[];
-    hoveredCell: CellHoverCoordinates;
+    hoveredCell: CellHoverMeta;
     pluginConfig: PluginConfig;
     isHeaderColumnEnabled: boolean;
     isHeaderRowEnabled: boolean;
@@ -170,7 +172,9 @@ export type TablePluginAction = {
     };
 } | {
     type: 'HOVER_CELL';
-    data: CellHoverCoordinates;
+    data: {
+        hoveredCell: CellHoverMeta;
+    };
 } | {
     type: 'SET_TARGET_CELL_POSITION';
     data: {

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { CellHoverCoordinates } from '../../../types';
+import type { CellHoverMeta } from '../../../types';
 export interface Props {
     editorView: EditorView;
     tableActive?: boolean;
     tableRef: HTMLTableElement;
-    hoveredCell?: CellHoverCoordinates;
+    hoveredCell?: CellHoverMeta;
     isResizing?: boolean;
     stickyTop?: number;
     localId?: string;

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

@@ -5,7 +5,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 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';
+import type { CellHoverMeta } from '../../types';
 export interface Props {
     editorView: EditorView;
     getEditorFeatureFlags: GetEditorFeatureFlags;
@@ -16,7 +16,7 @@ export interface Props {
     hasHeaderRow?: boolean;
     headerRowHeight?: number;
     hoveredRows?: number[];
-    hoveredCell?: CellHoverCoordinates;
+    hoveredCell?: CellHoverMeta;
     isResizing?: boolean;
     ordering?: TableColumnOrdering;
     stickyHeader?: RowStickyState;

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { CellHoverCoordinates } from '../../../types';
+import type { CellHoverMeta } from '../../../types';
 type DragControlsProps = {
     editorView: EditorView;
     tableRef: HTMLTableElement;
     tableActive?: boolean;
-    hoveredCell?: CellHoverCoordinates;
+    hoveredCell?: CellHoverMeta;
     hoverRows?: (rows: number[], danger?: boolean) => void;
     selectRow?: (row: number, expand: boolean) => void;
 };

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

@@ -3,7 +3,7 @@ import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 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';
+import type { CellHoverMeta } from '../../types';
 export interface Props {
     editorView: EditorView;
     selection?: Selection;
@@ -18,7 +18,7 @@ export interface Props {
     hasHeaderRow?: boolean;
     headerRowHeight?: number;
     hoveredRows?: number[];
-    hoveredCell?: CellHoverCoordinates;
+    hoveredCell?: CellHoverMeta;
     ordering?: TableColumnOrdering;
     stickyHeader?: RowStickyState;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.3.9",
+  "version": "5.3.10",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

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

@@ -301,7 +301,10 @@ describe('withCellTracking', () => {
       withCellTracking(jest.fn())(editorView, event as any);
 
       const pluginState = getPluginState(editorView.state);
-      expect(pluginState.hoveredCell).toEqual({ colIndex: 0, rowIndex: 0 });
+      expect(pluginState.hoveredCell).toEqual({
+        colIndex: undefined,
+        rowIndex: undefined,
+      });
     });
   });
 });

package/src/plugins/table/commands/hover.ts

@@ -191,13 +191,18 @@ export const hideResizeHandleLine = () =>
     },
   }));
 
-export const hoverCell = (rowIndex?: number, colIndex?: number) =>
+export const hoverCell = (
+  rowIndex?: number,
+  colIndex?: number,
+  colWidth?: number,
+  colHeight?: number,
+) =>
   createCommand(
     () => {
       return {
         type: 'HOVER_CELL',
         data: {
-          hoveredCell: { rowIndex, colIndex },
+          hoveredCell: { rowIndex, colIndex, colWidth, colHeight },
         },
       };
     },

package/src/plugins/table/event-handlers.ts

@@ -288,7 +288,7 @@ export const handleMouseLeave = (view: EditorView, event: Event): boolean => {
   }
 
   if (isDragAndDropEnabled) {
-    hoverCell(undefined, undefined)(state, dispatch);
+    hoverCell()(state, dispatch);
   }
 
   if (
@@ -512,8 +512,9 @@ const trackCellLocation = (view: EditorView, mouseEvent: Event) => {
   const maybeTableCell = isElementInTableCell(
     target as HTMLElement,
   ) as HTMLTableCellElement | null;
+  const tableRef = getPluginState(view.state).tableRef;
 
-  if (!maybeTableCell) {
+  if (!maybeTableCell || !tableRef) {
     return;
   }
 
@@ -525,8 +526,21 @@ const trackCellLocation = (view: EditorView, mouseEvent: Event) => {
   const rowIndex = rowElement && rowElement.rowIndex;
   const { hoveredCell } = getPluginState(view.state);
 
-  if (hoveredCell.colIndex !== colIndex || hoveredCell.rowIndex !== rowIndex) {
-    hoverCell(rowIndex, colIndex)(view.state, view.dispatch);
+  const colHeight = tableRef.offsetHeight;
+  const colWidth = maybeTableCell.offsetWidth;
+
+  if (
+    hoveredCell.colIndex !== colIndex ||
+    hoveredCell.rowIndex !== rowIndex ||
+    hoveredCell.colWidth !== colWidth ||
+    hoveredCell.colHeight !== colHeight
+  ) {
+    hoverCell(
+      rowIndex,
+      colIndex,
+      colWidth,
+      colHeight,
+    )(view.state, view.dispatch);
   }
 };
 

package/src/plugins/table/types.ts

@@ -85,14 +85,18 @@ export type { ColumnResizingPluginState } from '@atlaskit/editor-common/types';
  *
  */
 export type CellColumnPositioning = Pick<Rect, 'right' | 'left'>;
-
-export type CellHoverCoordinates = { colIndex?: number; rowIndex?: number };
+export interface CellHoverMeta {
+  colIndex?: number;
+  rowIndex?: number;
+  colWidth?: number;
+  colHeight?: number;
+}
 
 export interface TablePluginState {
   editorHasFocus?: boolean;
   hoveredColumns: number[];
   hoveredRows: number[];
-  hoveredCell: CellHoverCoordinates;
+  hoveredCell: CellHoverMeta;
   pluginConfig: PluginConfig;
   isHeaderColumnEnabled: boolean;
   isHeaderRowEnabled: boolean;
@@ -200,7 +204,12 @@ export type TablePluginAction =
   | { type: 'CLEAR_HOVER_SELECTION'; data: { decorationSet: DecorationSet } }
   | { type: 'SHOW_RESIZE_HANDLE_LINE'; data: { decorationSet: DecorationSet } }
   | { type: 'HIDE_RESIZE_HANDLE_LINE'; data: { decorationSet: DecorationSet } }
-  | { type: 'HOVER_CELL'; data: CellHoverCoordinates }
+  | {
+      type: 'HOVER_CELL';
+      data: {
+        hoveredCell: CellHoverMeta;
+      };
+    }
   | { type: 'SET_TARGET_CELL_POSITION'; data: { targetCellPosition?: number } }
   | {
       type: 'SELECT_COLUMN';

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
-import type { CellHoverCoordinates } from '../../../types';
+import type { CellHoverMeta } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
 import { DragHandle } from '../../DragHandle';
 
@@ -10,7 +10,7 @@ export interface Props {
   editorView: EditorView;
   tableActive?: boolean;
   tableRef: HTMLTableElement;
-  hoveredCell?: CellHoverCoordinates;
+  hoveredCell?: CellHoverMeta;
   isResizing?: boolean;
   stickyTop?: number;
   localId?: string;
@@ -45,8 +45,6 @@ export const ColumnControls: React.FC<Props> = ({
     colWidths?.map((width) => (width ? `${width - 1}px` : '0px')).join(' ') ??
     '0px';
 
-  const colIndex = hoveredCell?.colIndex;
-
   const onClick = (
     index: number,
     event: React.MouseEvent<Element, MouseEvent>,
@@ -65,25 +63,32 @@ export const ColumnControls: React.FC<Props> = ({
           marginTop,
         }}
       >
-        {tableActive && !isResizing && Number.isFinite(colIndex) && (
-          <div
-            style={{
-              gridColumn: `${(colIndex as number) + 1} / span 1`,
-              marginTop: `-15px`,
-            }}
-            data-column-control-index={colIndex}
-            data-testid="table-floating-column-control"
-          >
-            <DragHandle
-              direction="column"
-              indexes={[colIndex!]}
-              onClick={(event) => onClick(colIndex as number, event)}
-              onMouseOver={onMouseOver}
-              onMouseOut={onMouseOut}
-              tableLocalId={localId || ''}
-            />
-          </div>
-        )}
+        {tableActive &&
+          !isResizing &&
+          !!hoveredCell &&
+          Number.isFinite(hoveredCell.colIndex) && (
+            <div
+              style={{
+                gridColumn: `${(hoveredCell.colIndex as number) + 1} / span 1`,
+                marginTop: `-15px`,
+              }}
+              data-column-control-index={hoveredCell.colIndex}
+              data-testid="table-floating-column-control"
+            >
+              <DragHandle
+                direction="column"
+                indexes={[hoveredCell.colIndex!]}
+                onClick={(event) =>
+                  onClick(hoveredCell.colIndex as number, event)
+                }
+                onMouseOver={onMouseOver}
+                onMouseOut={onMouseOut}
+                tableLocalId={localId || ''}
+                previewWidth={hoveredCell.colWidth}
+                previewHeight={hoveredCell.colHeight}
+              />
+            </div>
+          )}
       </div>
     </div>
   );

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

@@ -10,7 +10,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
-import type { CellHoverCoordinates, DraggableSourceData } from '../../types';
+import type { CellHoverMeta, DraggableSourceData } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
 import { getColumnsWidths, getRowHeights } from '../../utils';
 
@@ -27,7 +27,7 @@ export interface Props {
   hasHeaderRow?: boolean;
   headerRowHeight?: number;
   hoveredRows?: number[];
-  hoveredCell?: CellHoverCoordinates;
+  hoveredCell?: CellHoverMeta;
   isResizing?: boolean;
   ordering?: TableColumnOrdering;
   stickyHeader?: RowStickyState;

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

@@ -6,7 +6,7 @@ import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
-import type { CellHoverCoordinates } from '../../../types';
+import type { CellHoverMeta } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowHeights } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
@@ -15,7 +15,7 @@ type DragControlsProps = {
   editorView: EditorView;
   tableRef: HTMLTableElement;
   tableActive?: boolean;
-  hoveredCell?: CellHoverCoordinates;
+  hoveredCell?: CellHoverMeta;
   hoverRows?: (rows: number[], danger?: boolean) => void;
   selectRow?: (row: number, expand: boolean) => void;
 };

package/src/plugins/table/ui/TableFloatingControls/index.tsx

@@ -7,7 +7,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 
 import { hoverRows, selectRow } from '../../commands';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
-import type { CellHoverCoordinates } from '../../types';
+import type { CellHoverMeta } from '../../types';
 import { isSelectionUpdated } from '../../utils';
 
 import { CornerControls } from './CornerControls';
@@ -28,7 +28,7 @@ export interface Props {
   hasHeaderRow?: boolean;
   headerRowHeight?: number;
   hoveredRows?: number[];
-  hoveredCell?: CellHoverCoordinates;
+  hoveredCell?: CellHoverMeta;
   ordering?: TableColumnOrdering;
   stickyHeader?: RowStickyState;
 }