@atlaskit/renderer 109.50.7 → 109.51.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/renderer
 
+## 109.51.1
+
+### Patch Changes
+
+- [#134066](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134066)
+  [`43a1d7aed352b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/43a1d7aed352b) -
+  UNSTABLE_allowTableResizing in renderer added
+
+## 109.51.0
+
+### Minor Changes
+
+- [#134423](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134423)
+  [`026952a6b9ee5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/026952a6b9ee5) -
+  [ux] EDF-1284: Cleanup platform.editor.renderer-error-boundary-for-dom-errors platform flag in
+  renderer
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 109.50.7
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -192,6 +192,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     this.textHighlighter = init.textHighlighter;
     this.isCommentsOnMediaMediaInlineBugFixEnabled = init.isCommentsOnMediaMediaInlineBugFixEnabled;
     this.allowTableAlignment = init.allowTableAlignment;
+    this.allowTableResizing = init.allowTableResizing;
   }
   (0, _createClass2.default)(ReactSerializer, [{
     key: "resetState",
@@ -365,7 +366,8 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         stickyHeaders: stickyHeaders,
         isInsideOfBlockNode: isInsideOfBlockNode,
         isInsideMultiBodiedExtension: isInsideMultiBodiedExtension,
-        allowTableAlignment: this.allowTableAlignment
+        allowTableAlignment: this.allowTableAlignment,
+        allowTableResizing: this.allowTableResizing
       });
     }
   }, {

package/dist/cjs/react/nodes/table/colgroup.js

@@ -10,7 +10,6 @@ var _react = _interopRequireDefault(require("react"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
-var _table = require("../table");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useFeatureFlags = require("../../../use-feature-flags");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -63,7 +62,8 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
     isInsideOfBlockNode = props.isInsideOfBlockNode,
     isinsideMultiBodiedExtension = props.isinsideMultiBodiedExtension,
     isTableScalingEnabled = props.isTableScalingEnabled,
-    isTableFixedColumnWidthsOptionEnabled = props.isTableFixedColumnWidthsOptionEnabled;
+    isTableFixedColumnWidthsOptionEnabled = props.isTableFixedColumnWidthsOptionEnabled,
+    allowTableResizing = props.allowTableResizing;
   if (!columnWidths) {
     return [];
   }
@@ -72,8 +72,12 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   var tableResized = isTableResized(columnWidths);
   var noOfColumns = columnWidths.length;
   var targetWidths;
-  var tableContainerWidth = rendererAppearance === 'comment' && (0, _table.isTableResizingEnabled)(rendererAppearance) && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) ? renderWidth : (0, _nodeWidth.getTableContainerWidth)(tableNode);
-  if ((0, _table.isTableResizingEnabled)(rendererAppearance) && !isInsideOfBlockNode && !isinsideMultiBodiedExtension && !tableResized) {
+
+  // appearance == comment && allowTableResizing && !tableNode?.attrs.width, means it is a comment
+  // appearance == comment && !allowTableResizing && !tableNode?.attrs.width, means it is a inline comment
+  // When comment and inline comment table width inherits from the parent container, we want tableContainerWidth === renderWidth
+  var tableContainerWidth = rendererAppearance === 'comment' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) ? renderWidth : (0, _nodeWidth.getTableContainerWidth)(tableNode);
+  if (allowTableResizing && !isInsideOfBlockNode && !isinsideMultiBodiedExtension && !tableResized) {
     // for tables with no column widths defined, assume that the real table width
     // is defined by node.attrs.width
     var _tableWidth2 = (isNumberColumnEnabled ? tableContainerWidth - _editorSharedStyles.akEditorTableNumberColumnWidth : tableContainerWidth) - 1;

package/dist/cjs/react/nodes/table/sticky.js

@@ -16,7 +16,6 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _table = require("./table");
 var _injectProps = require("../../utils/inject-props");
-var _table2 = require("../table");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -40,10 +39,10 @@ var modeSpecficStyles = {
 };
 
 // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
-var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width, rendererAppearance) {
+var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width, allowTableResizing) {
   var _css;
   var stickyHeaderZIndex;
-  if ((0, _table2.isTableResizingEnabled)(rendererAppearance)) {
+  if (allowTableResizing) {
     stickyHeaderZIndex = 13;
   } else {
     stickyHeaderZIndex = _editorSharedStyles.akEditorStickyHeaderZIndex;
@@ -76,8 +75,8 @@ var FixedTableDiv = function FixedTableDiv(props) {
   var top = props.top,
     wrapperWidth = props.wrapperWidth,
     mode = props.mode,
-    rendererAppearance = props.rendererAppearance;
-  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth, rendererAppearance), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
+    allowTableResizing = props.allowTableResizing;
+  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth, allowTableResizing), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
   var attrs = {
     mode: mode
   };
@@ -85,7 +84,7 @@ var FixedTableDiv = function FixedTableDiv(props) {
     "data-testid": "sticky-table-fixed"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: (0, _table2.isTableResizingEnabled)(rendererAppearance) ? 'fixed-table-div-custom-table-resizing' : ''
+    className: allowTableResizing ? 'fixed-table-div-custom-table-resizing' : ''
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     ,
     css: fixedTableCss
@@ -106,10 +105,11 @@ var StickyTable = exports.StickyTable = function StickyTable(_ref) {
     renderWidth = _ref.renderWidth,
     rowHeight = _ref.rowHeight,
     tableNode = _ref.tableNode,
-    rendererAppearance = _ref.rendererAppearance;
+    rendererAppearance = _ref.rendererAppearance,
+    allowTableResizing = _ref.allowTableResizing;
   var styles;
   /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-  if ((0, _table2.isTableResizingEnabled)(rendererAppearance)) {
+  if (allowTableResizing) {
     styles = (0, _react2.css)({
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       top: mode === 'pin-bottom' ? top : undefined,
@@ -133,7 +133,7 @@ var StickyTable = exports.StickyTable = function StickyTable(_ref) {
       top: mode === 'stick' ? top : undefined,
       mode: rowHeight > 300 ? 'none' : mode,
       wrapperWidth: wrapperWidth,
-      rendererAppearance: rendererAppearance
+      allowTableResizing: allowTableResizing
     }, (0, _react2.jsx)("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " is-sticky ").concat(shadowClassNames || ''),

package/dist/cjs/react/nodes/table/table.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _colgroup = require("./colgroup");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _table = require("../table");
 var Table = exports.Table = /*#__PURE__*/_react.default.memo(function (_ref) {
   var _tableNode$attrs;
   var innerRef = _ref.innerRef,
@@ -21,11 +20,15 @@ var Table = exports.Table = /*#__PURE__*/_react.default.memo(function (_ref) {
     tableNode = _ref.tableNode,
     rendererAppearance = _ref.rendererAppearance,
     isInsideOfBlockNode = _ref.isInsideOfBlockNode,
-    isinsideMultiBodiedExtension = _ref.isinsideMultiBodiedExtension;
+    isinsideMultiBodiedExtension = _ref.isinsideMultiBodiedExtension,
+    allowTableResizing = _ref.allowTableResizing;
   var tableWidth = tableNode ? (0, _nodeWidth.getTableContainerWidth)(tableNode) : _editorSharedStyles.akEditorDefaultLayoutWidth;
-  if (rendererAppearance === 'comment' && (0, _table.isTableResizingEnabled)(rendererAppearance) && tableNode && !((_tableNode$attrs = tableNode.attrs) !== null && _tableNode$attrs !== void 0 && _tableNode$attrs.width)) {
+  if (rendererAppearance === 'comment' && allowTableResizing && tableNode && !((_tableNode$attrs = tableNode.attrs) !== null && _tableNode$attrs !== void 0 && _tableNode$attrs.width)) {
     tableWidth = 'inherit';
   }
+  if (rendererAppearance === 'comment' && !allowTableResizing) {
+    tableWidth = renderWidth;
+  }
   var tableLayout = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout;
   var tableDisplayMode = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.displayMode;
   return /*#__PURE__*/_react.default.createElement("table", {
@@ -43,6 +46,7 @@ var Table = exports.Table = /*#__PURE__*/_react.default.memo(function (_ref) {
     tableNode: tableNode,
     rendererAppearance: rendererAppearance,
     isInsideOfBlockNode: isInsideOfBlockNode,
-    isinsideMultiBodiedExtension: isinsideMultiBodiedExtension
+    isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
+    allowTableResizing: allowTableResizing
   }), /*#__PURE__*/_react.default.createElement("tbody", null, children));
 });

package/dist/cjs/react/nodes/table.js

@@ -33,9 +33,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var isTableResizingEnabled = exports.isTableResizingEnabled = function isTableResizingEnabled(appearance) {
-  return (0, _appearance.isFullWidthOrFullPageAppearance)(appearance) ||
-  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-  (0, _appearance.isCommentAppearance)(appearance) && (0, _platformFeatureFlags.fg)('platform_editor_table_support_in_comment');
+  return (0, _appearance.isFullWidthOrFullPageAppearance)(appearance) || (0, _appearance.isCommentAppearance)(appearance) && (0, _platformFeatureFlags.fg)('platform_editor_table_support_in_comment');
 };
 var orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
   if (!tableOrderStatus || tableOrderStatus.order === _types.SortOrder.NO_ORDER) {
@@ -299,7 +297,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         rendererAppearance = _this$props.rendererAppearance,
         isInsideOfBlockNode = _this$props.isInsideOfBlockNode,
         isinsideMultiBodiedExtension = _this$props.isinsideMultiBodiedExtension,
-        allowTableAlignment = _this$props.allowTableAlignment;
+        allowTableAlignment = _this$props.allowTableAlignment,
+        allowTableResizing = _this$props.allowTableResizing;
       var stickyMode = this.state.stickyMode;
       var lineLengthFixedWidth = _editorSharedStyles.akEditorDefaultLayoutWidth;
       var left;
@@ -312,7 +311,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
         if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
           return isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
-        } else if (rendererAppearance === 'comment' && isTableResizingEnabled(rendererAppearance) && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
+        } else if (rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
           var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
           return isRenderWidthValid ? renderWidth : tableContainerWidth;
         } else {
@@ -322,9 +321,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         }
       };
       var tableWidth = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
-      var isCommentAppearanceAndTableAlignmentEnabled =
-      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-      allowTableAlignment && (0, _platformFeatureFlags.fg)('platform_editor_table_support_in_comment');
+      var isCommentAppearanceAndTableAlignmentEnabled = allowTableAlignment && (0, _platformFeatureFlags.fg)('platform_editor_table_support_in_comment');
 
       // Logic for table alignment in renderer
       var isTableAlignStart = ((0, _appearance.isFullWidthOrFullPageAppearance)(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled) && tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment && (0, _platformFeatureFlags.fg)('platform.editor.table.allow-table-alignment'); // allowTableAlignment should be used instead of fg('platform.editor.table.allow-table-alignment') after this fg cleanup
@@ -352,8 +349,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       } else {
         updatedLayout = layout;
       }
-      var finalTableContainerWidth = isTableResizingEnabled(rendererAppearance) ? tableWidth : 'inherit';
-      if (rendererAppearance === 'comment' && isTableResizingEnabled(rendererAppearance)) {
+      var finalTableContainerWidth = allowTableResizing ? tableWidth : 'inherit';
+      if (rendererAppearance === 'comment' && allowTableResizing) {
         finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? tableWidth : 'inherit';
       }
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
@@ -380,7 +377,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         columnWidths: columnWidths,
         rowHeight: this.state.headerRowHeight,
         tableNode: tableNode,
-        rendererAppearance: rendererAppearance
+        rendererAppearance: rendererAppearance,
+        allowTableResizing: allowTableResizing
       }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER,
@@ -395,7 +393,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
         isInsideOfBlockNode: isInsideOfBlockNode,
-        isinsideMultiBodiedExtension: isinsideMultiBodiedExtension
+        isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
+        allowTableResizing: allowTableResizing
       }, this.grabFirstRowRef(children)))));
     }
   }]);
@@ -475,7 +474,7 @@ var TableWithWidth = function TableWithWidth(props) {
     var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
       return total + val;
     }, 0)) || 0;
-    if (colWidthsSum || isTableResizingEnabled(props.rendererAppearance)) {
+    if (colWidthsSum || props.allowTableResizing) {
       return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({
         renderWidth: renderWidth
       }, props));

package/dist/cjs/ui/Renderer/ErrorBoundary.js

@@ -14,7 +14,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analyticsListeners = require("@atlaskit/analytics-listeners");
 var _monitoring = require("@atlaskit/editor-common/monitoring");
 var _events = require("../../analytics/events");
@@ -77,26 +76,24 @@ var ErrorBoundary = exports.ErrorBoundary = /*#__PURE__*/function (_React$Compon
       (0, _monitoring.logException)(error, {
         location: 'renderer'
       });
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.renderer-error-boundary-for-dom-errors')) {
-        var pattern = /Failed to execute.*on 'Node'.*/;
-        var matchesPattern = pattern.test(error.message);
-        if (matchesPattern) {
-          this.fireAnalyticsEvent({
-            action: _analytics.ACTION.CAUGHT_DOM_ERROR,
-            actionSubject: this.props.component,
-            actionSubjectId: this.props.componentId,
-            eventType: _analytics.EVENT_TYPE.OPERATIONAL,
-            attributes: {
-              platform: _events.PLATFORM.WEB,
-              errorMessage: "".concat(additionalInfo).concat(error === null || error === void 0 ? void 0 : error.message)
-            }
-          });
-          this.setState(function () {
-            return {
-              domError: true
-            };
-          });
-        }
+      var pattern = /Failed to execute.*on 'Node'.*/;
+      var matchesPattern = pattern.test(error.message);
+      if (matchesPattern) {
+        this.fireAnalyticsEvent({
+          action: _analytics.ACTION.CAUGHT_DOM_ERROR,
+          actionSubject: this.props.component,
+          actionSubjectId: this.props.componentId,
+          eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+          attributes: {
+            platform: _events.PLATFORM.WEB,
+            errorMessage: "".concat(additionalInfo).concat(error === null || error === void 0 ? void 0 : error.message)
+          }
+        });
+        this.setState(function () {
+          return {
+            domError: true
+          };
+        });
       }
       if (this.hasFallback()) {
         this.setState({
@@ -111,12 +108,10 @@ var ErrorBoundary = exports.ErrorBoundary = /*#__PURE__*/function (_React$Compon
   }, {
     key: "render",
     value: function render() {
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.renderer-error-boundary-for-dom-errors')) {
-        if (this.state.domError) {
-          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
-            key: (0, _uuid.default)()
-          }, this.props.children);
-        }
+      if (this.state.domError) {
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+          key: (0, _uuid.default)()
+        }, this.props.children);
       }
       if (this.shouldRecover()) {
         return this.props.fallbackComponent;

package/dist/cjs/ui/Renderer/index.js

@@ -60,7 +60,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.50.7";
+var packageVersion = "109.51.1";
 var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
@@ -290,7 +290,8 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
         isInsideOfInlineExtension: (0, _platformFeatureFlags.fg)('platform.editor.inline_extension.extended_lcqdn') && props.isInsideOfInlineExtension,
         textHighlighter: props.UNSTABLE_textHighlighter,
         isCommentsOnMediaMediaInlineBugFixEnabled: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMediaMediaInlineBugFix,
-        allowTableAlignment: props.UNSTABLE_allowTableAlignment
+        allowTableAlignment: props.UNSTABLE_allowTableAlignment,
+        allowTableResizing: props.appearance === 'comment' && !(0, _platformFeatureFlags.fg)('platform_editor_table_support_in_comment') ? false : props.UNSTABLE_allowTableResizing
       };
     }
   }, {
@@ -488,7 +489,8 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock,
     addTelepointer = props.addTelepointer,
     ssr = props.ssr,
-    isInsideOfInlineExtension = props.isInsideOfInlineExtension;
+    isInsideOfInlineExtension = props.isInsideOfInlineExtension,
+    allowTableResizing = props.allowTableResizing;
   var createTelepointer = function createTelepointer() {
     var telepointer = document.createElement('span');
     telepointer.textContent = "\u200B";
@@ -561,7 +563,8 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
       allowNestedHeaderLinks: allowNestedHeaderLinks,
       allowColumnSorting: !!allowColumnSorting,
       useBlockRenderForCodeBlock: useBlockRenderForCodeBlock,
-      allowAnnotations: props.allowAnnotations
+      allowAnnotations: props.allowAnnotations,
+      allowTableResizing: allowTableResizing
     })
   }, children))));
 });

