@atlaskit/editor-plugin-table 5.3.13 → 5.3.15

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

@@ -1,10 +1,12 @@
 import React from 'react';
 
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { Popup } from '@atlaskit/editor-common/ui';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 
 import type { TableDirection } from '../../types';
 import { dragMenuDropdownWidth } from '../consts';
@@ -22,6 +24,7 @@ export interface Props {
   direction?: TableDirection;
   index?: number;
   targetCellPosition?: number;
+  getEditorContainerWidth: GetEditorContainerWidth;
 }
 
 const FloatingDragMenu = ({
@@ -35,6 +38,7 @@ const FloatingDragMenu = ({
   direction,
   index,
   targetCellPosition,
+  getEditorContainerWidth,
 }: Props) => {
   if (
     !isOpen ||
@@ -49,11 +53,17 @@ const FloatingDragMenu = ({
   if (!targetCellRef) {
     return null;
   }
-
+  const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
+  const offset =
+    direction === 'row'
+      ? [7, 0]
+      : index === (tableMap?.width || 1) - 1
+      ? [14, 0]
+      : [-14, 0];
   // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return (
     <Popup
-      alignX="left"
+      alignX={direction === 'row' ? 'left' : 'center'}
       alignY="top"
       target={targetCellRef as HTMLElement}
       mountTo={mountPoint}
@@ -64,7 +74,7 @@ const FloatingDragMenu = ({
       // in table, but below floating dialogs like typeaheads, pickers, etc.
       zIndex={akEditorFloatingOverlapPanelZIndex}
       forcePlacement={true}
-      offset={[7, 0]}
+      offset={offset}
       stick={true}
     >
       <DragMenu
@@ -74,6 +84,8 @@ const FloatingDragMenu = ({
         tableNode={tableNode}
         direction={direction}
         index={index}
+        targetCellPosition={targetCellPosition}
+        getEditorContainerWidth={getEditorContainerWidth}
       />
     </Popup>
   );

package/src/plugins/table/ui/FloatingInsertButton/InsertButton.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import type { SyntheticEvent } from 'react';
 import React from 'react';
 
@@ -20,7 +21,7 @@ import { tableToolbarSize } from '../consts';
 import tableMessages from '../messages';
 
 export interface ButtonProps {
-  direction: TableDirection;
+  type: TableDirection;
   tableRef: HTMLElement;
   onMouseDown: (event: SyntheticEvent<HTMLButtonElement>) => void;
   hasStickyHeaders: boolean;
@@ -52,7 +53,10 @@ const getToolbarSize = (tableRef: HTMLElement): number => {
   return tableToolbarSize;
 };
 
-const getInsertLineWidth = (tableRef: HTMLElement) => {
+const getInsertLineWidth = (
+  tableRef: HTMLElement,
+  isDragAndDropEnabled?: boolean,
+) => {
   // The line gets width 100% from the table,
   // but since we have an overflow on the left,
   // we should add an offset to make up for it.
@@ -61,7 +65,7 @@ const getInsertLineWidth = (tableRef: HTMLElement) => {
   const parentOffsetWidth = parentElement!.offsetWidth;
   const { scrollLeft } = parentElement!;
   const diff = offsetWidth - parentOffsetWidth;
-  const toolbarSize = getToolbarSize(tableRef);
+  const toolbarSize = isDragAndDropEnabled ? 0 : getToolbarSize(tableRef);
   return (
     Math.min(
       offsetWidth + toolbarSize,
@@ -74,10 +78,80 @@ const tooltipMessageByType = (type: TableDirection) => {
   return type === 'row' ? tableMessages.insertRow : tableMessages.insertColumn;
 };
 
+export const InsertButtonForDragAndDrop = ({
+  onMouseDown,
+  tableRef,
+  type,
+  intl: { formatMessage },
+  hasStickyHeaders,
+}: ButtonProps & WrappedComponentProps) => {
+  const content = (
+    <Tooltip
+      content={
+        <ToolTipContent
+          description={formatMessage(tooltipMessageByType(type))}
+          keymap={type === 'row' ? addRowAfter : addColumnAfter}
+        />
+      }
+      position="top"
+    >
+      <>
+        <div className={ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER}>
+          <button
+            type="button"
+            className={ClassName.DRAG_CONTROLS_INSERT_BUTTON}
+            onMouseDown={onMouseDown}
+          >
+            <svg
+              width="10"
+              height="10"
+              viewBox="0 0 10 10"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M5.41667 4.58333V2.91667C5.41667 2.80616 5.37277 2.70018 5.29463 2.62204C5.21649 2.5439 5.11051 2.5 5 2.5C4.88949 2.5 4.78351 2.5439 4.70537 2.62204C4.62723 2.70018 4.58333 2.80616 4.58333 2.91667V4.58333H2.91667C2.80616 4.58333 2.70018 4.62723 2.62204 4.70537C2.5439 4.78351 2.5 4.88949 2.5 5C2.5 5.11051 2.5439 5.21649 2.62204 5.29463C2.70018 5.37277 2.80616 5.41667 2.91667 5.41667H4.58333V7.08333C4.58333 7.19384 4.62723 7.29982 4.70537 7.37796C4.78351 7.4561 4.88949 7.5 5 7.5C5.11051 7.5 5.21649 7.4561 5.29463 7.37796C5.37277 7.29982 5.41667 7.19384 5.41667 7.08333V5.41667H7.08333C7.19384 5.41667 7.29982 5.37277 7.37796 5.29463C7.4561 5.21649 7.5 5.11051 7.5 5C7.5 4.88949 7.4561 4.78351 7.37796 4.70537C7.29982 4.62723 7.19384 4.58333 7.08333 4.58333H5.41667Z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+        </div>
+        <div
+          className={ClassName.CONTROLS_INSERT_LINE}
+          style={
+            type === 'row'
+              ? { width: getInsertLineWidth(tableRef, true), left: '14px' }
+              : { height: getInsertLineHeight(tableRef, hasStickyHeaders) - 11 }
+          }
+        />
+      </>
+    </Tooltip>
+  );
+
+  const floatingButtonClassName =
+    type === 'column'
+      ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN
+      : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
+
+  return (
+    <div className={floatingButtonClassName}>
+      <div
+        className={`${ClassName.CONTROLS_INSERT_BUTTON_WRAP} ${ClassName.CONTROLS_INSERT_ROW}`}
+      >
+        {content}
+      </div>
+    </div>
+  );
+};
+
+export const DragAndDropInsertButton = injectIntl(InsertButtonForDragAndDrop);
+
 const InsertButton = ({
   onMouseDown,
   tableRef,
-  direction,
+  type,
   intl: { formatMessage },
   hasStickyHeaders,
 }: ButtonProps & WrappedComponentProps) => {
@@ -85,8 +159,8 @@ const InsertButton = ({
     <Tooltip
       content={
         <ToolTipContent
-          description={formatMessage(tooltipMessageByType(direction))}
-          keymap={direction === 'row' ? addRowAfter : addColumnAfter}
+          description={formatMessage(tooltipMessageByType(type))}
+          keymap={type === 'row' ? addRowAfter : addColumnAfter}
         />
       }
       position="top"
@@ -110,7 +184,7 @@ const InsertButton = ({
         <div
           className={ClassName.CONTROLS_INSERT_LINE}
           style={
-            direction === 'row'
+            type === 'row'
               ? { width: getInsertLineWidth(tableRef) }
               : { height: getInsertLineHeight(tableRef, hasStickyHeaders) }
           }
@@ -120,7 +194,7 @@ const InsertButton = ({
   );
 
   const floatingButtonClassName =
-    direction === 'column'
+    type === 'column'
       ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN
       : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
 

package/src/plugins/table/ui/FloatingInsertButton/getPopupOptions.ts

@@ -11,17 +11,26 @@ import {
 const HORIZONTAL_ALIGN_COLUMN_BUTTON = -(tableInsertColumnButtonSize / 2);
 const HORIZONTAL_ALIGN_NUMBERED_COLUMN_BUTTON =
   HORIZONTAL_ALIGN_COLUMN_BUTTON + akEditorTableNumberColumnWidth;
+
 const VERTICAL_ALIGN_COLUMN_BUTTON =
   tableToolbarSize + tableInsertColumnButtonOffset;
 
+const VERTICAL_ALIGN_COLUMN_BUTTON_DRAG = tableInsertColumnButtonOffset;
+
 const HORIZONTAL_ALIGN_ROW_BUTTON = -(
   tableToolbarSize +
   tableInsertColumnButtonOffset +
   tableInsertColumnButtonSize
 );
+
+const HORIZONTAL_ALIGN_ROW_BUTTON_DRAG = -18;
+
 const VERTICAL_ALIGN_ROW_BUTTON = tableInsertColumnButtonSize / 2;
 
-function getRowOptions(index: number): Partial<PopupProps> {
+function getRowOptions(
+  index: number,
+  isDragAndDropEnabled: boolean,
+): Partial<PopupProps> {
   let defaultOptions = {
     alignX: 'left',
     alignY: 'bottom',
@@ -43,7 +52,9 @@ function getRowOptions(index: number): Partial<PopupProps> {
       return {
         ...position,
         // Left position should be always the offset (To place in the correct position even if the table has overflow).
-        left: HORIZONTAL_ALIGN_ROW_BUTTON,
+        left: isDragAndDropEnabled
+          ? HORIZONTAL_ALIGN_ROW_BUTTON_DRAG
+          : HORIZONTAL_ALIGN_ROW_BUTTON,
       };
     },
   };
@@ -53,11 +64,17 @@ function getColumnOptions(
   index: number,
   tableContainer: HTMLElement | null,
   hasNumberedColumns: boolean,
+  isDragAndDropEnabled: boolean,
 ): Partial<PopupProps> {
   const options: Partial<PopupProps> = {
     alignX: 'end',
     alignY: 'top',
-    offset: [HORIZONTAL_ALIGN_COLUMN_BUTTON, VERTICAL_ALIGN_COLUMN_BUTTON],
+    offset: [
+      HORIZONTAL_ALIGN_COLUMN_BUTTON,
+      isDragAndDropEnabled
+        ? VERTICAL_ALIGN_COLUMN_BUTTON_DRAG
+        : VERTICAL_ALIGN_COLUMN_BUTTON,
+    ],
     // :: (position: PopupPosition) -> PopupPosition
     // Limit the InsertButton position to the table container
     // if the left position starts before it
@@ -108,13 +125,19 @@ function getPopupOptions(
   direction: TableDirection,
   index: number,
   hasNumberedColumns: boolean,
+  isDragAndDropEnabled: boolean,
   tableContainer: HTMLElement | null,
 ): Partial<PopupProps> {
   switch (direction) {
     case 'column':
-      return getColumnOptions(index, tableContainer, hasNumberedColumns);
+      return getColumnOptions(
+        index,
+        tableContainer,
+        hasNumberedColumns,
+        isDragAndDropEnabled,
+      );
     case 'row':
-      return getRowOptions(index);
+      return getRowOptions(index, isDragAndDropEnabled);
     default:
       return {};
   }

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

@@ -34,7 +34,7 @@ import { TableCssClassName as ClassName } from '../../types';
 import { checkIfNumberColumnEnabled } from '../../utils';
 
 import getPopupOptions from './getPopupOptions';
-import InsertButton from './InsertButton';
+import InsertButton, { DragAndDropInsertButton } from './InsertButton';
 
 export interface Props {
   editorView: EditorView;
@@ -45,6 +45,7 @@ export interface Props {
   insertRowButtonIndex?: number;
   isHeaderColumnEnabled?: boolean;
   isHeaderRowEnabled?: boolean;
+  isDragAndDropEnabled?: boolean;
   mountPoint?: HTMLElement;
   boundariesElement?: HTMLElement;
   scrollableElement?: HTMLElement;
@@ -76,6 +77,7 @@ export class FloatingInsertButton extends React.Component<
       boundariesElement,
       isHeaderColumnEnabled,
       isHeaderRowEnabled,
+      isDragAndDropEnabled,
       dispatchAnalyticsEvent,
     } = this.props;
 
@@ -199,16 +201,26 @@ export class FloatingInsertButton extends React.Component<
           type,
           index,
           hasNumberedColumns,
+          !!isDragAndDropEnabled,
           tableContainerWrapper,
         )}
         zIndex={zIndex}
       >
-        <InsertButton
-          direction={type}
-          tableRef={tableRef}
-          onMouseDown={type === 'column' ? this.insertColumn : this.insertRow}
-          hasStickyHeaders={this.props.hasStickyHeaders || false}
-        />
+        {isDragAndDropEnabled ? (
+          <DragAndDropInsertButton
+            type={type}
+            tableRef={tableRef}
+            onMouseDown={type === 'column' ? this.insertColumn : this.insertRow}
+            hasStickyHeaders={this.props.hasStickyHeaders || false}
+          />
+        ) : (
+          <InsertButton
+            type={type}
+            tableRef={tableRef}
+            onMouseDown={type === 'column' ? this.insertColumn : this.insertRow}
+            hasStickyHeaders={this.props.hasStickyHeaders || false}
+          />
+        )}
       </Popup>
     );
   }

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

@@ -5,15 +5,17 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { token } from '@atlaskit/tokens';
 
 import {
   clearHoverSelection,
   hoverColumns,
   selectColumn,
 } from '../../../commands';
+import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import type { CellHoverMeta } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
-import { getSelectedColumnIndexes } from '../../../utils';
+import { getRowsParams, getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
 
 export interface ColumnControlsProps {
@@ -27,6 +29,7 @@ export interface ColumnControlsProps {
   localId?: string;
   rowHeights?: number[];
   colWidths?: (number | undefined)[];
+  hasHeaderColumn?: boolean;
 }
 
 const getSelectedColumns = (selection: Selection) => {
@@ -51,10 +54,13 @@ export const ColumnControls = ({
   isInDanger,
   rowHeights,
   colWidths,
+  hasHeaderColumn,
 }: ColumnControlsProps) => {
   const widths =
     colWidths?.map((width) => (width ? `${width - 1}px` : '0px')).join(' ') ??
     '0px';
+  // TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
+  const columnParams = getRowsParams(colWidths ?? []);
   const colIndex = hoveredCell?.colIndex;
   const selectedColIndexes = getSelectedColumns(editorView.state.selection);
 
@@ -94,8 +100,13 @@ export const ColumnControls = ({
     }
   }, [editorView, tableActive]);
 
+  const handleMouseUp = useCallback(() => {
+    const { state, dispatch } = editorView;
+    toggleDragMenu(undefined, 'column', colIndex)(state, dispatch);
+  }, [editorView, colIndex]);
+
   return (
-    <div className={ClassName.COLUMN_CONTROLS_WITH_DRAG}>
+    <div className={ClassName.DRAG_COLUMN_CONTROLS}>
       <div
         className={ClassName.COLUMN_CONTROLS_INNER}
         data-testid="table-floating-column-controls"
@@ -104,6 +115,33 @@ export const ColumnControls = ({
           marginTop,
         }}
       >
+        {!isResizing &&
+          columnParams.map(({ startIndex, endIndex }, index) => (
+            <div
+              style={{
+                gridColumn: `${index + 1} / span 1`,
+              }}
+              data-start-index={startIndex}
+              data-end-index={endIndex}
+              className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER}
+              contentEditable={false}
+              key={index}
+            >
+              {!hasHeaderColumn && index === 0 && (
+                <div
+                  style={{
+                    left: '0px',
+                    right: 'unset',
+                  }}
+                  className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT}
+                />
+              )}
+              <div
+                className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT}
+                style={columnParams.length - 1 === index ? { right: '0' } : {}}
+              />
+            </div>
+          ))}
         {tableActive &&
           !isResizing &&
           !!hoveredCell &&
@@ -111,7 +149,12 @@ export const ColumnControls = ({
             <div
               style={{
                 gridColumn: gridColumnPosition,
-                marginTop: `-15px`,
+                zIndex: 99,
+                display: 'flex',
+                width: '100%',
+                justifyContent: 'center',
+                alignItems: 'center',
+                marginTop: token('space.negative.025', '-2px'),
               }}
               data-column-control-index={hoveredCell.colIndex}
               data-testid="table-floating-column-control"
@@ -132,6 +175,7 @@ export const ColumnControls = ({
                 onClick={handleClick}
                 onMouseOver={handleMouseOver}
                 onMouseOut={handleMouseOut}
+                onMouseUp={handleMouseUp}
               />
             </div>
           )}

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

@@ -12,7 +12,11 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/el
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { CellHoverMeta, DraggableSourceData } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
-import { getColumnsWidths, getRowHeights } from '../../utils';
+import {
+  containsHeaderColumn,
+  getColumnsWidths,
+  getRowHeights,
+} from '../../utils';
 
 import { ColumnControls } from './ColumnControls';
 import { ColumnDropTargets } from './ColumnDropTargets';
@@ -53,6 +57,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
   const [hasDropTargets, setHasDropTargets] = useState(false);
   const node = getNode();
   const currentNodeLocalId = node?.attrs.localId;
+  const hasHeaderColumn = containsHeaderColumn(node);
 
   useEffect(() => {
     if (tableRef && window?.ResizeObserver) {
@@ -118,12 +123,13 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
 
   const mountTo = (tableRef && tableRef?.parentElement) || document.body;
 
+  if (!tableActive) {
+    return null;
+  }
+
   return ReactDOM.createPortal(
     <div
       className={ClassName.COLUMN_CONTROLS_WRAPPER}
-      style={{
-        pointerEvents: 'none',
-      }}
       data-testid="table-floating-column-controls-wrapper"
     >
       <ColumnControls
@@ -137,6 +143,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
         isInDanger={isInDanger}
         rowHeights={rowHeights}
         colWidths={colWidths}
+        hasHeaderColumn={hasHeaderColumn}
       />
       {hasDropTargets && (
         <ColumnDropTargets

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

@@ -9,12 +9,17 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { token } from '@atlaskit/tokens';
 
 import { clearHoverSelection } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import type { CellHoverMeta } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
-import { getRowHeights, getSelectedRowIndexes } from '../../../utils';
+import {
+  getRowHeights,
+  getRowsParams,
+  getSelectedRowIndexes,
+} from '../../../utils';
 import { DragHandle } from '../../DragHandle';
 
 type DragControlsProps = {
@@ -24,6 +29,8 @@ type DragControlsProps = {
   tableActive?: boolean;
   hoveredCell?: CellHoverMeta;
   isInDanger?: boolean;
+  isResizing?: boolean;
+  hasHeaderRow?: boolean;
   hoverRows: (rows: number[], danger?: boolean) => void;
   selectRow: (row: number, expand: boolean) => void;
   updateCellHoverLocation: (rowIndex: number) => void;
@@ -47,11 +54,14 @@ const DragControlsComponent = ({
   tableActive,
   editorView,
   isInDanger,
+  isResizing,
+  hasHeaderRow,
   hoverRows,
   selectRow,
   updateCellHoverLocation,
 }: DragControlsProps & WrappedComponentProps) => {
   const rowHeights = getRowHeights(tableRef);
+  const rowsParams = getRowsParams(rowHeights);
   const heights = rowHeights.map((height) => `${height - 1}px`).join(' ');
   const selectedRowIndexes = getSelectedRows(editorView.state.selection);
   const rowWidth = tableRef.offsetWidth;
@@ -83,25 +93,21 @@ const DragControlsComponent = ({
 
   const handleMouseMove = useCallback(
     (e: MouseEvent) => {
-      // avoid updating if event target is drag handle
-      if (
-        !(e.nativeEvent.target as Element).classList.contains(
-          ClassName.ROW_CONTROLS_WITH_DRAG,
-        )
-      ) {
+      const isParentDragControls = (e.nativeEvent.target as Element).closest(
+        `.${ClassName.DRAG_ROW_CONTROLS}`,
+      );
+      const rowIndex = (e.nativeEvent.target as Element).getAttribute(
+        'data-start-index',
+      );
+
+      // avoid updating if event target is not related
+      if (!isParentDragControls || !rowIndex) {
         return;
       }
 
-      const hoverHeight = e.nativeEvent.offsetY;
-      let totalHeight = 0;
-      const rowIndex = rowHeights.findIndex((row) => {
-        totalHeight += row;
-        return hoverHeight <= totalHeight;
-      });
-
-      updateCellHoverLocation(rowIndex);
+      updateCellHoverLocation(Number(rowIndex));
     },
-    [updateCellHoverLocation, rowHeights],
+    [updateCellHoverLocation],
   );
 
   const handleMouseOver = useCallback(() => {
@@ -117,13 +123,37 @@ const DragControlsComponent = ({
 
   return (
     <div
-      className={ClassName.ROW_CONTROLS_WITH_DRAG}
+      className={ClassName.DRAG_ROW_CONTROLS}
       style={{
         gridTemplateRows: heights,
       }}
       onMouseMove={handleMouseMove}
     >
-      {Number.isFinite(rowIndex) && (
+      {!isResizing &&
+        rowsParams.map(({ startIndex, endIndex }, index) => (
+          <div
+            style={{
+              gridRow: `${index + 1} / span 1`,
+            }}
+            data-start-index={startIndex}
+            data-end-index={endIndex}
+            className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER}
+            contentEditable={false}
+            key={index}
+          >
+            {!hasHeaderRow && index === 0 && (
+              <div
+                style={{
+                  top: '0px',
+                  left: token('space.075', '6px'),
+                }}
+                className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT}
+              />
+            )}
+            <div className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT} />
+          </div>
+        ))}
+      {!isResizing && Number.isFinite(rowIndex) && (
         <div
           style={{
             gridRow: gridRowPosition,
@@ -132,6 +162,7 @@ const DragControlsComponent = ({
             alignItems: 'center',
             justifyContent: 'center',
           }}
+          data-testid="table-floating-row-drag-handle"
         >
           <DragHandle
             tableLocalId={tableNode?.attrs?.localId ?? ''}

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

@@ -166,6 +166,8 @@ export default class TableFloatingControls extends Component<Props, State> {
                 editorView={editorView}
                 tableActive={tableActive}
                 isInDanger={isInDanger}
+                isResizing={isResizing}
+                hasHeaderRow={hasHeaderRow}
                 hoverRows={this.hoverRows}
                 selectRow={this.selectRow}
                 updateCellHoverLocation={this.updateCellHoverLocation}