@atlaskit/editor-plugin-table 2.8.1 → 2.8.3

package/.eslintrc.js

@@ -1,6 +1,5 @@
 module.exports = {
   rules: {
-    'no-duplicate-imports': 'off',
     '@typescript-eslint/no-duplicate-imports': 'error',
   },
 };

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 2.8.3
+
+### Patch Changes
+
+- [`77b74847baa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/77b74847baa) - ED-19152 Cancels scheduled resize to avoid handleResize being called after handleResizeStop.
+
+## 2.8.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.8.1
 
 ### Patch Changes

package/dist/cjs/plugins/table/nodeviews/TableResizer.js

@@ -96,6 +96,26 @@ var TableResizer = function TableResizer(_ref) {
     }));
     setSnappingEnabled(displayGuideline(_guidelines.defaultGuidelines));
   }, [displayGuideline, editorView, startMeasure]);
+  var handleResize = (0, _react.useCallback)(function (originalState, delta) {
+    countFrames();
+    var newWidth = originalState.width + delta.width;
+    var pos = getPos();
+    if (typeof pos !== 'number') {
+      return;
+    }
+    (0, _utils2.previewScaleTable)(tableRef, {
+      node: node,
+      prevNode: node,
+      start: pos + 1,
+      parentWidth: newWidth
+    }, editorView.domAtPos.bind(editorView));
+    updateActiveGuidelines((0, _snapping.findClosestSnap)(newWidth, _guidelines.defaultGuidelineWidths, _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP));
+    updateWidth(newWidth);
+    return newWidth;
+  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames]);
+  var scheduleResize = (0, _react.useMemo)(function () {
+    return (0, _rafSchd.default)(handleResize);
+  }, [handleResize]);
   var handleResizeStop = (0, _react.useCallback)(function (originalState, delta) {
     var newWidth = originalState.width + delta.width;
     var state = editorView.state,
@@ -139,28 +159,9 @@ var TableResizer = function TableResizer(_ref) {
     // Hide guidelines when resizing stops
     displayGuideline([]);
     updateWidth(newWidth);
+    scheduleResize.cancel();
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, endMeasure]);
-  var handleResize = (0, _react.useCallback)(function (originalState, delta) {
-    countFrames();
-    var newWidth = originalState.width + delta.width;
-    var pos = getPos();
-    if (typeof pos !== 'number') {
-      return;
-    }
-    (0, _utils2.previewScaleTable)(tableRef, {
-      node: node,
-      prevNode: node,
-      start: pos + 1,
-      parentWidth: newWidth
-    }, editorView.domAtPos.bind(editorView));
-    updateActiveGuidelines((0, _snapping.findClosestSnap)(newWidth, _guidelines.defaultGuidelineWidths, _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP));
-    updateWidth(newWidth);
-    return newWidth;
-  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames]);
-  var scheduleResize = (0, _react.useMemo)(function () {
-    return (0, _rafSchd.default)(handleResize);
-  }, [handleResize]);
+  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
   var handleComponent = (0, _react.useMemo)(function () {
     return {
       left: /*#__PURE__*/_react.default.createElement("div", {

package/dist/cjs/version.json

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

package/dist/es2019/plugins/table/nodeviews/TableResizer.js

@@ -84,6 +84,24 @@ export const TableResizer = ({
     }));
     setSnappingEnabled(displayGuideline(defaultGuidelines));
   }, [displayGuideline, editorView, startMeasure]);
+  const handleResize = useCallback((originalState, delta) => {
+    countFrames();
+    const newWidth = originalState.width + delta.width;
+    const pos = getPos();
+    if (typeof pos !== 'number') {
+      return;
+    }
+    previewScaleTable(tableRef, {
+      node,
+      prevNode: node,
+      start: pos + 1,
+      parentWidth: newWidth
+    }, editorView.domAtPos.bind(editorView));
+    updateActiveGuidelines(findClosestSnap(newWidth, defaultGuidelineWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP));
+    updateWidth(newWidth);
+    return newWidth;
+  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames]);
+  const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
   const handleResizeStop = useCallback((originalState, delta) => {
     const newWidth = originalState.width + delta.width;
     const {
@@ -130,26 +148,9 @@ export const TableResizer = ({
     // Hide guidelines when resizing stops
     displayGuideline([]);
     updateWidth(newWidth);
+    scheduleResize.cancel();
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, endMeasure]);
-  const handleResize = useCallback((originalState, delta) => {
-    countFrames();
-    const newWidth = originalState.width + delta.width;
-    const pos = getPos();
-    if (typeof pos !== 'number') {
-      return;
-    }
-    previewScaleTable(tableRef, {
-      node,
-      prevNode: node,
-      start: pos + 1,
-      parentWidth: newWidth
-    }, editorView.domAtPos.bind(editorView));
-    updateActiveGuidelines(findClosestSnap(newWidth, defaultGuidelineWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP));
-    updateWidth(newWidth);
-    return newWidth;
-  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames]);
-  const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
+  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
   const handleComponent = useMemo(() => ({
     left: /*#__PURE__*/React.createElement("div", {
       className: resizerHandleShadowClassName,

package/dist/es2019/version.json

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

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

@@ -86,6 +86,26 @@ export var TableResizer = function TableResizer(_ref) {
     }));
     setSnappingEnabled(displayGuideline(defaultGuidelines));
   }, [displayGuideline, editorView, startMeasure]);
+  var handleResize = useCallback(function (originalState, delta) {
+    countFrames();
+    var newWidth = originalState.width + delta.width;
+    var pos = getPos();
+    if (typeof pos !== 'number') {
+      return;
+    }
+    previewScaleTable(tableRef, {
+      node: node,
+      prevNode: node,
+      start: pos + 1,
+      parentWidth: newWidth
+    }, editorView.domAtPos.bind(editorView));
+    updateActiveGuidelines(findClosestSnap(newWidth, defaultGuidelineWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP));
+    updateWidth(newWidth);
+    return newWidth;
+  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames]);
+  var scheduleResize = useMemo(function () {
+    return rafSchd(handleResize);
+  }, [handleResize]);
   var handleResizeStop = useCallback(function (originalState, delta) {
     var newWidth = originalState.width + delta.width;
     var state = editorView.state,
@@ -129,28 +149,9 @@ export var TableResizer = function TableResizer(_ref) {
     // Hide guidelines when resizing stops
     displayGuideline([]);
     updateWidth(newWidth);
+    scheduleResize.cancel();
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, endMeasure]);
-  var handleResize = useCallback(function (originalState, delta) {
-    countFrames();
-    var newWidth = originalState.width + delta.width;
-    var pos = getPos();
-    if (typeof pos !== 'number') {
-      return;
-    }
-    previewScaleTable(tableRef, {
-      node: node,
-      prevNode: node,
-      start: pos + 1,
-      parentWidth: newWidth
-    }, editorView.domAtPos.bind(editorView));
-    updateActiveGuidelines(findClosestSnap(newWidth, defaultGuidelineWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP));
-    updateWidth(newWidth);
-    return newWidth;
-  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames]);
-  var scheduleResize = useMemo(function () {
-    return rafSchd(handleResize);
-  }, [handleResize]);
+  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
   var handleComponent = useMemo(function () {
     return {
       left: /*#__PURE__*/React.createElement("div", {

package/dist/esm/version.json

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

package/dist/types/plugins/table/nodeviews/TableResizer.d.ts

@@ -1,9 +1,9 @@
-import { PropsWithChildren } from 'react';
-import { TableEventPayload } from '@atlaskit/editor-common/analytics';
+import type { PropsWithChildren } from 'react';
+import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 interface TableResizerProps {
     width: number;
     maxWidth: number;

package/dist/types/plugins/table/pm-plugins/decorations/plugin.d.ts

@@ -4,4 +4,4 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export declare const pluginKey: PluginKey<any>;
 export declare const getDecorations: (state: EditorState) => DecorationSet;
 export declare const handleDocOrSelectionChanged: (tr: Transaction | ReadonlyTransaction, decorationSet: DecorationSet, oldState: EditorState, newState: EditorState) => DecorationSet;
-export declare const createPlugin: () => SafePlugin<any>;
+export declare const createPlugin: () => SafePlugin<DecorationSet>;

package/dist/types/plugins/table/pm-plugins/plugin-factory.d.ts

@@ -1,3 +1 @@
-/// <reference path="../../../../../../../../typings/prosemirror.d.ts" />
-/// <reference path="../../../../../../../../typings/prosemirror-state.d.ts" />
 export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: import("../types").TablePluginState | ((state: import("prosemirror-state").EditorState) => import("../types").TablePluginState)) => import("prosemirror-state").SafeStateField<import("../types").TablePluginState>, createCommand: <A = import("../types").TablePluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command, getPluginState: (state: import("prosemirror-state").EditorState) => import("../types").TablePluginState;

package/dist/types/plugins/table/pm-plugins/sticky-headers/plugin-state.d.ts

@@ -1,5 +1,3 @@
-/// <reference path="../../../../../../../../../typings/prosemirror.d.ts" />
-/// <reference path="../../../../../../../../../typings/prosemirror-state.d.ts" />
 import { StickyPluginAction, StickyPluginState } from './types';
 declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: StickyPluginState | ((state: import("prosemirror-state").EditorState) => StickyPluginState)) => import("prosemirror-state").SafeStateField<StickyPluginState>, createCommand: <A = StickyPluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command;
 export { createPluginState, createCommand };

package/dist/types/plugins/table/pm-plugins/table-resizing/plugin-factory.d.ts

@@ -1,5 +1,3 @@
-/// <reference path="../../../../../../../../../typings/prosemirror.d.ts" />
-/// <reference path="../../../../../../../../../typings/prosemirror-state.d.ts" />
 import { ColumnResizingPluginState } from '../../types';
 export declare const createCommand: <A = import("../../types").ColumnResizingPluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command;
 export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: ColumnResizingPluginState | ((state: import("prosemirror-state").EditorState) => ColumnResizingPluginState)) => import("prosemirror-state").SafeStateField<ColumnResizingPluginState>;

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

@@ -6,7 +6,7 @@ import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { TableOptions } from '../../../nodeviews/types';
 export declare function getLayoutSize(tableLayout: TableLayout, containerWidth: number | undefined, options: TableOptions): number;
 export declare function getDefaultLayoutMaxWidth(containerWidth?: number): number;
-export declare function pointsAtCell($pos: ResolvedPos): false | PMNode | null | undefined;
+export declare function pointsAtCell($pos: ResolvedPos): false | PMNode | null;
 export declare function currentColWidth(view: EditorView, cellPos: number, { colspan, colwidth }: CellAttributes): number;
 export declare function domCellAround(target: HTMLElement | null): HTMLElement | null;
 interface getTableMaxWidthProps {

package/dist/types-ts4.5/plugins/table/nodeviews/TableResizer.d.ts

@@ -1,9 +1,9 @@
-import { PropsWithChildren } from 'react';
-import { TableEventPayload } from '@atlaskit/editor-common/analytics';
+import type { PropsWithChildren } from 'react';
+import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 interface TableResizerProps {
     width: number;
     maxWidth: number;

package/dist/types-ts4.5/plugins/table/pm-plugins/decorations/plugin.d.ts

@@ -4,4 +4,4 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export declare const pluginKey: PluginKey<any>;
 export declare const getDecorations: (state: EditorState) => DecorationSet;
 export declare const handleDocOrSelectionChanged: (tr: Transaction | ReadonlyTransaction, decorationSet: DecorationSet, oldState: EditorState, newState: EditorState) => DecorationSet;
-export declare const createPlugin: () => SafePlugin<any>;
+export declare const createPlugin: () => SafePlugin<DecorationSet>;

package/dist/types-ts4.5/plugins/table/pm-plugins/plugin-factory.d.ts

@@ -1,3 +1 @@
-/// <reference path="../../../../../../../../typings/prosemirror.d.ts" />
-/// <reference path="../../../../../../../../typings/prosemirror-state.d.ts" />
 export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: import("../types").TablePluginState | ((state: import("prosemirror-state").EditorState) => import("../types").TablePluginState)) => import("prosemirror-state").SafeStateField<import("../types").TablePluginState>, createCommand: <A = import("../types").TablePluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command, getPluginState: (state: import("prosemirror-state").EditorState) => import("../types").TablePluginState;

package/dist/types-ts4.5/plugins/table/pm-plugins/sticky-headers/plugin-state.d.ts

@@ -1,5 +1,3 @@
-/// <reference path="../../../../../../../../../typings/prosemirror.d.ts" />
-/// <reference path="../../../../../../../../../typings/prosemirror-state.d.ts" />
 import { StickyPluginAction, StickyPluginState } from './types';
 declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: StickyPluginState | ((state: import("prosemirror-state").EditorState) => StickyPluginState)) => import("prosemirror-state").SafeStateField<StickyPluginState>, createCommand: <A = StickyPluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command;
 export { createPluginState, createCommand };

package/dist/types-ts4.5/plugins/table/pm-plugins/table-resizing/plugin-factory.d.ts

@@ -1,5 +1,3 @@
-/// <reference path="../../../../../../../../../typings/prosemirror.d.ts" />
-/// <reference path="../../../../../../../../../typings/prosemirror-state.d.ts" />
 import { ColumnResizingPluginState } from '../../types';
 export declare const createCommand: <A = import("../../types").ColumnResizingPluginAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command;
 export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: ColumnResizingPluginState | ((state: import("prosemirror-state").EditorState) => ColumnResizingPluginState)) => import("prosemirror-state").SafeStateField<ColumnResizingPluginState>;

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

@@ -6,7 +6,7 @@ import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { TableOptions } from '../../../nodeviews/types';
 export declare function getLayoutSize(tableLayout: TableLayout, containerWidth: number | undefined, options: TableOptions): number;
 export declare function getDefaultLayoutMaxWidth(containerWidth?: number): number;
-export declare function pointsAtCell($pos: ResolvedPos): false | PMNode | null | undefined;
+export declare function pointsAtCell($pos: ResolvedPos): false | PMNode | null;
 export declare function currentColWidth(view: EditorView, cellPos: number, { colspan, colwidth }: CellAttributes): number;
 export declare function domCellAround(target: HTMLElement | null): HTMLElement | null;
 interface getTableMaxWidthProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.8.1",
+  "version": "2.8.3",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,12 +27,12 @@
     "releaseModel": "continuous"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^28.0.0",
-    "@atlaskit/editor-common": "^74.42.0",
+    "@atlaskit/adf-schema": "^28.1.0",
+    "@atlaskit/editor-common": "^74.44.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
-    "@atlaskit/editor-plugin-content-insertion": "^0.0.7",
-    "@atlaskit/editor-prosemirror": "1.0.2",
+    "@atlaskit/editor-plugin-content-insertion": "^0.0.8",
+    "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.6.0",
     "@atlaskit/editor-tables": "^2.3.0",
     "@atlaskit/icon": "^21.12.0",

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

@@ -1,25 +1,20 @@
-import React, {
-  PropsWithChildren,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import type { PropsWithChildren } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import rafSchd from 'raf-schd';
 
-import { TableEventPayload } from '@atlaskit/editor-common/analytics';
+import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
-import {
+import type {
   HandleHeightSizeType,
   HandleResize,
-  ResizerNext,
 } from '@atlaskit/editor-common/resizer';
+import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { resizerHandleShadowClassName } from '@atlaskit/editor-common/styles';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
 import {
@@ -146,6 +141,52 @@ export const TableResizer = ({
     setSnappingEnabled(displayGuideline(defaultGuidelines));
   }, [displayGuideline, editorView, startMeasure]);
 
+  const handleResize = useCallback(
+    (originalState, delta) => {
+      countFrames();
+      const newWidth = originalState.width + delta.width;
+      const pos = getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+
+      previewScaleTable(
+        tableRef,
+        {
+          node,
+          prevNode: node,
+          start: pos + 1,
+          parentWidth: newWidth,
+        },
+        editorView.domAtPos.bind(editorView),
+      );
+
+      updateActiveGuidelines(
+        findClosestSnap(
+          newWidth,
+          defaultGuidelineWidths,
+          defaultGuidelines,
+          TABLE_HIGHLIGHT_GAP,
+        ),
+      );
+
+      updateWidth(newWidth);
+
+      return newWidth;
+    },
+    [
+      editorView,
+      getPos,
+      node,
+      tableRef,
+      updateWidth,
+      updateActiveGuidelines,
+      countFrames,
+    ],
+  );
+
+  const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
+
   const handleResizeStop = useCallback<HandleResize>(
     (originalState, delta) => {
       const newWidth = originalState.width + delta.width;
@@ -199,6 +240,7 @@ export const TableResizer = ({
       // Hide guidelines when resizing stops
       displayGuideline([]);
       updateWidth(newWidth);
+      scheduleResize.cancel();
 
       return newWidth;
     },
@@ -208,58 +250,13 @@ export const TableResizer = ({
       getPos,
       node,
       tableRef,
+      scheduleResize,
       displayGuideline,
       attachAnalyticsEvent,
       endMeasure,
     ],
   );
 
-  const handleResize = useCallback(
-    (originalState, delta) => {
-      countFrames();
-      const newWidth = originalState.width + delta.width;
-      const pos = getPos();
-      if (typeof pos !== 'number') {
-        return;
-      }
-
-      previewScaleTable(
-        tableRef,
-        {
-          node,
-          prevNode: node,
-          start: pos + 1,
-          parentWidth: newWidth,
-        },
-        editorView.domAtPos.bind(editorView),
-      );
-
-      updateActiveGuidelines(
-        findClosestSnap(
-          newWidth,
-          defaultGuidelineWidths,
-          defaultGuidelines,
-          TABLE_HIGHLIGHT_GAP,
-        ),
-      );
-
-      updateWidth(newWidth);
-
-      return newWidth;
-    },
-    [
-      editorView,
-      getPos,
-      node,
-      tableRef,
-      updateWidth,
-      updateActiveGuidelines,
-      countFrames,
-    ],
-  );
-
-  const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
-
   const handleComponent = useMemo(
     () => ({
       left: (