@atlaskit/editor-plugin-table 5.5.12 → 5.5.13

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 5.5.13
+
+### Patch Changes
+
+- [#60425](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60425) [`0caaaa7105f9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0caaaa7105f9) - [ux] Fix drag menu position and anchor element
+
 ## 5.5.12
 
 ### Patch Changes

package/dist/cjs/plugins/table/ui/DragHandle/index.js

@@ -22,7 +22,8 @@ var _HandleIconComponent = require("./HandleIconComponent");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var DragHandle = exports.DragHandle = function DragHandle(_ref) {
-  var tableLocalId = _ref.tableLocalId,
+  var isDragMenuTarget = _ref.isDragMenuTarget,
+    tableLocalId = _ref.tableLocalId,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
     _ref$appearance = _ref.appearance,
@@ -114,7 +115,9 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
       });
     }
   }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells, _canDrag]);
+  var showDragMenuAnchorId = direction === 'row' ? 'drag-handle-button-row' : 'drag-handle-button-column';
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
+    id: isDragMenuTarget ? showDragMenuAnchorId : undefined,
     className: (0, _classnames2.default)(_types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, (0, _defineProperty2.default)({}, _types.TableCssClassName.DRAG_HANDLE_DISABLED, !_canDrag || hasMergedCells)),
     ref: dragHandleDivRef,
     style: {

package/dist/cjs/plugins/table/ui/FloatingDragMenu/index.js

@@ -7,9 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ui = require("@atlaskit/editor-common/ui");
-var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _consts = require("../consts");
 var _DragMenu = require("./DragMenu");
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
@@ -18,7 +17,6 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     scrollableElement = _ref.scrollableElement,
     editorView = _ref.editorView,
     isOpen = _ref.isOpen,
-    tableRef = _ref.tableRef,
     tableNode = _ref.tableNode,
     direction = _ref.direction,
     index = _ref.index,
@@ -28,18 +26,17 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
-  var domAtPos = editorView.domAtPos.bind(editorView);
-  var targetCellRef = (0, _utils.findDomRefAtPos)(targetCellPosition, domAtPos);
-  if (!targetCellRef) {
+  var targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
+  if (!targetHandleRef || !(editorView.state.selection instanceof _cellSelection.CellSelection)) {
     return null;
   }
-  var tableMap = tableNode ? _tableMap.TableMap.get(tableNode) : undefined;
-  var offset = direction === 'row' ? [7, 0] : index === ((tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) || 1) - 1 ? [14, 0] : [-14, 0];
+  var offset = direction === 'row' ? [-9, 6] : [0, -7];
+
   // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
-    alignX: direction === 'row' ? 'left' : 'center',
-    alignY: "top",
-    target: targetCellRef,
+    alignX: direction === 'row' ? 'right' : undefined,
+    alignY: direction === 'row' ? 'start' : undefined,
+    target: targetHandleRef,
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,

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

@@ -138,8 +138,9 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
         zIndex: 99
       },
       "data-column-control-index": hoveredCell.colIndex,
-      "data-testid": isHover ? 'table-floating-column-control-hover' : 'table-floating-column-control'
+      "data-testid": 'table-floating-column-control'
     }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
+      isDragMenuTarget: !isHover,
       direction: "column",
       tableLocalId: localId || '',
       indexes: indexes,

package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js

@@ -150,8 +150,9 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
         position: 'relative',
         right: '-0.5px'
       },
-      "data-testid": isHover ? 'table-floating-row-drag-handle-hover' : 'table-floating-row-drag-handle'
+      "data-testid": 'table-floating-row-drag-handle'
     }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
+      isDragMenuTarget: !isHover,
       direction: "row",
       tableLocalId: currentNodeLocalId,
       indexes: indexes,

package/dist/es2019/plugins/table/ui/DragHandle/index.js

@@ -10,6 +10,7 @@ import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { DragPreview } from '../DragPreview';
 import { HandleIconComponent } from './HandleIconComponent';
 export const DragHandle = ({
+  isDragMenuTarget,
   tableLocalId,
   direction = 'row',
   appearance = 'default',
@@ -98,7 +99,9 @@ export const DragHandle = ({
       });
     }
   }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells, canDrag]);
+  const showDragMenuAnchorId = direction === 'row' ? 'drag-handle-button-row' : 'drag-handle-button-column';
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    id: isDragMenuTarget ? showDragMenuAnchorId : undefined,
     className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, {
       [ClassName.DRAG_HANDLE_DISABLED]: !canDrag || hasMergedCells
     }),

