@atlaskit/editor-plugin-table 0.2.2 → 0.2.4

package/src/__tests__/unit/nodeviews/TableComponent.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import { replaceRaf } from 'raf-stub';
+import { TextSelection } from 'prosemirror-state';
+
+import { Command } from '@atlaskit/editor-common/types';
 import { render } from '@testing-library/react';
 import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import { selectTableClosestToPos } from '@atlaskit/editor-tables/src/utils/select-nodes';
 import tablePlugin from '../../../plugins/table-plugin';
 import {
   doc,
@@ -12,8 +16,13 @@ import {
   tdEmpty,
   tdCursor,
   DocBuilder,
+  thEmpty,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { findTable, selectTable } from '@atlaskit/editor-tables/utils';
+import {
+  findTable,
+  findTableClosestToPos,
+  selectTable,
+} from '@atlaskit/editor-tables/utils';
 import {
   TableCssClassName as ClassName,
   TablePluginState,
@@ -22,7 +31,11 @@ import TableComponent from '../../../plugins/table/nodeviews/TableComponent';
 
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import { toggleNumberColumn } from '../../../plugins/table/commands';
+import * as commands from '../../../plugins/table/commands';
+import {
+  toggleNumberColumn,
+  hoverTable,
+} from '../../../plugins/table/commands';
 
 jest.mock('../../../plugins/table/utils/nodes', () =>
   Object.assign({}, jest.requireActual('../../../plugins/table/utils/nodes'), {
@@ -30,6 +43,12 @@ jest.mock('../../../plugins/table/utils/nodes', () =>
   }),
 );
 
+jest.mock('../../../plugins/table/commands', () =>
+  Object.assign({}, jest.requireActual('../../../plugins/table/commands'), {
+    clearHoverSelection: jest.fn(),
+  }),
+);
+
 replaceRaf();
 const requestAnimationFrame = window.requestAnimationFrame as any;
 
@@ -57,8 +76,8 @@ describe('table -> nodeviews -> TableComponent.tsx', () => {
     jest.clearAllMocks();
   });
 
-  describe('when the table is selected', () => {
-    it('should add table selected css class', () => {
+  describe('when a table is selected', () => {
+    it('should add table selected css class to the selected table', () => {
       const { editorView } = editor(
         doc(p('text'), table()(tr(tdEmpty, tdEmpty, tdCursor))),
         {
@@ -78,6 +97,129 @@ describe('table -> nodeviews -> TableComponent.tsx', () => {
         tableContainer!.classList.contains(ClassName.TABLE_SELECTED),
       ).toBeTruthy();
     });
+
+    it('should not clear the editor state hover selection when changing selection to another table', () => {
+      const clearHoverSelectionSpy = jest
+        .spyOn(commands, 'clearHoverSelection')
+        .mockImplementation(() => (() => {}) as any as Command);
+
+      const { editorView } = editor(
+        doc(
+          p('text'),
+          table()(tr(thEmpty, thEmpty, thEmpty)),
+          table()(tr(thEmpty, thEmpty, thEmpty)),
+        ),
+      );
+      const { state, dispatch } = editorView;
+
+      const isInDanger = true;
+      hoverTable(isInDanger)(state, dispatch);
+
+      const selectSecondTableTr = selectTableClosestToPos(
+        state.tr,
+        state.doc.resolve(26),
+      );
+      dispatch(selectSecondTableTr);
+      const secondTable = findTableClosestToPos(state.doc.resolve(26));
+
+      const selectFirstTableTr = selectTableClosestToPos(
+        state.tr,
+        state.doc.resolve(8),
+      );
+      dispatch(selectFirstTableTr);
+      const firstTable = findTableClosestToPos(state.doc.resolve(8));
+
+      const getTableNode = (index: number) => () =>
+        index === 1 ? firstTable!.node : secondTable!.node;
+
+      render(
+        <div>
+          <TableComponent
+            view={editorView}
+            eventDispatcher={
+              { on: () => {}, off: () => {} } as any as EventDispatcher
+            }
+            // @ts-ignore
+            containerWidth={{}}
+            // @ts-ignore
+            getNode={getTableNode(1)}
+            getEditorFeatureFlags={getEditorFeatureFlags}
+            allowControls
+            contentDOM={(wrapper: HTMLElement | null) => {
+              const node = editorView.dom.getElementsByTagName('table')[0];
+              if (!wrapper?.firstChild) {
+                wrapper?.appendChild(node);
+              }
+            }}
+          />
+          <TableComponent
+            view={editorView}
+            eventDispatcher={
+              { on: () => {}, off: () => {} } as any as EventDispatcher
+            }
+            // @ts-ignore
+            containerWidth={{}}
+            // @ts-ignore
+            getNode={getTableNode(2)}
+            getEditorFeatureFlags={getEditorFeatureFlags}
+            allowControls
+            contentDOM={(wrapper: HTMLElement | null) => {
+              const node = editorView.dom.getElementsByTagName('table')[0];
+              if (!wrapper?.firstChild) {
+                wrapper?.appendChild(node);
+              }
+            }}
+          />
+          ,
+        </div>,
+      );
+      expect(clearHoverSelectionSpy).not.toBeCalled();
+    });
+  });
+
+  describe('when there are no tables in selection', () => {
+    it('clears the editor state hover selection if the editor state is in danger flag is set', () => {
+      const clearHoverSelectionSpy = jest
+        .spyOn(commands, 'clearHoverSelection')
+        .mockImplementation(() => (() => {}) as any as Command);
+
+      const { editorView } = editor(
+        doc(p('text'), table()(tr(thEmpty, thEmpty, thEmpty))),
+      );
+      const { state, dispatch } = editorView;
+
+      const isInDanger = true;
+      hoverTable(isInDanger)(state, dispatch);
+      dispatch(selectTable(state.tr));
+
+      const tableF = findTable(state.selection);
+      const getNode = () => tableF!.node;
+
+      const newTr = state.tr.setSelection(TextSelection.create(state.doc, 0));
+      dispatch(newTr);
+
+      render(
+        <TableComponent
+          view={editorView}
+          eventDispatcher={
+            { on: () => {}, off: () => {} } as any as EventDispatcher
+          }
+          // @ts-ignore
+          containerWidth={{}}
+          // @ts-ignore
+          getNode={getNode}
+          getEditorFeatureFlags={getEditorFeatureFlags}
+          allowControls
+          contentDOM={(wrapper: HTMLElement | null) => {
+            const node = editorView.dom.getElementsByTagName('table')[0];
+            if (!wrapper?.firstChild) {
+              wrapper?.appendChild(node);
+            }
+          }}
+        />,
+      );
+      expect(clearHoverSelectionSpy).toBeCalledTimes(1);
+    });
   });
 
   describe('when the numbered column attribute is changed', () => {

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

@@ -21,10 +21,12 @@ import {
 
 import tablePlugin from '../../../../plugins/table';
 import { pluginKey } from '../../../../plugins/table/pm-plugins/plugin-key';
-import { TextSelection, NodeSelection } from 'prosemirror-state';
+import { TextSelection, NodeSelection, EditorState } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
 import panelPlugin from '@atlaskit/editor-core/src/plugins/panel';
 import widthPlugin from '@atlaskit/editor-core/src/plugins/width';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { akEditorFullPageMaxWidth } from '@atlaskit/editor-shared-styles/consts';
 
 describe('table-resizing/event-handlers', () => {
   const editorAnalyticsAPIFake: EditorAnalyticsAPI = {
@@ -57,18 +59,7 @@ describe('table-resizing/event-handlers', () => {
         doc(table()(tr(td()(p('1')), td()(p('2')), td()(p('3{<>}'))))),
       );
 
-      setResizeHandlePos(12)(view.state, view.dispatch);
-
-      const mousedownEvent = new MouseEvent('mousedown', {
-        clientX: 150,
-      });
-
-      view.dom.dispatchEvent(mousedownEvent);
-
-      const mouseupEvent = new MouseEvent('mouseup', {
-        clientX: 250,
-      });
-      window.dispatchEvent(mouseupEvent);
+      resizeColumn(view, 12, 150, 250);
 
       expect(editorAnalyticsAPIFake.attachAnalyticsEvent).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -85,6 +76,50 @@ describe('table-resizing/event-handlers', () => {
       );
     });
 
+    it('should shrink last column until table is no longer overflowing', async () => {
+      const { editorView: view } = editor(
+        doc(table()(tr(td()(p('1')), td()(p('2')), td()(p('3{<>}'))))),
+      );
+
+      // Increase column to overflow
+      resizeColumn(view, 7, 50, 500);
+
+      expect(getTotalTableWidth(view.state as EditorState)).toBeGreaterThan(
+        akEditorFullPageMaxWidth,
+      );
+
+      resizeColumn(view, 12, 3000, 700);
+
+      // No matter how large we try to resize the result should equal the width (within 1 pt)
+      expect(getTotalTableWidth(view.state as EditorState)).toBeLessThanOrEqual(
+        akEditorFullPageMaxWidth,
+      );
+      expect(
+        getTotalTableWidth(view.state as EditorState),
+      ).toBeGreaterThanOrEqual(akEditorFullPageMaxWidth - 1);
+    });
+
+    it('should not resize the last column to grow', async () => {
+      const { editorView: view } = editor(
+        doc(table()(tr(td()(p('1')), td()(p('2')), td()(p('3{<>}'))))),
+      );
+
+      // Increase column to overflow
+      resizeColumn(view, 7, 50, 500);
+
+      const overflowingTableWidth = getTotalTableWidth(
+        view.state as EditorState,
+      );
+      expect(overflowingTableWidth).toBeGreaterThan(akEditorFullPageMaxWidth);
+
+      resizeColumn(view, 12, 400, 3000);
+
+      // Width should be unchanged
+      expect(getTotalTableWidth(view.state as EditorState)).toBe(
+        overflowingTableWidth,
+      );
+    });
+
     it('should restore text selection after replacing the table', async () => {
       const { editorView: view } = editor(
         doc(table()(tr(td()(p('1')), td()(p('2')), td()(p('3{<>}'))))),
@@ -94,15 +129,7 @@ describe('table-resizing/event-handlers', () => {
       expect(currentSelection instanceof TextSelection).toBeTruthy();
       expect(currentSelection.$cursor.pos).toBe(15);
 
-      setResizeHandlePos(12)(view.state, view.dispatch);
-      const mousedownEvent = new MouseEvent('mousedown', {
-        clientX: 150,
-      });
-      view.dom.dispatchEvent(mousedownEvent);
-      const mouseupEvent = new MouseEvent('mouseup', {
-        clientX: 250,
-      });
-      window.dispatchEvent(mouseupEvent);
+      resizeColumn(view, 12, 150, 250);
 
       expect(currentSelection instanceof TextSelection).toBeTruthy();
       expect(currentSelection.$cursor.pos).toBe(15);
@@ -118,17 +145,41 @@ describe('table-resizing/event-handlers', () => {
       view.dispatch(_tr);
       expect(view.state.tr.selection.node.type.name).toBe('panel');
 
-      setResizeHandlePos(13)(view.state, view.dispatch);
-      const mousedownEvent = new MouseEvent('mousedown', {
-        clientX: 150,
-      });
-      view.dom.dispatchEvent(mousedownEvent);
-      const mouseupEvent = new MouseEvent('mouseup', {
-        clientX: 250,
-      });
-      window.dispatchEvent(mouseupEvent);
+      resizeColumn(view, 13, 150, 250);
 
       expect(view.state.tr.selection.node.type.name).toBe('panel');
     });
   });
 });
+
+function getTotalTableWidth(state: EditorState) {
+  let totalWidth = 0;
+  state.doc.descendants((node) => {
+    if (node.type.name === 'tableCell') {
+      totalWidth += node.attrs.colwidth[0];
+      return false;
+    }
+    return true;
+  });
+  return totalWidth;
+}
+
+function resizeColumn(
+  view: EditorView,
+  pos: number,
+  start: number,
+  end: number,
+) {
+  setResizeHandlePos(pos)(view.state, view.dispatch);
+
+  const firstmousedownEvent = new MouseEvent('mousedown', {
+    clientX: start,
+  });
+
+  view.dom.dispatchEvent(firstmousedownEvent);
+
+  const firstmouseupEvent = new MouseEvent('mouseup', {
+    clientX: end,
+  });
+  window.dispatchEvent(firstmouseupEvent);
+}

package/src/__tests__/unit/toolbar.ts

@@ -25,9 +25,17 @@ import { canMergeCells } from '../../plugins/table/transforms';
 import { Rect } from '@atlaskit/editor-tables/table-map';
 import tablePlugin from '../../plugins/table';
 import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
+import { getMergedCellsPositions } from '../../plugins/table/utils';
+import { getNewResizeStateFromSelectedColumns } from '../../plugins/table/pm-plugins/table-resizing/utils/resize-state';
 
 jest.mock('@atlaskit/editor-tables/utils');
 jest.mock('../../plugins/table/transforms');
+jest.mock('../../plugins/table/utils');
+jest.mock('../../plugins/table/pm-plugins/table-resizing/utils/resize-state');
+
+(getMergedCellsPositions as Function as jest.Mock<{}>).mockImplementation(
+  () => () => [],
+);
 
 const formatMessage: (t: unknown) => string = (id) => 'Lorem ipsum';
 const ctx = { formatMessage };
@@ -138,13 +146,21 @@ describe('getToolbarMenuConfig', () => {
 
 describe('getToolbarCellOptionsConfig', () => {
   const createEditor = createProsemirrorEditorFactory();
-  const {
-    editorView: { state },
-  } = createEditor({
+  const { editorView } = createEditor({
     doc: doc(table()(row(td()(p('1{cursor}'))))),
-    preset: new Preset<LightEditorPlugin>().add(tablePlugin),
+    preset: new Preset<LightEditorPlugin>().add([
+      tablePlugin,
+      {
+        tableOptions: {
+          allowDistributeColumns: true,
+          allowColumnResizing: true,
+          allowColumnSorting: true,
+        },
+      },
+    ]),
     pluginKey,
   });
+  const { state } = editorView;
   const getEditorContainerWidth = () => ({ width: 500 });
 
   const formatMessage: (t: { id: string }) => string = (message) =>
@@ -152,6 +168,7 @@ describe('getToolbarCellOptionsConfig', () => {
   const rect = new Rect(1, 1, 1, 1);
   const cellOptionsMenu = getToolbarCellOptionsConfig(
     state,
+    editorView,
     rect,
     {
       formatMessage,
@@ -193,6 +210,21 @@ describe('getToolbarCellOptionsConfig', () => {
       disabled: true,
     });
     expect(items[6]).toMatchObject({
+      title: 'fabric.editor.distributeColumns',
+      selected: false,
+      disabled: true,
+    });
+    expect(items[7]).toMatchObject({
+      title: 'fabric.editor.sortColumnASC',
+      selected: false,
+      disabled: false,
+    });
+    expect(items[8]).toMatchObject({
+      title: 'fabric.editor.sortColumnDESC',
+      selected: false,
+      disabled: false,
+    });
+    expect(items[9]).toMatchObject({
       title: 'fabric.editor.clearCells',
       selected: false,
       disabled: false,
@@ -206,6 +238,7 @@ describe('getToolbarCellOptionsConfig', () => {
     //
     const cellOptionsMenu = getToolbarCellOptionsConfig(
       state,
+      editorView,
       rect,
       {
         formatMessage,
@@ -230,6 +263,7 @@ describe('getToolbarCellOptionsConfig', () => {
     //
     const cellOptionsMenu = getToolbarCellOptionsConfig(
       state,
+      editorView,
       rect,
       {
         formatMessage,
@@ -246,4 +280,131 @@ describe('getToolbarCellOptionsConfig', () => {
       disabled: false,
     });
   });
+
+  it('should disable sorting when merged cells are detected', () => {
+    (getMergedCellsPositions as Function as jest.Mock<{}>).mockImplementation(
+      () => [1, 2, 3],
+    );
+
+    const cellOptionsMenu = getToolbarCellOptionsConfig(
+      state,
+      editorView,
+      rect,
+      {
+        formatMessage,
+      },
+      getEditorContainerWidth,
+      undefined,
+    );
+
+    const items = cellOptionsMenu.options as Array<DropdownOptionT<Command>>;
+    const sortItems = items.filter((item) =>
+      item.id?.startsWith('editor.table.sortColumn'),
+    );
+
+    const isDisabled = sortItems.every((item) => item.disabled);
+    const hasTooltip = sortItems.every((item) => item.tooltip);
+
+    expect(isDisabled).toBeTruthy();
+    expect(hasTooltip).toBeTruthy();
+  });
+
+  it('should allow sorting when there are no merged cells detected', () => {
+    (getMergedCellsPositions as Function as jest.Mock<{}>).mockImplementation(
+      () => [],
+    );
+
+    const cellOptionsMenu = getToolbarCellOptionsConfig(
+      state,
+      editorView,
+      rect,
+      {
+        formatMessage,
+      },
+      getEditorContainerWidth,
+      undefined,
+    );
+
+    const items = cellOptionsMenu.options as Array<DropdownOptionT<Command>>;
+    const sortItems = items.filter((item) =>
+      item.id?.startsWith('editor.table.sortColumn'),
+    );
+
+    const isDisabled = sortItems.every((item) => item.disabled);
+    const hasTooltip = sortItems.every((item) => item.tooltip);
+
+    expect(isDisabled).toBeFalsy();
+    expect(hasTooltip).toBeFalsy();
+  });
+
+  it('should disable distribute columns when no resize detected', () => {
+    (
+      getNewResizeStateFromSelectedColumns as Function as jest.Mock<{}>
+    ).mockImplementation(() => ({ changed: false }));
+
+    const cellOptionsMenu = getToolbarCellOptionsConfig(
+      state,
+      editorView,
+      rect,
+      {
+        formatMessage,
+      },
+      getEditorContainerWidth,
+      undefined,
+    );
+
+    const items = cellOptionsMenu.options as Array<DropdownOptionT<Command>>;
+    const distributeColumns = items.filter((item) =>
+      item.id?.startsWith('editor.table.distributeColumns'),
+    );
+
+    const isDisabled = distributeColumns.every((item) => item.disabled);
+    expect(isDisabled).toBeTruthy();
+  });
+
+  it('should allow distribute columns when resize detected', () => {
+    (
+      getNewResizeStateFromSelectedColumns as Function as jest.Mock<{}>
+    ).mockImplementation(() => ({ changed: true }));
+
+    const cellOptionsMenu = getToolbarCellOptionsConfig(
+      state,
+      editorView,
+      rect,
+      {
+        formatMessage,
+      },
+      getEditorContainerWidth,
+      undefined,
+    );
+
+    const items = cellOptionsMenu.options as Array<DropdownOptionT<Command>>;
+    const distributeColumns = items.filter((item) =>
+      item.id?.startsWith('editor.table.distributeColumns'),
+    );
+
+    const isDisabled = distributeColumns.every((item) => item.disabled);
+    expect(isDisabled).toBeFalsy();
+  });
+
+  it('should disable distribute columns when editorView is undefined', () => {
+    const cellOptionsMenu = getToolbarCellOptionsConfig(
+      state,
+      undefined,
+      rect,
+      {
+        formatMessage,
+      },
+      getEditorContainerWidth,
+      undefined,
+    );
+
+    const items = cellOptionsMenu.options as Array<DropdownOptionT<Command>>;
+    const distributeColumns = items.filter((item) =>
+      item.id?.startsWith('editor.table.distributeColumns'),
+    );
+
+    const isDisabled = distributeColumns.every((item) => item.disabled);
+    expect(isDisabled).toBeTruthy();
+  });
 });

package/src/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-row-menu-item-should-remove-the-table-row-on-click-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ae2a52bca4841381cd728c6e22d70aebd6a58177ce5123fedb725d5ac2aa80ac
-size 13915
+oid sha256:5cd747accdc40bfc52f004ff689a3df00173ee2f27d15c68f3a76172c11050fd
+size 13990

package/src/plugins/table/commands/hover.ts

@@ -164,6 +164,7 @@ export const clearHoverSelection = () =>
         [],
         TableDecorations.ALL_CONTROLS_HOVER,
       ),
+      isInDanger: false,
     },
   }));
 

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

@@ -63,6 +63,7 @@ import {
   isRowControlsButton,
   isTableControlsButton,
   isTableContainerOrWrapper,
+  hasResizeHandler,
 } from './utils';
 import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
@@ -298,7 +299,6 @@ export const handleMouseMove =
   (
     view: EditorView,
     event: Event,
-    tableCellOptimization?: boolean,
     elementContentRects?: ElementContentRects,
   ) => {
     if (!(event.target instanceof HTMLElement)) {
@@ -314,7 +314,7 @@ export const handleMouseMove =
       const positionColumn =
         getMousePositionHorizontalRelativeByElement(
           event as MouseEvent,
-          tableCellOptimization,
+          false,
           elementContentRects,
         ) === 'right'
           ? endIndex
@@ -342,15 +342,11 @@ export const handleMouseMove =
     }
 
     const { mouseMoveOptimization } = getEditorFeatureFlags();
-    // we only want to allow mouseMoveOptimisation when tableCellOptimization is enabled
-    // because it relies on tableCell node view that is added  via tableCellOptimization
-    const useMouseMoveOptimisation =
-      tableCellOptimization && mouseMoveOptimization;
 
     if (!isResizeHandleDecoration(element) && isCell(element)) {
       const positionColumn = getMousePositionHorizontalRelativeByElement(
         event as MouseEvent,
-        useMouseMoveOptimisation,
+        mouseMoveOptimization,
         elementContentRects,
         RESIZE_HANDLE_AREA_DECORATION_GAP,
       );
@@ -376,7 +372,8 @@ export const handleMouseMove =
 
           if (
             columnEndIndexTarget !== resizeHandleColumnIndex ||
-            rowIndexTarget !== resizeHandleRowIndex
+            rowIndexTarget !== resizeHandleRowIndex ||
+            !hasResizeHandler({ target: element, columnEndIndexTarget })
           ) {
             return addResizeHandleDecorations(
               rowIndexTarget,
@@ -487,7 +484,6 @@ export const whenTableInFocus =
     eventHandler: (
       view: EditorView,
       mouseEvent: Event,
-      tableCellOptimization?: boolean,
       elementContentRects?: ElementContentRects,
     ) => boolean,
     elementContentRects?: ElementContentRects,
@@ -498,17 +494,10 @@ export const whenTableInFocus =
     const isDragging =
       tableResizePluginState && !!tableResizePluginState.dragging;
     const hasTableNode = tablePluginState && tablePluginState.tableNode;
-    const tableCellOptimization =
-      tablePluginState?.pluginConfig?.tableCellOptimization;
 
     if (!hasTableNode || isDragging) {
       return false;
     }
 
-    return eventHandler(
-      view,
-      mouseEvent,
-      tableCellOptimization,
-      elementContentRects,
-    );
+    return eventHandler(view, mouseEvent, elementContentRects);
   };

package/src/plugins/table/index.tsx

@@ -458,6 +458,7 @@ const tablesPlugin = (options?: TablePluginOptions): EditorPlugin => {
         defaultGetEditorContainerWidth,
         options?.editorAnalyticsAPI,
         options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags,
+        () => editorViewRef.current,
       )(pluginConfig(options?.tableOptions)),
     },
   };

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -4,6 +4,7 @@ import { Node as PmNode } from 'prosemirror-model';
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
 import { EditorView } from 'prosemirror-view';
 import rafSchedule from 'raf-schd';
+import { findTable } from '@atlaskit/editor-tables/utils';
 
 import {
   calcTableWidth,
@@ -19,7 +20,7 @@ import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
 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,
@@ -196,7 +197,14 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   }
 
   componentDidUpdate(prevProps: ComponentProps) {
-    const { getNode, isMediaFullscreen, allowColumnResizing } = this.props;
+    const { view, getNode, isMediaFullscreen, allowColumnResizing } =
+      this.props;
+    const { isInDanger } = getPluginState(view.state);
+    const table = findTable(view.state.selection);
+
+    if (isInDanger && !table) {
+      clearHoverSelection()(view.state, view.dispatch);
+    }
 
     const { tableOverflowShadowsOptimization } =
       this.props.getEditorFeatureFlags();