@atlaskit/editor-plugin-table 5.3.13 → 5.3.14

package/src/plugins/table/event-handlers.ts

@@ -55,6 +55,8 @@ import {
   isCell,
   isColumnControlsDecorations,
   isCornerButton,
+  isDragColumnFloatingInsertDot,
+  isDragRowFloatingInsertDot,
   isInsertRowButton,
   isResizeHandleDecoration,
   isRowControlsButton,
@@ -78,6 +80,12 @@ const isFocusingFloatingToolbar = (event: Event) =>
   event.relatedTarget instanceof HTMLElement &&
   event.relatedTarget.closest('[role="toolbar"]');
 
+const isFocusingDragHandles = (event: Event) =>
+  event instanceof FocusEvent &&
+  event.relatedTarget instanceof HTMLElement &&
+  event.relatedTarget.closest('button') &&
+  event.relatedTarget.getAttribute('draggable') === 'true';
+
 export const handleBlur = (view: EditorView, event: Event): boolean => {
   const { state, dispatch } = view;
   // IE version check for ED-4665
@@ -86,7 +94,8 @@ export const handleBlur = (view: EditorView, event: Event): boolean => {
     browser.ie_version !== 11 &&
     !isFocusingCalendar(event) &&
     !isFocusingModal(event) &&
-    !isFocusingFloatingToolbar(event)
+    !isFocusingFloatingToolbar(event) &&
+    !isFocusingDragHandles(event)
   ) {
     setEditorFocus(false)(state, dispatch);
   }
@@ -312,7 +321,10 @@ export const handleMouseMove = (
   }
   const element = event.target;
 
-  if (isColumnControlsDecorations(element)) {
+  if (
+    isColumnControlsDecorations(element) ||
+    isDragColumnFloatingInsertDot(element)
+  ) {
     const { state, dispatch } = view;
     const { insertColumnButtonIndex } = getPluginState(state);
     const [startIndex, endIndex] = getColumnOrRowIndex(element);
@@ -330,7 +342,7 @@ export const handleMouseMove = (
     }
   }
 
-  if (isRowControlsButton(element)) {
+  if (isRowControlsButton(element) || isDragRowFloatingInsertDot(element)) {
     const { state, dispatch } = view;
     const { insertRowButtonIndex } = getPluginState(state);
     const [startIndex, endIndex] = getColumnOrRowIndex(element);

package/src/plugins/table/index.tsx

@@ -383,8 +383,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                 insertRowButtonIndex,
                 isHeaderColumnEnabled,
                 isHeaderRowEnabled,
-                tableWrapperTarget,
                 isDragAndDropEnabled,
+                tableWrapperTarget,
               } = tablePluginState!;
 
               const { allowControls } = pluginConfig;
@@ -444,6 +444,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       insertRowButtonIndex={insertRowButtonIndex}
                       isHeaderColumnEnabled={isHeaderColumnEnabled}
                       isHeaderRowEnabled={isHeaderRowEnabled}
+                      isDragAndDropEnabled={isDragAndDropEnabled}
                       editorView={editorView}
                       mountPoint={popupsMountPoint}
                       boundariesElement={popupsBoundariesElement}
@@ -483,7 +484,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       isOpen={!!dragAndDropState?.isDragMenuOpen && !isResizing}
                     />
                   )}
-                  {allowControls && !isResizing && (
+                  {allowControls && !isDragAndDropEnabled && !isResizing && (
                     <FloatingDeleteButton
                       editorView={editorView}
                       selection={editorView.state.selection}

package/src/plugins/table/pm-plugins/decorations/plugin.ts

@@ -40,8 +40,7 @@ export const handleDocOrSelectionChanged = (
   } else if (
     tr.docChanged ||
     tr.selection instanceof CellSelection ||
-    changedResizing ||
-    tr.getMeta(tablePluginKey)?.type === 'HOVER_CELL'
+    changedResizing
   ) {
     return buildColumnControlsDecorations({
       decorationSet,
@@ -72,11 +71,6 @@ export const createPlugin = () => {
       apply: (tr, decorationSet, oldState, newState) => {
         let pluginState = decorationSet;
         const meta = tr.getMeta(tablePluginKey);
-        const previousHover = tablePluginKey.getState(oldState)?.hoveredCell;
-        const newHover = tablePluginKey.getState(newState)?.hoveredCell;
-        const changedCellHover =
-          previousHover?.colIndex !== newHover?.colIndex ||
-          previousHover?.rowIndex !== newHover?.rowIndex;
 
         if (meta && meta.data && meta.data.decorationSet) {
           pluginState = meta.data.decorationSet;
@@ -85,8 +79,7 @@ export const createPlugin = () => {
         if (
           tr.docChanged ||
           tr.selectionSet ||
-          tr.getMeta(tableWidthPluginKey) ||
-          changedCellHover
+          tr.getMeta(tableWidthPluginKey)
         ) {
           pluginState = pluginState.map(tr.mapping, tr.doc);
           return handleDocOrSelectionChanged(

package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts

@@ -15,7 +15,6 @@ import {
   findControlsHoverDecoration,
   updateDecorations,
 } from '../../../utils/decoration';
-import { pluginKey as tablePluginKey } from '../../plugin-key';
 
 import { composeDecorations } from './compose-decorations';
 import type { DecorationTransformer } from './types';
@@ -50,10 +49,9 @@ const maybeUpdateColumnControlsDecoration: DecorationTransformer = ({
   tr,
 }): DecorationSet => {
   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?.type !== 'HOVER_CELL') {
+  if (!table) {
     return decorationSet;
   }
 

package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts

@@ -6,6 +6,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 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 type { DraggableSourceData } from '../../types';
@@ -96,7 +97,14 @@ export const createPlugin = (
             // watch for changes
             return localId === 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) {
@@ -118,6 +126,7 @@ export const createPlugin = (
             );
           },
           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/src/plugins/table/types.ts

@@ -293,6 +293,10 @@ export const TableCssClassName = {
   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`,
@@ -308,8 +312,14 @@ export const TableCssClassName = {
   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 */

package/src/plugins/table/ui/FloatingDragMenu/index.tsx

@@ -5,6 +5,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 
 import type { TableDirection } from '../../types';
 import { dragMenuDropdownWidth } from '../consts';
@@ -49,11 +50,17 @@ const FloatingDragMenu = ({
   if (!targetCellRef) {
     return null;
   }
-
+  const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
+  const offset =
+    direction === 'row'
+      ? [7, 0]
+      : index === (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 (
     <Popup
-      alignX="left"
+      alignX={direction === 'row' ? 'left' : 'center'}
       alignY="top"
       target={targetCellRef as HTMLElement}
       mountTo={mountPoint}
@@ -64,7 +71,7 @@ const FloatingDragMenu = ({
       // in table, but below floating dialogs like typeaheads, pickers, etc.
       zIndex={akEditorFloatingOverlapPanelZIndex}
       forcePlacement={true}
-      offset={[7, 0]}
+      offset={offset}
       stick={true}
     >
       <DragMenu

package/src/plugins/table/ui/FloatingInsertButton/InsertButton.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import type { SyntheticEvent } from 'react';
 import React from 'react';
 
@@ -20,7 +21,7 @@ import { tableToolbarSize } from '../consts';
 import tableMessages from '../messages';
 
 export interface ButtonProps {
-  direction: TableDirection;
+  type: TableDirection;
   tableRef: HTMLElement;
   onMouseDown: (event: SyntheticEvent<HTMLButtonElement>) => void;
   hasStickyHeaders: boolean;
@@ -52,7 +53,10 @@ const getToolbarSize = (tableRef: HTMLElement): number => {
   return tableToolbarSize;
 };
 
-const getInsertLineWidth = (tableRef: HTMLElement) => {
+const getInsertLineWidth = (
+  tableRef: HTMLElement,
+  isDragAndDropEnabled?: boolean,
+) => {
   // 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.
@@ -61,7 +65,7 @@ const getInsertLineWidth = (tableRef: HTMLElement) => {
   const parentOffsetWidth = parentElement!.offsetWidth;
   const { scrollLeft } = parentElement!;
   const diff = offsetWidth - parentOffsetWidth;
-  const toolbarSize = getToolbarSize(tableRef);
+  const toolbarSize = isDragAndDropEnabled ? 0 : getToolbarSize(tableRef);
   return (
     Math.min(
       offsetWidth + toolbarSize,
@@ -74,10 +78,80 @@ const tooltipMessageByType = (type: TableDirection) => {
   return type === 'row' ? tableMessages.insertRow : tableMessages.insertColumn;
 };
 
+export const InsertButtonForDragAndDrop = ({
+  onMouseDown,
+  tableRef,
+  type,
+  intl: { formatMessage },
+  hasStickyHeaders,
+}: ButtonProps & WrappedComponentProps) => {
+  const content = (
+    <Tooltip
+      content={
+        <ToolTipContent
+          description={formatMessage(tooltipMessageByType(type))}
+          keymap={type === 'row' ? addRowAfter : addColumnAfter}
+        />
+      }
+      position="top"
+    >
+      <>
+        <div className={ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER}>
+          <button
+            type="button"
+            className={ClassName.DRAG_CONTROLS_INSERT_BUTTON}
+            onMouseDown={onMouseDown}
+          >
+            <svg
+              width="10"
+              height="10"
+              viewBox="0 0 10 10"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <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"
+              />
+            </svg>
+          </button>
+        </div>
+        <div
+          className={ClassName.CONTROLS_INSERT_LINE}
+          style={
+            type === 'row'
+              ? { width: getInsertLineWidth(tableRef, true), left: '14px' }
+              : { height: getInsertLineHeight(tableRef, hasStickyHeaders) - 11 }
+          }
+        />
+      </>
+    </Tooltip>
+  );
+
+  const floatingButtonClassName =
+    type === 'column'
+      ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN
+      : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
+
+  return (
+    <div className={floatingButtonClassName}>
+      <div
+        className={`${ClassName.CONTROLS_INSERT_BUTTON_WRAP} ${ClassName.CONTROLS_INSERT_ROW}`}
+      >
+        {content}
+      </div>
+    </div>
+  );
+};
+
+export const DragAndDropInsertButton = injectIntl(InsertButtonForDragAndDrop);
+
 const InsertButton = ({
   onMouseDown,
   tableRef,
-  direction,
+  type,
   intl: { formatMessage },
   hasStickyHeaders,
 }: ButtonProps & WrappedComponentProps) => {
@@ -85,8 +159,8 @@ const InsertButton = ({
     <Tooltip
       content={
         <ToolTipContent
-          description={formatMessage(tooltipMessageByType(direction))}
-          keymap={direction === 'row' ? addRowAfter : addColumnAfter}
+          description={formatMessage(tooltipMessageByType(type))}
+          keymap={type === 'row' ? addRowAfter : addColumnAfter}
         />
       }
       position="top"
@@ -110,7 +184,7 @@ const InsertButton = ({
         <div
           className={ClassName.CONTROLS_INSERT_LINE}
           style={
-            direction === 'row'
+            type === 'row'
               ? { width: getInsertLineWidth(tableRef) }
               : { height: getInsertLineHeight(tableRef, hasStickyHeaders) }
           }
@@ -120,7 +194,7 @@ const InsertButton = ({
   );
 
   const floatingButtonClassName =
-    direction === 'column'
+    type === 'column'
       ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN
       : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
 

package/src/plugins/table/ui/FloatingInsertButton/getPopupOptions.ts

@@ -11,17 +11,26 @@ import {
 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: number): Partial<PopupProps> {
+function getRowOptions(
+  index: number,
+  isDragAndDropEnabled: boolean,
+): Partial<PopupProps> {
   let defaultOptions = {
     alignX: 'left',
     alignY: 'bottom',
@@ -43,7 +52,9 @@ function getRowOptions(index: number): Partial<PopupProps> {
       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,
       };
     },
   };
@@ -53,11 +64,17 @@ function getColumnOptions(
   index: number,
   tableContainer: HTMLElement | null,
   hasNumberedColumns: boolean,
+  isDragAndDropEnabled: boolean,
 ): Partial<PopupProps> {
   const options: Partial<PopupProps> = {
     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
@@ -108,13 +125,19 @@ function getPopupOptions(
   direction: TableDirection,
   index: number,
   hasNumberedColumns: boolean,
+  isDragAndDropEnabled: boolean,
   tableContainer: HTMLElement | null,
 ): Partial<PopupProps> {
   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/src/plugins/table/ui/FloatingInsertButton/index.tsx

@@ -34,7 +34,7 @@ import { TableCssClassName as ClassName } from '../../types';
 import { checkIfNumberColumnEnabled } from '../../utils';
 
 import getPopupOptions from './getPopupOptions';
-import InsertButton from './InsertButton';
+import InsertButton, { DragAndDropInsertButton } from './InsertButton';
 
 export interface Props {
   editorView: EditorView;
@@ -45,6 +45,7 @@ export interface Props {
   insertRowButtonIndex?: number;
   isHeaderColumnEnabled?: boolean;
   isHeaderRowEnabled?: boolean;
+  isDragAndDropEnabled?: boolean;
   mountPoint?: HTMLElement;
   boundariesElement?: HTMLElement;
   scrollableElement?: HTMLElement;
@@ -76,6 +77,7 @@ export class FloatingInsertButton extends React.Component<
       boundariesElement,
       isHeaderColumnEnabled,
       isHeaderRowEnabled,
+      isDragAndDropEnabled,
       dispatchAnalyticsEvent,
     } = this.props;
 
@@ -199,16 +201,26 @@ export class FloatingInsertButton extends React.Component<
           type,
           index,
           hasNumberedColumns,
+          !!isDragAndDropEnabled,
           tableContainerWrapper,
         )}
         zIndex={zIndex}
       >
-        <InsertButton
-          direction={type}
-          tableRef={tableRef}
-          onMouseDown={type === 'column' ? this.insertColumn : this.insertRow}
-          hasStickyHeaders={this.props.hasStickyHeaders || false}
-        />
+        {isDragAndDropEnabled ? (
+          <DragAndDropInsertButton
+            type={type}
+            tableRef={tableRef}
+            onMouseDown={type === 'column' ? this.insertColumn : this.insertRow}
+            hasStickyHeaders={this.props.hasStickyHeaders || false}
+          />
+        ) : (
+          <InsertButton
+            type={type}
+            tableRef={tableRef}
+            onMouseDown={type === 'column' ? this.insertColumn : this.insertRow}
+            hasStickyHeaders={this.props.hasStickyHeaders || false}
+          />
+        )}
       </Popup>
     );
   }

package/src/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -5,15 +5,17 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { token } from '@atlaskit/tokens';
 
 import {
   clearHoverSelection,
   hoverColumns,
   selectColumn,
 } from '../../../commands';
+import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import type { CellHoverMeta } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
-import { getSelectedColumnIndexes } from '../../../utils';
+import { getRowsParams, getSelectedColumnIndexes } from '../../../utils';
 import { DragHandle } from '../../DragHandle';
 
 export interface ColumnControlsProps {
@@ -27,6 +29,7 @@ export interface ColumnControlsProps {
   localId?: string;
   rowHeights?: number[];
   colWidths?: (number | undefined)[];
+  hasHeaderColumn?: boolean;
 }
 
 const getSelectedColumns = (selection: Selection) => {
@@ -51,10 +54,13 @@ export const ColumnControls = ({
   isInDanger,
   rowHeights,
   colWidths,
+  hasHeaderColumn,
 }: ColumnControlsProps) => {
   const widths =
     colWidths?.map((width) => (width ? `${width - 1}px` : '0px')).join(' ') ??
     '0px';
+  // TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
+  const columnParams = getRowsParams(colWidths ?? []);
   const colIndex = hoveredCell?.colIndex;
   const selectedColIndexes = getSelectedColumns(editorView.state.selection);
 
@@ -94,8 +100,13 @@ export const ColumnControls = ({
     }
   }, [editorView, tableActive]);
 
+  const handleMouseUp = useCallback(() => {
+    const { state, dispatch } = editorView;
+    toggleDragMenu(undefined, 'column', colIndex)(state, dispatch);
+  }, [editorView, colIndex]);
+
   return (
-    <div className={ClassName.COLUMN_CONTROLS_WITH_DRAG}>
+    <div className={ClassName.DRAG_COLUMN_CONTROLS}>
       <div
         className={ClassName.COLUMN_CONTROLS_INNER}
         data-testid="table-floating-column-controls"
@@ -104,6 +115,33 @@ export const ColumnControls = ({
           marginTop,
         }}
       >
+        {!isResizing &&
+          columnParams.map(({ startIndex, endIndex }, index) => (
+            <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 && (
+                <div
+                  style={{
+                    left: '0px',
+                    right: 'unset',
+                  }}
+                  className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT}
+                />
+              )}
+              <div
+                className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT}
+                style={columnParams.length - 1 === index ? { right: '0' } : {}}
+              />
+            </div>
+          ))}
         {tableActive &&
           !isResizing &&
           !!hoveredCell &&
@@ -111,7 +149,12 @@ export const ColumnControls = ({
             <div
               style={{
                 gridColumn: gridColumnPosition,
-                marginTop: `-15px`,
+                zIndex: 99,
+                display: 'flex',
+                width: '100%',
+                justifyContent: 'center',
+                alignItems: 'center',
+                marginTop: token('space.negative.025', '-2px'),
               }}
               data-column-control-index={hoveredCell.colIndex}
               data-testid="table-floating-column-control"
@@ -132,6 +175,7 @@ export const ColumnControls = ({
                 onClick={handleClick}
                 onMouseOver={handleMouseOver}
                 onMouseOut={handleMouseOut}
+                onMouseUp={handleMouseUp}
               />
             </div>
           )}

package/src/plugins/table/ui/TableFloatingColumnControls/index.tsx

@@ -12,7 +12,11 @@ import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/el
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { CellHoverMeta, DraggableSourceData } from '../../types';
 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';
@@ -53,6 +57,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
   const [hasDropTargets, setHasDropTargets] = useState(false);
   const node = getNode();
   const currentNodeLocalId = node?.attrs.localId;
+  const hasHeaderColumn = containsHeaderColumn(node);
 
   useEffect(() => {
     if (tableRef && window?.ResizeObserver) {
@@ -118,12 +123,13 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
 
   const mountTo = (tableRef && tableRef?.parentElement) || document.body;
 
+  if (!tableActive) {
+    return null;
+  }
+
   return ReactDOM.createPortal(
     <div
       className={ClassName.COLUMN_CONTROLS_WRAPPER}
-      style={{
-        pointerEvents: 'none',
-      }}
       data-testid="table-floating-column-controls-wrapper"
     >
       <ColumnControls
@@ -137,6 +143,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
         isInDanger={isInDanger}
         rowHeights={rowHeights}
         colWidths={colWidths}
+        hasHeaderColumn={hasHeaderColumn}
       />
       {hasDropTargets && (
         <ColumnDropTargets