@atlaskit/editor-plugin-table 7.2.3 → 7.3.0

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

@@ -7,7 +7,11 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenLayoutNodes, transformSliceToRemoveOpenMultiBodiedExtension } from '@atlaskit/editor-common/transforms';
 import { browser, closestElement } from '@atlaskit/editor-common/utils';
 import { findParentDomRefOfType, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { TableMap } from '@atlaskit/editor-tables';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../commands';
+import { stopKeyboardColumnResizing } from '../commands/column-resize';
 import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from '../commands/misc';
 import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, whenTableInFocus, withCellTracking } from '../event-handlers';
 import { createTableView } from '../nodeviews/table';
@@ -99,7 +103,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
       var domAtPos = editorView.domAtPos.bind(editorView);
       editorViewRef = editorView;
       return {
-        update: function update(view) {
+        update: function update(view, prevState) {
           var state = view.state,
             dispatch = view.dispatch;
           var selection = state.selection;
@@ -110,6 +114,28 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
             if (parent) {
               tableRef = parent.querySelector('table') || undefined;
             }
+            var tableNode = findTable(state.selection);
+            if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+              // when cursor leaves the table we need to stop column resizing
+              var pluginPrevState = getPluginState(prevState);
+              var isStopKeyboardColumResizing = pluginPrevState.isResizeHandleWidgetAdded && pluginPrevState.isKeyboardResize;
+              if (isStopKeyboardColumResizing) {
+                var isTableNodesDifferent = (pluginPrevState === null || pluginPrevState === void 0 ? void 0 : pluginPrevState.tableNode) !== (tableNode === null || tableNode === void 0 ? void 0 : tableNode.node);
+                if (pluginPrevState !== null && pluginPrevState !== void 0 && pluginPrevState.tableNode && tableNode && isTableNodesDifferent) {
+                  var oldRowsNumber = TableMap.get(pluginPrevState.tableNode).height;
+                  var newRowsNumber = TableMap.get(tableNode.node).height;
+                  if (oldRowsNumber !== newRowsNumber ||
+                  // Add/delete row
+                  tableNode.node.attrs.localId !== pluginPrevState.tableNode.attrs.localId) {
+                    // Jump to another table
+                    stopKeyboardColumnResizing()(state, dispatch);
+                  }
+                } else if (!tableNode) {
+                  // selection outside of table
+                  stopKeyboardColumnResizing()(state, dispatch);
+                }
+              }
+            }
           }
           if (pluginState.tableRef !== tableRef) {
             setTableRef(tableRef)(state, dispatch);
@@ -206,9 +232,17 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         var maybeTr = closestElement(domRef, 'tr');
         return maybeTr ? maybeTr.classList.contains('sticky') : false;
       },
-      handleTextInput: function handleTextInput(_ref3, _from, _to, text) {
-        var state = _ref3.state,
-          dispatch = _ref3.dispatch;
+      handleTextInput: function handleTextInput(view, _from, _to, text) {
+        var state = view.state,
+          dispatch = view.dispatch;
+        if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+          var _getPluginState = getPluginState(state),
+            isKeyboardResize = _getPluginState.isKeyboardResize;
+          if (isKeyboardResize) {
+            stopKeyboardColumnResizing()(state, dispatch);
+            return false;
+          }
+        }
         var tr = replaceSelectedTable(state, text, INPUT_METHOD.KEYBOARD, editorAnalyticsAPI);
         if (tr.selectionSet) {
           dispatch(tr);

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

@@ -5,9 +5,11 @@ import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { stopKeyboardColumnResizing } from '../../commands/column-resize';
 import { updateResizeHandleDecorations } from '../../commands/misc';
 import { updateColumnWidths } from '../../transforms';
 import { getSelectedColumnIndexes } from '../../utils';
+import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
@@ -20,6 +22,8 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
   if (editorDisabled || localResizeHandlePos === null || !pointsAtCell(state.doc.resolve(localResizeHandlePos))) {
     return false;
   }
+  var _getTablePluginState = getTablePluginState(state),
+    isKeyboardResize = _getTablePluginState.isKeyboardResize;
   event.preventDefault();
   var tr = view.state.tr;
   tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
@@ -89,6 +93,8 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     var _getPluginState = getPluginState(state),
       dragging = _getPluginState.dragging,
       resizeHandlePos = _getPluginState.resizeHandlePos;
+    var _getTablePluginState2 = getTablePluginState(state),
+      isTableHovered = _getTablePluginState2.isTableHovered;
     if (resizeHandlePos === null) {
       return stopResizing()(state, dispatch);
     }
@@ -101,9 +107,20 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     var start = $cell.start(-1);
     var table = $cell.node(-1);
 
-    // If we let go in the same place we started, dont need to do anything.
+    // If we let go in the same place we started, don't need to do anything.
     if (dragging && clientX === dragging.startX) {
-      return stopResizing()(state, dispatch);
+      if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+        if (isKeyboardResize || !isTableHovered) {
+          /** if column resize had started via keyboard but continued by mouse
+           *  or mouse pointer leaves the table but mouse button still pressed
+           */
+          return stopKeyboardColumnResizing()(state, dispatch, view);
+        } else {
+          return stopResizing()(state, dispatch);
+        }
+      } else {
+        return stopResizing()(state, dispatch);
+      }
     }
     var tr = state.tr;
     if (dragging) {
@@ -137,7 +154,18 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
           })(tr);
         }
       }
