@atlaskit/editor-plugin-table 5.7.2 → 5.7.3

package/dist/types/utils/index.d.ts

@@ -2,7 +2,7 @@ export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, is
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine, } from './decoration';
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow, } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, } from './paste';
-export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, findNearestCellIndexToPoint, } from './dom';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, isResizeHandleDecoration, hasResizeHandler, findNearestCellIndexToPoint, } from './dom';
 export { convertHTMLCellIndexToColumnIndex, getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, getColumnIndexMappedToColumnIndexInFirstRow, } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow, } from './row-controls';
 export type { RowParams } from './row-controls';

package/dist/types-ts4.5/types.d.ts

@@ -322,7 +322,6 @@ export declare const TableCssClassName: {
     RESIZING_PLUGIN: string;
     RESIZE_CURSOR: string;
     IS_RESIZING: string;
-    RESIZE_HANDLE: string;
     RESIZE_HANDLE_DECORATION: string;
     CONTEXTUAL_SUBMENU: string;
     CONTEXTUAL_MENU_BUTTON_WRAP: string;

package/dist/types-ts4.5/ui/FloatingDragMenu/index.d.ts

@@ -3,6 +3,7 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { TableDirection } from '../../types';
 export interface Props {
     editorView: EditorView;
@@ -18,9 +19,10 @@ export interface Props {
     getEditorContainerWidth: GetEditorContainerWidth;
     canDrag?: boolean;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
+    stickyHeaders?: RowStickyState;
 }
 declare const FloatingDragMenu: {
-    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, }: Props): JSX.Element | null;
+    ({ mountPoint, boundariesElement, scrollableElement, editorView, isOpen, tableNode, direction, index, targetCellPosition, getEditorContainerWidth, canDrag, editorAnalyticsAPI, stickyHeaders, }: Props): JSX.Element | null;
     displayName: string;
 };
 export default FloatingDragMenu;

package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -15,6 +15,8 @@ export interface ColumnControlsProps {
     hasHeaderColumn?: boolean;
     isTableHovered?: boolean;
     canDrag?: boolean;
+    tableContainerWidth?: number;
+    isNumberColumnEnabled?: boolean;
 }
-export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, canDrag, }: ColumnControlsProps) => JSX.Element;
+export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, isResizing, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, canDrag, tableContainerWidth, isNumberColumnEnabled, }: ColumnControlsProps) => JSX.Element;
 export default ColumnControls;

package/dist/types-ts4.5/ui/TableFloatingColumnControls/index.d.ts

@@ -23,6 +23,8 @@ export interface Props {
     stickyHeader?: RowStickyState;
     isTableHovered?: boolean;
     canDrag?: boolean;
+    tableContainerWidth?: number;
+    isNumberColumnEnabled?: boolean;
 }
 export declare const TableFloatingColumnControls: React.FC<Props>;
 export default TableFloatingColumnControls;

package/dist/types-ts4.5/utils/dom.d.ts

@@ -18,7 +18,6 @@ export declare const isDragColumnFloatingInsertDot: (node: HTMLElement | null) =
 export declare const isDragCornerButton: (node: HTMLElement | null) => boolean;
 export declare const getMousePositionHorizontalRelativeByElement: (mouseEvent: MouseEvent, elementContentRects?: ElementContentRects, gapInPixels?: number, isDragAndDropEnabled?: boolean) => 'left' | 'right' | null;
 export declare const getMousePositionVerticalRelativeByElement: (mouseEvent: MouseEvent) => 'top' | 'bottom' | null;
-export declare const updateResizeHandles: (tableRef?: HTMLElement) => void;
 export declare const hasResizeHandler: ({ columnEndIndexTarget, target, }: {
     columnEndIndexTarget: number;
     target: HTMLElement;

package/dist/types-ts4.5/utils/index.d.ts

@@ -2,7 +2,7 @@ export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, is
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine, } from './decoration';
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow, } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, } from './paste';
-export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler, findNearestCellIndexToPoint, } from './dom';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, isResizeHandleDecoration, hasResizeHandler, findNearestCellIndexToPoint, } from './dom';
 export { convertHTMLCellIndexToColumnIndex, getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, getColumnIndexMappedToColumnIndexInFirstRow, } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow, } from './row-controls';
 export type { RowParams } from './row-controls';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.7.2",
+  "version": "5.7.3",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.2.0",
     "@atlaskit/custom-steps": "^0.0.10",
