@atlaskit/renderer 114.12.1 → 114.13.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/renderer
 
+## 114.13.1
+
+### Patch Changes
+
+- [#148536](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/148536)
+  [`da7c16d27cfcc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/da7c16d27cfcc) -
+  Update fragment serializer logic
+- Updated dependencies
+
+## 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

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/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

@@ -48,6 +48,7 @@ var _ValidationContext = require("./ValidationContext");
 var _RendererStyleContainer = require("./RendererStyleContainer");
 var _getBaseFontSize = require("./get-base-font-size");
 var _rendererHelper = require("./rendererHelper");
+var _useMemoFromPropsDerivative = require("./useMemoFromPropsDerivative");
 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; }
 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; }
@@ -59,7 +60,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.1";
+var packageVersion = "114.13.1";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -207,13 +208,14 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
     exposure: true
   }) ? fireAnalyticsEventNew : fireAnalyticsEventOld;
   var deriveSerializerProps = (0, _react.useCallback)(function (props) {
+    var _props$startPos;
     var stickyHeaders = props.stickyHeaders ? props.stickyHeaders === true ? {} : props.stickyHeaders : undefined;
     var annotationProvider = props.annotationProvider;
     var allowAnnotationsDraftMode = Boolean(annotationProvider && annotationProvider.inlineComment && annotationProvider.inlineComment.allowDraftMode);
     var _createRendererContex = createRendererContext(props.featureFlags, props.isTopLevelRenderer),
       featureFlags = _createRendererContex.featureFlags;
     return {
-      startPos: props.startPos,
+      startPos: (_props$startPos = props.startPos) !== null && _props$startPos !== void 0 ? _props$startPos : 0,
       providers: providerFactory,
       eventHandlers: props.eventHandlers,
       extensionHandlers: props.extensionHandlers,
@@ -252,12 +254,11 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
       allowTableResizing: props.UNSTABLE_allowTableResizing
     };
   }, [createRendererContext, providerFactory, _fireAnalyticsEvent]);
-  var serializer = (0, _react.useMemo)(function () {
-    var _props$startPos;
-    return new _.ReactSerializer(deriveSerializerProps(_objectSpread(_objectSpread({}, props), {}, {
-      startPos: (_props$startPos = props.startPos) !== null && _props$startPos !== void 0 ? _props$startPos : 0
-    })));
-  }, [deriveSerializerProps, props]);
+
+  // Abstract out the logic into its own function
+  var serializer = (0, _useMemoFromPropsDerivative.useMemoFromPropsDerivative)(function (serializerProps) {
+    return new _.ReactSerializer(serializerProps);
+  }, deriveSerializerProps, props);
   var localRef = (0, _react.useRef)(null);
   var editorRef = props.innerRef || localRef;
   var id = (0, _react.useMemo)(function () {

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

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMemoFromPropsDerivative = useMemoFromPropsDerivative;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+function useMemoFromPropsDerivative(factory, propsDerivator, props) {
+  // cache the last set of props
+  var prev = (0, _react.useRef)(props);
+  var prevFactory = (0, _react.useRef)(null);
+  return (0, _react.useMemo)(function () {
+    var init = propsDerivator(props);
+    if ((0, _platformFeatureFlags.fg)('cc_complexit_fe_reduce_fragment_serialization')) {
+      // check if the serializer is already created
+      var shouldCreate = !prevFactory.current;
+      // check each prop to see if value has changed and also check if the number of props has changed
+      if (prev.current !== props) {
+        // @ts-ignore - error TS2769: No overload matches this call.
+        var propsEntries = Object.entries(props);
+        // Break these into its own const to skip TS checks.
+        // @ts-ignore - error TS2769: No overload matches this call.
+        var isLengthDifferent = propsEntries.length !== Object.keys(prev.current).length;
+        // @ts-ignore
+        var isValueDifferent = propsEntries.some(function (_ref) {
+          var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+            key = _ref2[0],
+            prop = _ref2[1];
+          return prev.current[key] !== prop;
+        });
+        shouldCreate = isLengthDifferent || isValueDifferent;
+      }
+      prev.current = props;
+      // If first time or any prop value has changed, create a new serializer
+      if (shouldCreate) {
+        prevFactory.current = factory(init);
+      }
+    }
+
+    // If progressive rendering is enabled, create a new serializer
+    if ((0, _platformFeatureFlags.fg)('cc_complexit_fe_progressive_adf_rendering')) {
+      var _props$createSerializ;
+      // @ts-ignore - erorr TS2339 Property 'createSerializer' does not exist on type 'Props'.
+      var newSerializer = (_props$createSerializ = props.createSerializer) === null || _props$createSerializ === void 0 ? void 0 : _props$createSerializ.call(props, init);
+      if (newSerializer) {
+        return newSerializer;
+      }
+    }
+    return (0, _platformFeatureFlags.fg)('cc_complexit_fe_reduce_fragment_serialization') ? prevFactory.current : factory(init);
+  },
+  // To keep deps consistent, here disable the exhaustive-deps rule to drop factory from the deps array
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [propsDerivator, props]);
+}

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,