@atlaskit/editor-plugin-table 7.24.1 → 7.24.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 7.24.2
+
+### Patch Changes
+
+- [#124709](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124709)
+  [`a52d9a09ddd5c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a52d9a09ddd5c) -
+  [ux] When table resized to full-width in comment editor, it inherits the width of the editor.
+
 ## 7.24.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -471,18 +471,43 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         clearTimeout(this.initialOverflowCaptureTimerId);
       }
     }
+  }, {
+    key: "removeInlineTableWidth",
+    value:
+    // Should be called only when table node width is reset to undefined in Comment Editor
+    // Maybe replaced by handleColgroupUpdates as we implement new table's support in Comment Editor.
+    function removeInlineTableWidth() {
+      var _this$props9 = this.props,
+        isResizing = _this$props9.isResizing,
+        getNode = _this$props9.getNode,
+        view = _this$props9.view,
+        getPos = _this$props9.getPos;
+      if (!this.table) {
+        return;
+      }
+      var tableNode = getNode();
+      var newTableWidth = tableNode.attrs.width;
+      var start = getPos() || 0;
+      var depth = view.state.doc.resolve(start).depth;
+      if (depth !== 0) {
+        return;
+      }
+      if (!isResizing && newTableWidth === null) {
+        this.table.style.width = '';
+      }
+    }
   }, {
     key: "handleColgroupUpdates",
     value: function handleColgroupUpdates() {
       var _this2 = this;
       var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var _this$props9 = this.props,
-        getNode = _this$props9.getNode,
-        containerWidth = _this$props9.containerWidth,
-        isResizing = _this$props9.isResizing,
-        view = _this$props9.view,
-        getPos = _this$props9.getPos,
-        getEditorFeatureFlags = _this$props9.getEditorFeatureFlags;
+      var _this$props10 = this.props,
+        getNode = _this$props10.getNode,
+        containerWidth = _this$props10.containerWidth,
+        isResizing = _this$props10.isResizing,
+        view = _this$props10.view,
+        getPos = _this$props10.getPos,
+        getEditorFeatureFlags = _this$props10.getEditorFeatureFlags;
       if (!this.table) {
         return;
       }
@@ -551,18 +576,19 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_, prevState) {
-      var _this$wrapper,
+      var _this$props$options3,
+        _this$wrapper,
         _this3 = this;
-      var _this$props10 = this.props,
-        view = _this$props10.view,
-        getNode = _this$props10.getNode,
-        isMediaFullscreen = _this$props10.isMediaFullscreen,
-        allowColumnResizing = _this$props10.allowColumnResizing,
-        isResizing = _this$props10.isResizing,
-        options = _this$props10.options,
-        isTableScalingEnabled = _this$props10.isTableScalingEnabled,
-        getPos = _this$props10.getPos,
-        getEditorFeatureFlags = _this$props10.getEditorFeatureFlags;
+      var _this$props11 = this.props,
+        view = _this$props11.view,
+        getNode = _this$props11.getNode,
+        isMediaFullscreen = _this$props11.isMediaFullscreen,
+        allowColumnResizing = _this$props11.allowColumnResizing,
+        isResizing = _this$props11.isResizing,
+        options = _this$props11.options,
+        isTableScalingEnabled = _this$props11.isTableScalingEnabled,
+        getPos = _this$props11.getPos,
+        getEditorFeatureFlags = _this$props11.getEditorFeatureFlags;
       var isInDanger = this.props.isInDanger;
       var table = (0, _utils2.findTable)(view.state.selection);
       if (!(0, _platformFeatureFlags.fg)('platform.editor.table.use-shared-state-hook')) {
@@ -590,6 +616,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isInDanger && !table) {
         (0, _commands.clearHoverSelection)()(view.state, view.dispatch);
       }
+      if ((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
+        this.removeInlineTableWidth();
+      }
       if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
         if (this.props.isDragAndDropEnabled) {
           // requestAnimationFrame is used here to fix a race condition issue
@@ -675,30 +704,30 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this4 = this,
         _classnames;
-      var _this$props11 = this.props,
-        view = _this$props11.view,
-        getNode = _this$props11.getNode,
-        isResizing = _this$props11.isResizing,
-        _this$props11$allowCo = _this$props11.allowControls,
-        allowControls = _this$props11$allowCo === void 0 ? true : _this$props11$allowCo,
-        isHeaderRowEnabled = _this$props11.isHeaderRowEnabled,
-        ordering = _this$props11.ordering,
-        isHeaderColumnEnabled = _this$props11.isHeaderColumnEnabled,
-        tableActive = _this$props11.tableActive,
-        containerWidth = _this$props11.containerWidth,
-        options = _this$props11.options,
-        getPos = _this$props11.getPos,
-        pluginInjectionApi = _this$props11.pluginInjectionApi,
-        isDragAndDropEnabled = _this$props11.isDragAndDropEnabled,
-        getEditorFeatureFlags = _this$props11.getEditorFeatureFlags,
-        isTableScalingEnabled = _this$props11.isTableScalingEnabled,
-        isTableAlignmentEnabled = _this$props11.isTableAlignmentEnabled;
       var _this$props12 = this.props,
-        isInDanger = _this$props12.isInDanger,
-        hoveredRows = _this$props12.hoveredRows,
-        hoveredCell = _this$props12.hoveredCell,
-        isTableHovered = _this$props12.isTableHovered,
-        isWholeTableInDanger = _this$props12.isWholeTableInDanger;
+        view = _this$props12.view,
+        getNode = _this$props12.getNode,
+        isResizing = _this$props12.isResizing,
+        _this$props12$allowCo = _this$props12.allowControls,
+        allowControls = _this$props12$allowCo === void 0 ? true : _this$props12$allowCo,
+        isHeaderRowEnabled = _this$props12.isHeaderRowEnabled,
+        ordering = _this$props12.ordering,
+        isHeaderColumnEnabled = _this$props12.isHeaderColumnEnabled,
+        tableActive = _this$props12.tableActive,
+        containerWidth = _this$props12.containerWidth,
+        options = _this$props12.options,
+        getPos = _this$props12.getPos,
+        pluginInjectionApi = _this$props12.pluginInjectionApi,
+        isDragAndDropEnabled = _this$props12.isDragAndDropEnabled,
+        getEditorFeatureFlags = _this$props12.getEditorFeatureFlags,
+        isTableScalingEnabled = _this$props12.isTableScalingEnabled,
+        isTableAlignmentEnabled = _this$props12.isTableAlignmentEnabled;
+      var _this$props13 = this.props,
+        isInDanger = _this$props13.isInDanger,
+        hoveredRows = _this$props13.hoveredRows,
+        hoveredCell = _this$props13.hoveredCell,
+        isTableHovered = _this$props13.isTableHovered,
+        isWholeTableInDanger = _this$props13.isWholeTableInDanger;
       var _this$state3 = this.state,
         showBeforeShadow = _this$state3.showBeforeShadow,
         showAfterShadow = _this$state3.showAfterShadow;

package/dist/cjs/nodeviews/TableResizer.js

@@ -297,7 +297,8 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       dispatch = editorView.dispatch;
     var pos = getPos();
     var currentTableNodeLocalId = (_node$attrs$localId2 = node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId) !== null && _node$attrs$localId2 !== void 0 ? _node$attrs$localId2 : '';
-    var tableMaxWidth = isCommentEditor ? containerWidth - _utils3.TABLE_OFFSET_IN_COMMENT_EDITOR : _utils3.TABLE_MAX_WIDTH;
+    var tableMaxWidth = isCommentEditor ? undefined // Table's full-width in comment appearance inherit the width of the Editor/Renderer
+    : _utils3.TABLE_MAX_WIDTH;
     newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? tableMaxWidth : newWidth;
     var tr = state.tr.setMeta(_tableWidth.pluginKey, {
       resizing: false,
@@ -337,12 +338,12 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     }
     displayGapCursor(true);
     dispatch(tr);
-    if (delta.width < 0) {
+    if (delta.width < 0 && newWidth !== undefined) {
       var _pluginInjectionApi$a3;
       pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a3 === void 0 || _pluginInjectionApi$a3.actions.ariaNotify(formatMessage(_messages.tableMessages.tableSizeDecreaseScreenReaderInformation, {
         newWidth: newWidth
       }));
-    } else if (delta.width > 0) {
+    } else if (delta.width > 0 && newWidth !== undefined) {
       var _pluginInjectionApi$a4;
       pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a4 === void 0 || _pluginInjectionApi$a4.actions.ariaNotify(formatMessage(_messages.tableMessages.tableSizeIncreaseScreenReaderInformation, {
         newWidth: newWidth
@@ -351,13 +352,13 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
 
     // Hide guidelines when resizing stops
     displayGuideline([]);
-    updateWidth(newWidth);
+    newWidth !== undefined && updateWidth(newWidth);
     scheduleResize.cancel();
     if (onResizeStop) {
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, containerWidth, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi, isCommentEditor]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi, isCommentEditor]);
   var handleTableSizeChangeOnKeypress = (0, _react.useCallback)(function (step) {
     var newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

package/dist/es2019/nodeviews/TableComponent.js

@@ -455,6 +455,29 @@ class TableComponent extends React.Component {
       clearTimeout(this.initialOverflowCaptureTimerId);
     }
   }
+  // Should be called only when table node width is reset to undefined in Comment Editor
+  // Maybe replaced by handleColgroupUpdates as we implement new table's support in Comment Editor.
+  removeInlineTableWidth() {
+    const {
+      isResizing,
+      getNode,
+      view,
+      getPos
+    } = this.props;
+    if (!this.table) {
+      return;
+    }
+    const tableNode = getNode();
+    const newTableWidth = tableNode.attrs.width;
+    const start = getPos() || 0;
+    const depth = view.state.doc.resolve(start).depth;
+    if (depth !== 0) {
+      return;
+    }
+    if (!isResizing && newTableWidth === null) {
+      this.table.style.width = '';
+    }
+  }
   handleColgroupUpdates(force = false) {
     const {
       getNode,
@@ -532,7 +555,7 @@ class TableComponent extends React.Component {
     this.containerWidth = containerWidth;
   }
   componentDidUpdate(_, prevState) {
-    var _this$wrapper;
+    var _this$props$options3, _this$wrapper;
     const {
       view,
       getNode,
@@ -574,6 +597,9 @@ class TableComponent extends React.Component {
     if (isInDanger && !table) {
       clearHoverSelection()(view.state, view.dispatch);
     }
+    if ((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
+      this.removeInlineTableWidth();
+    }
     if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
       if (this.props.isDragAndDropEnabled) {
         // requestAnimationFrame is used here to fix a race condition issue

package/dist/es2019/nodeviews/TableResizer.js

@@ -292,7 +292,8 @@ export const TableResizer = ({
     } = editorView;
     const pos = getPos();
     const currentTableNodeLocalId = (_node$attrs$localId2 = node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId) !== null && _node$attrs$localId2 !== void 0 ? _node$attrs$localId2 : '';
-    const tableMaxWidth = isCommentEditor ? containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR : TABLE_MAX_WIDTH;
+    const tableMaxWidth = isCommentEditor ? undefined // Table's full-width in comment appearance inherit the width of the Editor/Renderer
+    : TABLE_MAX_WIDTH;
     newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? tableMaxWidth : newWidth;
     let tr = state.tr.setMeta(tableWidthPluginKey, {
       resizing: false,
@@ -333,12 +334,12 @@ export const TableResizer = ({
     }
     displayGapCursor(true);
     dispatch(tr);
-    if (delta.width < 0) {
+    if (delta.width < 0 && newWidth !== undefined) {
       var _pluginInjectionApi$a3;
       pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions.ariaNotify(formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
         newWidth: newWidth
       }));
-    } else if (delta.width > 0) {
+    } else if (delta.width > 0 && newWidth !== undefined) {
       var _pluginInjectionApi$a4;
       pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions.ariaNotify(formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
         newWidth: newWidth
@@ -347,13 +348,13 @@ export const TableResizer = ({
 
     // Hide guidelines when resizing stops
     displayGuideline([]);
-    updateWidth(newWidth);
+    newWidth !== undefined && updateWidth(newWidth);
     scheduleResize.cancel();
     if (onResizeStop) {
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, containerWidth, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi, isCommentEditor]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi, isCommentEditor]);
   const handleTableSizeChangeOnKeypress = useCallback(step => {
     const newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

package/dist/esm/nodeviews/TableComponent.js

@@ -464,18 +464,43 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         clearTimeout(this.initialOverflowCaptureTimerId);
       }
     }
+  }, {
+    key: "removeInlineTableWidth",
+    value:
+    // Should be called only when table node width is reset to undefined in Comment Editor
+    // Maybe replaced by handleColgroupUpdates as we implement new table's support in Comment Editor.
+    function removeInlineTableWidth() {
+      var _this$props9 = this.props,
+        isResizing = _this$props9.isResizing,
+        getNode = _this$props9.getNode,
+        view = _this$props9.view,
+        getPos = _this$props9.getPos;
+      if (!this.table) {
+        return;
+      }
+      var tableNode = getNode();
+      var newTableWidth = tableNode.attrs.width;
+      var start = getPos() || 0;
+      var depth = view.state.doc.resolve(start).depth;
+      if (depth !== 0) {
+        return;
+      }
+      if (!isResizing && newTableWidth === null) {
+        this.table.style.width = '';
+      }
+    }
   }, {
     key: "handleColgroupUpdates",
     value: function handleColgroupUpdates() {
       var _this2 = this;
       var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var _this$props9 = this.props,
-        getNode = _this$props9.getNode,
-        containerWidth = _this$props9.containerWidth,
-        isResizing = _this$props9.isResizing,
-        view = _this$props9.view,
-        getPos = _this$props9.getPos,
-        getEditorFeatureFlags = _this$props9.getEditorFeatureFlags;
+      var _this$props10 = this.props,
+        getNode = _this$props10.getNode,
+        containerWidth = _this$props10.containerWidth,
+        isResizing = _this$props10.isResizing,
+        view = _this$props10.view,
+        getPos = _this$props10.getPos,
+        getEditorFeatureFlags = _this$props10.getEditorFeatureFlags;
       if (!this.table) {
         return;
       }
@@ -544,18 +569,19 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_, prevState) {
-      var _this$wrapper,
+      var _this$props$options3,
+        _this$wrapper,
         _this3 = this;
-      var _this$props10 = this.props,
-        view = _this$props10.view,
-        getNode = _this$props10.getNode,
-        isMediaFullscreen = _this$props10.isMediaFullscreen,
-        allowColumnResizing = _this$props10.allowColumnResizing,
-        isResizing = _this$props10.isResizing,
-        options = _this$props10.options,
-        isTableScalingEnabled = _this$props10.isTableScalingEnabled,
-        getPos = _this$props10.getPos,
-        getEditorFeatureFlags = _this$props10.getEditorFeatureFlags;
+      var _this$props11 = this.props,
+        view = _this$props11.view,
+        getNode = _this$props11.getNode,
+        isMediaFullscreen = _this$props11.isMediaFullscreen,
+        allowColumnResizing = _this$props11.allowColumnResizing,
+        isResizing = _this$props11.isResizing,
+        options = _this$props11.options,
+        isTableScalingEnabled = _this$props11.isTableScalingEnabled,
+        getPos = _this$props11.getPos,
+        getEditorFeatureFlags = _this$props11.getEditorFeatureFlags;
       var isInDanger = this.props.isInDanger;
       var table = findTable(view.state.selection);
       if (!fg('platform.editor.table.use-shared-state-hook')) {
@@ -583,6 +609,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isInDanger && !table) {
         clearHoverSelection()(view.state, view.dispatch);
       }
+      if ((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
+        this.removeInlineTableWidth();
+      }
       if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
         if (this.props.isDragAndDropEnabled) {
           // requestAnimationFrame is used here to fix a race condition issue
@@ -668,30 +697,30 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this4 = this,
         _classnames;
-      var _this$props11 = this.props,
-        view = _this$props11.view,
-        getNode = _this$props11.getNode,
-        isResizing = _this$props11.isResizing,
-        _this$props11$allowCo = _this$props11.allowControls,
-        allowControls = _this$props11$allowCo === void 0 ? true : _this$props11$allowCo,
-        isHeaderRowEnabled = _this$props11.isHeaderRowEnabled,
-        ordering = _this$props11.ordering,
-        isHeaderColumnEnabled = _this$props11.isHeaderColumnEnabled,
-        tableActive = _this$props11.tableActive,
-        containerWidth = _this$props11.containerWidth,
-        options = _this$props11.options,
-        getPos = _this$props11.getPos,
-        pluginInjectionApi = _this$props11.pluginInjectionApi,
-        isDragAndDropEnabled = _this$props11.isDragAndDropEnabled,
-        getEditorFeatureFlags = _this$props11.getEditorFeatureFlags,
-        isTableScalingEnabled = _this$props11.isTableScalingEnabled,
-        isTableAlignmentEnabled = _this$props11.isTableAlignmentEnabled;
       var _this$props12 = this.props,
-        isInDanger = _this$props12.isInDanger,
-        hoveredRows = _this$props12.hoveredRows,
-        hoveredCell = _this$props12.hoveredCell,
-        isTableHovered = _this$props12.isTableHovered,
-        isWholeTableInDanger = _this$props12.isWholeTableInDanger;
+        view = _this$props12.view,
+        getNode = _this$props12.getNode,
+        isResizing = _this$props12.isResizing,
+        _this$props12$allowCo = _this$props12.allowControls,
+        allowControls = _this$props12$allowCo === void 0 ? true : _this$props12$allowCo,
+        isHeaderRowEnabled = _this$props12.isHeaderRowEnabled,
+        ordering = _this$props12.ordering,
+        isHeaderColumnEnabled = _this$props12.isHeaderColumnEnabled,
+        tableActive = _this$props12.tableActive,
+        containerWidth = _this$props12.containerWidth,
+        options = _this$props12.options,
+        getPos = _this$props12.getPos,
+        pluginInjectionApi = _this$props12.pluginInjectionApi,
+        isDragAndDropEnabled = _this$props12.isDragAndDropEnabled,
+        getEditorFeatureFlags = _this$props12.getEditorFeatureFlags,
+        isTableScalingEnabled = _this$props12.isTableScalingEnabled,
+        isTableAlignmentEnabled = _this$props12.isTableAlignmentEnabled;
+      var _this$props13 = this.props,
+        isInDanger = _this$props13.isInDanger,
+        hoveredRows = _this$props13.hoveredRows,
+        hoveredCell = _this$props13.hoveredCell,
+        isTableHovered = _this$props13.isTableHovered,
+        isWholeTableInDanger = _this$props13.isWholeTableInDanger;
       var _this$state3 = this.state,
         showBeforeShadow = _this$state3.showBeforeShadow,
         showAfterShadow = _this$state3.showAfterShadow;

package/dist/esm/nodeviews/TableResizer.js

@@ -287,7 +287,8 @@ export var TableResizer = function TableResizer(_ref) {
       dispatch = editorView.dispatch;
     var pos = getPos();
     var currentTableNodeLocalId = (_node$attrs$localId2 = node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId) !== null && _node$attrs$localId2 !== void 0 ? _node$attrs$localId2 : '';
-    var tableMaxWidth = isCommentEditor ? containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR : TABLE_MAX_WIDTH;
+    var tableMaxWidth = isCommentEditor ? undefined // Table's full-width in comment appearance inherit the width of the Editor/Renderer
+    : TABLE_MAX_WIDTH;
     newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? tableMaxWidth : newWidth;
     var tr = state.tr.setMeta(tableWidthPluginKey, {
       resizing: false,
@@ -327,12 +328,12 @@ export var TableResizer = function TableResizer(_ref) {
     }
     displayGapCursor(true);
     dispatch(tr);
-    if (delta.width < 0) {
+    if (delta.width < 0 && newWidth !== undefined) {
       var _pluginInjectionApi$a3;
       pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a3 === void 0 || _pluginInjectionApi$a3.actions.ariaNotify(formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
         newWidth: newWidth
       }));
-    } else if (delta.width > 0) {
+    } else if (delta.width > 0 && newWidth !== undefined) {
       var _pluginInjectionApi$a4;
       pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a4 === void 0 || _pluginInjectionApi$a4.actions.ariaNotify(formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
         newWidth: newWidth
@@ -341,13 +342,13 @@ export var TableResizer = function TableResizer(_ref) {
 
     // Hide guidelines when resizing stops
     displayGuideline([]);
-    updateWidth(newWidth);
+    newWidth !== undefined && updateWidth(newWidth);
     scheduleResize.cancel();
     if (onResizeStop) {
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, containerWidth, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi, isCommentEditor]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi, isCommentEditor]);
   var handleTableSizeChangeOnKeypress = useCallback(function (step) {
     var newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.24.1",
+	"version": "7.24.2",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"

package/src/nodeviews/TableComponent.tsx

@@ -343,6 +343,28 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		this.props.view.dispatch(tr);
 	};
 
+	// Should be called only when table node width is reset to undefined in Comment Editor
+	// Maybe replaced by handleColgroupUpdates as we implement new table's support in Comment Editor.
+	removeInlineTableWidth() {
+		const { isResizing, getNode, view, getPos } = this.props;
+		if (!this.table) {
+			return;
+		}
+
+		const tableNode = getNode();
+		const newTableWidth = tableNode.attrs.width;
+
+		const start = getPos() || 0;
+		const depth = view.state.doc.resolve(start).depth;
+		if (depth !== 0) {
+			return;
+		}
+
+		if (!isResizing && newTableWidth === null) {
+			this.table.style.width = '';
+		}
+	}
+
 	handleColgroupUpdates(force = false) {
 		const { getNode, containerWidth, isResizing, view, getPos, getEditorFeatureFlags } = this.props;
 
@@ -498,6 +520,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			clearHoverSelection()(view.state, view.dispatch);
 		}
 
+		if (this.props.options?.isCommentEditor && options?.isTableResizingEnabled) {
+			this.removeInlineTableWidth();
+		}
+
 		if (this.wrapper?.parentElement && this.table && !this.overflowShadowsObserver) {
 			if (this.props.isDragAndDropEnabled) {
 				// requestAnimationFrame is used here to fix a race condition issue
@@ -533,6 +559,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				{ priority: 'important' },
 			);
 		}
+
 		if (currentTable.attrs.__autoSize) {
 			// Wait for next tick to handle auto sizing, gives the browser time to do layout calc etc.
 			this.handleAutoSizeDebounced();
@@ -566,6 +593,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
 			this.handleTableResizingDebounced();
 		}
+
 		if (isOverflowAnalyticsEnabled) {
 			const newIsOverflowing =
 				this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];

package/src/nodeviews/TableResizer.tsx

@@ -533,13 +533,13 @@ export const TableResizer = ({
 	const handleResizeStop = useCallback<HandleResize>(
 		(originalState, delta) => {
 			isResizing.current = false;
-			let newWidth = originalState.width + delta.width;
+			let newWidth: number | undefined = originalState.width + delta.width;
 			const { state, dispatch } = editorView;
 			const pos = getPos();
 			const currentTableNodeLocalId = node?.attrs?.localId ?? '';
 
 			const tableMaxWidth = isCommentEditor
-				? containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR
+				? undefined // Table's full-width in comment appearance inherit the width of the Editor/Renderer
 				: TABLE_MAX_WIDTH;
 
 			newWidth =
@@ -598,13 +598,13 @@ export const TableResizer = ({
 			displayGapCursor(true);
 			dispatch(tr);
 
-			if (delta.width < 0) {
+			if (delta.width < 0 && newWidth !== undefined) {
 				pluginInjectionApi?.accessibilityUtils?.actions.ariaNotify(
 					formatMessage(messages.tableSizeDecreaseScreenReaderInformation, {
 						newWidth: newWidth,
 					}),
 				);
-			} else if (delta.width > 0) {
+			} else if (delta.width > 0 && newWidth !== undefined) {
 				pluginInjectionApi?.accessibilityUtils?.actions.ariaNotify(
 					formatMessage(messages.tableSizeIncreaseScreenReaderInformation, {
 						newWidth: newWidth,
@@ -614,7 +614,7 @@ export const TableResizer = ({
 
 			// Hide guidelines when resizing stops
 			displayGuideline([]);
-			updateWidth(newWidth);
+			newWidth !== undefined && updateWidth(newWidth);
 			scheduleResize.cancel();
 
 			if (onResizeStop) {
@@ -632,7 +632,6 @@ export const TableResizer = ({
 			tableRef,
 			scheduleResize,
 			displayGuideline,
-			containerWidth,
 			attachAnalyticsEvent,
 			endMeasure,
 			onResizeStop,