@atlaskit/editor-plugin-table 5.7.2 → 5.7.4

package/dist/es2019/ui/FloatingInsertButton/InsertButton.js

@@ -11,12 +11,12 @@ import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import Tooltip from '@atlaskit/tooltip';
 import { TableCssClassName as ClassName } from '../../types';
 import { tableToolbarSize } from '../consts';
-const getInsertLineHeight = (tableRef, hasStickyHeaders) => {
+const getInsertLineHeight = (tableRef, hasStickyHeaders, isDragAndDropEnabled) => {
   // The line gets height 100% from the table,
   // but since we have an overflow on the left,
   // we should add an offset to make up for it.
   const LINE_OFFSET = 3;
-  const ADDITIONAL_HEIGHT = hasStickyHeaders ? tableRef.getBoundingClientRect().top - tableMarginTop * 4 - LINE_OFFSET : tableToolbarSize + LINE_OFFSET;
+  const ADDITIONAL_HEIGHT = hasStickyHeaders ? tableRef.getBoundingClientRect().top - tableMarginTop * (isDragAndDropEnabled ? 3 : 4) - LINE_OFFSET : tableToolbarSize + LINE_OFFSET;
   return tableRef.offsetHeight + ADDITIONAL_HEIGHT;
 };
 const getToolbarSize = tableRef => {
@@ -89,7 +89,7 @@ export const InsertButtonForDragAndDrop = ({
       width: getInsertLineWidth(tableRef, true),
       left: "var(--ds-space-150, 12px)"
     } : {
-      height: getInsertLineHeight(tableRef, hasStickyHeaders) - 8,
+      height: getInsertLineHeight(tableRef, hasStickyHeaders, true) - 8,
       top: '-3px'
     }
   })));

package/dist/es2019/ui/FloatingInsertButton/index.js

@@ -6,7 +6,7 @@ import { ACTION, ACTION_SUBJECT, CONTENT_COMPONENT, EVENT_TYPE, INPUT_METHOD } f
 import { Popup } from '@atlaskit/editor-common/ui';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-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';
