@atlaskit/editor-plugin-table 5.3.13 → 5.3.15

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/FloatingDragMenu/DragMenu.js

@@ -1,7 +1,12 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
+import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
 import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
+import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
 var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
@@ -14,7 +19,18 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
       value: {
         name: item.id
       },
-      isDisabled: item.disabled
+      isDisabled: item.disabled,
+      elemBefore: item.icon ? jsx("div", {
+        style: {
+          marginRight: "var(--ds-space-negative-075, -6px)",
+          display: 'flex'
+        }
+      }, jsx(item.icon, {
+        label: item.title
+      })) : undefined,
+      elemAfter: item.keymap ? jsx("div", {
+        css: shortcutStyle
+      }, item.keymap) : undefined
     });
     item.onClick && (menuCallback[item.id] = item.onClick);
   });
@@ -32,9 +48,15 @@ export var DragMenu = function DragMenu(_ref) {
     tableNode = _ref.tableNode,
     mountPoint = _ref.mountPoint,
     boundariesElement = _ref.boundariesElement,
-    scrollableElement = _ref.scrollableElement;
+    scrollableElement = _ref.scrollableElement,
+    targetCellPosition = _ref.targetCellPosition,
+    getEditorContainerWidth = _ref.getEditorContainerWidth;
   var tableMap = tableNode ? TableMap.get(tableNode) : undefined;
-  var dragMenuConfig = getDragMenuConfig(direction, tableMap, index);
+  var state = editorView.state,
+    dispatch = editorView.dispatch;
+  var selection = state.selection;
+  var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
+  var dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, tableMap, index, targetCellPosition, selectionRect);
   var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
     menuItems = _convertToDropdownIte.menuItems,
     menuCallback = _convertToDropdownIte.menuCallback;
@@ -43,16 +65,30 @@ export var DragMenu = function DragMenu(_ref) {
       dispatch = editorView.dispatch;
     toggleDragMenu(false)(state, dispatch);
   };
-  var onMenuItemActivated = function onMenuItemActivated(_ref2) {
+  var handleMenuItemActivated = function handleMenuItemActivated(_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);
+    (_menuCallback$item$va = menuCallback[item.value.name]) === null || _menuCallback$item$va === void 0 || _menuCallback$item$va.call(menuCallback, state, dispatch);
     closeMenu();
   };
+  var handleItemMouseEnter = function handleItemMouseEnter(_ref3) {
+    var _item$value$name;
+    var item = _ref3.item;
+    if (!selectionRect || !((_item$value$name = item.value.name) !== null && _item$value$name !== void 0 && _item$value$name.startsWith('delete'))) {
+      return;
+    }
+    (item.value.name === 'delete_column' ? hoverColumns(getSelectedColumnIndexes(selectionRect), true) : hoverRows(getSelectedRowIndexes(selectionRect), true))(state, dispatch);
+  };
+  var handleItemMouseLeave = function handleItemMouseLeave(_ref4) {
+    var item = _ref4.item;
+    if (['sort_column_asc', 'sort_column_desc', 'delete_column', 'delete_row'].indexOf(item.value.name) > -1) {
+      clearHoverSelection()(state, dispatch);
+    }
+  };
   if (!menuItems) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(DropdownMenu, {
+  return jsx(DropdownMenu, {
     mountTo: mountPoint
     //This needs be removed when the a11y is completely handled
     //Disabling key navigation now as it works only partially
@@ -66,7 +102,9 @@ export var DragMenu = function DragMenu(_ref) {
     }],
     isOpen: isOpen,
     onOpenChange: closeMenu,
-    onItemActivated: onMenuItemActivated,
+    onItemActivated: handleMenuItemActivated,
+    onMouseEnter: handleItemMouseEnter,
+    onMouseLeave: handleItemMouseLeave,
     fitWidth: dragMenuDropdownWidth,
     boundariesElement: boundariesElement
   });

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { dragMenuDropdownWidth } from '../consts';
 import { DragMenu } from './DragMenu';
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
@@ -14,7 +15,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     tableNode = _ref.tableNode,
     direction = _ref.direction,
     index = _ref.index,
-    targetCellPosition = _ref.targetCellPosition;
+    targetCellPosition = _ref.targetCellPosition,
+    getEditorContainerWidth = _ref.getEditorContainerWidth;
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
@@ -23,10 +25,11 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   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: "left",
+    alignX: direction === 'row' ? 'left' : 'center',
     alignY: "top",
     target: targetCellRef,
     mountTo: mountPoint,
@@ -38,7 +41,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     ,
     zIndex: akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
-    offset: [7, 0],
+    offset: offset,
     stick: true
   }, /*#__PURE__*/React.createElement(DragMenu, {
     editorView: editorView,
@@ -46,7 +49,9 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     boundariesElement: boundariesElement,
     tableNode: tableNode,
     direction: direction,
-    index: index
+    index: index,
+    targetCellPosition: targetCellPosition,
+    getEditorContainerWidth: getEditorContainerWidth
   }));
 };
 FloatingDragMenu.displayName = '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,22 +36,68 @@ 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,
