@atlaskit/editor-plugin-table 5.7.1 → 5.7.3

package/dist/types/ui/FloatingDragMenu/index.d.ts

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

package/dist/types/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

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

package/dist/types/ui/TableFloatingColumnControls/index.d.ts

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

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

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

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

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

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

@@ -2,9 +2,11 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, FloatingToolbarItem, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { Rect } from '@atlaskit/editor-tables/table-map';
+import { Rect } from '@atlaskit/editor-tables/table-map';
 import type { PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
 export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarItem<Command>;
 export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarDropdown<Command>;
 export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
+export declare const getClosestSelectionOrTableRect: (state: EditorState) => Rect | undefined;
 export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null) => (config: PluginConfig) => FloatingToolbarHandler;
+export declare const getDistributeConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;

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

@@ -322,7 +322,6 @@ export declare const TableCssClassName: {
     RESIZING_PLUGIN: string;
     RESIZE_CURSOR: string;
     IS_RESIZING: string;
-    RESIZE_HANDLE: string;
     RESIZE_HANDLE_DECORATION: string;
     CONTEXTUAL_SUBMENU: string;
     CONTEXTUAL_MENU_BUTTON_WRAP: string;
@@ -377,6 +376,7 @@ export interface ToolbarMenuState {
     isNumberColumnEnabled?: boolean;
     isTableCollapsed?: boolean;
     canCollapseTable?: boolean;
+    isDragAndDropEnabled?: boolean;
 }
 export interface ToolbarMenuContext {
     formatMessage: IntlShape['formatMessage'];

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

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

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

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

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

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

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

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

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

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

package/package.json

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

package/src/nodeviews/TableComponent.tsx

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

package/src/plugin.tsx

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

package/src/pm-plugins/main.ts

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

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

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

package/src/toolbar.tsx

@@ -40,7 +40,7 @@ import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
-import type { Rect } from '@atlaskit/editor-tables/table-map';
+import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import {
   findCellRectClosestToPos,
   findTable,
@@ -48,7 +48,10 @@ import {
   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,
@@ -131,14 +134,29 @@ export const getToolbarMenuConfig = (
     },
   ];
 
-  return {
-    id: 'editor.table.tableOptions',
-    type: 'dropdown',
-    testId: 'table_options',
-    title: formatMessage(messages.tableOptions),
-    hidden: options.every((option) => option.hidden),
-    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((option) => option.hidden),
+      options,
+    };
+  } else {
+    return {
+      id: 'editor.table.tableOptions',
+      type: 'dropdown',
+      testId: 'table_options',
+      title: formatMessage(messages.tableOptions),
+      hidden: options.every((option) => option.hidden),
+      options,
+    };
+  }
 };
 
 // Added these options for mobile. Mobile bridge translates this menu and
@@ -399,6 +417,22 @@ export const getClosestSelectionRect = (
     : findCellRectClosestToPos(selection.$from);
 };
 
+export const getClosestSelectionOrTableRect = (
+  state: EditorState,
+): Rect | undefined => {
+  const selection = state.selection;
+  const tableObject = findTable(state.selection);
+  if (!tableObject) {
+    return;
+  }
+  const map = TableMap.get(tableObject.node);
+  const tableRect = new Rect(0, 0, map.width, map.height);
+
+  return isSelectionType(selection, 'cell')
+    ? getSelectionRect(selection)!
+    : tableRect;
+};
+
 export const getToolbarConfig =
   (
     getEditorContainerWidth: GetEditorContainerWidth,
@@ -436,6 +470,19 @@ export const getToolbarConfig =
             getEditorContainerWidth,
             editorAnalyticsAPI,
           );
+
+      let columnSettingsItems;
+      columnSettingsItems =
+        pluginState.isDragAndDropEnabled &&
+        getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
+          ? getColumnSettingItems(
+              state,
+              getEditorView(),
+              intl,
+              getEditorContainerWidth,
+              editorAnalyticsAPI,
+            )
+          : [];
       const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
       // Check if we need to show confirm dialog for delete button
@@ -502,6 +549,7 @@ export const getToolbarConfig =
           menu,
           separator(menu.hidden),
           ...cellItems,
+          ...columnSettingsItems,
           ...colorPicker,
           {
             type: 'extensions-placeholder',
@@ -574,6 +622,84 @@ const getCellItems = (
   return [];
 };
 
+export const getDistributeConfig =
+  (
+    getEditorContainerWidth: GetEditorContainerWidth,
+    editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+  ): Command =>
+  (state, dispatch, editorView) => {
+    const selectionOrTableRect = getClosestSelectionOrTableRect(state);
+    if (!editorView || !selectionOrTableRect) {
+      return false;
+    }
+    const 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
+const getColumnSettingItems = (
+  editorState: EditorState,
+  editorView: EditorView | undefined | null,
+  { formatMessage }: ToolbarMenuContext,
+  getEditorContainerWidth: GetEditorContainerWidth,
+  editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+): Array<FloatingToolbarItem<Command>> => {
+  const pluginState = getPluginState(editorState);
+  const selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
+
+  if (!selectionOrTableRect || !editorView) {
+    return [];
+  }
+
+  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(
+    selectionOrTableRect,
+    editorState,
+    editorView.domAtPos.bind(editorView),
+    getEditorContainerWidth,
+  );
+
+  const wouldChange = newResizeStateWithAnalytics?.changed ?? false;
+
+  if (
+    pluginState?.pluginConfig?.allowDistributeColumns &&
+    pluginState.isDragAndDropEnabled
+  ) {
+    return [
+      {
+        id: 'editor.table.distributeColumns',
+        type: 'button',
+        title: formatMessage(messages.distributeColumns),
+        icon: DistributeColumnIcon,
+        onClick: (state, dispatch, view) =>
+          getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI)(
+            state,
+            dispatch,
+            view,
+          ),
+        disabled: !wouldChange,
+      },
+      {
+        type: 'separator',
+      },
+    ];
+  }
+  return [];
+};
+
 const getColorPicker = (
   state: EditorState,
   menu: FloatingToolbarItem<Command>,

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`,
@@ -408,6 +406,7 @@ export interface ToolbarMenuState {
   isNumberColumnEnabled?: boolean;
   isTableCollapsed?: boolean;
   canCollapseTable?: boolean;
+  isDragAndDropEnabled?: boolean;
 }
 
 export interface ToolbarMenuContext {

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