@atlaskit/renderer 114.12.0 → 114.13.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/renderer
 
+## 114.13.0
+
+### Minor Changes
+
+- [#148846](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/148846)
+  [`b98e0ab69e871`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b98e0ab69e871) -
+  Add new Renderer prop createSerializer to allow Confluence to implement progressive rendering of
+  ADF
+  (https://hello.atlassian.net/wiki/spaces/~lmarinov/pages/5177285037/COMPLEXIT+Progressive+rendering+of+ADF)
+
+### Patch Changes
+
+- Updated dependencies
+
+## 114.12.1
+
+### Patch Changes
+
+- [#148000](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/148000)
+  [`3dc4d377d546d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3dc4d377d546d) -
+  CONFCLOUD-81409 - speed up renderer media client under FG platform_editor_speedup_media_client
+- [#148201](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/148201)
+  [`8e811f1840de7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8e811f1840de7) -
+  Either actively or pre-emptively fixes a bug with keyframe animations in CJS and ESM distribution
+  targets for packages using Compiled CSS-in-JS. This may not affect this package, but the change
+  was made so a future migration does not accidentally break it.
+- Updated dependencies
+
 ## 114.12.0
 
 ### Minor Changes

package/afm-jira/tsconfig.json

@@ -47,6 +47,9 @@
 		{
 			"path": "../../editor-shared-styles/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-tables/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/emoji/afm-jira/tsconfig.json"
 		},

package/dist/cjs/react/nodes/mediaSingle/index.js

@@ -13,6 +13,8 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _style = require("../../../ui/Renderer/style");
 var _AnnotationRangeContext = require("../../../ui/annotations/contexts/AnnotationRangeContext");
 var _AnnotationHoverContext = require("../../../ui/annotations/contexts/AnnotationHoverContext");
@@ -139,7 +141,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
   var padding = isFullPage ? _style.FullPagePadding * 2 : 0;
   var calcDimensions = (0, _react.useCallback)(function (mediaContainerWidth) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
-    var maxWidth = containerWidth;
+    var maxWidth = (0, _coreUtils.isSSR)() && widthAttr && (0, _platformFeatureFlags.fg)('platform_editor_fix_image_size_diff_during_ssr') ? Math.max(widthAttr, containerWidth) : containerWidth;
     var maxHeight = height / width * maxWidth;
     var cardDimensions = {
       width: "".concat(maxWidth, "px"),
@@ -160,7 +162,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
       cardDimensions: cardDimensions,
       lineLength: lineLength
     };
-  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width]);
+  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width, widthAttr]);
   var originalDimensions = (0, _react.useMemo)(function () {
     return {
       width: width,

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.Colgroup = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -199,9 +198,7 @@ var Colgroup = exports.Colgroup = function Colgroup(props) {
   }
   return /*#__PURE__*/_react.default.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/_react.default.createElement("col", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    style: (0, _platformFeatureFlags.fg)('platform-ssr-table-resize') ? undefined :
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    {
+    style: {
       width: _editorSharedStyles.akEditorTableNumberColumnWidth
     },
     "data-test-id": 'num'
@@ -212,7 +209,7 @@ var Colgroup = exports.Colgroup = function Colgroup(props) {
       // eslint-disable-next-line react/no-array-index-key, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       _react.default.createElement("col", {
         key: idx,
-        style: (0, _platformFeatureFlags.fg)('platform-ssr-table-resize') ? undefined : style
+        style: style
       })
     );
   }));

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