-      return stopResizing(tr)(state, dispatch);
+      if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+        if (isKeyboardResize || !isTableHovered) {
+          /** if column resize had started via keyboard but continued by mouse
+           *  or mouse pointer leaves the table but mouse button still pressed
+           */
+          return stopKeyboardColumnResizing(tr)(state, dispatch, view);
+        } else {
+          return stopResizing(tr)(state, dispatch);
+        }
+      } else {
+        return stopResizing(tr)(state, dispatch);
+      }
     }
   }
   function move(event) {
@@ -147,7 +175,9 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     var _getPluginState2 = getPluginState(state),
       dragging = _getPluginState2.dragging,
       resizeHandlePos = _getPluginState2.resizeHandlePos;
-    if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos))) {
+    var _getTablePluginState3 = getTablePluginState(state),
+      isTableHovered = _getTablePluginState3.isTableHovered;
+    if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos)) || !isTableHovered && getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       return finish(event);
     }
     var $cell = state.doc.resolve(resizeHandlePos);

package/dist/esm/pm-plugins/table-resizing/plugin.js

@@ -1,7 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import classnames from 'classnames';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName } from '../../types';
+import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { setResizeHandlePos } from './commands';
 import { handleMouseDown } from './event-handlers';
 import { createPluginState, getPluginState } from './plugin-factory';
@@ -34,7 +36,19 @@ export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorF
           getPluginState(state).resizeHandlePos || getResizeCellPos(view, event);
           var _getPluginState = getPluginState(state),
             dragging = _getPluginState.dragging;
