@atlaskit/editor-plugin-table 5.3.12 → 5.3.14

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

@@ -1,10 +1,11 @@
 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 { getRowHeights, getRowsParams, getSelectedRowIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
 const getSelectedRows = selection => {
   if (selection instanceof CellSelection && selection.isRowSelection()) {
@@ -18,18 +19,26 @@ const getSelectedRows = selection => {
 };
 const DragControlsComponent = ({
   tableRef,
+  tableNode,
   hoveredCell,
   tableActive,
   editorView,
   isInDanger,
+  isResizing,
+  hasHeaderRow,
   hoverRows,
   selectRow,
   updateCellHoverLocation
 }) => {
+  var _tableNode$attrs$loca, _tableNode$attrs;
   const rowHeights = getRowHeights(tableRef);
+  const rowsParams = getRowsParams(rowHeights);
   const heights = rowHeights.map(height => `${height - 1}px`).join(' ');
   const selectedRowIndexes = getSelectedRows(editorView.state.selection);
   const rowWidth = tableRef.offsetWidth;
+  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 +47,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 {
@@ -53,18 +57,15 @@ const DragControlsComponent = ({
     }
   }, [editorView, tableActive]);
   const handleMouseMove = useCallback(e => {
-    // avoid updating if event target is drag handle
-    if (!e.nativeEvent.target.classList.contains(ClassName.ROW_CONTROLS_WITH_DRAG)) {
+    const isParentDragControls = e.nativeEvent.target.closest(`.${ClassName.DRAG_ROW_CONTROLS}`);
+    const rowIndex = e.nativeEvent.target.getAttribute('data-start-index');
+
+    // avoid updating if event target is not related
+    if (!isParentDragControls || !rowIndex) {
       return;
     }
-    const hoverHeight = e.nativeEvent.offsetY;
-    let totalHeight = 0;
-    const rowIndex = rowHeights.findIndex(row => {
-      totalHeight += row;
-      return hoverHeight <= totalHeight;
-    });
-    updateCellHoverLocation(rowIndex);
-  }, [updateCellHoverLocation, rowHeights]);
+    updateCellHoverLocation(Number(rowIndex));
+  }, [updateCellHoverLocation]);
   const handleMouseOver = useCallback(() => {
     hoverRows([rowIndex]);
   }, [hoverRows, rowIndex]);
@@ -72,28 +73,50 @@ const DragControlsComponent = ({
     selectRow(rowIndex, e === null || e === void 0 ? void 0 : e.shiftKey);
   }, [rowIndex, selectRow]);
   return /*#__PURE__*/React.createElement("div", {
-    className: ClassName.ROW_CONTROLS_WITH_DRAG,
+    className: ClassName.DRAG_ROW_CONTROLS,
     style: {
       gridTemplateRows: heights
     },
     onMouseMove: handleMouseMove
-  }, Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
+  }, !isResizing && rowsParams.map(({
+    startIndex,
+    endIndex
+  }, index) => /*#__PURE__*/React.createElement("div", {
+    style: {
+      gridRow: `${index + 1} / span 1`
+    },
+    "data-start-index": startIndex,
+    "data-end-index": endIndex,
+    className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER,
+    contentEditable: false,
+    key: index
+  }, !hasHeaderRow && index === 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      top: '0px',
+      left: "var(--ds-space-075, 6px)"
+    },
+    className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT
+  }), /*#__PURE__*/React.createElement("div", {
+    className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT
+  }))), !isResizing && Number.isFinite(rowIndex) && /*#__PURE__*/React.createElement("div", {
     style: {
       gridRow: gridRowPosition,
       display: 'flex',
       height: '100%',
       alignItems: 'center',
       justifyContent: 'center'
-    }
+    },
+    "data-testid": "table-floating-row-drag-handle"
   }, /*#__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,10 +139,13 @@ 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,
       isInDanger: isInDanger,
+      isResizing: isResizing,
+      hasHeaderRow: hasHeaderRow,
       hoverRows: this.hoverRows,
       selectRow: this.selectRow,
       updateCellHoverLocation: this.updateCellHoverLocation

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -7,7 +7,7 @@ import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
 import { columnControlsDecorationHeight, resizeHandlerAreaWidth, resizeLineWidth, rowControlsZIndex, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableBorderColor, tableBorderDeleteColor, tableBorderRadiusSize, tableBorderSelectedColor, tableCellBackgroundColor, tableCellDeleteColor, tableCellSelectedColor, tableControlsSpacing, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tablePadding, tableScrollbarOffset, tableTextColor, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
-import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle, rowControlsWrapperDotStyle } from './ui-styles';
+import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, dragInsertButtonWrapper, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle, rowControlsWrapperDotStyle } from './ui-styles';
 const cornerControlHeight = tableToolbarSize + 1;
 
 /*
@@ -270,6 +270,8 @@ export const tableStyles = props => {
       ${insertRowButtonWrapper(props)}
     }
 
+    ${dragInsertButtonWrapper(props)}
+
     /* Delete button */
     ${DeleteButton(props)}
     /* Ends Delete button */