package/dist/es2019/plugins/table/ui/FloatingDragMenu/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { dragMenuDropdownWidth } from '../consts';
 import { DragMenu } from './DragMenu';
 const FloatingDragMenu = ({
@@ -11,7 +10,6 @@ const FloatingDragMenu = ({
   scrollableElement,
   editorView,
   isOpen,
-  tableRef,
   tableNode,
   direction,
   index,
@@ -22,18 +20,17 @@ const FloatingDragMenu = ({
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
-  const domAtPos = editorView.domAtPos.bind(editorView);
-  const targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
-  if (!targetCellRef) {
+  const targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
+  if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
-  const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
-  const offset = direction === 'row' ? [7, 0] : index === ((tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) || 1) - 1 ? [14, 0] : [-14, 0];
+  const offset = direction === 'row' ? [-9, 6] : [0, -7];
+
   // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return /*#__PURE__*/React.createElement(Popup, {
-    alignX: direction === 'row' ? 'left' : 'center',
-    alignY: "top",
-    target: targetCellRef,
+    alignX: direction === 'row' ? 'right' : undefined,
+    alignY: direction === 'row' ? 'start' : undefined,
+    target: targetHandleRef,
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,

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

@@ -136,8 +136,9 @@ export const ColumnControls = ({
         zIndex: 99
       },
       "data-column-control-index": hoveredCell.colIndex,
-      "data-testid": isHover ? 'table-floating-column-control-hover' : 'table-floating-column-control'
+      "data-testid": 'table-floating-column-control'
     }, /*#__PURE__*/React.createElement(DragHandle, {
+      isDragMenuTarget: !isHover,
       direction: "column",
       tableLocalId: localId || '',
       indexes: indexes,

package/dist/es2019/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js

@@ -140,8 +140,9 @@ const DragControlsComponent = ({
         position: 'relative',
         right: '-0.5px'
       },
-      "data-testid": isHover ? 'table-floating-row-drag-handle-hover' : 'table-floating-row-drag-handle'
+      "data-testid": 'table-floating-row-drag-handle'
     }, /*#__PURE__*/React.createElement(DragHandle, {
+      isDragMenuTarget: !isHover,
       direction: "row",
       tableLocalId: currentNodeLocalId,
       indexes: indexes,

package/dist/esm/plugins/table/ui/DragHandle/index.js

@@ -12,7 +12,8 @@ import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { DragPreview } from '../DragPreview';
 import { HandleIconComponent } from './HandleIconComponent';
 export var DragHandle = function DragHandle(_ref) {
-  var tableLocalId = _ref.tableLocalId,
+  var isDragMenuTarget = _ref.isDragMenuTarget,
+    tableLocalId = _ref.tableLocalId,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
     _ref$appearance = _ref.appearance,
@@ -104,7 +105,9 @@ export var DragHandle = function DragHandle(_ref) {
       });
     }
   }, [tableLocalId, direction, indexes, editorView.state.selection, hasMergedCells, _canDrag]);
+  var showDragMenuAnchorId = direction === 'row' ? 'drag-handle-button-row' : 'drag-handle-button-column';
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    id: isDragMenuTarget ? showDragMenuAnchorId : undefined,
     className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, _defineProperty({}, ClassName.DRAG_HANDLE_DISABLED, !_canDrag || hasMergedCells)),
     ref: dragHandleDivRef,
     style: {

package/dist/esm/plugins/table/ui/FloatingDragMenu/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { dragMenuDropdownWidth } from '../consts';
 import { DragMenu } from './DragMenu';
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
@@ -11,7 +10,6 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     scrollableElement = _ref.scrollableElement,
     editorView = _ref.editorView,
     isOpen = _ref.isOpen,
-    tableRef = _ref.tableRef,
     tableNode = _ref.tableNode,
     direction = _ref.direction,
     index = _ref.index,
@@ -21,18 +19,17 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
-  var domAtPos = editorView.domAtPos.bind(editorView);
-  var targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
-  if (!targetCellRef) {
+  var targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
+  if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
-  var tableMap = tableNode ? TableMap.get(tableNode) : undefined;
-  var offset = direction === 'row' ? [7, 0] : index === ((tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) || 1) - 1 ? [14, 0] : [-14, 0];
+  var offset = direction === 'row' ? [-9, 6] : [0, -7];
+
   // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return /*#__PURE__*/React.createElement(Popup, {
-    alignX: direction === 'row' ? 'left' : 'center',
-    alignY: "top",
-    target: targetCellRef,
+    alignX: direction === 'row' ? 'right' : undefined,
+    alignY: direction === 'row' ? 'start' : undefined,
+    target: targetHandleRef,
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,

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

@@ -129,8 +129,9 @@ export var ColumnControls = function ColumnControls(_ref) {
         zIndex: 99
       },
       "data-column-control-index": hoveredCell.colIndex,
-      "data-testid": isHover ? 'table-floating-column-control-hover' : 'table-floating-column-control'
+      "data-testid": 'table-floating-column-control'
     }, /*#__PURE__*/React.createElement(DragHandle, {
+      isDragMenuTarget: !isHover,
       direction: "column",
       tableLocalId: localId || '',
       indexes: indexes,

package/dist/esm/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js

@@ -140,8 +140,9 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
         position: 'relative',
         right: '-0.5px'
       },
-      "data-testid": isHover ? 'table-floating-row-drag-handle-hover' : 'table-floating-row-drag-handle'
+      "data-testid": 'table-floating-row-drag-handle'
     }, /*#__PURE__*/React.createElement(DragHandle, {
+      isDragMenuTarget: !isHover,
       direction: "row",
       tableLocalId: currentNodeLocalId,
       indexes: indexes,

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

@@ -16,6 +16,7 @@ type DragHandleProps = {
     onMouseUp?: MouseEventHandler;
     editorView: EditorView;
     canDrag?: boolean;
+    isDragMenuTarget: boolean;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, canDrag, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ isDragMenuTarget, tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, canDrag, }: DragHandleProps) => JSX.Element;
 export {};

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

@@ -18,7 +18,7 @@ export interface Props {
     canDrag?: boolean;
 }
 declare const FloatingDragMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableRef, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, }: Props): JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, }: Props): JSX.Element | null;
     displayName: string;
 };
 export default FloatingDragMenu;

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

@@ -16,6 +16,7 @@ type DragHandleProps = {
     onMouseUp?: MouseEventHandler;
     editorView: EditorView;
     canDrag?: boolean;
+    isDragMenuTarget: boolean;
 };
-export declare const DragHandle: ({ tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, canDrag, }: DragHandleProps) => JSX.Element;
+export declare const DragHandle: ({ isDragMenuTarget, tableLocalId, direction, appearance, indexes, forceDefaultHandle, previewWidth, previewHeight, onMouseOver, onMouseOut, onMouseUp, onClick, editorView, canDrag, }: DragHandleProps) => JSX.Element;
 export {};

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

@@ -18,7 +18,7 @@ export interface Props {
     canDrag?: boolean;
 }
 declare const FloatingDragMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableRef, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, }: Props): JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, }: Props): JSX.Element | null;
     displayName: string;
 };
 export default FloatingDragMenu;

