@atlaskit/editor-plugin-table 0.2.2 → 0.2.4

package/dist/es2019/plugins/table/ui/consts.js

@@ -1,4 +1,4 @@
-import { B200, B300, N0, N20, R400, R75, DN400, N200, DN30 } from '@atlaskit/theme/colors';
+import { B200, B300, N20, R400, R75, DN400, N200, DN30, N0 } from '@atlaskit/theme/colors';
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { akEditorTableBorder, akEditorTableBorderDark, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { token } from '@atlaskit/tokens';
@@ -11,12 +11,12 @@ import { themed } from '@atlaskit/theme/components';
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 
 export const tableCellBackgroundColor = themed({
-  light: N0,
-  dark: DN30
+  light: token('elevation.surface', N0),
+  dark: token('elevation.surface', DN30)
 });
 export const tableToolbarColor = themed({
-  light: akEditorTableToolbar,
-  dark: akEditorTableToolbarDark
+  light: token('color.background.neutral.subtle', akEditorTableToolbar),
+  dark: token('color.background.neutral.subtle', akEditorTableToolbarDark)
 });
 export const tableTextColor = themed({
   light: token('color.text.subtlest', N200),

package/dist/es2019/plugins/table/ui/ui-styles.js

@@ -82,21 +82,21 @@ export const HeaderButton = (props, cssString) => css`
 
   .active .${ClassName.CONTROLS_BUTTON} {
     color: ${token('color.icon.inverse', N0)};
-    background-color: ${tableToolbarSelectedColor};
+    background-color: ${token('color.background.selected', tableToolbarSelectedColor)};
     border-color: ${tableBorderSelectedColor};
   }
 `;
 export const HeaderButtonHover = () => css`
   .${ClassName.CONTROLS_BUTTON}:hover {
     color: ${token('color.icon.inverse', N0)};
-    background-color: ${tableToolbarSelectedColor};
+    background-color: ${token('color.background.selected', tableToolbarSelectedColor)};
     border-color: ${tableBorderSelectedColor};
     cursor: pointer;
   }
 `;
 export const HeaderButtonDanger = () => css`
   .${ClassName.HOVERED_CELL_IN_DANGER} .${ClassName.CONTROLS_BUTTON} {
-    background-color: ${tableToolbarDeleteColor};
+    background-color: ${token('color.background.danger', tableToolbarDeleteColor)};
     border-color: ${tableBorderDeleteColor};
     position: relative;
     z-index: ${akEditorUnitZIndex};
@@ -245,7 +245,7 @@ const columnHeaderButton = (props, cssString) => css`
 
 const columnHeaderButtonSelected = css`
   color: ${token('color.text.inverse', N0)};
-  background-color: ${tableToolbarSelectedColor};
+  background-color: ${token('color.background.selected', tableToolbarSelectedColor)};
   border-color: ${tableBorderSelectedColor};
   z-index: ${columnControlsSelectedZIndex};
 `;
@@ -318,7 +318,7 @@ export const columnControlsDecoration = props => css`
 
       &.${ClassName.HOVERED_CELL_IN_DANGER}
         .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-        background-color: ${tableToolbarDeleteColor};
+        background-color: ${token('color.background.danger', tableToolbarDeleteColor)};
         border: 1px solid ${tableBorderDeleteColor};
         border-bottom: none;
         z-index: ${akEditorUnitZIndex * 100};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "0.2.2",
+	"version": "0.2.4",
 	"sideEffects": false
 }

package/dist/esm/plugins/table/commands/hover.js

@@ -122,7 +122,8 @@ export var clearHoverSelection = function clearHoverSelection() {
     return {
       type: 'CLEAR_HOVER_SELECTION',
       data: {
-        decorationSet: updatePluginStateDecorations(state, [], TableDecorations.ALL_CONTROLS_HOVER)
+        decorationSet: updatePluginStateDecorations(state, [], TableDecorations.ALL_CONTROLS_HOVER),
+        isInDanger: false
       }
     };
   });

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

@@ -12,7 +12,7 @@ import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
-import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, isCell, isColumnControlsDecorations, isCornerButton, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableControlsButton, isTableContainerOrWrapper } from './utils';
+import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, isCell, isColumnControlsDecorations, isCornerButton, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableControlsButton, isTableContainerOrWrapper, hasResizeHandler } from './utils';
 import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
 
 var isFocusingCalendar = function isFocusingCalendar(event) {
@@ -207,7 +207,7 @@ export var handleMouseLeave = function handleMouseLeave(view, event) {
   return false;
 };
 export var handleMouseMove = function handleMouseMove(getEditorFeatureFlags) {
-  return function (view, event, tableCellOptimization, elementContentRects) {
+  return function (view, event, elementContentRects) {
     if (!(event.target instanceof HTMLElement)) {
       return false;
     }
@@ -226,7 +226,7 @@ export var handleMouseMove = function handleMouseMove(getEditorFeatureFlags) {
           startIndex = _getColumnOrRowIndex10[0],
           endIndex = _getColumnOrRowIndex10[1];
 
-      var positionColumn = getMousePositionHorizontalRelativeByElement(event, tableCellOptimization, elementContentRects) === 'right' ? endIndex : startIndex;
+      var positionColumn = getMousePositionHorizontalRelativeByElement(event, false, elementContentRects) === 'right' ? endIndex : startIndex;
 
       if (positionColumn !== insertColumnButtonIndex) {
         return showInsertColumnButton(positionColumn)(state, dispatch);
@@ -253,14 +253,10 @@ export var handleMouseMove = function handleMouseMove(getEditorFeatureFlags) {
     }
 
     var _getEditorFeatureFlag = getEditorFeatureFlags(),
-        mouseMoveOptimization = _getEditorFeatureFlag.mouseMoveOptimization; // we only want to allow mouseMoveOptimisation when tableCellOptimization is enabled
-    // because it relies on tableCell node view that is added  via tableCellOptimization
-
-
-    var useMouseMoveOptimisation = tableCellOptimization && mouseMoveOptimization;
+        mouseMoveOptimization = _getEditorFeatureFlag.mouseMoveOptimization;
 
     if (!isResizeHandleDecoration(element) && isCell(element)) {
-      var positionColumn = getMousePositionHorizontalRelativeByElement(event, useMouseMoveOptimisation, elementContentRects, RESIZE_HANDLE_AREA_DECORATION_GAP);
+      var positionColumn = getMousePositionHorizontalRelativeByElement(event, mouseMoveOptimization, elementContentRects, RESIZE_HANDLE_AREA_DECORATION_GAP);
 
       if (positionColumn !== null) {
         var _state4 = view.state,
@@ -278,7 +274,10 @@ export var handleMouseMove = function handleMouseMove(getEditorFeatureFlags) {
           var columnEndIndexTarget = positionColumn === 'left' ? rect.left : rect.right;
           var rowIndexTarget = rect.top;
 
-          if (columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex) {
+          if (columnEndIndexTarget !== resizeHandleColumnIndex || rowIndexTarget !== resizeHandleRowIndex || !hasResizeHandler({
+            target: element,
+            columnEndIndexTarget: columnEndIndexTarget
+          })) {
             return addResizeHandleDecorations(rowIndexTarget, columnEndIndexTarget)(_state4, _dispatch5);
           }
         }
@@ -369,18 +368,15 @@ export var handleCut = function handleCut(oldTr, oldState, newState, editorAnaly
 };
 export var whenTableInFocus = function whenTableInFocus(eventHandler, elementContentRects) {
   return function (view, mouseEvent) {
-    var _tablePluginState$plu;
-
     var tableResizePluginState = getResizePluginState(view.state);
     var tablePluginState = getPluginState(view.state);
     var isDragging = tableResizePluginState && !!tableResizePluginState.dragging;
     var hasTableNode = tablePluginState && tablePluginState.tableNode;
-    var tableCellOptimization = tablePluginState === null || tablePluginState === void 0 ? void 0 : (_tablePluginState$plu = tablePluginState.pluginConfig) === null || _tablePluginState$plu === void 0 ? void 0 : _tablePluginState$plu.tableCellOptimization;
 
     if (!hasTableNode || isDragging) {
       return false;
     }
 
-    return eventHandler(view, mouseEvent, tableCellOptimization, elementContentRects);
+    return eventHandler(view, mouseEvent, elementContentRects);
   };
 };

package/dist/esm/plugins/table/index.js

@@ -348,7 +348,9 @@ var tablesPlugin = function tablesPlugin(options) {
           }
         }];
       },
-      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
+      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, function () {
+        return editorViewRef.current;
+      })(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     }
   };
 };

package/dist/esm/plugins/table/nodeviews/TableComponent.js

@@ -18,12 +18,13 @@ import React from 'react';
 import classnames from 'classnames';
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
 import rafSchedule from 'raf-schd';
+import { findTable } from '@atlaskit/editor-tables/utils';
 import { calcTableWidth, tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorMobileBreakoutPoint, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 import { parsePx } from '@atlaskit/editor-common/utils';
-import { autoSizeTable } from '../commands';
+import { autoSizeTable, clearHoverSelection } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
 import { scaleTable } from '../pm-plugins/table-resizing';
@@ -410,10 +411,20 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _this$props8 = this.props,
+          view = _this$props8.view,
           getNode = _this$props8.getNode,
           isMediaFullscreen = _this$props8.isMediaFullscreen,
           allowColumnResizing = _this$props8.allowColumnResizing;
 
+      var _getPluginState = getPluginState(view.state),
+          isInDanger = _getPluginState.isInDanger;
+
+      var table = findTable(view.state.selection);
+
+      if (isInDanger && !table) {
+        clearHoverSelection()(view.state, view.dispatch);
+      }
+
       var _this$props$getEditor3 = this.props.getEditorFeatureFlags(),
           tableOverflowShadowsOptimization = _this$props$getEditor3.tableOverflowShadowsOptimization;
 
@@ -446,9 +457,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         var previousTable = this.node;
 
         if (tablesHaveDifferentColumnWidths(currentTable, previousTable) || tablesHaveDifferentNoOfColumns(currentTable, previousTable)) {
-          var view = this.props.view;
+          var _view = this.props.view;
           recreateResizeColsByNode(this.table, currentTable);
-          updateControls(this.props.getEditorFeatureFlags)(view.state);
+          updateControls(this.props.getEditorFeatureFlags)(_view.state);
         }
 
         this.handleTableResizingDebounced();
@@ -491,9 +502,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           showAfterShadow = _this$state.showAfterShadow;
       var node = getNode(); // doesn't work well with WithPluginState
 
-      var _getPluginState = getPluginState(view.state),
-          isInDanger = _getPluginState.isInDanger,
-          hoveredRows = _getPluginState.hoveredRows;
+      var _getPluginState2 = getPluginState(view.state),
+          isInDanger = _getPluginState2.isInDanger,
+          hoveredRows = _getPluginState2.hoveredRows;
 
       var _this$props$getEditor4 = this.props.getEditorFeatureFlags(),
           stickyHeadersOptimization = _this$props$getEditor4.stickyHeadersOptimization,

package/dist/esm/plugins/table/pm-plugins/default-table-selection.js

@@ -1,5 +1,4 @@
 export var defaultTableSelection = {
   hoveredColumns: [],
-  hoveredRows: [],
-  isInDanger: false
+  hoveredRows: []
 };

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

@@ -54,14 +54,14 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
       elementContentRects[entry.target.id] = entry.contentRect;
     });
   }) : undefined;
-  var tableCellNodeview = pluginConfig.tableCellOptimization ? {
+  var tableCellNodeview = {
     tableCell: function tableCell(node, view, getPos) {
       return new TableCellNodeView(node, view, getPos, getEditorFeatureFlags, observer);
     },
     tableHeader: function tableHeader(node, view, getPos) {
       return new TableCellNodeView(node, view, getPos, getEditorFeatureFlags, observer);
     }
-  } : {}; // Used to prevent invalid table cell spans being reported more than once per editor/document
+  }; // Used to prevent invalid table cell spans being reported more than once per editor/document
 
   var invalidTableIds = [];
   var editorViewRef = null;

package/dist/esm/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -13,18 +13,49 @@ import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle'; // limit scroll event calls
 
 var HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200; // timeout for resetting the scroll class - if it’s too long then users won’t be able to click on the header cells,
-// if too short it would trigger too many dom udpates.
+// if too short it would trigger too many dom updates.
 
 var HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
-export var supportedHeaderRow = function supportedHeaderRow(node) {
-  var allHeaders = mapChildren(node, function (child) {
-    return child.type.name === 'tableHeader';
-  }).every(Boolean);
-  var someMerged = mapChildren(node, function (child) {
+
+var anyChildCellMergedAcrossRow = function anyChildCellMergedAcrossRow(node) {
+  return mapChildren(node, function (child) {
     return child.attrs.rowspan || 0;
   }).some(function (rowspan) {
     return rowspan > 1;
   });
+};
+/**
+ * Compare two table row nodes and return true if the two table rows have a
+ * different number of table cells or if table cell row spans are different
+ */
+
+
+var rowHasDifferentMergedCells = function rowHasDifferentMergedCells(prevNode, incomingNode) {
+  var incomingNodeChildrenRowSpan = mapChildren(prevNode, function (child) {
+    return child.attrs.rowspan || 0;
+  });
+  var currentNodeChildrenRowSpan = mapChildren(incomingNode, function (child) {
+    return child.attrs.rowspan || 0;
+  });
+  return incomingNodeChildrenRowSpan.length !== currentNodeChildrenRowSpan.length || currentNodeChildrenRowSpan.some(function (child, index) {
+    return child !== incomingNodeChildrenRowSpan[index];
+  });
+};
+/**
+ * Check if a given node is a header row with this definition:
+ *  - all children are tableHeader cells
+ *  - no table cells have been have merged with other table row cells
+ *
+ * @param node ProseMirror node
+ * @return boolean if it meets definition
+ */
+
+
+export var supportedHeaderRow = function supportedHeaderRow(node) {
+  var allHeaders = mapChildren(node, function (child) {
+    return child.type.name === 'tableHeader';
+  }).every(Boolean);
+  var someMerged = anyChildCellMergedAcrossRow(node);
   return allHeaders && !someMerged;
 };
 export var TableRowNodeView = /*#__PURE__*/function () {
@@ -522,10 +553,14 @@ export var TableRowNodeView = /*#__PURE__*/function () {
       // changing away from one
 
 
-      var newNodeisHeaderRow = supportedHeaderRow(node);
+      var newNodeIsHeaderRow = supportedHeaderRow(node);
 
-      if (this.isHeaderRow !== newNodeisHeaderRow) {
+      if (this.isHeaderRow !== newNodeIsHeaderRow) {
         return false; // re-create nodeview
+      }
+
+      if (rowHasDifferentMergedCells(this.node, node)) {
+        return false;
       } // node is different but no need to re-create nodeview
 
 

package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/resize-logic.js

@@ -30,7 +30,7 @@ export var growColumn = function growColumn(state, colIndex, amount, selectedCol
 };
 export var shrinkColumn = function shrinkColumn(state, colIndex, amount, selectedColumns) {
   // can't shrink if columns don't exist
-  if (!state.cols[colIndex] || !state.cols[colIndex + 1]) {
+  if (!state.cols[colIndex]) {
     return state;
   } // try to shrink dragging column by giving from the column to the right first
 

package/dist/esm/plugins/table/toolbar.js

@@ -5,12 +5,12 @@ import { jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import commonMessages from '@atlaskit/editor-common/messages';
-import { clearHoverSelection, hoverTable } from './commands';
+import { clearHoverSelection, hoverTable, hoverColumns, hoverRows } from './commands';
 import { deleteTableWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, insertRowWithAnalytics, deleteRowsWithAnalytics, mergeCellsWithAnalytics, splitCellWithAnalytics, deleteColumnsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, wrapTableInExpandWithAnalytics, sortColumnWithAnalytics, setColorWithAnalytics, distributeColumnsWidthsWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { TableCssClassName } from './types';
-import { getMergedCellsPositions } from './utils';
+import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from './utils';
 import { isReferencedSource } from './utils/referentiality';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
@@ -25,6 +25,7 @@ import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizin
 import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { cellBackgroundColorPalette, DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 export var messages = defineMessages({
   tableOptions: {
     id: 'fabric.editor.tableOptions',
@@ -93,7 +94,7 @@ export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _
 // relay it to the native mobile. Native mobile displays the menu
 // with native widgets. It's enabled via a plugin config.
 
-export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorState, initialSelectionRect, _ref2, getEditorContainerWidth, editorAnalyticsAPI) {
+export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorState, editorView, initialSelectionRect, _ref2, getEditorContainerWidth, editorAnalyticsAPI) {
   var _pluginState$pluginCo, _pluginState$pluginCo2;
 
   var formatMessage = _ref2.formatMessage;
@@ -157,6 +158,17 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
 
       return true;
     },
+    onMouseOver: function onMouseOver(state, dispatch) {
+      var selectionRect = getClosestSelectionRect(state);
+
+      if (selectionRect) {
+        hoverColumns(getSelectedColumnIndexes(selectionRect), true)(state, dispatch);
+        return true;
+      }
+
+      return false;
+    },
+    onMouseLeave: clearHoverSelection(),
     selected: false,
     disabled: false
   }, {
@@ -173,6 +185,17 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
 
       return true;
     },
+    onMouseOver: function onMouseOver(state, dispatch) {
+      var selectionRect = getClosestSelectionRect(state);
+
+      if (selectionRect) {
+        hoverRows(getSelectedRowIndexes(selectionRect), true)(state, dispatch);
+        return true;
+      }
+
+      return false;
+    },
+    onMouseLeave: clearHoverSelection(),
     selected: false,
     disabled: false
   }, {
@@ -190,9 +213,12 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
   }];
 
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
-    var distributeColumnWidths = function distributeColumnWidths(state, dispatch, view) {
-      var newResizeStateWithAnalytics = view ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, view.domAtPos.bind(view), getEditorContainerWidth) : undefined;
+    var _newResizeStateWithAn;
+
+    var newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth) : undefined;
+    var wouldChange = (_newResizeStateWithAn = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
 
+    var distributeColumnWidths = function distributeColumnWidths(state, dispatch) {
       if (newResizeStateWithAnalytics) {
         distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
         return true;
@@ -206,12 +232,13 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
       title: formatMessage(ContextualMenuMessages.distributeColumns),
       onClick: distributeColumnWidths,
       selected: false,
-      disabled: numberOfColumns <= 1
+      disabled: !wouldChange
     });
   }
 
   if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo2 = pluginState.pluginConfig) !== null && _pluginState$pluginCo2 !== void 0 && _pluginState$pluginCo2.allowColumnSorting) {
     var hasMergedCellsInTable = getMergedCellsPositions(editorState.tr).length > 0;
+    var warning = hasMergedCellsInTable ? formatMessage(ContextualMenuMessages.canNotSortTable) : undefined;
     options.push({
       id: 'editor.table.sortColumnAsc',
       title: formatMessage(ContextualMenuMessages.sortColumnASC),
@@ -220,7 +247,8 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
         return true;
       },
       selected: false,
-      disabled: hasMergedCellsInTable
+      disabled: hasMergedCellsInTable,
+      tooltip: warning
     });
     options.push({
       id: 'editor.table.sortColumnDesc',
@@ -230,7 +258,8 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
         return true;
       },
       selected: false,
-      disabled: hasMergedCellsInTable
+      disabled: hasMergedCellsInTable,
+      tooltip: warning
     });
   }
 
@@ -268,7 +297,7 @@ var getClosestSelectionRect = function getClosestSelectionRect(state) {
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
 };
 
-export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags) {
+export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView) {
   return function (config) {
     return function (state, intl) {
       var tableObject = findTable(state.selection);
@@ -282,7 +311,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
         var _ref3 = getEditorFeatureFlags() || {},
             tableCellOptionsInFloatingToolbar = _ref3.tableCellOptionsInFloatingToolbar;
 
-        var cellItems = getCellItems(config, state, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
+        var cellItems = getCellItems(config, state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
         var colorPicker = getColorPicker(state, menu, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar); // Check if we need to show confirm dialog for delete button
 
         var confirmDialog;
@@ -316,6 +345,8 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
           getDomRef: getDomRef,
           nodeType: nodeType,
           offset: [0, 3],
+          zIndex: akEditorFloatingPanelZIndex + 1,
+          // Place the context menu slightly above the others
           items: [menu, separator(menu.hidden)].concat(_toConsumableArray(cellItems), _toConsumableArray(colorPicker), [{
             type: 'extensions-placeholder',
             separator: 'end'
@@ -358,14 +389,14 @@ var separator = function separator(hidden) {
   };
 };
 
-var getCellItems = function getCellItems(pluginConfig, state, _ref4, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) {
+var getCellItems = function getCellItems(pluginConfig, state, view, _ref4, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) {
   var formatMessage = _ref4.formatMessage;
 
   if (pluginConfig.allowCellOptionsInFloatingToolbar || tableCellOptionsInFloatingToolbar) {
     var initialSelectionRect = getClosestSelectionRect(state);
 
     if (initialSelectionRect) {
-      var cellOptions = getToolbarCellOptionsConfig(state, initialSelectionRect, {
+      var cellOptions = getToolbarCellOptionsConfig(state, view, initialSelectionRect, {
         formatMessage: formatMessage
       }, getEditorContainerWidth, editorAnalyticsAPI);
       return [cellOptions, separator(cellOptions.hidden)];

package/dist/esm/plugins/table/ui/FloatingContextualButton/index.js

@@ -25,7 +25,7 @@ import { TableCssClassName as ClassName } from '../../types';
 import messages from '../../ui/messages';
 import { CONTENT_COMPONENT } from '@atlaskit/editor-common/analytics';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { tableFloatingCellButtonStyles } from './styles';
+import { tableFloatingCellButtonStyles, tableFloatingCellButtonSelectedStyles } from './styles';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 export var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Component) {
   _inherits(FloatingContextualButtonInner, _React$Component);
@@ -106,7 +106,13 @@ export var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Compone
       var tableWrapper = closestElement(targetCellRef, ".".concat(ClassName.TABLE_NODE_WRAPPER));
       var labelCellOptions = formatMessage(messages.cellOptions);
       var button = jsx("div", {
-        css: tableFloatingCellButtonStyles
+        css: function css(theme) {
+          return [tableFloatingCellButtonStyles({
+            theme: theme
+          }), isContextualMenuOpen && tableFloatingCellButtonSelectedStyles({
+            theme: theme
+          })];
+        }
       }, jsx(ToolbarButton, {
         className: ClassName.CONTEXTUAL_MENU_BUTTON,
         selected: isContextualMenuOpen,

package/dist/esm/plugins/table/ui/FloatingContextualButton/styles.js

@@ -1,11 +1,34 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 import { css } from '@emotion/react';
-import { N0, N20 } from '@atlaskit/theme/colors';
+import { B75, DN0, DN60, N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { contextualMenuTriggerSize } from '../consts';
-import { token } from '@atlaskit/tokens'; // TODO: https://product-fabric.atlassian.net/browse/DSP-4462
-
-export var tableFloatingCellButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > div {\n    background: ", ";\n    border-radius: ", "px;\n    border: 2px solid ", ";\n    display: flex;\n    height: ", "px;\n    flex-direction: column;\n  }\n  && button {\n    flex-direction: column;\n    padding: 0;\n    height: 100%;\n    display: flex;\n  }\n  && button > span {\n    margin: 0px -4px;\n  }\n  && span {\n    pointer-events: none;\n  }\n"])), token('color.background.neutral', N20), borderRadius(), token('color.border.inverse', N0), contextualMenuTriggerSize - 2);
+import { token } from '@atlaskit/tokens';
+import { themed } from '@atlaskit/theme/components';
+export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > div {\n    // Sits behind button to provide surface-color background\n    background: ", ";\n    border-radius: ", "px;\n    display: flex;\n    height: ", "px;\n    flex-direction: column;\n  }\n  && button {\n    background: ", ";\n    flex-direction: column;\n    margin: 2px;\n    outline: 2px solid ", ";\n    border-radius: 1px;\n    padding: 0;\n    height: calc(100% - 4px);\n    display: flex;\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n  && button > span {\n    margin: 0px -4px;\n  }\n  && span {\n    pointer-events: none;\n  }\n"])), token('elevation.surface', N20), borderRadius(), contextualMenuTriggerSize + 2, themed({
+    light: token('color.background.neutral', 'none'),
+    dark: token('color.background.neutral', 'none')
+  })(props), token('color.border', N0), themed({
+    light: token('color.background.neutral.hovered', N30A),
+    dark: token('color.background.neutral.hovered', DN60)
+  })(props), themed({
+    light: token('color.background.neutral.pressed', 'rgba(179, 212, 255, 0.6)'),
+    dark: token('color.background.neutral.pressed', B75)
+  })(props));
+};
+export var tableFloatingCellButtonSelectedStyles = function tableFloatingCellButtonSelectedStyles(props) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  && button {\n    background: ", ";\n  }\n  && button:hover {\n    background: ", ";\n  }\n  && button:active {\n    background: ", ";\n  }\n"])), themed({
+    light: token('color.background.selected', N700),
+    dark: token('color.background.selected', DN0)
+  })(props), themed({
+    light: token('color.background.selected.hovered', N700),
+    dark: token('color.background.selected.hovered', DN0)
+  })(props), themed({
+    light: token('color.background.selected.pressed', N700),
+    dark: token('color.background.selected.pressed', DN0)
+  })(props));
+};

package/dist/esm/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -474,7 +474,10 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         "data-testid": "table-cell-contextual-menu",
         onMouseLeave: this.closeSubmenu
       }, jsx(DropdownMenu, {
-        mountTo: mountPoint,
+        mountTo: mountPoint //This needs be removed when the a11y is completely handled
+        //Disabling key navigation now as it works only partially
+        ,
+        disableArrowKeyNavigation: true,
         items: items,
         isOpen: isOpen,
         onOpenChange: this.handleOpenChange,