@atlaskit/renderer 124.17.7 → 124.18.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @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
+
+- [`a4ada9643d4b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a4ada9643d4b0) -
+  Cleanup FG platform_editor_fix_sllv_margin_renderer
+- [`dcc6a3e73f414`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dcc6a3e73f414) -
+  [ux] EDITOR-3304 add offline error state for sync blocks and update other error UI to match new
+  designs
+- Updated dependencies
+
 ## 124.17.7
 
 ### 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/blockCard.js

@@ -25,15 +25,6 @@ var _PortalContext = require("../../ui/Renderer/PortalContext");
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-var datasourceContainerStyle = (0, _react.css)({
-  borderRadius: "var(--ds-radius-large, 8px)",
-  border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N40, ")")),
-  overflow: 'hidden',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginLeft: '50%',
-  marginBottom: "var(--ds-space-150, 0.75rem)",
-  transform: 'translateX(-50%)'
-});
 var datasourceContainerStyleWithMarginTop = (0, _react.css)({
   borderRadius: "var(--ds-radius-large, 8px)",
   border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(_colors.N40, ")")),
@@ -116,7 +107,7 @@ function BlockCard(props) {
       }, cardProps), (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref5) {
         var width = _ref5.width;
         return (0, _react.jsx)("div", {
-          css: (0, _platformFeatureFlags.fg)('platform_editor_fix_sllv_margin_renderer') ? datasourceContainerStyleWithMarginTop : datasourceContainerStyle,
+          css: datasourceContainerStyleWithMarginTop,
           "data-testid": "renderer-datasource-table",
           "data-local-id": localId,
           style: {

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

@@ -28,6 +28,7 @@ var _ugcTokens = require("@atlaskit/editor-common/ugc-tokens");
 var _getBaseFontSize = require("./get-base-font-size");
 var _emoji = require("@atlaskit/editor-common/emoji");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _css, _css8;
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
@@ -1623,6 +1624,13 @@ var denseStyles = (0, _react.css)((0, _defineProperty2.default)((0, _definePrope
     marginTop: RENDERER_LIST_DENSE_GAP
   }
 }));
+var syncBlockStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockSharedCssClassName.error), {
+  backgroundColor: "var(--ds-background-disabled, #17171708)",
+  borderRadius: "var(--ds-radius-small, 3px)"
+}), ".".concat(_syncBlock.SyncBlockSharedCssClassName.loading), {
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)"),
+  borderRadius: "var(--ds-radius-small, 3px)"
+}));
 var RendererStyleContainer = exports.RendererStyleContainer = function RendererStyleContainer(props) {
   var onClick = props.onClick,
     onMouseDown = props.onMouseDown,
@@ -1661,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, _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.6";
+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/blockCard.js

@@ -17,15 +17,6 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { N40 } from '@atlaskit/theme/colors';
 import { calcBreakoutWidth, canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { usePortal } from '../../ui/Renderer/PortalContext';
-const datasourceContainerStyle = css({
-  borderRadius: `${"var(--ds-radius-large, 8px)"}`,
-  border: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border, ${N40})`}`,
-  overflow: 'hidden',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginLeft: '50%',
-  marginBottom: `${"var(--ds-space-150, 0.75rem)"}`,
-  transform: 'translateX(-50%)'
-});
 const datasourceContainerStyleWithMarginTop = css({
   borderRadius: `${"var(--ds-radius-large, 8px)"}`,
   border: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border, ${N40})`}`,
@@ -104,7 +95,7 @@ export default function BlockCard(props) {
       }, cardProps), jsx(WidthConsumer, null, ({
         width
       }) => jsx("div", {
-        css: fg('platform_editor_fix_sllv_margin_renderer') ? datasourceContainerStyleWithMarginTop : datasourceContainerStyle,
+        css: datasourceContainerStyleWithMarginTop,
         "data-testid": "renderer-datasource-table",
         "data-local-id": localId,
         style: {

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

@@ -28,6 +28,7 @@ import { editorUGCToken } from '@atlaskit/editor-common/ugc-tokens';
 import { getBaseFontSize } from './get-base-font-size';
 import { EmojiSharedCssClassName, defaultEmojiHeight, defaultDenseEmojiHeight, scaledEmojiHeightH1, scaledEmojiHeightH2, scaledEmojiHeightH3, scaledEmojiHeightH4, denseEmojiHeightH1, denseEmojiHeightH2, denseEmojiHeightH3, denseEmojiHeightH4 } from '@atlaskit/editor-common/emoji';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 const wrappedMediaBreakoutPoint = 410;
 const TELEPOINTER_ID = 'ai-streaming-telepointer';
 const tableShadowWidth = 32;
@@ -2046,6 +2047,16 @@ const denseStyles = css({
     }
   }
 });
+const syncBlockStyles = css({
+  [`.${SyncBlockSharedCssClassName.error}`]: {
+    backgroundColor: "var(--ds-background-disabled, #17171708)",
+    borderRadius: "var(--ds-radius-small, 3px)"
+  },
+  [`.${SyncBlockSharedCssClassName.loading}`]: {
+    boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`,
+    borderRadius: "var(--ds-radius-small, 3px)"
+  }
+});
 export const RendererStyleContainer = props => {
   const {
     onClick,
@@ -2086,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],
+      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.6";
+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/blockCard.js

@@ -17,15 +17,6 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { N40 } from '@atlaskit/theme/colors';
 import { calcBreakoutWidth, canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { usePortal } from '../../ui/Renderer/PortalContext';
-var datasourceContainerStyle = css({
-  borderRadius: "var(--ds-radius-large, 8px)",
-  border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(N40, ")")),
-  overflow: 'hidden',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginLeft: '50%',
-  marginBottom: "var(--ds-space-150, 0.75rem)",
-  transform: 'translateX(-50%)'
-});
 var datasourceContainerStyleWithMarginTop = css({
   borderRadius: "var(--ds-radius-large, 8px)",
   border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(N40, ")")),
@@ -108,7 +99,7 @@ export default function BlockCard(props) {
       }, cardProps), jsx(WidthConsumer, null, function (_ref5) {
         var width = _ref5.width;
         return jsx("div", {
-          css: fg('platform_editor_fix_sllv_margin_renderer') ? datasourceContainerStyleWithMarginTop : datasourceContainerStyle,
+          css: datasourceContainerStyleWithMarginTop,
           "data-testid": "renderer-datasource-table",
           "data-local-id": localId,
           style: {

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

@@ -30,6 +30,7 @@ import { editorUGCToken } from '@atlaskit/editor-common/ugc-tokens';
 import { getBaseFontSize } from './get-base-font-size';
 import { EmojiSharedCssClassName, defaultEmojiHeight, defaultDenseEmojiHeight, scaledEmojiHeightH1, scaledEmojiHeightH2, scaledEmojiHeightH3, scaledEmojiHeightH4, denseEmojiHeightH1, denseEmojiHeightH2, denseEmojiHeightH3, denseEmojiHeightH4 } from '@atlaskit/editor-common/emoji';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 var wrappedMediaBreakoutPoint = 410;
 var TELEPOINTER_ID = 'ai-streaming-telepointer';
 var tableShadowWidth = 32;
@@ -1616,6 +1617,13 @@ var denseStyles = css(_defineProperty(_defineProperty(_defineProperty({}, ".".co
     marginTop: RENDERER_LIST_DENSE_GAP
   }
 }));
+var syncBlockStyles = css(_defineProperty(_defineProperty({}, ".".concat(SyncBlockSharedCssClassName.error), {
+  backgroundColor: "var(--ds-background-disabled, #17171708)",
+  borderRadius: "var(--ds-radius-small, 3px)"
+}), ".".concat(SyncBlockSharedCssClassName.loading), {
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)"),
+  borderRadius: "var(--ds-radius-small, 3px)"
+}));
 export var RendererStyleContainer = function RendererStyleContainer(props) {
   var onClick = props.onClick,
     onMouseDown = props.onMouseDown,
@@ -1654,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],
+      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.6";
+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.7",
+	"version": "124.18.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,8 +30,8 @@
 		"@atlaskit/analytics-namespaced-context": "^7.2.0",
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/browser-apis": "^0.0.1",
-		"@atlaskit/button": "^23.6.0",
-		"@atlaskit/code": "^17.3.0",
+		"@atlaskit/button": "^23.7.0",
+		"@atlaskit/code": "^17.4.0",
 		"@atlaskit/editor-json-transformer": "^8.31.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -43,8 +43,8 @@
 		"@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-client": "^35.6.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",
 		"@atlaskit/media-filmstrip": "^51.1.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",
@@ -81,14 +81,14 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/analytics-gas-types": "^5.1.0",
-		"@atlaskit/checkbox": "^17.1.0",
+		"@atlaskit/checkbox": "^17.2.0",
 		"@atlaskit/link-provider": "^4.0.0",
 		"@atlaskit/link-test-helpers": "^9.0.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"@atlaskit/media-integration-test-helpers": "workspace:^",
 		"@atlaskit/media-test-helpers": "^39.0.0",
 		"@atlaskit/mention": "^24.4.0",
-		"@atlaskit/modal-dialog": "^14.7.0",
+		"@atlaskit/modal-dialog": "^14.8.0",
 		"@atlaskit/navigation-next": "patch:@atlaskit/navigation-next@npm%3A9.0.17#~/.yarn/patches/@atlaskit-navigation-next-npm-9.0.17-958ca0ab9d.patch",
 		"@atlaskit/profilecard": "^24.24.0",
 		"@atlaskit/util-data-test": "^18.3.0",
@@ -233,9 +233,6 @@
 		"media-perf-uplift-mutation-fix": {
 			"type": "boolean"
 		},
-		"platform_editor_fix_sllv_margin_renderer": {
-			"type": "boolean"
-		},
 		"platform_editor_table_height_analytics_event": {
 			"type": "boolean"
 		},