@atlaskit/editor-plugin-table 2.10.7 → 2.11.0

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

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { fireEvent, render } from '@testing-library/react';
 
-import { TableAttributes } from '@atlaskit/adf-schema';
+import type { TableAttributes } from '@atlaskit/adf-schema';
 import {
   ACTION_SUBJECT,
   EVENT_TYPE,
@@ -11,9 +11,9 @@ import {
 import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   p,
   table,
   td,
@@ -27,7 +27,7 @@ import {
   TableContainer,
 } from '../../../plugins/table/nodeviews/TableContainer';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
-import { TablePluginState } from '../../../plugins/table/types';
+import type { TablePluginState } from '../../../plugins/table/types';
 
 const mockStartMeasure = jest.fn();
 const mockEndMeasure = jest.fn(() => {
@@ -46,6 +46,15 @@ jest.mock('../../../plugins/table/utils/analytics', () => ({
   },
 }));
 
+jest.mock('react-intl-next', () => {
+  return {
+    ...(jest.requireActual('react-intl-next') as any),
+    useIntl: jest.fn().mockReturnValue({
+      formatMessage: (descriptor: any) => descriptor.defaultMessage,
+    }),
+  };
+});
+
 describe('table -> nodeviews -> TableContainer.tsx', () => {
   const createEditor = createEditorFactory<TablePluginState>();
   const editor = (
@@ -57,7 +66,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       editorProps: {
         allowTables: false,
         dangerouslyAppendPlugins: {
-          __plugins: [tablePlugin()],
+          __plugins: [tablePlugin({ config: undefined })],
         },
         featureFlags,
       },
@@ -199,9 +208,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
           }
           pluginInjectionApi={
             {
-              dependencies: {
-                analytics: { actions: { attachAnalyticsEvent: analyticsMock } },
-              },
+              analytics: { actions: { attachAnalyticsEvent: analyticsMock } },
             } as any
           }
         />,
@@ -213,11 +220,11 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
     test('fires when resizing is finished', async () => {
       const { container, analyticsMock } = buildContainer({ layout: 'wide' });
 
-      fireEvent.mouseDown(container.querySelector('.resizer-handle-right')!);
-      fireEvent.mouseMove(container.querySelector('.resizer-handle-right')!);
-      fireEvent.mouseMove(container.querySelector('.resizer-handle-right')!);
-      fireEvent.mouseMove(container.querySelector('.resizer-handle-right')!);
-      fireEvent.mouseUp(container.querySelector('.resizer-handle-right')!);
+      fireEvent.mouseDown(container.querySelector('.resizer-handle.right')!);
+      fireEvent.mouseMove(container.querySelector('.resizer-handle.right')!);
+      fireEvent.mouseMove(container.querySelector('.resizer-handle.right')!);
+      fireEvent.mouseMove(container.querySelector('.resizer-handle.right')!);
+      fireEvent.mouseUp(container.querySelector('.resizer-handle.right')!);
 
       expect(analyticsMock).toHaveBeenCalledWith({
         action: TABLE_ACTION.RESIZED,
@@ -263,11 +270,11 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
     test('calls useMeasureFramerate handlers', async () => {
       const { container } = buildContainer({ layout: 'wide' });
 
-      fireEvent.mouseDown(container.querySelector('.resizer-handle-right')!);
-      fireEvent.mouseMove(container.querySelector('.resizer-handle-right')!, {
+      fireEvent.mouseDown(container.querySelector('.resizer-handle.right')!);
+      fireEvent.mouseMove(container.querySelector('.resizer-handle.right')!, {
         clientX: 100,
       });
-      fireEvent.mouseUp(container.querySelector('.resizer-handle-right')!);
+      fireEvent.mouseUp(container.querySelector('.resizer-handle.right')!);
 
       expect(mockStartMeasure).toHaveBeenCalled();
       expect(mockEndMeasure).toHaveBeenCalled();

package/src/__tests__/unit/pm-plugins/decorations/column-resizing.ts

@@ -91,6 +91,8 @@ describe('tables: column resizing decorations', () => {
           const nextDecorationSet = buildColumnResizingDecorations(
             rowEndIndex,
             columnEndIndex,
+            false,
+            () => ({} as any),
           )({
             decorationSet: DecorationSet.empty,
             tr: state.tr,

package/src/__tests__/unit/ui/FloatingDeleteButton.tsx

@@ -3,12 +3,12 @@ import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl-next';
 
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { getCellsInColumn, selectTable } from '@atlaskit/editor-tables/utils';
 import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   table,
   tdCursor,
   tdEmpty,
@@ -19,13 +19,10 @@ import { selectColumns, selectRows } from '@atlaskit/editor-test-helpers/table';
 
 import tablePlugin from '../../../plugins/table-plugin';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
-import {
-  TableCssClassName,
-  TablePluginState,
-} from '../../../plugins/table/types';
-import FloatingDeleteButton, {
-  Props as FloatingDeleteButtonProps,
-} from '../../../plugins/table/ui/FloatingDeleteButton';
+import type { TablePluginState } from '../../../plugins/table/types';
+import { TableCssClassName } from '../../../plugins/table/types';
+import type { Props as FloatingDeleteButtonProps } from '../../../plugins/table/ui/FloatingDeleteButton';
+import FloatingDeleteButton from '../../../plugins/table/ui/FloatingDeleteButton';
 import * as tableColumnControlsUtils from '../../../plugins/table/utils/column-controls';
 
 describe('Floating Delete Button', () => {
@@ -36,7 +33,9 @@ describe('Floating Delete Button', () => {
       doc,
       editorProps: {
         allowTables: false,
-        dangerouslyAppendPlugins: { __plugins: [tablePlugin()] },
+        dangerouslyAppendPlugins: {
+          __plugins: [tablePlugin({ config: undefined })],
+        },
       },
       pluginKey,
     });

package/src/__tests__/unit/ui/FloatingInsertButton.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { createIntl, IntlProvider } from 'react-intl-next';
 
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import {
   ACTION,
   ACTION_SUBJECT,
@@ -12,11 +12,11 @@ import {
 } from '@atlaskit/editor-common/analytics';
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import * as prosemirrorUtils from '@atlaskit/editor-prosemirror/utils';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   table,
   tdCursor,
   tdEmpty,
@@ -33,11 +33,9 @@ import tablePlugin from '../../../plugins/table-plugin';
 import { setEditorFocus, setTableRef } from '../../../plugins/table/commands';
 import { getPluginState } from '../../../plugins/table/pm-plugins/plugin-factory';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
-import { TablePluginState } from '../../../plugins/table/types';
-import {
-  FloatingInsertButton,
-  Props as FloatingInsertButtonProps,
-} from '../../../plugins/table/ui/FloatingInsertButton';
+import type { TablePluginState } from '../../../plugins/table/types';
+import type { Props as FloatingInsertButtonProps } from '../../../plugins/table/ui/FloatingInsertButton';
+import { FloatingInsertButton } from '../../../plugins/table/ui/FloatingInsertButton';
 
 jest.mock('@atlaskit/editor-prosemirror/utils', () => {
   // Unblock prosemirror bump:
@@ -61,7 +59,9 @@ const editor = (doc: DocBuilder) =>
     doc,
     editorProps: {
       allowTables: false,
-      dangerouslyAppendPlugins: { __plugins: [tablePlugin()] },
+      dangerouslyAppendPlugins: {
+        __plugins: [tablePlugin({ config: undefined })],
+      },
     },
     pluginKey,
   });

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

@@ -1,20 +1,21 @@
 // #region Imports
-import { CellAttributes } from '@atlaskit/adf-schema';
-import { Command } from '@atlaskit/editor-common/types';
+import type { CellAttributes } from '@atlaskit/adf-schema';
+import type { Command } from '@atlaskit/editor-common/types';
 import {
   closestElement,
   isParagraph,
   isTextSelection,
   mapSlice,
 } from '@atlaskit/editor-common/utils';
-import {
+import type {
   Node as PMNode,
   Schema,
   Slice,
 } from '@atlaskit/editor-prosemirror/model';
-import { TextSelection, Transaction } from '@atlaskit/editor-prosemirror/state';
-import { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
@@ -33,7 +34,10 @@ import {
 } from '@atlaskit/editor-tables/utils';
 
 import { getDecorations } from '../pm-plugins/decorations/plugin';
-import { buildColumnResizingDecorations } from '../pm-plugins/decorations/utils';
+import {
+  buildColumnResizingDecorations,
+  clearColumnResizingDecorations,
+} from '../pm-plugins/decorations/utils';
 import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
 import { fixAutoSizedTable } from '../transforms';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
@@ -436,12 +440,14 @@ export const hideInsertColumnOrRowButton = () =>
 export const addResizeHandleDecorations = (
   rowIndex: number,
   columnIndex: number,
+  includeTooltip: boolean,
 ) =>
   createCommand(
     (state) => {
       const tableNode = findTable(state.selection);
       const {
         pluginConfig: { allowColumnResizing },
+        getIntl,
       } = getPluginState(state);
 
       if (!tableNode || !allowColumnResizing) {
@@ -454,18 +460,89 @@ export const addResizeHandleDecorations = (
           decorationSet: buildColumnResizingDecorations(
             rowIndex,
             columnIndex,
+            includeTooltip,
+            getIntl,
+          )({
+            tr: state.tr,
+            decorationSet: getDecorations(state),
+          }),
+          resizeHandleRowIndex: rowIndex,
+          resizeHandleColumnIndex: columnIndex,
+          resizeHandleIncludeTooltip: includeTooltip,
+        },
+      };
+    },
+    (tr: Transaction) => tr.setMeta('addToHistory', false),
+  );
+
+export const updateResizeHandleDecorations = (
+  rowIndex?: number,
+  columnIndex?: number,
+  includeTooltip?: boolean,
+) =>
+  createCommand(
+    (state) => {
+      const tableNode = findTable(state.selection);
+      const {
+        resizeHandleRowIndex,
+        resizeHandleColumnIndex,
+        resizeHandleIncludeTooltip,
+        pluginConfig: { allowColumnResizing },
+        getIntl,
+      } = getPluginState(state);
+
+      if (!tableNode || !allowColumnResizing) {
+        return false;
+      }
+
+      const resolvedRowIndex = rowIndex ?? resizeHandleRowIndex;
+      const resolvedColumnIndex = columnIndex ?? resizeHandleColumnIndex;
+      const resolvedIncludeTooltip =
+        includeTooltip ?? resizeHandleIncludeTooltip;
+
+      if (
+        resolvedRowIndex === undefined ||
+        resolvedColumnIndex === undefined ||
+        resolvedIncludeTooltip === undefined
+      ) {
+        return false;
+      }
+
+      return {
+        type: 'UPDATE_RESIZE_HANDLE_DECORATIONS',
+        data: {
+          decorationSet: buildColumnResizingDecorations(
+            resolvedRowIndex,
+            resolvedColumnIndex,
+            resolvedIncludeTooltip,
+            getIntl,
           )({
             tr: state.tr,
             decorationSet: getDecorations(state),
           }),
           resizeHandleRowIndex: rowIndex,
           resizeHandleColumnIndex: columnIndex,
+          resizeHandleIncludeTooltip: includeTooltip,
         },
       };
     },
     (tr: Transaction) => tr.setMeta('addToHistory', false),
   );
 
+export const removeResizeHandleDecorations = () =>
+  createCommand(
+    (state) => ({
+      type: 'REMOVE_RESIZE_HANDLE_DECORATIONS',
+      data: {
+        decorationSet: clearColumnResizingDecorations()({
+          tr: state.tr,
+          decorationSet: getDecorations(state),
+        }),
+      },
+    }),
+    (tr) => tr.setMeta('addToHistory', false),
+  );
+
 export const autoSizeTable = (
   view: EditorView,
   node: PMNode,

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

@@ -11,14 +11,13 @@ import {
   isLastItemMediaGroup,
   setNodeSelection,
 } from '@atlaskit/editor-common/utils';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import {
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type {
   EditorState,
-  Selection,
-  TextSelection,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
@@ -44,10 +43,8 @@ import {
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
-import {
-  ElementContentRects,
-  RESIZE_HANDLE_AREA_DECORATION_GAP,
-} from './types';
+import type { ElementContentRects } from './types';
+import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
 import {
   getColumnOrRowIndex,
   getMousePositionHorizontalRelativeByElement,
@@ -375,6 +372,7 @@ export const handleMouseMove = (
           return addResizeHandleDecorations(
             rowIndexTarget,
             columnEndIndexTarget,
+            true,
           )(state, dispatch);
         }
       }
@@ -486,13 +484,10 @@ export const whenTableInFocus =
     elementContentRects?: ElementContentRects,
   ) =>
   (view: EditorView, mouseEvent: Event): boolean => {
-    const tableResizePluginState = getResizePluginState(view.state);
-    const tablePluginState = getPluginState(view.state);
-    const isDragging =
-      tableResizePluginState && !!tableResizePluginState.dragging;
-    const hasTableNode = tablePluginState && tablePluginState.tableNode;
-
-    if (!hasTableNode || isDragging) {
+    if (
+      !getPluginState(view.state)?.tableNode ||
+      !!getResizePluginState(view.state)?.dragging
+    ) {
       return false;
     }
 

package/src/plugins/table/index.tsx

@@ -104,15 +104,15 @@ export type TablePlugin = NextEditorPlugin<
   }
 >;
 
-const tablesPlugin: TablePlugin = (options?: TablePluginOptions, api?) => {
+const tablesPlugin: TablePlugin = ({ config: options, api }) => {
   const editorViewRef: Record<'current', EditorView | null> = { current: null };
   const defaultGetEditorContainerWidth: GetEditorContainerWidth = () => {
     const defaultState = {
       width: document?.body?.offsetWidth ?? 500,
     };
-    return api?.dependencies.width.sharedState.currentState() ?? defaultState;
+    return api?.width.sharedState.currentState() ?? defaultState;
   };
-  const editorAnalyticsAPI = api?.dependencies.analytics?.actions;
+  const editorAnalyticsAPI = api?.analytics?.actions;
 
   return {
     name: 'table',
@@ -126,7 +126,7 @@ const tablesPlugin: TablePlugin = (options?: TablePluginOptions, api?) => {
           });
 
           return (
-            api?.dependencies?.contentInsertion?.actions?.insert({
+            api?.contentInsertion?.actions?.insert({
               state,
               dispatch,
               node,
@@ -162,6 +162,7 @@ const tablesPlugin: TablePlugin = (options?: TablePluginOptions, api?) => {
             dispatch,
             portalProviderAPI,
             eventDispatcher,
+            getIntl,
           }) => {
             const {
               fullWidthEnabled,
@@ -179,6 +180,7 @@ const tablesPlugin: TablePlugin = (options?: TablePluginOptions, api?) => {
               pluginConfig(tableOptions),
               defaultGetEditorContainerWidth,
               getEditorFeatureFlags || defaultGetEditorFeatureFlags,
+              getIntl,
               breakoutEnabled,
               fullWidthEnabled,
               tableResizingEnabled,

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

@@ -119,9 +119,9 @@ export const ResizableTableContainer = ({
   const displayGuideline = useCallback(
     (guidelines: GuidelineConfig[]) => {
       return (
-        pluginInjectionApi?.dependencies?.guideline?.actions?.displayGuideline(
-          editorView,
-        )({ guidelines }) ?? false
+        pluginInjectionApi?.guideline?.actions?.displayGuideline(editorView)({
+          guidelines,
+        }) ?? false
       );
     },
     [pluginInjectionApi, editorView],
@@ -129,7 +129,7 @@ export const ResizableTableContainer = ({
 
   const attachAnalyticsEvent = useCallback(
     (payload: TableEventPayload) => {
-      return pluginInjectionApi?.dependencies?.analytics?.actions.attachAnalyticsEvent(
+      return pluginInjectionApi?.analytics?.actions.attachAnalyticsEvent(
         payload,
       );
     },

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

@@ -2,6 +2,7 @@ import type { PropsWithChildren } from 'react';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import rafSchd from 'raf-schd';
+import { defineMessages, useIntl } from 'react-intl-next';
 
 import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
@@ -11,7 +12,6 @@ import type {
   HandleResize,
 } from '@atlaskit/editor-common/resizer';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
-import { resizerHandleShadowClassName } from '@atlaskit/editor-common/styles';
 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';
@@ -53,6 +53,14 @@ interface TableResizerProps {
   ) => ((tr: Transaction) => boolean) | undefined;
 }
 
+const messages = defineMessages({
+  resizeTable: {
+    id: 'fabric.editor.tables.resizeTable',
+    defaultMessage: 'Resize table',
+    description: 'Tooltip displayed on custom table width resize hande',
+  },
+});
+
 const handles = { right: true };
 const tableHandleMarginTop = 12;
 const tableHandlePosition = 14;
@@ -129,6 +137,7 @@ export const TableResizer = ({
 }: PropsWithChildren<TableResizerProps>) => {
   const currentGap = useRef(0);
   const [snappingEnabled, setSnappingEnabled] = useState(false);
+  const { formatMessage } = useIntl();
 
   const resizerMinWidth = getResizerMinWidth(node);
   const handleHeightSize = getResizerHandleHeight(tableRef);
@@ -301,24 +310,6 @@ export const TableResizer = ({
     ],
   );
 
-  const handleComponent = useMemo(
-    () => ({
-      left: (
-        <div
-          className={resizerHandleShadowClassName}
-          style={{ height: 'calc(100% - 24px)' }}
-        />
-      ),
-      right: (
-        <div
-          className={resizerHandleShadowClassName}
-          style={{ height: 'calc(100% - 24px)' }}
-        />
-      ),
-    }),
-    [],
-  );
-
   return (
     <ResizerNext
       enable={handles}
@@ -337,8 +328,9 @@ export const TableResizer = ({
       handlePositioning="adjacent"
       innerPadding={tableHandlePosition}
       isHandleVisible={findTable(editorView.state?.selection)?.pos === getPos()}
-      handleComponent={handleComponent}
       appearance={isInDanger ? 'danger' : undefined}
+      handleHighlight="shadow"
+      handleTooltipContent={formatMessage(messages.resizeTable)}
     >
       {children}
     </ResizerNext>

package/src/plugins/table/pm-plugins/decorations/utils/column-resizing.ts

@@ -1,4 +1,9 @@
-import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import type { IntlShape } from 'react-intl-next';
+
+import type {
+  Decoration,
+  DecorationSet,
+} from '@atlaskit/editor-prosemirror/view';
 
 import { TableDecorations } from '../../../types';
 import {
@@ -7,7 +12,7 @@ import {
 } from '../../../utils/decoration';
 
 import { composeDecorations } from './compose-decorations';
-import { DecorationTransformer } from './types';
+import type { DecorationTransformer } from './types';
 
 const emptyDecorations = [[], []];
 
@@ -18,7 +23,7 @@ const updateColumnResizeHandle =
       tr.doc,
       decorationSet,
       columnResizesDecorations,
-      TableDecorations.COLUMN_RESIZING_HANDLE,
+      TableDecorations.COLUMN_RESIZING_HANDLE_WIDGET,
     );
 
 const updateLastCellElement =
@@ -32,17 +37,39 @@ const updateLastCellElement =
     );
 
 export const buildColumnResizingDecorations =
-  (rowEndIndex: number, columnEndIndex: number): DecorationTransformer =>
+  (
+    rowEndIndex: number,
+    columnEndIndex: number,
+    includeTooltip: boolean,
+    getIntl: () => IntlShape,
+  ): DecorationTransformer =>
   ({ tr, decorationSet }): DecorationSet => {
     const [columnResizesDecorations, lastCellElementsDecorations] =
       columnEndIndex < 0
         ? emptyDecorations
-        : createResizeHandleDecoration(tr, rowEndIndex, {
-            right: columnEndIndex,
-          });
+        : createResizeHandleDecoration(
+            tr,
+            rowEndIndex,
+            {
+              right: columnEndIndex,
+            },
+            includeTooltip,
+            getIntl,
+          );
 
     return composeDecorations([
       updateColumnResizeHandle(columnResizesDecorations),
       updateLastCellElement(lastCellElementsDecorations),
     ])({ decorationSet, tr });
   };
+
+export const clearColumnResizingDecorations =
+  (): DecorationTransformer =>
+  ({ tr, decorationSet }): DecorationSet => {
+    const [columnResizesDecorations, lastCellElementsDecorations] =
+      emptyDecorations;
+    return composeDecorations([
+      updateColumnResizeHandle(columnResizesDecorations),
+      updateLastCellElement(lastCellElementsDecorations),
+    ])({ decorationSet, tr });
+  };

package/src/plugins/table/pm-plugins/decorations/utils/index.ts

@@ -2,5 +2,8 @@ export {
   buildColumnControlsDecorations,
   maybeUpdateColumnControlsSelectedDecoration,
 } from './column-controls';
-export { buildColumnResizingDecorations } from './column-resizing';
+export {
+  buildColumnResizingDecorations,
+  clearColumnResizingDecorations,
+} from './column-resizing';
 export { composeDecorations } from './compose-decorations';

package/src/plugins/table/pm-plugins/main.ts

@@ -1,3 +1,5 @@
+import type { IntlShape } from 'react-intl-next';
+
 import {
   ACTION,
   ACTION_SUBJECT,
@@ -46,6 +48,7 @@ import {
   setTableRef,
 } from '../commands';
 import {
+  removeResizeHandleDecorations,
   transformSliceRemoveCellBackgroundColor,
   transformSliceToAddTableHeaders,
   transformSliceToRemoveColumnsWidths,
@@ -100,6 +103,7 @@ export const createPlugin = (
   pluginConfig: PluginConfig,
   getEditorContainerWidth: GetEditorContainerWidth,
   getEditorFeatureFlags: GetEditorFeatureFlags,
+  getIntl: () => IntlShape,
   breakoutEnabled?: boolean,
   fullWidthModeEnabled?: boolean,
   tableResizingEnabled?: boolean,
@@ -120,6 +124,7 @@ export const createPlugin = (
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
     isHeaderColumnEnabled: false,
     ...defaultTableSelection,
+    getIntl,
   });
 
   let elementContentRects: ElementContentRects = {};
@@ -211,7 +216,6 @@ export const createPlugin = (
           const pluginState = getPluginState(state);
           let tableRef: HTMLTableElement | undefined;
           let tableNode;
-
           if (pluginState.editorHasFocus) {
             const parent = findParentDomRefOfType(
               state.schema.nodes.table,
@@ -255,6 +259,8 @@ export const createPlugin = (
                 addBoldInEmptyHeaderCells(tableCellHeader)(state, dispatch);
               }
             }
+          } else if (pluginState.isResizeHandleWidgetAdded) {
+            removeResizeHandleDecorations()(state, dispatch);
           }
         },
         destroy: () => {