@atlaskit/editor-plugin-table 2.10.1 → 2.10.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-table
 
+## 2.10.2
+
+### Patch Changes
+
+- [`31031f52f80`](https://bitbucket.org/atlassian/atlassian-frontend/commits/31031f52f80) - Fix table shift when two users resize the same table in collab mode
+- Updated dependencies
+
 ## 2.10.1
 
 ### Patch Changes

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

@@ -320,7 +320,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         view = _this$props8.view,
         getNode = _this$props8.getNode,
         isMediaFullscreen = _this$props8.isMediaFullscreen,
-        allowColumnResizing = _this$props8.allowColumnResizing;
+        allowColumnResizing = _this$props8.allowColumnResizing,
+        isResizing = _this$props8.isResizing,
+        options = _this$props8.options;
       var _getPluginState = (0, _pluginFactory.getPluginState)(view.state),
         isInDanger = _getPluginState.isInDanger;
       var table = (0, _utils2.findTable)(view.state.selection);
@@ -347,7 +349,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         var previousTable = this.node;
         if ((0, _utils4.tablesHaveDifferentColumnWidths)(currentTable, previousTable) || (0, _utils4.tablesHaveDifferentNoOfColumns)(currentTable, previousTable)) {
           var _view = this.props.view;
-          (0, _utils3.insertColgroupFromNode)(this.table, currentTable);
+          var shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || (0, _utils4.tablesHaveDifferentNoOfColumns)(currentTable, previousTable) && isResizing;
+          if (shouldRecreateResizeCols) {
+            (0, _utils3.insertColgroupFromNode)(this.table, currentTable);
+          }
           (0, _dom.updateControls)()(_view.state);
         }
         this.handleTableResizingDebounced();
@@ -421,7 +426,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isBreakoutEnabled: options === null || options === void 0 ? void 0 : options.isBreakoutEnabled,
         isNested: isNested,
         pluginInjectionApi: pluginInjectionApi,
-        isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+        isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
+        isResizing: isResizing
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"

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

@@ -50,9 +50,11 @@ var ResizableTableContainer = function ResizableTableContainer(_ref2) {
     editorView = _ref2.editorView,
     getPos = _ref2.getPos,
     tableRef = _ref2.tableRef,
+    isResizing = _ref2.isResizing,
     pluginInjectionApi = _ref2.pluginInjectionApi;
   var containerRef = (0, _react.useRef)(null);
   var marginLeftRef = (0, _react.useRef)(0);
+  var tableWidthRef = (0, _react.useRef)(_editorSharedStyles.akEditorDefaultLayoutWidth);
   var updateWidth = (0, _react.useCallback)(function (width) {
     if (!containerRef.current) {
       return;
@@ -87,12 +89,15 @@ var ResizableTableContainer = function ResizableTableContainer(_ref2) {
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   var responsiveContainerWidth = containerWidth - 76;
   var width = Math.min(tableWidth, responsiveContainerWidth);
-  marginLeftRef.current = getMarginLeft(lineLength, width);
+  if (!isResizing) {
+    tableWidthRef.current = width;
+    marginLeftRef.current = getMarginLeft(lineLength, width);
+  }
   var maxResizerWidth = Math.min(responsiveContainerWidth, _utils.TABLE_MAX_WIDTH);
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       marginLeft: marginLeftRef.current,
-      width: width
+      width: tableWidthRef.current
     },
     className: _types.TableCssClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
@@ -126,6 +131,7 @@ var TableContainer = function TableContainer(_ref3) {
     getPos = _ref3.getPos,
     tableRef = _ref3.tableRef,
     isNested = _ref3.isNested,
+    isResizing = _ref3.isResizing,
     pluginInjectionApi = _ref3.pluginInjectionApi;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/_react.default.createElement(ResizableTableContainer, {
@@ -136,6 +142,7 @@ var TableContainer = function TableContainer(_ref3) {
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,
+      isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi
     }, children);
   }

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

@@ -96,7 +96,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "setDomAttrs",
     value: function setDomAttrs(node) {
-      var _this2 = this;
+      var _this2 = this,
+        _tableWidthPluginKey$;
       if (!this.table) {
         return;
       }
@@ -107,7 +108,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
 
       // handle inline style when table been resized
       var tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());
-      if (tableInlineWidth) {
+      var isTableResizing = (_tableWidthPluginKey$ = _tableWidth.pluginKey.getState(this.view.state)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
+      if (!isTableResizing && tableInlineWidth) {
         handleInlineTableWidth(this.table, tableInlineWidth);
       }
     }

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

@@ -312,7 +312,9 @@ class TableComponent extends React.Component {
       view,
       getNode,
       isMediaFullscreen,
-      allowColumnResizing
+      allowColumnResizing,
+      isResizing,
+      options
     } = this.props;
     const {
       isInDanger
@@ -343,7 +345,10 @@ class TableComponent extends React.Component {
         const {
           view
         } = this.props;
-        recreateResizeColsByNode(this.table, currentTable);
+        const shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || tablesHaveDifferentNoOfColumns(currentTable, previousTable) && isResizing;
+        if (shouldRecreateResizeCols) {
+          recreateResizeColsByNode(this.table, currentTable);
+        }
         updateControls()(view.state);
       }
       this.handleTableResizingDebounced();
@@ -418,7 +423,8 @@ class TableComponent extends React.Component {
       isBreakoutEnabled: options === null || options === void 0 ? void 0 : options.isBreakoutEnabled,
       isNested: isNested,
       pluginInjectionApi: pluginInjectionApi,
-      isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+      isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
+      isResizing: isResizing
     }, /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SENTINEL_TOP,
       "data-testid": "sticky-sentinel-top"

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

@@ -2,7 +2,7 @@ import React, { forwardRef, useCallback, useRef } from 'react';
 import classNames from 'classnames';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
-import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
@@ -40,10 +40,12 @@ export const ResizableTableContainer = ({
   editorView,
   getPos,
   tableRef,
+  isResizing,
   pluginInjectionApi
 }) => {
   const containerRef = useRef(null);
   const marginLeftRef = useRef(0);
+  const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   const updateWidth = useCallback(width => {
     if (!containerRef.current) {
       return;
@@ -78,12 +80,15 @@ export const ResizableTableContainer = ({
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   const responsiveContainerWidth = containerWidth - 76;
   const width = Math.min(tableWidth, responsiveContainerWidth);
-  marginLeftRef.current = getMarginLeft(lineLength, width);
+  if (!isResizing) {
+    tableWidthRef.current = width;
+    marginLeftRef.current = getMarginLeft(lineLength, width);
+  }
   const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       marginLeft: marginLeftRef.current,
-      width
+      width: tableWidthRef.current
     },
     className: ClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
@@ -117,6 +122,7 @@ export const TableContainer = ({
   getPos,
   tableRef,
   isNested,
+  isResizing,
   pluginInjectionApi
 }) => {
   if (isTableResizingEnabled && !isNested) {
@@ -128,6 +134,7 @@ export const TableContainer = ({
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,
+      isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi
     }, children);
   }

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

@@ -69,6 +69,7 @@ export default class TableView extends ReactNodeView {
     return rendered;
   }
   setDomAttrs(node) {
+    var _tableWidthPluginKey$;
     if (!this.table) {
       return;
     }
@@ -79,7 +80,8 @@ export default class TableView extends ReactNodeView {
 
     // handle inline style when table been resized
     const tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());
-    if (tableInlineWidth) {
+    const isTableResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(this.view.state)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
+    if (!isTableResizing && tableInlineWidth) {
       handleInlineTableWidth(this.table, tableInlineWidth);
     }
   }

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

@@ -313,7 +313,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         view = _this$props8.view,
         getNode = _this$props8.getNode,
         isMediaFullscreen = _this$props8.isMediaFullscreen,
-        allowColumnResizing = _this$props8.allowColumnResizing;
+        allowColumnResizing = _this$props8.allowColumnResizing,
+        isResizing = _this$props8.isResizing,
+        options = _this$props8.options;
       var _getPluginState = getPluginState(view.state),
         isInDanger = _getPluginState.isInDanger;
       var table = findTable(view.state.selection);
@@ -340,7 +342,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         var previousTable = this.node;
         if (tablesHaveDifferentColumnWidths(currentTable, previousTable) || tablesHaveDifferentNoOfColumns(currentTable, previousTable)) {
           var _view = this.props.view;
-          recreateResizeColsByNode(this.table, currentTable);
+          var shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || tablesHaveDifferentNoOfColumns(currentTable, previousTable) && isResizing;
+          if (shouldRecreateResizeCols) {
+            recreateResizeColsByNode(this.table, currentTable);
+          }
           updateControls()(_view.state);
         }
         this.handleTableResizingDebounced();
@@ -414,7 +419,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isBreakoutEnabled: options === null || options === void 0 ? void 0 : options.isBreakoutEnabled,
         isNested: isNested,
         pluginInjectionApi: pluginInjectionApi,
-        isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+        isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
+        isResizing: isResizing
       }, /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"

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

@@ -2,7 +2,7 @@ import React, { forwardRef, useCallback, useRef } from 'react';
 import classNames from 'classnames';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
-import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
@@ -39,9 +39,11 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
     editorView = _ref2.editorView,
     getPos = _ref2.getPos,
     tableRef = _ref2.tableRef,
+    isResizing = _ref2.isResizing,
     pluginInjectionApi = _ref2.pluginInjectionApi;
   var containerRef = useRef(null);
   var marginLeftRef = useRef(0);
+  var tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   var updateWidth = useCallback(function (width) {
     if (!containerRef.current) {
       return;
@@ -76,12 +78,15 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   var responsiveContainerWidth = containerWidth - 76;
   var width = Math.min(tableWidth, responsiveContainerWidth);
-  marginLeftRef.current = getMarginLeft(lineLength, width);
+  if (!isResizing) {
+    tableWidthRef.current = width;
+    marginLeftRef.current = getMarginLeft(lineLength, width);
+  }
   var maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       marginLeft: marginLeftRef.current,
-      width: width
+      width: tableWidthRef.current
     },
     className: ClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
@@ -114,6 +119,7 @@ export var TableContainer = function TableContainer(_ref3) {
     getPos = _ref3.getPos,
     tableRef = _ref3.tableRef,
     isNested = _ref3.isNested,
+    isResizing = _ref3.isResizing,
     pluginInjectionApi = _ref3.pluginInjectionApi;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer, {
@@ -124,6 +130,7 @@ export var TableContainer = function TableContainer(_ref3) {
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,
+      isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi
     }, children);
   }

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

@@ -89,7 +89,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "setDomAttrs",
     value: function setDomAttrs(node) {
-      var _this2 = this;
+      var _this2 = this,
+        _tableWidthPluginKey$;
       if (!this.table) {
         return;
       }
@@ -100,7 +101,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
 
       // handle inline style when table been resized
       var tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());
-      if (tableInlineWidth) {
+      var isTableResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(this.view.state)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
+      if (!isTableResizing && tableInlineWidth) {
         handleInlineTableWidth(this.table, tableInlineWidth);
       }
     }

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

@@ -23,9 +23,10 @@ type ResizableTableContainerProps = {
     editorView: EditorView;
     getPos: () => number | undefined;
     tableRef: HTMLTableElement;
+    isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
 };
-export declare const ResizableTableContainer: ({ children, className, node, lineLength, containerWidth, editorView, getPos, tableRef, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element;
+export declare const ResizableTableContainer: ({ children, className, node, lineLength, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element;
 type TableContainerProps = {
     node: PMNode;
     className: string;
@@ -36,7 +37,8 @@ type TableContainerProps = {
     getPos: () => number | undefined;
     tableRef: HTMLTableElement;
     isNested: boolean;
+    isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, pluginInjectionApi, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, isResizing, pluginInjectionApi, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
 export {};

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

@@ -3,10 +3,10 @@ import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags, getPosHandler, getPosHandlerNode } from '@atlaskit/editor-common/types';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
-import { PluginInjectionAPI } from '../types';
-import { Props, TableOptions } from './types';
+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';
 type ForwardRef = (node: HTMLElement | null) => void;
 export default class TableView extends ReactNodeView<Props> {
     private table;

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

@@ -23,9 +23,10 @@ type ResizableTableContainerProps = {
     editorView: EditorView;
     getPos: () => number | undefined;
     tableRef: HTMLTableElement;
+    isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
 };
-export declare const ResizableTableContainer: ({ children, className, node, lineLength, containerWidth, editorView, getPos, tableRef, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element;
+export declare const ResizableTableContainer: ({ children, className, node, lineLength, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element;
 type TableContainerProps = {
     node: PMNode;
     className: string;
@@ -36,7 +37,8 @@ type TableContainerProps = {
     getPos: () => number | undefined;
     tableRef: HTMLTableElement;
     isNested: boolean;
+    isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, pluginInjectionApi, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, isResizing, pluginInjectionApi, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
 export {};

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

@@ -3,10 +3,10 @@ import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags, getPosHandler, getPosHandlerNode } from '@atlaskit/editor-common/types';
-import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
-import { PluginInjectionAPI } from '../types';
-import { Props, TableOptions } from './types';
+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';
 type ForwardRef = (node: HTMLElement | null) => void;
 export default class TableView extends ReactNodeView<Props> {
     private table;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.10.1",
+  "version": "2.10.2",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^28.1.0",
-    "@atlaskit/editor-common": "^74.48.0",
+    "@atlaskit/editor-common": "^74.49.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.8",
@@ -38,7 +38,7 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.14.0",
+    "@atlaskit/tokens": "^1.15.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

package/src/__tests__/unit/commands/go-to-next-cell.ts

@@ -4,15 +4,15 @@ import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertio
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   p,
   table,
   td,
@@ -24,7 +24,7 @@ import {
 import tablePlugin from '../../../plugins/table';
 import { goToNextCell } from '../../../plugins/table/commands/go-to-next-cell';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
-import { TablePluginState } from '../../../plugins/table/types';
+import type { TablePluginState } from '../../../plugins/table/types';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -43,7 +43,7 @@ describe('table plugin: goToNextCell', () => {
     .add(guidelinePlugin)
     .add(tablePlugin);
   const editor = (doc: DocBuilder) =>
-    createEditor<TablePluginState, PluginKey>({
+    createEditor<TablePluginState, PluginKey, typeof preset>({
       doc,
       preset,
       pluginKey,

package/src/__tests__/unit/commands/insert.ts

@@ -4,15 +4,15 @@ import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertio
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   p,
   table,
   td,
@@ -23,7 +23,7 @@ import {
 import tablePlugin from '../../../plugins/table';
 import { addColumnAt } from '../../../plugins/table/commands/insert';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
-import { TablePluginState } from '../../../plugins/table/types';
+import type { TablePluginState } from '../../../plugins/table/types';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -54,7 +54,7 @@ describe('table plugin: insert', () => {
       ]);
 
     const editor = (doc: DocBuilder) =>
-      createEditor<TablePluginState, PluginKey>({
+      createEditor<TablePluginState, PluginKey, typeof preset>({
         doc,
         preset,
         pluginKey,

package/src/__tests__/unit/commands/misc.ts

@@ -4,16 +4,16 @@ import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { isColumnSelected } from '@atlaskit/editor-tables/utils';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   p,
   table,
   td,
@@ -29,10 +29,8 @@ import {
 import { getDecorations } from '../../../plugins/table/pm-plugins/decorations/plugin';
 import { getPluginState } from '../../../plugins/table/pm-plugins/plugin-factory';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
-import {
-  TableDecorations,
-  TablePluginState,
-} from '../../../plugins/table/types';
+import type { TablePluginState } from '../../../plugins/table/types';
+import { TableDecorations } from '../../../plugins/table/types';
 
 describe('table plugin: commands', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -50,7 +48,7 @@ describe('table plugin: commands', () => {
       },
     ]);
   const editor = (doc: DocBuilder) =>
-    createEditor<TablePluginState, PluginKey>({
+    createEditor<TablePluginState, PluginKey, typeof preset>({
       doc,
       preset,
       pluginKey,

package/src/__tests__/unit/copy-paste.ts

@@ -7,38 +7,35 @@ import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertio
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import {
-  Fragment,
+import type {
   Node as ProsemirrorNode,
   Schema,
-  Slice,
 } from '@atlaskit/editor-prosemirror/model';
-import {
+import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
+import type {
   PluginKey,
-  TextSelection,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
-import {
-  __serializeForClipboard,
-  EditorView,
-} from '@atlaskit/editor-prosemirror/view';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { __serializeForClipboard } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import {
   getCellsInTable,
   selectColumn,
   selectTable,
 } from '@atlaskit/editor-tables/utils';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import dispatchPasteEvent from '@atlaskit/editor-test-helpers/dispatch-paste-event';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   br,
   code_block,
   doc,
-  DocBuilder,
   expand,
   p,
   panel,
@@ -51,7 +48,7 @@ import defaultSchema from '@atlaskit/editor-test-helpers/schema';
 
 import tablePlugin from '../../plugins/table-plugin';
 import { pluginKey as tablePluginKey } from '../../plugins/table/pm-plugins/plugin-key';
-import { PluginConfig, TablePluginState } from '../../plugins/table/types';
+import type { PluginConfig, TablePluginState } from '../../plugins/table/types';
 import {
   removeTableFromFirstChild,
   removeTableFromLastChild,
@@ -125,7 +122,7 @@ describe('table plugin', () => {
     .add([tablePlugin, { tableOptions }]);
 
   const editor = (doc: DocBuilder) => {
-    return createEditor<TablePluginState, PluginKey>({
+    return createEditor<TablePluginState, PluginKey, typeof preset>({
       doc,
       preset,
       pluginKey: tablePluginKey,

package/src/__tests__/unit/event-handlers/index.ts

@@ -3,15 +3,15 @@ import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertio
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   table,
   tdCursor,
   tdEmpty,
@@ -22,7 +22,7 @@ import tablePlugin from '../../../plugins/table-plugin';
 import { whenTableInFocus } from '../../../plugins/table/event-handlers';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import { setDragging } from '../../../plugins/table/pm-plugins/table-resizing/commands';
-import { TablePluginState } from '../../../plugins/table/types';
+import type { TablePluginState } from '../../../plugins/table/types';
 
 describe('event-handlers', () => {
   let editor: any;
@@ -39,7 +39,7 @@ describe('event-handlers', () => {
           .add(guidelinePlugin)
           .add([tablePlugin, { tableOptions: { allowColumnResizing: false } }]);
         editor = (doc: DocBuilder) =>
-          createEditor<TablePluginState, PluginKey>({
+          createEditor<TablePluginState, PluginKey, typeof preset>({
             doc,
             preset,
             pluginKey,
@@ -72,7 +72,7 @@ describe('event-handlers', () => {
           .add(guidelinePlugin)
           .add([tablePlugin, { tableOptions: { allowColumnResizing: false } }]);
         editor = (doc: DocBuilder) =>
-          createEditor<TablePluginState, PluginKey>({
+          createEditor<TablePluginState, PluginKey, typeof preset>({
             doc,
             preset,
             pluginKey,

package/src/__tests__/unit/handlers.ts

@@ -3,15 +3,16 @@ import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertio
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   table,
   tdCursor,
   tdEmpty,
@@ -22,7 +23,7 @@ import tablePlugin from '../../plugins/table-plugin';
 import { handleDocOrSelectionChanged } from '../../plugins/table/handlers';
 import { defaultTableSelection } from '../../plugins/table/pm-plugins/default-table-selection';
 import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
-import { TablePluginState } from '../../plugins/table/types';
+import type { TablePluginState } from '../../plugins/table/types';
 
 describe('table action handlers', () => {
   let editor: any;
@@ -39,7 +40,7 @@ describe('table action handlers', () => {
       .add(tablePlugin);
 
     editor = (doc: DocBuilder) =>
-      createEditor<TablePluginState, PluginKey>({
+      createEditor<TablePluginState, PluginKey, typeof preset>({
         doc,
         preset,
         pluginKey,

package/src/__tests__/unit/hover-selection.ts

@@ -3,21 +3,21 @@ import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertio
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
   getCellsInColumn,
   getCellsInRow,
   getCellsInTable,
 } from '@atlaskit/editor-tables/utils';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   p,
   table,
   tdCursor,
@@ -35,7 +35,8 @@ import {
 } from '../../plugins/table/commands';
 import { getDecorations } from '../../plugins/table/pm-plugins/decorations/plugin';
 import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
-import { TableDecorations, TablePluginState } from '../../plugins/table/types';
+import type { TablePluginState } from '../../plugins/table/types';
+import { TableDecorations } from '../../plugins/table/types';
 
 describe('table hover selection plugin', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -48,7 +49,7 @@ describe('table hover selection plugin', () => {
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>
-    createEditor<TablePluginState, PluginKey>({
+    createEditor<TablePluginState, PluginKey, typeof preset>({
       doc,
       preset,
       pluginKey,

package/src/__tests__/unit/layout.ts

@@ -1,20 +1,20 @@
-import { TableLayout } from '@atlaskit/adf-schema';
+import type { TableLayout } from '@atlaskit/adf-schema';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   table,
   tdCursor,
   tdEmpty,
@@ -25,7 +25,7 @@ import tablePlugin from '../../plugins/table-plugin';
 import { toggleTableLayout } from '../../plugins/table/commands';
 import { getPluginState } from '../../plugins/table/pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../../plugins/table/pm-plugins/plugin-key';
-import {
+import type {
   PermittedLayoutsDescriptor,
   TablePluginState,
 } from '../../plugins/table/types';
@@ -49,7 +49,7 @@ describe('table toolbar', () => {
     .add([tablePlugin, { tableOptions }]);
 
   const editor = (doc: DocBuilder) => {
-    return createEditor<TablePluginState, PluginKey>({
+    return createEditor<TablePluginState, PluginKey, typeof preset>({
       doc,
       preset,
       pluginKey: tablePluginKey,

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

@@ -3,18 +3,19 @@ import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertio
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
-import { DecorationSet, EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { getCellsInColumn } from '@atlaskit/editor-tables/utils';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   p,
   table,
   td,
@@ -31,30 +32,29 @@ import {
 import { getDecorations } from '../../../../plugins/table/pm-plugins/decorations/plugin';
 import { buildColumnResizingDecorations } from '../../../../plugins/table/pm-plugins/decorations/utils';
 import { pluginKey } from '../../../../plugins/table/pm-plugins/plugin-key';
-import {
-  TableDecorations,
-  TablePluginState,
-} from '../../../../plugins/table/types';
+import type { TablePluginState } from '../../../../plugins/table/types';
+import { TableDecorations } from '../../../../plugins/table/types';
 
 describe('tables: column resizing decorations', () => {
   const createEditor = createProsemirrorEditorFactory();
   const getEditorFeatureFlags = () => ({});
+  const preset = new Preset<LightEditorPlugin>()
+    .add([featureFlagsPlugin, {}])
+    .add([analyticsPlugin, {}])
+    .add(contentInsertionPlugin)
+    .add(widthPlugin)
+    .add(guidelinePlugin)
+    .add([
+      tablePlugin,
+      {
+        tableOptions: { allowColumnResizing: true },
+        getEditorFeatureFlags,
+      },
+    ]);
   const editor = (doc: DocBuilder) =>
-    createEditor<TablePluginState, PluginKey>({
+    createEditor<TablePluginState, PluginKey, typeof preset>({
       doc,
-      preset: new Preset<LightEditorPlugin>()
-        .add([featureFlagsPlugin, {}])
-        .add([analyticsPlugin, {}])
-        .add(contentInsertionPlugin)
-        .add(widthPlugin)
-        .add(guidelinePlugin)
-        .add([
-          tablePlugin,
-          {
-            tableOptions: { allowColumnResizing: true },
-            getEditorFeatureFlags,
-          },
-        ]),
+      preset,
       pluginKey,
     });
 

package/src/__tests__/unit/sort-column.ts

@@ -5,15 +5,15 @@ import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertio
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   p,
   table,
   td,
@@ -24,7 +24,7 @@ import {
 import tablePlugin from '../../plugins/table-plugin';
 import { sortByColumn } from '../../plugins/table/commands';
 import { pluginKey as tablePluginKey } from '../../plugins/table/pm-plugins/plugin-key';
-import {
+import type {
   PermittedLayoutsDescriptor,
   TablePluginState,
 } from '../../plugins/table/types';
@@ -58,7 +58,7 @@ describe('table plugin', () => {
     .add([tablePlugin, { tableOptions }]);
 
   const editor = (doc: DocBuilder) => {
-    return createEditor<TablePluginState, PluginKey>({
+    return createEditor<TablePluginState, PluginKey, typeof preset>({
       doc,
       preset,
       pluginKey: tablePluginKey,

package/src/__tests__/unit/transforms/delete-columns.ts

@@ -4,17 +4,17 @@ import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertio
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   p,
   table,
   td,
@@ -26,7 +26,7 @@ import {
 import tablePlugin from '../../../plugins/table-plugin';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import { deleteColumns } from '../../../plugins/table/transforms';
-import { TablePluginState } from '../../../plugins/table/types';
+import type { TablePluginState } from '../../../plugins/table/types';
 
 const colsToRect = (cols: Array<number>, noOfRows: number): Rect => ({
   left: Math.min(...cols),
@@ -56,7 +56,7 @@ describe('table plugin -> transforms -> delete columns', () => {
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>
-    createEditor<TablePluginState, PluginKey>({
+    createEditor<TablePluginState, PluginKey, typeof preset>({
       doc,
       preset,
       pluginKey,

package/src/__tests__/unit/transforms/delete-rows.ts

@@ -4,17 +4,17 @@ import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertio
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   p,
   table,
   td,
@@ -27,7 +27,7 @@ import {
 import tablePlugin from '../../../plugins/table-plugin';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import { deleteRows } from '../../../plugins/table/transforms';
-import { TablePluginState } from '../../../plugins/table/types';
+import type { TablePluginState } from '../../../plugins/table/types';
 
 const rowsToRect = (rows: Array<number>, noOfColumns: number): Rect => ({
   left: 0,
@@ -56,7 +56,7 @@ describe('table plugin -> transforms -> delete rows', () => {
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>
-    createEditor<TablePluginState, PluginKey>({
+    createEditor<TablePluginState, PluginKey, typeof preset>({
       doc,
       preset,
       pluginKey,

package/src/__tests__/unit/transforms/merging.ts

@@ -4,15 +4,15 @@ import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertio
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   p,
   table,
   td,
@@ -23,7 +23,7 @@ import {
 import tablePlugin from '../../../plugins/table-plugin';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import { mergeCells } from '../../../plugins/table/transforms';
-import { TablePluginState } from '../../../plugins/table/types';
+import type { TablePluginState } from '../../../plugins/table/types';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -46,7 +46,7 @@ describe('table plugin -> transforms -> merge cells', () => {
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>
-    createEditor<TablePluginState, PluginKey>({
+    createEditor<TablePluginState, PluginKey, typeof preset>({
       doc,
       preset,
       pluginKey,

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

@@ -8,15 +8,15 @@ import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertio
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   p,
   table,
   tdCursor,
@@ -28,7 +28,7 @@ import tablePlugin from '../../../plugins/table-plugin';
 import { hoverTable } from '../../../plugins/table/commands';
 import { getDecorations } from '../../../plugins/table/pm-plugins/decorations/plugin';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
-import { TablePluginState } from '../../../plugins/table/types';
+import type { TablePluginState } from '../../../plugins/table/types';
 import TableFloatingControls from '../../../plugins/table/ui/TableFloatingControls';
 
 describe('TableFloatingControls', () => {
@@ -43,7 +43,7 @@ describe('TableFloatingControls', () => {
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>
-    createEditor<TablePluginState, PluginKey>({
+    createEditor<TablePluginState, PluginKey, typeof preset>({
       doc,
       preset,
       pluginKey: pluginKey,

package/src/__tests__/unit/utils.ts

@@ -3,15 +3,15 @@ import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertio
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import type { LightEditorPlugin } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
 import {
   createProsemirrorEditorFactory,
-  LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
+import type { DocBuilder } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
   doc,
-  DocBuilder,
   p,
   table,
   td,
@@ -22,7 +22,7 @@ import {
 
 import tablePlugin from '../../plugins/table';
 import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
-import { TablePluginState } from '../../plugins/table/types';
+import type { TablePluginState } from '../../plugins/table/types';
 import {
   getColumnClassNames,
   getColumnDeleteButtonParams,
@@ -46,7 +46,7 @@ describe('table plugin: utils', () => {
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>
-    createEditor<TablePluginState, PluginKey>({
+    createEditor<TablePluginState, PluginKey, typeof preset>({
       doc,
       preset,
       pluginKey,

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

@@ -184,8 +184,14 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   }
 
   componentDidUpdate() {
-    const { view, getNode, isMediaFullscreen, allowColumnResizing } =
-      this.props;
+    const {
+      view,
+      getNode,
+      isMediaFullscreen,
+      allowColumnResizing,
+      isResizing,
+      options,
+    } = this.props;
     const { isInDanger } = getPluginState(view.state);
     const table = findTable(view.state.selection);
 
@@ -227,7 +233,17 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         tablesHaveDifferentNoOfColumns(currentTable, previousTable)
       ) {
         const { view } = this.props;
-        recreateResizeColsByNode(this.table, currentTable);
+
+        const shouldRecreateResizeCols =
+          !options?.isTableResizingEnabled ||
+          !isResizing ||
+          (tablesHaveDifferentNoOfColumns(currentTable, previousTable) &&
+            isResizing);
+
+        if (shouldRecreateResizeCols) {
+          recreateResizeColsByNode(this.table, currentTable);
+        }
+
         updateControls()(view.state);
       }
 
@@ -345,6 +361,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isNested={isNested}
         pluginInjectionApi={pluginInjectionApi}
         isTableResizingEnabled={options?.isTableResizingEnabled}
+        isResizing={isResizing}
       >
         <div
           className={ClassName.TABLE_STICKY_SENTINEL_TOP}

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

@@ -10,7 +10,10 @@ import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import {
+  akEditorDefaultLayoutWidth,
+  akEditorMobileBreakoutPoint,
+} from '@atlaskit/editor-shared-styles';
 
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import type { PluginInjectionAPI } from '../types';
@@ -66,6 +69,7 @@ type ResizableTableContainerProps = {
   editorView: EditorView;
   getPos: () => number | undefined;
   tableRef: HTMLTableElement;
+  isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
 };
 
@@ -78,10 +82,12 @@ export const ResizableTableContainer = ({
   editorView,
   getPos,
   tableRef,
+  isResizing,
   pluginInjectionApi,
 }: PropsWithChildren<ResizableTableContainerProps>) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const marginLeftRef = useRef<number | undefined>(0);
+  const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
 
   const updateWidth = useCallback(
     (width: number) => {
@@ -134,12 +140,19 @@ export const ResizableTableContainer = ({
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   const responsiveContainerWidth = containerWidth - 76;
   const width = Math.min(tableWidth, responsiveContainerWidth);
-  marginLeftRef.current = getMarginLeft(lineLength, width);
+
+  if (!isResizing) {
+    tableWidthRef.current = width;
+    marginLeftRef.current = getMarginLeft(lineLength, width);
+  }
   const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
 
   return (
     <div
-      style={{ marginLeft: marginLeftRef.current, width }}
+      style={{
+        marginLeft: marginLeftRef.current,
+        width: tableWidthRef.current,
+      }}
       className={ClassName.TABLE_RESIZER_CONTAINER}
       ref={containerRef}
     >
@@ -173,6 +186,7 @@ type TableContainerProps = {
   getPos: () => number | undefined;
   tableRef: HTMLTableElement;
   isNested: boolean;
+  isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
 };
 
@@ -187,6 +201,7 @@ export const TableContainer = ({
   getPos,
   tableRef,
   isNested,
+  isResizing,
   pluginInjectionApi,
 }: PropsWithChildren<TableContainerProps>) => {
   if (isTableResizingEnabled && !isNested) {
@@ -199,6 +214,7 @@ export const TableContainer = ({
         editorView={editorView}
         getPos={getPos}
         tableRef={tableRef}
+        isResizing={isResizing}
         pluginInjectionApi={pluginInjectionApi}
       >
         {children}

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

@@ -12,13 +12,16 @@ import type {
   getPosHandlerNode,
 } from '@atlaskit/editor-common/types';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
-import {
+import type {
   DOMOutputSpec,
-  DOMSerializer,
   Node as PmNode,
 } from '@atlaskit/editor-prosemirror/model';
-import { EditorState, PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import type {
+  EditorState,
+  PluginKey,
+} from '@atlaskit/editor-prosemirror/state';
+import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 
@@ -28,11 +31,11 @@ import { pluginKey } from '../pm-plugins/plugin-key';
 import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing';
 import { generateColgroup } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
-import { PluginInjectionAPI } from '../types';
+import type { PluginInjectionAPI } from '../types';
 import { isTableNested } from '../utils';
 
 import TableComponent from './TableComponent';
-import { Props, TableOptions } from './types';
+import type { Props, TableOptions } from './types';
 
 type ForwardRef = (node: HTMLElement | null) => void;
 
@@ -160,7 +163,11 @@ export default class TableView extends ReactNodeView<Props> {
       this.getPos(),
     );
 
-    if (tableInlineWidth) {
+    const isTableResizing = tableWidthPluginKey.getState(
+      this.view.state,
+    )?.resizing;
+
+    if (!isTableResizing && tableInlineWidth) {
       handleInlineTableWidth(this.table, tableInlineWidth);
     }
   }