@atlaskit/editor-plugin-table 5.7.2 → 5.7.4

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/transforms/column-width.ts

@@ -1,26 +1,17 @@
 import type { CellAttributes } from '@atlaskit/adf-schema';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
 import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-import {
-  TableMap,
-  tableNewColumnMinWidth,
-} from '@atlaskit/editor-tables/table-map';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import type { ResizeState } from '../pm-plugins/table-resizing/utils';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
 import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
-import { getTableMaxWidth } from '../pm-plugins/table-resizing/utils/misc';
-import {
-  getResizeState,
-  normaliseTableLayout,
-} from '../pm-plugins/table-resizing/utils/resize-state';
+import { getResizeState } from '../pm-plugins/table-resizing/utils/resize-state';
 import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
 import { insertColumnButtonOffset } from '../ui/common-styles';
 
@@ -112,7 +103,7 @@ export const updateColumnWidths =
  * @param view
  * @returns Updated transaction with rescaled columns for a given table
  */
-export const rescaleColumnsNew =
+export const rescaleColumns =
   () =>
   (table: ContentNodeWithPos, view: EditorView | undefined) =>
   (tr: Transaction): Transaction => {
@@ -138,8 +129,7 @@ export const rescaleColumnsNew =
       possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width')
         ? tableRef?.parentElement?.clientWidth || 0
         : (tableRef?.parentElement?.clientWidth || 0) -
-          insertColumnButtonOffset -
-          1,
+          insertColumnButtonOffset,
       isResized,
     };
 
@@ -223,126 +213,3 @@ export const rescaleColumnsNew =
 
     return updateColumnWidths(resizeState, table.node, table.start)(tr);
   };
-
-/**
- * This function is called when user inserts/deletes a column in a table to;
- * - rescale all columns (if the table did not overflow before the insertion)
- * - and update column widths.
- *
- * This is done manually to avoid a multi-dispatch in TableComponent. See [ED-8288].
- * @param table
- * @param view
- * @returns Updated transaction with rescaled columns for a given table
- */
-export const rescaleColumnsOld =
-  (getEditorContainerWidth: GetEditorContainerWidth) =>
-  (table: ContentNodeWithPos, view: EditorView | undefined) =>
-  (tr: Transaction): Transaction => {
-    if (!view) {
-      return tr;
-    }
-
-    const pos = table.pos;
-    const newTable = tr.doc.nodeAt(pos);
-    const { state } = view;
-    const domAtPos = view.domAtPos.bind(view);
-    const maybeTable = domAtPos(table.start).node as HTMLElement;
-    const tableRef = maybeTable.closest('table');
-
-    if (!tableRef || !newTable) {
-      return tr;
-    }
-
-    const layout = normaliseTableLayout(tableRef?.dataset.layout);
-    // The is the width the table can reach before overflowing
-    const maxSize = getTableMaxWidth({
-      table: table.node,
-      tableStart: table.start,
-      state,
-      layout,
-      getEditorContainerWidth,
-    });
-
-    const tableWidth = tableRef.clientWidth || akEditorDefaultLayoutWidth;
-    let tableMaxWidth = tableRef?.parentElement?.clientWidth || 0;
-    tableMaxWidth -= insertColumnButtonOffset;
-    const newTableMap = TableMap.get(newTable);
-    const noOfColumns = newTableMap.width;
-    if (!noOfColumns || noOfColumns <= 0) {
-      return tr;
-    }
-    const columnWidthUnresized = tableWidth / noOfColumns;
-
-    // If the table has not been resized, and the column width is bigger than the minimum column width
-    // we skip updating the size of columns here.
-    if (
-      !hasTableBeenResized(table.node) &&
-      columnWidthUnresized > tableCellMinWidth
-    ) {
-      return tr;
-    }
-
-    // If the table has not been resized, and the column width is smaller than the minimum column width
-    // Or if the table has been resized, but each column width is either 48px or null
-    // we update the table to have 48px for each column
-    if (
-      (!hasTableBeenResized(table.node) &&
-        columnWidthUnresized <= tableCellMinWidth) ||
-      (hasTableBeenResized(table.node) && isMinCellWidthTable(table.node))
-    ) {
-      const widths: Array<number> = new Array(noOfColumns).fill(
-        tableCellMinWidth,
-      );
-      const cols = widths.map((_, index) => ({
-        width: tableCellMinWidth,
-        minWidth: tableCellMinWidth,
-        index,
-      }));
-      const overflow = tableWidth > maxSize;
-      const minWidthResizeState = {
-        cols,
-        widths,
-        maxSize,
-        tableWidth,
-        overflow,
-      };
-      return updateColumnWidths(
-        minWidthResizeState,
-        table.node,
-        table.start,
-      )(tr);
-    }
-
-    let resizeState = getResizeState({
-      minWidth: tableCellMinWidth,
-      table: table.node,
-      start: table.start,
-      tableRef,
-      domAtPos,
-      maxSize,
-    });
-    const previousTableWidth = resizeState.tableWidth - tableNewColumnMinWidth;
-    const tableDidntPreviouslyOverflow =
-      previousTableWidth <= Math.max(maxSize, tableMaxWidth);
-
-    // If the new table width will result in the table going into an overflow state
-    // we resize the cells to avoid the overflow occuring
-    if (tableDidntPreviouslyOverflow && resizeState.overflow) {
-      resizeState = scaleTableTo(resizeState, maxSize);
-    }
-
-    return updateColumnWidths(resizeState, table.node, table.start)(tr);
-  };
-
-export const rescaleColumns = (
-  getEditorContainerWidth?: GetEditorContainerWidth,
-) => {
-  if (
-    getBooleanFF(
-      'platform.editor.table-update-colwidths-after-column-is-deleted',
-    )
-  ) {
-    return rescaleColumnsNew();
-  }
-  return rescaleColumnsOld(getEditorContainerWidth!);
-};