@@ -106,7 +106,7 @@ export class FloatingInsertButton extends React.Component {
     // By setting the Popup z-index higher than the sticky header z-index ( common-styles.ts tr.sticky)
     // 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 = type === 'column' ? akEditorTableCellOnStickyHeaderZIndex : undefined;
+    const zIndex = type === 'column' ? akEditorTableInsertButtonOnStickyHeaderZIndex : undefined;
     return /*#__PURE__*/React.createElement(Popup, _extends({
       target: targetCellRef,
       mountTo: tableContainerWrapper || mountPoint,

package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -1,7 +1,9 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 
-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 { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection, hoverCell, hoverColumns, selectColumn, selectColumns } from '../../../commands';
@@ -32,10 +34,16 @@ export const ColumnControls = ({
   colWidths,
   hasHeaderColumn,
   isTableHovered,
-  canDrag
+  canDrag,
+  tableContainerWidth,
+  isNumberColumnEnabled
 }) => {
   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';
+  const columnControlsRef = useRef(null);
+  const widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : 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(' ')) !== 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;
@@ -104,6 +112,24 @@ export const ColumnControls = ({
   const colIndexes = useMemo(() => {
     return [colIndex];
   }, [colIndex]);
+  const tableWrapper = closestElement(tableRef, `.${ClassName.TABLE_NODE_WRAPPER}`);
+  const handleScroll = useCallback(event => {
+    if (stickyTop) {
+      if (columnControlsRef && columnControlsRef.current) {
+        var _tableWrapper$scrollL;
+        columnControlsRef.current.scrollLeft = (_tableWrapper$scrollL = tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.scrollLeft) !== null && _tableWrapper$scrollL !== void 0 ? _tableWrapper$scrollL : 0;
+      }
+    }
+  }, [stickyTop, tableWrapper]);
+  useEffect(() => {
+    handleScroll();
+  }, [handleScroll]);
+  useEffect(() => {
+    tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.addEventListener('scroll', handleScroll);
+    return () => {
+      tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.removeEventListener('scroll', handleScroll);
+    };
+  }, [tableWrapper, handleScroll]);
   const generateHandleByType = type => {
     var _rowHeights$reduce, _colWidths;
     if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {
@@ -164,15 +190,19 @@ export const ColumnControls = ({
     const sortedHandles = [generateHandleByType('hover'), generateHandleByType('selected')];
     return hoveredCell.colIndex < selectedColIndexes[0] ? sortedHandles : sortedHandles.reverse();
   };
+  const containerWidth = isNumberColumnEnabled && tableContainerWidth ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth;
   return /*#__PURE__*/React.createElement("div", {
     className: ClassName.DRAG_COLUMN_CONTROLS,
     onMouseMove: handleMouseMove
   }, /*#__PURE__*/React.createElement("div", {
+    ref: columnControlsRef,
     className: ClassName.DRAG_COLUMN_CONTROLS_INNER,
     "data-testid": "table-floating-column-controls",
     style: {
       gridTemplateColumns: widths,
-      marginTop
+      marginTop,
+      width: stickyTop ? containerWidth : undefined,
+      overflowX: stickyTop ? 'hidden' : 'visible'
     }
   }, !isResizing && columnParams.map(({
     startIndex,

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { TableCssClassName as ClassName } from '../../types';
 import { containsHeaderColumn, getColumnsWidths, getRowHeights } from '../../utils';
@@ -16,16 +16,20 @@ export const TableFloatingColumnControls = ({
   selection,
   isInDanger,
   isTableHovered,
-  canDrag
+  canDrag,
+  tableContainerWidth,
+  isNumberColumnEnabled
 }) => {
   const [tableRect, setTableRect] = useState({
     width: 0,
     height: 0
   });
   const [hasDropTargets, setHasDropTargets] = useState(false);
+  const containerRef = useRef(null);
   const node = getNode();
   const currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
   const hasHeaderColumn = containsHeaderColumn(node);
+  const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
   useEffect(() => {
     var _window;
     if (tableRef && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
@@ -76,14 +80,17 @@ export const TableFloatingColumnControls = ({
     return null;
   }
   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) {
+    var _rowHeights$, _containerRef$current;
+    const headerRowHeight = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
+    containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.style.setProperty('top', `${stickyTop - headerRowHeight + 33}px` // 33px is padding and margin applied on tr.sticky
+    );
+  } else {
+    var _containerRef$current2;
+    containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.style.removeProperty('top');
   }
   return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
     className: ClassName.DRAG_COLUMN_CONTROLS_WRAPPER,
     "data-testid": "table-floating-column-controls-wrapper"
   }, /*#__PURE__*/React.createElement(ColumnControls, {
@@ -99,7 +106,9 @@ export const TableFloatingColumnControls = ({
     rowHeights: rowHeights,
     colWidths: colWidths,
     hasHeaderColumn: hasHeaderColumn,
-    canDrag: canDrag
+    canDrag: canDrag,
+    tableContainerWidth: tableContainerWidth,
+    isNumberColumnEnabled: isNumberColumnEnabled
   }), hasDropTargets && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
     stickyTop: tableActive ? stickyTop : undefined,

package/dist/es2019/ui/common-styles.js

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
 import { browser } from '@atlaskit/editor-common/utils';
-import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, relativeFontSizeToBase16, SelectionStyle } from '@atlaskit/editor-shared-styles';
+import { akEditorFloatingDialogZIndex, akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, relativeFontSizeToBase16, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
@@ -940,6 +940,11 @@ export const tableStyles = props => css`
       top: ${tableMarginTop}px;
     }
 
+    .${ClassName.TABLE_STICKY} .${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
+      position: fixed;
+      z-index: ${akEditorFloatingDialogZIndex};
+    }
+
     ${tableWrapperStyles()}
   }
 

package/dist/es2019/utils/decoration.js

@@ -8,6 +8,7 @@ import { nonNullable } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
 import { ColumnResizeWidget } from '../ui/ColumnResizeWidget';
 const filterDecorationByKey = (key, decorationSet) => decorationSet.find(undefined, undefined, spec => spec.key.indexOf(key) > -1);
@@ -43,40 +44,53 @@ export const createControlsHoverDecoration = (cells, type, tr, isDragAndDropEnab
   // 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) => {
+  if (getBooleanFF('platform.editor.table.in-danger-hover-merged-cells-fix')) {
+    if (danger && type !== 'table') {
       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);
+        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 => {
     const cell = tr.doc.nodeAt(pos);

package/dist/es2019/utils/dom.js

@@ -1,6 +1,5 @@
 import { closestElement, containsClassName } from '@atlaskit/editor-common/utils';
 import { TableCssClassName as ClassName } from '../types';
-import { tableToolbarSize } from '../ui/consts';
 const SELECTOR_TABLE_LEAFS = `.${ClassName.TABLE_CELL}, .${ClassName.TABLE_HEADER_CELL}`;
 export const isCell = node => {
   return Boolean(node && (['TH', 'TD'].indexOf(node.tagName) > -1 || !!closestElement(node, `.${ClassName.TABLE_HEADER_CELL}`) || !!closestElement(node, `.${ClassName.TABLE_CELL}`)));
@@ -116,23 +115,6 @@ export const getMousePositionVerticalRelativeByElement = mouseEvent => {
   }
   return null;
 };
-
-// This function is deprecated
-export const updateResizeHandles = tableRef => {
-  if (!tableRef) {
-    return;
-  }
-
-  // see ED-7600
-  const nodes = Array.from(tableRef.querySelectorAll(`.${ClassName.RESIZE_HANDLE}`));
-  if (!nodes || !nodes.length) {
-    return;
-  }
-  const height = tableRef.offsetHeight + tableToolbarSize;
-  nodes.forEach(node => {
-    node.style.height = `${height}px`;
-  });
-};
 export const hasResizeHandler = ({
   columnEndIndexTarget,
   target

package/dist/es2019/utils/index.js

@@ -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 { getSelectedTableInfo, getSelectedCellInfo } from './analytics';

package/dist/esm/commands/insert.js

@@ -34,7 +34,7 @@ export function addColumnAt(getEditorContainerWidth) {
       var table = findTable(updatedTr.selection);
       if (table) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
-        updatedTr = rescaleColumns(getEditorContainerWidth)(table, view)(updatedTr);
+        updatedTr = rescaleColumns()(table, view)(updatedTr);
       }
       if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event') && view) {
         updatedTr = updateRowOrColumnMovedTransform({

package/dist/esm/nodeviews/TableComponent.js

@@ -14,7 +14,7 @@ import classnames from 'classnames';
 import memoizeOne from 'memoize-one';
 import rafSchedule from 'raf-schd';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
-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 { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { MAX_BROWSER_SCROLLBAR_HEIGHT, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
@@ -554,6 +554,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
         stickyHeader: this.state.stickyHeader
       });
+      var tableContainerWidth = getTableContainerWidth(node);
       var colControls = isDragAndDropEnabled ? /*#__PURE__*/React.createElement(TableFloatingColumnControls, {
         editorView: view,
         tableRef: tableRef,
@@ -572,7 +573,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
         stickyHeader: this.state.stickyHeader,
         canDrag: canDrag,
-        getEditorFeatureFlags: getEditorFeatureFlags
+        getEditorFeatureFlags: getEditorFeatureFlags,
+        tableContainerWidth: tableContainerWidth,
+        isNumberColumnEnabled: node.attrs.isNumberColumnEnabled
       }) : null;
       var shadowPadding = allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
       var shadowStyle = memoizeOne(function (visible) {

package/dist/esm/plugin.js

@@ -352,7 +352,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing,
             canDrag: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.canDrag,
             getEditorContainerWidth: defaultGetEditorContainerWidth,
-            editorAnalyticsAPI: editorAnalyticsAPI
+            editorAnalyticsAPI: editorAnalyticsAPI,
+            stickyHeaders: stickyHeader
           }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,

package/dist/esm/pm-plugins/main.js

@@ -7,8 +7,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenLayoutNodes } from '@atlaskit/editor-common/transforms';
 import { browser, closestElement } from '@atlaskit/editor-common/utils';
 import { findParentDomRefOfType, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import { findTable } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../commands';
 import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from '../commands/misc';
 import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, whenTableInFocus, withCellTracking } from '../event-handlers';
@@ -18,7 +16,7 @@ import TableRow from '../nodeviews/TableRow';
 import { pluginKey as decorationsPluginKey } from '../pm-plugins/decorations/plugin';
 import { fixTables, replaceSelectedTable } from '../transforms';
 import { TableCssClassName as ClassName } from '../types';
-import { findControlsHoverDecoration, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, transformSliceToRemoveOpenTable, updateResizeHandles } from '../utils';
+import { findControlsHoverDecoration, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, transformSliceToRemoveOpenTable } from '../utils';
 import { isHeaderRowRequired } from '../utils/paste';
 import { defaultHoveredCell, defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
@@ -107,24 +105,15 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
           var selection = state.selection;
           var pluginState = getPluginState(state);
           var tableRef;
-          var tableNode;
           if (pluginState.editorHasFocus) {
             var parent = findParentDomRefOfType(state.schema.nodes.table, domAtPos)(selection);
             if (parent) {
               tableRef = parent.querySelector('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) {
             var _ref = state.selection,
               $cursor = _ref.$cursor;

package/dist/esm/pm-plugins/table-resizing/event-handlers.js

@@ -7,7 +7,7 @@ import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 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';
 import { getPluginState } from './plugin-factory';
@@ -145,10 +145,6 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     var colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
     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);
   window.addEventListener('mousemove', move);

package/dist/esm/transforms/column-width.js

@@ -3,13 +3,11 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
-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 { 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';
 
@@ -89,7 +87,7 @@ export var updateColumnWidths = function updateColumnWidths(resizeState, table,
  * @param view
  * @returns Updated transaction with rescaled columns for a given table
  */
-export var rescaleColumnsNew = function rescaleColumnsNew() {
+export var rescaleColumns = function rescaleColumns() {
   return function (table, view) {
     return function (tr) {
       var _tableRef$parentEleme, _tableRef$parentEleme2;
@@ -109,7 +107,7 @@ export var rescaleColumnsNew = function rescaleColumnsNew() {
         // when table is resized the tableRef client width will be 1px larger than colGroup, which is used in calculations
         width: isResized ? tableRef.clientWidth - 1 : tableRef.clientWidth,
         /** the is the width the table can reach before overflowing */
-        possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width') ? (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0 : ((tableRef === null || tableRef === void 0 || (_tableRef$parentEleme2 = tableRef.parentElement) === null || _tableRef$parentEleme2 === void 0 ? void 0 : _tableRef$parentEleme2.clientWidth) || 0) - insertColumnButtonOffset - 1,
+        possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width') ? (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0 : ((tableRef === null || tableRef === void 0 || (_tableRef$parentEleme2 = tableRef.parentElement) === null || _tableRef$parentEleme2 === void 0 ? void 0 : _tableRef$parentEleme2.clientWidth) || 0) - insertColumnButtonOffset,
         isResized: isResized
       };
 
@@ -169,104 +167,4 @@ export var rescaleColumnsNew = function 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 var rescaleColumnsOld = function rescaleColumnsOld(getEditorContainerWidth) {
-  return function (table, view) {
-    return function (tr) {
-      var _tableRef$parentEleme3;
-      if (!view) {
-        return tr;
-      }
-      var pos = table.pos;
-      var newTable = tr.doc.nodeAt(pos);
-      var state = view.state;
-      var domAtPos = view.domAtPos.bind(view);
-      var maybeTable = domAtPos(table.start).node;
-      var tableRef = maybeTable.closest('table');
-      if (!tableRef || !newTable) {
-        return tr;
-      }
-      var layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout);
-      // The is the width the table can reach before overflowing
-      var maxSize = getTableMaxWidth({
-        table: table.node,
-        tableStart: table.start,
-        state: state,
-        layout: layout,
-        getEditorContainerWidth: getEditorContainerWidth
-      });
-      var tableWidth = tableRef.clientWidth || akEditorDefaultLayoutWidth;
-      var tableMaxWidth = (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme3 = tableRef.parentElement) === null || _tableRef$parentEleme3 === void 0 ? void 0 : _tableRef$parentEleme3.clientWidth) || 0;
-      tableMaxWidth -= insertColumnButtonOffset;
-      var newTableMap = TableMap.get(newTable);
-      var noOfColumns = newTableMap.width;
-      if (!noOfColumns || noOfColumns <= 0) {
-        return tr;
-      }
-      var 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)) {
-        var widths = new Array(noOfColumns).fill(tableCellMinWidth);
-        var cols = widths.map(function (_, index) {
-          return {
-            width: tableCellMinWidth,
-            minWidth: tableCellMinWidth,
-            index: index
-          };
-        });
-        var overflow = tableWidth > maxSize;
-        var minWidthResizeState = {
-          cols: cols,
-          widths: widths,
-          maxSize: maxSize,
-          tableWidth: tableWidth,
-          overflow: overflow
-        };
-        return updateColumnWidths(minWidthResizeState, table.node, table.start)(tr);
-      }
-      var resizeState = getResizeState({
-        minWidth: tableCellMinWidth,
-        table: table.node,
-        start: table.start,
-        tableRef: tableRef,
-        domAtPos: domAtPos,
-        maxSize: maxSize
-      });
-      var previousTableWidth = resizeState.tableWidth - tableNewColumnMinWidth;
-      var 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 var rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
-  if (getBooleanFF('platform.editor.table-update-colwidths-after-column-is-deleted')) {
-    return rescaleColumnsNew();
-  }
-  return rescaleColumnsOld(getEditorContainerWidth);
 };

package/dist/esm/transforms/delete-columns.js

@@ -7,7 +7,6 @@ import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 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';
 import { rescaleColumns } from './column-width';
 import { splitCellsInColumns } from './split';
@@ -217,10 +216,8 @@ export var deleteColumns = function deleteColumns(rect, allowCustomStep, view) {
       updatedTr = deleteColumnsLegacy(rect)(updatedTr);
     }
     var 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/dist/esm/types.js

@@ -116,8 +116,6 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   RESIZING_PLUGIN: "".concat(tablePrefixSelector, "-resizing-plugin"),
   RESIZE_CURSOR: "".concat(tablePrefixSelector, "-resize-cursor"),
   IS_RESIZING: "".concat(tablePrefixSelector, "-is-resizing"),
-  // Resize handle is going to be removed together with updateResizeHandles - table's utility function
-  RESIZE_HANDLE: "".concat(tablePrefixSelector, "-resize-handle"),
   RESIZE_HANDLE_DECORATION: "".concat(tablePrefixSelector, "-resize-decoration"),
   CONTEXTUAL_SUBMENU: "".concat(tablePrefixSelector, "-contextual-submenu"),
   CONTEXTUAL_MENU_BUTTON_WRAP: "".concat(tablePrefixSelector, "-contextual-menu-button-wrap"),