@atlaskit/renderer 109.51.0 → 109.51.2

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/renderer
 
+## 109.51.2
+
+### Patch Changes
+
+- [#136078](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136078)
+  [`09414d7233497`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/09414d7233497) -
+  ED-24507 Switch nested dnd FG to experiment and include padding changes"
+- [#135911](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/135911)
+  [`554309ca8fbe5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/554309ca8fbe5) -
+  ED-24371: Support new 100% scaling and 40%PTW scaling in Comment Renderer
+- [#135954](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/135954)
+  [`62ec64be9ed01`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/62ec64be9ed01) -
+  Table alignment feature flag cleanup
+
+## 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/afm-cc/tsconfig.json

@@ -96,6 +96,9 @@
         {
             "path": "../../../design-system/theme/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../tmp-editor-statsig/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/tokens/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -95,6 +95,9 @@
     {
       "path": "../../../design-system/theme/afm-jira/tsconfig.json"
     },
+    {
+      "path": "../../tmp-editor-statsig/afm-jira/tsconfig.json"
+    },
     {
       "path": "../../../design-system/tokens/afm-jira/tsconfig.json"
     },

package/afm-post-office/tsconfig.json

@@ -95,6 +95,9 @@
     {
       "path": "../../../design-system/theme/afm-post-office/tsconfig.json"
     },
+    {
+      "path": "../../tmp-editor-statsig/afm-post-office/tsconfig.json"
+    },
     {
       "path": "../../../design-system/tokens/afm-post-office/tsconfig.json"
     },

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; }
@@ -21,7 +20,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // User A creates a table with column widths → User A views it with reduced viewport space (eg. Confluence sidebar is open)
 var MAX_SCALING_PERCENT = 0.3;
 var MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
-var isTableResized = function isTableResized(columnWidths) {
+var isTableColumnResized = function isTableColumnResized(columnWidths) {
   var filteredWidths = columnWidths.filter(function (width) {
     return width !== 0;
   });
@@ -63,23 +62,27 @@ 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 [];
   }
 
-  // isTableResized checks if table columns were resized
-  var tableResized = isTableResized(columnWidths);
+  // isTableColumnResized checks if table columns were resized
+  var tableColumnResized = isTableColumnResized(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) {
-    // for tables with no column widths defined, assume that the real table width
-    // is defined by node.attrs.width
+
+  // 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 && !tableColumnResized) {
+    // when no columns are resized, each column should have equal width, equals to tableWidth / noOfColumns
     var _tableWidth2 = (isNumberColumnEnabled ? tableContainerWidth - _editorSharedStyles.akEditorTableNumberColumnWidth : tableContainerWidth) - 1;
     var defaultColumnWidth = _tableWidth2 / noOfColumns;
     targetWidths = new Array(noOfColumns).fill(defaultColumnWidth);
-  } else if (!tableResized) {
+  } else if (!tableColumnResized) {
     return null;
   }
   var sumOfColumns = colWidthSum(columnWidths);
@@ -87,7 +90,8 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   // tables in the wild may be smaller than table container width (col resizing bugs, created before custom widths etc.)
   // this causes issues with num column scaling as we add a new table column in renderer
   var isTableSmallerThanContainer = sumOfColumns < tableContainerWidth - 1;
-  var forceScaleForNumColumn = isTableScalingEnabled && isNumberColumnEnabled && tableResized;
+  var forceScaleForNumColumn = isTableScalingEnabled && isNumberColumnEnabled && tableColumnResized;
+
   // when table resized and number column is enabled, we need to scale down the table in render
   if (forceScaleForNumColumn) {
     var scalePercentage = +((tableContainerWidth - _editorSharedStyles.akEditorTableNumberColumnWidth) / tableContainerWidth);
@@ -143,10 +147,11 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
   }
   // scaling down
   else if (renderWidth < tableWidth && !isTableWidthFixed) {
+    var shouldTable100ScaleDown = rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width);
     scaleDownPercent = calcScalePercent({
       renderWidth: renderWidth,
       tableWidth: tableWidth,
-      maxScale: maxScalingPercent
+      maxScale: shouldTable100ScaleDown ? 1 : maxScalingPercent
     });
   }
   return targetWidths.map(function (colWidth) {

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 {
@@ -320,13 +321,12 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         }
       };
       var tableWidth = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
-      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
-
+      var isTableAlignStart = tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment;
       var fullWidthLineLength = isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
       var commentLineLength = isRenderWidthValid ? renderWidth : lineLengthFixedWidth;
+      var isCommentAppearanceAndTableAlignmentEnabled = (0, _appearance.isCommentAppearance)(rendererAppearance) && allowTableAlignment;
       var lineLength = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
       var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && isTableAlignStart && ((0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidth <= lineLengthFixedWidth || (0, _appearance.isFullWidthAppearance)(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
       if (shouldCalculateLeftForAlignment) {
@@ -348,8 +348,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 +376,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 +392,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 +473,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.2";
 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.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/cjs/ui/Renderer/style.js

@@ -24,6 +24,7 @@ var _headingAnchor = require("../../react/nodes/heading-anchor");
 var _lightWeightCodeBlock = require("../../react/nodes/codeBlock/components/lightWeightCodeBlock");
 var _table = require("../../react/nodes/table");
 var _table2 = require("@atlaskit/editor-common/table");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
@@ -155,7 +156,7 @@ var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperPro
     var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock;
 
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression
-    return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n      .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: 400;\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t&\n          .", ",\n          &\n          .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n\t\t\ttable {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\ttable tr:first-of-type {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n      ", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), (0, _editorSharedStyles.editorFontSize)(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), _consts.RendererCssClassName.DOCUMENT, _mediaInline.mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles(colorMode), _styles.whitespaceSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_element_padding_changes_gate') ? _styles.blockquoteSharedStylesNew : _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(), (0, _styles.ruleSharedStyles)(), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, getAnnotationStyles(wrapperProps), (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, getShadowOverrides(), _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
+    return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n      .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: 400;\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t&\n          .", ",\n          &\n          .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n\t\t\ttable {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\ttable tr:first-of-type {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n      ", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n      // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n      &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), (0, _editorSharedStyles.editorFontSize)(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), _consts.RendererCssClassName.DOCUMENT, _mediaInline.mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles(colorMode), _styles.whitespaceSharedStyles, (0, _experiments.editorExperiment)('nested-dnd', true) ? _styles.blockquoteSharedStylesNew : _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(), (0, _styles.ruleSharedStyles)(), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, getAnnotationStyles(wrapperProps), (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, getShadowOverrides(), _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.RendererCssClassName.NUMBER_COLUMN, _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), _editorSharedStyles.akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
   };
 };
 var useGridRenderForCodeBlock = function useGridRenderForCodeBlock(codeBlockRenderAsBlock) {

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%
@@ -11,7 +10,7 @@ import { useFeatureFlags } from '../../../use-feature-flags';
 // User A creates a table with column widths → User A views it with reduced viewport space (eg. Confluence sidebar is open)
 const MAX_SCALING_PERCENT = 0.3;
 const MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
-const isTableResized = columnWidths => {
+const isTableColumnResized = columnWidths => {
   const filteredWidths = columnWidths.filter(width => width !== 0);
   return !!filteredWidths.length;
 };
@@ -49,24 +48,28 @@ const renderScaleDownColgroup = props => {
     isInsideOfBlockNode,
     isinsideMultiBodiedExtension,
     isTableScalingEnabled,
-    isTableFixedColumnWidthsOptionEnabled
+    isTableFixedColumnWidthsOptionEnabled,
+    allowTableResizing
   } = props;
   if (!columnWidths) {
     return [];
   }
 
-  // isTableResized checks if table columns were resized
-  const tableResized = isTableResized(columnWidths);
+  // isTableColumnResized checks if table columns were resized
+  const tableColumnResized = isTableColumnResized(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) {
-    // for tables with no column widths defined, assume that the real table width
-    // is defined by node.attrs.width
+
+  // 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 && !tableColumnResized) {
+    // when no columns are resized, each column should have equal width, equals to tableWidth / noOfColumns
     const tableWidth = (isNumberColumnEnabled ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth) - 1;
     const defaultColumnWidth = tableWidth / noOfColumns;
     targetWidths = new Array(noOfColumns).fill(defaultColumnWidth);
-  } else if (!tableResized) {
+  } else if (!tableColumnResized) {
     return null;
   }
   const sumOfColumns = colWidthSum(columnWidths);
@@ -74,7 +77,8 @@ const renderScaleDownColgroup = props => {
   // tables in the wild may be smaller than table container width (col resizing bugs, created before custom widths etc.)
   // this causes issues with num column scaling as we add a new table column in renderer
   const isTableSmallerThanContainer = sumOfColumns < tableContainerWidth - 1;
-  const forceScaleForNumColumn = isTableScalingEnabled && isNumberColumnEnabled && tableResized;
+  const forceScaleForNumColumn = isTableScalingEnabled && isNumberColumnEnabled && tableColumnResized;
+
   // when table resized and number column is enabled, we need to scale down the table in render
   if (forceScaleForNumColumn) {
     const scalePercentage = +((tableContainerWidth - akEditorTableNumberColumnWidth) / tableContainerWidth);
@@ -130,10 +134,11 @@ const renderScaleDownColgroup = props => {
   }
   // scaling down
   else if (renderWidth < tableWidth && !isTableWidthFixed) {
+    const shouldTable100ScaleDown = rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width);
     scaleDownPercent = calcScalePercent({
       renderWidth,
       tableWidth,
-      maxScale: maxScalingPercent
+      maxScale: shouldTable100ScaleDown ? 1 : maxScalingPercent
     });
   }
   return targetWidths.map(colWidth => {

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 || ''}`,