@atlaskit/editor-plugin-table 3.1.1 → 3.1.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 3.1.3
+
+### Patch Changes
+
+- [`5b783c0f957`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5b783c0f957) - Clean up resizing plugin state for table when deleted
+
+## 3.1.2
+
+### Patch Changes
+
+- [`866a47baae3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/866a47baae3) - Moved the cache FF variables from global to plugin state, to avoid other editor instances from overriding them
+
 ## 3.1.1
 
 ### Patch Changes

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

@@ -133,11 +133,17 @@ var TableResizer = function TableResizer(_ref) {
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
       // deleted this table
       if (isResizing.current) {
+        var dispatch = editorView.dispatch,
+          _tr = editorView.state.tr;
         displayGapCursor(true);
         displayGuideline([]);
+        _tr.setMeta(_tableWidth.pluginKey, {
+          resizing: false
+        });
+        dispatch(_tr);
       }
     };
-  }, [displayGuideline, displayGapCursor]);
+  }, [editorView, displayGuideline, displayGapCursor]);
   var handleResizeStart = (0, _react.useCallback)(function () {
     startMeasure();
     isResizing.current = true;

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

@@ -249,9 +249,13 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
   return TableView;
 }(_reactNodeView.default);
 exports.default = TableView;
-var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, options, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi) {
+var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi) {
   var _getPluginState2 = (0, _pluginFactory.getPluginState)(view.state),
-    pluginConfig = _getPluginState2.pluginConfig;
+    pluginConfig = _getPluginState2.pluginConfig,
+    isBreakoutEnabled = _getPluginState2.isBreakoutEnabled,
+    isFullWidthModeEnabled = _getPluginState2.isFullWidthModeEnabled,
+    wasFullWidthModeEnabled = _getPluginState2.wasFullWidthModeEnabled,
+    isTableResizingEnabled = _getPluginState2.isTableResizingEnabled;
   var _getPluginConfig = (0, _createPluginConfig.pluginConfig)(pluginConfig),
     allowColumnResizing = _getPluginConfig.allowColumnResizing;
   var hasIntlContext = true;
@@ -262,7 +266,12 @@ var createTableView = function createTableView(node, view, getPos, portalProvide
     portalProviderAPI: portalProviderAPI,
     eventDispatcher: eventDispatcher,
     getPos: getPos,
-    options: options,
+    options: {
+      isBreakoutEnabled: isBreakoutEnabled,
+      isFullWidthModeEnabled: isFullWidthModeEnabled,
+      wasFullWidthModeEnabled: wasFullWidthModeEnabled,
+      isTableResizingEnabled: isTableResizingEnabled
+    },
     getEditorContainerWidth: getEditorContainerWidth,
     getEditorFeatureFlags: getEditorFeatureFlags,
     hasIntlContext: hasIntlContext,

package/dist/cjs/plugins/table/pm-plugins/main.js

@@ -29,21 +29,16 @@ var _pluginFactory = require("./plugin-factory");
 var _pluginKey = require("./plugin-key");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var isBreakoutEnabled;
-var isFullWidthModeEnabled;
-var wasFullWidthModeEnabled;
-var isTableResizingEnabled;
 var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthModeEnabled, tableResizingEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI, pluginInjectionApi) {
   var _window;
-  isBreakoutEnabled = breakoutEnabled;
-  isFullWidthModeEnabled = fullWidthModeEnabled;
-  wasFullWidthModeEnabled = previousFullWidthModeEnabled;
-  isTableResizingEnabled = tableResizingEnabled;
   var state = (0, _pluginFactory.createPluginState)(dispatch, _objectSpread(_objectSpread({
     pluginConfig: pluginConfig,
     insertColumnButtonIndex: undefined,
     insertRowButtonIndex: undefined,
-    isFullWidthModeEnabled: isFullWidthModeEnabled,
+    isFullWidthModeEnabled: fullWidthModeEnabled,
+    isBreakoutEnabled: breakoutEnabled,
+    wasFullWidthModeEnabled: previousFullWidthModeEnabled,
+    isTableResizingEnabled: tableResizingEnabled,
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
     isHeaderColumnEnabled: false
   }, _defaultTableSelection.defaultTableSelection), {}, {
@@ -243,12 +238,7 @@ var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, porta
       },
       nodeViews: _objectSpread(_objectSpread({}, tableCellNodeview), {}, {
         table: function table(node, view, getPos) {
-          return (0, _table.createTableView)(node, view, getPos, portalProviderAPI, eventDispatcher, {
-            isBreakoutEnabled: isBreakoutEnabled,
-            isFullWidthModeEnabled: isFullWidthModeEnabled,
-            wasFullWidthModeEnabled: wasFullWidthModeEnabled,
-            isTableResizingEnabled: isTableResizingEnabled
-          }, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi);
+          return (0, _table.createTableView)(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi);
         }
       }),
       handleDOMEvents: {

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

@@ -119,11 +119,21 @@ export const TableResizer = ({
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
       // deleted this table
       if (isResizing.current) {
+        const {
+          dispatch,
+          state: {
+            tr
+          }
+        } = editorView;
         displayGapCursor(true);
         displayGuideline([]);
+        tr.setMeta(tableWidthPluginKey, {
+          resizing: false
+        });
+        dispatch(tr);
       }
     };
-  }, [displayGuideline, displayGapCursor]);
+  }, [editorView, displayGuideline, displayGapCursor]);
   const handleResizeStart = useCallback(() => {
     startMeasure();
     isResizing.current = true;

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

@@ -216,9 +216,13 @@ export default class TableView extends ReactNodeView {
     super.destroy();
   }
 }
-export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, options, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi) => {
+export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi) => {
   const {
-    pluginConfig
+    pluginConfig,
+    isBreakoutEnabled,
+    isFullWidthModeEnabled,
+    wasFullWidthModeEnabled,
+    isTableResizingEnabled
   } = getPluginState(view.state);
   const {
     allowColumnResizing
@@ -231,7 +235,12 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
     portalProviderAPI,
     eventDispatcher,
     getPos: getPos,
-    options,
+    options: {
+      isBreakoutEnabled,
+      isFullWidthModeEnabled,
+      wasFullWidthModeEnabled,
+      isTableResizingEnabled
+    },
     getEditorContainerWidth,
     getEditorFeatureFlags,
     hasIntlContext,

package/dist/es2019/plugins/table/pm-plugins/main.js

@@ -19,21 +19,16 @@ import { isHeaderRowRequired } from '../utils/paste';
 import { defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
-let isBreakoutEnabled;
-let isFullWidthModeEnabled;
-let wasFullWidthModeEnabled;
-let isTableResizingEnabled;
 export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthModeEnabled, tableResizingEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI, pluginInjectionApi) => {
   var _window;
-  isBreakoutEnabled = breakoutEnabled;
-  isFullWidthModeEnabled = fullWidthModeEnabled;
-  wasFullWidthModeEnabled = previousFullWidthModeEnabled;
-  isTableResizingEnabled = tableResizingEnabled;
   const state = createPluginState(dispatch, {
     pluginConfig,
     insertColumnButtonIndex: undefined,
     insertRowButtonIndex: undefined,
-    isFullWidthModeEnabled,
+    isFullWidthModeEnabled: fullWidthModeEnabled,
+    isBreakoutEnabled: breakoutEnabled,
+    wasFullWidthModeEnabled: previousFullWidthModeEnabled,
+    isTableResizingEnabled: tableResizingEnabled,
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
     isHeaderColumnEnabled: false,
     ...defaultTableSelection,
@@ -234,12 +229,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       },
       nodeViews: {
         ...tableCellNodeview,
-        table: (node, view, getPos) => createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, {
-          isBreakoutEnabled,
-          isFullWidthModeEnabled,
-          wasFullWidthModeEnabled,
-          isTableResizingEnabled
-        }, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi)
+        table: (node, view, getPos) => createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi)
       },
       handleDOMEvents: {
         focus: handleFocus,

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

@@ -123,11 +123,17 @@ export var TableResizer = function TableResizer(_ref) {
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
       // deleted this table
       if (isResizing.current) {
+        var dispatch = editorView.dispatch,
+          _tr = editorView.state.tr;
         displayGapCursor(true);
         displayGuideline([]);
+        _tr.setMeta(tableWidthPluginKey, {
+          resizing: false
+        });
+        dispatch(_tr);
       }
     };
-  }, [displayGuideline, displayGapCursor]);
+  }, [editorView, displayGuideline, displayGapCursor]);
   var handleResizeStart = useCallback(function () {
     startMeasure();
     isResizing.current = true;

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

@@ -242,9 +242,13 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
   return TableView;
 }(ReactNodeView);
 export { TableView as default };
-export var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, options, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi) {
+export var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi) {
   var _getPluginState2 = getPluginState(view.state),
-    pluginConfig = _getPluginState2.pluginConfig;
+    pluginConfig = _getPluginState2.pluginConfig,
+    isBreakoutEnabled = _getPluginState2.isBreakoutEnabled,
+    isFullWidthModeEnabled = _getPluginState2.isFullWidthModeEnabled,
+    wasFullWidthModeEnabled = _getPluginState2.wasFullWidthModeEnabled,
+    isTableResizingEnabled = _getPluginState2.isTableResizingEnabled;
   var _getPluginConfig = getPluginConfig(pluginConfig),
     allowColumnResizing = _getPluginConfig.allowColumnResizing;
   var hasIntlContext = true;
@@ -255,7 +259,12 @@ export var createTableView = function createTableView(node, view, getPos, portal
     portalProviderAPI: portalProviderAPI,
     eventDispatcher: eventDispatcher,
     getPos: getPos,
-    options: options,
+    options: {
+      isBreakoutEnabled: isBreakoutEnabled,
+      isFullWidthModeEnabled: isFullWidthModeEnabled,
+      wasFullWidthModeEnabled: wasFullWidthModeEnabled,
+      isTableResizingEnabled: isTableResizingEnabled
+    },
     getEditorContainerWidth: getEditorContainerWidth,
     getEditorFeatureFlags: getEditorFeatureFlags,
     hasIntlContext: hasIntlContext,

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

@@ -22,21 +22,16 @@ import { isHeaderRowRequired } from '../utils/paste';
 import { defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
-var isBreakoutEnabled;
-var isFullWidthModeEnabled;
-var wasFullWidthModeEnabled;
-var isTableResizingEnabled;
 export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, fullWidthModeEnabled, tableResizingEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI, pluginInjectionApi) {
   var _window;
-  isBreakoutEnabled = breakoutEnabled;
-  isFullWidthModeEnabled = fullWidthModeEnabled;
-  wasFullWidthModeEnabled = previousFullWidthModeEnabled;
-  isTableResizingEnabled = tableResizingEnabled;
   var state = createPluginState(dispatch, _objectSpread(_objectSpread({
     pluginConfig: pluginConfig,
     insertColumnButtonIndex: undefined,
     insertRowButtonIndex: undefined,
-    isFullWidthModeEnabled: isFullWidthModeEnabled,
+    isFullWidthModeEnabled: fullWidthModeEnabled,
+    isBreakoutEnabled: breakoutEnabled,
+    wasFullWidthModeEnabled: previousFullWidthModeEnabled,
+    isTableResizingEnabled: tableResizingEnabled,
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
     isHeaderColumnEnabled: false
   }, defaultTableSelection), {}, {
@@ -236,12 +231,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
       },
       nodeViews: _objectSpread(_objectSpread({}, tableCellNodeview), {}, {
         table: function table(node, view, getPos) {
-          return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, {
-            isBreakoutEnabled: isBreakoutEnabled,
-            isFullWidthModeEnabled: isFullWidthModeEnabled,
-            wasFullWidthModeEnabled: wasFullWidthModeEnabled,
-            isTableResizingEnabled: isTableResizingEnabled
-          }, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi);
+          return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi);
         }
       }),
       handleDOMEvents: {

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

@@ -6,7 +6,7 @@ import type { GetEditorContainerWidth, GetEditorFeatureFlags, getPosHandler, get
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { PluginInjectionAPI } from '../types';
-import type { Props, TableOptions } from './types';
+import type { Props } from './types';
 type ForwardRef = (node: HTMLElement | null) => void;
 export default class TableView extends ReactNodeView<Props> {
     private table;
@@ -29,5 +29,5 @@ export default class TableView extends ReactNodeView<Props> {
     }): boolean;
     destroy(): void;
 }
-export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, options: TableOptions, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, pluginInjectionApi?: PluginInjectionAPI) => NodeView;
+export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, pluginInjectionApi?: PluginInjectionAPI) => NodeView;
 export {};

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

@@ -70,6 +70,9 @@ export interface TablePluginState {
     isTableCollapsed?: boolean;
     canCollapseTable?: boolean;
     getIntl: () => IntlShape;
+    isBreakoutEnabled?: boolean;
+    wasFullWidthModeEnabled?: boolean;
+    isTableResizingEnabled?: boolean;
 }
 export type TablePluginAction = {
     type: 'SET_EDITOR_FOCUS';

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

@@ -6,7 +6,7 @@ import type { GetEditorContainerWidth, GetEditorFeatureFlags, getPosHandler, get
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { PluginInjectionAPI } from '../types';
-import type { Props, TableOptions } from './types';
+import type { Props } from './types';
 type ForwardRef = (node: HTMLElement | null) => void;
 export default class TableView extends ReactNodeView<Props> {
     private table;
@@ -29,5 +29,5 @@ export default class TableView extends ReactNodeView<Props> {
     }): boolean;
     destroy(): void;
 }
-export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, options: TableOptions, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, pluginInjectionApi?: PluginInjectionAPI) => NodeView;
+export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, pluginInjectionApi?: PluginInjectionAPI) => NodeView;
 export {};

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

@@ -70,6 +70,9 @@ export interface TablePluginState {
     isTableCollapsed?: boolean;
     canCollapseTable?: boolean;
     getIntl: () => IntlShape;
+    isBreakoutEnabled?: boolean;
+    wasFullWidthModeEnabled?: boolean;
+    isTableResizingEnabled?: boolean;
 }
 export type TablePluginAction = {
     type: 'SET_EDITOR_FOCUS';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^29.1.0",
-    "@atlaskit/editor-common": "^75.5.0",
+    "@atlaskit/editor-common": "^75.6.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",

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

@@ -29,6 +29,7 @@ import {
   TableContainer,
 } from '../../../plugins/table/nodeviews/TableContainer';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
+import { pluginKey as tableResizingPluginKey } from '../../../plugins/table/pm-plugins/table-width';
 import type { TablePluginState } from '../../../plugins/table/types';
 
 const mockStartMeasure = jest.fn();
@@ -66,9 +67,14 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
     return createEditor({
       doc,
       editorProps: {
+        appearance: 'full-page',
         allowTables: false,
         dangerouslyAppendPlugins: {
-          __plugins: [tablePlugin({ config: undefined })],
+          __plugins: [
+            tablePlugin({
+              config: { tableResizingEnabled: true, tableOptions: {} },
+            }),
+          ],
         },
         featureFlags,
       },
@@ -228,21 +234,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       fireEvent.mouseMove(container.querySelector('.resizer-handle.right')!);
       fireEvent.mouseUp(container.querySelector('.resizer-handle.right')!);
 
-      expect(analyticsMock).toHaveBeenCalledWith({
-        action: TABLE_ACTION.RESIZED,
-        actionSubject: ACTION_SUBJECT.TABLE,
-        eventType: EVENT_TYPE.TRACK,
-        attributes: {
-          width: undefined, // Can't get the events right to trigger re-resizeable
-          prevWidth: null,
-          nodeSize: 20,
-          totalTableWidth: null,
-          totalRowCount: 1,
-          totalColumnCount: 3,
-        },
-      });
-
-      expect(analyticsMock).toHaveBeenCalledWith({
+      expect(analyticsMock).toHaveBeenNthCalledWith(1, {
         action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
         actionSubject: ACTION_SUBJECT.TABLE,
         eventType: EVENT_TYPE.OPERATIONAL,
@@ -254,7 +246,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
         },
       });
 
-      expect(analyticsMock).toHaveBeenCalledWith({
+      expect(analyticsMock).toHaveBeenNthCalledWith(2, {
         action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
         actionSubject: ACTION_SUBJECT.TABLE,
         eventType: EVENT_TYPE.OPERATIONAL,
@@ -266,6 +258,20 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
         },
       });
 
+      expect(analyticsMock).toHaveBeenNthCalledWith(3, {
+        action: TABLE_ACTION.RESIZED,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          newWidth: 0, // Can't get the events right to trigger re-resizeable
+          prevWidth: 960,
+          nodeSize: 20,
+          totalTableWidth: null,
+          totalRowCount: 1,
+          totalColumnCount: 3,
+        },
+      });
+
       analyticsMock.mockReset();
     });
 
@@ -378,7 +384,13 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
         />,
       );
 
-      return { container, unmount, selectionActionMock, actualGuidelineMock };
+      return {
+        container,
+        unmount,
+        editorView,
+        selectionActionMock,
+        actualGuidelineMock,
+      };
     };
 
     afterEach(() => {
@@ -408,5 +420,18 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       unmount();
       expect(actualGuidelineMock).toHaveBeenCalledWith({ guidelines: [] });
     });
+
+    // this is testing logic inside TableResizer, targeting the clean up in the useEffect
+    it('should call restore resizing plugin state when removed', () => {
+      const { container, unmount, editorView } = buildContainer({});
+
+      fireEvent.mouseDown(container.querySelector('.resizer-handle.right')!);
+      fireEvent.mouseMove(container.querySelector('.resizer-handle.right')!);
+
+      unmount();
+      expect(tableResizingPluginKey.getState(editorView.state)).toStrictEqual({
+        resizing: false,
+      });
+    });
   });
 });

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

@@ -201,11 +201,17 @@ export const TableResizer = ({
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
       // deleted this table
       if (isResizing.current) {
+        const {
+          dispatch,
+          state: { tr },
+        } = editorView;
         displayGapCursor(true);
         displayGuideline([]);
+        tr.setMeta(tableWidthPluginKey, { resizing: false });
+        dispatch(tr);
       }
     };
-  }, [displayGuideline, displayGapCursor]);
+  }, [editorView, displayGuideline, displayGapCursor]);
 
   const handleResizeStart = useCallback(() => {
     startMeasure();

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

@@ -35,7 +35,7 @@ import type { PluginInjectionAPI } from '../types';
 import { isTableNested } from '../utils';
 
 import TableComponent from './TableComponent';
-import type { Props, TableOptions } from './types';
+import type { Props } from './types';
 
 type ForwardRef = (node: HTMLElement | null) => void;
 
@@ -341,12 +341,17 @@ export const createTableView = (
   getPos: getPosHandler,
   portalProviderAPI: PortalProviderAPI,
   eventDispatcher: EventDispatcher,
-  options: TableOptions,
   getEditorContainerWidth: GetEditorContainerWidth,
   getEditorFeatureFlags: GetEditorFeatureFlags,
   pluginInjectionApi?: PluginInjectionAPI,
 ): NodeView => {
-  const { pluginConfig } = getPluginState(view.state);
+  const {
+    pluginConfig,
+    isBreakoutEnabled,
+    isFullWidthModeEnabled,
+    wasFullWidthModeEnabled,
+    isTableResizingEnabled,
+  } = getPluginState(view.state);
   const { allowColumnResizing } = getPluginConfig(pluginConfig);
   const hasIntlContext = true;
 
@@ -357,7 +362,12 @@ export const createTableView = (
     portalProviderAPI,
     eventDispatcher,
     getPos: getPos as getPosHandlerNode,
-    options,
+    options: {
+      isBreakoutEnabled,
+      isFullWidthModeEnabled,
+      wasFullWidthModeEnabled,
+      isTableResizingEnabled,
+    },
     getEditorContainerWidth,
     getEditorFeatureFlags,
     hasIntlContext,

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

@@ -90,11 +90,6 @@ import { defaultTableSelection } from './default-table-selection';
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 
-let isBreakoutEnabled: boolean | undefined;
-let isFullWidthModeEnabled: boolean | undefined;
-let wasFullWidthModeEnabled: boolean | undefined;
-let isTableResizingEnabled: boolean | undefined;
-
 export const createPlugin = (
   dispatchAnalyticsEvent: DispatchAnalyticsEvent,
   dispatch: Dispatch,
@@ -111,16 +106,14 @@ export const createPlugin = (
   editorAnalyticsAPI?: EditorAnalyticsAPI,
   pluginInjectionApi?: PluginInjectionAPI,
 ) => {
-  isBreakoutEnabled = breakoutEnabled;
-  isFullWidthModeEnabled = fullWidthModeEnabled;
-  wasFullWidthModeEnabled = previousFullWidthModeEnabled;
-  isTableResizingEnabled = tableResizingEnabled;
-
   const state = createPluginState(dispatch, {
     pluginConfig,
     insertColumnButtonIndex: undefined,
     insertRowButtonIndex: undefined,
-    isFullWidthModeEnabled,
+    isFullWidthModeEnabled: fullWidthModeEnabled,
+    isBreakoutEnabled: breakoutEnabled,
+    wasFullWidthModeEnabled: previousFullWidthModeEnabled,
+    isTableResizingEnabled: tableResizingEnabled,
     isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
     isHeaderColumnEnabled: false,
     ...defaultTableSelection,
@@ -376,12 +369,6 @@ export const createPlugin = (
             getPos,
             portalProviderAPI,
             eventDispatcher,
-            {
-              isBreakoutEnabled,
-              isFullWidthModeEnabled,
-              wasFullWidthModeEnabled,
-              isTableResizingEnabled,
-            },
             getEditorContainerWidth,
             getEditorFeatureFlags,
             pluginInjectionApi,

package/src/plugins/table/types.ts

@@ -117,6 +117,10 @@ export interface TablePluginState {
   canCollapseTable?: boolean; // enabled/disabled state of collapse option
 
   getIntl: () => IntlShape;
+
+  isBreakoutEnabled?: boolean;
+  wasFullWidthModeEnabled?: boolean;
+  isTableResizingEnabled?: boolean;
 }
 
 export type TablePluginAction =