@atlaskit/editor-plugin-table 5.3.12 → 5.3.14

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

@@ -1,8 +1,11 @@
 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';
@@ -12,12 +15,49 @@ export const createPlugin = (dispatch, eventDispatcher) => {
   return new SafePlugin({
     state: createPluginState(dispatch, state => ({
       decorationSet: DecorationSet.empty,
-      // TODO: This is example placeholder state. We could use this to track which row/col is currently set as the drop target
-      // This would result in a blue highlight being displayed on the corrisponding row/column to single the drop target location.
       dropTargetType: DropTargetType.NONE,
-      dropTargetIndex: 0
+      dropTargetIndex: 0,
+      isDragMenuOpen: false,
+      dragMenuIndex: 0
     })),
     key: pluginKey,
+    appendTransaction: (transactions, oldState, newState) => {
+      const {
+        targetCellPosition: oldTargetCellPosition
+      } = getTablePluginState(oldState);
+      const {
+        targetCellPosition: newTargetCellPosition
+      } = getTablePluginState(newState);
+      const {
+        isDragMenuOpen,
+        dragMenuIndex
+      } = getPluginState(newState);
+
+      // What's happening here? you asked... In a nutshell;
+      // If the target cell position changes while the drag menu is open then we want to close the drag menu if it has been opened.
+      // This will stop the drag menu from moving around the screen to different row/cols. Too achieve this we need
+      // to check if the new target cell position is pointed at a different cell than what the drag menu was opened on.
+      if (oldTargetCellPosition !== newTargetCellPosition) {
+        if (isDragMenuOpen) {
+          const tr = newState.tr;
+          const action = {
+            type: DragAndDropActionType.TOGGLE_DRAG_MENU,
+            data: {
+              isDragMenuOpen: false,
+              direction: undefined
+            }
+          };
+          if (newTargetCellPosition !== undefined) {
+            const cells = getCellsInRow(dragMenuIndex)(tr.selection);
+            if (cells && cells.length && cells[0].node !== tr.doc.nodeAt(newTargetCellPosition)) {
+              return tr.setMeta(pluginKey, action);
+            } // else NOP
+          } else {
+            return tr.setMeta(pluginKey, action);
+          }
+        }
+      }
+    },
     view: editorView => {
       return {
         destroy: monitorForElements({
@@ -44,7 +84,17 @@ export const createPlugin = (dispatch, eventDispatcher) => {
             // watch for changes
             return localId === (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId);
           },
+          onDragStart: ({
+            location
+          }) => {
+            autoScroller.start({
+              input: location.current.input
+            });
+          },
           onDrag(event) {
+            autoScroller.updateInput({
+              input: event.location.current.input
+            });
             const data = getDraggableDataFromEvent(event);
             // If no data can be found then it's most like we do not want to perform any drag actions
             if (!data) {
@@ -62,6 +112,7 @@ export const createPlugin = (dispatch, eventDispatcher) => {
             setDropTarget(dropTargetType, targetAdjustedIndex)(editorView.state, editorView.dispatch);
           },
           onDrop(event) {
+            autoScroller.stop();
             const data = getDraggableDataFromEvent(event);
 
             // If no data can be found then it's most like we do not want to perform any drop action

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

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

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

@@ -66,6 +66,9 @@ export const TableCssClassName = {
   CONTROLS_INSERT_LINE: `${tablePrefixSelector}-controls__insert-line`,
   CONTROLS_BUTTON_OVERLAY: `${tablePrefixSelector}-controls__button-overlay`,
   LAYOUT_BUTTON: `${tablePrefixSelector}-layout-button`,
+  DRAG_CONTROLS_INSERT_BUTTON: `${tablePrefixSelector}-controls__drag-insert-button`,
+  DRAG_CONTROLS_INSERT_BUTTON_INNER: `${tablePrefixSelector}-controls__drag-insert-button-inner`,
+  DRAG_CONTROLS_INSERT_BUTTON_WRAP: `${tablePrefixSelector}-controls__drag-insert-button-wrap`,
   CONTROLS_INSERT_MARKER: `${tablePrefixSelector}-controls__insert-marker`,
   CONTROLS_INSERT_COLUMN: `${tablePrefixSelector}-controls__insert-column`,
   CONTROLS_INSERT_ROW: `${tablePrefixSelector}-controls__insert-row`,
@@ -78,8 +81,12 @@ export const TableCssClassName = {
   CORNER_CONTROLS_INSERT_COLUMN_MARKER: `${tablePrefixSelector}-corner-controls__insert-column-marker`,
   CONTROLS_CORNER_BUTTON: `${tablePrefixSelector}-corner-button`,
   /** Controls with drag handle */
-  COLUMN_CONTROLS_WITH_DRAG: `${tablePrefixSelector}-column-controls-with-drag`,
-  ROW_CONTROLS_WITH_DRAG: `${tablePrefixSelector}-row-controls-with-drag`,
+  DRAG_ROW_CONTROLS: `${tablePrefixSelector}-drag-row-controls`,
+  DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-row-floating-insert-dot-wrapper`,
+  DRAG_ROW_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-row-floating-insert-dot`,
+  DRAG_COLUMN_CONTROLS: `${tablePrefixSelector}-drag-column-controls`,
+  DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-columns-floating-insert-dot-wrapper`,
+  DRAG_COLUMN_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-columns-floating-insert-dot`,
   DRAG_HANDLE_BUTTON_CONTAINER: `${tablePrefixSelector}-drag-handle-button-container`,
   /** Other classes */
   NUMBERED_COLUMN: `${tablePrefixSelector}-numbered-column`,

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

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

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
+import { getDragMenuConfig } from '../../utils/drag-menu';
+import { dragMenuDropdownWidth } from '../consts';
+const convertToDropdownItems = dragMenuConfig => {
+  let menuItems = [];
+  let menuCallback = {};
+  dragMenuConfig.forEach(item => {
+    menuItems.push({
+      key: item.id,
+      content: item.title,
+      value: {
+        name: item.id
+      },
+      isDisabled: item.disabled
+    });
+    item.onClick && (menuCallback[item.id] = item.onClick);
+  });
+  return {
+    menuItems,
+    menuCallback
+  };
+};
+export const DragMenu = ({
+  direction = 'row',
+  index,
+  isOpen,
+  editorView,
+  tableNode,
+  mountPoint,
+  boundariesElement,
+  scrollableElement
+}) => {
+  const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
+  const dragMenuConfig = getDragMenuConfig(direction, tableMap, index);
+  const {
+    menuItems,
+    menuCallback
+  } = convertToDropdownItems(dragMenuConfig);
+  const closeMenu = () => {
+    const {
+      state,
+      dispatch
+    } = editorView;
+    toggleDragMenu(false)(state, dispatch);
+  };
+  const onMenuItemActivated = ({
+    item
+  }) => {
+    var _menuCallback$item$va;
+    (_menuCallback$item$va = menuCallback[item.value.name]) === null || _menuCallback$item$va === void 0 ? void 0 : _menuCallback$item$va.call(menuCallback, editorView.state, editorView.dispatch);
+    closeMenu();
+  };
+  if (!menuItems) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    mountTo: mountPoint
+    //This needs be removed when the a11y is completely handled
+    //Disabling key navigation now as it works only partially
+    ,
+    arrowKeyNavigationProviderOptions: {
+      type: ArrowKeyNavigationType.MENU,
+      disableArrowKeyNavigation: true
+    },
+    items: [{
+      items: menuItems
+    }],
+    isOpen: isOpen,
+    onOpenChange: closeMenu,
+    onItemActivated: onMenuItemActivated,
+    fitWidth: dragMenuDropdownWidth,
+    boundariesElement: boundariesElement
+  });
+};

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

@@ -0,0 +1,56 @@
+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';
+const FloatingDragMenu = ({
+  mountPoint,
+  boundariesElement,
+  scrollableElement,
+  editorView,
+  isOpen,
+  tableRef,
+  tableNode,
+  direction,
+  index,
+  targetCellPosition
+}) => {
+  if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
+    return null;
+  }
+  const domAtPos = editorView.domAtPos.bind(editorView);
+  const targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
+  if (!targetCellRef) {
+    return null;
+  }
+  const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
+  const 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/es2019/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 @@ const getToolbarSize = tableRef => {
   }
   return tableToolbarSize;
 };
-const getInsertLineWidth = tableRef => {
+const 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.
@@ -37,12 +39,61 @@ const getInsertLineWidth = tableRef => {
     scrollLeft
   } = parentElement;
   const diff = offsetWidth - parentOffsetWidth;
-  const toolbarSize = getToolbarSize(tableRef);
+  const toolbarSize = isDragAndDropEnabled ? 0 : getToolbarSize(tableRef);
   return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + LINE_OFFSET;
 };
 const tooltipMessageByType = type => {
   return type === 'row' ? tableMessages.insertRow : tableMessages.insertColumn;
 };
+export const InsertButtonForDragAndDrop = ({
+  onMouseDown,
+  tableRef,
+  type,
+  intl: {
+    formatMessage
+  },
+  hasStickyHeaders
+}) => {
+  const 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.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
+    }
+  })));
+  const 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: `${ClassName.CONTROLS_INSERT_BUTTON_WRAP} ${ClassName.CONTROLS_INSERT_ROW}`
+  }, content));
+};
+export const DragAndDropInsertButton = injectIntl(InsertButtonForDragAndDrop);
 const InsertButton = ({
   onMouseDown,
   tableRef,

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

@@ -3,9 +3,11 @@ import { tableInsertColumnButtonOffset, tableInsertColumnButtonSize, tableToolba
 const HORIZONTAL_ALIGN_COLUMN_BUTTON = -(tableInsertColumnButtonSize / 2);
 const HORIZONTAL_ALIGN_NUMBERED_COLUMN_BUTTON = HORIZONTAL_ALIGN_COLUMN_BUTTON + akEditorTableNumberColumnWidth;
 const VERTICAL_ALIGN_COLUMN_BUTTON = tableToolbarSize + tableInsertColumnButtonOffset;
+const VERTICAL_ALIGN_COLUMN_BUTTON_DRAG = tableInsertColumnButtonOffset;
 const HORIZONTAL_ALIGN_ROW_BUTTON = -(tableToolbarSize + tableInsertColumnButtonOffset + tableInsertColumnButtonSize);
+const HORIZONTAL_ALIGN_ROW_BUTTON_DRAG = -18;
 const VERTICAL_ALIGN_ROW_BUTTON = tableInsertColumnButtonSize / 2;
-function getRowOptions(index) {
+function getRowOptions(index, isDragAndDropEnabled) {
   let defaultOptions = {
     alignX: 'left',
     alignY: 'bottom',
@@ -25,16 +27,16 @@ function getRowOptions(index) {
       return {
         ...position,
         // Left position should be always the offset (To place in the correct position even if the table has overflow).
-        left: HORIZONTAL_ALIGN_ROW_BUTTON
+        left: isDragAndDropEnabled ? HORIZONTAL_ALIGN_ROW_BUTTON_DRAG : HORIZONTAL_ALIGN_ROW_BUTTON
       };
     }
   };
 }
-function getColumnOptions(index, tableContainer, hasNumberedColumns) {
+function getColumnOptions(index, tableContainer, hasNumberedColumns, isDragAndDropEnabled) {
   const 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
@@ -75,12 +77,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/es2019/plugins/table/ui/FloatingInsertButton/index.js

@@ -14,7 +14,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 class FloatingInsertButton extends React.Component {
   constructor(props) {
     super(props);
@@ -32,6 +32,7 @@ export class FloatingInsertButton extends React.Component {
       boundariesElement,
       isHeaderColumnEnabled,
       isHeaderRowEnabled,
+      isDragAndDropEnabled,
       dispatchAnalyticsEvent
     } = this.props;
     const type = typeof insertColumnButtonIndex !== 'undefined' ? 'column' : typeof insertRowButtonIndex !== 'undefined' ? 'row' : null;
@@ -111,9 +112,14 @@ export class FloatingInsertButton extends 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/es2019/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';
 const getSelectedColumns = selection => {
   if (selection instanceof CellSelection && selection.isColSelection()) {
@@ -25,10 +26,13 @@ export const ColumnControls = ({
   localId,
   isInDanger,
   rowHeights,
-  colWidths
+  colWidths,
+  hasHeaderColumn
 }) => {
   var _colWidths$map$join, _rowHeights$;
   const widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(width => width ? `${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
+  const columnParams = getRowsParams(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   const colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
   const selectedColIndexes = getSelectedColumns(editorView.state.selection);
   const gridColumnPosition = useMemo(() => {
@@ -64,8 +68,15 @@ export const ColumnControls = ({
       clearHoverSelection()(state, dispatch);
     }
   }, [editorView, tableActive]);
+  const handleMouseUp = useCallback(() => {
+    const {
+      state,
+      dispatch
+    } = editorView;
+    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",
@@ -73,10 +84,38 @@ export const ColumnControls = ({
       gridTemplateColumns: widths,
       marginTop
     }
-  }, tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/React.createElement("div", {
+  }, !isResizing && columnParams.map(({
+    startIndex,
+    endIndex
+  }, index) => /*#__PURE__*/React.createElement("div", {
+    style: {
+      gridColumn: `${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"
@@ -89,7 +128,8 @@ export const ColumnControls = ({
     appearance: selectedColIndexes.includes(hoveredCell.colIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
     onClick: handleClick,
     onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut
+    onMouseOut: handleMouseOut,
+    onMouseUp: handleMouseUp
   }))));
 };
 export default ColumnControls;

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

@@ -2,7 +2,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 const TableFloatingColumnControls = ({
@@ -24,6 +24,7 @@ export const TableFloatingColumnControls = ({
   const [hasDropTargets, setHasDropTargets] = useState(false);
   const node = getNode();
   const currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
+  const hasHeaderColumn = containsHeaderColumn(node);
   useEffect(() => {
     var _window;
     if (tableRef && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
@@ -76,11 +77,11 @@ export const TableFloatingColumnControls = ({
   const colWidths = getColumnsWidths(editorView);
   const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
   const 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,
@@ -92,7 +93,8 @@ export const TableFloatingColumnControls = ({
     localId: currentNodeLocalId,
     isInDanger: isInDanger,
     rowHeights: rowHeights,
-    colWidths: colWidths
+    colWidths: colWidths,
+    hasHeaderColumn: hasHeaderColumn
   }), hasDropTargets && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
     stickyTop: tableActive ? stickyTop : undefined,