package/package.json

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

package/src/__tests__/unit/ui/FloatingDragMenu.tsx

@@ -33,7 +33,7 @@ import {
 import { ffTest } from '@atlassian/feature-flags-test-utils';
 
 import tablePlugin from '../../../plugins/table-plugin';
-import FloatingDragMenu from '../../../plugins/table/ui/FloatingDragMenu';
+import { DragMenu } from '../../../plugins/table/ui/FloatingDragMenu/DragMenu';
 
 describe('FloatingDragMenu', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -72,14 +72,13 @@ describe('FloatingDragMenu', () => {
               editorRef,
             }}
           >
-            <FloatingDragMenu
+            <DragMenu
               editorView={editorView}
-              isOpen
+              isOpen={true}
               getEditorContainerWidth={jest.fn()}
               tableRef={tableRef as HTMLTableElement}
               tableNode={tableNode?.node}
               direction="row"
-              targetCellPosition={1}
             />
           </ReactEditorViewContext.Provider>,
         );
@@ -98,14 +97,13 @@ describe('FloatingDragMenu', () => {
               editorRef,
             }}
           >
-            <FloatingDragMenu
+            <DragMenu
               editorView={editorView}
-              isOpen
+              isOpen={true}
               getEditorContainerWidth={jest.fn()}
               tableRef={tableRef as HTMLTableElement}
               tableNode={tableNode?.node}
               direction="row"
-              targetCellPosition={1}
             />
           </ReactEditorViewContext.Provider>,
         );