-          if (resizeHandlePos !== null && !dragging) {
+          var isColumnKeyboardResizeStarted = false;
+          if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+            /*
+              We need to start listening mouse events if column resize started from keyboard.
+              This will allow continue resizing via mouse
+            */
+            var _getTablePluginState = getTablePluginState(state),
+              isKeyboardResize = _getTablePluginState.isKeyboardResize;
+            if (isKeyboardResize) {
+              isColumnKeyboardResizeStarted = isKeyboardResize;
+            }
+          }
+          if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
             if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI)) {
               var _state = view.state,
                 _dispatch = view.dispatch;

package/dist/esm/reducer.js

@@ -57,8 +57,9 @@ export default (function (pluginState, action) {
         resizeHandleColumnIndex: undefined,
         resizeHandleRowIndex: undefined
       });
+    case 'START_KEYBOARD_COLUMN_RESIZE':
     case 'ADD_RESIZE_HANDLE_DECORATIONS':
-      if (action.data.resizeHandleColumnIndex === pluginState.resizeHandleColumnIndex && action.data.resizeHandleRowIndex === pluginState.resizeHandleRowIndex && action.data.resizeHandleIncludeTooltip === pluginState.resizeHandleIncludeTooltip) {
+      if (action.data.resizeHandleColumnIndex === pluginState.resizeHandleColumnIndex && action.data.resizeHandleRowIndex === pluginState.resizeHandleRowIndex && action.data.resizeHandleIncludeTooltip === pluginState.resizeHandleIncludeTooltip && action.data.isKeyboardResize === pluginState.isKeyboardResize) {
         return pluginState;
       }
       return _objectSpread(_objectSpread(_objectSpread({}, pluginState), action.data), {}, {
@@ -77,6 +78,7 @@ export default (function (pluginState, action) {
         resizeHandleRowIndex: resizeHandleRowIndex !== null && resizeHandleRowIndex !== void 0 ? resizeHandleRowIndex : pluginState.resizeHandleRowIndex,
         resizeHandleIncludeTooltip: resizeHandleIncludeTooltip !== null && resizeHandleIncludeTooltip !== void 0 ? resizeHandleIncludeTooltip : pluginState.resizeHandleIncludeTooltip
       });
+    case 'STOP_KEYBOARD_COLUMN_RESIZE':
     case 'REMOVE_RESIZE_HANDLE_DECORATIONS':
       if (!pluginState.isResizeHandleWidgetAdded) {
         return pluginState;
@@ -84,7 +86,8 @@ export default (function (pluginState, action) {
       return _objectSpread(_objectSpread(_objectSpread({}, pluginState), action.data), {}, {
         resizeHandleColumnIndex: undefined,
         resizeHandleRowIndex: undefined,
-        isResizeHandleWidgetAdded: false
+        isResizeHandleWidgetAdded: false,
+        isKeyboardResize: undefined
       });
     case 'SET_TABLE_REF':
     case 'HOVER_ROWS':

package/dist/types/commands/column-resize.d.ts

@@ -1,5 +1,7 @@
 import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Direction } from '@atlaskit/editor-tables/types';
 export declare const initiateKeyboardColumnResizing: Command;
 export declare const activateNextResizeArea: (direction: Direction) => Command;
 export declare const changeColumnWidthByStep: (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth) => Command;
+export declare const stopKeyboardColumnResizing: (originalTr?: Transaction) => Command;

package/dist/types/commands/misc.d.ts

@@ -26,7 +26,7 @@ export declare const selectRows: (rowIndexes: number[]) => Command;
 export declare const showInsertColumnButton: (columnIndex: number) => Command;
 export declare const showInsertRowButton: (rowIndex: number) => Command;
 export declare const hideInsertColumnOrRowButton: () => Command;
-export declare const addResizeHandleDecorations: (rowIndex: number, columnIndex: number, includeTooltip: boolean) => Command;
+export declare const addResizeHandleDecorations: (rowIndex: number, columnIndex: number, includeTooltip: boolean, isKeyboardResize?: boolean) => Command;
 export declare const updateResizeHandleDecorations: (rowIndex?: number, columnIndex?: number, includeTooltip?: boolean) => Command;
 export declare const removeResizeHandleDecorations: () => Command;
 export declare const autoSizeTable: (view: EditorView, node: PMNode, table: HTMLTableElement, basePos: number | undefined, opts: {

package/dist/types/types.d.ts

@@ -74,6 +74,7 @@ export interface TablePluginState {
     resizeHandleRowIndex?: number;
     resizeHandleColumnIndex?: number;
     resizeHandleIncludeTooltip?: boolean;
+    isKeyboardResize?: boolean;
     isTableCollapsed?: boolean;
     canCollapseTable?: boolean;
     getIntl: () => IntlShape;
@@ -134,6 +135,15 @@ export type TablePluginAction = {
         hoveredColumns: number[];
         isInDanger?: boolean;
     };
+} | {
+    type: 'START_KEYBOARD_COLUMN_RESIZE';
+    data: {
+        decorationSet: DecorationSet;
+        resizeHandleRowIndex: number;
+        resizeHandleColumnIndex: number;
+        resizeHandleIncludeTooltip: boolean;
+        isKeyboardResize?: boolean;
+    };
 } | {
     type: 'ADD_RESIZE_HANDLE_DECORATIONS';
     data: {
@@ -141,6 +151,7 @@ export type TablePluginAction = {
         resizeHandleRowIndex: number;
         resizeHandleColumnIndex: number;
         resizeHandleIncludeTooltip: boolean;
+        isKeyboardResize?: boolean;
     };
 } | {
     type: 'UPDATE_RESIZE_HANDLE_DECORATIONS';
@@ -155,6 +166,11 @@ export type TablePluginAction = {
     data: {
         decorationSet: DecorationSet;
     };
+} | {
+    type: 'STOP_KEYBOARD_COLUMN_RESIZE';
+    data: {
+        decorationSet: DecorationSet;
+    };
 } | {
     type: 'CLEAR_HOVER_SELECTION';
     data: {

package/dist/types-ts4.5/commands/column-resize.d.ts

@@ -1,5 +1,7 @@
 import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Direction } from '@atlaskit/editor-tables/types';
 export declare const initiateKeyboardColumnResizing: Command;
 export declare const activateNextResizeArea: (direction: Direction) => Command;
 export declare const changeColumnWidthByStep: (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth) => Command;
+export declare const stopKeyboardColumnResizing: (originalTr?: Transaction) => Command;

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

@@ -26,7 +26,7 @@ export declare const selectRows: (rowIndexes: number[]) => Command;
 export declare const showInsertColumnButton: (columnIndex: number) => Command;
 export declare const showInsertRowButton: (rowIndex: number) => Command;
 export declare const hideInsertColumnOrRowButton: () => Command;
-export declare const addResizeHandleDecorations: (rowIndex: number, columnIndex: number, includeTooltip: boolean) => Command;
+export declare const addResizeHandleDecorations: (rowIndex: number, columnIndex: number, includeTooltip: boolean, isKeyboardResize?: boolean) => Command;
 export declare const updateResizeHandleDecorations: (rowIndex?: number, columnIndex?: number, includeTooltip?: boolean) => Command;
 export declare const removeResizeHandleDecorations: () => Command;
 export declare const autoSizeTable: (view: EditorView, node: PMNode, table: HTMLTableElement, basePos: number | undefined, opts: {

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

@@ -74,6 +74,7 @@ export interface TablePluginState {
     resizeHandleRowIndex?: number;
     resizeHandleColumnIndex?: number;
     resizeHandleIncludeTooltip?: boolean;
+    isKeyboardResize?: boolean;
     isTableCollapsed?: boolean;
     canCollapseTable?: boolean;
     getIntl: () => IntlShape;
@@ -134,6 +135,15 @@ export type TablePluginAction = {
         hoveredColumns: number[];
         isInDanger?: boolean;
     };
+} | {
+    type: 'START_KEYBOARD_COLUMN_RESIZE';
+    data: {
+        decorationSet: DecorationSet;
+        resizeHandleRowIndex: number;
+        resizeHandleColumnIndex: number;
+        resizeHandleIncludeTooltip: boolean;
+        isKeyboardResize?: boolean;
+    };
 } | {
     type: 'ADD_RESIZE_HANDLE_DECORATIONS';
     data: {
@@ -141,6 +151,7 @@ export type TablePluginAction = {
         resizeHandleRowIndex: number;
         resizeHandleColumnIndex: number;
         resizeHandleIncludeTooltip: boolean;
+        isKeyboardResize?: boolean;
     };
 } | {
     type: 'UPDATE_RESIZE_HANDLE_DECORATIONS';
@@ -155,6 +166,11 @@ export type TablePluginAction = {
     data: {
         decorationSet: DecorationSet;
     };
+} | {
+    type: 'STOP_KEYBOARD_COLUMN_RESIZE';
+    data: {
+        decorationSet: DecorationSet;
+    };
 } | {
     type: 'CLEAR_HOVER_SELECTION';
     data: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.2.3",
+  "version": "7.3.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
     "@atlaskit/primitives": "^2.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/toggle": "^13.0.0",
-    "@atlaskit/tokens": "^1.35.0",
+    "@atlaskit/tokens": "^1.36.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

package/src/commands/column-resize.ts

@@ -3,6 +3,7 @@ import type {
   Command,
   GetEditorContainerWidth,
 } from '@atlaskit/editor-common/types';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { TableMap } from '@atlaskit/editor-tables';
 import type { CellAttributes, Direction } from '@atlaskit/editor-tables/types';
 import {
@@ -15,10 +16,17 @@ import {
 } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
+import { getDecorations } from '../pm-plugins/decorations/plugin';
+import {
+  buildColumnResizingDecorations,
+  clearColumnResizingDecorations,
+} from '../pm-plugins/decorations/utils';
+import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
 import {
   getPluginState as getTableResizingPluginState,
   createCommand as tableResizingPluginCreateCommand,
 } from '../pm-plugins/table-resizing/plugin-factory';
+import { pluginKey as tableResizingPK } from '../pm-plugins/table-resizing/plugin-key';
 import {
   currentColWidth,
   getResizeState,
@@ -27,9 +35,23 @@ import {
   updateControls,
 } from '../pm-plugins/table-resizing/utils';
 import { updateColumnWidths } from '../transforms';
-import { getSelectedColumnIndexes } from '../utils';
+import { TableDecorations } from '../types';
+import type { TablePluginAction } from '../types';
+import {
+  createColumnLineResize,
+  getSelectedColumnIndexes,
+  updateDecorations,
+} from '../utils';
 
-import { addResizeHandleDecorations, showResizeHandleLine } from './index';
+const getTablePluginCommand = (
+  actionPayload: TablePluginAction,
+  originalTr?: Transaction,
+): Command => {
+  return createCommand(
+    () => actionPayload,
+    (tr) => (originalTr || tr).setMeta('addToHistory', false),
+  );
+};
 
 const updateResizeHandleAndStatePosition =
   (
@@ -38,19 +60,64 @@ const updateResizeHandleAndStatePosition =
     nextResizeHandlePos: number,
   ): Command =>
   (state, dispatch) => {
-    addResizeHandleDecorations(rowIndex, columnIndex, true)(state, dispatch);
-    // Currently only 'right' position is used in showResizeHandleLine
-    showResizeHandleLine({
-      left: 0,
-      right: columnIndex,
-    })(state, dispatch);
+    let customTr = state.tr;
+    const {
+      pluginConfig: { allowColumnResizing },
+      getIntl,
+    } = getPluginState(state);
 
-    tableResizingPluginCreateCommand({
+    const fakeDispatch = (tr: Transaction) => {
+      customTr = tr;
+    };
+
+    if (!allowColumnResizing) {
+      return false;
+    }
+
+    const decorationsWithWidget = buildColumnResizingDecorations(
+      rowIndex,
+      columnIndex,
+      true,
+      getIntl,
+    )({
+      tr: customTr,
+      decorationSet: getDecorations(state),
+    });
+
+    const decorationsWithWidgetAndHandle = updateDecorations(
+      customTr.doc,
+      decorationsWithWidget,
+      createColumnLineResize(state.selection, {
+        right: columnIndex,
+      }),
+      TableDecorations.COLUMN_RESIZING_HANDLE_LINE,
+    );
+
+    getTablePluginCommand(
+      {
+        type: 'START_KEYBOARD_COLUMN_RESIZE',
+        data: {
+          resizeHandleRowIndex: rowIndex,
+          resizeHandleColumnIndex: columnIndex,
+          resizeHandleIncludeTooltip: true,
+          isKeyboardResize: true,
+          decorationSet: decorationsWithWidgetAndHandle,
+        },
+      },
+      customTr,
+    )(state, fakeDispatch);
+
+    customTr.setMeta(tableResizingPK, {
       type: 'SET_RESIZE_HANDLE_POSITION',
       data: {
         resizeHandlePos: nextResizeHandlePos,
       },
-    })(state, dispatch);
+    });
+
+    if (dispatch) {
+      dispatch(customTr);
+      return true;
+    }
     return false;
   };
 
@@ -69,39 +136,24 @@ export const initiateKeyboardColumnResizing: Command = (
   const cell = findCellClosestToPos(selection.$from);
 
   if (selectionRect && cell && view) {
-    const cellAttrs = cell.node.attrs;
-    const width = currentColWidth(view, cell.pos, cellAttrs as CellAttributes);
-
-    updateResizeHandleAndStatePosition(
+    return updateResizeHandleAndStatePosition(
       selectionRect.top,
       selectionRect.right,
       cell.pos,
     )(state, dispatch);
-
-    tableResizingPluginCreateCommand({
-      type: 'SET_DRAGGING',
-      data: {
-        dragging: {
-          startX: 0,
-          startWidth: width,
-        },
-      },
-    })(state, dispatch);
-    return true;
   }
   return false;
 };
 
 export const activateNextResizeArea =
   (direction: Direction): Command =>
-  (state, dispatch) => {
+  (state, dispatch, view) => {
     if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       return false;
     }
-    const { resizeHandlePos, dragging } =
-      getTableResizingPluginState(state) || {};
+    const { resizeHandlePos } = getTableResizingPluginState(state) || {};
     // If No resizing has initiated, skip to regular handler
-    if (!resizeHandlePos || !dragging) {
+    if (!resizeHandlePos) {
       return false;
     }
 
@@ -135,11 +187,11 @@ export const activateNextResizeArea =
       // we are somewhere in between the side columns of the table
       const offset = $nextCell.pos - $nextCell.start(-1);
       const rectForNextCell = tableMap.findCell(offset);
-      updateResizeHandleAndStatePosition(
+      return updateResizeHandleAndStatePosition(
         rectForNextCell.top,
         rectForNextCell.right,
         $nextCell.pos,
-      )(state, dispatch);
+      )(state, dispatch, view);
     } else {
       // current position is in the one of the side columns of the table(left or right)
       if (currentCellRect.left === 0) {
@@ -151,25 +203,25 @@ export const activateNextResizeArea =
           ) + closestTable.start;
         const $lastCell = state.doc.resolve(lastCellInCurrentRow);
 
-        updateResizeHandleAndStatePosition(
+        return updateResizeHandleAndStatePosition(
           currentCellRect.top,
           tableMap.width,
           $lastCell.pos,
-        )(state, dispatch);
+        )(state, dispatch, view);
       } else if (tableMap.width === currentCellRect.right) {
         const firsCellInCurrentRow =
           tableMap.positionAt(currentCellRect.top, 0, tableNode) +
           closestTable.start;
         const $nextCell = state.doc.resolve(firsCellInCurrentRow);
 
-        updateResizeHandleAndStatePosition(
+        return updateResizeHandleAndStatePosition(
           currentCellRect.top,
           1,
           $nextCell.pos,
         )(state, dispatch);
       }
     }
-    return true;
+    return false;
   };
 
 export const changeColumnWidthByStep =
@@ -178,11 +230,16 @@ export const changeColumnWidthByStep =
     getEditorContainerWidth: GetEditorContainerWidth,
   ): Command =>
   (state, dispatch, view) => {
+    let customTr = state.tr;
+    const fakeDispatch = (tr: Transaction) => {
+      customTr = tr;
+    };
     if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       return false;
     }
-    const { resizeHandlePos, dragging } = getTableResizingPluginState(state);
-    if (!view || !resizeHandlePos || !dragging) {
+    const { resizeHandlePos } = getTableResizingPluginState(state);
+    const cell = findCellClosestToPos(state.selection.$from);
+    if (!view || !resizeHandlePos || !cell) {
       return false;
     }
 
@@ -205,6 +262,18 @@ export const changeColumnWidthByStep =
       dom = dom.closest('table') as HTMLTableElement;
     }
 
+    const cellAttrs = cell?.node.attrs;
+    const width = currentColWidth(view, cell?.pos, cellAttrs as CellAttributes);
+    tableResizingPluginCreateCommand({
+      type: 'SET_DRAGGING',
+      data: {
+        dragging: {
+          startX: 0,
+          startWidth: width,
+        },
+      },
+    })(state, fakeDispatch);
+
     const maxSize = getTableMaxWidth({
       table: originalTable,
       tableStart: tableStartPosition,
@@ -240,15 +309,61 @@ export const changeColumnWidthByStep =
       resizingSelectedColumns ? selectedColumns : undefined,
     );
 
-    const tr = updateColumnWidths(
+    customTr = updateColumnWidths(
       newResizeState,
       originalTable,
       tableStartPosition,
-    )(state.tr);
+    )(customTr);
 
     if (dispatch) {
-      dispatch(tr);
+      dispatch(customTr);
     }
 
     return true;
   };
+
+export const stopKeyboardColumnResizing =
+  (originalTr?: Transaction): Command =>
+  (state, dispatch) => {
+    if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+      return false;
+    }
+    let customTr = originalTr || state.tr;
+    const fakeDispatch = (tr: Transaction) => {
+      customTr = tr;
+    };
+
+    const decorationWithoutWidget = clearColumnResizingDecorations()({
+      tr: customTr,
+      decorationSet: getDecorations(state),
+    });
+
+    const decorationWithoutWidgetAndHandle = updateDecorations(
+      customTr.doc,
+      decorationWithoutWidget,
+      [],
+      TableDecorations.COLUMN_RESIZING_HANDLE_LINE,
+    );
+    getTablePluginCommand(
+      {
+        type: 'STOP_KEYBOARD_COLUMN_RESIZE',
+        data: {
+          decorationSet: decorationWithoutWidgetAndHandle,
+        },
+      },
+      customTr,
+    )(state, fakeDispatch);
+
+    tableResizingPluginCreateCommand(
+      {
+        type: 'STOP_RESIZING',
+      },
+      () => customTr.setMeta('scrollIntoView', false),
+    )(state, fakeDispatch);
+
+    if (dispatch) {
+      dispatch(customTr);
+      return true;
+    }
+    return false;
+  };