@atlaskit/editor-plugin-table 5.3.12 → 5.3.14

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

@@ -11,7 +11,7 @@ import {
   selectRow,
 } from '@atlaskit/editor-tables/utils';
 
-import type { DraggableType } from '../../types';
+import type { DraggableType, TableDirection } from '../../types';
 import { TableDecorations } from '../../types';
 import {
   createColumnInsertLine,
@@ -121,3 +121,34 @@ export const moveSource = (
       return select(targetIndex)(newTr);
     },
   );
+
+export const toggleDragMenu = (
+  isDragMenuOpen: boolean | undefined,
+  direction?: TableDirection,
+  index?: number,
+) =>
+  createCommand(
+    (state) => {
+      let {
+        isDragMenuOpen: previousOpenState,
+        dragMenuDirection,
+        dragMenuIndex,
+      } = getPluginState(state);
+      if (previousOpenState === isDragMenuOpen) {
+        return false;
+      }
+
+      return {
+        type: DragAndDropActionType.TOGGLE_DRAG_MENU,
+        data: {
+          isDragMenuOpen:
+            isDragMenuOpen === undefined ? !previousOpenState : isDragMenuOpen,
+          direction: direction ?? dragMenuDirection,
+          index: index ?? dragMenuIndex,
+        },
+      };
+    },
+    (tr: Transaction) => {
+      return tr.setMeta('addToHistory', false);
+    },
+  );

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