@@ -602,12 +604,58 @@ export const tableStyles = props => {
       `)}
     }
 
-    .${ClassName.ROW_CONTROLS_WITH_DRAG} {
+    .${ClassName.DRAG_ROW_CONTROLS} {
       display: grid;
       align-items: center;
       position: absolute;
       left: -4px;
       z-index: ${akEditorUnitZIndex};
+
+      .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER} {
+        align-self: end;
+        position: absolute;
+        height: 100%;
+        width: 24px;
+      }
+
+      .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT} {
+        position: absolute;
+        bottom: -3px;
+        left: 6px;
+        background-color: ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
+        height: 4px;
+        width: 4px;
+        border-radius: 50%;
+      }
+    }
+
+    .${ClassName.DRAG_COLUMN_CONTROLS} {
+      .${ClassName.COLUMN_CONTROLS_INNER} {
+        height: 24px;
+        position: absolute;
+        top: ${"var(--ds-space-negative-150, -12px)"};
+        z-index: ${akEditorUnitZIndex};
+      }
+
+      .${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER} {
+        position: absolute;
+        height: 24px;
+        width: 100%;
+      }
+
+      .${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT} {
+        background-color: ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
+        height: 4px;
+        width: 4px;
+        border-radius: 50%;
+        position: absolute;
+        right: -2px;
+      }
+    }
+
+    .${ClassName.CONTROLS_FLOATING_BUTTON_ROW}
+      .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER} {
+      bottom: -1px;
     }
 
     .${ClassName.DRAG_HANDLE_BUTTON_CONTAINER} {
@@ -621,10 +669,10 @@ export const tableStyles = props => {
       display: flex;
       justify-content: center;
       align-items: center;
+      outline: none !important;
 
       svg {
         rect {
-          //
           fill: ${"var(--ds-background-accent-gray-subtlest, #F1F2F4)"};
         }
         g {

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/ui/ui-styles.js

@@ -129,6 +129,28 @@ const InsertButtonHover = () => css`
     cursor: pointer;
   }
 `;
+export const dragInsertButtonWrapper = props => css`
+  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER} {
+    position: absolute;
+    z-index: ${akEditorUnitZIndex + 10};
+    bottom: -5px;
+    left: 3px;
+  }
+  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON} {
+    ${Button(`
+    background: ${"var(--ds-surface-overlay, white)"};
+    color: ${`var(--ds-icon, ${N300})`};
+    border: 1px solid ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
+    border-radius: 50%;
+  `)}
+  }
+  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON}:hover {
+    background: ${`var(--ds-background-brand-bold, ${B300})`};
+    border: 1px solid ${`var(--ds-background-brand-bold, ${B300})`};
+    color: ${"var(--ds-icon-inverse, white)"};
+    cursor: pointer;
+  }
+`;
 export const insertColumnButtonWrapper = props => css`
   ${InsertButton()}
   ${InsertButtonHover()}
@@ -299,7 +321,7 @@ export const floatingColumnControls = props => {
       }
     }
 
