@atlaskit/editor-plugin-table 1.0.2 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-table
 
+## 1.0.3
+
+### Patch Changes
+
+- [`20117f2de5a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/20117f2de5a) - [ux] ED-16204 Fix table cell options floating toolbar context menu closes after clicking on disabled options
+- [`c6c0cab10e0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c6c0cab10e0) - [ux] ED-16205 - Fix missing yellow highlight on merged table cells when hover sort column options on table floating toolbar
+- [`e3b699e5069`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e3b699e5069) - ED-15794 - Fix merged cells in table not highlighting on delete hover when in bottom right corner
+- [`746d7339a88`](https://bitbucket.org/atlassian/atlassian-frontend/commits/746d7339a88) - [ux] ED-15823 - Table cells on the second column would change their color upon unchecking "Header Column" table option when the selection cursor was placed in the 3rd column. This was caused by a view update not identifying the cells to update correctly. This was causing table data cells to be changed to table header cells.
+- Updated dependencies
+
 ## 1.0.2
 
 ### Patch Changes

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

@@ -264,6 +264,18 @@ var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorSta
     options.push({
       id: 'editor.table.sortColumnAsc',
       title: formatMessage(_ContextualMenu.messages.sortColumnASC),
+      onMouseOver: function onMouseOver(state, dispatch) {
+        if ((0, _utils.getMergedCellsPositions)(state.tr).length !== 0) {
+          (0, _commands.hoverMergedCells)()(state, dispatch);
+          return true;
+        }
+
+        return false;
+      },
+      onMouseOut: function onMouseOut(state, dispatch) {
+        (0, _commands.clearHoverSelection)()(state, dispatch);
+        return true;
+      },
       onClick: function onClick(state, dispatch) {
         (0, _commandsWithAnalytics.sortColumnWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, _steps.TableSortOrder.ASC)(state, dispatch);
         return true;
@@ -275,6 +287,18 @@ var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorSta
     options.push({
       id: 'editor.table.sortColumnDesc',
       title: formatMessage(_ContextualMenu.messages.sortColumnDESC),
+      onMouseOver: function onMouseOver(state, dispatch) {
+        if ((0, _utils.getMergedCellsPositions)(state.tr).length !== 0) {
+          (0, _commands.hoverMergedCells)()(state, dispatch);
+          return true;
+        }
+
+        return false;
+      },
+      onMouseOut: function onMouseOut(state, dispatch) {
+        (0, _commands.clearHoverSelection)()(state, dispatch);
+        return true;
+      },
       onClick: function onClick(state, dispatch) {
         (0, _commandsWithAnalytics.sortColumnWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, _steps.TableSortOrder.DESC)(state, dispatch);
         return true;

package/dist/cjs/plugins/table/utils/decoration.js

@@ -89,7 +89,37 @@ var createControlsHoverDecoration = function createControlsHoverDecoration(cells
   // to match the "clicked" selection
 
   if (danger) {
-    var rect = map.rectBetween(min - table.start, max - table.start);
+    // Find the bounding rectangle of all the given cells, also considering
+    // merged cells.
+    var _cells$reduce3 = cells.reduce(function (acc, cell) {
+      var _map$findCell = map.findCell(cell.pos - table.start),
+          left = _map$findCell.left,
+          right = _map$findCell.right,
+          bottom = _map$findCell.bottom,
+          top = _map$findCell.top; // 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
+    }),
+        recLeft = _cells$reduce3.recLeft,
+        recTop = _cells$reduce3.recTop,
+        recRight = _cells$reduce3.recRight,
+        recBottom = _cells$reduce3.recBottom;
+
+    var rect = new _tableMap.Rect(recLeft, recTop, recRight, recBottom);
     updatedCells = map.cellsInRect(rect).map(function (x) {
       return x + table.start;
     });

package/dist/cjs/version.json

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

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

@@ -3,7 +3,7 @@ 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, hoverColumns, hoverRows, removeDescendantNodes } from './commands';
+import { clearHoverSelection, hoverTable, hoverColumns, hoverRows, removeDescendantNodes, hoverMergedCells } 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';
@@ -229,6 +229,18 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     options.push({
       id: 'editor.table.sortColumnAsc',
       title: formatMessage(ContextualMenuMessages.sortColumnASC),
+      onMouseOver: (state, dispatch) => {
+        if (getMergedCellsPositions(state.tr).length !== 0) {
+          hoverMergedCells()(state, dispatch);
+          return true;
+        }
+
+        return false;
+      },
+      onMouseOut: (state, dispatch) => {
+        clearHoverSelection()(state, dispatch);
+        return true;
+      },
       onClick: (state, dispatch) => {
         sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, SortOrder.ASC)(state, dispatch);
         return true;
@@ -240,6 +252,18 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     options.push({
       id: 'editor.table.sortColumnDesc',
       title: formatMessage(ContextualMenuMessages.sortColumnDESC),
+      onMouseOver: (state, dispatch) => {
+        if (getMergedCellsPositions(state.tr).length !== 0) {
+          hoverMergedCells()(state, dispatch);
+          return true;
+        }
+
+        return false;
+      },
+      onMouseOut: (state, dispatch) => {
+        clearHoverSelection()(state, dispatch);
+        return true;
+      },
       onClick: (state, dispatch) => {
         sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, SortOrder.DESC)(state, dispatch);
         return true;

package/dist/es2019/plugins/table/utils/decoration.js

@@ -1,4 +1,4 @@
-import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { Decoration } from 'prosemirror-view';
 import { nonNullable } from '@atlaskit/editor-common/utils';
@@ -43,7 +43,37 @@ export const createControlsHoverDecoration = (cells, type, tr, danger, selected)
   // to match the "clicked" selection
 
   if (danger) {
-    const rect = map.rectBetween(min - table.start, max - table.start);
+    // 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);
   }
 

package/dist/es2019/version.json

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

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

@@ -5,7 +5,7 @@ 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, hoverColumns, hoverRows, removeDescendantNodes } from './commands';
+import { clearHoverSelection, hoverTable, hoverColumns, hoverRows, removeDescendantNodes, hoverMergedCells } 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';
@@ -229,6 +229,18 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     options.push({
       id: 'editor.table.sortColumnAsc',
       title: formatMessage(ContextualMenuMessages.sortColumnASC),
+      onMouseOver: function onMouseOver(state, dispatch) {
+        if (getMergedCellsPositions(state.tr).length !== 0) {
+          hoverMergedCells()(state, dispatch);
+          return true;
+        }
+
+        return false;
+      },
+      onMouseOut: function onMouseOut(state, dispatch) {
+        clearHoverSelection()(state, dispatch);
+        return true;
+      },
       onClick: function onClick(state, dispatch) {
         sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, SortOrder.ASC)(state, dispatch);
         return true;
@@ -240,6 +252,18 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
     options.push({
       id: 'editor.table.sortColumnDesc',
       title: formatMessage(ContextualMenuMessages.sortColumnDESC),
+      onMouseOver: function onMouseOver(state, dispatch) {
+        if (getMergedCellsPositions(state.tr).length !== 0) {
+          hoverMergedCells()(state, dispatch);
+          return true;
+        }
+
+        return false;
+      },
+      onMouseOut: function onMouseOut(state, dispatch) {
+        clearHoverSelection()(state, dispatch);
+        return true;
+      },
       onClick: function onClick(state, dispatch) {
         sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, SortOrder.DESC)(state, dispatch);
         return true;

package/dist/esm/plugins/table/utils/decoration.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { Decoration } from 'prosemirror-view';
 import { nonNullable } from '@atlaskit/editor-common/utils';
@@ -66,7 +66,37 @@ export var createControlsHoverDecoration = function createControlsHoverDecoratio
   // to match the "clicked" selection
 
   if (danger) {
-    var rect = map.rectBetween(min - table.start, max - table.start);
+    // Find the bounding rectangle of all the given cells, also considering
+    // merged cells.
+    var _cells$reduce3 = cells.reduce(function (acc, cell) {
+      var _map$findCell = map.findCell(cell.pos - table.start),
+          left = _map$findCell.left,
+          right = _map$findCell.right,
+          bottom = _map$findCell.bottom,
+          top = _map$findCell.top; // 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
+    }),
+        recLeft = _cells$reduce3.recLeft,
+        recTop = _cells$reduce3.recTop,
+        recRight = _cells$reduce3.recRight,
+        recBottom = _cells$reduce3.recBottom;
+
+    var rect = new Rect(recLeft, recTop, recRight, recBottom);
     updatedCells = map.cellsInRect(rect).map(function (x) {
       return x + table.start;
     });

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -18,8 +18,8 @@
     "releaseModel": "scheduled"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^25.0.0",
-    "@atlaskit/editor-common": "^72.0.0",
+    "@atlaskit/adf-schema": "^25.1.0",
+    "@atlaskit/editor-common": "^72.1.0",
     "@atlaskit/editor-shared-styles": "^2.3.0",
     "@atlaskit/editor-tables": "^2.2.0",
     "@atlaskit/icon": "^21.11.0",
@@ -51,7 +51,7 @@
   "devDependencies": {
     "@atlaskit/analytics-next": "^8.3.3",
     "@atlaskit/button": "^16.5.0",
-    "@atlaskit/editor-core": "^177.0.0",
+    "@atlaskit/editor-core": "^178.0.0",
     "@atlaskit/editor-test-helpers": "^18.0.0",
     "@atlaskit/link-provider": "^1.3.0",
     "@atlaskit/logo": "^13.10.0",

package/report.api.md

@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -102,3 +103,17 @@ export const tablesPlugin: NextEditorPlugin<
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0",
+  "react-dom": "^16.8.0",
+  "react-intl-next": "npm:react-intl@^5.18.1"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->

package/src/__tests__/integration/__fixtures__/basic-table-with-merged-cell.ts

@@ -0,0 +1,112 @@
+export default {
+  version: 1,
+  type: 'doc',
+  content: [
+    {
+      type: 'table',
+      attrs: {
+        isNumberColumnEnabled: false,
+        layout: 'default',
+      },
+      content: [
+        {
+          type: 'tableRow',
+          content: [
+            {
+              type: 'tableHeader',
+              attrs: {},
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [],
+                },
+              ],
+            },
+            {
+              type: 'tableHeader',
+              attrs: {},
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [],
+                },
+              ],
+            },
+            {
+              type: 'tableHeader',
+              attrs: {},
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'tableRow',
+          content: [
+            {
+              type: 'tableCell',
+              attrs: {},
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [],
+                },
+              ],
+            },
+            {
+              type: 'tableCell',
+              attrs: {},
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [],
+                },
+              ],
+            },
+            {
+              type: 'tableCell',
+              attrs: {},
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'tableRow',
+          content: [
+            {
+              type: 'tableCell',
+              attrs: {},
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [],
+                },
+              ],
+            },
+            {
+              type: 'tableCell',
+              attrs: {
+                colspan: 2,
+              },
+              content: [
+                {
+                  type: 'paragraph',
+                  content: [],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};

package/src/__tests__/integration/__snapshots__/floating-toolbar.ts.snap

@@ -319,3 +319,295 @@ Object {
   "type": "doc",
 }
 `;
+
+exports[`should show yellow highlight on the megred rows when hover disabled sort column ASC menu option 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "__autoSize": false,
+        "isNumberColumnEnabled": false,
+        "layout": "default",
+        "localId": "abc-123",
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableHeader",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableHeader",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableHeader",
+            },
+          ],
+          "type": "tableRow",
+        },
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+          ],
+          "type": "tableRow",
+        },
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 2,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+          ],
+          "type": "tableRow",
+        },
+      ],
+      "type": "table",
+    },
+  ],
+  "type": "doc",
+}
+`;
+
+exports[`should show yellow highlight on the megred rows when hover disabled sort column DESC menu option 1`] = `
+Object {
+  "content": Array [
+    Object {
+      "attrs": Object {
+        "__autoSize": false,
+        "isNumberColumnEnabled": false,
+        "layout": "default",
+        "localId": "abc-123",
+      },
+      "content": Array [
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableHeader",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableHeader",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableHeader",
+            },
+          ],
+          "type": "tableRow",
+        },
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+          ],
+          "type": "tableRow",
+        },
+        Object {
+          "content": Array [
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 1,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+            Object {
+              "attrs": Object {
+                "background": null,
+                "colspan": 2,
+                "colwidth": null,
+                "rowspan": 1,
+              },
+              "content": Array [
+                Object {
+                  "type": "paragraph",
+                },
+              ],
+              "type": "tableCell",
+            },
+          ],
+          "type": "tableRow",
+        },
+      ],
+      "type": "table",
+    },
+  ],
+  "type": "doc",
+}
+`;

package/src/__tests__/integration/floating-toolbar.ts

@@ -17,6 +17,7 @@ import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
 import { TableCssClassName } from '../../plugins/table/types';
 import basicTable from './__fixtures__/basic-table';
 import { documentWithMergedCells } from './__fixtures__/merged-rows-and-cols-document';
+import basicTableWithMergedCell from './__fixtures__/basic-table-with-merged-cell';
 
 BrowserTestCase(
   'should floating toolbar context menu sit above other context menu layers',
@@ -187,10 +188,8 @@ BrowserTestCase(
       defaultValue: documentWithMergedCells,
     });
     const tableFloatingToolbarContextMenuSelector = `div[aria-label="Table floating controls"][data-editor-popup=true]`;
-    const sortAtoZButtonSelector =
+    const sortColumnButtonSelector =
       'div[data-role=droplistContent] div[role=presentation]';
-    const sortZtoAButtonSelector =
-      'div[data-role=droplistContent] div[role=presentation]:nth-of-type(2)';
     const tooltipSelector = 'div.atlaskit-portal div[role=tooltip]';
 
     // Click on the cell on the table
@@ -206,18 +205,175 @@ BrowserTestCase(
     // No tooltip is shown
     expect((await page.$$(tooltipSelector)).length).toBe(0);
 
-    // Hover Sort column A -> Z button then it should show tooltip
-    const sortAtoZButton = await page.$(sortAtoZButtonSelector);
-    await sortAtoZButton.moveTo();
+    // Expect there are 2 sort column tooltip menu option
+    const sortColumnButtons = await page.$$(sortColumnButtonSelector);
+    expect(sortColumnButtons.length).toBe(2);
     const tooltip = await page.$(tooltipSelector);
+
+    // Hover Sort column A -> Z button then it should show tooltip, and should be removed after mouseout
+    const sortAtoZButton = sortColumnButtons[0];
+    await sortAtoZButton.moveTo();
     await tooltip.waitForExist();
     expect((await page.$$(tooltipSelector)).length).toBe(1);
+    await cellOptionsMenuItem.moveTo();
+    await tooltip.waitUntil(async () => {
+      return (await page.$$(tooltipSelector)).length === 0;
+    });
 
-    // Tooltip should be removed after mouseout to next button
-    const sortZtoAButton = await page.$(sortZtoAButtonSelector);
+    // Hover Sort column Z -> A button then it should show tooltip, and should be removed after mouseout
+    const sortZtoAButton = sortColumnButtons[1];
     await sortZtoAButton.moveTo();
+    await tooltip.waitForExist();
+    expect((await page.$$(tooltipSelector)).length).toBe(1);
+    await cellOptionsMenuItem.moveTo();
     await tooltip.waitUntil(async () => {
       return (await page.$$(tooltipSelector)).length === 0;
     });
   },
 );
+
+BrowserTestCase(
+  'should show yellow highlight on the megred rows when hover disabled sort column ASC menu option',
+  { skip: ['safari'] }, // The test does not pass on CI but works on physical browser
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {
+        allowColumnSorting: true,
+        allowDistributeColumns: true,
+        allowCellOptionsInFloatingToolbar: true,
+      },
+      defaultValue: basicTableWithMergedCell,
+    });
+    const tableFloatingToolbarContextMenuSelector = `div[aria-label="Table floating controls"][data-editor-popup=true]`;
+
+    // Click on the cell on the table
+    await clickFirstCell(page);
+
+    // Table floating toolbar should appear, then hover on "Cell Options", which brings up another context menu
+    const cellOptionsMenuItem = await (
+      await page.$(tableFloatingToolbarContextMenuSelector)
+    ).$(`button=${tableSelectors.cellOptionsFloatingToolbarText}`);
+    await cellOptionsMenuItem.waitForClickable();
+    await cellOptionsMenuItem.click();
+
+    // Hover on the "Sort column ASC" menu option on the context menu
+    const sortColumnAscMenuItem = await (
+      await page.$(tableFloatingToolbarContextMenuSelector)
+    ).$(`button=${tableSelectors.sortColumnASC}`);
+    await sortColumnAscMenuItem.moveTo();
+    await animationFrame(page);
+
+    // Check there the yellow highlight background on the merged cells.
+    const highlightedCell = await page.$$(
+      `tbody tr:nth-child(3) td.${TableCssClassName.HOVERED_CELL_WARNING}`,
+    );
+    expect(highlightedCell.length).toBe(1);
+    await animationFrame(page);
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'should show yellow highlight on the megred rows when hover disabled sort column DESC menu option',
+  { skip: ['safari'] }, // The test does not pass on CI but works on physical browser
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {
+        allowColumnSorting: true,
+        allowDistributeColumns: true,
+        allowCellOptionsInFloatingToolbar: true,
+      },
+      defaultValue: basicTableWithMergedCell,
+    });
+    const tableFloatingToolbarContextMenuSelector = `div[aria-label="Table floating controls"][data-editor-popup=true]`;
+
+    // Click on the cell on the table
+    await clickFirstCell(page);
+
+    // Table floating toolbar should appear, then hover on "Cell Options", which brings up another context menu
+    const cellOptionsMenuItem = await (
+      await page.$(tableFloatingToolbarContextMenuSelector)
+    ).$(`button=${tableSelectors.cellOptionsFloatingToolbarText}`);
+    await cellOptionsMenuItem.waitForClickable();
+    await cellOptionsMenuItem.click();
+
+    // Hover on the "Sort column DESC" menu option on the context menu
+    const sortColumnDescMenuItem = await (
+      await page.$(tableFloatingToolbarContextMenuSelector)
+    ).$(`button=${tableSelectors.sortColumnDESC}`);
+    await sortColumnDescMenuItem.moveTo();
+    await animationFrame(page);
+
+    // Check there the yellow highlight background on the merged cells.
+    const highlightedCell = await page.$$(
+      `tbody tr:nth-child(3) td.${TableCssClassName.HOVERED_CELL_WARNING}`,
+    );
+    expect(highlightedCell.length).toBe(1);
+    await animationFrame(page);
+
+    const doc = await page.$eval(editable, getDocFromElement);
+    expect(doc).toMatchCustomDocSnapshot(testName);
+  },
+);
+
+BrowserTestCase(
+  'should the context menu disabled item stay open when clicked.',
+  { skip: ['safari'] }, // The test does not pass on CI but works on physical browser
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      allowTables: {
+        allowColumnSorting: true,
+        allowDistributeColumns: true,
+        allowCellOptionsInFloatingToolbar: true,
+      },
+      defaultValue: basicTable,
+    });
+    const tableFloatingToolbarContextMenuSelector = `div[aria-label="Table floating controls"][data-editor-popup=true]`;
+
+    // First click on the cell
+    await clickFirstCell(page);
+
+    // Table floating toolbar should appear, then click on "Cell Options", which brings up another context menu
+    const tableFloatingToolbar = await page.$(
+      tableFloatingToolbarContextMenuSelector,
+    );
+    tableFloatingToolbar.waitForExist();
+    await animationFrame(page);
+
+    const cellOptionsMenuItem = await tableFloatingToolbar.$(
+      `button=${tableSelectors.cellOptionsFloatingToolbarText}`,
+    );
+    await cellOptionsMenuItem.waitForClickable();
+    await cellOptionsMenuItem.click();
+    await animationFrame(page);
+
+    // Hover on the "Merge Cell" menu option on the context menu (which should be disabled)
+    const mergeCellsMenuItem = await tableFloatingToolbar.$(
+      `button=${tableSelectors.mergeCellsText}`,
+    );
+    expect(await mergeCellsMenuItem.getAttribute('disabled')).toBe('true');
+    await mergeCellsMenuItem.moveTo();
+    await mergeCellsMenuItem.click();
+    await animationFrame(page);
+
+    // The context menu should remains open, thus the menu item should still be visible
+    expect(await mergeCellsMenuItem.isDisplayed()).toBe(true);
+  },
+);

package/src/plugins/table/toolbar.tsx

@@ -23,6 +23,7 @@ import {
   hoverColumns,
   hoverRows,
   removeDescendantNodes,
+  hoverMergedCells,
 } from './commands';
 import {
   deleteTableWithAnalytics,
@@ -339,6 +340,17 @@ export const getToolbarCellOptionsConfig = (
     options.push({
       id: 'editor.table.sortColumnAsc',
       title: formatMessage(ContextualMenuMessages.sortColumnASC),
+      onMouseOver: (state: EditorState, dispatch?: CommandDispatch) => {
+        if (getMergedCellsPositions(state.tr).length !== 0) {
+          hoverMergedCells()(state, dispatch);
+          return true;
+        }
+        return false;
+      },
+      onMouseOut: (state: EditorState, dispatch?: CommandDispatch) => {
+        clearHoverSelection()(state, dispatch);
+        return true;
+      },
       onClick: (state: EditorState, dispatch?: CommandDispatch) => {
         sortColumnWithAnalytics(editorAnalyticsAPI)(
           INPUT_METHOD.FLOATING_TB,
@@ -355,6 +367,17 @@ export const getToolbarCellOptionsConfig = (
     options.push({
       id: 'editor.table.sortColumnDesc',
       title: formatMessage(ContextualMenuMessages.sortColumnDESC),
+      onMouseOver: (state: EditorState, dispatch?: CommandDispatch) => {
+        if (getMergedCellsPositions(state.tr).length !== 0) {
+          hoverMergedCells()(state, dispatch);
+          return true;
+        }
+        return false;
+      },
+      onMouseOut: (state: EditorState, dispatch?: CommandDispatch) => {
+        clearHoverSelection()(state, dispatch);
+        return true;
+      },
       onClick: (state: EditorState, dispatch?: CommandDispatch) => {
         sortColumnWithAnalytics(editorAnalyticsAPI)(
           INPUT_METHOD.FLOATING_TB,

package/src/plugins/table/utils/decoration.ts

@@ -1,6 +1,6 @@
 import { Node as PmNode } from 'prosemirror-model';
 import { Selection, Transaction, ReadonlyTransaction } from 'prosemirror-state';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import { ContentNodeWithPos } from 'prosemirror-utils';
 import {
   findTable,
@@ -96,7 +96,32 @@ export const createControlsHoverDecoration = (
   // to match the "clicked" selection
 
   if (danger) {
-    const rect = map.rectBetween(min - table.start, max - table.start);
+    // 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);
   }