-    "@atlaskit/editor-common": "^76.29.0",
+    "@atlaskit/editor-common": "^76.30.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",
@@ -119,9 +119,6 @@
     "platform.editor.resizing-table-height-improvement": {
       "type": "boolean"
     },
-    "platform.editor.table-remove-update-resize-handles_djvab": {
-      "type": "boolean"
-    },
     "platform.editor.table.increase-shadow-visibility_lh89r": {
       "type": "boolean"
     },
@@ -148,6 +145,9 @@
     },
     "platform.editor.menu.group-items": {
       "type": "boolean"
+    },
+    "platform.editor.table.in-danger-hover-merged-cells-fix": {
+      "type": "boolean"
     }
   }
-}
+}

package/src/nodeviews/TableComponent.tsx

@@ -13,7 +13,10 @@ import {
 } from '@atlaskit/editor-common/analytics';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
+import {
+  getParentNodeWidth,
+  getTableContainerWidth,
+} from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import type {
   EditorContainerWidth,
@@ -510,7 +513,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         stickyHeader={this.state.stickyHeader}
       />
     );
-
+    const tableContainerWidth = getTableContainerWidth(node);
     const colControls = isDragAndDropEnabled ? (
       <TableFloatingColumnControls
         editorView={view}
@@ -530,6 +533,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         stickyHeader={this.state.stickyHeader}
         canDrag={canDrag}
         getEditorFeatureFlags={getEditorFeatureFlags}
+        tableContainerWidth={tableContainerWidth}
+        isNumberColumnEnabled={node.attrs.isNumberColumnEnabled}
       />
     ) : null;
 

package/src/plugin.tsx

@@ -515,6 +515,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                       canDrag={dragAndDropState?.canDrag}
                       getEditorContainerWidth={defaultGetEditorContainerWidth}
                       editorAnalyticsAPI={editorAnalyticsAPI}