-    direction = _ref2.direction,
+    type = _ref2.type,
     formatMessage = _ref2.intl.formatMessage,
     hasStickyHeaders = _ref2.hasStickyHeaders;
   var content = /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(ToolTipContent, {
-      description: formatMessage(tooltipMessageByType(direction)),
-      keymap: direction === 'row' ? addRowAfter : addColumnAfter
+      description: formatMessage(tooltipMessageByType(type)),
+      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", {
@@ -66,13 +114,13 @@ var InsertButton = function InsertButton(_ref2) {
     fillRule: "evenodd"
   })))), /*#__PURE__*/React.createElement("div", {
     className: ClassName.CONTROLS_INSERT_LINE,
-    style: direction === 'row' ? {
+    style: type === 'row' ? {
       width: getInsertLineWidth(tableRef)
     } : {
       height: getInsertLineHeight(tableRef, hasStickyHeaders)
     }
   })));
-  var floatingButtonClassName = direction === 'column' ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
+  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", {

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(direction, index, hasNumberedColumns, tableContainer) {
+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,10 +122,15 @@ 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, {
-        direction: type,
+      }), 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,
         hasStickyHeaders: this.props.hasStickyHeaders || false

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,

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

@@ -5,7 +5,7 @@ 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';
 var getSelectedRows = function getSelectedRows(selection) {
   if (selection instanceof CellSelection && selection.isRowSelection()) {
@@ -25,10 +25,13 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     tableActive = _ref.tableActive,
     editorView = _ref.editorView,
     isInDanger = _ref.isInDanger,
+    isResizing = _ref.isResizing,
+    hasHeaderRow = _ref.hasHeaderRow,
     hoverRows = _ref.hoverRows,
     selectRow = _ref.selectRow,
     updateCellHoverLocation = _ref.updateCellHoverLocation;
   var rowHeights = getRowHeights(tableRef);
+  var rowsParams = getRowsParams(rowHeights);
   var heights = rowHeights.map(function (height) {
     return "".concat(height - 1, "px");
   }).join(' ');
@@ -53,18 +56,15 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     }
   }, [editorView, tableActive]);
   var handleMouseMove = useCallback(function (e) {
-    // avoid updating if event target is drag handle
-    if (!e.nativeEvent.target.classList.contains(ClassName.ROW_CONTROLS_WITH_DRAG)) {
+    var isParentDragControls = e.nativeEvent.target.closest(".".concat(ClassName.DRAG_ROW_CONTROLS));
+    var rowIndex = e.nativeEvent.target.getAttribute('data-start-index');
+
+    // avoid updating if event target is not related
+    if (!isParentDragControls || !rowIndex) {
       return;
     }
-    var hoverHeight = e.nativeEvent.offsetY;
-    var totalHeight = 0;
-    var rowIndex = rowHeights.findIndex(function (row) {
-      totalHeight += row;
-      return hoverHeight <= totalHeight;
-    });
-    updateCellHoverLocation(rowIndex);
-  }, [updateCellHoverLocation, rowHeights]);
+    updateCellHoverLocation(Number(rowIndex));
+  }, [updateCellHoverLocation]);
   var handleMouseOver = useCallback(function () {
     hoverRows([rowIndex]);
   }, [hoverRows, rowIndex]);
@@ -72,19 +72,41 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     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(function (_ref2, index) {
+    var startIndex = _ref2.startIndex,
+      endIndex = _ref2.endIndex;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        gridRow: "".concat(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: (_tableNode$attrs$loca = tableNode === null || tableNode === 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],

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

@@ -174,6 +174,8 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
         editorView: editorView,
         tableActive: tableActive,
         isInDanger: isInDanger,
+        isResizing: isResizing,
+        hasHeaderRow: hasHeaderRow,
         hoverRows: this.hoverRows,
         selectRow: this.selectRow,
         updateCellHoverLocation: this.updateCellHoverLocation