@@ -14,6 +14,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _browser = require("@atlaskit/editor-common/browser");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -616,7 +617,7 @@ var TableWithShadows = (0, _ui.overflowShadow)(TableProcessor, {
 });
 var TableWithWidth = function TableWithWidth(props) {
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-  if ((0, _platformFeatureFlags.fg)('platform-ssr-table-resize')) {
+  if (!_browser.browser.safari && (0, _platformFeatureFlags.fg)('platform-ssr-table-resize')) {
     var _props$columnWidths;
     var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
       return total + val;

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

@@ -343,7 +343,6 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       var _this$props = this.props,
         isNumberColumnEnabled = _this$props.isNumberColumnEnabled,
         layout = _this$props.layout,
-        renderWidth = _this$props.renderWidth,
         columnWidths = _this$props.columnWidths,
         stickyHeaders = _this$props.stickyHeaders,
         tableNode = _this$props.tableNode,
@@ -379,7 +378,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         ,
         style: {
           display: 'flex',
-          justifyContent: 'center'
+          justifyContent: "".concat(tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout)
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -387,7 +386,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         ,
         style: {
-          width: "min(calc(100cqw - ".concat(gutterPadding, "px) ").concat(tableWidthAttribute)
+          width: "min(calc(100cqw - ".concat(gutterPadding, "px), ").concat(tableWidthAttribute, ")")
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -403,7 +402,6 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
       }, /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
-        "data-number-column": tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.isNumberColumnEnabled,
         "data-layout": this.updatedLayout,
         "data-testid": "table-container",
         ref: this.props.handleRef
@@ -414,7 +412,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         "data-testid": "sticky-scrollbar-sentinel-top"
       }), stickyHeaders && tableNode && tableCanBeSticky(tableNode, children) && /*#__PURE__*/_react.default.createElement(_sticky.StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,
-        renderWidth: renderWidth,
+        renderWidth: 0,
         tableWidth: "inherit",
         layout: layout,
         handleRef: this.props.handleRef,
@@ -444,7 +442,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         columnWidths: columnWidths,
         layout: layout,
         isNumberColumnEnabled: isNumberColumnEnabled,
-        renderWidth: renderWidth,
+        renderWidth: 0,
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
         isInsideOfBlockNode: isInsideOfBlockNode,

package/dist/cjs/react/utils/EditorMediaClientProvider.js

@@ -10,6 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var EditorMediaClientProvider = exports.EditorMediaClientProvider = function EditorMediaClientProvider(_ref) {
@@ -19,13 +20,14 @@ var EditorMediaClientProvider = exports.EditorMediaClientProvider = function Edi
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     mediaClientConfig = _useState2[0],
     setMediaClientConfig = _useState2[1];
-  var mediaProvider = (0, _providerFactory.useProvider)('mediaProvider');
+  var oldMediaProvider = (0, _providerFactory.useProvider)('mediaProvider');
+  var mediaProvider = (0, _providerFactory.useProviderLayout)('mediaProvider');
 
   /**
    * If a mediaClientConfig is provided then we will force
    * skip the mediaClient from context
    */
-  var shouldSkipContext = Boolean((ssr === null || ssr === void 0 ? void 0 : ssr.config) || mediaProvider);
+  var shouldSkipContext = Boolean((ssr === null || ssr === void 0 ? void 0 : ssr.config) || oldMediaProvider || mediaProvider);
   var contextMediaClient = (0, _react.useContext)(_mediaClientReact.MediaClientContext);
 
   // MediaClientProvider currently requires a mediaClientConfig
@@ -40,12 +42,25 @@ var EditorMediaClientProvider = exports.EditorMediaClientProvider = function Edi
   // and provide a top level mediaClient context
   // This is useful for testing and creating examples.
   (0, _react.useEffect)(function () {
-    if (ssr !== null && ssr !== void 0 && ssr.config) {
-      setMediaClientConfig(ssr.config);
-    } else if (mediaProvider) {
-      mediaProvider.then(function (provider) {
-        setMediaClientConfig(provider.viewMediaClientConfig);
-      });
+    if (!(0, _platformFeatureFlags.fg)('platform_editor_speedup_media_client')) {
+      if (ssr !== null && ssr !== void 0 && ssr.config) {
+        setMediaClientConfig(ssr.config);
+      } else if (oldMediaProvider) {
+        oldMediaProvider.then(function (provider) {
+          setMediaClientConfig(provider.viewMediaClientConfig);
+        });
+      }
+    }
+  }, [oldMediaProvider, ssr]);
+  (0, _react.useLayoutEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_speedup_media_client')) {
+      if (ssr !== null && ssr !== void 0 && ssr.config) {
+        setMediaClientConfig(ssr.config);
+      } else if (mediaProvider) {
+        mediaProvider.then(function (provider) {
+          setMediaClientConfig(provider.viewMediaClientConfig);
+        });
+      }
     }
   }, [mediaProvider, ssr]);
   return /*#__PURE__*/_react.default.createElement(_mediaClientReact.MediaClientContext.Provider, {

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

@@ -51,7 +51,7 @@ var breakoutInlineScriptContext = exports.breakoutInlineScriptContext = "\n  var
 
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function applyBreakoutAfterSSR(id, breakoutConsts, isFeatureFlagEnabled) {
+function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
   var MEDIA_NODE_TYPE = 'mediaSingle';
   var WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
   function findUp(element, condition) {
@@ -77,21 +77,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, isFeatureFlagEnabled) {
       if (item.target.nodeType !== Node.ELEMENT_NODE) {
         return;
       }
-      if (
-      /**
-       * The mutation observer is only called once per added node.
-       * The above condition only deals with direct children of <div class="ak-renderer-document" />
-       * When it is initially called on the direct children, not all the sub children have loaded.
-       * So nested media elements which are not immediately loaded as sub children are not available in the above conditional.
-       * Thus adding this conditional to deal with all media elements directly.
-       */
-      // Ignored via go/ees005
-      // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
-        // Ignored via go/ees005
-        // eslint-disable-next-line @atlaskit/editor/no-as-casting
-        applyMediaBreakout(item.target);
-      }
 
       // Remove with feature gate 'platform-ssr-table-resize'
       // Ignored via go/ees005
@@ -113,45 +98,62 @@ function applyBreakoutAfterSSR(id, breakoutConsts, isFeatureFlagEnabled) {
           }
 
           // When flag is on we are using CSS to calculate the table width thus don't need logic below to set the width and left.
-          if (!isFeatureFlagEnabled) {
-            if (node.classList.contains('pm-table-container') && mode === 'custom') {
-              // Ignored via go/ees005
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              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(mode, 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
-              width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
-            }
-            if (node.style.width === width) {
-              return;
-            }
-            node.style.width = width;
+          if (shouldSkipBreakoutScript && node.classList.contains('pm-table-container')) {
+            return;
+          }
 
-            // Tables require some special logic, as they are not using common css transform approach,
-            // because it breaks with sticky headers. This logic is copied from a table node:
-            // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
-            if (node.classList.contains('pm-table-container') &&
+          // use breakout script for all other types of nodes
+          if (node.classList.contains('pm-table-container') && mode === 'custom') {
+            // Ignored via go/ees005
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            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(mode, node.dataset.width || null,
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            !renderer.classList.contains('is-full-width')) {
-              var lineLength = breakoutConsts.calcLineLength();
-              var left = lineLength / 2 - parseInt(width) / 2;
-              if (left < 0 && parseInt(width) > lineLength) {
-                node.style.left = left + 'px';
-              } else {
-                node.style.left = '';
-              }
+            renderer.offsetWidth);
+          } else {
+            // Ignored via go/ees005
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
+          }
+          if (node.style.width === width) {
+            return;
+          }
+          node.style.width = width;
+
+          // Tables require some special logic, as they are not using common css transform approach,
+          // because it breaks with sticky headers. This logic is copied from a table node:
+          // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
+          if (node.classList.contains('pm-table-container') &&
+          // Ignored via go/ees005
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          !renderer.classList.contains('is-full-width')) {
+            var lineLength = breakoutConsts.calcLineLength();
+            var left = lineLength / 2 - parseInt(width) / 2;
+            if (left < 0 && parseInt(width) > lineLength) {
+              node.style.left = left + 'px';
+            } else {
+              node.style.left = '';
             }
           }
         });
+      } else if (
+      /**
+       * The mutation observer is only called once per added node.
+       * The above condition only deals with direct children of <div class="ak-renderer-document" />
+       * When it is initially called on the direct children, not all the sub children have loaded.
+       * So nested media elements which are not immediately loaded as sub children are not available in the above conditional.
+       * Thus adding this conditional to deal with all media elements directly.
+       */
+      // Ignored via go/ees005
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
+        // Ignored via go/ees005
+        // eslint-disable-next-line @atlaskit/editor/no-as-casting
+        applyMediaBreakout(item.target);
       }
     });
   });

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

@@ -59,7 +59,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 = "114.12.0";
+var packageVersion = "114.13.0";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -254,9 +254,17 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
   }, [createRendererContext, providerFactory, _fireAnalyticsEvent]);
   var serializer = (0, _react.useMemo)(function () {
     var _props$startPos;
-    return new _.ReactSerializer(deriveSerializerProps(_objectSpread(_objectSpread({}, props), {}, {
+    var init = deriveSerializerProps(_objectSpread(_objectSpread({}, props), {}, {
       startPos: (_props$startPos = props.startPos) !== null && _props$startPos !== void 0 ? _props$startPos : 0
-    })));
+    }));
+    if ((0, _platformFeatureFlags.fg)('cc_complexit_fe_progressive_adf_rendering')) {
+      var _props$createSerializ;
+      var newSerializer = (_props$createSerializ = props.createSerializer) === null || _props$createSerializ === void 0 ? void 0 : _props$createSerializ.call(props, init);
+      if (newSerializer) {
+        return newSerializer;
+      }
+    }
+    return new _.ReactSerializer(init);
   }, [deriveSerializerProps, props]);
   var localRef = (0, _react.useRef)(null);
   var editorRef = props.innerRef || localRef;

package/dist/es2019/react/nodes/mediaSingle/index.js

@@ -10,6 +10,8 @@ import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { MediaSingle as UIMediaSingle, WidthContext } from '@atlaskit/editor-common/ui';
 import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { isSSR } from '@atlaskit/editor-common/core-utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { FullPagePadding } from '../../../ui/Renderer/style';
 import { useAnnotationRangeDispatch } from '../../../ui/annotations/contexts/AnnotationRangeContext';
 import { useAnnotationHoverDispatch } from '../../../ui/annotations/contexts/AnnotationHoverContext';
@@ -125,7 +127,7 @@ const MediaSingleWithChildren = props => {
   const padding = isFullPage ? FullPagePadding * 2 : 0;
   const calcDimensions = useCallback(mediaContainerWidth => {
     const containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
-    const maxWidth = containerWidth;
+    const maxWidth = isSSR() && widthAttr && fg('platform_editor_fix_image_size_diff_during_ssr') ? Math.max(widthAttr, containerWidth) : containerWidth;
     const maxHeight = height / width * maxWidth;
     const cardDimensions = {
       width: `${maxWidth}px`,
@@ -146,7 +148,7 @@ const MediaSingleWithChildren = props => {
       cardDimensions,
       lineLength
     };
-  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width]);
+  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width, widthAttr]);
   const originalDimensions = useMemo(() => ({
     width,
     height

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth, akEditorTableLegacyCellMinWidth } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -191,9 +190,7 @@ export const Colgroup = props => {
   }
   return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    style: fg('platform-ssr-table-resize') ? undefined :
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    {
+    style: {
       width: akEditorTableNumberColumnWidth
     },
     "data-test-id": 'num'
@@ -203,6 +200,6 @@ export const Colgroup = props => {
   // eslint-disable-next-line react/no-array-index-key, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
   React.createElement("col", {
     key: idx,
-    style: fg('platform-ssr-table-resize') ? undefined : style
+    style: style
   })));
 };

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { browser } from '@atlaskit/editor-common/browser';
 import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -557,7 +558,7 @@ const TableWithShadows = overflowShadow(TableProcessor, {
 });
 const TableWithWidth = props => {
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-  if (fg('platform-ssr-table-resize')) {
+  if (!browser.safari && fg('platform-ssr-table-resize')) {
     var _props$columnWidths;
     const colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce((total, val) => total + val, 0)) || 0;
     if (colWidthsSum || props.allowTableResizing) {

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

@@ -288,7 +288,6 @@ export class TableContainer extends React.Component {
     const {
       isNumberColumnEnabled,
       layout,
-      renderWidth,
       columnWidths,
       stickyHeaders,
       tableNode,
@@ -327,7 +326,7 @@ export class TableContainer extends React.Component {
       ,
       style: {
         display: 'flex',
-        justifyContent: 'center'
+        justifyContent: `${tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout}`
       }
     }, /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -335,7 +334,7 @@ export class TableContainer extends React.Component {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ,
       style: {
-        width: `min(calc(100cqw - ${gutterPadding}px) ${tableWidthAttribute}`
+        width: `min(calc(100cqw - ${gutterPadding}px), ${tableWidthAttribute})`
       }
     }, /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -358,7 +357,6 @@ export class TableContainer extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: `${TableSharedCssClassName.TABLE_CONTAINER} ${this.props.shadowClassNames || ''}`,
-      "data-number-column": tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.isNumberColumnEnabled,
       "data-layout": this.updatedLayout,
       "data-testid": "table-container",
       ref: this.props.handleRef
@@ -369,7 +367,7 @@ export class TableContainer extends React.Component {
       "data-testid": "sticky-scrollbar-sentinel-top"
     }), stickyHeaders && tableNode && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
       isNumberColumnEnabled: isNumberColumnEnabled,
-      renderWidth: renderWidth,
+      renderWidth: 0,
       tableWidth: "inherit",
       layout: layout,
       handleRef: this.props.handleRef,
@@ -399,7 +397,7 @@ export class TableContainer extends React.Component {
       columnWidths: columnWidths,
       layout: layout,
       isNumberColumnEnabled: isNumberColumnEnabled,
-      renderWidth: renderWidth,
+      renderWidth: 0,
       tableNode: tableNode,
       rendererAppearance: rendererAppearance,
       isInsideOfBlockNode: isInsideOfBlockNode,

package/dist/es2019/react/utils/EditorMediaClientProvider.js

@@ -1,18 +1,20 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { MediaClientContext, getMediaClient } from '@atlaskit/media-client-react';
-import { useProvider } from '@atlaskit/editor-common/provider-factory';
+import { useProviderLayout, useProvider } from '@atlaskit/editor-common/provider-factory';
+import { fg } from '@atlaskit/platform-feature-flags';
 export const EditorMediaClientProvider = ({
   children,
   ssr
 }) => {
   const [mediaClientConfig, setMediaClientConfig] = useState();
-  const mediaProvider = useProvider('mediaProvider');
+  const oldMediaProvider = useProvider('mediaProvider');
+  const mediaProvider = useProviderLayout('mediaProvider');
 
   /**
    * If a mediaClientConfig is provided then we will force
    * skip the mediaClient from context
    */
-  const shouldSkipContext = Boolean((ssr === null || ssr === void 0 ? void 0 : ssr.config) || mediaProvider);
+  const shouldSkipContext = Boolean((ssr === null || ssr === void 0 ? void 0 : ssr.config) || oldMediaProvider || mediaProvider);
   const contextMediaClient = useContext(MediaClientContext);
 
   // MediaClientProvider currently requires a mediaClientConfig
@@ -25,12 +27,25 @@ export const EditorMediaClientProvider = ({
   // and provide a top level mediaClient context
   // This is useful for testing and creating examples.
   useEffect(() => {
-    if (ssr !== null && ssr !== void 0 && ssr.config) {
-      setMediaClientConfig(ssr.config);
-    } else if (mediaProvider) {
-      mediaProvider.then(provider => {
-        setMediaClientConfig(provider.viewMediaClientConfig);
-      });
+    if (!fg('platform_editor_speedup_media_client')) {
+      if (ssr !== null && ssr !== void 0 && ssr.config) {
+        setMediaClientConfig(ssr.config);
+      } else if (oldMediaProvider) {
+        oldMediaProvider.then(provider => {
+          setMediaClientConfig(provider.viewMediaClientConfig);
+        });
+      }
+    }
+  }, [oldMediaProvider, ssr]);
+  useLayoutEffect(() => {
+    if (fg('platform_editor_speedup_media_client')) {
+      if (ssr !== null && ssr !== void 0 && ssr.config) {
+        setMediaClientConfig(ssr.config);
+      } else if (mediaProvider) {
+        mediaProvider.then(provider => {
+          setMediaClientConfig(provider.viewMediaClientConfig);
+        });
+      }
     }
   }, [mediaProvider, ssr]);
   return /*#__PURE__*/React.createElement(MediaClientContext.Provider, {

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

@@ -60,7 +60,7 @@ export const breakoutInlineScriptContext = `
 
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function applyBreakoutAfterSSR(id, breakoutConsts, isFeatureFlagEnabled) {
+function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
   const MEDIA_NODE_TYPE = 'mediaSingle';
   const WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
   function findUp(element, condition) {
@@ -86,21 +86,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, isFeatureFlagEnabled) {
       if (item.target.nodeType !== Node.ELEMENT_NODE) {
         return;
       }
-      if (
-      /**
-       * The mutation observer is only called once per added node.
-       * The above condition only deals with direct children of <div class="ak-renderer-document" />
-       * When it is initially called on the direct children, not all the sub children have loaded.
-       * So nested media elements which are not immediately loaded as sub children are not available in the above conditional.
-       * Thus adding this conditional to deal with all media elements directly.
-       */
-      // Ignored via go/ees005
-      // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
-        // Ignored via go/ees005
-        // eslint-disable-next-line @atlaskit/editor/no-as-casting
-        applyMediaBreakout(item.target);
-      }
 
       // Remove with feature gate 'platform-ssr-table-resize'
       // Ignored via go/ees005
@@ -122,45 +107,62 @@ function applyBreakoutAfterSSR(id, breakoutConsts, isFeatureFlagEnabled) {
           }
 
           // When flag is on we are using CSS to calculate the table width thus don't need logic below to set the width and left.
-          if (!isFeatureFlagEnabled) {
-            if (node.classList.contains('pm-table-container') && mode === 'custom') {
-              // Ignored via go/ees005
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              const rendererWidth = renderer.offsetWidth;
-              const effectiveWidth = rendererWidth - breakoutConsts.padding;
-              width = `${Math.min(parseInt(node.style.width), effectiveWidth)}px`;
-            } else if (resizedBreakout) {
-              width = breakoutConsts.calcBreakoutWithCustomWidth(mode, 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
-              width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
-            }
-            if (node.style.width === width) {
-              return;
-            }
-            node.style.width = width;
+          if (shouldSkipBreakoutScript && node.classList.contains('pm-table-container')) {
+            return;
+          }
 
-            // Tables require some special logic, as they are not using common css transform approach,
-            // because it breaks with sticky headers. This logic is copied from a table node:
-            // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
-            if (node.classList.contains('pm-table-container') &&
+          // use breakout script for all other types of nodes
+          if (node.classList.contains('pm-table-container') && mode === 'custom') {
+            // Ignored via go/ees005
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const rendererWidth = renderer.offsetWidth;
+            const effectiveWidth = rendererWidth - breakoutConsts.padding;
+            width = `${Math.min(parseInt(node.style.width), effectiveWidth)}px`;
+          } else if (resizedBreakout) {
+            width = breakoutConsts.calcBreakoutWithCustomWidth(mode, node.dataset.width || null,
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            !renderer.classList.contains('is-full-width')) {
-              const lineLength = breakoutConsts.calcLineLength();
-              const left = lineLength / 2 - parseInt(width) / 2;
-              if (left < 0 && parseInt(width) > lineLength) {
-                node.style.left = left + 'px';
-              } else {
-                node.style.left = '';
-              }
+            renderer.offsetWidth);
+          } else {
+            // Ignored via go/ees005
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
+          }
+          if (node.style.width === width) {
+            return;
+          }
+          node.style.width = width;
+
+          // Tables require some special logic, as they are not using common css transform approach,
+          // because it breaks with sticky headers. This logic is copied from a table node:
+          // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
+          if (node.classList.contains('pm-table-container') &&
+          // Ignored via go/ees005
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          !renderer.classList.contains('is-full-width')) {
+            const lineLength = breakoutConsts.calcLineLength();
+            const left = lineLength / 2 - parseInt(width) / 2;
+            if (left < 0 && parseInt(width) > lineLength) {
+              node.style.left = left + 'px';
+            } else {
+              node.style.left = '';
             }
           }
         });
+      } else if (
+      /**
+       * The mutation observer is only called once per added node.
+       * The above condition only deals with direct children of <div class="ak-renderer-document" />
+       * When it is initially called on the direct children, not all the sub children have loaded.
+       * So nested media elements which are not immediately loaded as sub children are not available in the above conditional.
+       * Thus adding this conditional to deal with all media elements directly.
+       */
+      // Ignored via go/ees005
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
+        // Ignored via go/ees005
+        // eslint-disable-next-line @atlaskit/editor/no-as-casting
+        applyMediaBreakout(item.target);
       }
     });
   });

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

@@ -46,7 +46,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "114.12.0";
+const packageVersion = "114.13.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -247,10 +247,18 @@ export const RendererFunctionalComponent = props => {
   }, [createRendererContext, providerFactory, fireAnalyticsEvent]);
   const serializer = useMemo(() => {
     var _props$startPos;
-    return new ReactSerializer(deriveSerializerProps({
+    const init = deriveSerializerProps({
       ...props,
       startPos: (_props$startPos = props.startPos) !== null && _props$startPos !== void 0 ? _props$startPos : 0
-    }));
+    });
+    if (fg('cc_complexit_fe_progressive_adf_rendering')) {
+      var _props$createSerializ;
+      const newSerializer = (_props$createSerializ = props.createSerializer) === null || _props$createSerializ === void 0 ? void 0 : _props$createSerializ.call(props, init);
+      if (newSerializer) {
+        return newSerializer;
+      }
+    }
+    return new ReactSerializer(init);
   }, [deriveSerializerProps, props]);
   const localRef = useRef(null);
   const editorRef = props.innerRef || localRef;

package/dist/esm/react/nodes/mediaSingle/index.js

@@ -11,6 +11,8 @@ import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { MediaSingle as UIMediaSingle, WidthContext } from '@atlaskit/editor-common/ui';
 import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { isSSR } from '@atlaskit/editor-common/core-utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { FullPagePadding } from '../../../ui/Renderer/style';
 import { useAnnotationRangeDispatch } from '../../../ui/annotations/contexts/AnnotationRangeContext';
 import { useAnnotationHoverDispatch } from '../../../ui/annotations/contexts/AnnotationHoverContext';
@@ -128,7 +130,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
   var padding = isFullPage ? FullPagePadding * 2 : 0;
   var calcDimensions = useCallback(function (mediaContainerWidth) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
-    var maxWidth = containerWidth;
+    var maxWidth = isSSR() && widthAttr && fg('platform_editor_fix_image_size_diff_during_ssr') ? Math.max(widthAttr, containerWidth) : containerWidth;
     var maxHeight = height / width * maxWidth;
     var cardDimensions = {
       width: "".concat(maxWidth, "px"),
@@ -149,7 +151,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
       cardDimensions: cardDimensions,
       lineLength: lineLength
     };
-  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width]);
+  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width, widthAttr]);
   var originalDimensions = useMemo(function () {
     return {
       width: width,

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

@@ -2,7 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth, akEditorTableLegacyCellMinWidth } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -193,9 +192,7 @@ export var Colgroup = function Colgroup(props) {
   }
   return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    style: fg('platform-ssr-table-resize') ? undefined :
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    {
+    style: {
       width: akEditorTableNumberColumnWidth
     },
     "data-test-id": 'num'
@@ -206,7 +203,7 @@ export var Colgroup = function Colgroup(props) {
       // eslint-disable-next-line react/no-array-index-key, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       React.createElement("col", {
         key: idx,
-        style: fg('platform-ssr-table-resize') ? undefined : style
+        style: style
       })
     );
   }));

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

@@ -12,6 +12,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
+import { browser } from '@atlaskit/editor-common/browser';
 import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -611,7 +612,7 @@ var TableWithShadows = overflowShadow(TableProcessor, {
 });
 var TableWithWidth = function TableWithWidth(props) {
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-  if (fg('platform-ssr-table-resize')) {
+  if (!browser.safari && fg('platform-ssr-table-resize')) {
     var _props$columnWidths;
     var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
       return total + val;

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

@@ -337,7 +337,6 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
         isNumberColumnEnabled = _this$props.isNumberColumnEnabled,
         layout = _this$props.layout,
-        renderWidth = _this$props.renderWidth,
         columnWidths = _this$props.columnWidths,
         stickyHeaders = _this$props.stickyHeaders,
         tableNode = _this$props.tableNode,
@@ -373,7 +372,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         ,
         style: {
           display: 'flex',
-          justifyContent: 'center'
+          justifyContent: "".concat(tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout)
         }
       }, /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -381,7 +380,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
         ,
         style: {
-          width: "min(calc(100cqw - ".concat(gutterPadding, "px) ").concat(tableWidthAttribute)
+          width: "min(calc(100cqw - ".concat(gutterPadding, "px), ").concat(tableWidthAttribute, ")")
         }
       }, /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -397,7 +396,6 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
-        "data-number-column": tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.isNumberColumnEnabled,
         "data-layout": this.updatedLayout,
         "data-testid": "table-container",
         ref: this.props.handleRef
@@ -408,7 +406,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         "data-testid": "sticky-scrollbar-sentinel-top"
       }), stickyHeaders && tableNode && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,
-        renderWidth: renderWidth,
+        renderWidth: 0,
         tableWidth: "inherit",
         layout: layout,
         handleRef: this.props.handleRef,
@@ -438,7 +436,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         columnWidths: columnWidths,
         layout: layout,
         isNumberColumnEnabled: isNumberColumnEnabled,
-        renderWidth: renderWidth,
+        renderWidth: 0,
         tableNode: tableNode,
         rendererAppearance: rendererAppearance,
         isInsideOfBlockNode: isInsideOfBlockNode,

package/dist/esm/react/utils/EditorMediaClientProvider.js

@@ -1,7 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { MediaClientContext, getMediaClient } from '@atlaskit/media-client-react';
-import { useProvider } from '@atlaskit/editor-common/provider-factory';
+import { useProviderLayout, useProvider } from '@atlaskit/editor-common/provider-factory';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var EditorMediaClientProvider = function EditorMediaClientProvider(_ref) {
   var children = _ref.children,
     ssr = _ref.ssr;
@@ -9,13 +10,14 @@ export var EditorMediaClientProvider = function EditorMediaClientProvider(_ref)
     _useState2 = _slicedToArray(_useState, 2),
     mediaClientConfig = _useState2[0],
     setMediaClientConfig = _useState2[1];
-  var mediaProvider = useProvider('mediaProvider');
+  var oldMediaProvider = useProvider('mediaProvider');
+  var mediaProvider = useProviderLayout('mediaProvider');
 
   /**
    * If a mediaClientConfig is provided then we will force
    * skip the mediaClient from context
    */
-  var shouldSkipContext = Boolean((ssr === null || ssr === void 0 ? void 0 : ssr.config) || mediaProvider);
+  var shouldSkipContext = Boolean((ssr === null || ssr === void 0 ? void 0 : ssr.config) || oldMediaProvider || mediaProvider);
   var contextMediaClient = useContext(MediaClientContext);
 
   // MediaClientProvider currently requires a mediaClientConfig
@@ -30,12 +32,25 @@ export var EditorMediaClientProvider = function EditorMediaClientProvider(_ref)
   // and provide a top level mediaClient context
   // This is useful for testing and creating examples.
   useEffect(function () {
-    if (ssr !== null && ssr !== void 0 && ssr.config) {
-      setMediaClientConfig(ssr.config);
-    } else if (mediaProvider) {
-      mediaProvider.then(function (provider) {
-        setMediaClientConfig(provider.viewMediaClientConfig);
-      });
+    if (!fg('platform_editor_speedup_media_client')) {
+      if (ssr !== null && ssr !== void 0 && ssr.config) {
+        setMediaClientConfig(ssr.config);
+      } else if (oldMediaProvider) {
+        oldMediaProvider.then(function (provider) {
+          setMediaClientConfig(provider.viewMediaClientConfig);
+        });
+      }
+    }
+  }, [oldMediaProvider, ssr]);
+  useLayoutEffect(function () {
+    if (fg('platform_editor_speedup_media_client')) {
+      if (ssr !== null && ssr !== void 0 && ssr.config) {
+        setMediaClientConfig(ssr.config);
+      } else if (mediaProvider) {
+        mediaProvider.then(function (provider) {
+          setMediaClientConfig(provider.viewMediaClientConfig);
+        });
+      }
     }
   }, [mediaProvider, ssr]);
   return /*#__PURE__*/React.createElement(MediaClientContext.Provider, {

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

@@ -42,7 +42,7 @@ export var breakoutInlineScriptContext = "\n  var breakoutConsts = ".concat(JSON
 
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function applyBreakoutAfterSSR(id, breakoutConsts, isFeatureFlagEnabled) {
+function applyBreakoutAfterSSR(id, breakoutConsts, shouldSkipBreakoutScript) {
   var MEDIA_NODE_TYPE = 'mediaSingle';
   var WIDE_LAYOUT_MODES = ['full-width', 'wide', 'custom'];
   function findUp(element, condition) {
@@ -68,21 +68,6 @@ function applyBreakoutAfterSSR(id, breakoutConsts, isFeatureFlagEnabled) {
       if (item.target.nodeType !== Node.ELEMENT_NODE) {
         return;
       }
-      if (
-      /**
-       * The mutation observer is only called once per added node.
-       * The above condition only deals with direct children of <div class="ak-renderer-document" />
-       * When it is initially called on the direct children, not all the sub children have loaded.
-       * So nested media elements which are not immediately loaded as sub children are not available in the above conditional.
-       * Thus adding this conditional to deal with all media elements directly.
-       */
-      // Ignored via go/ees005
-      // eslint-disable-next-line @atlaskit/editor/no-as-casting
-      item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
-        // Ignored via go/ees005
-        // eslint-disable-next-line @atlaskit/editor/no-as-casting
-        applyMediaBreakout(item.target);
-      }
 
       // Remove with feature gate 'platform-ssr-table-resize'
       // Ignored via go/ees005
@@ -104,45 +89,62 @@ function applyBreakoutAfterSSR(id, breakoutConsts, isFeatureFlagEnabled) {
           }
 
           // When flag is on we are using CSS to calculate the table width thus don't need logic below to set the width and left.
-          if (!isFeatureFlagEnabled) {
-            if (node.classList.contains('pm-table-container') && mode === 'custom') {
-              // Ignored via go/ees005
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              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(mode, 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
-              width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
-            }
-            if (node.style.width === width) {
-              return;
-            }
-            node.style.width = width;
+          if (shouldSkipBreakoutScript && node.classList.contains('pm-table-container')) {
+            return;
+          }
 
-            // Tables require some special logic, as they are not using common css transform approach,
-            // because it breaks with sticky headers. This logic is copied from a table node:
-            // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
-            if (node.classList.contains('pm-table-container') &&
+          // use breakout script for all other types of nodes
+          if (node.classList.contains('pm-table-container') && mode === 'custom') {
+            // Ignored via go/ees005
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            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(mode, node.dataset.width || null,
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            !renderer.classList.contains('is-full-width')) {
-              var lineLength = breakoutConsts.calcLineLength();
-              var left = lineLength / 2 - parseInt(width) / 2;
-              if (left < 0 && parseInt(width) > lineLength) {
-                node.style.left = left + 'px';
-              } else {
-                node.style.left = '';
-              }
+            renderer.offsetWidth);
+          } else {
+            // Ignored via go/ees005
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            width = breakoutConsts.calcBreakoutWidth(mode, renderer.offsetWidth);
+          }
+          if (node.style.width === width) {
+            return;
+          }
+          node.style.width = width;
+
+          // Tables require some special logic, as they are not using common css transform approach,
+          // because it breaks with sticky headers. This logic is copied from a table node:
+          // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
+          if (node.classList.contains('pm-table-container') &&
+          // Ignored via go/ees005
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          !renderer.classList.contains('is-full-width')) {
+            var lineLength = breakoutConsts.calcLineLength();
+            var left = lineLength / 2 - parseInt(width) / 2;
+            if (left < 0 && parseInt(width) > lineLength) {
+              node.style.left = left + 'px';
+            } else {
+              node.style.left = '';
             }
           }
         });
+      } else if (
+      /**
+       * The mutation observer is only called once per added node.
+       * The above condition only deals with direct children of <div class="ak-renderer-document" />
+       * When it is initially called on the direct children, not all the sub children have loaded.
+       * So nested media elements which are not immediately loaded as sub children are not available in the above conditional.
+       * Thus adding this conditional to deal with all media elements directly.
+       */
+      // Ignored via go/ees005
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
+        // Ignored via go/ees005
+        // eslint-disable-next-line @atlaskit/editor/no-as-casting
+        applyMediaBreakout(item.target);
       }
     });
   });

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

@@ -49,7 +49,7 @@ import { removeEmptySpaceAroundContent } from './rendererHelper';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "114.12.0";
+var packageVersion = "114.13.0";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -244,9 +244,17 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
   }, [createRendererContext, providerFactory, _fireAnalyticsEvent]);
   var serializer = useMemo(function () {
     var _props$startPos;
-    return new ReactSerializer(deriveSerializerProps(_objectSpread(_objectSpread({}, props), {}, {
+    var init = deriveSerializerProps(_objectSpread(_objectSpread({}, props), {}, {
       startPos: (_props$startPos = props.startPos) !== null && _props$startPos !== void 0 ? _props$startPos : 0
-    })));
+    }));
+    if (fg('cc_complexit_fe_progressive_adf_rendering')) {
+      var _props$createSerializ;
+      var newSerializer = (_props$createSerializ = props.createSerializer) === null || _props$createSerializ === void 0 ? void 0 : _props$createSerializ.call(props, init);
+      if (newSerializer) {
+        return newSerializer;
+      }
+    }
+    return new ReactSerializer(init);
   }, [deriveSerializerProps, props]);
   var localRef = useRef(null);
   var editorRef = props.innerRef || localRef;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export { default as ReactSerializer } from './react';
+export { default as ReactSerializer, type ReactSerializerInit } from './react';
 export { default as TextSerializer } from './text';
 export { default as ReactRenderer, RendererWithAnalytics } from './ui/Renderer';
 export { nodeToReact as defaultNodeComponents } from './react/nodes';

package/dist/types/ui/renderer-props.d.ts

@@ -9,7 +9,7 @@ import type { UnsupportedContentLevelsTracking } from '@atlaskit/editor-common/u
 import type { ADFStage } from '@atlaskit/editor-common/validator';
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
-import type { RendererContext } from '../';
+import type { ReactSerializerInit, RendererContext, Serializer } from '../';
 import type { TextHighlighter, ExtensionViewportSize } from '../react/types';
 import type { RenderOutputStat } from '../render-document';
 import type { MediaOptions } from '../types/mediaOptions';
@@ -121,5 +121,10 @@ export interface RendererProps {
     UNSTABLE_textHighlighter?: TextHighlighter;
     UNSTABLE_allowTableAlignment?: boolean;
     UNSTABLE_allowTableResizing?: boolean;
+    /**
+     * Creates a new `Serializer` to transform the ADF `document` into `JSX.Element`.
+     * Allows Confluence to implement {@link https://hello.atlassian.net/wiki/spaces/~lmarinov/pages/5177285037/COMPLEXIT+Progressive+rendering+of+ADF progressive rendering}.
+     */
+    createSerializer?(init: ReactSerializerInit): Serializer<JSX.Element> | null;
 }
 export {};

package/dist/types-ts4.5/index.d.ts

@@ -1,4 +1,4 @@
-export { default as ReactSerializer } from './react';
+export { default as ReactSerializer, type ReactSerializerInit } from './react';
 export { default as TextSerializer } from './text';
 export { default as ReactRenderer, RendererWithAnalytics } from './ui/Renderer';
 export { nodeToReact as defaultNodeComponents } from './react/nodes';

package/dist/types-ts4.5/ui/renderer-props.d.ts

@@ -9,7 +9,7 @@ import type { UnsupportedContentLevelsTracking } from '@atlaskit/editor-common/u
 import type { ADFStage } from '@atlaskit/editor-common/validator';
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
-import type { RendererContext } from '../';
+import type { ReactSerializerInit, RendererContext, Serializer } from '../';
 import type { TextHighlighter, ExtensionViewportSize } from '../react/types';
 import type { RenderOutputStat } from '../render-document';
 import type { MediaOptions } from '../types/mediaOptions';
@@ -121,5 +121,10 @@ export interface RendererProps {
     UNSTABLE_textHighlighter?: TextHighlighter;
     UNSTABLE_allowTableAlignment?: boolean;
     UNSTABLE_allowTableResizing?: boolean;
+    /**
+     * Creates a new `Serializer` to transform the ADF `document` into `JSX.Element`.
+     * Allows Confluence to implement {@link https://hello.atlassian.net/wiki/spaces/~lmarinov/pages/5177285037/COMPLEXIT+Progressive+rendering+of+ADF progressive rendering}.
+     */
+    createSerializer?(init: ReactSerializerInit): Serializer<JSX.Element> | null;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "114.12.0",
+	"version": "114.13.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,16 +31,16 @@
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/code": "^17.1.0",
-		"@atlaskit/editor-common": "^103.20.0",
+		"@atlaskit/editor-common": "^103.22.0",
 		"@atlaskit/editor-json-transformer": "^8.24.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/emoji": "^69.1.0",
-		"@atlaskit/feature-gate-js-client": "^5.2.0",
+		"@atlaskit/feature-gate-js-client": "^5.3.0",
 		"@atlaskit/icon": "^25.6.0",
-		"@atlaskit/link-datasource": "^4.8.0",
+		"@atlaskit/link-datasource": "^4.9.0",
 		"@atlaskit/media-card": "^79.2.0",
 		"@atlaskit/media-client": "^32.0.0",
 		"@atlaskit/media-client-react": "^4.0.0",
@@ -51,7 +51,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.1.0",
 		"@atlaskit/react-ufo": "^3.9.0",
-		"@atlaskit/smart-card": "^36.12.0",
+		"@atlaskit/smart-card": "^36.13.0",
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^18.0.0",
@@ -133,6 +133,9 @@
 		"platform_renderer_annotations_create_debug_logging": {
 			"type": "boolean"
 		},
+		"platform_editor_speedup_media_client": {
+			"type": "boolean"
+		},
 		"platform_editor_annotation_position_comment_nodes": {
 			"type": "boolean"
 		},
@@ -160,9 +163,6 @@
 		"platform_editor_hyperlink_underline": {
 			"type": "boolean"
 		},
-		"platform_editor_react18_renderer": {
-			"type": "boolean"
-		},
 		"confluence-frontend-comments-panel": {
 			"type": "boolean"
 		},
@@ -226,6 +226,9 @@
 		"cc_complexit_fe_memoValidation_redundant_calls": {
 			"type": "boolean"
 		},
+		"cc_complexit_fe_progressive_adf_rendering": {
+			"type": "boolean"
+		},
 		"platform_ssr_smartlink_embeds": {
 			"type": "boolean"
 		},
@@ -237,6 +240,9 @@
 		},
 		"sticky_header_in_embedded_confluence_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_fix_image_size_diff_during_ssr": {
+			"type": "boolean"
 		}
 	},
 	"af:exports": {