@atlaskit/renderer 118.7.0 → 119.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 119.0.0
+
+### Patch Changes
+
+- Updated dependencies
+
+## 118.7.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 118.7.0
 
 ### Minor Changes

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, _css4;
+var _css, _css5;
 /* 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 */
@@ -147,6 +147,13 @@ var responsiveBreakoutWidth = (0, _react.css)((0, _defineProperty2.default)({
 }, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
   '--ak-editor--breakout-wide-layout-width': "".concat(_editorSharedStyles.akEditorCalculatedWideLayoutWidth, "px")
 }));
+var responsiveBreakoutWidthFullWidth = (0, _react.css)((0, _defineProperty2.default)({
+  '--ak-editor--breakout-container-without-gutter-width': '100cqw',
+  // Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
+  '--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': {
@@ -484,13 +491,13 @@ var paragraphSharedStyles = (0, _react.css)({
     letterSpacing: '-0.005em'
   }
 });
-var listsSharedStyles = (0, _react.css)((_css4 = {
+var listsSharedStyles = (0, _react.css)((_css5 = {
   /* =============== 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)(_css4, "".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)(_css5, "".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
@@ -522,7 +529,7 @@ var listsSharedStyles = (0, _react.css)((_css4 = {
   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)(_css4, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
+}), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)(_css5, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
   listStyleType: 'disc'
 }), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
   listStyleType: 'circle'
@@ -1421,7 +1428,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)('platform_breakout_cls') ? responsiveBreakoutWidth : null],
+      (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, appearance === 'full-page' && (0, _platformFeatureFlags.fg)('platform_breakout_cls') ? responsiveBreakoutWidth : null, appearance === 'full-width' && (0, _platformFeatureFlags.fg)('platform_breakout_cls') ? responsiveBreakoutWidthFullWidth : null],
       "data-testid": testId
     }, children)
   );

package/dist/cjs/ui/Renderer/breakout-ssr.js

@@ -39,13 +39,13 @@ function BreakoutSSRInlineScript(_ref) {
     // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
-      __html: (0, _platformFeatureFlags.fg)('platform-ssr-table-resize') ? createBreakoutInlineScript(id, true) : createBreakoutInlineScript(id)
+      __html: (0, _platformFeatureFlags.fg)('platform-ssr-table-resize') || (0, _platformFeatureFlags.fg)('platform_breakout_cls') ? createBreakoutInlineScript(id, true) : createBreakoutInlineScript(id)
     },
     "data-testid": "breakout-ssr-inline-script"
   });
 }
-function createBreakoutInlineScript(id, optionalFlagArg) {
-  return "\n\t (function(window){\n\t\tif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) {\n\t\t\treturn;\n\t\t}\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(optionalFlagArg !== null && optionalFlagArg !== void 0 ? optionalFlagArg : false, ");\n  })(window);\n");
+function createBreakoutInlineScript(id, shouldSkipScript) {
+  return "\n\t (function(window){\n\t\tif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) {\n\t\t\treturn;\n\t\t}\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(shouldSkipScript !== null && shouldSkipScript !== void 0 ? shouldSkipScript : false, ");\n  })(window);\n");
 }
 var breakoutInlineScriptContext = exports.breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.stringify(_utils.breakoutConsts), ";\n  breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(_utils.breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n  breakoutConsts.getBreakpoint = ").concat(_utils.breakoutConsts.getBreakpoint.toString(), ";\n  breakoutConsts.calcBreakoutWidth = ").concat(_utils.breakoutConsts.calcBreakoutWidth.toString(), ";\n  breakoutConsts.calcBreakoutWithCustomWidth = ").concat(_utils.breakoutConsts.calcBreakoutWithCustomWidth.toString(), ";\n  breakoutConsts.calcLineLength = ").concat(_utils.breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(_utils.breakoutConsts.calcWideWidth.toString(), ";\n  breakoutConsts.FullPagePadding = ").concat(_style.FullPagePadding.toString(), ";\n");
 
@@ -101,6 +101,9 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
           if (shouldSkipBreakoutScript && node.classList.contains('pm-table-container')) {
             return;
           }
+          if (shouldSkipBreakoutScript && node.classList.contains('fabric-editor-breakout-mark')) {
+            return;
+          }
 
           // use breakout script for all other types of nodes
           if (node.classList.contains('pm-table-container') && mode === 'custom') {

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.7.0";
+var packageVersion = "118.7.1";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -207,6 +207,14 @@ const responsiveBreakoutWidth = css({
     '--ak-editor--breakout-wide-layout-width': `${akEditorCalculatedWideLayoutWidth}px`
   }
 });
+const responsiveBreakoutWidthFullWidth = css({
+  '--ak-editor--breakout-container-without-gutter-width': '100cqw',
+  // Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
+  '--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}`]: {
@@ -1814,7 +1822,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('platform_breakout_cls') ? responsiveBreakoutWidth : null],
+      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, appearance === 'full-page' && fg('platform_breakout_cls') ? responsiveBreakoutWidth : null, appearance === 'full-width' && fg('platform_breakout_cls') ? responsiveBreakoutWidthFullWidth : null],
       "data-testid": testId
     }, children)
   );

package/dist/es2019/ui/Renderer/breakout-ssr.js

@@ -31,19 +31,19 @@ export function BreakoutSSRInlineScript({
     // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
-      __html: fg('platform-ssr-table-resize') ? createBreakoutInlineScript(id, true) : createBreakoutInlineScript(id)
+      __html: fg('platform-ssr-table-resize') || fg('platform_breakout_cls') ? createBreakoutInlineScript(id, true) : createBreakoutInlineScript(id)
     },
     "data-testid": "breakout-ssr-inline-script"
   });
 }
-export function createBreakoutInlineScript(id, optionalFlagArg) {
+export function createBreakoutInlineScript(id, shouldSkipScript) {
   return `
 	 (function(window){
 		if(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) {
 			return;
 		}
     ${breakoutInlineScriptContext};
-    (${applyBreakoutAfterSSR.toString()})("${id}", breakoutConsts, ${optionalFlagArg !== null && optionalFlagArg !== void 0 ? optionalFlagArg : false});
+    (${applyBreakoutAfterSSR.toString()})("${id}", breakoutConsts, ${shouldSkipScript !== null && shouldSkipScript !== void 0 ? shouldSkipScript : false});
   })(window);
 `;
 }
@@ -110,6 +110,9 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
           if (shouldSkipBreakoutScript && node.classList.contains('pm-table-container')) {
             return;
           }
+          if (shouldSkipBreakoutScript && node.classList.contains('fabric-editor-breakout-mark')) {
+            return;
+          }
 
           // use breakout script for all other types of nodes
           if (node.classList.contains('pm-table-container') && mode === 'custom') {

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.7.0";
+const packageVersion = "118.7.1";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _css, _css4;
+var _css, _css5;
 /* 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 */
@@ -140,6 +140,13 @@ var responsiveBreakoutWidth = css(_defineProperty({
 }, "@media (min-width: ".concat(akEditorBreakpointForSmallDevice, ")"), {
   '--ak-editor--breakout-wide-layout-width': "".concat(akEditorCalculatedWideLayoutWidth, "px")
 }));
+var responsiveBreakoutWidthFullWidth = css(_defineProperty({
+  '--ak-editor--breakout-container-without-gutter-width': '100cqw',
+  // Corresponds to the legacyContentStyles from `@atlaskit/editor-core` meant to introduce responsive breakout width.
+  '--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': {
@@ -477,13 +484,13 @@ var paragraphSharedStyles = css({
     letterSpacing: '-0.005em'
   }
 });
-var listsSharedStyles = css((_css4 = {
+var listsSharedStyles = css((_css5 = {
   /* =============== 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(_css4, "".concat(orderedListSelector, ", ").concat(bulletListSelector), {
+}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css5, "".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
@@ -515,7 +522,7 @@ var listsSharedStyles = css((_css4 = {
   listStyleType: 'lower-alpha'
 }), 'ol[data-indent-level="3"], ol[data-indent-level="6"]', {
   listStyleType: 'lower-roman'
-}), _defineProperty(_defineProperty(_defineProperty(_css4, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
+}), _defineProperty(_defineProperty(_defineProperty(_css5, 'ul[data-indent-level="1"], ul[data-indent-level="4"]', {
   listStyleType: 'disc'
 }), 'ul[data-indent-level="2"], ul[data-indent-level="5"]', {
   listStyleType: 'circle'
@@ -1414,7 +1421,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('platform_breakout_cls') ? responsiveBreakoutWidth : null],
+      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, appearance === 'full-page' && fg('platform_breakout_cls') ? responsiveBreakoutWidth : null, appearance === 'full-width' && fg('platform_breakout_cls') ? responsiveBreakoutWidthFullWidth : null],
       "data-testid": testId
     }, children)
   );

package/dist/esm/ui/Renderer/breakout-ssr.js

@@ -30,13 +30,13 @@ export function BreakoutSSRInlineScript(_ref) {
     // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
-      __html: fg('platform-ssr-table-resize') ? createBreakoutInlineScript(id, true) : createBreakoutInlineScript(id)
+      __html: fg('platform-ssr-table-resize') || fg('platform_breakout_cls') ? createBreakoutInlineScript(id, true) : createBreakoutInlineScript(id)
     },
     "data-testid": "breakout-ssr-inline-script"
   });
 }
-export function createBreakoutInlineScript(id, optionalFlagArg) {
-  return "\n\t (function(window){\n\t\tif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) {\n\t\t\treturn;\n\t\t}\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(optionalFlagArg !== null && optionalFlagArg !== void 0 ? optionalFlagArg : false, ");\n  })(window);\n");
+export function createBreakoutInlineScript(id, shouldSkipScript) {
+  return "\n\t (function(window){\n\t\tif(typeof window !== 'undefined' && window.__RENDERER_BYPASS_BREAKOUT_SSR__) {\n\t\t\treturn;\n\t\t}\n    ".concat(breakoutInlineScriptContext, ";\n    (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts, ").concat(shouldSkipScript !== null && shouldSkipScript !== void 0 ? shouldSkipScript : false, ");\n  })(window);\n");
 }
 export var breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON.stringify(breakoutConsts), ";\n  breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n  breakoutConsts.getBreakpoint = ").concat(breakoutConsts.getBreakpoint.toString(), ";\n  breakoutConsts.calcBreakoutWidth = ").concat(breakoutConsts.calcBreakoutWidth.toString(), ";\n  breakoutConsts.calcBreakoutWithCustomWidth = ").concat(breakoutConsts.calcBreakoutWithCustomWidth.toString(), ";\n  breakoutConsts.calcLineLength = ").concat(breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(breakoutConsts.calcWideWidth.toString(), ";\n  breakoutConsts.FullPagePadding = ").concat(FullPagePadding.toString(), ";\n");
 
@@ -92,6 +92,9 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
           if (shouldSkipBreakoutScript && node.classList.contains('pm-table-container')) {
             return;
           }
+          if (shouldSkipBreakoutScript && node.classList.contains('fabric-editor-breakout-mark')) {
+            return;
+          }
 
           // use breakout script for all other types of nodes
           if (node.classList.contains('pm-table-container') && mode === 'custom') {

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.7.0";
+var packageVersion = "118.7.1";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/types/ui/Renderer/breakout-ssr.d.ts

@@ -12,6 +12,6 @@ declare global {
 export declare function BreakoutSSRInlineScript({ noOpSSRInlineScript }: {
     noOpSSRInlineScript: Boolean;
 }): React.JSX.Element | null;
-export declare function createBreakoutInlineScript(id: number, optionalFlagArg?: boolean): string;
+export declare function createBreakoutInlineScript(id: number, shouldSkipScript?: boolean): string;
 export declare const breakoutInlineScriptContext: string;
 export declare const calcLineLength: () => number;

package/dist/types-ts4.5/ui/Renderer/breakout-ssr.d.ts

@@ -12,6 +12,6 @@ declare global {
 export declare function BreakoutSSRInlineScript({ noOpSSRInlineScript }: {
     noOpSSRInlineScript: Boolean;
 }): React.JSX.Element | null;
-export declare function createBreakoutInlineScript(id: number, optionalFlagArg?: boolean): string;
+export declare function createBreakoutInlineScript(id: number, shouldSkipScript?: boolean): string;
 export declare const breakoutInlineScriptContext: string;
 export declare const calcLineLength: () => number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "118.7.0",
+	"version": "119.0.0",
 	"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.9.0",
+		"@atlaskit/editor-common": "^107.0.0",
 		"@atlaskit/editor-json-transformer": "^8.24.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -39,20 +39,20 @@
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/emoji": "^69.3.0",
 		"@atlaskit/feature-gate-js-client": "^5.3.0",
-		"@atlaskit/icon": "^26.4.0",
+		"@atlaskit/icon": "^27.0.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/link-datasource": "^4.11.0",
 		"@atlaskit/media-card": "^79.3.0",
-		"@atlaskit/media-client": "^33.4.0",
+		"@atlaskit/media-client": "^34.0.0",
 		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/media-common": "^12.2.0",
-		"@atlaskit/media-filmstrip": "^50.1.0",
+		"@atlaskit/media-filmstrip": "^51.0.0",
 		"@atlaskit/media-ui": "^28.3.0",
-		"@atlaskit/media-viewer": "^52.2.0",
+		"@atlaskit/media-viewer": "^52.3.0",
 		"@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.9.0",
+		"@atlaskit/smart-card": "^38.10.0",
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^18.0.0",
@@ -71,7 +71,7 @@
 	},
 	"peerDependencies": {
 		"@atlaskit/link-provider": "^3.3.0",
-		"@atlaskit/media-core": "^36.1.0",
+		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
@@ -84,9 +84,9 @@
 		"@atlaskit/link-provider": "^3.3.0",
 		"@atlaskit/link-test-helpers": "^8.0.0",
 		"@atlaskit/linking-common": "^9.0.0",
-		"@atlaskit/media-core": "^36.1.0",
+		"@atlaskit/media-core": "^37.0.0",
 		"@atlaskit/media-integration-test-helpers": "workspace:^",
-		"@atlaskit/media-test-helpers": "^36.1.0",
+		"@atlaskit/media-test-helpers": "^37.0.0",
 		"@atlaskit/mention": "^24.2.0",
 		"@atlaskit/modal-dialog": "^14.2.0",
 		"@atlaskit/navigation-next": "patch:@atlaskit/navigation-next@npm%3A9.0.17#~/.yarn/patches/@atlaskit-navigation-next-npm-9.0.17-d1445f2f74.patch",