package/dist/es2019/react/index.js

@@ -178,6 +178,7 @@ export default class ReactSerializer {
     this.textHighlighter = init.textHighlighter;
     this.isCommentsOnMediaMediaInlineBugFixEnabled = init.isCommentsOnMediaMediaInlineBugFixEnabled;
     this.allowTableAlignment = init.allowTableAlignment;
+    this.allowTableResizing = init.allowTableResizing;
   }
   resetState() {
     this.headingIds = [];
@@ -327,7 +328,8 @@ export default class ReactSerializer {
       stickyHeaders,
       isInsideOfBlockNode,
       isInsideMultiBodiedExtension,
-      allowTableAlignment: this.allowTableAlignment
+      allowTableAlignment: this.allowTableAlignment,
+      allowTableResizing: this.allowTableResizing
     };
   }
   getDateProps(node, parentInfo, path = []) {

package/dist/es2019/react/nodes/table/colgroup.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth, akEditorTableLegacyCellMinWidth } from '@atlaskit/editor-shared-styles';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { isTableResizingEnabled } from '../table';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useFeatureFlags } from '../../../use-feature-flags';
 // we allow scaling down column widths by no more than 30%
@@ -49,7 +48,8 @@ const renderScaleDownColgroup = props => {
     isInsideOfBlockNode,
     isinsideMultiBodiedExtension,
     isTableScalingEnabled,
-    isTableFixedColumnWidthsOptionEnabled
+    isTableFixedColumnWidthsOptionEnabled,
+    allowTableResizing
   } = props;
   if (!columnWidths) {
     return [];
@@ -59,8 +59,12 @@ const renderScaleDownColgroup = props => {
   const tableResized = isTableResized(columnWidths);
   const noOfColumns = columnWidths.length;
   let targetWidths;
-  const tableContainerWidth = rendererAppearance === 'comment' && isTableResizingEnabled(rendererAppearance) && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) ? renderWidth : getTableContainerWidth(tableNode);
-  if (isTableResizingEnabled(rendererAppearance) && !isInsideOfBlockNode && !isinsideMultiBodiedExtension && !tableResized) {
+
+  // appearance == comment && allowTableResizing && !tableNode?.attrs.width, means it is a comment
+  // appearance == comment && !allowTableResizing && !tableNode?.attrs.width, means it is a inline comment
+  // When comment and inline comment table width inherits from the parent container, we want tableContainerWidth === renderWidth
+  const tableContainerWidth = rendererAppearance === 'comment' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) ? renderWidth : getTableContainerWidth(tableNode);
+  if (allowTableResizing && !isInsideOfBlockNode && !isinsideMultiBodiedExtension && !tableResized) {
     // for tables with no column widths defined, assume that the real table width
     // is defined by node.attrs.width
     const tableWidth = (isNumberColumnEnabled ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth) - 1;

package/dist/es2019/react/nodes/table/sticky.js

@@ -13,7 +13,6 @@ import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
-import { isTableResizingEnabled } from '../table';
 export const tableStickyPadding = 8;
 const modeSpecficStyles = {
   none: css({
@@ -28,9 +27,9 @@ const modeSpecficStyles = {
 };
 
 // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
-const fixedTableDivStaticStyles = (top, width, rendererAppearance) => {
+const fixedTableDivStaticStyles = (top, width, allowTableResizing) => {
   let stickyHeaderZIndex;
-  if (isTableResizingEnabled(rendererAppearance)) {
+  if (allowTableResizing) {
     stickyHeaderZIndex = 13;
   } else {
     stickyHeaderZIndex = akEditorStickyHeaderZIndex;
@@ -75,9 +74,9 @@ const FixedTableDiv = props => {
     top,
     wrapperWidth,
     mode,
-    rendererAppearance
+    allowTableResizing
   } = props;
-  const fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth, rendererAppearance), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
+  const fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth, allowTableResizing), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
   const attrs = {
     mode
   };
@@ -85,7 +84,7 @@ const FixedTableDiv = props => {
     "data-testid": "sticky-table-fixed"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: isTableResizingEnabled(rendererAppearance) ? 'fixed-table-div-custom-table-resizing' : ''
+    className: allowTableResizing ? 'fixed-table-div-custom-table-resizing' : ''
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     ,
     css: fixedTableCss
@@ -106,11 +105,12 @@ export const StickyTable = ({
   renderWidth,
   rowHeight,
   tableNode,
-  rendererAppearance
+  rendererAppearance,
+  allowTableResizing
 }) => {
   let styles;
   /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-  if (isTableResizingEnabled(rendererAppearance)) {
+  if (allowTableResizing) {
     styles = css({
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       top: mode === 'pin-bottom' ? top : undefined,
@@ -134,7 +134,7 @@ export const StickyTable = ({
       top: mode === 'stick' ? top : undefined,
       mode: rowHeight > 300 ? 'none' : mode,
       wrapperWidth: wrapperWidth,
-      rendererAppearance: rendererAppearance
+      allowTableResizing: allowTableResizing
     }, jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: `${TableSharedCssClassName.TABLE_CONTAINER} is-sticky ${shadowClassNames || ''}`,

package/dist/es2019/react/nodes/table/table.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { Colgroup } from './colgroup';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { isTableResizingEnabled } from '../table';
 export const Table = /*#__PURE__*/React.memo(({
   innerRef,
   isNumberColumnEnabled,
@@ -13,13 +12,17 @@ export const Table = /*#__PURE__*/React.memo(({
   tableNode,
   rendererAppearance,
   isInsideOfBlockNode,
-  isinsideMultiBodiedExtension
+  isinsideMultiBodiedExtension,
+  allowTableResizing
 }) => {
   var _tableNode$attrs;
   let tableWidth = tableNode ? getTableContainerWidth(tableNode) : akEditorDefaultLayoutWidth;
-  if (rendererAppearance === 'comment' && isTableResizingEnabled(rendererAppearance) && tableNode && !((_tableNode$attrs = tableNode.attrs) !== null && _tableNode$attrs !== void 0 && _tableNode$attrs.width)) {
+  if (rendererAppearance === 'comment' && allowTableResizing && tableNode && !((_tableNode$attrs = tableNode.attrs) !== null && _tableNode$attrs !== void 0 && _tableNode$attrs.width)) {
     tableWidth = 'inherit';
   }
+  if (rendererAppearance === 'comment' && !allowTableResizing) {
+    tableWidth = renderWidth;
+  }
   const tableLayout = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout;
   const tableDisplayMode = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.displayMode;
   return /*#__PURE__*/React.createElement("table", {
@@ -37,6 +40,7 @@ export const Table = /*#__PURE__*/React.memo(({
     tableNode: tableNode,
     rendererAppearance: rendererAppearance,
     isInsideOfBlockNode: isInsideOfBlockNode,
-    isinsideMultiBodiedExtension: isinsideMultiBodiedExtension
+    isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
+    allowTableResizing: allowTableResizing
   }), /*#__PURE__*/React.createElement("tbody", null, children));
 });

package/dist/es2019/react/nodes/table.js

@@ -14,9 +14,7 @@ import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
 import { isCommentAppearance, isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance } from '../utils/appearance';
-export const isTableResizingEnabled = appearance => isFullWidthOrFullPageAppearance(appearance) ||
-// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-isCommentAppearance(appearance) && fg('platform_editor_table_support_in_comment');
+export const isTableResizingEnabled = appearance => isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance) && fg('platform_editor_table_support_in_comment');
 const orderChildren = (children, tableNode, smartCardStorage, tableOrderStatus) => {
   if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {
     return children;
@@ -243,7 +241,8 @@ export class TableContainer extends React.Component {
       rendererAppearance,
       isInsideOfBlockNode,
       isinsideMultiBodiedExtension,
-      allowTableAlignment
+      allowTableAlignment,
+      allowTableResizing
     } = this.props;
     const {
       stickyMode
@@ -259,7 +258,7 @@ export class TableContainer extends React.Component {
     const calcDefaultLayoutWidthByAppearance = (rendererAppearance, tableNode) => {
       if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
         return isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
-      } else if (rendererAppearance === 'comment' && isTableResizingEnabled(rendererAppearance) && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
+      } else if (rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
         const tableContainerWidth = getTableContainerWidth(tableNode);
         return isRenderWidthValid ? renderWidth : tableContainerWidth;
       } else {
@@ -269,9 +268,7 @@ export class TableContainer extends React.Component {
       }
     };
     const tableWidth = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
-    const isCommentAppearanceAndTableAlignmentEnabled =
-    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-    allowTableAlignment && fg('platform_editor_table_support_in_comment');
+    const isCommentAppearanceAndTableAlignmentEnabled = allowTableAlignment && fg('platform_editor_table_support_in_comment');
 
     // Logic for table alignment in renderer
     const isTableAlignStart = (isFullWidthOrFullPageAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled) && tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment && fg('platform.editor.table.allow-table-alignment'); // allowTableAlignment should be used instead of fg('platform.editor.table.allow-table-alignment') after this fg cleanup
@@ -299,8 +296,8 @@ export class TableContainer extends React.Component {
     } else {
       updatedLayout = layout;
     }
-    let finalTableContainerWidth = isTableResizingEnabled(rendererAppearance) ? tableWidth : 'inherit';
-    if (rendererAppearance === 'comment' && isTableResizingEnabled(rendererAppearance)) {
+    let finalTableContainerWidth = allowTableResizing ? tableWidth : 'inherit';
+    if (rendererAppearance === 'comment' && allowTableResizing) {
       finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? tableWidth : 'inherit';
     }
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -327,7 +324,8 @@ export class TableContainer extends React.Component {
       columnWidths: columnWidths,
       rowHeight: this.state.headerRowHeight,
       tableNode: tableNode,
-      rendererAppearance: rendererAppearance
+      rendererAppearance: rendererAppearance,
+      allowTableResizing: allowTableResizing
     }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
@@ -342,7 +340,8 @@ export class TableContainer extends React.Component {
       tableNode: tableNode,
       rendererAppearance: rendererAppearance,
       isInsideOfBlockNode: isInsideOfBlockNode,
-      isinsideMultiBodiedExtension: isinsideMultiBodiedExtension
+      isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
+      allowTableResizing: allowTableResizing
     }, this.grabFirstRowRef(children)))));
   }
 }
@@ -414,7 +413,7 @@ const TableWithWidth = props => {
     var _props$columnWidths;
     const renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
     const colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce((total, val) => total + val, 0)) || 0;
-    if (colWidthsSum || isTableResizingEnabled(props.rendererAppearance)) {
+    if (colWidthsSum || props.allowTableResizing) {
       return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
         renderWidth: renderWidth
       }, props));