@@ -127,14 +125,14 @@ describe('FloatingDragMenu', () => {
             editorRef,
           }}
         >
-          <FloatingDragMenu
+          <div id="drag-handle-button-row">dragmenu anchor</div>
+          <DragMenu
             editorView={editorView}
-            isOpen
+            isOpen={true}
             getEditorContainerWidth={jest.fn()}
             tableRef={tableRef as HTMLTableElement}
             tableNode={tableNode?.node}
             direction="row"
-            targetCellPosition={1}
           />
         </ReactEditorViewContext.Provider>,
       );
@@ -163,14 +161,13 @@ describe('FloatingDragMenu', () => {
             editorRef,
           }}
         >
-          <FloatingDragMenu
+          <DragMenu
             editorView={editorView}
-            isOpen
+            isOpen={true}
             getEditorContainerWidth={jest.fn()}
             tableRef={tableRef as HTMLTableElement}
             tableNode={tableNode?.node}
             direction="column"
-            targetCellPosition={1}
           />
         </ReactEditorViewContext.Provider>,
       );

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

@@ -33,9 +33,11 @@ type DragHandleProps = {
   onMouseUp?: MouseEventHandler;
   editorView: EditorView;
   canDrag?: boolean;
+  isDragMenuTarget: boolean; // this is identify which current handle component is
 };
 
 export const DragHandle = ({
+  isDragMenuTarget,
   tableLocalId,
   direction = 'row',
   appearance = 'default',
@@ -131,9 +133,15 @@ export const DragHandle = ({
     canDrag,
   ]);
 
+  const showDragMenuAnchorId =
+    direction === 'row'
+      ? 'drag-handle-button-row'
+      : 'drag-handle-button-column';
+
   return (
     <>
       <button
+        id={isDragMenuTarget ? showDragMenuAnchorId : undefined}
         className={classnames(
           ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
           appearance,

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

@@ -3,10 +3,9 @@ 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 { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 
 import type { TableDirection } from '../../types';
 import { dragMenuDropdownWidth } from '../consts';
@@ -34,7 +33,6 @@ const FloatingDragMenu = ({
   scrollableElement,
   editorView,
   isOpen,
-  tableRef,
   tableNode,
   direction,
   index,
@@ -50,24 +48,26 @@ const FloatingDragMenu = ({
     return null;
   }
 
-  const domAtPos = editorView.domAtPos.bind(editorView);
-  const targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
-  if (!targetCellRef) {
+  const targetHandleRef =
+    direction === 'row'
+      ? document.querySelector('#drag-handle-button-row')
+      : document.querySelector('#drag-handle-button-column');
+
+  if (
+    !targetHandleRef ||
+    !(editorView.state.selection instanceof CellSelection)
+  ) {
     return null;
   }
-  const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
-  const offset =
-    direction === 'row'
-      ? [7, 0]
-      : index === (tableMap?.width || 1) - 1
-      ? [14, 0]
-      : [-14, 0];
+
+  const offset = direction === 'row' ? [-9, 6] : [0, -7];
+
   // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return (
     <Popup
-      alignX={direction === 'row' ? 'left' : 'center'}
-      alignY="top"
-      target={targetCellRef as HTMLElement}
+      alignX={direction === 'row' ? 'right' : undefined}
+      alignY={direction === 'row' ? 'start' : undefined}
+      target={targetHandleRef as HTMLElement}
       mountTo={mountPoint}
       boundariesElement={boundariesElement}
       scrollableElement={scrollableElement}

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

@@ -217,13 +217,10 @@ export const ColumnControls = ({
             zIndex: 99,
           }}
           data-column-control-index={hoveredCell.colIndex}
-          data-testid={
-            isHover
-              ? 'table-floating-column-control-hover'
-              : 'table-floating-column-control'
-          }
+          data-testid={'table-floating-column-control'}
         >
           <DragHandle
+            isDragMenuTarget={!isHover}
             direction="column"
             tableLocalId={localId || ''}
             indexes={indexes}

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

@@ -239,13 +239,10 @@ const DragControlsComponent = ({
             position: 'relative',
             right: '-0.5px',
           }}
-          data-testid={
-            isHover
-              ? 'table-floating-row-drag-handle-hover'
-              : 'table-floating-row-drag-handle'
-          }
+          data-testid={'table-floating-row-drag-handle'}
         >
           <DragHandle
+            isDragMenuTarget={!isHover}
             direction="row"
             tableLocalId={currentNodeLocalId}
             indexes={indexes}