package/src/transforms/delete-columns.ts

@@ -8,7 +8,6 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { META_KEYS } from '../pm-plugins/table-analytics';
 
@@ -263,14 +262,9 @@ export const deleteColumns =
       updatedTr = deleteColumnsLegacy(rect)(updatedTr);
     }
     const table = findTable(updatedTr.selection);
-    if (
-      getBooleanFF(
-        'platform.editor.table-update-colwidths-after-column-is-deleted',
-      )
-    ) {
-      if (table) {
-        updatedTr = rescaleColumns()(table, view)(updatedTr);
-      }
+
+    if (table) {
+      updatedTr = rescaleColumns()(table, view)(updatedTr);
     }
     return updatedTr;
   };

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) => {

package/src/utils/dom.ts

@@ -5,7 +5,6 @@ import {
 
 import { TableCssClassName as ClassName } from '../types';
 import type { ElementContentRects } from '../types';
-import { tableToolbarSize } from '../ui/consts';
 
 const SELECTOR_TABLE_LEAFS = `.${ClassName.TABLE_CELL}, .${ClassName.TABLE_HEADER_CELL}`;
 
@@ -178,28 +177,6 @@ export const getMousePositionVerticalRelativeByElement = (
   return null;
 };
 
-// This function is deprecated
-export const updateResizeHandles = (tableRef?: HTMLElement) => {
-  if (!tableRef) {
-    return;
-  }
-
-  // see ED-7600
-  const nodes = Array.from(
-    tableRef.querySelectorAll(
-      `.${ClassName.RESIZE_HANDLE}`,
-    ) as NodeListOf<HTMLElement>,
-  );
-  if (!nodes || !nodes.length) {
-    return;
-  }
-
-  const height = tableRef.offsetHeight + tableToolbarSize;
-  nodes.forEach((node) => {
-    node.style.height = `${height}px`;
-  });
-};
-
 export const hasResizeHandler = ({
   columnEndIndexTarget,
   target,

package/src/utils/index.ts

@@ -54,7 +54,6 @@ export {
   getColumnOrRowIndex,
   getMousePositionHorizontalRelativeByElement,
   getMousePositionVerticalRelativeByElement,
-  updateResizeHandles,
   isResizeHandleDecoration,
   hasResizeHandler,
   findNearestCellIndexToPoint,