@atlaskit/editor-plugin-table 5.7.2 → 5.7.3

package/dist/cjs/utils/dom.js

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateResizeHandles = exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isDragRowFloatingInsertDot = exports.isDragRowControlsButton = exports.isDragCornerButton = exports.isDragColumnFloatingInsertDot = exports.isCornerButton = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getTree = exports.getTop = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getColumnOrRowIndex = exports.findNearestCellIndexToPoint = void 0;
+exports.isTableControlsButton = exports.isTableContainerOrWrapper = exports.isRowControlsButton = exports.isResizeHandleDecoration = exports.isInsertRowButton = exports.isDragRowFloatingInsertDot = exports.isDragRowControlsButton = exports.isDragCornerButton = exports.isDragColumnFloatingInsertDot = exports.isCornerButton = exports.isColumnControlsDecorations = exports.isCell = exports.hasResizeHandler = exports.getTree = exports.getTop = exports.getMousePositionVerticalRelativeByElement = exports.getMousePositionHorizontalRelativeByElement = exports.getColumnOrRowIndex = exports.findNearestCellIndexToPoint = void 0;
 var _utils = require("@atlaskit/editor-common/utils");
 var _types = require("../types");
-var _consts = require("../ui/consts");
 var SELECTOR_TABLE_LEAFS = ".".concat(_types.TableCssClassName.TABLE_CELL, ", .").concat(_types.TableCssClassName.TABLE_HEADER_CELL);
 var isCell = exports.isCell = function isCell(node) {
   return Boolean(node && (['TH', 'TD'].indexOf(node.tagName) > -1 || !!(0, _utils.closestElement)(node, ".".concat(_types.TableCssClassName.TABLE_HEADER_CELL)) || !!(0, _utils.closestElement)(node, ".".concat(_types.TableCssClassName.TABLE_CELL))));
@@ -146,23 +145,6 @@ var getMousePositionVerticalRelativeByElement = exports.getMousePositionVertical
   }
   return null;
 };
-
-// This function is deprecated
-var updateResizeHandles = exports.updateResizeHandles = function updateResizeHandles(tableRef) {
-  if (!tableRef) {
-    return;
-  }
-
-  // see ED-7600
-  var nodes = Array.from(tableRef.querySelectorAll(".".concat(_types.TableCssClassName.RESIZE_HANDLE)));
-  if (!nodes || !nodes.length) {
-    return;
-  }
-  var height = tableRef.offsetHeight + _consts.tableToolbarSize;
-  nodes.forEach(function (node) {
-    node.style.height = "".concat(height, "px");
-  });
-};
 var hasResizeHandler = exports.hasResizeHandler = function hasResizeHandler(_ref) {
   var columnEndIndexTarget = _ref.columnEndIndexTarget,
     target = _ref.target;

package/dist/cjs/utils/index.js

@@ -417,12 +417,6 @@ Object.defineProperty(exports, "updatePluginStateDecorations", {
     return _updatePluginStateDecorations.updatePluginStateDecorations;
   }
 });
-Object.defineProperty(exports, "updateResizeHandles", {
-  enumerable: true,
-  get: function get() {
-    return _dom.updateResizeHandles;
-  }
-});
 var _selection = require("./selection");
 var _decoration = require("./decoration");
 var _nodes = require("./nodes");

package/dist/es2019/nodeviews/TableComponent.js

@@ -4,7 +4,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';
@@ -566,6 +566,7 @@ class TableComponent extends React.Component {
       headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
       stickyHeader: this.state.stickyHeader
     });
+    const tableContainerWidth = getTableContainerWidth(node);
     const colControls = isDragAndDropEnabled ? /*#__PURE__*/React.createElement(TableFloatingColumnControls, {
       editorView: view,
       tableRef: tableRef,
@@ -584,7 +585,9 @@ class TableComponent extends React.Component {
       headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
       stickyHeader: this.state.stickyHeader,
       canDrag: canDrag,
-      getEditorFeatureFlags: getEditorFeatureFlags
+      getEditorFeatureFlags: getEditorFeatureFlags,
+      tableContainerWidth: tableContainerWidth,
+      isNumberColumnEnabled: node.attrs.isNumberColumnEnabled
     }) : null;
     const shadowPadding = allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
     const shadowStyle = memoizeOne(visible => ({

package/dist/es2019/plugin.js

@@ -353,7 +353,8 @@ const tablesPlugin = ({
             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/es2019/pm-plugins/main.js

@@ -4,8 +4,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';
@@ -15,7 +13,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';
@@ -103,24 +101,15 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
           } = state;
           const pluginState = getPluginState(state);
           let tableRef;
-          let tableNode;
           if (pluginState.editorHasFocus) {
             const 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) {
             const {
               $cursor

package/dist/es2019/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';
@@ -161,10 +161,6 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     const 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/es2019/types.js

@@ -114,8 +114,6 @@ export const TableCssClassName = {
   RESIZING_PLUGIN: `${tablePrefixSelector}-resizing-plugin`,
   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`,
   CONTEXTUAL_MENU_BUTTON_WRAP: `${tablePrefixSelector}-contextual-menu-button-wrap`,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { dragMenuDropdownWidth } from '../consts';
 import { DragMenu } from './DragMenu';
@@ -16,11 +16,13 @@ const FloatingDragMenu = ({
   targetCellPosition,
   getEditorContainerWidth,
   canDrag,
-  editorAnalyticsAPI
+  editorAnalyticsAPI,
+  stickyHeaders
 }) => {
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
   }
+  const inStickyMode = stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky;
   const targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
   if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
@@ -38,8 +40,9 @@ 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.
+    // In sticky mode, we want to show the menu above the sticky header
     ,
-    zIndex: akEditorFloatingOverlapPanelZIndex,
+    zIndex: inStickyMode ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
     offset: offset,
     stick: true

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/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;