@atlaskit/editor-plugin-table 7.5.5 → 7.5.7

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

@@ -1,11 +1,11 @@
-import { Component } from 'react';
+/// <reference types="react" />
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { CellHoverMeta } from '../../types';
-export interface Props {
+export interface TableFloatingControlsProps {
     editorView: EditorView;
     selection?: Selection;
     tableRef?: HTMLTableElement;
@@ -25,24 +25,7 @@ export interface Props {
     ordering?: TableColumnOrdering;
     stickyHeader?: RowStickyState;
     insertRowButtonIndex?: number;
+    tableWrapperWidth?: number;
 }
-interface State {
-    tableWrapperWidth: number;
-    tableWrapperHeight: number;
-}
-export default class TableFloatingControls extends Component<Props, State> {
-    static displayName: string;
-    private resizeObserver?;
-    constructor(props: Props);
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    private tryInitResizeObserver;
-    shouldComponentUpdate(nextProps: Props, nextState: State): boolean;
-    componentWillUnmount(): void;
-    render(): JSX.Element | null;
-    private selectRow;
-    private selectRows;
-    private hoverRows;
-    private updateCellHoverLocation;
-}
-export {};
+export declare const TableFloatingControls: ({ editorView, tableRef, tableNode, isInDanger, isResizing, isNumberColumnEnabled, isHeaderRowEnabled, isHeaderColumnEnabled, tableActive, hasHeaderRow, hoveredRows, stickyHeader, isDragAndDropEnabled, hoveredCell, isTableHovered, tableWrapperWidth, }: TableFloatingControlsProps) => JSX.Element | null;
+export default TableFloatingControls;

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

@@ -1,4 +1,3 @@
-import type { ElementContentRects } from '../types';
 export declare const isCell: (node: HTMLElement | null) => boolean;
 export declare const isCornerButton: (node: HTMLElement | null) => boolean;
 export declare const isInsertRowButton: (node: HTMLElement | null) => boolean | HTMLElement | null;
@@ -13,7 +12,16 @@ export declare const isDragRowControlsButton: (node: HTMLElement | null) => true
 export declare const isDragRowFloatingInsertDot: (node: HTMLElement | null) => boolean;
 export declare const isDragColumnFloatingInsertDot: (node: HTMLElement | null) => boolean;
 export declare const isDragCornerButton: (node: HTMLElement | null) => boolean;
-export declare const getMousePositionHorizontalRelativeByElement: (mouseEvent: MouseEvent, elementContentRects?: ElementContentRects, gapInPixels?: number, isDragAndDropEnabled?: boolean) => 'left' | 'right' | null;
+/**
+ * This can be used with mouse events to determine the left/right side of the target the pointer is closest too.
+ *
+ * WARNING: This metod reads properties which can trigger a reflow; use this wisely.
+ *
+ * @param mouseEvent
+ * @param gapInPixels
+ * @returns
+ */
+export declare const getMousePositionHorizontalRelativeByElement: (mouseEvent: MouseEvent, offsetX: number, gapInPixels?: number) => 'left' | 'right' | null;
 export declare const getMousePositionVerticalRelativeByElement: (mouseEvent: MouseEvent) => 'top' | 'bottom' | null;
 export declare const hasResizeHandler: ({ columnEndIndexTarget, target, }: {
     columnEndIndexTarget: number;

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

@@ -9,3 +9,4 @@ export declare const arrowRightFromTable: (editorSelectionAPI: ExtractInjectionA
 export declare const selectColumns: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => (triggeredByKeyboard?: boolean) => Command;
 export declare const selectRows: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => (triggeredByKeyboard?: boolean) => Command;
 export declare const shiftArrowUpFromTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;
+export declare const modASelectTable: (editorSelectionAPI: ExtractInjectionAPI<typeof tablePlugin>['selection'] | undefined) => () => Command;

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

@@ -1,7 +1,6 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { ElementContentRects } from './types';
 export declare const handleBlur: (view: EditorView, event: Event) => boolean;
 export declare const handleFocus: (view: EditorView, event: Event) => boolean;
 export declare const handleClick: (view: EditorView, event: Event) => boolean;
@@ -11,9 +10,9 @@ export declare const handleMouseDown: (_: EditorView, event: Event) => boolean;
 export declare const handleMouseOut: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseEnter: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseLeave: (view: EditorView, event: Event) => boolean;
-export declare const handleMouseMove: (view: EditorView, event: Event, elementContentRects?: ElementContentRects) => boolean;
+export declare const handleMouseMove: (view: EditorView, event: Event) => boolean;
 export declare function handleTripleClick(view: EditorView, pos: number): boolean;
 export declare const handleCut: (oldTr: Transaction, oldState: EditorState, newState: EditorState, editorAnalyticsAPI?: EditorAnalyticsAPI, editorView?: EditorView, isTableScalingEnabled?: boolean) => Transaction;
 export declare const isTableInFocus: (view: EditorView) => boolean;
-export declare const whenTableInFocus: (eventHandler: (view: EditorView, mouseEvent: Event, elementContentRects?: ElementContentRects) => boolean, elementContentRects?: ElementContentRects) => (view: EditorView, mouseEvent: Event) => boolean;
-export declare const withCellTracking: (eventHandler: (view: EditorView, mouseEvent: Event, elementContentRects?: ElementContentRects) => boolean, elementContentRects?: ElementContentRects) => (view: EditorView, mouseEvent: Event) => boolean;
+export declare const whenTableInFocus: (eventHandler: (view: EditorView, mouseEvent: Event) => boolean) => (view: EditorView, mouseEvent: Event) => boolean;
+export declare const withCellTracking: (eventHandler: (view: EditorView, mouseEvent: Event) => boolean) => (view: EditorView, mouseEvent: Event) => boolean;

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

@@ -19,6 +19,8 @@ export declare class OverflowShadowsObserver {
      * e.g. bounds on an IntersectionObserverEntry, otherwise proceed with
      * reading it from sticky cell
      */
-    updateStickyShadows: (stickyRowHeight?: number) => void;
+    updateStickyShadows: ((stickyRowHeight?: number) => void) & {
+        cancel(): void;
+    };
     dispose(): void;
 }

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

@@ -3,11 +3,7 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import TableNodeView from './TableNodeViewBase';
 export default class TableCell extends TableNodeView<HTMLElement> implements NodeView {
-    private readonly observer?;
-    constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, eventDispatcher: EventDispatcher, observer?: ResizeObserver | undefined);
-    private isStickyHeaderEnabled;
-    private isDragAndDropEnabled;
+    constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, eventDispatcher: EventDispatcher);
     update(node: PMNode): boolean;
-    destroy(): void;
     private updateNodeView;
 }

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

@@ -37,6 +37,8 @@ interface TableState {
     stickyHeader?: RowStickyState;
     [ShadowEvent.SHOW_BEFORE_SHADOW]: boolean;
     [ShadowEvent.SHOW_AFTER_SHADOW]: boolean;
+    tableWrapperWidth?: number;
+    tableWrapperHeight?: number;
 }
 declare class TableComponent extends React.Component<ComponentProps, TableState> {
     static displayName: string;
@@ -50,6 +52,7 @@ declare class TableComponent extends React.Component<ComponentProps, TableState>
     private stickyScrollbar?;
     private isInitialOverflowSent;
     private initialOverflowCaptureTimerId?;
+    private resizeObserver?;
     private dragAndDropCleanupFn?;
     constructor(props: ComponentProps);
     componentDidMount(): void;
@@ -58,6 +61,7 @@ declare class TableComponent extends React.Component<ComponentProps, TableState>
     componentDidUpdate(_: any, prevState: TableState): void;
     private updateShadowState;
     private createShadowSentinels;
+    private observeTable;
     onStickyState: (state: StickyPluginState) => void;
     prevTableState: any;
     render(): JSX.Element;

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

@@ -25,8 +25,9 @@ type ResizableTableContainerProps = {
     isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
     isTableScalingEnabled?: boolean;
+    tableWrapperHeight?: number;
 };
-export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, isTableScalingEnabled, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
+export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, isTableScalingEnabled, tableWrapperHeight, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
 type TableContainerProps = {
     node: PMNode;
     className: string;
@@ -40,6 +41,7 @@ type TableContainerProps = {
     isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
     isTableScalingEnabled?: boolean;
+    tableWrapperHeight?: number;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, isResizing, pluginInjectionApi, isTableScalingEnabled, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isTableScalingEnabled, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
 export {};

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/misc.d.ts

@@ -24,4 +24,5 @@ export declare const getTableMaxWidth: ({ table, tableStart, state, layout, getE
  */
 export declare const getTableElementWidth: (table: PMNode) => number;
 export declare const getTableContainerElementWidth: (table: PMNode) => number;
+export declare const getTableScalingPercent: (table: PMNode, tableRef: HTMLElement) => number;
 export {};

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

@@ -412,9 +412,6 @@ export interface ToolbarMenuState {
 export interface ToolbarMenuContext {
     formatMessage: IntlShape['formatMessage'];
 }
-export type ElementContentRects = {
-    [key: string]: ResizeObserverEntry['contentRect'];
-};
 export declare enum ShadowEvent {
     SHOW_BEFORE_SHADOW = "showBeforeShadow",
     SHOW_AFTER_SHADOW = "showAfterShadow"

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

@@ -25,6 +25,7 @@ export interface Props {
     tableContainerWidth?: number;
     isNumberColumnEnabled?: boolean;
     getScrollOffset?: () => number;
+    tableWrapperHeight?: number;
 }
-export declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, }: Props) => JSX.Element | null;
+export declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, tableWrapperHeight, }: Props) => JSX.Element | null;
 export default TableFloatingColumnControls;

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

@@ -1,11 +1,11 @@
-import { Component } from 'react';
+/// <reference types="react" />
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { CellHoverMeta } from '../../types';
-export interface Props {
+export interface TableFloatingControlsProps {
     editorView: EditorView;
     selection?: Selection;
     tableRef?: HTMLTableElement;
@@ -25,24 +25,7 @@ export interface Props {
     ordering?: TableColumnOrdering;
     stickyHeader?: RowStickyState;
     insertRowButtonIndex?: number;
+    tableWrapperWidth?: number;
 }
-interface State {
-    tableWrapperWidth: number;
-    tableWrapperHeight: number;
-}
-export default class TableFloatingControls extends Component<Props, State> {
-    static displayName: string;
-    private resizeObserver?;
-    constructor(props: Props);
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    private tryInitResizeObserver;
-    shouldComponentUpdate(nextProps: Props, nextState: State): boolean;
-    componentWillUnmount(): void;
-    render(): JSX.Element | null;
-    private selectRow;
-    private selectRows;
-    private hoverRows;
-    private updateCellHoverLocation;
-}
-export {};
+export declare const TableFloatingControls: ({ editorView, tableRef, tableNode, isInDanger, isResizing, isNumberColumnEnabled, isHeaderRowEnabled, isHeaderColumnEnabled, tableActive, hasHeaderRow, hoveredRows, stickyHeader, isDragAndDropEnabled, hoveredCell, isTableHovered, tableWrapperWidth, }: TableFloatingControlsProps) => JSX.Element | null;
+export default TableFloatingControls;

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

@@ -1,4 +1,3 @@
-import type { ElementContentRects } from '../types';
 export declare const isCell: (node: HTMLElement | null) => boolean;
 export declare const isCornerButton: (node: HTMLElement | null) => boolean;
 export declare const isInsertRowButton: (node: HTMLElement | null) => boolean | HTMLElement | null;
@@ -16,7 +15,16 @@ export declare const isDragRowControlsButton: (node: HTMLElement | null) => true
 export declare const isDragRowFloatingInsertDot: (node: HTMLElement | null) => boolean;
 export declare const isDragColumnFloatingInsertDot: (node: HTMLElement | null) => boolean;
 export declare const isDragCornerButton: (node: HTMLElement | null) => boolean;
-export declare const getMousePositionHorizontalRelativeByElement: (mouseEvent: MouseEvent, elementContentRects?: ElementContentRects, gapInPixels?: number, isDragAndDropEnabled?: boolean) => 'left' | 'right' | null;
+/**
+ * This can be used with mouse events to determine the left/right side of the target the pointer is closest too.
+ *
+ * WARNING: This metod reads properties which can trigger a reflow; use this wisely.
+ *
+ * @param mouseEvent
+ * @param gapInPixels
+ * @returns
+ */
+export declare const getMousePositionHorizontalRelativeByElement: (mouseEvent: MouseEvent, offsetX: number, gapInPixels?: number) => 'left' | 'right' | null;
 export declare const getMousePositionVerticalRelativeByElement: (mouseEvent: MouseEvent) => 'top' | 'bottom' | null;
 export declare const hasResizeHandler: ({ columnEndIndexTarget, target, }: {
     columnEndIndexTarget: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.5.5",
+  "version": "7.5.7",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.5.2",
     "@atlaskit/custom-steps": "^0.0.14",
-    "@atlaskit/editor-common": "^78.11.0",
+    "@atlaskit/editor-common": "^78.12.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-content-insertion": "^1.0.0",
@@ -46,18 +46,17 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.0.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.0.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
-    "@atlaskit/primitives": "^4.0.0",
+    "@atlaskit/primitives": "^4.1.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/toggle": "^13.0.0",
-    "@atlaskit/tokens": "^1.40.0",
+    "@atlaskit/tokens": "^1.41.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "classnames": "^2.2.5",
     "lodash": "^4.17.21",
     "memoize-one": "^6.0.0",
-    "raf-schd": "^4.0.3",
-    "uuid": "^3.1.0"
+    "raf-schd": "^4.0.3"
   },
   "peerDependencies": {
     "react": "^16.8.0",
@@ -143,6 +142,9 @@
     },
     "platform.editor.transform-slice-for-nested-expand": {
       "type": "boolean"
+    },
+    "platform.editor.table.cmd-a-select-table": {
+      "type": "boolean"
     }
   }
 }

package/src/commands/selection.ts

@@ -589,3 +589,36 @@ export const shiftArrowUpFromTable =
 
     return false;
   };
+
+export const modASelectTable =
+  (
+    editorSelectionAPI:
+      | ExtractInjectionAPI<typeof tablePlugin>['selection']
+      | undefined,
+  ) =>
+  (): Command =>
+  (state, dispatch) => {
+    const { selection } = state;
+    const table = findTable(selection);
+
+    if (!table) {
+      return false;
+    }
+    const { $from, $to } = selection;
+
+    const tableSelected = isTableSelected(selection);
+
+    if (
+      !tableSelected &&
+      $from.pos > table.start + 1 &&
+      $to.pos < table.start + table.node.nodeSize
+    ) {
+      return selectFullTable(editorSelectionAPI)({
+        node: table.node,
+        startPos: table.start,
+        dir: TableSelectionDirection.BottomToTop,
+      })(state, dispatch);
+    }
+
+    return false;
+  };

package/src/event-handlers.ts

@@ -1,3 +1,5 @@
+import rafSchedule from 'raf-schd';
+
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import {
   ACTION_SUBJECT,
@@ -47,7 +49,6 @@ import { getPluginState as getDragDropPluginState } from './pm-plugins/drag-and-
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
-import type { ElementContentRects } from './types';
 import {
   TableCssClassName as ClassName,
   RESIZE_HANDLE_AREA_DECORATION_GAP,
@@ -406,104 +407,119 @@ export const handleMouseLeave = (view: EditorView, event: Event): boolean => {
   return false;
 };
 
-export const handleMouseMove = (
-  view: EditorView,
-  event: Event,
-  elementContentRects?: ElementContentRects,
-) => {
-  if (!(event.target instanceof HTMLElement)) {
-    return false;
-  }
-  const element = event.target;
-
-  if (
-    isColumnControlsDecorations(element) ||
-    isDragColumnFloatingInsertDot(element)
-  ) {
-    const { state, dispatch } = view;
-    const { insertColumnButtonIndex, isDragAndDropEnabled } =
-      getPluginState(state);
-    const [startIndex, endIndex] = getColumnOrRowIndex(element);
-
-    const positionColumn =
-      getMousePositionHorizontalRelativeByElement(
-        event as MouseEvent,
-        elementContentRects,
-        undefined,
-        isDragAndDropEnabled,
-      ) === 'right'
-        ? endIndex
-        : startIndex;
+// IMPORTANT: The mouse move handler has been setup with RAF schedule to avoid Reflows which will occur as some methods
+// need to access the mouse event offset position and also the target clientWidth vallue.
+const handleMouseMoveDebounce = rafSchedule(
+  (view: EditorView, event: MouseEvent, offsetX: number) => {
+    if (!(event.target instanceof HTMLElement)) {
+      return false;
+    }
+    const element = event.target;
 
-    if (positionColumn !== insertColumnButtonIndex) {
-      return showInsertColumnButton(positionColumn)(state, dispatch);
+    if (
+      isColumnControlsDecorations(element) ||
+      isDragColumnFloatingInsertDot(element)
+    ) {
+      const { state, dispatch } = view;
+      const { insertColumnButtonIndex } = getPluginState(state);
+      const [startIndex, endIndex] = getColumnOrRowIndex(element);
+
+      const positionColumn =
+        getMousePositionHorizontalRelativeByElement(
+          event,
+          offsetX,
+          undefined,
+        ) === 'right'
+          ? endIndex
+          : startIndex;
+
+      if (positionColumn !== insertColumnButtonIndex) {
+        return showInsertColumnButton(positionColumn)(state, dispatch);
+      }
     }
-  }
 
-  if (isRowControlsButton(element) || isDragRowFloatingInsertDot(element)) {
-    const { state, dispatch } = view;
-    const { insertRowButtonIndex } = getPluginState(state);
-    const [startIndex, endIndex] = getColumnOrRowIndex(element);
+    if (isRowControlsButton(element) || isDragRowFloatingInsertDot(element)) {
+      const { state, dispatch } = view;
+      const { insertRowButtonIndex } = getPluginState(state);
+      const [startIndex, endIndex] = getColumnOrRowIndex(element);
 
-    const positionRow =
-      getMousePositionVerticalRelativeByElement(event as MouseEvent) ===
-      'bottom'
-        ? endIndex
-        : startIndex;
+      const positionRow =
+        getMousePositionVerticalRelativeByElement(event) === 'bottom'
+          ? endIndex
+          : startIndex;
 
-    if (positionRow !== insertRowButtonIndex) {
-      return showInsertRowButton(positionRow)(state, dispatch);
+      if (positionRow !== insertRowButtonIndex) {
+        return showInsertRowButton(positionRow)(state, dispatch);
+      }
     }
-  }
-
-  if (!isResizeHandleDecoration(element) && isCell(element)) {
-    const positionColumn = getMousePositionHorizontalRelativeByElement(
-      event as MouseEvent,
-      elementContentRects,
-      RESIZE_HANDLE_AREA_DECORATION_GAP,
-    );
 
-    if (positionColumn !== null) {
-      const { state, dispatch } = view;
-      const { resizeHandleColumnIndex, resizeHandleRowIndex } =
-        getPluginState(state);
-
-      const isKeyboardResize = getBooleanFF(
-        'platform.editor.a11y-column-resizing_emcvz',
-      )
-        ? getPluginState(state).isKeyboardResize
-        : false;
-      const tableCell = closestElement(
-        element,
-        'td, th',
-      ) as HTMLTableCellElement;
-      const cellStartPosition = view.posAtDOM(tableCell, 0);
-      const rect = findCellRectClosestToPos(
-        state.doc.resolve(cellStartPosition),
+    if (!isResizeHandleDecoration(element) && isCell(element)) {
+      const positionColumn = getMousePositionHorizontalRelativeByElement(
+        event,
+        offsetX,
+        RESIZE_HANDLE_AREA_DECORATION_GAP,
       );
 
-      if (rect) {
-        const columnEndIndexTarget =
-          positionColumn === 'left' ? rect.left : rect.right;
-
-        const rowIndexTarget = rect.top;
-
-        if (
-          (columnEndIndexTarget !== resizeHandleColumnIndex ||
-            rowIndexTarget !== resizeHandleRowIndex ||
-            !hasResizeHandler({ target: element, columnEndIndexTarget })) &&
-          !isKeyboardResize // if initiated by keyboard don't need to react on hover for other resize sliders
-        ) {
-          return addResizeHandleDecorations(
-            rowIndexTarget,
-            columnEndIndexTarget,
-            true,
-          )(state, dispatch);
+      if (positionColumn !== null) {
+        const { state, dispatch } = view;
+        const { resizeHandleColumnIndex, resizeHandleRowIndex } =
+          getPluginState(state);
+
+        const isKeyboardResize = getBooleanFF(
+          'platform.editor.a11y-column-resizing_emcvz',
+        )
+          ? getPluginState(state).isKeyboardResize
+          : false;
+        const tableCell = closestElement(
+          element,
+          'td, th',
+        ) as HTMLTableCellElement;
+        const cellStartPosition = view.posAtDOM(tableCell, 0);
+        const rect = findCellRectClosestToPos(
+          state.doc.resolve(cellStartPosition),
+        );
+
+        if (rect) {
+          const columnEndIndexTarget =
+            positionColumn === 'left' ? rect.left : rect.right;
+
+          const rowIndexTarget = rect.top;
+
+          if (
+            (columnEndIndexTarget !== resizeHandleColumnIndex ||
+              rowIndexTarget !== resizeHandleRowIndex ||
+              !hasResizeHandler({ target: element, columnEndIndexTarget })) &&
+            !isKeyboardResize // if initiated by keyboard don't need to react on hover for other resize sliders
+          ) {
+            return addResizeHandleDecorations(
+              rowIndexTarget,
+              columnEndIndexTarget,
+              true,
+            )(state, dispatch);
+          }
         }
       }
     }
+
+    return false;
+  },
+);
+
+export const handleMouseMove = (view: EditorView, event: Event) => {
+  if (!(event.target instanceof HTMLElement)) {
+    return false;
   }
 
+  // NOTE: When accessing offsetX in gecko from a deferred callback, it will return 0. However it will be non-zero if accessed
+  // within the scope of it's initial mouse move handler. Also Chrome does return the correct value, however it could trigger
+  // a reflow. So for now this will just grab the offsetX value immediately for gecko and chrome will calculate later
+  // in the deferred callback handler.
+  // Bug Tracking: https://bugzilla.mozilla.org/show_bug.cgi?id=1882903
+  handleMouseMoveDebounce(
+    view,
+    event as MouseEvent,
+    browser.gecko ? (event as MouseEvent).offsetX : NaN,
+  );
   return false;
 };
 
@@ -614,20 +630,13 @@ export const isTableInFocus = (view: EditorView) => {
 };
 
 export const whenTableInFocus =
-  (
-    eventHandler: (
-      view: EditorView,
-      mouseEvent: Event,
-      elementContentRects?: ElementContentRects,
-    ) => boolean,
-    elementContentRects?: ElementContentRects,
-  ) =>
+  (eventHandler: (view: EditorView, mouseEvent: Event) => boolean) =>
   (view: EditorView, mouseEvent: Event): boolean => {
     if (!isTableInFocus(view)) {
       return false;
     }
 
-    return eventHandler(view, mouseEvent, elementContentRects);
+    return eventHandler(view, mouseEvent);
   };
 
 const trackCellLocation = (view: EditorView, mouseEvent: Event) => {
@@ -681,14 +690,7 @@ const trackCellLocation = (view: EditorView, mouseEvent: Event) => {
 };
 
 export const withCellTracking =
-  (
-    eventHandler: (
-      view: EditorView,
-      mouseEvent: Event,
-      elementContentRects?: ElementContentRects,
-    ) => boolean,
-    elementContentRects?: ElementContentRects,
-  ) =>
+  (eventHandler: (view: EditorView, mouseEvent: Event) => boolean) =>
   (view: EditorView, mouseEvent: Event): boolean => {
     if (
       getPluginState(view.state).isDragAndDropEnabled &&
@@ -696,5 +698,5 @@ export const withCellTracking =
     ) {
       trackCellLocation(view, mouseEvent);
     }
-    return eventHandler(view, mouseEvent, elementContentRects);
+    return eventHandler(view, mouseEvent);
   };