+                      stickyHeaders={stickyHeader}
                     />
                   )}
                   {allowControls && !isDragAndDropEnabled && !isResizing && (

package/src/pm-plugins/main.ts

@@ -37,8 +37,6 @@ import {
   findParentNodeOfType,
 } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { findTable } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {
   addBoldInEmptyHeaderCells,
@@ -83,7 +81,6 @@ import {
   transformSliceToCorrectEmptyTableCells,
   transformSliceToFixHardBreakProblemOnCopyFromCell,
   transformSliceToRemoveOpenTable,
-  updateResizeHandles,
 } from '../utils';
 import { isHeaderRowRequired } from '../utils/paste';
 
@@ -209,7 +206,6 @@ export const createPlugin = (
           const { selection } = state;
           const pluginState = getPluginState(state);
           let tableRef: HTMLTableElement | undefined;
-          let tableNode;
           if (pluginState.editorHasFocus) {
             const parent = findParentDomRefOfType(
               state.schema.nodes.table,
@@ -221,26 +217,12 @@ export const createPlugin = (
                   'table',
                 ) || undefined;
             }
-
-            tableNode = findTable(state.selection);
           }
 
           if (pluginState.tableRef !== tableRef) {
             setTableRef(tableRef)(state, dispatch);
           }
 
-          // Removes updateResizeHandles
-          if (
-            getBooleanFF(
-              'platform.editor.table-remove-update-resize-handles_djvab',
-            )
-          ) {
-          } else {
-            if (pluginState.tableNode !== tableNode) {
-              updateResizeHandles(tableRef);
-            }
-          }
-
           if (pluginState.editorHasFocus && pluginState.tableRef) {
             const { $cursor } = state.selection as TextSelection;
             if ($cursor) {

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

@@ -20,7 +20,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { updateResizeHandleDecorations } from '../../commands/misc';
 import { updateColumnWidths } from '../../transforms';
-import { getSelectedColumnIndexes, updateResizeHandles } from '../../utils';
+import { getSelectedColumnIndexes } from '../../utils';
 import { META_KEYS } from '../table-analytics';
 
 import { evenColumns, setDragging, stopResizing } from './commands';
@@ -228,13 +228,6 @@ export const handleMouseDown = (
     resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom);
 
     updateControls()(state);
-    // Remove updateResizeHandles
-    if (
-      getBooleanFF('platform.editor.table-remove-update-resize-handles_djvab')
-    ) {
-    } else {
-      updateResizeHandles(dom);
-    }
   }
 
   window.addEventListener('mouseup', finish);

package/src/types.ts

@@ -359,8 +359,6 @@ export const TableCssClassName = {
   RESIZE_CURSOR: `${tablePrefixSelector}-resize-cursor`,
   IS_RESIZING: `${tablePrefixSelector}-is-resizing`,
 
-  // Resize handle is going to be removed together with updateResizeHandles - table's utility function
-  RESIZE_HANDLE: `${tablePrefixSelector}-resize-handle`,
   RESIZE_HANDLE_DECORATION: `${tablePrefixSelector}-resize-decoration`,
 
   CONTEXTUAL_SUBMENU: `${tablePrefixSelector}-contextual-submenu`,

package/src/ui/FloatingDragMenu/index.tsx

@@ -5,9 +5,13 @@ import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { Popup } from '@atlaskit/editor-common/ui';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
+import {
+  akEditorFloatingDialogZIndex,
+  akEditorFloatingOverlapPanelZIndex,
+} from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 
+import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { TableDirection } from '../../types';
 import { dragMenuDropdownWidth } from '../consts';
 
@@ -27,6 +31,7 @@ export interface Props {
   getEditorContainerWidth: GetEditorContainerWidth;
   canDrag?: boolean;
   editorAnalyticsAPI?: EditorAnalyticsAPI;
+  stickyHeaders?: RowStickyState;
 }
 
 const FloatingDragMenu = ({
@@ -42,6 +47,7 @@ const FloatingDragMenu = ({
   getEditorContainerWidth,
   canDrag,
   editorAnalyticsAPI,
+  stickyHeaders,
 }: Props) => {
   if (
     !isOpen ||
@@ -50,6 +56,7 @@ const FloatingDragMenu = ({
   ) {
     return null;
   }
+  const inStickyMode = stickyHeaders?.sticky;
 
   const targetHandleRef =
     direction === 'row'
@@ -77,7 +84,12 @@ const FloatingDragMenu = ({
       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}
+      // In sticky mode, we want to show the menu above the sticky header
+      zIndex={
+        inStickyMode
+          ? akEditorFloatingDialogZIndex
+          : akEditorFloatingOverlapPanelZIndex
+      }
       forcePlacement={true}
       offset={offset}
       stick={true}

package/src/ui/FloatingInsertButton/InsertButton.tsx

@@ -32,6 +32,7 @@ export interface ButtonProps {
 const getInsertLineHeight = (
   tableRef: HTMLElement,
   hasStickyHeaders: boolean,
+  isDragAndDropEnabled?: boolean,
 ) => {
   // The line gets height 100% from the table,
   // but since we have an overflow on the left,
@@ -39,7 +40,9 @@ const getInsertLineHeight = (
   const LINE_OFFSET = 3;
 
   const ADDITIONAL_HEIGHT = hasStickyHeaders
-    ? tableRef.getBoundingClientRect().top - tableMarginTop * 4 - LINE_OFFSET
+    ? tableRef.getBoundingClientRect().top -
+      tableMarginTop * (isDragAndDropEnabled ? 3 : 4) -
+      LINE_OFFSET
     : tableToolbarSize + LINE_OFFSET;
   return tableRef.offsetHeight + ADDITIONAL_HEIGHT;
 };
@@ -140,7 +143,8 @@ export const InsertButtonForDragAndDrop = ({
                   left: token('space.150', '12px'),
                 }
               : {
-                  height: getInsertLineHeight(tableRef, hasStickyHeaders) - 8,
+                  height:
+                    getInsertLineHeight(tableRef, hasStickyHeaders, true) - 8,
                   top: '-3px',
                 }
           }

package/src/ui/FloatingInsertButton/index.tsx

@@ -21,7 +21,7 @@ import { closestElement } from '@atlaskit/editor-common/utils';
 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 { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
+import { akEditorTableInsertButtonOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
@@ -192,7 +192,9 @@ export class FloatingInsertButton extends React.Component<
     // Only when inserting a column, otherwise set to undefined
     // Need to set z-index in the Popup, set z-index in the <InsertButton /> will not work
     const zIndex: number | undefined =
-      type === 'column' ? akEditorTableCellOnStickyHeaderZIndex : undefined;
+      type === 'column'
+        ? akEditorTableInsertButtonOnStickyHeaderZIndex
+        : undefined;
 
     return (
       <Popup

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

@@ -1,10 +1,12 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 import type { MouseEvent } from 'react';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import { closestElement } from '@atlaskit/editor-common/utils';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 
@@ -35,6 +37,8 @@ export interface ColumnControlsProps {
   hasHeaderColumn?: boolean;
   isTableHovered?: boolean;
   canDrag?: boolean;
+  tableContainerWidth?: number;
+  isNumberColumnEnabled?: boolean;
 }
 
 const getSelectedColumns = (selection: Selection) => {
@@ -62,10 +66,18 @@ export const ColumnControls = ({
   hasHeaderColumn,
   isTableHovered,
   canDrag,
+  tableContainerWidth,
+  isNumberColumnEnabled,
 }: ColumnControlsProps) => {
+  const columnControlsRef = useRef<HTMLDivElement>(null);
   const widths =
-    colWidths?.map((width) => (width ? `${width - 1}px` : '0px')).join(' ') ??
-    '0px';
+    colWidths
+      ?.map((width) =>
+        // when there is sticky header, a `margin-right: -1px` applied to `tr.sticky th` so it causes colWidths to be 1px wider
+        // we need to reduce the width by 1px to avoid misalignment of column controls.
+        width ? (stickyTop ? `${width - 2}px` : `${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;
@@ -153,6 +165,32 @@ export const ColumnControls = ({
   const colIndexes = useMemo(() => {
     return [colIndex!];
   }, [colIndex]);
+  const tableWrapper = closestElement(
+    tableRef,
+    `.${ClassName.TABLE_NODE_WRAPPER}`,
+  );
+  const handleScroll = useCallback(
+    (event?: Event) => {
+      if (stickyTop) {
+        if (columnControlsRef && columnControlsRef.current) {
+          columnControlsRef.current.scrollLeft = tableWrapper?.scrollLeft ?? 0;
+        }
+      }
+    },
+    [stickyTop, tableWrapper],
+  );
+
+  useEffect(() => {
+    handleScroll();
+  }, [handleScroll]);
+
+  useEffect(() => {
+    tableWrapper?.addEventListener('scroll', handleScroll);
+
+    return () => {
+      tableWrapper?.removeEventListener('scroll', handleScroll);
+    };
+  }, [tableWrapper, handleScroll]);
 
   const generateHandleByType = (type: HandleTypes): JSX.Element | null => {
     if (!hoveredCell || !colWidths?.length) {
@@ -260,17 +298,24 @@ export const ColumnControls = ({
       : sortedHandles.reverse();
   };
 
+  const containerWidth =
+    isNumberColumnEnabled && tableContainerWidth
+      ? tableContainerWidth - akEditorTableNumberColumnWidth
+      : tableContainerWidth;
   return (
     <div
       className={ClassName.DRAG_COLUMN_CONTROLS}
       onMouseMove={handleMouseMove}
     >
       <div
+        ref={columnControlsRef}
         className={ClassName.DRAG_COLUMN_CONTROLS_INNER}
         data-testid="table-floating-column-controls"
         style={{
           gridTemplateColumns: widths,
           marginTop,
+          width: stickyTop ? containerWidth : undefined,
+          overflowX: stickyTop ? 'hidden' : 'visible',
         }}
       >
         {!isResizing &&

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
@@ -36,6 +36,8 @@ export interface Props {
   stickyHeader?: RowStickyState;
   isTableHovered?: boolean;
   canDrag?: boolean;
+  tableContainerWidth?: number;
+  isNumberColumnEnabled?: boolean;
 }
 
 export const TableFloatingColumnControls: React.FC<Props> = ({
@@ -51,15 +53,22 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
   isInDanger,
   isTableHovered,
   canDrag,
+  tableContainerWidth,
+  isNumberColumnEnabled,
 }) => {
   const [tableRect, setTableRect] = useState<{ width: number; height: number }>(
     { width: 0, height: 0 },
   );
-
   const [hasDropTargets, setHasDropTargets] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
   const node = getNode();
   const currentNodeLocalId = node?.attrs.localId;
   const hasHeaderColumn = containsHeaderColumn(node);
+  const stickyTop =
+    stickyHeader && stickyHeader.sticky && hasHeaderRow
+      ? stickyHeader.top
+      : undefined;
 
   useEffect(() => {
     if (tableRef && window?.ResizeObserver) {
@@ -118,19 +127,20 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
 
   const colWidths = getColumnsWidths(editorView);
 
-  const stickyTop =
-    stickyHeader && stickyHeader.sticky && hasHeaderRow
-      ? stickyHeader.top
-      : undefined;
-
-  // TODO - Removing column controls for now because they are causing the table
-  // to overflow and scroll. Update this when sticky header support is added ED-21088
-  if (stickyHeader && stickyHeader.sticky) {
-    return null;
+  if (stickyTop) {
+    const headerRowHeight =
+      hasHeaderRow && stickyTop !== undefined ? rowHeights?.[0] ?? 0 : 0;
+    containerRef?.current?.style.setProperty(
+      'top',
+      `${stickyTop! - headerRowHeight + 33}px`, // 33px is padding and margin applied on tr.sticky
+    );
+  } else {
+    containerRef?.current?.style.removeProperty('top');
   }
 
   return (
     <div
+      ref={containerRef}
       className={ClassName.DRAG_COLUMN_CONTROLS_WRAPPER}
       data-testid="table-floating-column-controls-wrapper"
     >
@@ -148,6 +158,8 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
         colWidths={colWidths}
         hasHeaderColumn={hasHeaderColumn}
         canDrag={canDrag}
+        tableContainerWidth={tableContainerWidth}
+        isNumberColumnEnabled={isNumberColumnEnabled}
       />
       {hasDropTargets && (
         <ColumnDropTargets

package/src/ui/common-styles.ts

@@ -7,6 +7,7 @@ import {
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
 import { browser } from '@atlaskit/editor-common/utils';
 import {
+  akEditorFloatingDialogZIndex,
   akEditorSelectedNodeClassName,
   akEditorSmallZIndex,
   akEditorStickyHeaderZIndex,
@@ -1049,6 +1050,11 @@ export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
       top: ${tableMarginTop}px;
     }
 
+    .${ClassName.TABLE_STICKY} .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
+      position: fixed;
+      z-index: ${akEditorFloatingDialogZIndex};
+    }
+
     ${tableWrapperStyles()}
   }
 

package/src/utils/decoration.ts

@@ -22,6 +22,7 @@ import {
   getCellsInRow,
   getSelectionRect,
 } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import type { Cell, CellColumnPositioning } from '../types';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
@@ -101,34 +102,46 @@ export const createControlsHoverDecoration = (
   // So If the table cells are in danger we want to create a "rectangle" selection
   // to match the "clicked" selection
 
-  if (danger) {
-    // Find the bounding rectangle of all the given cells, also considering
-    // merged cells.
-    const { recLeft, recTop, recRight, recBottom } = cells.reduce(
-      (acc, cell) => {
-        const { left, right, bottom, top } = map.findCell(
-          cell.pos - table.start,
-        );
-        // Finding the bounding rect requires finding the min left and top positions,
-        // and the max right and bottom positions of the cells
-        return {
-          recLeft: Math.min(acc.recLeft, left),
-          recTop: Math.min(acc.recTop, top),
-          recRight: Math.max(acc.recRight, right),
-          recBottom: Math.max(acc.recBottom, bottom),
-        };
-      },
-      // +-Infinity as initialisation vars which will always be overwritten
-      // by smaller/larger values respectively
-      {
-        recLeft: Infinity,
-        recTop: Infinity,
-        recRight: -Infinity,
-        recBottom: -Infinity,
-      },
-    );
-    const rect = new Rect(recLeft, recTop, recRight, recBottom);
-    updatedCells = map.cellsInRect(rect).map((x) => x + table.start);
+  if (getBooleanFF('platform.editor.table.in-danger-hover-merged-cells-fix')) {
+    if (danger && type !== 'table') {
+      const { selection } = tr;
+      const table = findTable(selection);
+      const rect = getSelectionRect(selection);
+
+      if (table && rect) {
+        updatedCells = map.cellsInRect(rect).map((x) => x + table.start);
+      }
+    }
+  } else {
+    if (danger) {
+      // Find the bounding rectangle of all the given cells, also considering
+      // merged cells.
+      const { recLeft, recTop, recRight, recBottom } = cells.reduce(
+        (acc, cell) => {
+          const { left, right, bottom, top } = map.findCell(
+            cell.pos - table.start,
+          );
+          // Finding the bounding rect requires finding the min left and top positions,
+          // and the max right and bottom positions of the cells
+          return {
+            recLeft: Math.min(acc.recLeft, left),
+            recTop: Math.min(acc.recTop, top),
+            recRight: Math.max(acc.recRight, right),
+            recBottom: Math.max(acc.recBottom, bottom),
+          };
+        },
+        // +-Infinity as initialisation vars which will always be overwritten
+        // by smaller/larger values respectively
+        {
+          recLeft: Infinity,
+          recTop: Infinity,
+          recRight: -Infinity,
+          recBottom: -Infinity,
+        },
+      );
+      const rect = new Rect(recLeft, recTop, recRight, recBottom);
+      updatedCells = map.cellsInRect(rect).map((x) => x + table.start);
+    }
   }
 
   return updatedCells.map((pos) => {