@atlaskit/renderer 109.51.0 → 109.51.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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

@@ -297,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;
@@ -310,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 {
@@ -348,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", {
@@ -376,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,
@@ -391,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)))));
     }
   }]);
@@ -471,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/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.51.0";
+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

@@ -241,7 +241,8 @@ export class TableContainer extends React.Component {
       rendererAppearance,
       isInsideOfBlockNode,
       isinsideMultiBodiedExtension,
-      allowTableAlignment
+      allowTableAlignment,
+      allowTableResizing
     } = this.props;
     const {
       stickyMode
@@ -257,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 {
@@ -295,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", {
@@ -323,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,
@@ -338,7 +340,8 @@ export class TableContainer extends React.Component {
       tableNode: tableNode,
       rendererAppearance: rendererAppearance,
       isInsideOfBlockNode: isInsideOfBlockNode,
-      isinsideMultiBodiedExtension: isinsideMultiBodiedExtension
+      isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
+      allowTableResizing: allowTableResizing
     }, this.grabFirstRowRef(children)))));
   }
 }
@@ -410,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));

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

@@ -42,7 +42,7 @@ import { nodeToReact } from '../../react/nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.51.0";
+const packageVersion = "109.51.1";
 export const defaultNodeComponents = nodeToReact;
 export class Renderer extends PureComponent {
   constructor(props) {
@@ -270,7 +270,8 @@ export class Renderer extends PureComponent {
       isInsideOfInlineExtension: 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' && !fg('platform_editor_table_support_in_comment') ? false : props.UNSTABLE_allowTableResizing
     };
   }
   render() {
@@ -462,7 +463,8 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
     useBlockRenderForCodeBlock,
     addTelepointer,
     ssr,
-    isInsideOfInlineExtension
+    isInsideOfInlineExtension,
+    allowTableResizing
   } = props;
   const createTelepointer = () => {
     const telepointer = document.createElement('span');
@@ -534,7 +536,8 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
       allowNestedHeaderLinks,
       allowColumnSorting: !!allowColumnSorting,
       useBlockRenderForCodeBlock,
-      allowAnnotations: props.allowAnnotations
+      allowAnnotations: props.allowAnnotations,
+      allowTableResizing: allowTableResizing
     })
   }, children))));
 });

package/dist/esm/react/index.js

@@ -185,6 +185,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     this.textHighlighter = init.textHighlighter;
     this.isCommentsOnMediaMediaInlineBugFixEnabled = init.isCommentsOnMediaMediaInlineBugFixEnabled;
     this.allowTableAlignment = init.allowTableAlignment;
+    this.allowTableResizing = init.allowTableResizing;
   }
   _createClass(ReactSerializer, [{
     key: "resetState",
@@ -358,7 +359,8 @@ var ReactSerializer = /*#__PURE__*/function () {
         stickyHeaders: stickyHeaders,
         isInsideOfBlockNode: isInsideOfBlockNode,
         isInsideMultiBodiedExtension: isInsideMultiBodiedExtension,
-        allowTableAlignment: this.allowTableAlignment
+        allowTableAlignment: this.allowTableAlignment,
+        allowTableResizing: this.allowTableResizing
       });
     }
   }, {

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

@@ -5,7 +5,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%
@@ -56,7 +55,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 [];
   }
@@ -65,8 +65,12 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   var tableResized = isTableResized(columnWidths);
   var noOfColumns = columnWidths.length;
   var targetWidths;
-  var 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
+  var 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
     var _tableWidth2 = (isNumberColumnEnabled ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth) - 1;

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

@@ -16,7 +16,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 var tableStickyPadding = 8;
 var modeSpecficStyles = {
   none: css({
@@ -31,10 +30,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 (isTableResizingEnabled(rendererAppearance)) {
+  if (allowTableResizing) {
     stickyHeaderZIndex = 13;
   } else {
     stickyHeaderZIndex = akEditorStickyHeaderZIndex;
@@ -67,8 +66,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
   };
@@ -76,7 +75,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: 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
@@ -97,10 +96,11 @@ export var 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 (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,
@@ -124,7 +124,7 @@ export var StickyTable = function StickyTable(_ref) {
       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: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " is-sticky ").concat(shadowClassNames || ''),