@atlaskit/editor-plugin-table 5.3.11 → 5.3.13

package/dist/es2019/plugins/table/nodeviews/TableComponent.js

@@ -477,6 +477,7 @@ class TableComponent extends React.Component {
     }, /*#__PURE__*/React.createElement(TableFloatingControls, {
       editorView: view,
       tableRef: tableRef,
+      tableNode: node,
       tableActive: tableActive,
       hoveredRows: hoveredRows,
       hoveredCell: hoveredCell,
@@ -484,7 +485,7 @@ class TableComponent extends React.Component {
       isResizing: isResizing,
       isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
       isHeaderRowEnabled: isHeaderRowEnabled,
-      isDragAndDropEnabled: options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled,
+      isDragAndDropEnabled: isDragAndDropEnabled,
       ordering: ordering,
       isHeaderColumnEnabled: isHeaderColumnEnabled,
       hasHeaderRow: hasHeaderRow

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/actions.js

@@ -1,6 +1,7 @@
 export const DragAndDropActionType = {
   SET_DROP_TARGET: 'SET_DROP_TARGET',
-  CLEAR_DROP_TARGET: 'CLEAR_DROP_TARGET'
+  CLEAR_DROP_TARGET: 'CLEAR_DROP_TARGET',
+  TOGGLE_DRAG_MENU: 'TOGGLE_DRAG_MENU'
 };
 
 // NOTE: This should be a Union of all possible actions

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/commands.js

@@ -1,5 +1,5 @@
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
+import { moveColumn, moveRow, selectColumn, selectRow } from '@atlaskit/editor-tables/utils';
 import { TableDecorations } from '../../types';
 import { createColumnInsertLine, createRowInsertLine, updateDecorations } from '../../utils';
 import { DragAndDropActionType } from './actions';
@@ -62,6 +62,29 @@ export const moveSource = (sourceType, sourceIndex, targetIndex) => createComman
   if (sourceIndex === targetIndex) {
     return tr.setMeta('addToHistory', false);
   }
-  const move = sourceType === 'table-row' ? moveRow : moveColumn;
-  return move(sourceIndex, targetIndex)(tr);
+  const isTableRow = sourceType === 'table-row';
+  const move = isTableRow ? moveRow : moveColumn;
+  const newTr = move(sourceIndex, targetIndex)(tr);
+  const select = isTableRow ? selectRow : selectColumn;
+  return select(targetIndex)(newTr);
+});
+export const toggleDragMenu = (isDragMenuOpen, direction, index) => 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 !== null && direction !== void 0 ? direction : dragMenuDirection,
+      index: index !== null && index !== void 0 ? index : dragMenuIndex
+    }
+  };
+}, tr => {
+  return tr.setMeta('addToHistory', false);
 });

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/plugin.js

