@atlaskit/renderer 120.1.8 → 120.1.10

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/renderer
 
+## 120.1.10
+
+### Patch Changes
+
+- [#187548](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/187548)
+  [`bf0521a222e39`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bf0521a222e39) -
+  Clean up `platform_breakout_cls` feature flag that was implemented to eliminate breakout content
+  layout shift
+- Updated dependencies
+
+## 120.1.9
+
+### Patch Changes
+
+- [#188906](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/188906)
+  [`0cf3b0f47d7ca`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0cf3b0f47d7ca) -
+  fix SSR styling
+
 ## 120.1.8
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -498,10 +498,9 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     value: function getExtensionProps(node) {
       var _this$getExtensionHei;
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-      var testHeight = (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node);
       return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
         extensionViewportSizes: this.extensionViewportSizes,
-        nodeHeight: testHeight
+        nodeHeight: (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node)
       });
     }
   }, {

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

@@ -7,11 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = Breakout;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
-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
@@ -45,30 +42,21 @@ var getWidth = function getWidth(width, mode) {
  * @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;
-    return (0, _react.jsx)("div", (0, _extends2.default)({
-      css: wrapperStyles,
-      "data-mode": props.mode
-      // Ignored via go/ees005
-      // eslint-disable-next-line react/jsx-props-no-spreading
-    }, (0, _experiments.editorExperiment)('advanced_layouts', true) && {
-      'data-has-width': !!props.width,
-      'data-width': props.width
-    }, {
-      // 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) :
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        (0, _utils.calcBreakoutWidth)(props.mode, width)
-      }
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: "fabric-editor-breakout-mark fabric-editor-block-mark"
-    }), props.children);
-  });
+  return (0, _react.jsx)("div", (0, _extends2.default)({
+    css: wrapperStyles,
+    "data-mode": props.mode
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, (0, _experiments.editorExperiment)('advanced_layouts', true) && {
+    'data-has-width': !!props.width,
+    'data-width': props.width
+  }, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    style: {
+      width: getWidth('width' in props ? props.width : null, props.mode)
+    }
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: "fabric-editor-breakout-mark fabric-editor-block-mark"
+  }), props.children);
 }

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

@@ -64,7 +64,7 @@ var renderExtension = exports.renderExtension = function renderExtension(content
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-        minHeight: extensionHeight
+        minHeight: "".concat(extensionHeight, "px")
       },
       "data-layout": layout
     }, /*#__PURE__*/_react.default.createElement("div", {

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

@@ -1437,7 +1437,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, appearance === 'full-page' && (0, _platformFeatureFlags.fg)('platform_breakout_cls') ? responsiveBreakoutWidth : null, appearance === 'full-width' && (0, _platformFeatureFlags.fg)('platform_breakout_cls') ? responsiveBreakoutWidthFullWidth : 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' && responsiveBreakoutWidth, appearance === 'full-width' && responsiveBreakoutWidthFullWidth],
       "data-testid": testId
     }, children)
   );

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

