@atlaskit/editor-plugin-table 5.3.13 → 5.3.14

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

@@ -264,8 +264,8 @@ const tablesPlugin = ({
             insertRowButtonIndex,
             isHeaderColumnEnabled,
             isHeaderRowEnabled,
-            tableWrapperTarget,
-            isDragAndDropEnabled
+            isDragAndDropEnabled,
+            tableWrapperTarget
           } = tablePluginState;
           const {
             allowControls
@@ -301,6 +301,7 @@ const tablesPlugin = ({
             insertRowButtonIndex: insertRowButtonIndex,
             isHeaderColumnEnabled: isHeaderColumnEnabled,
             isHeaderRowEnabled: isHeaderRowEnabled,
+            isDragAndDropEnabled: isDragAndDropEnabled,
             editorView: editorView,
             mountPoint: popupsMountPoint,
             boundariesElement: popupsBoundariesElement,
@@ -329,7 +330,7 @@ const tablesPlugin = ({
             direction: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
             index: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
             isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing
-          }), allowControls && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
+          }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,
             tableRef: tableRef,

package/dist/es2019/plugins/table/pm-plugins/decorations/plugin.js

@@ -9,7 +9,7 @@ import { buildColumnControlsDecorations, maybeUpdateColumnControlsSelectedDecora
 export const pluginKey = new PluginKey('tableDecorationsPlugin');
 export const getDecorations = state => pluginKey.getState(state);
 export const handleDocOrSelectionChanged = (tr, decorationSet, oldState, newState) => {
-  var _tableWidthPluginKey$, _tableWidthPluginKey$2, _tr$getMeta;
+  var _tableWidthPluginKey$, _tableWidthPluginKey$2;
   const isResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(newState)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
   const wasResizing = (_tableWidthPluginKey$2 = tableWidthPluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
   const changedResizing = isResizing !== wasResizing;
@@ -17,7 +17,7 @@ export const handleDocOrSelectionChanged = (tr, decorationSet, oldState, newStat
   // 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,
       tr
@@ -38,16 +38,12 @@ export const createPlugin = () => {
     state: {
       init: () => DecorationSet.empty,
       apply: (tr, decorationSet, oldState, newState) => {
-        var _tablePluginKey$getSt, _tablePluginKey$getSt2;
         let pluginState = decorationSet;
         const meta = tr.getMeta(tablePluginKey);
-        const previousHover = (_tablePluginKey$getSt = tablePluginKey.getState(oldState)) === null || _tablePluginKey$getSt === void 0 ? void 0 : _tablePluginKey$getSt.hoveredCell;
-        const newHover = (_tablePluginKey$getSt2 = tablePluginKey.getState(newState)) === null || _tablePluginKey$getSt2 === void 0 ? void 0 : _tablePluginKey$getSt2.hoveredCell;
-        const 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/es2019/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';
 const isColumnSelected = tr => tr.selection instanceof CellSelection && tr.selection.isColSelection();
 
@@ -26,10 +25,9 @@ const maybeUpdateColumnControlsDecoration = ({
   tr
 }) => {
   const table = findTable(tr.selection);
-  const 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/es2019/plugins/table/pm-plugins/drag-and-drop/plugin.js

@@ -1,6 +1,7 @@
 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';
@@ -83,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) {
@@ -101,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/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/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';
 const FloatingDragMenu = ({
@@ -24,10 +25,11 @@ const FloatingDragMenu = ({
   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: "left",
+    alignX: direction === 'row' ? 'left' : 'center',
     alignY: "top",
     target: targetCellRef,
     mountTo: mountPoint,
@@ -39,7 +41,7 @@ const FloatingDragMenu = ({
     ,
     zIndex: akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
-    offset: [7, 0],
+    offset: offset,
     stick: true
   }, /*#__PURE__*/React.createElement(DragMenu, {
     editorView: editorView,

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,16 +39,65 @@ 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,
-  direction,
+  type,
   intl: {
     formatMessage
   },
@@ -54,8 +105,8 @@ const InsertButton = ({
 }) => {
   const 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", {
@@ -72,13 +123,13 @@ const InsertButton = ({
     fillRule: "evenodd"
   })))), /*#__PURE__*/React.createElement("div", {
     className: ClassName.CONTROLS_INSERT_LINE,
-    style: direction === 'row' ? {
+    style: type === 'row' ? {
       width: getInsertLineWidth(tableRef)
     } : {
       height: getInsertLineHeight(tableRef, hasStickyHeaders)
     }
   })));
-  const floatingButtonClassName = direction === 'column' ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
+  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", {

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(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/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,10 +112,15 @@ 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, {
-      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/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,

package/dist/es2019/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';
 const getSelectedRows = selection => {
   if (selection instanceof CellSelection && selection.isRowSelection()) {
@@ -24,12 +24,15 @@ const DragControlsComponent = ({
   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;
@@ -54,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]);
@@ -73,19 +73,40 @@ 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: (_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],

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

@@ -144,6 +144,8 @@ export default class TableFloatingControls extends Component {
       editorView: editorView,
       tableActive: tableActive,
       isInDanger: isInDanger,
+      isResizing: isResizing,
+      hasHeaderRow: hasHeaderRow,
       hoverRows: this.hoverRows,
       selectRow: this.selectRow,
       updateCellHoverLocation: this.updateCellHoverLocation