@@ -1,8 +1,10 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { getCellsInRow } from '@atlaskit/editor-tables/utils';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } 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';
@@ -12,12 +14,49 @@ export const createPlugin = (dispatch, eventDispatcher) => {
   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
+      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 => {
       return {
         destroy: monitorForElements({

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/reducer.js

@@ -16,6 +16,13 @@ export default ((pluginState, action) => {
         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/dist/es2019/plugins/table/ui/DragHandle/index.js

@@ -15,6 +15,7 @@ export const DragHandle = ({
   previewHeight,
   onMouseOver,
   onMouseOut,
+  onMouseUp,
   onClick
 }) => {
   const dragHandleDivRef = useRef(null);
@@ -73,6 +74,7 @@ export const DragHandle = ({
     "data-testid": "table-floating-column-controls-drag-handle",
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
+    onMouseUp: onMouseUp,
     onClick: onClick
   }, /*#__PURE__*/React.createElement(DragHandleIcon, null), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(DragPreview, {
     direction: direction,

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
+import { getDragMenuConfig } from '../../utils/drag-menu';
+import { dragMenuDropdownWidth } from '../consts';
+const convertToDropdownItems = dragMenuConfig => {
+  let menuItems = [];
+  let menuCallback = {};
+  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
+}) => {
+  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
+  }) => {
+    var _menuCallback$item$va;
+    (_menuCallback$item$va = menuCallback[item.value.name]) === null || _menuCallback$item$va === void 0 ? void 0 : _menuCallback$item$va.call(menuCallback, editorView.state, editorView.dispatch);
+    closeMenu();
+  };
+  if (!menuItems) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(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/dist/es2019/plugins/table/ui/FloatingDragMenu/index.js

@@ -0,0 +1,54 @@
+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 { dragMenuDropdownWidth } from '../consts';
+import { DragMenu } from './DragMenu';
+const FloatingDragMenu = ({
+  mountPoint,
+  boundariesElement,
+  scrollableElement,
+  editorView,
+  isOpen,
+  tableRef,
+  tableNode,
+  direction,
+  index,
+  targetCellPosition
+}) => {
+  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;
+  }
+
+  // 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: "left",
+    alignY: "top",
+    target: targetCellRef,
+    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: [7, 0],
+    stick: true
+  }, /*#__PURE__*/React.createElement(DragMenu, {
+    editorView: editorView,
+    isOpen: isOpen,
+    boundariesElement: boundariesElement,
+    tableNode: tableNode,
+    direction: direction,
+    index: index
+  }));
+};
+FloatingDragMenu.displayName = 'FloatingDragMenu';
+export default FloatingDragMenu;

package/dist/es2019/plugins/table/ui/FloatingInsertButton/InsertButton.js

@@ -46,7 +46,7 @@ const tooltipMessageByType = type => {
 const InsertButton = ({
   onMouseDown,
   tableRef,
-  type,
+  direction,
   intl: {
     formatMessage
   },
@@ -54,8 +54,8 @@ const InsertButton = ({
 }) => {
   const content = /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(ToolTipContent, {
-      description: formatMessage(tooltipMessageByType(type)),
-      keymap: type === 'row' ? addRowAfter : addColumnAfter
+      description: formatMessage(tooltipMessageByType(direction)),
+      keymap: direction === 'row' ? addRowAfter : addColumnAfter
     }),
     position: "top"
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -72,13 +72,13 @@ const InsertButton = ({
     fillRule: "evenodd"
   })))), /*#__PURE__*/React.createElement("div", {
     className: ClassName.CONTROLS_INSERT_LINE,
-    style: type === 'row' ? {
+    style: direction === 'row' ? {
       width: getInsertLineWidth(tableRef)
     } : {
       height: getInsertLineHeight(tableRef, hasStickyHeaders)
     }
   })));
-  const floatingButtonClassName = type === 'column' ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
+  const floatingButtonClassName = direction === 'column' ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
   return /*#__PURE__*/React.createElement("div", {
     className: floatingButtonClassName
   }, /*#__PURE__*/React.createElement("div", {

package/dist/es2019/plugins/table/ui/FloatingInsertButton/getPopupOptions.js

@@ -75,8 +75,8 @@ function getColumnOptions(index, tableContainer, hasNumberedColumns) {
   }
   return options;
 }
-function getPopupOptions(type, index, hasNumberedColumns, tableContainer) {
-  switch (type) {
+function getPopupOptions(direction, index, hasNumberedColumns, tableContainer) {
+  switch (direction) {
     case 'column':
       return getColumnOptions(index, tableContainer, hasNumberedColumns);
     case 'row':

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

@@ -114,7 +114,7 @@ export class FloatingInsertButton extends React.Component {
     }, getPopupOptions(type, index, hasNumberedColumns, tableContainerWrapper), {
       zIndex: zIndex
     }), /*#__PURE__*/React.createElement(InsertButton, {
-      type: type,
+      direction: type,
       tableRef: tableRef,
       onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
       hasStickyHeaders: this.props.hasStickyHeaders || false

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

@@ -1,8 +1,9 @@
 import React, { useCallback, useMemo } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { CellSelection } from '@atlaskit/editor-tables';
-import { findTable, getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection } from '../../../commands';
+import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowHeights, getSelectedRowIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
@@ -18,6 +19,7 @@ const getSelectedRows = selection => {
 };
 const DragControlsComponent = ({
   tableRef,
+  tableNode,
   hoveredCell,
   tableActive,
   editorView,
@@ -26,10 +28,14 @@ const DragControlsComponent = ({
   selectRow,
   updateCellHoverLocation
 }) => {
+  var _tableNode$attrs$loca, _tableNode$attrs;
   const rowHeights = getRowHeights(tableRef);
   const heights = rowHeights.map(height => `${height - 1}px`).join(' ');
   const selectedRowIndexes = getSelectedRows(editorView.state.selection);
   const rowWidth = tableRef.offsetWidth;
+  const onMouseUp = useCallback(() => {
+    toggleDragMenu(undefined, 'row', hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex)(editorView.state, editorView.dispatch);
+  }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex]);
   const rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
   const gridRowPosition = useMemo(() => {
     // if more than one row is selected, ensure the handle spans over the selected range
@@ -38,11 +44,6 @@ const DragControlsComponent = ({
     }
     return `${rowIndex + 1} / span 1`;
   }, [rowIndex, selectedRowIndexes]);
-  const getLocalId = () => {
-    var _tableNode$node, _tableNode$node$attrs;
-    const tableNode = findTable(editorView.state.selection);
-    return (tableNode === null || tableNode === void 0 ? void 0 : (_tableNode$node = tableNode.node) === null || _tableNode$node === void 0 ? void 0 : (_tableNode$node$attrs = _tableNode$node.attrs) === null || _tableNode$node$attrs === void 0 ? void 0 : _tableNode$node$attrs.localId) || '';
-  };
   const handleMouseOut = useCallback(() => {
     if (tableActive) {
       const {
@@ -86,14 +87,15 @@ const DragControlsComponent = ({
       justifyContent: 'center'
     }
   }, /*#__PURE__*/React.createElement(DragHandle, {
-    tableLocalId: getLocalId(),
+    tableLocalId: (_tableNode$attrs$loca = tableNode === null || tableNode === void 0 ? void 0 : (_tableNode$attrs = tableNode.attrs) === null || _tableNode$attrs === void 0 ? void 0 : _tableNode$attrs.localId) !== null && _tableNode$attrs$loca !== void 0 ? _tableNode$attrs$loca : '',
     indexes: [rowIndex],
     previewWidth: rowWidth,
     previewHeight: rowHeights[rowIndex],
     appearance: selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
     onClick: handleClick,
     onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut
+    onMouseOut: handleMouseOut,
+    onMouseUp: onMouseUp
   })));
 };
 export const DragControls = injectIntl(DragControlsComponent);

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

@@ -105,6 +105,7 @@ export default class TableFloatingControls extends Component {
     const {
       editorView,
       tableRef,
+      tableNode,
       isInDanger,
       isResizing,
       isNumberColumnEnabled,
@@ -138,6 +139,7 @@ export default class TableFloatingControls extends Component {
       isDragAndDropEnabled: isDragAndDropEnabled
     }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(DragControls, {
       tableRef: tableRef,
+      tableNode: tableNode,
       hoveredCell: hoveredCell,
       editorView: editorView,
       tableActive: tableActive,

package/dist/es2019/plugins/table/ui/consts.js

@@ -104,4 +104,5 @@ export const tableOverflowShadowWidthWide = 32;
 export const TABLE_SNAP_GAP = 9;
 export const TABLE_HIGHLIGHT_GAP = 10;
 export const TABLE_HIGHLIGHT_TOLERANCE = 2;
-export const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
+export const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
+export const dragMenuDropdownWidth = 240;

package/dist/es2019/plugins/table/utils/drag-menu.js

@@ -0,0 +1,44 @@
+import { moveSource } from '../pm-plugins/drag-and-drop/commands';
+const canDecrease = (index, min = 0) => index !== undefined && index > min;
+const canIncrease = (index, max = 0) => index !== undefined && index < max;
+export const getDragMenuConfig = (direction, tableMap, index) => {
+  const moveOptions = direction === 'row' ? [{
+    label: 'up',
+    offset: -1,
+    canMove: canDecrease
+  }, {
+    label: 'down',
+    offset: 1,
+    canMove: index => {
+      var _tableMap$height;
+      return canIncrease(index, ((_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0) - 1);
+    }
+  }] : [{
+    label: 'left',
+    offset: -1,
+    canMove: canDecrease
+  }, {
+    label: 'right',
+    offset: 1,
+    canMove: index => {
+      var _tableMap$width;
+      return canIncrease(index, ((_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0) - 1);
+    }
+  }];
+  return [...moveOptions.map(({
+    label,
+    offset,
+    canMove
+  }) => ({
+    id: `move_${direction}_${label}`,
+    title: `Move ${direction} ${label}`,
+    disabled: !canMove(index),
+    onClick: (state, dispatch) => {
+      if (canMove(index)) {
+        moveSource(`table-${direction}`, index, index + offset)(state, dispatch);
+        return true;
+      }
+      return false;
+    }
+  }))];
+};

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

@@ -28,6 +28,7 @@ import { getToolbarConfig } from './toolbar';
 import FloatingContextualButton from './ui/FloatingContextualButton';
 import FloatingContextualMenu from './ui/FloatingContextualMenu';
 import FloatingDeleteButton from './ui/FloatingDeleteButton';
+import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import LayoutButton from './ui/LayoutButton';
 import { isLayoutSupported } from './utils';
@@ -249,7 +250,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
           var resizingPluginState = _ref13.tableResizingPluginState,
             stickyHeadersState = _ref13.stickyHeadersState,
             tablePluginState = _ref13.tablePluginState,
-            tableWidthPluginState = _ref13.tableWidthPluginState;
+            tableWidthPluginState = _ref13.tableWidthPluginState,
+            dragAndDropState = _ref13.dragAndDropState;
           var state = editorView.state;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
@@ -266,7 +268,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             insertRowButtonIndex = _ref14.insertRowButtonIndex,
             isHeaderColumnEnabled = _ref14.isHeaderColumnEnabled,
             isHeaderRowEnabled = _ref14.isHeaderRowEnabled,
-            tableWrapperTarget = _ref14.tableWrapperTarget;
+            tableWrapperTarget = _ref14.tableWrapperTarget,
+            isDragAndDropEnabled = _ref14.isDragAndDropEnabled;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = options && !options.tableResizingEnabled && isLayoutSupported(state) && options.breakoutEnabled ? /*#__PURE__*/React.createElement(LayoutButton, {
@@ -317,6 +320,16 @@ var tablesPlugin = function tablesPlugin(_ref) {
             editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth,
             getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
+          }), isDragAndDropEnabled && /*#__PURE__*/React.createElement(FloatingDragMenu, {
+            editorView: editorView,
+            mountPoint: popupsMountPoint,
+            boundariesElement: popupsBoundariesElement,
+            tableRef: tableRef,
+            tableNode: tableNode,
+            targetCellPosition: targetCellPosition,
+            direction: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
+            index: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
+            isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing
           }), allowControls && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,

package/dist/esm/plugins/table/nodeviews/TableComponent.js

@@ -472,6 +472,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement(TableFloatingControls, {
         editorView: view,
         tableRef: tableRef,
+        tableNode: node,
         tableActive: tableActive,
         hoveredRows: hoveredRows,
         hoveredCell: hoveredCell,
@@ -479,7 +480,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isResizing: isResizing,
         isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
         isHeaderRowEnabled: isHeaderRowEnabled,
-        isDragAndDropEnabled: options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled,
+        isDragAndDropEnabled: isDragAndDropEnabled,
         ordering: ordering,
         isHeaderColumnEnabled: isHeaderColumnEnabled,
         hasHeaderRow: hasHeaderRow

package/dist/esm/plugins/table/pm-plugins/drag-and-drop/actions.js

@@ -1,6 +1,7 @@
 export var DragAndDropActionType = {
   SET_DROP_TARGET: 'SET_DROP_TARGET',
-  CLEAR_DROP_TARGET: 'CLEAR_DROP_TARGET'
+  CLEAR_DROP_TARGET: 'CLEAR_DROP_TARGET',
+  TOGGLE_DRAG_MENU: 'TOGGLE_DRAG_MENU'
 };
 
 // NOTE: This should be a Union of all possible actions

package/dist/esm/plugins/table/pm-plugins/drag-and-drop/commands.js

@@ -1,5 +1,5 @@
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
+import { moveColumn, moveRow, selectColumn, selectRow } from '@atlaskit/editor-tables/utils';
 import { TableDecorations } from '../../types';
 import { createColumnInsertLine, createRowInsertLine, updateDecorations } from '../../utils';
 import { DragAndDropActionType } from './actions';
@@ -71,7 +71,31 @@ export var moveSource = function moveSource(sourceType, sourceIndex, targetIndex
     if (sourceIndex === targetIndex) {
       return tr.setMeta('addToHistory', false);
     }
-    var move = sourceType === 'table-row' ? moveRow : moveColumn;
-    return move(sourceIndex, targetIndex)(tr);
+    var isTableRow = sourceType === 'table-row';
+    var move = isTableRow ? moveRow : moveColumn;
+    var newTr = move(sourceIndex, targetIndex)(tr);
+    var select = isTableRow ? selectRow : selectColumn;
+    return select(targetIndex)(newTr);
+  });
+};
+export var toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {
+  return createCommand(function (state) {
+    var _getPluginState3 = getPluginState(state),
+      previousOpenState = _getPluginState3.isDragMenuOpen,
+      dragMenuDirection = _getPluginState3.dragMenuDirection,
+      dragMenuIndex = _getPluginState3.dragMenuIndex;
+    if (previousOpenState === isDragMenuOpen) {
+      return false;
+    }
+    return {
+      type: DragAndDropActionType.TOGGLE_DRAG_MENU,
+      data: {
+        isDragMenuOpen: isDragMenuOpen === undefined ? !previousOpenState : isDragMenuOpen,
+        direction: direction !== null && direction !== void 0 ? direction : dragMenuDirection,
+        index: index !== null && index !== void 0 ? index : dragMenuIndex
+      }
+    };
+  }, function (tr) {
+    return tr.setMeta('addToHistory', false);
   });
 };