@atlaskit/renderer 118.6.10 → 118.6.12

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/renderer
 
+## 118.6.12
+
+### Patch Changes
+
+- [#168516](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/168516)
+  [`c5bf272abb6bc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c5bf272abb6bc) -
+  Allow extra prop in InlineNodeRendererWrapper
+- [#166270](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166270)
+  [`231ec9798652d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/231ec9798652d) -
+  [ux] Added hideIconLoadingSkeleton prop to CardSSR to allow for hiding the loading skeleton for
+  image icons in the title of block cards. Set to true in the renderer.
+- Updated dependencies
+
+## 118.6.11
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 118.6.10
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -4,7 +4,7 @@
         "declaration": true,
         "target": "es5",
         "composite": true,
-        "outDir": "../dist",
+        "outDir": "../../../../../confluence/tsDist/@atlaskit__renderer",
         "rootDir": "../"
     },
     "include": [

package/dist/cjs/i18n/sk.js

@@ -13,11 +13,13 @@ exports.default = void 0;
  */
 //Slovak
 var _default = exports.default = {
-  'fabric.editor.headingLink.ascSortingLabel': 'None',
-  'fabric.editor.headingLink.copied': 'None',
-  'fabric.editor.headingLink.copyAnchorLink': 'None',
-  'fabric.editor.headingLink.copyAriaLabel': 'None',
-  'fabric.editor.headingLink.failedToCopy': 'None',
+  'fabric.editor.headingLink.ascSortingLabel': 'vzostupne',
+  'fabric.editor.headingLink.copied': 'Skopírované!',
+  'fabric.editor.headingLink.copyAnchorLink': 'Skopírovať prepojenie do nadpisu',
+  'fabric.editor.headingLink.copyAriaLabel': 'Kopírovať',
+  'fabric.editor.headingLink.descSortingLabel': 'zostupne',
+  'fabric.editor.headingLink.failedToCopy': 'Nepodarilo sa skopírovať',
+  'fabric.editor.headingLink.noneSortingLabel': 'žiadne',
   'fabric.editor.inlineComment.marker.end': 'koniec vnoreného komentára',
   'fabric.editor.inlineComment.marker.start': 'začiatok vnoreného komentára'
 };

package/dist/cjs/i18n/sr.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/* prettier-ignore */
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Serbian (Serbia) [sr-RS]
+var _default = exports.default = {
+  'fabric.editor.headingLink.ascSortingLabel': 'rastući',
+  'fabric.editor.headingLink.copied': 'Kopirano!',
+  'fabric.editor.headingLink.copyAnchorLink': 'Kopiraj link naslova',
+  'fabric.editor.headingLink.copyAriaLabel': 'Kopiraj',
+  'fabric.editor.headingLink.descSortingLabel': 'opadajući',
+  'fabric.editor.headingLink.failedToCopy': 'Kopiranje nije uspelo',
+  'fabric.editor.headingLink.noneSortingLabel': 'nijedno',
+  'fabric.editor.inlineComment.marker.end': 'kraj umetnutog komentara',
+  'fabric.editor.inlineComment.marker.start': 'početak umetnutog komentara'
+};

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

@@ -11,6 +11,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -24,6 +25,26 @@ var wrapperStyles = (0, _react.css)({
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });
+var CONTAINER_WITHOUT_GUTTER = "calc(100cqw - ".concat(_editorSharedStyles.akEditorGutterPadding, "px * 2)");
+var getWidth = function getWidth(width, mode) {
+  if ((0, _experiments.editorExperiment)('advanced_layouts', true) && width) {
+    return "min(".concat(width, "px, ").concat(CONTAINER_WITHOUT_GUTTER, ")");
+  } else {
+    if (mode === 'full-width') {
+      return "max(".concat(_editorSharedStyles.akEditorDefaultLayoutWidth, "px, min(").concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, ").concat(CONTAINER_WITHOUT_GUTTER, "))");
+    }
+    if (mode === 'wide') {
+      return "min(var(--ak-editor--breakout-wide-layout-width), ".concat(CONTAINER_WITHOUT_GUTTER, ")");
+    }
+  }
+};
+
+/**
+ * React component that renders a breakout mark with dynamic width based on editor layout (wide or full-width).
+ *
+ * @param props - Breakout mark attrs, such as mode (wide or full-width).
+ * @returns The rendered breakout mark as a React element.
+ */
 function Breakout(props) {
   return (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref) {
     var width = _ref.width;
@@ -36,7 +57,10 @@ function Breakout(props) {
       'data-has-width': !!props.width,
       'data-width': props.width
     }, {
-      style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      style: (0, _platformFeatureFlags.fg)('platform_breakout_cls') ? {
+        width: getWidth('width' in props ? props.width : null, props.mode)
+      } : {
         width: (0, _experiments.editorExperiment)('advanced_layouts', true) ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         (0, _utils.calcBreakoutWithCustomWidth)(props.mode, 'width' in props ? props.width : null, width) :

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

@@ -134,7 +134,8 @@ function BlockCard(props) {
       // eslint-disable-next-line react/jsx-props-no-spreading
     }, cardProps, {
       url: url,
-      onError: onError
+      onError: onError,
+      hideIconLoadingSkeleton: (0, _platformFeatureFlags.fg)('platform_fix_block_card_img_icon_vc')
     }));
   } else {
     cardComponent = (0, _react.jsx)(_smartCard.Card, (0, _extends2.default)({

package/dist/cjs/ui/Expand.js

@@ -15,7 +15,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
-var _chevronRight2 = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-right"));
+var _chevronRight2 = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
@@ -238,7 +238,8 @@ function Expand(_ref) {
   }, (0, _react.jsx)(_chevronRight2.default, {
     label: label,
     LEGACY_fallbackIcon: _chevronRight.default,
-    spacing: "spacious"
+    spacing: "spacious",
+    size: "small"
   })) : (0, _react.jsx)(_tooltip.default, {
     content: label,
     position: "top"
@@ -251,7 +252,8 @@ function Expand(_ref) {
   }, (0, _react.jsx)(_chevronRight2.default, {
     label: label,
     LEGACY_fallbackIcon: _chevronRight.default,
-    spacing: "spacious"
+    spacing: "spacious",
+    size: "small"
   }))), (0, _react.jsx)("span", {
     css: titleStyles,
     id: id

package/dist/cjs/ui/ExtensionRenderer.js

@@ -134,10 +134,14 @@ function ExtensionRenderer(props) {
   });
 }
 var InlineNodeRendererWrapper = exports.InlineNodeRendererWrapper = function InlineNodeRendererWrapper(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    ssrPlaceholder = _ref.ssrPlaceholder,
+    ssrPlaceholderReplace = _ref.ssrPlaceholderReplace;
   return (0, _react.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "inline-extension-renderer",
-    css: inlineExtensionStyle
+    css: inlineExtensionStyle,
+    "data-ssr-placeholder": ssrPlaceholder,
+    "data-ssr-placeholder-replace": ssrPlaceholderReplace
   }, children);
 };

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

@@ -24,7 +24,7 @@ var _table2 = require("@atlaskit/editor-common/table");
 var _lightWeightCodeBlock = require("../../react/nodes/codeBlock/components/lightWeightCodeBlock");
 var _ugcTokens = require("@atlaskit/editor-common/ugc-tokens");
 var _getBaseFontSize = require("./get-base-font-size");
-var _css, _css3;
+var _css, _css4;
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
@@ -139,6 +139,14 @@ var baseStyles = (0, _react.css)((_css = {
 }), (0, _defineProperty2.default)(_css, '& span[data-placeholder]', {
   color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
 })));
+var akEditorBreakpointForSmallDevice = '1266px';
+
+// Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
+var responsiveBreakoutWidth = (0, _react.css)((0, _defineProperty2.default)({
+  '--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, "px")
+}, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
+  '--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidth, "px")
+}));
 var hideHeadingCopyLinkWrapperStyles = (0, _react.css)({
   '& h1, & h2, & h3, & h4, & h5, & h6': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_headingAnchor.HeadingAnchorWrapperClassName), {
     '&:focus-within': {
@@ -476,13 +484,13 @@ var paragraphSharedStyles = (0, _react.css)({
     letterSpacing: '-0.005em'
   }
 });
-var listsSharedStyles = (0, _react.css)((_css3 = {
+var listsSharedStyles = (0, _react.css)((_css4 = {
   /* =============== INDENTATION SPACING ========= */
   'ul, ol': {
     boxSizing: 'border-box',
     paddingLeft: "var(--ed--list--item-counter--padding, ".concat(_styles.listItemCounterPadding, "px)")
   }
-}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css3, "".concat(_adfSchema.orderedListSelector, ", ").concat(_adfSchema.bulletListSelector), {
+}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css4, "".concat(_adfSchema.orderedListSelector, ", ").concat(_adfSchema.bulletListSelector), {
   /*
    Ensures list item content adheres to the list's margin instead
    of filling the entire block row. This is important to allow
@@ -514,7 +522,7 @@ var listsSharedStyles = (0, _react.css)((_css3 = {
   listStyleType: 'lower-alpha'
 }), 'ol[data-indent-level="3"], ol[data-indent-level="6"]', {
   listStyleType: 'lower-roman'
-}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css3, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
+}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css4, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
   listStyleType: 'disc'
 }), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
   listStyleType: 'circle'
@@ -1413,7 +1421,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
       (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') &&
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-      (0, _platformFeatureFlags.fg)('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, 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, (0, _platformFeatureFlags.fg)('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, _browser.browser.safari && codeBlockInListSafariFixStyles],
+      (0, _platformFeatureFlags.fg)('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, 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, (0, _platformFeatureFlags.fg)('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, _browser.browser.safari && codeBlockInListSafariFixStyles, (0, _platformFeatureFlags.fg)('platform_breakout_cls') ? responsiveBreakoutWidth : null],
       "data-testid": testId
     }, children)
   );

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

@@ -62,7 +62,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "118.6.10";
+var packageVersion = "118.6.12";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/i18n/sk.js

@@ -7,11 +7,13 @@
  */
 //Slovak
 export default {
-  'fabric.editor.headingLink.ascSortingLabel': 'None',
-  'fabric.editor.headingLink.copied': 'None',
-  'fabric.editor.headingLink.copyAnchorLink': 'None',
-  'fabric.editor.headingLink.copyAriaLabel': 'None',
-  'fabric.editor.headingLink.failedToCopy': 'None',
+  'fabric.editor.headingLink.ascSortingLabel': 'vzostupne',
+  'fabric.editor.headingLink.copied': 'Skopírované!',
+  'fabric.editor.headingLink.copyAnchorLink': 'Skopírovať prepojenie do nadpisu',
+  'fabric.editor.headingLink.copyAriaLabel': 'Kopírovať',
+  'fabric.editor.headingLink.descSortingLabel': 'zostupne',
+  'fabric.editor.headingLink.failedToCopy': 'Nepodarilo sa skopírovať',
+  'fabric.editor.headingLink.noneSortingLabel': 'žiadne',
   'fabric.editor.inlineComment.marker.end': 'koniec vnoreného komentára',
   'fabric.editor.inlineComment.marker.start': 'začiatok vnoreného komentára'
 };

package/dist/es2019/i18n/sr.js

@@ -0,0 +1,19 @@
+/* prettier-ignore */
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Serbian (Serbia) [sr-RS]
+export default {
+  'fabric.editor.headingLink.ascSortingLabel': 'rastući',
+  'fabric.editor.headingLink.copied': 'Kopirano!',
+  'fabric.editor.headingLink.copyAnchorLink': 'Kopiraj link naslova',
+  'fabric.editor.headingLink.copyAriaLabel': 'Kopiraj',
+  'fabric.editor.headingLink.descSortingLabel': 'opadajući',
+  'fabric.editor.headingLink.failedToCopy': 'Kopiranje nije uspelo',
+  'fabric.editor.headingLink.noneSortingLabel': 'nijedno',
+  'fabric.editor.inlineComment.marker.end': 'kraj umetnutog komentara',
+  'fabric.editor.inlineComment.marker.start': 'početak umetnutog komentara'
+};

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

@@ -7,8 +7,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import { css, jsx } from '@emotion/react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWithCustomWidth, calcBreakoutWidth } from '@atlaskit/editor-common/utils';
-import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { fg } from '@atlaskit/platform-feature-flags';
 const wrapperStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   margin: `${blockNodesVerticalMargin} 0`,
@@ -16,6 +17,26 @@ const wrapperStyles = css({
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });
+const CONTAINER_WITHOUT_GUTTER = `calc(100cqw - ${akEditorGutterPadding}px * 2)`;
+const getWidth = (width, mode) => {
+  if (editorExperiment('advanced_layouts', true) && width) {
+    return `min(${width}px, ${CONTAINER_WITHOUT_GUTTER})`;
+  } else {
+    if (mode === 'full-width') {
+      return `max(${akEditorDefaultLayoutWidth}px, min(${akEditorFullWidthLayoutWidth}px, ${CONTAINER_WITHOUT_GUTTER}))`;
+    }
+    if (mode === 'wide') {
+      return `min(var(--ak-editor--breakout-wide-layout-width), ${CONTAINER_WITHOUT_GUTTER})`;
+    }
+  }
+};
+
+/**
+ * React component that renders a breakout mark with dynamic width based on editor layout (wide or full-width).
+ *
+ * @param props - Breakout mark attrs, such as mode (wide or full-width).
+ * @returns The rendered breakout mark as a React element.
+ */
 export default function Breakout(props) {
   return jsx(WidthConsumer, null, ({
     width
@@ -28,7 +49,10 @@ export default function Breakout(props) {
     'data-has-width': !!props.width,
     'data-width': props.width
   }, {
-    style: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    style: fg('platform_breakout_cls') ? {
+      width: getWidth('width' in props ? props.width : null, props.mode)
+    } : {
       width: editorExperiment('advanced_layouts', true) ?
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       calcBreakoutWithCustomWidth(props.mode, 'width' in props ? props.width : null, width) :

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

@@ -121,7 +121,8 @@ export default function BlockCard(props) {
       // eslint-disable-next-line react/jsx-props-no-spreading
     }, cardProps, {
       url: url,
-      onError: onError
+      onError: onError,
+      hideIconLoadingSkeleton: fg('platform_fix_block_card_img_icon_vc')
     }));
   } else {
     cardComponent = jsx(Card, _extends({

package/dist/es2019/ui/Expand.js

@@ -11,7 +11,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import { ExpandIconWrapper, ExpandLayoutWrapperWithRef, expandMessages, WidthProvider } from '@atlaskit/editor-common/ui';
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset } from '@atlaskit/editor-shared-styles';
 import { default as ChevronRightIconLegacy } from '@atlaskit/icon/glyph/chevron-right';
-import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import Tooltip from '@atlaskit/tooltip';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import _uniqueId from 'lodash/uniqueId';
@@ -218,7 +218,8 @@ function Expand({
   }, jsx(ChevronRightIcon, {
     label: label,
     LEGACY_fallbackIcon: ChevronRightIconLegacy,
-    spacing: "spacious"
+    spacing: "spacious",
+    size: "small"
   })) : jsx(Tooltip, {
     content: label,
     position: "top"
@@ -231,7 +232,8 @@ function Expand({
   }, jsx(ChevronRightIcon, {
     label: label,
     LEGACY_fallbackIcon: ChevronRightIconLegacy,
-    spacing: "spacious"
+    spacing: "spacious",
+    size: "small"
   }))), jsx("span", {
     css: titleStyles,
     id: id

package/dist/es2019/ui/ExtensionRenderer.js

@@ -119,11 +119,15 @@ export default function ExtensionRenderer(props) {
   });
 }
 export const InlineNodeRendererWrapper = ({
-  children
+  children,
+  ssrPlaceholder,
+  ssrPlaceholderReplace
 }) => {
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "inline-extension-renderer",
-    css: inlineExtensionStyle
+    css: inlineExtensionStyle,
+    "data-ssr-placeholder": ssrPlaceholder,
+    "data-ssr-placeholder-replace": ssrPlaceholderReplace
   }, children);
 };

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

@@ -11,7 +11,7 @@ import { B300, B400, B500, N20, N200, N30A, N40A, N60A, N800, R50, R500, Y300, Y
 import { FullPagePadding } from './style';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { RendererCssClassName } from '../../consts';
-import { akEditorBlockquoteBorderColor, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
 import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
 import { CodeBlockSharedCssClassName, DateSharedCssClassName, listItemCounterPadding, richMediaClassName, SmartCardSharedCssClassName, tableCellBorderWidth, tableCellMinWidth, tableCellPadding, tableMarginTop, TableSharedCssClassName, TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -198,6 +198,15 @@ const baseStyles = css({
     color: `var(--ds-text-subtlest, ${N200})`
   }
 });
+const akEditorBreakpointForSmallDevice = '1266px';
+
+// Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
+const responsiveBreakoutWidth = css({
+  '--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidthSmallViewport}px`,
+  [`@media (min-width: ${akEditorBreakpointForSmallDevice})`]: {
+    '--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidth}px`
+  }
+});
 const hideHeadingCopyLinkWrapperStyles = css({
   '& h1, & h2, & h3, & h4, & h5, & h6': {
     [`.${HeadingAnchorWrapperClassName}`]: {
@@ -1805,7 +1814,7 @@ export const RendererStyleContainer = props => {
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
       fg('editor_inline_comments_on_inline_nodes') &&
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-      fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, 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, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles],
+      fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, 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, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, fg('platform_breakout_cls') ? responsiveBreakoutWidth : null],
       "data-testid": testId
     }, children)
   );

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

@@ -48,7 +48,7 @@ import { PortalContext } from './PortalContext';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "118.6.10";
+const packageVersion = "118.6.12";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/i18n/sk.js

@@ -7,11 +7,13 @@
  */
 //Slovak
 export default {
-  'fabric.editor.headingLink.ascSortingLabel': 'None',
-  'fabric.editor.headingLink.copied': 'None',
-  'fabric.editor.headingLink.copyAnchorLink': 'None',
-  'fabric.editor.headingLink.copyAriaLabel': 'None',
-  'fabric.editor.headingLink.failedToCopy': 'None',
+  'fabric.editor.headingLink.ascSortingLabel': 'vzostupne',
+  'fabric.editor.headingLink.copied': 'Skopírované!',
+  'fabric.editor.headingLink.copyAnchorLink': 'Skopírovať prepojenie do nadpisu',
+  'fabric.editor.headingLink.copyAriaLabel': 'Kopírovať',
+  'fabric.editor.headingLink.descSortingLabel': 'zostupne',
+  'fabric.editor.headingLink.failedToCopy': 'Nepodarilo sa skopírovať',
+  'fabric.editor.headingLink.noneSortingLabel': 'žiadne',
   'fabric.editor.inlineComment.marker.end': 'koniec vnoreného komentára',
   'fabric.editor.inlineComment.marker.start': 'začiatok vnoreného komentára'
 };

package/dist/esm/i18n/sr.js

@@ -0,0 +1,19 @@
+/* prettier-ignore */
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Serbian (Serbia) [sr-RS]
+export default {
+  'fabric.editor.headingLink.ascSortingLabel': 'rastući',
+  'fabric.editor.headingLink.copied': 'Kopirano!',
+  'fabric.editor.headingLink.copyAnchorLink': 'Kopiraj link naslova',
+  'fabric.editor.headingLink.copyAriaLabel': 'Kopiraj',
+  'fabric.editor.headingLink.descSortingLabel': 'opadajući',
+  'fabric.editor.headingLink.failedToCopy': 'Kopiranje nije uspelo',
+  'fabric.editor.headingLink.noneSortingLabel': 'nijedno',
+  'fabric.editor.inlineComment.marker.end': 'kraj umetnutog komentara',
+  'fabric.editor.inlineComment.marker.start': 'početak umetnutog komentara'
+};

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

@@ -7,8 +7,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import { css, jsx } from '@emotion/react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWithCustomWidth, calcBreakoutWidth } from '@atlaskit/editor-common/utils';
-import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { fg } from '@atlaskit/platform-feature-flags';
 var wrapperStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   margin: "".concat(blockNodesVerticalMargin, " 0"),
@@ -16,6 +17,26 @@ var wrapperStyles = css({
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });
+var CONTAINER_WITHOUT_GUTTER = "calc(100cqw - ".concat(akEditorGutterPadding, "px * 2)");
+var getWidth = function getWidth(width, mode) {
+  if (editorExperiment('advanced_layouts', true) && width) {
+    return "min(".concat(width, "px, ").concat(CONTAINER_WITHOUT_GUTTER, ")");
+  } else {
+    if (mode === 'full-width') {
+      return "max(".concat(akEditorDefaultLayoutWidth, "px, min(").concat(akEditorFullWidthLayoutWidth, "px, ").concat(CONTAINER_WITHOUT_GUTTER, "))");
+    }
+    if (mode === 'wide') {
+      return "min(var(--ak-editor--breakout-wide-layout-width), ".concat(CONTAINER_WITHOUT_GUTTER, ")");
+    }
+  }
+};
+
+/**
+ * React component that renders a breakout mark with dynamic width based on editor layout (wide or full-width).
+ *
+ * @param props - Breakout mark attrs, such as mode (wide or full-width).
+ * @returns The rendered breakout mark as a React element.
+ */
 export default function Breakout(props) {
   return jsx(WidthConsumer, null, function (_ref) {
     var width = _ref.width;
@@ -28,7 +49,10 @@ export default function Breakout(props) {
       'data-has-width': !!props.width,
       'data-width': props.width
     }, {
-      style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      style: fg('platform_breakout_cls') ? {
+        width: getWidth('width' in props ? props.width : null, props.mode)
+      } : {
         width: editorExperiment('advanced_layouts', true) ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         calcBreakoutWithCustomWidth(props.mode, 'width' in props ? props.width : null, width) :

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

@@ -126,7 +126,8 @@ export default function BlockCard(props) {
       // eslint-disable-next-line react/jsx-props-no-spreading
     }, cardProps, {
       url: url,
-      onError: onError
+      onError: onError,
+      hideIconLoadingSkeleton: fg('platform_fix_block_card_img_icon_vc')
     }));
   } else {
     cardComponent = jsx(Card, _extends({

package/dist/esm/ui/Expand.js

@@ -14,7 +14,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import { ExpandIconWrapper, ExpandLayoutWrapperWithRef, expandMessages, WidthProvider } from '@atlaskit/editor-common/ui';
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset } from '@atlaskit/editor-shared-styles';
 import { default as ChevronRightIconLegacy } from '@atlaskit/icon/glyph/chevron-right';
-import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
+import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
 import Tooltip from '@atlaskit/tooltip';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import _uniqueId from 'lodash/uniqueId';
@@ -229,7 +229,8 @@ function Expand(_ref) {
   }, jsx(ChevronRightIcon, {
     label: label,
     LEGACY_fallbackIcon: ChevronRightIconLegacy,
-    spacing: "spacious"
+    spacing: "spacious",
+    size: "small"
   })) : jsx(Tooltip, {
     content: label,
     position: "top"
@@ -242,7 +243,8 @@ function Expand(_ref) {
   }, jsx(ChevronRightIcon, {
     label: label,
     LEGACY_fallbackIcon: ChevronRightIconLegacy,
-    spacing: "spacious"
+    spacing: "spacious",
+    size: "small"
   }))), jsx("span", {
     css: titleStyles,
     id: id

package/dist/esm/ui/ExtensionRenderer.js

@@ -125,10 +125,14 @@ export default function ExtensionRenderer(props) {
   });
 }
 export var InlineNodeRendererWrapper = function InlineNodeRendererWrapper(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    ssrPlaceholder = _ref.ssrPlaceholder,
+    ssrPlaceholderReplace = _ref.ssrPlaceholderReplace;
   return jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "inline-extension-renderer",
-    css: inlineExtensionStyle
+    css: inlineExtensionStyle,
+    "data-ssr-placeholder": ssrPlaceholder,
+    "data-ssr-placeholder-replace": ssrPlaceholderReplace
   }, children);
 };

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

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _css, _css3;
+var _css, _css4;
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
@@ -13,7 +13,7 @@ import { B300, B400, B500, N20, N200, N30A, N40A, N60A, N800, R50, R500, Y300, Y
 import { FullPagePadding } from './style';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { RendererCssClassName } from '../../consts';
-import { akEditorBlockquoteBorderColor, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorBlockquoteBorderColor, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorLineHeight, akEditorSelectedNodeClassName, akEditorShadowZIndex, akEditorStickyHeaderZIndex, akEditorTableBorder, akEditorTableCellMinWidth, akEditorTableNumberColumnWidth, akEditorTableToolbar, blockNodesVerticalMargin, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
 import { INLINE_IMAGE_WRAPPER_CLASS_NAME } from '@atlaskit/editor-common/media-inline';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
 import { CodeBlockSharedCssClassName, DateSharedCssClassName, listItemCounterPadding, richMediaClassName, SmartCardSharedCssClassName, tableCellBorderWidth, tableCellMinWidth, tableCellPadding, tableMarginTop, TableSharedCssClassName, TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -132,6 +132,14 @@ var baseStyles = css((_css = {
 }), _defineProperty(_css, '& span[data-placeholder]', {
   color: "var(--ds-text-subtlest, ".concat(N200, ")")
 })));
+var akEditorBreakpointForSmallDevice = '1266px';
+
+// Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
+var responsiveBreakoutWidth = css(_defineProperty({
+  '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidthSmallViewport, "px")
+}, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
+  '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidth, "px")
+}));
 var hideHeadingCopyLinkWrapperStyles = css({
   '& h1, & h2, & h3, & h4, & h5, & h6': _defineProperty(_defineProperty({}, ".".concat(HeadingAnchorWrapperClassName), {
     '&:focus-within': {
@@ -469,13 +477,13 @@ var paragraphSharedStyles = css({
     letterSpacing: '-0.005em'
   }
 });
-var listsSharedStyles = css((_css3 = {
+var listsSharedStyles = css((_css4 = {
   /* =============== INDENTATION SPACING ========= */
   'ul, ol': {
     boxSizing: 'border-box',
     paddingLeft: "var(--ed--list--item-counter--padding, ".concat(listItemCounterPadding, "px)")
   }
-}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css3, "".concat(orderedListSelector, ", ").concat(bulletListSelector), {
+}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css4, "".concat(orderedListSelector, ", ").concat(bulletListSelector), {
   /*
    Ensures list item content adheres to the list's margin instead
    of filling the entire block row. This is important to allow
@@ -507,7 +515,7 @@ var listsSharedStyles = css((_css3 = {
   listStyleType: 'lower-alpha'
 }), 'ol[data-indent-level="3"], ol[data-indent-level="6"]', {
   listStyleType: 'lower-roman'
-}), _defineProperty(_defineProperty(_defineProperty(_css3, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
+}), _defineProperty(_defineProperty(_defineProperty(_css4, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
   listStyleType: 'disc'
 }), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
   listStyleType: 'circle'
@@ -1406,7 +1414,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
       fg('editor_inline_comments_on_inline_nodes') &&
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-      fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, 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, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles],
+      fg('annotations_align_editor_and_renderer_styles') && rendererAnnotationStylesCommentHeightFix, baseOtherStyles, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle, 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, fg('platform_editor_tables_numbered_column_correction') ? rendererTableColumnStyles : rendererTableColumnStylesOld, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, fg('platform_breakout_cls') ? responsiveBreakoutWidth : null],
       "data-testid": testId
     }, children)
   );

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

@@ -53,7 +53,7 @@ import { PortalContext } from './PortalContext';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "118.6.10";
+var packageVersion = "118.6.12";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/types/i18n/sk.d.ts

@@ -9,7 +9,9 @@ declare const _default: {
     'fabric.editor.headingLink.copied': string;
     'fabric.editor.headingLink.copyAnchorLink': string;
     'fabric.editor.headingLink.copyAriaLabel': string;
+    'fabric.editor.headingLink.descSortingLabel': string;
     'fabric.editor.headingLink.failedToCopy': string;
+    'fabric.editor.headingLink.noneSortingLabel': string;
     'fabric.editor.inlineComment.marker.end': string;
     'fabric.editor.inlineComment.marker.start': string;
 };

package/dist/types/i18n/sr.d.ts

@@ -0,0 +1,18 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+declare const _default: {
+    'fabric.editor.headingLink.ascSortingLabel': string;
+    'fabric.editor.headingLink.copied': string;
+    'fabric.editor.headingLink.copyAnchorLink': string;
+    'fabric.editor.headingLink.copyAriaLabel': string;
+    'fabric.editor.headingLink.descSortingLabel': string;
+    'fabric.editor.headingLink.failedToCopy': string;
+    'fabric.editor.headingLink.noneSortingLabel': string;
+    'fabric.editor.inlineComment.marker.end': string;
+    'fabric.editor.inlineComment.marker.start': string;
+};
+export default _default;

package/dist/types/react/marks/breakout.d.ts

@@ -5,4 +5,10 @@
 import { jsx } from '@emotion/react';
 import type { BreakoutMarkAttrs } from '@atlaskit/adf-schema';
 import type { MarkProps } from '../types';
+/**
+ * React component that renders a breakout mark with dynamic width based on editor layout (wide or full-width).
+ *
+ * @param props - Breakout mark attrs, such as mode (wide or full-width).
+ * @returns The rendered breakout mark as a React element.
+ */
 export default function Breakout(props: MarkProps<BreakoutMarkAttrs>): jsx.JSX.Element;

package/dist/types/ui/ExtensionRenderer.d.ts

@@ -28,5 +28,8 @@ interface Props {
     }) => JSX.Element;
 }
 export default function ExtensionRenderer(props: Props): JSX.Element;
-export declare const InlineNodeRendererWrapper: ({ children }: React.PropsWithChildren<unknown>) => jsx.JSX.Element;
+export declare const InlineNodeRendererWrapper: ({ children, ssrPlaceholder, ssrPlaceholderReplace, }: React.PropsWithChildren<{
+    ssrPlaceholder?: string | undefined;
+    ssrPlaceholderReplace?: string | undefined;
+}>) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/i18n/sk.d.ts

@@ -9,7 +9,9 @@ declare const _default: {
     'fabric.editor.headingLink.copied': string;
     'fabric.editor.headingLink.copyAnchorLink': string;
     'fabric.editor.headingLink.copyAriaLabel': string;
+    'fabric.editor.headingLink.descSortingLabel': string;
     'fabric.editor.headingLink.failedToCopy': string;
+    'fabric.editor.headingLink.noneSortingLabel': string;
     'fabric.editor.inlineComment.marker.end': string;
     'fabric.editor.inlineComment.marker.start': string;
 };

package/dist/types-ts4.5/i18n/sr.d.ts

@@ -0,0 +1,18 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+declare const _default: {
+    'fabric.editor.headingLink.ascSortingLabel': string;
+    'fabric.editor.headingLink.copied': string;
+    'fabric.editor.headingLink.copyAnchorLink': string;
+    'fabric.editor.headingLink.copyAriaLabel': string;
+    'fabric.editor.headingLink.descSortingLabel': string;
+    'fabric.editor.headingLink.failedToCopy': string;
+    'fabric.editor.headingLink.noneSortingLabel': string;
+    'fabric.editor.inlineComment.marker.end': string;
+    'fabric.editor.inlineComment.marker.start': string;
+};
+export default _default;

package/dist/types-ts4.5/react/marks/breakout.d.ts

@@ -5,4 +5,10 @@
 import { jsx } from '@emotion/react';
 import type { BreakoutMarkAttrs } from '@atlaskit/adf-schema';
 import type { MarkProps } from '../types';
+/**
+ * React component that renders a breakout mark with dynamic width based on editor layout (wide or full-width).
+ *
+ * @param props - Breakout mark attrs, such as mode (wide or full-width).
+ * @returns The rendered breakout mark as a React element.
+ */
 export default function Breakout(props: MarkProps<BreakoutMarkAttrs>): jsx.JSX.Element;

package/dist/types-ts4.5/ui/ExtensionRenderer.d.ts

@@ -28,5 +28,8 @@ interface Props {
     }) => JSX.Element;
 }
 export default function ExtensionRenderer(props: Props): JSX.Element;
-export declare const InlineNodeRendererWrapper: ({ children }: React.PropsWithChildren<unknown>) => jsx.JSX.Element;
+export declare const InlineNodeRendererWrapper: ({ children, ssrPlaceholder, ssrPlaceholderReplace, }: React.PropsWithChildren<{
+    ssrPlaceholder?: string | undefined;
+    ssrPlaceholderReplace?: string | undefined;
+}>) => jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "118.6.10",
+	"version": "118.6.12",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/code": "^17.2.0",
-		"@atlaskit/editor-common": "^106.3.0",
+		"@atlaskit/editor-common": "^106.5.0",
 		"@atlaskit/editor-json-transformer": "^8.24.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -52,11 +52,11 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.2.0",
 		"@atlaskit/react-ufo": "^3.13.0",
-		"@atlaskit/smart-card": "^38.8.0",
+		"@atlaskit/smart-card": "^38.9.0",
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^5.14.0",
+		"@atlaskit/tmp-editor-statsig": "^6.1.0",
 		"@atlaskit/tokens": "^5.1.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -124,6 +124,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"platform_breakout_cls": {
+			"type": "boolean"
+		},
 		"confluence_frontend_table_scrollbar_ttvc_fix": {
 			"type": "boolean"
 		},
@@ -259,6 +262,9 @@
 		},
 		"confluence_frontend_fix_view_page_slo": {
 			"type": "boolean"
+		},
+		"platform_fix_block_card_img_icon_vc": {
+			"type": "boolean"
 		}
 	},
 	"af:exports": {