@atlaskit/editor-plugin-table 2.10.1 → 2.10.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-table
 
+## 2.10.3
+
+### Patch Changes
+
+- [`d6e4badd8c4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6e4badd8c4) - Add explicit height to table when resizing width to increase performance
+
+## 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,28 @@ 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 updateContainerHeight = (0, _react.useCallback)(function (height) {
+    var _containerRef$current;
+    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.style.setProperty('height', typeof height === 'number' ? "".concat(height + 29, "px") : 'auto');
+  }, []);
+  var resizeObserverRef = (0, _react.useRef)(new ResizeObserver(function (entries) {
+    updateContainerHeight(entries[entries.length - 1].contentRect.height);
+  }));
+  var onResizeStart = (0, _react.useCallback)(function () {
+    updateContainerHeight(tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight);
+    if (tableRef) {
+      resizeObserverRef.current.observe(tableRef);
+    }
+  }, [tableRef, updateContainerHeight]);
+  var onResizeStop = (0, _react.useCallback)(function () {
+    updateContainerHeight('auto');
+    resizeObserverRef.current.disconnect();
+  }, [updateContainerHeight]);
   var updateWidth = (0, _react.useCallback)(function (width) {
     if (!containerRef.current) {
       return;
@@ -87,16 +106,21 @@ 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
   }, /*#__PURE__*/_react.default.createElement(_TableResizer.TableResizer, {
+    onResizeStart: onResizeStart,
+    onResizeStop: onResizeStop,
     width: width,
     maxWidth: maxResizerWidth,
     containerWidth: containerWidth,
@@ -126,6 +150,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 +161,7 @@ var TableContainer = function TableContainer(_ref3) {
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,
+      isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi
     }, children);
   }

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

@@ -33,6 +33,10 @@ var tableHandlePosition = 14;
 var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
   var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
   var handleHeightSize = 'small';
+  if (!tableHeight) {
+    return handleHeightSize;
+  }
+
   /*
     - One row table height (minimum possible table height) ~ 45px
     - Two row table height ~ 90px
@@ -41,9 +45,9 @@ var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
     - > 46 because the height of the table can be a float number like 45.44.
     - < 96 is the height of large resize handle.
   */
-  if (tableHeight && tableHeight > 46 && tableHeight < 96) {
+  if (tableHeight > 46 && tableHeight < 96) {
     handleHeightSize = 'medium';
-  } else if (tableHeight && tableHeight >= 96) {
+  } else if (tableHeight >= 96) {
     handleHeightSize = 'large';
   }
   return handleHeightSize;
@@ -74,6 +78,8 @@ var TableResizer = function TableResizer(_ref) {
     maxWidth = _ref.maxWidth,
     containerWidth = _ref.containerWidth,
     updateWidth = _ref.updateWidth,
+    onResizeStop = _ref.onResizeStop,
+    onResizeStart = _ref.onResizeStart,
     editorView = _ref.editorView,
     getPos = _ref.getPos,
     node = _ref.node,
@@ -116,7 +122,8 @@ var TableResizer = function TableResizer(_ref) {
     }));
     var visibleGuidelines = getVisibleGuidelines(_guidelines.defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-  }, [displayGuideline, containerWidth, editorView, startMeasure]);
+    onResizeStart();
+  }, [displayGuideline, editorView, startMeasure, onResizeStart, containerWidth]);
   var handleResize = (0, _react.useCallback)(function (originalState, delta) {
     countFrames();
     var newWidth = originalState.width + delta.width;
@@ -181,8 +188,9 @@ var TableResizer = function TableResizer(_ref) {
     displayGuideline([]);
     updateWidth(newWidth);
     scheduleResize.cancel();
+    onResizeStop();
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
+  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
   var handleComponent = (0, _react.useMemo)(function () {
     return {
       left: /*#__PURE__*/_react.default.createElement("div", {

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,29 @@ export const ResizableTableContainer = ({
   editorView,
   getPos,
   tableRef,
+  isResizing,
   pluginInjectionApi
 }) => {
   const containerRef = useRef(null);
   const marginLeftRef = useRef(0);
+  const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
+  const updateContainerHeight = useCallback(height => {
+    var _containerRef$current;
+    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.style.setProperty('height', typeof height === 'number' ? `${height + 29}px` : 'auto');
+  }, []);
+  const resizeObserverRef = useRef(new ResizeObserver(entries => {
+    updateContainerHeight(entries[entries.length - 1].contentRect.height);
+  }));
+  const onResizeStart = useCallback(() => {
+    updateContainerHeight(tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight);
+    if (tableRef) {
+      resizeObserverRef.current.observe(tableRef);
+    }
+  }, [tableRef, updateContainerHeight]);
+  const onResizeStop = useCallback(() => {
+    updateContainerHeight('auto');
+    resizeObserverRef.current.disconnect();
+  }, [updateContainerHeight]);
   const updateWidth = useCallback(width => {
     if (!containerRef.current) {
       return;
@@ -78,16 +97,21 @@ 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
   }, /*#__PURE__*/React.createElement(TableResizer, {
+    onResizeStart: onResizeStart,
+    onResizeStop: onResizeStop,
     width: width,
     maxWidth: maxResizerWidth,
     containerWidth: containerWidth,
@@ -117,6 +141,7 @@ export const TableContainer = ({
   getPos,
   tableRef,
   isNested,
+  isResizing,
   pluginInjectionApi
 }) => {
   if (isTableResizingEnabled && !isNested) {
@@ -128,6 +153,7 @@ export const TableContainer = ({
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,
+      isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi
     }, children);
   }

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

@@ -19,6 +19,10 @@ const tableHandlePosition = 14;
 const getResizerHandleHeight = tableRef => {
   const tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
   let handleHeightSize = 'small';
+  if (!tableHeight) {
+    return handleHeightSize;
+  }
+
   /*
     - One row table height (minimum possible table height) ~ 45px
     - Two row table height ~ 90px
@@ -27,9 +31,9 @@ const getResizerHandleHeight = tableRef => {
     - > 46 because the height of the table can be a float number like 45.44.
     - < 96 is the height of large resize handle.
   */
-  if (tableHeight && tableHeight > 46 && tableHeight < 96) {
+  if (tableHeight > 46 && tableHeight < 96) {
     handleHeightSize = 'medium';
-  } else if (tableHeight && tableHeight >= 96) {
+  } else if (tableHeight >= 96) {
     handleHeightSize = 'large';
   }
   return handleHeightSize;
@@ -59,6 +63,8 @@ export const TableResizer = ({
   maxWidth,
   containerWidth,
   updateWidth,
+  onResizeStop,
+  onResizeStart,
   editorView,
   getPos,
   node,
@@ -105,7 +111,8 @@ export const TableResizer = ({
     }));
     const visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-  }, [displayGuideline, containerWidth, editorView, startMeasure]);
+    onResizeStart();
+  }, [displayGuideline, editorView, startMeasure, onResizeStart, containerWidth]);
   const handleResize = useCallback((originalState, delta) => {
     countFrames();
     const newWidth = originalState.width + delta.width;
@@ -171,8 +178,9 @@ export const TableResizer = ({
     displayGuideline([]);
     updateWidth(newWidth);
     scheduleResize.cancel();
+    onResizeStop();
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
+  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
   const handleComponent = useMemo(() => ({
     left: /*#__PURE__*/React.createElement("div", {
       className: resizerHandleShadowClassName,

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,28 @@ 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 updateContainerHeight = useCallback(function (height) {
+    var _containerRef$current;
+    (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.style.setProperty('height', typeof height === 'number' ? "".concat(height + 29, "px") : 'auto');
+  }, []);
+  var resizeObserverRef = useRef(new ResizeObserver(function (entries) {
+    updateContainerHeight(entries[entries.length - 1].contentRect.height);
+  }));
+  var onResizeStart = useCallback(function () {
+    updateContainerHeight(tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight);
+    if (tableRef) {
+      resizeObserverRef.current.observe(tableRef);
+    }
+  }, [tableRef, updateContainerHeight]);
+  var onResizeStop = useCallback(function () {
+    updateContainerHeight('auto');
+    resizeObserverRef.current.disconnect();
+  }, [updateContainerHeight]);
   var updateWidth = useCallback(function (width) {
     if (!containerRef.current) {
       return;
@@ -76,16 +95,21 @@ 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
   }, /*#__PURE__*/React.createElement(TableResizer, {
+    onResizeStart: onResizeStart,
+    onResizeStop: onResizeStop,
     width: width,
     maxWidth: maxResizerWidth,
     containerWidth: containerWidth,
@@ -114,6 +138,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 +149,7 @@ export var TableContainer = function TableContainer(_ref3) {
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,
+      isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi
     }, children);
   }

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

@@ -23,6 +23,10 @@ var tableHandlePosition = 14;
 var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
   var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
   var handleHeightSize = 'small';
+  if (!tableHeight) {
+    return handleHeightSize;
+  }
+
   /*
     - One row table height (minimum possible table height) ~ 45px
     - Two row table height ~ 90px
@@ -31,9 +35,9 @@ var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
     - > 46 because the height of the table can be a float number like 45.44.
     - < 96 is the height of large resize handle.
   */
-  if (tableHeight && tableHeight > 46 && tableHeight < 96) {
+  if (tableHeight > 46 && tableHeight < 96) {
     handleHeightSize = 'medium';
-  } else if (tableHeight && tableHeight >= 96) {
+  } else if (tableHeight >= 96) {
     handleHeightSize = 'large';
   }
   return handleHeightSize;
@@ -64,6 +68,8 @@ export var TableResizer = function TableResizer(_ref) {
     maxWidth = _ref.maxWidth,
     containerWidth = _ref.containerWidth,
     updateWidth = _ref.updateWidth,
+    onResizeStop = _ref.onResizeStop,
+    onResizeStart = _ref.onResizeStart,
     editorView = _ref.editorView,
     getPos = _ref.getPos,
     node = _ref.node,
@@ -106,7 +112,8 @@ export var TableResizer = function TableResizer(_ref) {
     }));
     var visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-  }, [displayGuideline, containerWidth, editorView, startMeasure]);
+    onResizeStart();
+  }, [displayGuideline, editorView, startMeasure, onResizeStart, containerWidth]);
   var handleResize = useCallback(function (originalState, delta) {
     countFrames();
     var newWidth = originalState.width + delta.width;
@@ -171,8 +178,9 @@ export var TableResizer = function TableResizer(_ref) {
     displayGuideline([]);
     updateWidth(newWidth);
     scheduleResize.cancel();
+    onResizeStop();
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
+  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
   var handleComponent = useMemo(function () {
     return {
       left: /*#__PURE__*/React.createElement("div", {

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/TableResizer.d.ts

@@ -9,6 +9,8 @@ interface TableResizerProps {
     maxWidth: number;
     containerWidth: number;
     updateWidth: (width: number) => void;
+    onResizeStop: () => void;
+    onResizeStart: () => void;
     editorView: EditorView;
     getPos: () => number | undefined;
     node: PMNode;
@@ -16,5 +18,5 @@ interface TableResizerProps {
     displayGuideline: (guideline: GuidelineConfig[]) => boolean;
     attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, }: PropsWithChildren<TableResizerProps>) => 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/TableResizer.d.ts

@@ -9,6 +9,8 @@ interface TableResizerProps {
     maxWidth: number;
     containerWidth: number;
     updateWidth: (width: number) => void;
+    onResizeStop: () => void;
+    onResizeStart: () => void;
     editorView: EditorView;
     getPos: () => number | undefined;
     node: PMNode;
@@ -16,5 +18,5 @@ interface TableResizerProps {
     displayGuideline: (guideline: GuidelineConfig[]) => boolean;
     attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
 export {};