-    .${ClassName.COLUMN_CONTROLS_WITH_DRAG} {
+    .${ClassName.DRAG_COLUMN_CONTROLS} {
       box-sizing: border-box;
 
       .${ClassName.COLUMN_CONTROLS_INNER} {

package/dist/es2019/plugins/table/utils/dom.js

@@ -10,11 +10,15 @@ export const isInsertRowButton = node => containsClassName(node, ClassName.CONTR
 export const getColumnOrRowIndex = target => [parseInt(target.getAttribute('data-start-index') || '-1', 10), parseInt(target.getAttribute('data-end-index') || '-1', 10)];
 export const isColumnControlsDecorations = node => containsClassName(node, ClassName.COLUMN_CONTROLS_DECORATIONS);
 export const isRowControlsButton = node => containsClassName(node, ClassName.ROW_CONTROLS_BUTTON) || containsClassName(node, ClassName.NUMBERED_COLUMN_BUTTON);
-export const isRowDragControlsButton = node => containsClassName(node, ClassName.ROW_CONTROLS_WITH_DRAG) || closestElement(node, `.${ClassName.ROW_CONTROLS_WITH_DRAG}`);
 export const isResizeHandleDecoration = node => containsClassName(node, ClassName.RESIZE_HANDLE_DECORATION);
 export const isTableControlsButton = node => containsClassName(node, ClassName.CONTROLS_BUTTON) || containsClassName(node, ClassName.ROW_CONTROLS_BUTTON_WRAP);
 export const isTableContainerOrWrapper = node => containsClassName(node, ClassName.TABLE_CONTAINER) || containsClassName(node, ClassName.TABLE_NODE_WRAPPER);
 
+/** drag-and-drop classes */
+export const isRowDragControlsButton = node => containsClassName(node, ClassName.DRAG_ROW_CONTROLS) || closestElement(node, `.${ClassName.DRAG_ROW_CONTROLS}`);
+export const isDragRowFloatingInsertDot = node => containsClassName(node, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER);
+export const isDragColumnFloatingInsertDot = node => containsClassName(node, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER);
+
 /*
  * This function returns which side of a given element the mouse cursor is,
  * using as a base the half of the width by default, for example:

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/es2019/plugins/table/utils/index.js

@@ -2,7 +2,7 @@ export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, is
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine } from './decoration';
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell } from './paste';
-export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler } from './dom';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler } from './dom';
 export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';

package/dist/esm/plugins/table/event-handlers.js

@@ -10,7 +10,7 @@ import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
-import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
+import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
 import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
 var isFocusingCalendar = function isFocusingCalendar(event) {
   return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
@@ -21,12 +21,15 @@ var isFocusingModal = function isFocusingModal(event) {
 var isFocusingFloatingToolbar = function isFocusingFloatingToolbar(event) {
   return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="toolbar"]');
 };
+var isFocusingDragHandles = function isFocusingDragHandles(event) {
+  return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('button') && event.relatedTarget.getAttribute('draggable') === 'true';
+};
 export var handleBlur = function handleBlur(view, event) {
   var state = view.state,
     dispatch = view.dispatch;
   // IE version check for ED-4665
   // Calendar focus check for ED-10466
-  if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event)) {
+  if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event) && !isFocusingDragHandles(event)) {
     setEditorFocus(false)(state, dispatch);
   }
   event.preventDefault();
@@ -183,7 +186,7 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
     return false;
   }
   var element = event.target;
-  if (isColumnControlsDecorations(element)) {
+  if (isColumnControlsDecorations(element) || isDragColumnFloatingInsertDot(element)) {
     var state = view.state,
       dispatch = view.dispatch;
     var _getPluginState3 = getPluginState(state),
@@ -197,7 +200,7 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
       return showInsertColumnButton(positionColumn)(state, dispatch);
     }
   }
-  if (isRowControlsButton(element)) {
+  if (isRowControlsButton(element) || isDragRowFloatingInsertDot(element)) {
     var _state3 = view.state,
       _dispatch4 = view.dispatch;
     var _getPluginState4 = getPluginState(_state3),

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,6 +268,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             insertRowButtonIndex = _ref14.insertRowButtonIndex,
             isHeaderColumnEnabled = _ref14.isHeaderColumnEnabled,
             isHeaderRowEnabled = _ref14.isHeaderRowEnabled,
+            isDragAndDropEnabled = _ref14.isDragAndDropEnabled,
             tableWrapperTarget = _ref14.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
@@ -299,6 +302,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             insertRowButtonIndex: insertRowButtonIndex,
             isHeaderColumnEnabled: isHeaderColumnEnabled,
             isHeaderRowEnabled: isHeaderRowEnabled,
+            isDragAndDropEnabled: isDragAndDropEnabled,
             editorView: editorView,
             mountPoint: popupsMountPoint,
             boundariesElement: popupsBoundariesElement,
@@ -317,7 +321,17 @@ var tablesPlugin = function tablesPlugin(_ref) {
             editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth,
             getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
-          }), allowControls && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
+          }), 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 && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,
             tableRef: tableRef,

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/decorations/plugin.js

@@ -11,7 +11,7 @@ export var getDecorations = function getDecorations(state) {
   return pluginKey.getState(state);
 };
 export var handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr, decorationSet, oldState, newState) {
-  var _tableWidthPluginKey$, _tableWidthPluginKey$2, _tr$getMeta;
+  var _tableWidthPluginKey$, _tableWidthPluginKey$2;
   var isResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(newState)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
   var wasResizing = (_tableWidthPluginKey$2 = tableWidthPluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
   var changedResizing = isResizing !== wasResizing;
@@ -19,7 +19,7 @@ export var handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr
   // Remove column controls when resizing and don't add column decoration controls when DnD enabled
   if (isResizing || getBooleanFF('platform.editor.table.drag-and-drop')) {
     return DecorationSet.empty;
-  } else if (tr.docChanged || tr.selection instanceof CellSelection || changedResizing || ((_tr$getMeta = tr.getMeta(tablePluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.type) === 'HOVER_CELL') {
+  } else if (tr.docChanged || tr.selection instanceof CellSelection || changedResizing) {
     return buildColumnControlsDecorations({
       decorationSet: decorationSet,
       tr: tr
@@ -42,16 +42,12 @@ export var createPlugin = function createPlugin() {
         return DecorationSet.empty;
       },
       apply: function apply(tr, decorationSet, oldState, newState) {
-        var _tablePluginKey$getSt, _tablePluginKey$getSt2;
         var pluginState = decorationSet;
         var meta = tr.getMeta(tablePluginKey);
-        var previousHover = (_tablePluginKey$getSt = tablePluginKey.getState(oldState)) === null || _tablePluginKey$getSt === void 0 ? void 0 : _tablePluginKey$getSt.hoveredCell;
-        var newHover = (_tablePluginKey$getSt2 = tablePluginKey.getState(newState)) === null || _tablePluginKey$getSt2 === void 0 ? void 0 : _tablePluginKey$getSt2.hoveredCell;
-        var changedCellHover = (previousHover === null || previousHover === void 0 ? void 0 : previousHover.colIndex) !== (newHover === null || newHover === void 0 ? void 0 : newHover.colIndex) || (previousHover === null || previousHover === void 0 ? void 0 : previousHover.rowIndex) !== (newHover === null || newHover === void 0 ? void 0 : newHover.rowIndex);
         if (meta && meta.data && meta.data.decorationSet) {
           pluginState = meta.data.decorationSet;
         }
-        if (tr.docChanged || tr.selectionSet || tr.getMeta(tableWidthPluginKey) || changedCellHover) {
+        if (tr.docChanged || tr.selectionSet || tr.getMeta(tableWidthPluginKey)) {
           pluginState = pluginState.map(tr.mapping, tr.doc);
           return handleDocOrSelectionChanged(tr, pluginState, oldState, newState);
         }

package/dist/esm/plugins/table/pm-plugins/decorations/utils/column-controls.js

@@ -4,7 +4,6 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { TableDecorations } from '../../../types';
 import { createColumnControlsDecoration, createColumnSelectedDecoration, findColumnControlSelectedDecoration, findControlsHoverDecoration, updateDecorations } from '../../../utils/decoration';
-import { pluginKey as tablePluginKey } from '../../plugin-key';
 import { composeDecorations } from './compose-decorations';
 var isColumnSelected = function isColumnSelected(tr) {
   return tr.selection instanceof CellSelection && tr.selection.isColSelection();
@@ -27,10 +26,9 @@ var maybeUpdateColumnControlsDecoration = function maybeUpdateColumnControlsDeco
   var decorationSet = _ref3.decorationSet,
     tr = _ref3.tr;
   var table = findTable(tr.selection);
-  var meta = tr.getMeta(tablePluginKey);
 
   // avoid re-drawing state if dnd decorations don't need to be updated
-  if (!table && (meta === null || meta === void 0 ? void 0 : meta.type) !== 'HOVER_CELL') {
+  if (!table) {
     return decorationSet;
   }
   return updateDecorations(tr.doc, decorationSet, createColumnControlsDecoration(tr.selection), TableDecorations.COLUMN_CONTROLS_DECORATIONS);

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

@@ -77,4 +77,25 @@ export var moveSource = function moveSource(sourceType, sourceIndex, targetIndex
     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);
+  });
 };