@atlaskit/editor-plugin-table 7.1.0 → 7.1.2

package/src/__tests__/unit/nodeviews/TableComponent.tsx

@@ -7,11 +7,11 @@ import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { Command, DocBuilder } from '@atlaskit/editor-common/types';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { selectTableClosestToPos } from '@atlaskit/editor-tables/src/utils/select-nodes';
 import {
   findTable,
   findTableClosestToPos,
   selectTable,
+  selectTableClosestToPos,
 } from '@atlaskit/editor-tables/utils';
 // eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
 import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';

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

@@ -1,7 +1,19 @@
+import type { DocBuilder } from '@atlaskit/editor-common/types';
+import type { LightEditorPlugin } from '@atlaskit/editor-core/src/create-editor/get-plugins';
+import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
+import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+import { gridPlugin } from '@atlaskit/editor-plugin-grid';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import { selectionPlugin } from '@atlaskit/editor-plugin-selection';
+import { widthPlugin } from '@atlaskit/editor-plugin-width';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 // eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
-import { createEditorState } from '@atlaskit/editor-test-helpers/create-editor-state';
-// eslint-disable-next-line import/no-extraneous-dependencies -- Removed import for fixing circular dependencies
+import {
+  createProsemirrorEditorFactory,
+  Preset,
+} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   doc,
   table,
