@atlaskit/editor-plugin-table 5.3.12 → 5.3.14

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

@@ -1,9 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 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 { 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';
@@ -14,13 +17,47 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
     state: createPluginState(dispatch, function (state) {
       return {
         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: function appendTransaction(transactions, oldState, newState) {
+      var _getTablePluginState = getTablePluginState(oldState),
+        oldTargetCellPosition = _getTablePluginState.targetCellPosition;
+      var _getTablePluginState2 = getTablePluginState(newState),
+        newTargetCellPosition = _getTablePluginState2.targetCellPosition;
+      var _getPluginState = getPluginState(newState),
+        isDragMenuOpen = _getPluginState.isDragMenuOpen,
+        dragMenuIndex = _getPluginState.dragMenuIndex;
+
+      // 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) {
+          var tr = newState.tr;
+          var action = {
+            type: DragAndDropActionType.TOGGLE_DRAG_MENU,
+            data: {
+              isDragMenuOpen: false,
+              direction: undefined
+            }
+          };
+          if (newTargetCellPosition !== undefined) {
+            var 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: function view(editorView) {
       return {
         destroy: monitorForElements({
@@ -38,13 +75,22 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
             indexes.length !== 1 || !(type === 'table-row' || type === 'table-column')) {
               return false;
             }
-            var _getTablePluginState = getTablePluginState(editorView.state),
-              tableNode = _getTablePluginState.tableNode;
+            var _getTablePluginState3 = getTablePluginState(editorView.state),
+              tableNode = _getTablePluginState3.tableNode;
             // If the draggable localId is the same as the current selected table localId then we will allow the monitor
             // watch for changes
             return localId === (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId);
           },
+          onDragStart: function onDragStart(_ref3) {
+            var location = _ref3.location;
+            autoScroller.start({
+              input: location.current.input
+            });
+          },
           onDrag: function onDrag(event) {
+            autoScroller.updateInput({
+              input: event.location.current.input
+            });
             var 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) {
@@ -60,6 +106,7 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
             setDropTarget(dropTargetType, targetAdjustedIndex)(editorView.state, editorView.dispatch);
           },
           onDrop: function onDrop(event) {
+            autoScroller.stop();
             var data = getDraggableDataFromEvent(event);
 
             // If no data can be found then it's most like we do not want to perform any drop action
@@ -87,8 +134,8 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
     },
     props: {
       decorations: function decorations(state) {
-        var _getPluginState = getPluginState(state),
-          decorationSet = _getPluginState.decorationSet;
+        var _getPluginState2 = getPluginState(state),
+          decorationSet = _getPluginState2.decorationSet;
         return decorationSet;
       }
     }

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

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

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

@@ -68,6 +68,9 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   CONTROLS_INSERT_LINE: "".concat(tablePrefixSelector, "-controls__insert-line"),
   CONTROLS_BUTTON_OVERLAY: "".concat(tablePrefixSelector, "-controls__button-overlay"),
   LAYOUT_BUTTON: "".concat(tablePrefixSelector, "-layout-button"),
+  DRAG_CONTROLS_INSERT_BUTTON: "".concat(tablePrefixSelector, "-controls__drag-insert-button"),
+  DRAG_CONTROLS_INSERT_BUTTON_INNER: "".concat(tablePrefixSelector, "-controls__drag-insert-button-inner"),
+  DRAG_CONTROLS_INSERT_BUTTON_WRAP: "".concat(tablePrefixSelector, "-controls__drag-insert-button-wrap"),
   CONTROLS_INSERT_MARKER: "".concat(tablePrefixSelector, "-controls__insert-marker"),
   CONTROLS_INSERT_COLUMN: "".concat(tablePrefixSelector, "-controls__insert-column"),
   CONTROLS_INSERT_ROW: "".concat(tablePrefixSelector, "-controls__insert-row"),
@@ -80,8 +83,12 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   CORNER_CONTROLS_INSERT_COLUMN_MARKER: "".concat(tablePrefixSelector, "-corner-controls__insert-column-marker"),
   CONTROLS_CORNER_BUTTON: "".concat(tablePrefixSelector, "-corner-button"),
   /** Controls with drag handle */
-  COLUMN_CONTROLS_WITH_DRAG: "".concat(tablePrefixSelector, "-column-controls-with-drag"),
-  ROW_CONTROLS_WITH_DRAG: "".concat(tablePrefixSelector, "-row-controls-with-drag"),
+  DRAG_ROW_CONTROLS: "".concat(tablePrefixSelector, "-drag-row-controls"),
+  DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: "".concat(tablePrefixSelector, "-drag-row-floating-insert-dot-wrapper"),
+  DRAG_ROW_FLOATING_INSERT_DOT: "".concat(tablePrefixSelector, "-drag-row-floating-insert-dot"),
+  DRAG_COLUMN_CONTROLS: "".concat(tablePrefixSelector, "-drag-column-controls"),
+  DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER: "".concat(tablePrefixSelector, "-drag-columns-floating-insert-dot-wrapper"),
+  DRAG_COLUMN_FLOATING_INSERT_DOT: "".concat(tablePrefixSelector, "-drag-columns-floating-insert-dot"),
   DRAG_HANDLE_BUTTON_CONTAINER: "".concat(tablePrefixSelector, "-drag-handle-button-container"),
   /** Other classes */
   NUMBERED_COLUMN: "".concat(tablePrefixSelector, "-numbered-column"),

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

@@ -18,6 +18,7 @@ export var DragHandle = function DragHandle(_ref) {
     previewHeight = _ref.previewHeight,
     onMouseOver = _ref.onMouseOver,
     onMouseOut = _ref.onMouseOut,
+    onMouseUp = _ref.onMouseUp,
     onClick = _ref.onClick;
   var dragHandleDivRef = useRef(null);
   var _useState = useState(null),
@@ -77,6 +78,7 @@ export var DragHandle = function DragHandle(_ref) {
     "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/esm/plugins/table/ui/FloatingDragMenu/DragMenu.js

@@ -0,0 +1,73 @@
+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';
+var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
+  var menuItems = [];
+  var menuCallback = {};
+  dragMenuConfig.forEach(function (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: menuItems,
+    menuCallback: menuCallback
+  };
+};
+export var DragMenu = function DragMenu(_ref) {
+  var _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+    index = _ref.index,
+    isOpen = _ref.isOpen,
+    editorView = _ref.editorView,
+    tableNode = _ref.tableNode,
+    mountPoint = _ref.mountPoint,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement;
+  var tableMap = tableNode ? TableMap.get(tableNode) : undefined;
+  var dragMenuConfig = getDragMenuConfig(direction, tableMap, index);
+  var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
+    menuItems = _convertToDropdownIte.menuItems,
+    menuCallback = _convertToDropdownIte.menuCallback;
+  var closeMenu = function closeMenu() {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    toggleDragMenu(false)(state, dispatch);
+  };
+  var onMenuItemActivated = function onMenuItemActivated(_ref2) {
+    var _menuCallback$item$va;
+    var item = _ref2.item;
+    (_menuCallback$item$va = menuCallback[item.value.name]) === null || _menuCallback$item$va === 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/esm/plugins/table/ui/FloatingDragMenu/index.js

@@ -0,0 +1,55 @@
+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 { dragMenuDropdownWidth } from '../consts';
+import { DragMenu } from './DragMenu';
+var FloatingDragMenu = function FloatingDragMenu(_ref) {
+  var mountPoint = _ref.mountPoint,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement,
+    editorView = _ref.editorView,
+    isOpen = _ref.isOpen,
+    tableRef = _ref.tableRef,
+    tableNode = _ref.tableNode,
+    direction = _ref.direction,
+    index = _ref.index,
+    targetCellPosition = _ref.targetCellPosition;
+  if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
+    return null;
+  }
+  var domAtPos = editorView.domAtPos.bind(editorView);
+  var targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
+  if (!targetCellRef) {
+    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];
+  // 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,
+    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
+  }, /*#__PURE__*/React.createElement(DragMenu, {
+    editorView: editorView,
+    isOpen: isOpen,
+    boundariesElement: boundariesElement,
+    tableNode: tableNode,
+    direction: direction,
+    index: index
+  }));
+};
+FloatingDragMenu.displayName = 'FloatingDragMenu';
+export default FloatingDragMenu;

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

@@ -1,3 +1,5 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { addColumnAfter, addRowAfter, ToolTipContent } from '@atlaskit/editor-common/keymaps';
@@ -23,7 +25,7 @@ var getToolbarSize = function getToolbarSize(tableRef) {
   }
   return tableToolbarSize;
 };
-var getInsertLineWidth = function getInsertLineWidth(tableRef) {
+var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnabled) {
   // 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.
@@ -34,13 +36,13 @@ var getInsertLineWidth = function getInsertLineWidth(tableRef) {
   var _ref = parentElement,
     scrollLeft = _ref.scrollLeft;
   var diff = offsetWidth - parentOffsetWidth;
-  var toolbarSize = getToolbarSize(tableRef);
+  var toolbarSize = isDragAndDropEnabled ? 0 : getToolbarSize(tableRef);
   return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + LINE_OFFSET;
 };
 var tooltipMessageByType = function tooltipMessageByType(type) {
   return type === 'row' ? tableMessages.insertRow : tableMessages.insertColumn;
 };
-var InsertButton = function InsertButton(_ref2) {
+export var InsertButtonForDragAndDrop = function InsertButtonForDragAndDrop(_ref2) {
   var onMouseDown = _ref2.onMouseDown,
     tableRef = _ref2.tableRef,
     type = _ref2.type,
@@ -52,6 +54,52 @@ var InsertButton = function InsertButton(_ref2) {
       keymap: type === 'row' ? addRowAfter : addColumnAfter
     }),
     position: "top"
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: ClassName.DRAG_CONTROLS_INSERT_BUTTON,
+    onMouseDown: onMouseDown
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "10",
+    height: "10",
+    viewBox: "0 0 10 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("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"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: ClassName.CONTROLS_INSERT_LINE,
+    style: type === 'row' ? {
+      width: getInsertLineWidth(tableRef, true),
+      left: '14px'
+    } : {
+      height: getInsertLineHeight(tableRef, hasStickyHeaders) - 11
+    }
+  })));
+  var floatingButtonClassName = type === 'column' ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
+  return /*#__PURE__*/React.createElement("div", {
+    className: floatingButtonClassName
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(ClassName.CONTROLS_INSERT_BUTTON_WRAP, " ").concat(ClassName.CONTROLS_INSERT_ROW)
+  }, content));
+};
+export var DragAndDropInsertButton = injectIntl(InsertButtonForDragAndDrop);
+var InsertButton = function InsertButton(_ref3) {
+  var onMouseDown = _ref3.onMouseDown,
+    tableRef = _ref3.tableRef,
+    type = _ref3.type,
+    formatMessage = _ref3.intl.formatMessage,
+    hasStickyHeaders = _ref3.hasStickyHeaders;
+  var content = /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: formatMessage(tooltipMessageByType(type)),
+      keymap: type === 'row' ? addRowAfter : addColumnAfter
+    }),
+    position: "top"
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: ClassName.CONTROLS_INSERT_BUTTON_INNER
   }, /*#__PURE__*/React.createElement("button", {

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

@@ -6,9 +6,11 @@ import { tableInsertColumnButtonOffset, tableInsertColumnButtonSize, tableToolba
 var HORIZONTAL_ALIGN_COLUMN_BUTTON = -(tableInsertColumnButtonSize / 2);
 var HORIZONTAL_ALIGN_NUMBERED_COLUMN_BUTTON = HORIZONTAL_ALIGN_COLUMN_BUTTON + akEditorTableNumberColumnWidth;
 var VERTICAL_ALIGN_COLUMN_BUTTON = tableToolbarSize + tableInsertColumnButtonOffset;
+var VERTICAL_ALIGN_COLUMN_BUTTON_DRAG = tableInsertColumnButtonOffset;
 var HORIZONTAL_ALIGN_ROW_BUTTON = -(tableToolbarSize + tableInsertColumnButtonOffset + tableInsertColumnButtonSize);
+var HORIZONTAL_ALIGN_ROW_BUTTON_DRAG = -18;
 var VERTICAL_ALIGN_ROW_BUTTON = tableInsertColumnButtonSize / 2;
-function getRowOptions(index) {
+function getRowOptions(index, isDragAndDropEnabled) {
   var defaultOptions = {
     alignX: 'left',
     alignY: 'bottom',
@@ -25,16 +27,16 @@ function getRowOptions(index) {
     onPositionCalculated: function onPositionCalculated(position) {
       return _objectSpread(_objectSpread({}, 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
       });
     }
   });
 }
-function getColumnOptions(index, tableContainer, hasNumberedColumns) {
+function getColumnOptions(index, tableContainer, hasNumberedColumns, isDragAndDropEnabled) {
   var options = {
     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
@@ -70,12 +72,12 @@ function getColumnOptions(index, tableContainer, hasNumberedColumns) {
   }
   return options;
 }
-function getPopupOptions(type, index, hasNumberedColumns, tableContainer) {
-  switch (type) {
+function getPopupOptions(direction, index, hasNumberedColumns, isDragAndDropEnabled, tableContainer) {
+  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 {};
   }

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

@@ -22,7 +22,7 @@ import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../command
 import { TableCssClassName as ClassName } from '../../types';
 import { checkIfNumberColumnEnabled } from '../../utils';
 import getPopupOptions from './getPopupOptions';
-import InsertButton from './InsertButton';
+import InsertButton, { DragAndDropInsertButton } from './InsertButton';
 export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
   _inherits(FloatingInsertButton, _React$Component);
   var _super = _createSuper(FloatingInsertButton);
@@ -47,6 +47,7 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
         boundariesElement = _this$props.boundariesElement,
         isHeaderColumnEnabled = _this$props.isHeaderColumnEnabled,
         isHeaderRowEnabled = _this$props.isHeaderRowEnabled,
+        isDragAndDropEnabled = _this$props.isDragAndDropEnabled,
         dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent;
       var type = typeof insertColumnButtonIndex !== 'undefined' ? 'column' : typeof insertRowButtonIndex !== 'undefined' ? 'row' : null;
       if (!tableNode || !tableRef || !type) {
@@ -121,9 +122,14 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
         scrollableElement: tableWrapper,
         forcePlacement: true,
         allowOutOfBounds: true
-      }, getPopupOptions(type, index, hasNumberedColumns, tableContainerWrapper), {
+      }, getPopupOptions(type, index, hasNumberedColumns, !!isDragAndDropEnabled, tableContainerWrapper), {
         zIndex: zIndex
-      }), /*#__PURE__*/React.createElement(InsertButton, {
+      }), isDragAndDropEnabled ? /*#__PURE__*/React.createElement(DragAndDropInsertButton, {
+        type: type,
+        tableRef: tableRef,
+        onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
+        hasStickyHeaders: this.props.hasStickyHeaders || false
+      }) : /*#__PURE__*/React.createElement(InsertButton, {
         type: type,
         tableRef: tableRef,
         onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,

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

@@ -2,8 +2,9 @@ import React, { useCallback, useMemo } from 'react';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection, hoverColumns, selectColumn } from '../../../commands';
+import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import { TableCssClassName as ClassName } from '../../../types';
-import { getSelectedColumnIndexes } from '../../../utils';
+import { getRowsParams, getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
 var getSelectedColumns = function getSelectedColumns(selection) {
   if (selection instanceof CellSelection && selection.isColSelection()) {
@@ -26,10 +27,13 @@ export var ColumnControls = function ColumnControls(_ref) {
     localId = _ref.localId,
     isInDanger = _ref.isInDanger,
     rowHeights = _ref.rowHeights,
-    colWidths = _ref.colWidths;
+    colWidths = _ref.colWidths,
+    hasHeaderColumn = _ref.hasHeaderColumn;
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
     return width ? "".concat(width - 1, "px") : '0px';
   }).join(' ')) !== null && _colWidths$map$join !== void 0 ? _colWidths$map$join : '0px';
+  // TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
+  var columnParams = getRowsParams(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   var colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
   var selectedColIndexes = getSelectedColumns(editorView.state.selection);
   var gridColumnPosition = useMemo(function () {
@@ -59,8 +63,13 @@ export var ColumnControls = function ColumnControls(_ref) {
       clearHoverSelection()(state, dispatch);
     }
   }, [editorView, tableActive]);
+  var handleMouseUp = useCallback(function () {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    toggleDragMenu(undefined, 'column', colIndex)(state, dispatch);
+  }, [editorView, colIndex]);
   return /*#__PURE__*/React.createElement("div", {
-    className: ClassName.COLUMN_CONTROLS_WITH_DRAG
+    className: ClassName.DRAG_COLUMN_CONTROLS
   }, /*#__PURE__*/React.createElement("div", {
     className: ClassName.COLUMN_CONTROLS_INNER,
     "data-testid": "table-floating-column-controls",
@@ -68,10 +77,39 @@ export var ColumnControls = function ColumnControls(_ref) {
       gridTemplateColumns: widths,
       marginTop: marginTop
     }
-  }, tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.createElement("div", {
+  }, !isResizing && columnParams.map(function (_ref2, index) {
+    var startIndex = _ref2.startIndex,
+      endIndex = _ref2.endIndex;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        gridColumn: "".concat(index + 1, " / span 1")
+      },
+      "data-start-index": startIndex,
+      "data-end-index": endIndex,
+      className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER,
+      contentEditable: false,
+      key: index
+    }, !hasHeaderColumn && index === 0 && /*#__PURE__*/React.createElement("div", {
+      style: {
+        left: '0px',
+        right: 'unset'
+      },
+      className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
+    }), /*#__PURE__*/React.createElement("div", {
+      className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT,
+      style: columnParams.length - 1 === index ? {
+        right: '0'
+      } : {}
+    }));
+  }), tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.createElement("div", {
     style: {
       gridColumn: gridColumnPosition,
-      marginTop: "-15px"
+      zIndex: 99,
+      display: 'flex',
+      width: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginTop: "var(--ds-space-negative-025, -2px)"
     },
     "data-column-control-index": hoveredCell.colIndex,
     "data-testid": "table-floating-column-control"
@@ -84,7 +122,8 @@ export var ColumnControls = function ColumnControls(_ref) {
     appearance: selectedColIndexes.includes(hoveredCell.colIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
     onClick: handleClick,
     onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut
+    onMouseOut: handleMouseOut,
+    onMouseUp: handleMouseUp
   }))));
 };
 export default ColumnControls;

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

@@ -6,7 +6,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { TableCssClassName as ClassName } from '../../types';
-import { getColumnsWidths, getRowHeights } from '../../utils';
+import { containsHeaderColumn, getColumnsWidths, getRowHeights } from '../../utils';
 import { ColumnControls } from './ColumnControls';
 import { ColumnDropTargets } from './ColumnDropTargets';
 export var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
@@ -33,6 +33,7 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     setHasDropTargets = _useState4[1];
   var node = getNode();
   var currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
+  var hasHeaderColumn = containsHeaderColumn(node);
   useEffect(function () {
     var _window;
     if (tableRef && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
@@ -95,11 +96,11 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
   var colWidths = getColumnsWidths(editorView);
   var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
   var mountTo = tableRef && (tableRef === null || tableRef === void 0 ? void 0 : tableRef.parentElement) || document.body;
+  if (!tableActive) {
+    return null;
+  }
   return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
     className: ClassName.COLUMN_CONTROLS_WRAPPER,
-    style: {
-      pointerEvents: 'none'
-    },
     "data-testid": "table-floating-column-controls-wrapper"
   }, /*#__PURE__*/React.createElement(ColumnControls, {
     editorView: editorView,
@@ -111,7 +112,8 @@ export var TableFloatingColumnControls = function TableFloatingColumnControls(_r
     localId: currentNodeLocalId,
     isInDanger: isInDanger,
     rowHeights: rowHeights,
-    colWidths: colWidths
+    colWidths: colWidths,
+    hasHeaderColumn: hasHeaderColumn
   }), hasDropTargets && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
     stickyTop: tableActive ? stickyTop : undefined,