@@ -5,6 +5,8 @@ import type {
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { getCellsInRow } from '@atlaskit/editor-tables/utils';
+import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 
 import type { DraggableSourceData } from '../../types';
@@ -14,6 +16,7 @@ import {
 } from '../../utils/merged-cells';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 
+import { DragAndDropActionType } from './actions';
 import { clearDropTarget, moveSource, setDropTarget } from './commands';
 import { DropTargetType } from './consts';
 import { createPluginState, getPluginState } from './plugin-factory';
@@ -27,12 +30,49 @@ export const createPlugin = (
   return new SafePlugin({
     state: createPluginState(dispatch, (state) => ({
       decorationSet: DecorationSet.empty,
-      // TODO: This is example placeholder state. We could use this to track which row/col is currently set as the drop target
-      // This would result in a blue highlight being displayed on the corrisponding row/column to single the drop target location.
       dropTargetType: DropTargetType.NONE,
       dropTargetIndex: 0,
+      isDragMenuOpen: false,
+      dragMenuIndex: 0,
     })),
     key: pluginKey,
+    appendTransaction: (transactions, oldState, newState) => {
+      const { targetCellPosition: oldTargetCellPosition } =
+        getTablePluginState(oldState);
+      const { targetCellPosition: newTargetCellPosition } =
+        getTablePluginState(newState);
+      const { isDragMenuOpen, dragMenuIndex } = getPluginState(newState);
+
+      // What's happening here? you asked... In a nutshell;
+      // If the target cell position changes while the drag menu is open then we want to close the drag menu if it has been opened.
+      // This will stop the drag menu from moving around the screen to different row/cols. Too achieve this we need
+      // to check if the new target cell position is pointed at a different cell than what the drag menu was opened on.
+      if (oldTargetCellPosition !== newTargetCellPosition) {
+        if (isDragMenuOpen) {
+          const tr = newState.tr;
+          const action = {
+            type: DragAndDropActionType.TOGGLE_DRAG_MENU,
+            data: {
+              isDragMenuOpen: false,
+              direction: undefined,
+            },
+          };
+
+          if (newTargetCellPosition !== undefined) {
+            const cells = getCellsInRow(dragMenuIndex)(tr.selection);
+            if (
+              cells &&
+              cells.length &&
+              cells[0].node !== tr.doc.nodeAt(newTargetCellPosition)
+            ) {
+              return tr.setMeta(pluginKey, action);
+            } // else NOP
+          } else {
+            return tr.setMeta(pluginKey, action);
+          }
+        }
+      }
+    },
     view: (editorView: EditorView) => {
       return {
         destroy: monitorForElements({
@@ -57,7 +97,14 @@ export const createPlugin = (
             // watch for changes
             return localId === tableNode?.attrs.localId;
           },
+          onDragStart: ({ location }) => {
+            autoScroller.start({ input: location.current.input });
+          },
           onDrag(event) {
+            autoScroller.updateInput({
+              input: event.location.current.input,
+            });
+
             const data = getDraggableDataFromEvent(event);
             // If no data can be found then it's most like we do not want to perform any drag actions
             if (!data) {
@@ -79,6 +126,7 @@ export const createPlugin = (
             );
           },
           onDrop(event) {
+            autoScroller.stop();
             const data = getDraggableDataFromEvent(event);
 
             // If no data can be found then it's most like we do not want to perform any drop action

package/src/plugins/table/pm-plugins/drag-and-drop/reducer.ts

@@ -22,6 +22,13 @@ export default (
         dropTargetType: DropTargetType.NONE,
         dropTargetIndex: 0,
       };
+    case DragAndDropActionType.TOGGLE_DRAG_MENU:
+      return {
+        ...pluginState,
+        isDragMenuOpen: action.data.isDragMenuOpen,
+        dragMenuDirection: action.data.direction,
+        dragMenuIndex: action.data.index,
+      };
     default:
       return pluginState;
   }

package/src/plugins/table/pm-plugins/drag-and-drop/types.ts

@@ -1,9 +1,14 @@
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 
+import type { TableDirection } from '../../types';
+
 import type { DropTargetType } from './consts';
 
 export interface DragAndDropPluginState {
   decorationSet: DecorationSet;
   dropTargetType: DropTargetType;
   dropTargetIndex: number;
+  isDragMenuOpen: boolean;
+  dragMenuDirection?: TableDirection;
+  dragMenuIndex: number;
 }

package/src/plugins/table/types.ts

@@ -293,6 +293,10 @@ export const TableCssClassName = {
   CONTROLS_BUTTON_OVERLAY: `${tablePrefixSelector}-controls__button-overlay`,
   LAYOUT_BUTTON: `${tablePrefixSelector}-layout-button`,
 
+  DRAG_CONTROLS_INSERT_BUTTON: `${tablePrefixSelector}-controls__drag-insert-button`,
+  DRAG_CONTROLS_INSERT_BUTTON_INNER: `${tablePrefixSelector}-controls__drag-insert-button-inner`,
+  DRAG_CONTROLS_INSERT_BUTTON_WRAP: `${tablePrefixSelector}-controls__drag-insert-button-wrap`,
+
   CONTROLS_INSERT_MARKER: `${tablePrefixSelector}-controls__insert-marker`,
   CONTROLS_INSERT_COLUMN: `${tablePrefixSelector}-controls__insert-column`,
   CONTROLS_INSERT_ROW: `${tablePrefixSelector}-controls__insert-row`,
@@ -308,8 +312,14 @@ export const TableCssClassName = {
   CONTROLS_CORNER_BUTTON: `${tablePrefixSelector}-corner-button`,
 
   /** Controls with drag handle */
-  COLUMN_CONTROLS_WITH_DRAG: `${tablePrefixSelector}-column-controls-with-drag`,
-  ROW_CONTROLS_WITH_DRAG: `${tablePrefixSelector}-row-controls-with-drag`,
+  DRAG_ROW_CONTROLS: `${tablePrefixSelector}-drag-row-controls`,
+  DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-row-floating-insert-dot-wrapper`,
+  DRAG_ROW_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-row-floating-insert-dot`,
+
+  DRAG_COLUMN_CONTROLS: `${tablePrefixSelector}-drag-column-controls`,
+  DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-columns-floating-insert-dot-wrapper`,
+  DRAG_COLUMN_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-columns-floating-insert-dot`,
+
   DRAG_HANDLE_BUTTON_CONTAINER: `${tablePrefixSelector}-drag-handle-button-container`,
 
   /** Other classes */
@@ -405,6 +415,8 @@ export type InvalidNodeAttr = {
   tableLocalId: string;
 };
 
+export type TableDirection = 'row' | 'column';
+
 /**
  * Drag and Drop interfaces
  */

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

@@ -7,6 +7,7 @@ import ReactDOM from 'react-dom';
 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 type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
 import { DragPreview } from '../DragPreview';
 import { DragHandleIcon } from '../icons';
@@ -18,11 +19,12 @@ type DragHandleProps = {
   indexes: number[];
   previewWidth?: number;
   previewHeight?: number;
-  direction?: 'column' | 'row';
+  direction?: TableDirection;
   appearance?: DragHandleAppearance;
   onClick?: MouseEventHandler;
   onMouseOver?: MouseEventHandler;
   onMouseOut?: MouseEventHandler;
+  onMouseUp?: MouseEventHandler;
 };
 
 export const DragHandle = ({
@@ -34,6 +36,7 @@ export const DragHandle = ({
   previewHeight,
   onMouseOver,
   onMouseOut,
+  onMouseUp,
   onClick,
 }: DragHandleProps) => {
   const dragHandleDivRef = useRef<HTMLButtonElement>(null);
@@ -85,6 +88,7 @@ export const DragHandle = ({
       data-testid="table-floating-column-controls-drag-handle"
       onMouseOver={onMouseOver}
       onMouseOut={onMouseOut}
+      onMouseUp={onMouseUp}
       onClick={onClick}
     >
       <DragHandleIcon />

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

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { Box, xcss } from '@atlaskit/primitives';
 
+import type { TableDirection } from '../../types';
 import { DragInMotionIcon } from '../icons/DragInMotionIcon';
 
 const boxStyles = xcss({
@@ -17,7 +18,7 @@ export const DragPreview = ({
   width,
   height,
 }: {
-  direction: 'column' | 'row';
+  direction: TableDirection;
   width: number;
   height: number;
 }) => {

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

@@ -23,6 +23,7 @@ import {
 } from '../../commands-with-analytics';
 import { getPluginState as getTablePluginState } from '../../pm-plugins/plugin-factory';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
+import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
 import {
   getColumnDeleteButtonParams,
@@ -60,7 +61,7 @@ export interface State {
 
 export function getSelectionType(
   selection: Selection,
-): 'column' | 'row' | undefined {
+): TableDirection | undefined {
   if (!isTableSelected(selection) && selection instanceof CellSelection) {
     if (selection.isRowSelection()) {
       return 'row';

package/src/plugins/table/ui/FloatingDeleteButton/types.ts

@@ -1 +1,3 @@
-export type CellSelectionType = 'column' | 'row' | undefined;
+import type { TableDirection } from '../../types';
+
+export type CellSelectionType = TableDirection | undefined;

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

@@ -0,0 +1,99 @@
+import React from 'react';
+
+import type { Command } from '@atlaskit/editor-common/types';
+import {
+  ArrowKeyNavigationType,
+  DropdownMenu,
+} from '@atlaskit/editor-common/ui-menu';
+import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+
+import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
+import type { PluginConfig, TableDirection } from '../../types';
+import type { DragMenuConfig } from '../../utils/drag-menu';
+import { getDragMenuConfig } from '../../utils/drag-menu';
+import { dragMenuDropdownWidth } from '../consts';
+
+type DragMenuProps = {
+  direction?: TableDirection;
+  index?: number;
+  tableRef?: HTMLTableElement;
+  tableNode?: PmNode;
+  editorView: EditorView;
+  isOpen?: boolean;
+  targetCellPosition?: number;
+  mountPoint?: HTMLElement;
+  boundariesElement?: HTMLElement;
+  scrollableElement?: HTMLElement;
+  pluginConfig?: PluginConfig;
+};
+
+const convertToDropdownItems = (dragMenuConfig: DragMenuConfig[]) => {
+  let menuItems: MenuItem[] = [];
+  let menuCallback: { [key: string]: Command } = {};
+  dragMenuConfig.forEach((item) => {
+    menuItems.push({
+      key: item.id,
+      content: item.title,
+      value: { name: item.id },
+      isDisabled: item.disabled,
+    });
+    item.onClick && (menuCallback[item.id] = item.onClick);
+  });
+  return { menuItems, menuCallback };
+};
+
+export const DragMenu = ({
+  direction = 'row',
+  index,
+  isOpen,
+  editorView,
+  tableNode,
+  mountPoint,
+  boundariesElement,
+  scrollableElement,
+}: DragMenuProps) => {
+  const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
+
+  const dragMenuConfig = getDragMenuConfig(direction, tableMap, index);
+
+  const { menuItems, menuCallback } = convertToDropdownItems(dragMenuConfig);
+
+  const closeMenu = () => {
+    const { state, dispatch } = editorView;
+    toggleDragMenu(false)(state, dispatch);
+  };
+
+  const onMenuItemActivated = ({ item }: { item: MenuItem }) => {
+    menuCallback[item.value.name]?.(editorView.state, editorView.dispatch);
+    closeMenu();
+  };
+
+  if (!menuItems) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu
+      mountTo={mountPoint}
+      //This needs be removed when the a11y is completely handled
+      //Disabling key navigation now as it works only partially
+      arrowKeyNavigationProviderOptions={{
+        type: ArrowKeyNavigationType.MENU,
+        disableArrowKeyNavigation: true,
+      }}
+      items={[
+        {
+          items: menuItems,
+        },
+      ]}
+      isOpen={isOpen}
+      onOpenChange={closeMenu}
+      onItemActivated={onMenuItemActivated}
+      fitWidth={dragMenuDropdownWidth}
+      boundariesElement={boundariesElement}
+    />
+  );
+};

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

@@ -0,0 +1,91 @@
+import React from 'react';
+
+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';
+
+import { DragMenu } from './DragMenu';
+
+export interface Props {
+  editorView: EditorView;
+  isOpen: boolean;
+  tableRef?: HTMLTableElement;
+  tableNode?: PmNode;
+  mountPoint?: HTMLElement;
+  boundariesElement?: HTMLElement;
+  scrollableElement?: HTMLElement;
+  direction?: TableDirection;
+  index?: number;
+  targetCellPosition?: number;
+}
+
+const FloatingDragMenu = ({
+  mountPoint,
+  boundariesElement,
+  scrollableElement,
+  editorView,
+  isOpen,
+  tableRef,
+  tableNode,
+  direction,
+  index,
+  targetCellPosition,
+}: Props) => {
+  if (
+    !isOpen ||
+    !targetCellPosition ||
+    editorView.state.doc.nodeSize <= targetCellPosition
+  ) {
+    return null;
+  }
+
+  const domAtPos = editorView.domAtPos.bind(editorView);
+  const targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
+  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={direction === 'row' ? 'left' : 'center'}
+      alignY="top"
+      target={targetCellRef as HTMLElement}
+      mountTo={mountPoint}
+      boundariesElement={boundariesElement}
+      scrollableElement={scrollableElement}
+      fitWidth={dragMenuDropdownWidth}
+      // 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={akEditorFloatingOverlapPanelZIndex}
+      forcePlacement={true}
+      offset={offset}
+      stick={true}
+    >
+      <DragMenu
+        editorView={editorView}
+        isOpen={isOpen}
+        boundariesElement={boundariesElement}
+        tableNode={tableNode}
+        direction={direction}
+        index={index}
+      />
+    </Popup>
+  );
+};
+
+FloatingDragMenu.displayName = 'FloatingDragMenu';
+
+export default FloatingDragMenu;

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';
 
@@ -14,12 +15,13 @@ import { closestElement } from '@atlaskit/editor-common/utils';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import Tooltip from '@atlaskit/tooltip';
 
+import type { TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
 import { tableToolbarSize } from '../consts';
 import tableMessages from '../messages';
 
 export interface ButtonProps {
-  type: 'row' | 'column';
+  type: TableDirection;
   tableRef: HTMLElement;
   onMouseDown: (event: SyntheticEvent<HTMLButtonElement>) => void;
   hasStickyHeaders: boolean;
@@ -51,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.
@@ -60,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,
@@ -69,10 +74,80 @@ const getInsertLineWidth = (tableRef: HTMLElement) => {
   );
 };
 
-const tooltipMessageByType = (type: string) => {
+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,

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

@@ -1,6 +1,7 @@
 import type { PopupProps } from '@atlaskit/editor-common/ui';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 
+import type { TableDirection } from '../../types';
 import {
   tableInsertColumnButtonOffset,
   tableInsertColumnButtonSize,
@@ -10,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',
@@ -42,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,
       };
     },
   };
@@ -52,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
@@ -104,16 +122,22 @@ function getColumnOptions(
 }
 
 function getPopupOptions(
-  type: 'column' | 'row',
+  direction: TableDirection,
   index: number,
   hasNumberedColumns: boolean,
+  isDragAndDropEnabled: boolean,
   tableContainer: HTMLElement | null,
 ): Partial<PopupProps> {
-  switch (type) {
+  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 {};
   }