@atlaskit/editor-plugin-table 5.7.1 → 5.7.3

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$, _rowHeights$reduce;
-  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';
+  var _colWidths$map$join, _rowHeights$;
+  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,14 +112,32 @@ export const ColumnControls = ({
   const colIndexes = useMemo(() => {
     return [colIndex];
   }, [colIndex]);
-  const previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce((sum, cur) => sum + cur, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
+  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 _colWidths;
+    var _rowHeights$reduce, _colWidths;
     if (!hoveredCell || !(colWidths !== null && colWidths !== void 0 && colWidths.length)) {
       return null;
     }
     const isHover = type === 'hover';
     const isColumnsSelected = selectedColIndexes.length > 0;
+    const previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce((sum, cur) => sum + cur, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
     const showCondition = isHover ? isColumnsSelected && !selectedColIndexes.includes(colIndex) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex) : selectedColIndexes.length < (colWidths === null || colWidths === void 0 ? void 0 : colWidths.length) && Number.isFinite(hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex);
     if (!showCondition) {
       return null;
@@ -119,15 +145,15 @@ export const ColumnControls = ({
     const gridColumnPosition = `${colIndex + 1} / span 1`;
     const selectedColumnPosition = `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`;
     const hoveredAppearance = selectedColIndexes.includes(colIndex) ? isInDanger ? 'danger' : 'selected' : 'default';
-    const currentSelectionApprearance = isColumnsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
-    const istSelecting = isColumnsSelected && !isHover;
+    const currentSelectionAppearance = isColumnsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
+    const isSelecting = isColumnsSelected && !isHover;
 
     // this indexes are used to calculate the drag and drop source
     const indexes = isColumnsSelected ? isHover ? colIndexes : selectedColIndexes : colIndexes;
     return showCondition && /*#__PURE__*/React.createElement("div", {
       key: type,
       style: {
-        gridColumn: istSelecting ? selectedColumnPosition : gridColumnPosition,
+        gridColumn: isSelecting ? selectedColumnPosition : gridColumnPosition,
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
@@ -145,7 +171,7 @@ export const ColumnControls = ({
       forceDefaultHandle: isHover ? false : isColumnsSelected,
       previewWidth: (_colWidths = colWidths === null || colWidths === void 0 ? void 0 : colWidths[colIndex]) !== null && _colWidths !== void 0 ? _colWidths : tableCellMinWidth,
       previewHeight: previewHeight,
-      appearance: istSelecting ? currentSelectionApprearance : hoveredAppearance,
+      appearance: isSelecting ? currentSelectionAppearance : hoveredAppearance,
       onClick: handleClick,
       onMouseOver: handleMouseOver,
       onMouseOut: handleMouseOut,
@@ -164,22 +190,26 @@ 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,
     endIndex
   }, index) => /*#__PURE__*/React.createElement("div", {
     style: {
-      gridColumn: `${index + 1} / span 1`
+      gridColumn: `${startIndex + 1} / span 1`
     },
     "data-start-index": startIndex,
     "data-end-index": endIndex,

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/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/toolbar.js

@@ -10,8 +10,12 @@ import { closestElement, getChildrenInfo as _getChildrenInfo, getNodeName, isRef
 import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType, splitCell } from '@atlaskit/editor-tables/utils';
+import DistributeColumnIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import TableOptionsIcon from '@atlaskit/icon/glyph/preferences';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from './commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
@@ -49,16 +53,30 @@ export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _
     disabled: !state.canCollapseTable,
     hidden: !config.allowCollapse
   }];
-  return {
-    id: 'editor.table.tableOptions',
-    type: 'dropdown',
-    testId: 'table_options',
-    title: formatMessage(messages.tableOptions),
-    hidden: options.every(function (option) {
-      return option.hidden;
-    }),
-    options: options
-  };
+  if (state.isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling')) {
+    return {
+      id: 'editor.table.tableOptions',
+      type: 'dropdown',
+      testId: 'table_options',
+      icon: TableOptionsIcon,
+      title: formatMessage(messages.tableOptions),
+      hidden: options.every(function (option) {
+        return option.hidden;
+      }),
+      options: options
+    };
+  } else {
+    return {
+      id: 'editor.table.tableOptions',
+      type: 'dropdown',
+      testId: 'table_options',
+      title: formatMessage(messages.tableOptions),
+      hidden: options.every(function (option) {
+        return option.hidden;
+      }),
+      options: options
+    };
+  }
 };
 
 // Added these options for mobile. Mobile bridge translates this menu and
@@ -257,6 +275,16 @@ export var getClosestSelectionRect = function getClosestSelectionRect(state) {
   var selection = state.selection;
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
 };
+export var getClosestSelectionOrTableRect = function getClosestSelectionOrTableRect(state) {
+  var selection = state.selection;
+  var tableObject = findTable(state.selection);
+  if (!tableObject) {
+    return;
+  }
+  var map = TableMap.get(tableObject.node);
+  var tableRect = new Rect(0, 0, map.width, map.height);
+  return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : tableRect;
+};
 export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView) {
   return function (config) {
     return function (state, intl) {
@@ -272,6 +300,8 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
         var cellItems;
         cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI);
+        var columnSettingsItems;
+        columnSettingsItems = pluginState.isDragAndDropEnabled && getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI) : [];
         var colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
         // Check if we need to show confirm dialog for delete button
@@ -324,7 +354,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
           },
           zIndex: akEditorFloatingPanelZIndex + 1,
           // Place the context menu slightly above the others
-          items: [menu, separator(menu.hidden)].concat(_toConsumableArray(cellItems), colorPicker, [{
+          items: [menu, separator(menu.hidden)].concat(_toConsumableArray(cellItems), _toConsumableArray(columnSettingsItems), colorPicker, [{
             type: 'extensions-placeholder',
             separator: 'end'
           }, {
@@ -379,9 +409,52 @@ var getCellItems = function getCellItems(pluginConfig, state, view, _ref3, getEd
   }
   return [];
 };
-var getColorPicker = function getColorPicker(state, menu, _ref4, editorAnalyticsAPI) {
-  var _node$attrs;
+export var getDistributeConfig = function getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI) {
+  return function (state, dispatch, editorView) {
+    var selectionOrTableRect = getClosestSelectionOrTableRect(state);
+    if (!editorView || !selectionOrTableRect) {
+      return false;
+    }
+    var newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+    if (newResizeStateWithAnalytics) {
+      distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
+      return true;
+    }
+    return false;
+  };
+};
+
+// this create the button group for distribute column and also fixed column width
+// fixed column button should be in this function call in the future
+var getColumnSettingItems = function getColumnSettingItems(editorState, editorView, _ref4, getEditorContainerWidth, editorAnalyticsAPI) {
+  var _newResizeStateWithAn2, _pluginState$pluginCo3;
   var formatMessage = _ref4.formatMessage;
+  var pluginState = getPluginState(editorState);
+  var selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
+  if (!selectionOrTableRect || !editorView) {
+    return [];
+  }
+  var newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth);
+  var wouldChange = (_newResizeStateWithAn2 = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn2 !== void 0 ? _newResizeStateWithAn2 : false;
+  if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns && pluginState.isDragAndDropEnabled) {
+    return [{
+      id: 'editor.table.distributeColumns',
+      type: 'button',
+      title: formatMessage(messages.distributeColumns),
+      icon: DistributeColumnIcon,
+      onClick: function onClick(state, dispatch, view) {
+        return getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI)(state, dispatch, view);
+      },
+      disabled: !wouldChange
+    }, {
+      type: 'separator'
+    }];
+  }
+  return [];
+};
+var getColorPicker = function getColorPicker(state, menu, _ref5, editorAnalyticsAPI) {
+  var _node$attrs;
+  var formatMessage = _ref5.formatMessage;
   var _getPluginState2 = getPluginState(state),
     targetCellPosition = _getPluginState2.targetCellPosition,
     pluginConfig = _getPluginState2.pluginConfig;

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"),