@@ -9,27 +21,43 @@ import {
   tdEmpty,
   tr,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
+import tablePlugin from '../../../../plugin';
 import { buildColumnControlsDecorations } from '../../../../pm-plugins/decorations/utils';
+import { pluginKey } from '../../../../pm-plugins/plugin-key';
 import { TableDecorations } from '../../../../types';
 
-// Mock Feature flags instead of using ffTest because we don't use the feature flag directly
-jest.mock('@atlaskit/platform-feature-flags', () => ({
-  getBooleanFF: jest.fn().mockImplementation(() => false),
-}));
-
-afterEach(() => {
-  (getBooleanFF as jest.Mock).mockReset();
-});
-
 describe('tables: column controls decorations', () => {
+  const createEditor = createProsemirrorEditorFactory();
+  const editor = (doc: DocBuilder, isDragAndDropEnabled = false) =>
+    createEditor({
+      doc,
+      attachTo: document.body,
+      featureFlags: {
+        tableDragAndDrop: isDragAndDropEnabled,
+      },
+      preset: new Preset<LightEditorPlugin>()
+        .add([featureFlagsPlugin, {}])
+        .add([analyticsPlugin, {}])
+        .add(contentInsertionPlugin)
+        .add(decorationsPlugin)
+        .add(widthPlugin)
+        .add(guidelinePlugin)
+        .add(gridPlugin)
+        .add(selectionPlugin)
+        .add([
+          tablePlugin,
+          {
+            tableOptions: { advanced: true },
+          },
+        ]),
+      pluginKey,
+    });
+
   it(`should return an empty decorationSet ${TableDecorations.COLUMN_CONTROLS_DECORATIONS} type when drag and drop is enabled`, () => {
-    (getBooleanFF as jest.Mock).mockImplementation(
-      (name) => name === 'platform.editor.table.drag-and-drop',
-    );
     const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
-    const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
+    const editorInstance = editor(doc(table()(tr(tdCursor, tdEmpty))), true);
+    const state = editorInstance.editorView.state;
     const nextDecorationSet = buildColumnControlsDecorations({
       decorationSet: DecorationSet.empty,
       tr: state.tr,
@@ -47,7 +75,8 @@ describe('tables: column controls decorations', () => {
 
   it(`should return an empty decorationSet ${TableDecorations.COLUMN_CONTROLS_DECORATIONS} type when drag and drop is disabled`, () => {
     const decorationKey = TableDecorations.COLUMN_CONTROLS_DECORATIONS;
-    const state = createEditorState(doc(table()(tr(tdCursor, tdEmpty))));
+    const editorInstance = editor(doc(table()(tr(tdCursor, tdEmpty))), false);
+    const state = editorInstance.editorView.state;
     const nextDecorationSet = buildColumnControlsDecorations({
       decorationSet: DecorationSet.empty,
       tr: state.tr,

package/src/event-handlers.ts

@@ -47,7 +47,10 @@ import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
 import type { ElementContentRects } from './types';
-import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
+import {
+  TableCssClassName as ClassName,
+  RESIZE_HANDLE_AREA_DECORATION_GAP,
+} from './types';
 import {
   convertHTMLCellIndexToColumnIndex,
   getColumnIndexMappedToColumnIndexInFirstRow,
@@ -91,6 +94,14 @@ const isFocusingDragHandles = (event: Event) =>
   event.relatedTarget.closest('button') &&
   event.relatedTarget.getAttribute('draggable') === 'true';
 
+const isFocusingDragHandlesClickableZone = (event: Event) =>
+  event instanceof FocusEvent &&
+  event.relatedTarget instanceof HTMLElement &&
+  event.relatedTarget.closest('button') &&
+  event.relatedTarget.classList.contains(
+    ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE,
+  );
+
 export const handleBlur = (view: EditorView, event: Event): boolean => {
   const { state, dispatch } = view;
   // IE version check for ED-4665
@@ -100,7 +111,8 @@ export const handleBlur = (view: EditorView, event: Event): boolean => {
     !isFocusingCalendar(event) &&
     !isFocusingModal(event) &&
     !isFocusingFloatingToolbar(event) &&
-    !isFocusingDragHandles(event)
+    !isFocusingDragHandles(event) &&
+    !isFocusingDragHandlesClickableZone(event)
   ) {
     setEditorFocus(false)(state, dispatch);
   }

package/src/pm-plugins/drag-and-drop/commands-with-analytics.ts

@@ -79,6 +79,7 @@ export const moveSourceWithAnalytics =
     tr?: Transaction,
   ) => {
     return withEditorAnalyticsAPI(({ selection }: EditorState) => {
+      const direction = sourceIndexes[0] > targetIndex ? -1 : 1;
       const { totalRowCount, totalColumnCount } =
         getSelectedTableInfo(selection);
       return {
@@ -93,7 +94,9 @@ export const moveSourceWithAnalytics =
           count: sourceIndexes.length,
           // This identifies the total amount of row/cols the move operation covered. The distance covered should be a representaion
           // of the minimum distance. This will account for large selection being moved causing a large distance travelled value.
-          distance: Math.min(...sourceIndexes.map((v) => targetIndex - v)),
+          distance:
+            Math.min(...sourceIndexes.map((v) => Math.abs(targetIndex - v))) *
+            direction,
           // If a drop doesn't actually change anything then we're going to mark the event as cancelled.
           status: sourceIndexes.includes(targetIndex)
             ? TABLE_STATUS.CANCELLED
@@ -130,15 +133,15 @@ export const moveSourceWithAnalyticsViaShortcut =
       ? getSelectedRowIndexes(selectionRect)
       : getSelectedColumnIndexes(selectionRect);
 
-    // FIXME: We can move if only one row/column selected
-    if (selectedIndexes.length === 0 || selectedIndexes.length > 1) {
+    if (selectedIndexes.length === 0) {
       return false;
     }
 
-    const sourceIndex = selectedIndexes[0];
+    // const sourceIndex = selectedIndexes[0];
     // we can move only by one row/column
     // 'direction' can only be 1 (for right or down) or -1 (for left or up)
-    const targetIndex = sourceIndex + direction;
+    const targetIndex =
+      Math[direction < 0 ? 'min' : 'max'](...selectedIndexes) + direction;
 
     // We can move only if targetIndex is a positive number and is not higher than the total number of rows/columns.
     const { totalRowCount, totalColumnCount } = getSelectedTableInfo(selection);
@@ -155,8 +158,8 @@ export const moveSourceWithAnalyticsViaShortcut =
 
     // We can move only if there are no merged cells in the source or target row/column
     const hasMergedCellsInSource = isRow
-      ? hasMergedCellsInRow(sourceIndex)(selection)
-      : hasMergedCellsInColumn(sourceIndex)(selection);
+      ? hasMergedCellsInRow(selectedIndexes)(selection)
+      : hasMergedCellsInColumn(selectedIndexes)(selection);
     if (hasMergedCellsInSource) {
       return false;
     }
@@ -171,7 +174,7 @@ export const moveSourceWithAnalyticsViaShortcut =
     return moveSourceWithAnalytics(editorAnalyticsAPI)(
       INPUT_METHOD.SHORTCUT,
       sourceType,
-      [sourceIndex],
+      selectedIndexes,
       targetIndex,
     )(state, dispatch);
   };

package/src/pm-plugins/drag-and-drop/commands.ts

@@ -2,15 +2,9 @@ import type {
   EditorState,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import type { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import {
-  moveColumn,
-  moveRow,
-  selectColumn,
-  selectRow,
-} from '@atlaskit/editor-tables/utils';
+import { moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
 
 import type { DraggableType, TableDirection } from '../../types';
 import { TableDecorations } from '../../types';
@@ -19,7 +13,6 @@ import {
   createRowInsertLine,
   updateDecorations,
 } from '../../utils';
-import { combineTransforms } from '../../utils/transforms';
 
 import { DragAndDropActionType } from './actions';
 import { DropTargetType } from './consts';
@@ -118,31 +111,10 @@ export const moveSource = (
       if (sourceIndexes.includes(targetIndex)) {
         return nextTr.setMeta('addToHistory', false);
       }
-
-      const anchor = nextTr.selection.anchor;
-      const selectStartOfTable = (newTr: Transaction) =>
-        newTr.setSelection(TextSelection.create(newTr.doc, anchor));
-
-      const isTableRow = sourceType === 'table-row';
-      if (isTableRow) {
-        return combineTransforms(
-          [
-            moveRow(state, sourceIndexes, targetIndex),
-            selectStartOfTable,
-            selectRow(targetIndex),
-          ],
-          nextTr,
-        );
-      }
-
-      return combineTransforms(
-        [
-          moveColumn(state, sourceIndexes, targetIndex),
-          selectStartOfTable,
-          selectColumn(targetIndex),
-        ],
-        nextTr,
-      );
+      const move = sourceType === 'table-row' ? moveRow : moveColumn;
+      return move(state, sourceIndexes, targetIndex, {
+        selectAfterMove: true,
+      })(nextTr);
     },
   );
 

package/src/pm-plugins/drag-and-drop/plugin.ts

@@ -82,9 +82,6 @@ const destroyFn = (editorView: EditorView, editorAnalyticsAPI: any) => {
         if (
           !indexes ||
           !localId ||
-          // FIXME: We currently don't support DragNDrop of multiple elements. For now we will not bother to monitor drags
-          // of more then 1 item.
-          indexes.length !== 1 ||
           !(type === 'table-row' || type === 'table-column')
         ) {
           return false;

package/src/pm-plugins/drag-and-drop/utils/monitor.ts

@@ -45,11 +45,6 @@ export const getDraggableDataFromEvent = ({
     return undefined;
   }
 
-  // FIXME: currently we only support a single row/col index being moved, remove this clause when this is no longer the case.
-  if (sourceIndexes.length > 1) {
-    return undefined;
-  }
-
   const targetClosestEdge =
     extractClosestEdge(destination.data) ??
     ((targetType === 'table-row' ? 'top' : 'left') as Edge);

package/src/types.ts

@@ -330,6 +330,7 @@ export const TableCssClassName = {
   DRAG_COLUMN_CONTROLS_INNER: `${tablePrefixSelector}-col-controls__inner`,
 
   DRAG_HANDLE_BUTTON_CONTAINER: `${tablePrefixSelector}-drag-handle-button-container`,
+  DRAG_HANDLE_BUTTON_CLICKABLE_ZONE: `${tablePrefixSelector}-drag-handle-button-clickable-zone`,
 
   DRAG_CORNER_BUTTON: `${tablePrefixSelector}-drag-corner-button`,
   DRAG_CORNER_BUTTON_INNER: `${tablePrefixSelector}-drag-corner-button-inner`,

package/src/ui/DragHandle/index.tsx

@@ -11,11 +11,13 @@ import { browser } from '@atlaskit/editor-common/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/util/set-custom-native-drag-preview';
+import { token } from '@atlaskit/tokens';
 
 import { getPluginState } from '../../pm-plugins/plugin-factory';
 import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
+import { dragTableInsertColumnButtonSize } from '../consts';
 import { DragPreview } from '../DragPreview';
 
 import { HandleIconComponent } from './HandleIconComponent';
@@ -64,17 +66,18 @@ const DragHandleComponent = ({
   const { hoveredColumns, hoveredRows } = getPluginState(editorView.state);
 
   const { selection } = editorView.state;
+  const isRow = direction === 'row';
+  const isColumn = direction === 'column';
 
-  const isRowHandleHovered = direction === 'row' && hoveredRows.length > 0;
-  const isColumnHandleHovered =
-    direction === 'column' && hoveredColumns.length > 0;
+  const isRowHandleHovered = isRow && hoveredRows.length > 0;
+  const isColumnHandleHovered = isColumn && hoveredColumns.length > 0;
 
   const hasMergedCells = useMemo(
     () =>
-      direction === 'row'
+      isRow
         ? hasMergedCellsInRow(indexes[0])(selection)
         : hasMergedCellsInColumn(indexes[0])(selection),
-    [indexes, direction, selection],
+    [indexes, isRow, selection],
   );
 
   const handleIconProps = {
@@ -113,7 +116,7 @@ const DragHandleComponent = ({
                 // be generated.
                 container.style.left = `-${rect.width - 0.0001}px`;
               }
-              if (direction === 'row') {
+              if (isRow) {
                 return { x: 12, y: rect.height / 2 };
               } else {
                 return { x: rect.width / 2 + 4, y: 12 };
@@ -132,18 +135,35 @@ const DragHandleComponent = ({
     tableLocalId,
     direction,
     indexes,
+    isRow,
     editorView.state.selection,
     hasMergedCells,
     canDrag,
   ]);
 
-  const showDragMenuAnchorId =
-    direction === 'row'
-      ? 'drag-handle-button-row'
-      : 'drag-handle-button-column';
+  const showDragMenuAnchorId = isRow
+    ? 'drag-handle-button-row'
+    : 'drag-handle-button-column';
 
   return (
     <>
+      <button
+        className={ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE}
+        data-testid="table-drag-handle-clickable-zone-button"
+        style={{
+          height: isRow
+            ? `calc(100% - ${dragTableInsertColumnButtonSize}px)`
+            : `${token('space.200', '16px')}`, // 16px here because it's the size of drag handle button's large side
+          width: isRow
+            ? `${token('space.200', '16px')}` // 16px here because it's the size of drag handle button's large side
+            : `calc(100% - ${dragTableInsertColumnButtonSize}px)`,
+          left: isRow ? '3px' : undefined,
+          bottom: isColumn ? '0' : undefined,
+          alignSelf: isColumn ? 'none' : 'center',
+          zIndex: isColumn ? '-1' : 'auto',
+        }}
+        onClick={onClick}
+      />
       <button
         id={isDragMenuTarget ? showDragMenuAnchorId : undefined}
         className={classnames(
@@ -155,13 +175,12 @@ const DragHandleComponent = ({
         )}
         ref={dragHandleDivRef}
         style={{
-          transform: direction === 'column' ? 'none' : 'rotate(90deg)',
+          transform: isColumn ? 'none' : 'rotate(90deg)',
+          alignSelf: isColumn ? 'none' : 'center',
         }}
         data-testid="table-drag-handle-button"
         aria-label={formatMessage(
-          direction === 'row'
-            ? messages.rowDragHandle
-            : messages.columnDragHandle,
+          isRow ? messages.rowDragHandle : messages.columnDragHandle,
         )}
         onMouseOver={onMouseOver}
         onMouseOut={onMouseOut}

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -73,7 +73,10 @@ import {
   getSelectedColumnIndexes,
   getSelectedRowIndexes,
 } from '../../utils';
-import { contextualMenuDropdownWidth } from '../consts';
+import {
+  contextualMenuDropdownWidth,
+  contextualMenuDropdownWidthDnD,
+} from '../consts';
 import {
   AddColRightIcon,
   AddRowBelowIcon,
@@ -145,7 +148,11 @@ export class ContextualMenu extends Component<
           onMouseEnter={this.handleItemMouseEnter}
           onMouseLeave={this.handleItemMouseLeave}
           fitHeight={188}
-          fitWidth={contextualMenuDropdownWidth}
+          fitWidth={
+            isDragAndDropEnabled
+              ? contextualMenuDropdownWidthDnD
+              : contextualMenuDropdownWidth
+          }
           boundariesElement={boundariesElement}
           offset={offset}
           section={

package/src/ui/FloatingContextualMenu/index.tsx

@@ -23,6 +23,7 @@ import { getPluginState } from '../../pm-plugins/plugin-factory';
 import type { PluginConfig } from '../../types';
 import {
   contextualMenuDropdownWidth,
+  contextualMenuDropdownWidthDnD,
   contextualMenuTriggerSize,
 } from '../consts';
 
@@ -53,7 +54,9 @@ const FloatingContextualMenu = ({
   getEditorContainerWidth,
 }: Props) => {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
-  const { targetCellPosition } = getPluginState(editorView.state);
+  const { targetCellPosition, isDragAndDropEnabled } = getPluginState(
+    editorView.state,
+  );
   if (
     !isOpen ||
     !targetCellPosition ||
@@ -89,7 +92,11 @@ const FloatingContextualMenu = ({
       boundariesElement={boundariesElement}
       scrollableElement={scrollableElement}
       fitHeight={188}
-      fitWidth={contextualMenuDropdownWidth}
+      fitWidth={
+        isDragAndDropEnabled
+          ? contextualMenuDropdownWidthDnD
+          : contextualMenuDropdownWidth
+      }
       // z-index value below is to ensure that this menu is above other floating menu
       // in table, but below floating dialogs like typeaheads, pickers, etc.
       zIndex={
@@ -101,7 +108,7 @@ const FloatingContextualMenu = ({
       offset={[-7, 0]}
       stick={true}
     >
-      <div css={tablePopupStyles}>
+      <div css={tablePopupStyles(isDragAndDropEnabled)}>
         <ContextualMenu
           editorView={editorView}
           offset={[contextualMenuTriggerSize / 2, -contextualMenuTriggerSize]}

package/src/ui/FloatingContextualMenu/styles.ts

@@ -5,7 +5,10 @@ import { N60A, N90 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
 import { TableCssClassName as ClassName } from '../../types';
-import { contextualMenuDropdownWidth } from '../consts';
+import {
+  contextualMenuDropdownWidth,
+  contextualMenuDropdownWidthDnD,
+} from '../consts';
 
 export const cellColourPreviewStyles = (selectedColor: string) => css`
   &::before {
@@ -20,7 +23,9 @@ export const elementBeforeIconStyles = css`
 
 // TODO Delete this comment after verifying space token -> previous value `padding: 8px`
 // TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
-export const tablePopupStyles = css`
+export const tablePopupStyles = (
+  isDragAndDropEnabled: boolean | undefined,
+) => css`
   .${ClassName.CONTEXTUAL_SUBMENU} {
     border-radius: ${token('border.radius', '3px')};
     background: ${token('elevation.surface.overlay', 'white')};
@@ -31,7 +36,9 @@ export const tablePopupStyles = css`
     display: block;
     position: absolute;
     top: 0;
-    left: ${contextualMenuDropdownWidth}px;
+    left: ${isDragAndDropEnabled
+      ? contextualMenuDropdownWidthDnD
+      : contextualMenuDropdownWidth}px;
     padding: ${token('space.100', '8px')};
 
     > div {

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

@@ -159,10 +159,17 @@ export const ColumnControls = ({
     }
   }, [editorView, tableActive]);
 
-  const handleMouseUp = useCallback(() => {
-    const { state, dispatch } = editorView;
-    toggleDragMenu(undefined, 'column', colIndex)(state, dispatch);
-  }, [editorView, colIndex]);
+  const handleMouseUp = useCallback(
+    (event) => {
+      const { state, dispatch } = editorView;
+      if (event.shiftKey) {
+        return;
+      }
+
+      toggleDragMenu(undefined, 'column', colIndex)(state, dispatch);
+    },
+    [editorView, colIndex],
+  );
 
   const colIndexes = useMemo(() => {
     return [colIndex!];
@@ -240,6 +247,13 @@ export const ColumnControls = ({
         : selectedColIndexes
       : colIndexes;
 
+    const previewWidth =
+      colWidths?.reduce<number>(
+        (sum, v, i) =>
+          sum + (v ?? tableCellMinWidth) * (indexes.includes(i) ? 1 : 0),
+        0,
+      ) ?? tableCellMinWidth;
+
     return (
       <div
         key={type}
@@ -251,6 +265,8 @@ export const ColumnControls = ({
           height: 'fit-content',
           placeSelf: 'center',
           zIndex: 99,
+          width: '100%',
+          position: 'relative',
         }}
         data-column-control-index={hoveredCell.colIndex}
         data-testid={`table-floating-column-${
@@ -263,7 +279,7 @@ export const ColumnControls = ({
           tableLocalId={localId || ''}
           indexes={indexes}
           forceDefaultHandle={isHover ? false : isColumnsSelected}
-          previewWidth={colWidths?.[colIndex!] ?? tableCellMinWidth}
+          previewWidth={previewWidth}
           previewHeight={previewHeight}
           appearance={
             isSelecting ? currentSelectionAppearance : hoveredAppearance

package/src/ui/TableFloatingColumnControls/ColumnDropTargets/index.tsx

@@ -6,33 +6,21 @@ import { ColumnDropTarget } from './ColumnDropTarget';
 
 export interface Props {
   tableRef: HTMLTableElement;
-  stickyTop?: number;
   tableHeight?: number;
   localId?: string;
-  rowHeights?: number[];
   colWidths?: (number | undefined)[];
 }
 
 export const ColumnDropTargets: React.FC<Props> = ({
   tableRef,
   tableHeight,
-  stickyTop,
   localId,
-  rowHeights,
   colWidths,
 }) => {
   if (!tableRef) {
     return null;
   }
 
-  const firstRow = tableRef.querySelector('tr');
-  const hasHeaderRow = firstRow
-    ? firstRow.getAttribute('data-header-row')
-    : false;
-
-  const marginTop =
-    hasHeaderRow && stickyTop !== undefined ? rowHeights?.[0] ?? 0 : 0;
-
   return (
     <div
       className={ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS}
@@ -50,7 +38,7 @@ export const ColumnDropTargets: React.FC<Props> = ({
               localId={localId}
               width={width}
               height={tableHeight}
-              marginTop={marginTop}
+              marginTop={0}
             />
           );
         })}

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -165,10 +165,8 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
       {isDragging && (
         <ColumnDropTargets
           tableRef={tableRef}
-          stickyTop={tableActive ? stickyTop : undefined}
           tableHeight={tableRect.height}
           localId={currentNodeLocalId}
-          rowHeights={rowHeights}
           colWidths={colWidths}
         />
       )}

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

@@ -113,13 +113,20 @@ const DragControlsComponent = ({
     });
   }, [editorView]);
 
-  const onMouseUp = useCallback(() => {
-    toggleDragMenu(
-      undefined,
-      'row',
-      hoveredCell?.rowIndex,
-    )(editorView.state, editorView.dispatch);
-  }, [editorView, hoveredCell?.rowIndex]);
+  const onMouseUp = useCallback(
+    (event) => {
+      if (event.shiftKey) {
+        return;
+      }
+
+      toggleDragMenu(
+        undefined,
+        'row',
+        hoveredCell?.rowIndex,
+      )(editorView.state, editorView.dispatch);
+    },
+    [editorView, hoveredCell?.rowIndex],
+  );
 
   const rowIndex = hoveredCell?.rowIndex;
 
@@ -228,6 +235,11 @@ const DragControlsComponent = ({
         : selectedRowIndexes
       : rowIndexes;
 
+    const previewHeight = rowHeights.reduce(
+      (sum, v, i) => sum + v * (indexes.includes(i) ? 1 : 0),
+      0,
+    );
+
     return (
       <div
         key={type}
@@ -235,7 +247,9 @@ const DragControlsComponent = ({
           gridRow: isSelecting ? selectedRowPosition : gridRowPosition,
           gridColumn: '2',
           // DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
+          display: 'flex',
           width: '9px',
+          height: '100%',
           position: 'relative',
           right: '-0.5px',
         }}
@@ -250,7 +264,7 @@ const DragControlsComponent = ({
           indexes={indexes}
           forceDefaultHandle={isHover ? false : isRowsSelected}
           previewWidth={tableWidth}
-          previewHeight={rowHeights[rowIndex!]}
+          previewHeight={previewHeight}
           appearance={
             isSelecting ? currentSelectionAppearance : hoveredAppearance
           }