@@ -34,8 +34,7 @@ function BreakoutSSRInlineScript(_ref) {
   }
   var id = Math.floor(Math.random() * (9999999999 - 9999 + 1)) + 9999;
   var shouldSkipScript = {
-    table: (0, _platformFeatureFlags.fg)('platform-ssr-table-resize'),
-    breakout: (0, _platformFeatureFlags.fg)('platform_breakout_cls')
+    table: (0, _platformFeatureFlags.fg)('platform-ssr-table-resize')
   };
   return /*#__PURE__*/_react.default.createElement("script", {
     "data-breakout-script-id": id
@@ -51,7 +50,7 @@ function BreakoutSSRInlineScript(_ref) {
 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(JSON.stringify(shouldSkipScript), ");\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");
+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.calcLineLength = ").concat(_utils.breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(_utils.breakoutConsts.calcWideWidth.toString(), ";\n  breakoutConsts.FullPagePadding = ").concat(_style.FullPagePadding.toString(), ";\n");
 
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -96,7 +95,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
           // eslint-disable-next-line @atlaskit/editor/no-as-casting
           var node = maybeNode;
           var mode = node.dataset.mode || node.dataset.layout || '';
-          var resizedBreakout = node.dataset.hasWidth === 'true';
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
             return;
           }
@@ -105,7 +103,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
           if (shouldSkipBreakoutScript.table && node.classList.contains('pm-table-container')) {
             return;
           }
-          if (shouldSkipBreakoutScript.breakout && node.classList.contains('fabric-editor-breakout-mark')) {
+          if (node.classList.contains('fabric-editor-breakout-mark')) {
             return;
           }
 
@@ -116,11 +114,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
             var rendererWidth = renderer.offsetWidth;
             var effectiveWidth = rendererWidth - breakoutConsts.padding;
             width = "".concat(Math.min(parseInt(node.style.width), effectiveWidth), "px");
-          } else if (resizedBreakout) {
-            width = breakoutConsts.calcBreakoutWithCustomWidth(breakoutConsts)(mode, Number(node.dataset.width) || null,
-            // Ignored via go/ees005
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            renderer.offsetWidth);
           } else {
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

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

package/dist/es2019/react/index.js

@@ -449,11 +449,10 @@ export default class ReactSerializer {
   }
   getExtensionProps(node, path = []) {
     var _this$getExtensionHei;
-    const testHeight = (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node);
     return {
       ...this.getProps(node, path),
       extensionViewportSizes: this.extensionViewportSizes,
-      nodeHeight: testHeight
+      nodeHeight: (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node)
     };
   }
   getEmojiProps(node) {

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

@@ -5,11 +5,8 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { WidthConsumer } from '@atlaskit/editor-common/ui';
-import { calcBreakoutWithCustomWidth, calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, 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`,
@@ -37,9 +34,7 @@ const getWidth = (width, mode) => {
  * @returns The rendered breakout mark as a React element.
  */
 export default function Breakout(props) {
-  return jsx(WidthConsumer, null, ({
-    width
-  }) => jsx("div", _extends({
+  return jsx("div", _extends({
     css: wrapperStyles,
     "data-mode": props.mode
     // Ignored via go/ees005
@@ -49,17 +44,11 @@ export default function Breakout(props) {
     'data-width': props.width
   }, {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    style: fg('platform_breakout_cls') ? {
+    style: {
       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) :
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      calcBreakoutWidth(props.mode, width)
     }
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: "fabric-editor-breakout-mark fabric-editor-block-mark"
-  }), props.children));
+  }), props.children);
 }

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

@@ -50,7 +50,7 @@ export const renderExtension = (content, layout, options = {}, removeOverflow, e
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      minHeight: extensionHeight
+      minHeight: `${extensionHeight}px`
     },
     "data-layout": layout
   }, /*#__PURE__*/React.createElement("div", {

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

@@ -1833,7 +1833,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, appearance === 'full-page' && fg('platform_breakout_cls') ? responsiveBreakoutWidth : null, appearance === 'full-width' && fg('platform_breakout_cls') ? responsiveBreakoutWidthFullWidth : 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' && responsiveBreakoutWidth, appearance === 'full-width' && responsiveBreakoutWidthFullWidth],
       "data-testid": testId
     }, children)
   );

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

@@ -26,8 +26,7 @@ export function BreakoutSSRInlineScript({
   }
   const id = Math.floor(Math.random() * (9999999999 - 9999 + 1)) + 9999;
   const shouldSkipScript = {
-    table: fg('platform-ssr-table-resize'),
-    breakout: fg('platform_breakout_cls')
+    table: fg('platform-ssr-table-resize')
   };
   return /*#__PURE__*/React.createElement("script", {
     "data-breakout-script-id": id
@@ -56,7 +55,6 @@ export const breakoutInlineScriptContext = `
   breakoutConsts.mapBreakpointToLayoutMaxWidth = ${breakoutConsts.mapBreakpointToLayoutMaxWidth.toString()};
   breakoutConsts.getBreakpoint = ${breakoutConsts.getBreakpoint.toString()};
   breakoutConsts.calcBreakoutWidth = ${breakoutConsts.calcBreakoutWidth.toString()};
-  breakoutConsts.calcBreakoutWithCustomWidth = ${breakoutConsts.calcBreakoutWithCustomWidth.toString()};
   breakoutConsts.calcLineLength = ${breakoutConsts.calcLineLength.toString()};
   breakoutConsts.calcWideWidth = ${breakoutConsts.calcWideWidth.toString()};
   breakoutConsts.FullPagePadding = ${FullPagePadding.toString()};
@@ -105,7 +103,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
           // eslint-disable-next-line @atlaskit/editor/no-as-casting
           const node = maybeNode;
           const mode = node.dataset.mode || node.dataset.layout || '';
-          const resizedBreakout = node.dataset.hasWidth === 'true';
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
             return;
           }
@@ -114,7 +111,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
           if (shouldSkipBreakoutScript.table && node.classList.contains('pm-table-container')) {
             return;
           }
-          if (shouldSkipBreakoutScript.breakout && node.classList.contains('fabric-editor-breakout-mark')) {
+          if (node.classList.contains('fabric-editor-breakout-mark')) {
             return;
           }
 
@@ -125,11 +122,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
             const rendererWidth = renderer.offsetWidth;
             const effectiveWidth = rendererWidth - breakoutConsts.padding;
             width = `${Math.min(parseInt(node.style.width), effectiveWidth)}px`;
-          } else if (resizedBreakout) {
-            width = breakoutConsts.calcBreakoutWithCustomWidth(breakoutConsts)(mode, Number(node.dataset.width) || null,
-            // Ignored via go/ees005
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            renderer.offsetWidth);
           } else {
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

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

package/dist/esm/react/index.js

@@ -491,10 +491,9 @@ var ReactSerializer = /*#__PURE__*/function () {
     value: function getExtensionProps(node) {
       var _this$getExtensionHei;
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-      var testHeight = (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node);
       return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
         extensionViewportSizes: this.extensionViewportSizes,
-        nodeHeight: testHeight
+        nodeHeight: (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node)
       });
     }
   }, {

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

@@ -5,11 +5,8 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { WidthConsumer } from '@atlaskit/editor-common/ui';
-import { calcBreakoutWithCustomWidth, calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, 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"),
@@ -37,30 +34,21 @@ var getWidth = function getWidth(width, mode) {
  * @returns The rendered breakout mark as a React element.
  */
 export default function Breakout(props) {
-  return jsx(WidthConsumer, null, function (_ref) {
-    var width = _ref.width;
-    return jsx("div", _extends({
-      css: wrapperStyles,
-      "data-mode": props.mode
-      // Ignored via go/ees005
-      // eslint-disable-next-line react/jsx-props-no-spreading
-    }, editorExperiment('advanced_layouts', true) && {
-      'data-has-width': !!props.width,
-      'data-width': props.width
-    }, {
-      // 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) :
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        calcBreakoutWidth(props.mode, width)
-      }
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: "fabric-editor-breakout-mark fabric-editor-block-mark"
-    }), props.children);
-  });
+  return jsx("div", _extends({
+    css: wrapperStyles,
+    "data-mode": props.mode
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading
+  }, editorExperiment('advanced_layouts', true) && {
+    'data-has-width': !!props.width,
+    'data-width': props.width
+  }, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    style: {
+      width: getWidth('width' in props ? props.width : null, props.mode)
+    }
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: "fabric-editor-breakout-mark fabric-editor-block-mark"
+  }), props.children);
 }

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

@@ -57,7 +57,7 @@ export var renderExtension = function renderExtension(content, layout) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%',
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-        minHeight: extensionHeight
+        minHeight: "".concat(extensionHeight, "px")
       },
       "data-layout": layout
     }, /*#__PURE__*/React.createElement("div", {

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

@@ -1430,7 +1430,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, appearance === 'full-page' && fg('platform_breakout_cls') ? responsiveBreakoutWidth : null, appearance === 'full-width' && fg('platform_breakout_cls') ? responsiveBreakoutWidthFullWidth : 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' && responsiveBreakoutWidth, appearance === 'full-width' && responsiveBreakoutWidthFullWidth],
       "data-testid": testId
     }, children)
   );

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

@@ -25,8 +25,7 @@ export function BreakoutSSRInlineScript(_ref) {
   }
   var id = Math.floor(Math.random() * (9999999999 - 9999 + 1)) + 9999;
   var shouldSkipScript = {
-    table: fg('platform-ssr-table-resize'),
-    breakout: fg('platform_breakout_cls')
+    table: fg('platform-ssr-table-resize')
   };
   return /*#__PURE__*/React.createElement("script", {
     "data-breakout-script-id": id
@@ -42,7 +41,7 @@ export function BreakoutSSRInlineScript(_ref) {
 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(JSON.stringify(shouldSkipScript), ");\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");
+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.calcLineLength = ").concat(breakoutConsts.calcLineLength.toString(), ";\n  breakoutConsts.calcWideWidth = ").concat(breakoutConsts.calcWideWidth.toString(), ";\n  breakoutConsts.FullPagePadding = ").concat(FullPagePadding.toString(), ";\n");
 
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -87,7 +86,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
           // eslint-disable-next-line @atlaskit/editor/no-as-casting
           var node = maybeNode;
           var mode = node.dataset.mode || node.dataset.layout || '';
-          var resizedBreakout = node.dataset.hasWidth === 'true';
           if (!mode || !WIDE_LAYOUT_MODES.includes(mode)) {
             return;
           }
@@ -96,7 +94,7 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
           if (shouldSkipBreakoutScript.table && node.classList.contains('pm-table-container')) {
             return;
           }
-          if (shouldSkipBreakoutScript.breakout && node.classList.contains('fabric-editor-breakout-mark')) {
+          if (node.classList.contains('fabric-editor-breakout-mark')) {
             return;
           }
 
@@ -107,11 +105,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
             var rendererWidth = renderer.offsetWidth;
             var effectiveWidth = rendererWidth - breakoutConsts.padding;
             width = "".concat(Math.min(parseInt(node.style.width), effectiveWidth), "px");
-          } else if (resizedBreakout) {
-            width = breakoutConsts.calcBreakoutWithCustomWidth(breakoutConsts)(mode, Number(node.dataset.width) || null,
-            // Ignored via go/ees005
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            renderer.offsetWidth);
           } else {
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

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

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

@@ -14,7 +14,6 @@ export declare function BreakoutSSRInlineScript({ noOpSSRInlineScript }: {
 }): React.JSX.Element | null;
 export declare function createBreakoutInlineScript(id: number, shouldSkipScript: {
     table: boolean;
-    breakout: boolean;
 }): string;
 export declare const breakoutInlineScriptContext: string;
 export declare const calcLineLength: () => number;

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

@@ -14,7 +14,6 @@ export declare function BreakoutSSRInlineScript({ noOpSSRInlineScript }: {
 }): React.JSX.Element | null;
 export declare function createBreakoutInlineScript(id: number, shouldSkipScript: {
     table: boolean;
-    breakout: boolean;
 }): string;
 export declare const breakoutInlineScriptContext: string;
 export declare const calcLineLength: () => number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "120.1.8",
+	"version": "120.1.10",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -124,9 +124,6 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform_breakout_cls": {
-			"type": "boolean"
-		},
 		"confluence_frontend_table_scrollbar_ttvc_fix": {
 			"type": "boolean"
 		},