@atlaskit/renderer 124.17.8 → 124.18.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 124.18.0
+
+### Minor Changes
+
+- [`8677e7b660127`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8677e7b660127) -
+  EDITOR-3792 Rollup max width changes previously gated with editor_tinymce_full_width_mode into
+  combined frontend/backend flag confluence_max_width_content_appearance
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 124.17.8
 
 ### Patch Changes

package/dist/cjs/react/marks/breakout.js

@@ -27,7 +27,7 @@ var getWidth = function getWidth(width, mode) {
   if ((0, _experiments.editorExperiment)('advanced_layouts', true) && width) {
     return "min(".concat(width, "px, var(--ak-editor--breakout-container-without-gutter-width))");
   } else {
-    if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+    if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) {
       if (mode === 'max' || typeof width === 'number' && width >= _editorSharedStyles.akEditorFullWidthLayoutWidth) {
         return "min(".concat(_editorSharedStyles.akEditorMaxLayoutWidth, "px, var(--ak-editor--breakout-container-without-gutter-width))");
       }

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

@@ -234,12 +234,12 @@ var Colgroup = exports.Colgroup = function Colgroup(props) {
   }
   var colStyles = renderScaleDownColgroup(_objectSpread(_objectSpread({}, props), {}, {
     isTopLevelRenderer: isTopLevelRenderer,
-    isTableScalingEnabled: props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || props.rendererAppearance === 'comment' && (0, _experiments.editorExperiment)('support_table_in_comment', true, {
+    isTableScalingEnabled: props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) || props.rendererAppearance === 'comment' && (0, _experiments.editorExperiment)('support_table_in_comment', true, {
       exposure: true
     }) || props.rendererAppearance === 'comment' && (0, _experiments.editorExperiment)('support_table_in_comment_jira', true, {
       exposure: true
     }),
-    isTableFixedColumnWidthsOptionEnabled: !!(flags && 'tableWithFixedColumnWidthsOption' in flags && flags.tableWithFixedColumnWidthsOption) && (props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true))
+    isTableFixedColumnWidthsOptionEnabled: !!(flags && 'tableWithFixedColumnWidthsOption' in flags && flags.tableWithFixedColumnWidthsOption) && (props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)))
   }));
   if (!colStyles) {
     return null;

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

@@ -457,13 +457,13 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       var maxWidthLineLengthCSS = "min(".concat(_editorSharedStyles.akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
       var commentLineLength = isRenderWidthValid ? renderWidth : lineLengthFixedWidth;
       var isCommentAppearanceAndTableAlignmentEnabled = (0, _appearance.isCommentAppearance)(rendererAppearance) && allowTableAlignment;
-      var lineLength = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLength : (0, _appearance.isMaxWidthAppearance)(rendererAppearance) && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? maxWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
-      var lineLengthCSS = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLengthCSS : (0, _appearance.isMaxWidthAppearance)(rendererAppearance) && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
+      var lineLength = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLength : (0, _appearance.isMaxWidthAppearance)(rendererAppearance) && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) ? maxWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
+      var lineLengthCSS = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLengthCSS : (0, _appearance.isMaxWidthAppearance)(rendererAppearance) && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
 
       // Setting fixTableSSRResizing to false while FG logic is true in tableNew
       var fixTableSSRResizing = false;
       var tableWidthNew = fixTableSSRResizing ? (0, _nodeWidth.getTableContainerWidth)(tableNode) : tableWidth;
-      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && ((0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || (0, _appearance.isFullWidthAppearance)(rendererAppearance) || (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) && (0, _appearance.isMaxWidthAppearance)(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && ((0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || (0, _appearance.isFullWidthAppearance)(rendererAppearance) || ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) && (0, _appearance.isMaxWidthAppearance)(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
       var leftCSS;
       if (shouldCalculateLeftForAlignment) {
         left = (tableWidth - lineLength) / 2;

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

@@ -405,7 +405,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       }) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : "100cqw - ".concat(_style.FullPagePadding, "px * 2");
       var renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : "100cqw";
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
-        if (rendererAppearance === 'max' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+        if (rendererAppearance === 'max' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) {
           return "min(".concat(_editorSharedStyles.akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
         } else if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
           return "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
@@ -424,9 +424,9 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       var fullWidthLineLengthCSS = "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
       var maxWidthLineLengthCSS = "min(".concat(_editorSharedStyles.akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
       var isCommentAppearanceAndTableAlignmentEnabled = (0, _appearance.isCommentAppearance)(rendererAppearance) && allowTableAlignment;
-      var lineLengthCSS = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLengthCSS : (0, _appearance.isMaxWidthAppearance)(rendererAppearance) && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
+      var lineLengthCSS = (0, _appearance.isFullWidthAppearance)(rendererAppearance) ? fullWidthLineLengthCSS : (0, _appearance.isMaxWidthAppearance)(rendererAppearance) && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
       var tableWidthNew = (0, _nodeWidth.getTableContainerWidth)(tableNode);
-      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && ((0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || (0, _appearance.isFullWidthAppearance)(rendererAppearance) || (0, _appearance.isMaxWidthAppearance)(rendererAppearance) && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || isCommentAppearanceAndTableAlignmentEnabled);
+      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && ((0, _appearance.isFullPageAppearance)(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || (0, _appearance.isFullWidthAppearance)(rendererAppearance) || (0, _appearance.isMaxWidthAppearance)(rendererAppearance) && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) || isCommentAppearanceAndTableAlignmentEnabled);
       var leftCSS;
       if (shouldCalculateLeftForAlignment) {
         leftCSS = "(".concat(tableWidthCSS, " - ").concat(lineLengthCSS, ") / 2");
@@ -455,7 +455,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       // We can only use CSS to determine the width when we have a known width in container.
       // When appearance is full-page, full-width or comment we use CSS based width calculation.
       // Otherwise it's fixed table width (customized width) or inherit.
-      if (rendererAppearance === 'full-page' || rendererAppearance === 'full-width' || rendererAppearance === 'max' && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+      if (rendererAppearance === 'full-page' || rendererAppearance === 'full-width' || rendererAppearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) {
         finalTableContainerWidth = allowTableResizing ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
       }
       if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {

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

@@ -1669,13 +1669,13 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
         '--ak-renderer-editor-font-heading-h6': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h6')),
         '--ak-renderer-editor-font-normal-text': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.body'))
       },
-      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, (appearance === 'full-width' || appearance === 'max' && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) && rendererMaxWidthStyles, !(0, _platformFeatureFlags.fg)('platform_editor_ai_generic_prep_for_aifc_2') && telepointerStyles, (0, _platformFeatureFlags.fg)('platform_editor_ai_generic_prep_for_aifc_2') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (contentMode === 'compact' || contentMode === 'dense') && isCompactModeSupported && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, (0, _expValEquals.expValEquals)('platform_editor_text_highlight_padding', 'isEnabled', true) &&
+      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) && rendererMaxWidthStyles, !(0, _platformFeatureFlags.fg)('platform_editor_ai_generic_prep_for_aifc_2') && telepointerStyles, (0, _platformFeatureFlags.fg)('platform_editor_ai_generic_prep_for_aifc_2') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (contentMode === 'compact' || contentMode === 'dense') && isCompactModeSupported && extensionStyle, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, (0, _expValEquals.expValEquals)('platform_editor_text_highlight_padding', 'isEnabled', true) &&
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning
       (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && (0, _platformFeatureFlags.fg)('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
       // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-      (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true) && syncBlockStyles],
+      (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true) && syncBlockStyles],
       "data-testid": testId
     }, children)
   );

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

@@ -69,7 +69,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "124.17.7";
+var packageVersion = "0.0.0-development";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -721,7 +721,7 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
   // Only apply container-type = inline-size when having a known width in full-page/full-width/comment mode.
   // Otherwise when appearance is unspecified the renderer size is decided by the content.
   // In this case we can't set the container-type = inline-size as it will collapse width to 0.
-  return (appearance === 'full-page' || appearance === 'full-width' || (0, _expValEqualsNoExposure.expValEqualsNoExposure)('editor_tinymce_full_width_mode', 'isEnabled', true) && appearance === 'max') &&
+  return (appearance === 'full-page' || appearance === 'full-width' || ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) && appearance === 'max') &&
   // In case of having excerpt-include on page there are multiple renderers nested.
   // Make sure only the root renderer is set to be query container.
   isTopLevelRenderer && allowRendererContainerStyles && (0, _platformFeatureFlags.fg)('platform-ssr-table-resize') ? (0, _react2.jsx)("div", {
@@ -783,7 +783,7 @@ var RendererWithAnnotationSelection = function RendererWithAnnotationSelection(p
   var innerRef = props.innerRef || localRef;
 
   // @see https://hello.jira.atlassian.cloud/browse/EDITOR-3389
-  if (props.appearance === 'max' && !(0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+  if (props.appearance === 'max' && !(0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) && !(0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true)) {
     props.appearance = 'full-width';
   }
   if (!allowAnnotations) {

package/dist/es2019/react/marks/breakout.js

@@ -19,7 +19,7 @@ const getWidth = (width, mode) => {
   if (editorExperiment('advanced_layouts', true) && width) {
     return `min(${width}px, var(--ak-editor--breakout-container-without-gutter-width))`;
   } else {
-    if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+    if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) {
       if (mode === 'max' || typeof width === 'number' && width >= akEditorFullWidthLayoutWidth) {
         return `min(${akEditorMaxLayoutWidth}px, var(--ak-editor--breakout-container-without-gutter-width))`;
       }

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

@@ -223,12 +223,12 @@ export const Colgroup = props => {
   const colStyles = renderScaleDownColgroup({
     ...props,
     isTopLevelRenderer,
-    isTableScalingEnabled: props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment', true, {
+    isTableScalingEnabled: props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment', true, {
       exposure: true
     }) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment_jira', true, {
       exposure: true
     }),
-    isTableFixedColumnWidthsOptionEnabled: !!(flags && 'tableWithFixedColumnWidthsOption' in flags && flags.tableWithFixedColumnWidthsOption) && (props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true))
+    isTableFixedColumnWidthsOptionEnabled: !!(flags && 'tableWithFixedColumnWidthsOption' in flags && flags.tableWithFixedColumnWidthsOption) && (props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)))
   });
   if (!colStyles) {
     return null;

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

@@ -400,13 +400,13 @@ export class TableContainer extends React.Component {
     const maxWidthLineLengthCSS = `min(${akEditorMaxWidthLayoutWidth}px, ${renderWidthCSS})`;
     const commentLineLength = isRenderWidthValid ? renderWidth : lineLengthFixedWidth;
     const isCommentAppearanceAndTableAlignmentEnabled = isCommentAppearance(rendererAppearance) && allowTableAlignment;
-    const lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : isMaxWidthAppearance(rendererAppearance) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? maxWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
-    const lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isMaxWidthAppearance(rendererAppearance) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : `${lineLengthFixedWidth}px`;
+    const lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : isMaxWidthAppearance(rendererAppearance) && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) ? maxWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
+    const lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isMaxWidthAppearance(rendererAppearance) && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : `${lineLengthFixedWidth}px`;
 
     // Setting fixTableSSRResizing to false while FG logic is true in tableNew
     const fixTableSSRResizing = false;
     const tableWidthNew = fixTableSSRResizing ? getTableContainerWidth(tableNode) : tableWidth;
-    const shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) && isMaxWidthAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+    const shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) && isMaxWidthAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
     let leftCSS;
     if (shouldCalculateLeftForAlignment) {
       left = (tableWidth - lineLength) / 2;

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

@@ -349,7 +349,7 @@ export class TableContainer extends React.Component {
     }) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : `100cqw - ${FullPagePadding}px * 2`;
     const renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : `100cqw`;
     const calcDefaultLayoutWidthByAppearance = (rendererAppearance, tableNode) => {
-      if (rendererAppearance === 'max' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+      if (rendererAppearance === 'max' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) {
         return `min(${akEditorMaxWidthLayoutWidth}px, ${renderWidthCSS})`;
       } else if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
         return `min(${akEditorFullWidthLayoutWidth}px, ${renderWidthCSS})`;
@@ -368,9 +368,9 @@ export class TableContainer extends React.Component {
     const fullWidthLineLengthCSS = `min(${akEditorFullWidthLayoutWidth}px, ${renderWidthCSS})`;
     const maxWidthLineLengthCSS = `min(${akEditorMaxWidthLayoutWidth}px, ${renderWidthCSS})`;
     const isCommentAppearanceAndTableAlignmentEnabled = isCommentAppearance(rendererAppearance) && allowTableAlignment;
-    const lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isMaxWidthAppearance(rendererAppearance) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : `${lineLengthFixedWidth}px`;
+    const lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isMaxWidthAppearance(rendererAppearance) && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : `${lineLengthFixedWidth}px`;
     const tableWidthNew = getTableContainerWidth(tableNode);
-    const shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isMaxWidthAppearance(rendererAppearance) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || isCommentAppearanceAndTableAlignmentEnabled);
+    const shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isMaxWidthAppearance(rendererAppearance) && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) || isCommentAppearanceAndTableAlignmentEnabled);
     let leftCSS;
     if (shouldCalculateLeftForAlignment) {
       leftCSS = `(${tableWidthCSS} - ${lineLengthCSS}) / 2`;
@@ -399,7 +399,7 @@ export class TableContainer extends React.Component {
     // We can only use CSS to determine the width when we have a known width in container.
     // When appearance is full-page, full-width or comment we use CSS based width calculation.
     // Otherwise it's fixed table width (customized width) or inherit.
-    if (rendererAppearance === 'full-page' || rendererAppearance === 'full-width' || rendererAppearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+    if (rendererAppearance === 'full-page' || rendererAppearance === 'full-width' || rendererAppearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) {
       finalTableContainerWidth = allowTableResizing ? `calc(${tableWidthCSS})` : 'inherit';
     }
     if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {

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

@@ -2097,13 +2097,13 @@ export const RendererStyleContainer = props => {
         '--ak-renderer-editor-font-heading-h6': `${editorUGCToken('editor.font.heading.h6')}`,
         '--ak-renderer-editor-font-normal-text': `${editorUGCToken('editor.font.body')}`
       },
-      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, (appearance === 'full-width' || appearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) && rendererMaxWidthStyles, !fg('platform_editor_ai_generic_prep_for_aifc_2') && telepointerStyles, fg('platform_editor_ai_generic_prep_for_aifc_2') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (contentMode === 'compact' || contentMode === 'dense') && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
+      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) && rendererMaxWidthStyles, !fg('platform_editor_ai_generic_prep_for_aifc_2') && telepointerStyles, fg('platform_editor_ai_generic_prep_for_aifc_2') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (contentMode === 'compact' || contentMode === 'dense') && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning
       fg('editor_inline_comments_on_inline_nodes') && fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
       // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-      fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, expValEquals('platform_synced_block', 'isEnabled', true) && syncBlockStyles],
+      fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, expValEquals('platform_synced_block', 'isEnabled', true) && syncBlockStyles],
       "data-testid": testId
     }, children)
   );

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

@@ -55,7 +55,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 const TABLE_INFO_TIMEOUT = 10000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "124.17.7";
+const packageVersion = "0.0.0-development";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -707,7 +707,7 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
   // Only apply container-type = inline-size when having a known width in full-page/full-width/comment mode.
   // Otherwise when appearance is unspecified the renderer size is decided by the content.
   // In this case we can't set the container-type = inline-size as it will collapse width to 0.
-  return (appearance === 'full-page' || appearance === 'full-width' || expValEqualsNoExposure('editor_tinymce_full_width_mode', 'isEnabled', true) && appearance === 'max') &&
+  return (appearance === 'full-page' || appearance === 'full-width' || (expValEqualsNoExposure('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) && appearance === 'max') &&
   // In case of having excerpt-include on page there are multiple renderers nested.
   // Make sure only the root renderer is set to be query container.
   isTopLevelRenderer && allowRendererContainerStyles && fg('platform-ssr-table-resize') ? jsx("div", {
@@ -770,7 +770,7 @@ const RendererWithAnnotationSelection = props => {
   const innerRef = props.innerRef || localRef;
 
   // @see https://hello.jira.atlassian.cloud/browse/EDITOR-3389
-  if (props.appearance === 'max' && !expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+  if (props.appearance === 'max' && !expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) && !expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) {
     props.appearance = 'full-width';
   }
   if (!allowAnnotations) {

package/dist/esm/react/marks/breakout.js

@@ -19,7 +19,7 @@ var getWidth = function getWidth(width, mode) {
   if (editorExperiment('advanced_layouts', true) && width) {
     return "min(".concat(width, "px, var(--ak-editor--breakout-container-without-gutter-width))");
   } else {
-    if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+    if (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) {
       if (mode === 'max' || typeof width === 'number' && width >= akEditorFullWidthLayoutWidth) {
         return "min(".concat(akEditorMaxLayoutWidth, "px, var(--ak-editor--breakout-container-without-gutter-width))");
       }

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

@@ -228,12 +228,12 @@ export var Colgroup = function Colgroup(props) {
   }
   var colStyles = renderScaleDownColgroup(_objectSpread(_objectSpread({}, props), {}, {
     isTopLevelRenderer: isTopLevelRenderer,
-    isTableScalingEnabled: props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment', true, {
+    isTableScalingEnabled: props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment', true, {
       exposure: true
     }) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment_jira', true, {
       exposure: true
     }),
-    isTableFixedColumnWidthsOptionEnabled: !!(flags && 'tableWithFixedColumnWidthsOption' in flags && flags.tableWithFixedColumnWidthsOption) && (props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true))
+    isTableFixedColumnWidthsOptionEnabled: !!(flags && 'tableWithFixedColumnWidthsOption' in flags && flags.tableWithFixedColumnWidthsOption) && (props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width' || props.rendererAppearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)))
   }));
   if (!colStyles) {
     return null;

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

@@ -450,13 +450,13 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       var maxWidthLineLengthCSS = "min(".concat(akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
       var commentLineLength = isRenderWidthValid ? renderWidth : lineLengthFixedWidth;
       var isCommentAppearanceAndTableAlignmentEnabled = isCommentAppearance(rendererAppearance) && allowTableAlignment;
-      var lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : isMaxWidthAppearance(rendererAppearance) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? maxWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
-      var lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isMaxWidthAppearance(rendererAppearance) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
+      var lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : isMaxWidthAppearance(rendererAppearance) && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) ? maxWidthLineLength : isCommentAppearanceAndTableAlignmentEnabled ? commentLineLength : lineLengthFixedWidth;
+      var lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isMaxWidthAppearance(rendererAppearance) && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
 
       // Setting fixTableSSRResizing to false while FG logic is true in tableNew
       var fixTableSSRResizing = false;
       var tableWidthNew = fixTableSSRResizing ? getTableContainerWidth(tableNode) : tableWidth;
-      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) && isMaxWidthAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
+      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) && isMaxWidthAppearance(rendererAppearance) || isCommentAppearanceAndTableAlignmentEnabled);
       var leftCSS;
       if (shouldCalculateLeftForAlignment) {
         left = (tableWidth - lineLength) / 2;

package/dist/esm/react/nodes/tableNew.js

@@ -399,7 +399,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       }) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : "100cqw - ".concat(FullPagePadding, "px * 2");
       var renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : "100cqw";
       var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
-        if (rendererAppearance === 'max' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+        if (rendererAppearance === 'max' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) {
           return "min(".concat(akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
         } else if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
           return "min(".concat(akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
@@ -418,9 +418,9 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       var fullWidthLineLengthCSS = "min(".concat(akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
       var maxWidthLineLengthCSS = "min(".concat(akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
       var isCommentAppearanceAndTableAlignmentEnabled = isCommentAppearance(rendererAppearance) && allowTableAlignment;
-      var lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isMaxWidthAppearance(rendererAppearance) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
+      var lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isMaxWidthAppearance(rendererAppearance) && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
       var tableWidthNew = getTableContainerWidth(tableNode);
-      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isMaxWidthAppearance(rendererAppearance) && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || isCommentAppearanceAndTableAlignmentEnabled);
+      var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isMaxWidthAppearance(rendererAppearance) && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) || isCommentAppearanceAndTableAlignmentEnabled);
       var leftCSS;
       if (shouldCalculateLeftForAlignment) {
         leftCSS = "(".concat(tableWidthCSS, " - ").concat(lineLengthCSS, ") / 2");
@@ -449,7 +449,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       // We can only use CSS to determine the width when we have a known width in container.
       // When appearance is full-page, full-width or comment we use CSS based width calculation.
       // Otherwise it's fixed table width (customized width) or inherit.
-      if (rendererAppearance === 'full-page' || rendererAppearance === 'full-width' || rendererAppearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+      if (rendererAppearance === 'full-page' || rendererAppearance === 'full-width' || rendererAppearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) {
         finalTableContainerWidth = allowTableResizing ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
       }
       if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {

package/dist/esm/ui/Renderer/RendererStyleContainer.js

@@ -1662,13 +1662,13 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
         '--ak-renderer-editor-font-heading-h6': "".concat(editorUGCToken('editor.font.heading.h6')),
         '--ak-renderer-editor-font-normal-text': "".concat(editorUGCToken('editor.font.body'))
       },
-      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, (appearance === 'full-width' || appearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) && rendererMaxWidthStyles, !fg('platform_editor_ai_generic_prep_for_aifc_2') && telepointerStyles, fg('platform_editor_ai_generic_prep_for_aifc_2') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (contentMode === 'compact' || contentMode === 'dense') && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
+      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && !isTableResizingEnabled(appearance) && rendererFullWidthStylesForTableResizing, appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) && rendererMaxWidthStyles, !fg('platform_editor_ai_generic_prep_for_aifc_2') && telepointerStyles, fg('platform_editor_ai_generic_prep_for_aifc_2') && rovoTelepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, fg('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (contentMode === 'compact' || contentMode === 'dense') && isCompactModeSupported && extensionStyle, fg('platform_editor_typography_ugc') ? isCompactModeSupported ? paragraphStylesUGCScaledMargin : paragraphSharedStylesWithEditorUGC : isCompactModeSupported ? paragraphSharedStyleScaledMargin : paragraphSharedStyles, listsSharedStyles, browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, fg('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, expValEquals('platform_editor_text_highlight_padding', 'isEnabled', true) &&
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       textHighlightPaddingStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning
       fg('editor_inline_comments_on_inline_nodes') && fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
       // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-      fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, expValEquals('platform_synced_block', 'isEnabled', true) && syncBlockStyles],
+      fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, expValEquals('platform_synced_block', 'isEnabled', true) && syncBlockStyles],
       "data-testid": testId
     }, children)
   );

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

@@ -60,7 +60,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "124.17.7";
+var packageVersion = "0.0.0-development";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -712,7 +712,7 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
   // Only apply container-type = inline-size when having a known width in full-page/full-width/comment mode.
   // Otherwise when appearance is unspecified the renderer size is decided by the content.
   // In this case we can't set the container-type = inline-size as it will collapse width to 0.
-  return (appearance === 'full-page' || appearance === 'full-width' || expValEqualsNoExposure('editor_tinymce_full_width_mode', 'isEnabled', true) && appearance === 'max') &&
+  return (appearance === 'full-page' || appearance === 'full-width' || (expValEqualsNoExposure('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) && appearance === 'max') &&
   // In case of having excerpt-include on page there are multiple renderers nested.
   // Make sure only the root renderer is set to be query container.
   isTopLevelRenderer && allowRendererContainerStyles && fg('platform-ssr-table-resize') ? jsx("div", {
@@ -774,7 +774,7 @@ var RendererWithAnnotationSelection = function RendererWithAnnotationSelection(p
   var innerRef = props.innerRef || localRef;
 
   // @see https://hello.jira.atlassian.cloud/browse/EDITOR-3389
-  if (props.appearance === 'max' && !expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true)) {
+  if (props.appearance === 'max' && !expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) && !expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) {
     props.appearance = 'full-width';
   }
   if (!allowAnnotations) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "124.17.8",
+	"version": "124.18.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
 		"@atlaskit/link-datasource": "^4.30.0",
 		"@atlaskit/link-extractors": "^2.4.0",
 		"@atlaskit/linking-common": "^9.9.0",
-		"@atlaskit/media-card": "^79.9.0",
+		"@atlaskit/media-card": "^79.10.0",
 		"@atlaskit/media-client": "^35.7.0",
 		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/media-common": "^12.3.0",
@@ -57,7 +57,7 @@
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^15.7.0",
+		"@atlaskit/tmp-editor-statsig": "^15.8.0",
 		"@atlaskit/tokens": "^8.4.0",
 		"@atlaskit/tooltip": "^20.11.0",
 		"@atlaskit/visually-hidden": "^3.0.0",