@atlaskit/renderer 139.0.0 → 139.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/renderer
 
+## 139.1.0
+
+### Minor Changes
+
+- [`d3a7f9016da28`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d3a7f9016da28) -
+  Add media render lifecycle callbacks for Remix-generated media behind
+  cc-maui-add-mark-for-remix-generated-images.
+
+### Patch Changes
+
+- [`f07b2560158eb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f07b2560158eb) -
+  Fix Expand top-margin shifts during streaming SSR hydration behind
+  platform_renderer_expand_ssr_margin_fix.
+
 ## 139.0.0
 
 ### Major Changes

package/dist/cjs/react/index.js

@@ -509,7 +509,8 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         _this$media,
         _this$media2,
         _this$media3,
-        _this$media4;
+        _this$media4,
+        _this$media5;
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var _node$type$schema$mar = node.type.schema.marks,
         annotation = _node$type$schema$mar.annotation,
@@ -546,6 +547,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         enableSyncMediaCard: (_this$media2 = this.media) === null || _this$media2 === void 0 ? void 0 : _this$media2.enableSyncMediaCard,
         mediaViewerExtensions: (_this$media3 = this.media) === null || _this$media3 === void 0 ? void 0 : _this$media3.mediaViewerExtensions,
         fallbackMediaNameFetcher: (_this$media4 = this.media) === null || _this$media4 === void 0 ? void 0 : _this$media4.fallbackMediaNameFetcher,
+        onMediaRenderEvent: (_this$media5 = this.media) === null || _this$media5 === void 0 ? void 0 : _this$media5.onMediaRenderEvent,
         nestedUnder: nestedUnder
       });
     }
@@ -608,22 +610,22 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
   }, {
     key: "getMediaGroupProps",
     value: function getMediaGroupProps(node) {
-      var _this$media5, _this$media6;
+      var _this$media6, _this$media7;
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         shouldOpenMediaViewer: this.shouldOpenMediaViewer,
         allowAltTextOnImages: this.allowAltTextOnImages,
         featureFlags: this.media && this.media.featureFlags,
-        enableDownloadButton: (_this$media5 = this.media) === null || _this$media5 === void 0 ? void 0 : _this$media5.enableDownloadButton,
-        ssr: (_this$media6 = this.media) === null || _this$media6 === void 0 ? void 0 : _this$media6.ssr
+        enableDownloadButton: (_this$media6 = this.media) === null || _this$media6 === void 0 ? void 0 : _this$media6.enableDownloadButton,
+        ssr: (_this$media7 = this.media) === null || _this$media7 === void 0 ? void 0 : _this$media7.ssr
       });
     }
   }, {
     key: "getMediaInlineProps",
     value: function getMediaInlineProps(node) {
-      var _this$media7, _this$media8;
+      var _this$media8, _this$media9;
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
-        ssr: (_this$media7 = this.media) === null || _this$media7 === void 0 ? void 0 : _this$media7.ssr,
-        fallbackMediaNameFetcher: (_this$media8 = this.media) === null || _this$media8 === void 0 ? void 0 : _this$media8.fallbackMediaNameFetcher
+        ssr: (_this$media8 = this.media) === null || _this$media8 === void 0 ? void 0 : _this$media8.ssr,
+        fallbackMediaNameFetcher: (_this$media9 = this.media) === null || _this$media9 === void 0 ? void 0 : _this$media9.fallbackMediaNameFetcher
       });
     }
   }, {

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

@@ -45,6 +45,15 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { (0, _defineProperty2.default)(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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); }
+var getDataConsumerMark = function getDataConsumerMark(marks) {
+  return marks.find(function (mark) {
+    var _mark$type;
+    return mark.type === 'dataConsumer' || ((_mark$type = mark.type) === null || _mark$type === void 0 ? void 0 : _mark$type.name) === 'dataConsumer';
+  });
+};
+var getRemixDataConsumerMark = function getRemixDataConsumerMark(marks) {
+  return (0, _fg.fg)('cc-maui-add-mark-for-remix-generated-images') ? getDataConsumerMark(marks) : undefined;
+};
 var linkStyle = (0, _react2.css)({
   position: 'absolute',
   background: 'transparent',
@@ -241,32 +250,60 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var Media = /*#__PURE__*/function (_PureComponent) {
-  function Media(props) {
+  function Media(_props) {
     var _this;
     (0, _classCallCheck2.default)(this, Media);
-    _this = _callSuper(this, Media, [props]);
+    _this = _callSuper(this, Media, [_props]);
+    (0, _defineProperty2.default)(_this, "mediaInstance", {});
     (0, _defineProperty2.default)(_this, "getDataConsumerMark", function () {
-      return (0, _fg.fg)('cc-maui-add-mark-for-remix-generated-images') ? _this.props.marks.find(function (m) {
-        var _m$type;
-        return m.type === 'dataConsumer' || ((_m$type = m.type) === null || _m$type === void 0 ? void 0 : _m$type.name) === 'dataConsumer';
-      }) : undefined;
+      return getRemixDataConsumerMark(_this.props.marks);
+    });
+    (0, _defineProperty2.default)(_this, "getDataConsumerSource", function () {
+      var _getDataConsumerMark;
+      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props;
+      return (_getDataConsumerMark = getDataConsumerMark(props.marks)) === null || _getDataConsumerMark === void 0 || (_getDataConsumerMark = _getDataConsumerMark.attrs.sources) === null || _getDataConsumerMark === void 0 ? void 0 : _getDataConsumerMark[0];
+    });
+    (0, _defineProperty2.default)(_this, "emitMediaRenderEvent", function (event) {
+      var _props$onMediaRenderE;
+      var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.props;
+      (_props$onMediaRenderE = props.onMediaRenderEvent) === null || _props$onMediaRenderE === void 0 || _props$onMediaRenderE.call(props, _objectSpread(_objectSpread({}, event), {}, {
+        dataConsumerSource: _this.getDataConsumerSource(props),
+        mediaId: props.id,
+        mediaInstance: _this.mediaInstance
+      }));
+    });
+    (0, _defineProperty2.default)(_this, "onPreviewRender", function (renderedMediaId) {
+      var _this$props$onPreview, _this$props;
+      (_this$props$onPreview = (_this$props = _this.props).onPreviewRender) === null || _this$props$onPreview === void 0 || _this$props$onPreview.call(_this$props, renderedMediaId);
+      _this.emitMediaRenderEvent({
+        renderedMediaId: renderedMediaId,
+        type: 'preview-rendered'
+      });
+    });
+    (0, _defineProperty2.default)(_this, "onError", function (reason) {
+      var _this$props$onError, _this$props2;
+      (_this$props$onError = (_this$props2 = _this.props).onError) === null || _this$props$onError === void 0 || _this$props$onError.call(_this$props2, reason);
+      _this.emitMediaRenderEvent({
+        reason: reason,
+        type: 'error'
+      });
     });
     (0, _defineProperty2.default)(_this, "renderCard", function () {
       var _dataConsumerMark$att;
       var providers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var contextIdentifierProvider = providers.contextIdentifierProvider;
-      var _this$props = _this.props,
-        allowAltTextOnImages = _this$props.allowAltTextOnImages,
-        alt = _this$props.alt,
-        featureFlags = _this$props.featureFlags,
-        allowMediaViewer = _this$props.shouldOpenMediaViewer,
-        enableDownloadButton = _this$props.enableDownloadButton,
-        ssr = _this$props.ssr,
-        width = _this$props.width,
-        height = _this$props.height,
-        mediaSingleElement = _this$props.mediaSingleElement,
-        _this$props$isDraftin = _this$props.isDrafting,
-        isDrafting = _this$props$isDraftin === void 0 ? false : _this$props$isDraftin;
+      var _this$props3 = _this.props,
+        allowAltTextOnImages = _this$props3.allowAltTextOnImages,
+        alt = _this$props3.alt,
+        featureFlags = _this$props3.featureFlags,
+        allowMediaViewer = _this$props3.shouldOpenMediaViewer,
+        enableDownloadButton = _this$props3.enableDownloadButton,
+        ssr = _this$props3.ssr,
+        width = _this$props3.width,
+        height = _this$props3.height,
+        mediaSingleElement = _this$props3.mediaSingleElement,
+        _this$props3$isDrafti = _this$props3.isDrafting,
+        isDrafting = _this$props3$isDrafti === void 0 ? false : _this$props3$isDrafti;
       var annotationMarks = _this.props.isAnnotationMark ? _this.props.marks.filter(_this.props.isAnnotationMark) : undefined;
       var borderMark = _this.props.marks.find(_this.props.isBorderMark);
       var dataConsumerMark = _this.getDataConsumerMark();
@@ -318,14 +355,16 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         alt: allowAltTextOnImages ? alt : undefined,
         featureFlags: featureFlags,
         shouldEnableDownloadButton: enableDownloadButton,
-        ssr: ssr
+        ssr: ssr,
+        onError: _this.props.onMediaRenderEvent || _this.props.onError ? _this.onError : undefined,
+        onPreviewRender: _this.props.onMediaRenderEvent || _this.props.onPreviewRender ? _this.onPreviewRender : undefined
       }))))));
     });
     (0, _defineProperty2.default)(_this, "handleMediaLinkClick", function (event) {
-      var _this$props2 = _this.props,
-        fireAnalyticsEvent = _this$props2.fireAnalyticsEvent,
-        isLinkMark = _this$props2.isLinkMark,
-        marks = _this$props2.marks;
+      var _this$props4 = _this.props,
+        fireAnalyticsEvent = _this$props4.fireAnalyticsEvent,
+        isLinkMark = _this$props4.isLinkMark,
+        marks = _this$props4.marks;
       if (fireAnalyticsEvent) {
         fireAnalyticsEvent({
           action: _analytics.ACTION.VISITED,
@@ -354,6 +393,9 @@ var Media = /*#__PURE__*/function (_PureComponent) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _dataConsumerMark$att2;
+      this.emitMediaRenderEvent({
+        type: 'mounted'
+      });
       var dataConsumerMark = this.getDataConsumerMark();
       var infographicType = dataConsumerMark === null || dataConsumerMark === void 0 || (_dataConsumerMark$att2 = dataConsumerMark.attrs.sources) === null || _dataConsumerMark$att2 === void 0 ? void 0 : _dataConsumerMark$att2[0];
       if (infographicType && this.props.fireAnalyticsEvent) {
@@ -370,6 +412,25 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         });
       }
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.id !== this.props.id || this.getDataConsumerSource(prevProps) !== this.getDataConsumerSource() || prevProps.onMediaRenderEvent !== this.props.onMediaRenderEvent) {
+        this.emitMediaRenderEvent({
+          type: 'unmounted'
+        }, prevProps);
+        this.emitMediaRenderEvent({
+          type: 'mounted'
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.emitMediaRenderEvent({
+        type: 'unmounted'
+      });
+    }
   }, {
     key: "render",
     value: function render() {

package/dist/cjs/ui/MediaCard.js

@@ -108,11 +108,12 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
       };
     }());
     (0, _defineProperty2.default)(_this, "onError", function (reason) {
-      var _this$props$fireAnaly, _this$props3;
+      var _this$props$onError, _this$props3, _this$props$fireAnaly, _this$props4;
       var _this$props2 = _this.props,
         nestedUnder = _this$props2.nestedUnder,
         rendererContext = _this$props2.rendererContext;
-      (_this$props$fireAnaly = (_this$props3 = _this.props).fireAnalyticsEvent) === null || _this$props$fireAnaly === void 0 || _this$props$fireAnaly.call(_this$props3, {
+      (_this$props$onError = (_this$props3 = _this.props).onError) === null || _this$props$onError === void 0 || _this$props$onError.call(_this$props3, reason);
+      (_this$props$fireAnaly = (_this$props4 = _this.props).fireAnalyticsEvent) === null || _this$props$fireAnaly === void 0 || _this$props$fireAnaly.call(_this$props4, {
         action: _analytics.ACTION.ERRORED,
         actionSubject: _analytics.ACTION_SUBJECT.RENDERER,
         actionSubjectId: _analytics.ACTION_SUBJECT_ID.MEDIA,
@@ -127,6 +128,16 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         } : {})
       });
     });
+    (0, _defineProperty2.default)(_this, "onConsumerError", function (reason) {
+      var _this$props$onError2, _this$props5;
+      (_this$props$onError2 = (_this$props5 = _this.props).onError) === null || _this$props$onError2 === void 0 || _this$props$onError2.call(_this$props5, reason);
+    });
+    (0, _defineProperty2.default)(_this, "getMediaErrorHandler", function () {
+      if ((0, _expValEquals.expValEquals)('platform_editor_media_error_analytics', 'isEnabled', true)) {
+        return _this.onError;
+      }
+      return _this.props.onError ? _this.onConsumerError : undefined;
+    });
     (0, _defineProperty2.default)(_this, "renderLoadingCard", function () {
       var cardDimensions = _this.props.cardDimensions;
       return /*#__PURE__*/_react.default.createElement(_mediaCard.CardLoading, {
@@ -160,11 +171,11 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var _this$props4, rendererContext, contextIdentifierProvider, id, url, collectionName, nodeIsInCache, _t2, _t3;
+        var _this$props6, rendererContext, contextIdentifierProvider, id, url, collectionName, nodeIsInCache, _t2, _t3;
         return _regenerator.default.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              _this$props4 = this.props, rendererContext = _this$props4.rendererContext, contextIdentifierProvider = _this$props4.contextIdentifierProvider, id = _this$props4.id, url = _this$props4.url, collectionName = _this$props4.collection;
+              _this$props6 = this.props, rendererContext = _this$props6.rendererContext, contextIdentifierProvider = _this$props6.contextIdentifierProvider, id = _this$props6.id, url = _this$props6.url, collectionName = _this$props6.collection;
               if (!contextIdentifierProvider) {
                 _context2.next = 2;
                 break;
@@ -215,9 +226,9 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$props5 = this.props,
-        id = _this$props5.id,
-        dataURI = _this$props5.url;
+      var _this$props7 = this.props,
+        id = _this$props7.id,
+        dataURI = _this$props7.url;
       if (id) {
         mediaIdentifierMap.delete(id);
       } else if (dataURI) {
@@ -227,20 +238,20 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderExternal",
     value: function renderExternal(shouldOpenMediaViewer) {
-      var _this$props6 = this.props,
-        cardDimensions = _this$props6.cardDimensions,
-        resizeMode = _this$props6.resizeMode,
-        appearance = _this$props6.appearance,
-        url = _this$props6.url,
-        imageStatus = _this$props6.imageStatus,
-        disableOverlay = _this$props6.disableOverlay,
-        alt = _this$props6.alt,
-        featureFlags = _this$props6.featureFlags,
-        ssr = _this$props6.ssr,
-        mediaClient = _this$props6.mediaClient,
-        dataAttributes = _this$props6.dataAttributes,
-        enableSyncMediaCard = _this$props6.enableSyncMediaCard,
-        localId = _this$props6.localId;
+      var _this$props8 = this.props,
+        cardDimensions = _this$props8.cardDimensions,
+        resizeMode = _this$props8.resizeMode,
+        appearance = _this$props8.appearance,
+        url = _this$props8.url,
+        imageStatus = _this$props8.imageStatus,
+        disableOverlay = _this$props8.disableOverlay,
+        alt = _this$props8.alt,
+        featureFlags = _this$props8.featureFlags,
+        ssr = _this$props8.ssr,
+        mediaClient = _this$props8.mediaClient,
+        dataAttributes = _this$props8.dataAttributes,
+        enableSyncMediaCard = _this$props8.enableSyncMediaCard,
+        localId = _this$props8.localId;
       if (imageStatus === 'loading' || !url) {
         return this.renderLoadingCard();
       }
@@ -278,7 +289,8 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
           featureFlags: featureFlags,
           ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
           shouldHideTooltip: false,
-          onError: (0, _expValEquals.expValEquals)('platform_editor_media_error_analytics', 'isEnabled', true) ? this.onError : undefined
+          onError: this.getMediaErrorHandler(),
+          onPreviewRender: this.props.onPreviewRender
         }))
       );
     }
@@ -289,27 +301,27 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
       var _this$state = this.state,
         contextIdentifierProvider = _this$state.contextIdentifierProvider,
         fileState = _this$state.fileState;
-      var _this$props7 = this.props,
-        id = _this$props7.id,
-        alt = _this$props7.alt,
-        type = _this$props7.type,
-        collection = _this$props7.collection,
-        occurrenceKey = _this$props7.occurrenceKey,
-        cardDimensions = _this$props7.cardDimensions,
-        resizeMode = _this$props7.resizeMode,
-        disableOverlay = _this$props7.disableOverlay,
-        useInlinePlayer = _this$props7.useInlinePlayer,
-        originalDimensions = _this$props7.originalDimensions,
-        forceOpenMediaViewer = _this$props7.shouldOpenMediaViewer,
-        featureFlags = _this$props7.featureFlags,
-        shouldEnableDownloadButton = _this$props7.shouldEnableDownloadButton,
-        ssr = _this$props7.ssr,
-        mediaClient = _this$props7.mediaClient,
-        dataAttributes = _this$props7.dataAttributes,
-        enableSyncMediaCard = _this$props7.enableSyncMediaCard,
-        localId = _this$props7.localId,
-        mediaViewerExtensions = _this$props7.mediaViewerExtensions,
-        fallbackMediaNameFetcher = _this$props7.fallbackMediaNameFetcher;
+      var _this$props9 = this.props,
+        id = _this$props9.id,
+        alt = _this$props9.alt,
+        type = _this$props9.type,
+        collection = _this$props9.collection,
+        occurrenceKey = _this$props9.occurrenceKey,
+        cardDimensions = _this$props9.cardDimensions,
+        resizeMode = _this$props9.resizeMode,
+        disableOverlay = _this$props9.disableOverlay,
+        useInlinePlayer = _this$props9.useInlinePlayer,
+        originalDimensions = _this$props9.originalDimensions,
+        forceOpenMediaViewer = _this$props9.shouldOpenMediaViewer,
+        featureFlags = _this$props9.featureFlags,
+        shouldEnableDownloadButton = _this$props9.shouldEnableDownloadButton,
+        ssr = _this$props9.ssr,
+        mediaClient = _this$props9.mediaClient,
+        dataAttributes = _this$props9.dataAttributes,
+        enableSyncMediaCard = _this$props9.enableSyncMediaCard,
+        localId = _this$props9.localId,
+        mediaViewerExtensions = _this$props9.mediaViewerExtensions,
+        fallbackMediaNameFetcher = _this$props9.fallbackMediaNameFetcher;
       var isMobile = false;
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
       var isInlinePlayer = isMobile ? false : shouldPlayInline;
@@ -378,7 +390,8 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         shouldHideTooltip: isMobile,
         mediaViewerExtensions: mediaViewerExtensions,
         fallbackMediaNameFetcher: fallbackMediaNameFetcher,
-        onError: (0, _expValEquals.expValEquals)('platform_editor_media_error_analytics', 'isEnabled', true) ? this.onError : undefined
+        onError: this.getMediaErrorHandler(),
+        onPreviewRender: this.props.onPreviewRender
       }));
     }
   }]);

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

@@ -1078,6 +1078,12 @@ var centerWrapperStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".
     flexShrink: 0
   }
 }));
+
+// Reset only Expands with no preceding content sibling. Streaming SSR style/script siblings
+// are ignored so moving them to the head on the client does not change the top margin.
+var expandSsrMarginStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_consts.RendererCssClassName.STICKY_SAFE_BREAKOUT_INNER, " > [data-node-type='expand']:not(:not(style, script) ~ *)"), {
+  marginTop: 0
+}));
 var baseOtherStylesDuplicateAnchor = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
   '& .UnknownBlock': {
     fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
@@ -2289,7 +2295,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     textHighlightPaddingStyles, tasksAndDecisionsStyles, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, (0, _fg.fg)('editor_inline_comments_on_inline_nodes') && ((0, _expValEquals.expValEquals)('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-    (0, _fg.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
+    (0, _fg.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, (0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, (0, _fg.fg)('platform_renderer_expand_ssr_margin_fix') && expandSsrMarginStyles,
     // this should be placed after baseOtherStyles
     (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && ((0, _expValEquals.expValEquals)('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), (0, _fg.fg)('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeScopedStyles, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_fit_to_content_patch_2') && tableContentModeExtensionContainmentStyles, (0, _expValEquals.expValEquals)('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, (0, _fg.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && ((0, _expValEquals.expValEquals)('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, (0, _expValEquals.expValEquals)('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId

package/dist/es2019/react/index.js

@@ -464,7 +464,7 @@ export default class ReactSerializer {
     };
   }
   getMediaProps(node, path = []) {
-    var _this$media, _this$media2, _this$media3, _this$media4;
+    var _this$media, _this$media2, _this$media3, _this$media4, _this$media5;
     const {
       marks: {
         annotation,
@@ -496,6 +496,7 @@ export default class ReactSerializer {
       enableSyncMediaCard: (_this$media2 = this.media) === null || _this$media2 === void 0 ? void 0 : _this$media2.enableSyncMediaCard,
       mediaViewerExtensions: (_this$media3 = this.media) === null || _this$media3 === void 0 ? void 0 : _this$media3.mediaViewerExtensions,
       fallbackMediaNameFetcher: (_this$media4 = this.media) === null || _this$media4 === void 0 ? void 0 : _this$media4.fallbackMediaNameFetcher,
+      onMediaRenderEvent: (_this$media5 = this.media) === null || _this$media5 === void 0 ? void 0 : _this$media5.onMediaRenderEvent,
       nestedUnder
     };
   }
@@ -544,22 +545,22 @@ export default class ReactSerializer {
     };
   }
   getMediaGroupProps(node) {
-    var _this$media5, _this$media6;
+    var _this$media6, _this$media7;
     return {
       ...this.getProps(node),
       shouldOpenMediaViewer: this.shouldOpenMediaViewer,
       allowAltTextOnImages: this.allowAltTextOnImages,
       featureFlags: this.media && this.media.featureFlags,
-      enableDownloadButton: (_this$media5 = this.media) === null || _this$media5 === void 0 ? void 0 : _this$media5.enableDownloadButton,
-      ssr: (_this$media6 = this.media) === null || _this$media6 === void 0 ? void 0 : _this$media6.ssr
+      enableDownloadButton: (_this$media6 = this.media) === null || _this$media6 === void 0 ? void 0 : _this$media6.enableDownloadButton,
+      ssr: (_this$media7 = this.media) === null || _this$media7 === void 0 ? void 0 : _this$media7.ssr
     };
   }
   getMediaInlineProps(node) {
-    var _this$media7, _this$media8;
+    var _this$media8, _this$media9;
     return {
       ...this.getProps(node),
-      ssr: (_this$media7 = this.media) === null || _this$media7 === void 0 ? void 0 : _this$media7.ssr,
-      fallbackMediaNameFetcher: (_this$media8 = this.media) === null || _this$media8 === void 0 ? void 0 : _this$media8.fallbackMediaNameFetcher
+      ssr: (_this$media8 = this.media) === null || _this$media8 === void 0 ? void 0 : _this$media8.ssr,
+      fallbackMediaNameFetcher: (_this$media9 = this.media) === null || _this$media9 === void 0 ? void 0 : _this$media9.fallbackMediaNameFetcher
     };
   }
   getTaskItemProps(node, path = []) {

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

@@ -25,6 +25,11 @@ import { useInlineCommentsFilter } from '../../../ui/annotations/hooks/use-inlin
 import { useInlineCommentSubscriberContext } from '../../../ui/annotations/hooks/use-inline-comment-subscriber';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
 import { useAnnotationRangeState } from '../../../ui/annotations/contexts/AnnotationRangeContext';
+const getDataConsumerMark = marks => marks.find(mark => {
+  var _mark$type;
+  return mark.type === 'dataConsumer' || ((_mark$type = mark.type) === null || _mark$type === void 0 ? void 0 : _mark$type.name) === 'dataConsumer';
+});
+const getRemixDataConsumerMark = marks => fg('cc-maui-add-mark-for-remix-generated-images') ? getDataConsumerMark(marks) : undefined;
 const linkStyle = css({
   position: 'absolute',
   background: 'transparent',
@@ -212,12 +217,39 @@ const CommentBadgeWrapper = ({
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 class Media extends PureComponent {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "getDataConsumerMark", () => fg('cc-maui-add-mark-for-remix-generated-images') ? this.props.marks.find(m => {
-      var _m$type;
-      return m.type === 'dataConsumer' || ((_m$type = m.type) === null || _m$type === void 0 ? void 0 : _m$type.name) === 'dataConsumer';
-    }) : undefined);
+  constructor(_props) {
+    super(_props);
+    _defineProperty(this, "mediaInstance", {});
+    _defineProperty(this, "getDataConsumerMark", () => getRemixDataConsumerMark(this.props.marks));
+    _defineProperty(this, "getDataConsumerSource", (props = this.props) => {
+      var _getDataConsumerMark, _getDataConsumerMark$;
+      return (_getDataConsumerMark = getDataConsumerMark(props.marks)) === null || _getDataConsumerMark === void 0 ? void 0 : (_getDataConsumerMark$ = _getDataConsumerMark.attrs.sources) === null || _getDataConsumerMark$ === void 0 ? void 0 : _getDataConsumerMark$[0];
+    });
+    _defineProperty(this, "emitMediaRenderEvent", (event, props = this.props) => {
+      var _props$onMediaRenderE;
+      (_props$onMediaRenderE = props.onMediaRenderEvent) === null || _props$onMediaRenderE === void 0 ? void 0 : _props$onMediaRenderE.call(props, {
+        ...event,
+        dataConsumerSource: this.getDataConsumerSource(props),
+        mediaId: props.id,
+        mediaInstance: this.mediaInstance
+      });
+    });
+    _defineProperty(this, "onPreviewRender", renderedMediaId => {
+      var _this$props$onPreview, _this$props;
+      (_this$props$onPreview = (_this$props = this.props).onPreviewRender) === null || _this$props$onPreview === void 0 ? void 0 : _this$props$onPreview.call(_this$props, renderedMediaId);
+      this.emitMediaRenderEvent({
+        renderedMediaId,
+        type: 'preview-rendered'
+      });
+    });
+    _defineProperty(this, "onError", reason => {
+      var _this$props$onError, _this$props2;
+      (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, reason);
+      this.emitMediaRenderEvent({
+        reason,
+        type: 'error'
+      });
+    });
     _defineProperty(this, "renderCard", (providers = {}) => {
       var _dataConsumerMark$att;
       const {
@@ -287,7 +319,9 @@ class Media extends PureComponent {
         alt: allowAltTextOnImages ? alt : undefined,
         featureFlags: featureFlags,
         shouldEnableDownloadButton: enableDownloadButton,
-        ssr: ssr
+        ssr: ssr,
+        onError: this.props.onMediaRenderEvent || this.props.onError ? this.onError : undefined,
+        onPreviewRender: this.props.onMediaRenderEvent || this.props.onPreviewRender ? this.onPreviewRender : undefined
       }))))));
     });
     _defineProperty(this, "handleMediaLinkClick", event => {
@@ -320,6 +354,9 @@ class Media extends PureComponent {
   }
   componentDidMount() {
     var _dataConsumerMark$att2;
+    this.emitMediaRenderEvent({
+      type: 'mounted'
+    });
     const dataConsumerMark = this.getDataConsumerMark();
     const infographicType = dataConsumerMark === null || dataConsumerMark === void 0 ? void 0 : (_dataConsumerMark$att2 = dataConsumerMark.attrs.sources) === null || _dataConsumerMark$att2 === void 0 ? void 0 : _dataConsumerMark$att2[0];
     if (infographicType && this.props.fireAnalyticsEvent) {
@@ -336,6 +373,21 @@ class Media extends PureComponent {
       });
     }
   }
+  componentDidUpdate(prevProps) {
+    if (prevProps.id !== this.props.id || this.getDataConsumerSource(prevProps) !== this.getDataConsumerSource() || prevProps.onMediaRenderEvent !== this.props.onMediaRenderEvent) {
+      this.emitMediaRenderEvent({
+        type: 'unmounted'
+      }, prevProps);
+      this.emitMediaRenderEvent({
+        type: 'mounted'
+      });
+    }
+  }
+  componentWillUnmount() {
+    this.emitMediaRenderEvent({
+      type: 'unmounted'
+    });
+  }
   render() {
     const {
       providers

package/dist/es2019/ui/MediaCard.js

@@ -63,12 +63,13 @@ export class MediaCardView extends Component {
       }
     });
     _defineProperty(this, "onError", reason => {
-      var _this$props$fireAnaly, _this$props;
+      var _this$props$onError, _this$props, _this$props$fireAnaly, _this$props2;
       const {
         nestedUnder,
         rendererContext
       } = this.props;
-      (_this$props$fireAnaly = (_this$props = this.props).fireAnalyticsEvent) === null || _this$props$fireAnaly === void 0 ? void 0 : _this$props$fireAnaly.call(_this$props, {
+      (_this$props$onError = (_this$props = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props, reason);
+      (_this$props$fireAnaly = (_this$props2 = this.props).fireAnalyticsEvent) === null || _this$props$fireAnaly === void 0 ? void 0 : _this$props$fireAnaly.call(_this$props2, {
         action: ACTION.ERRORED,
         actionSubject: ACTION_SUBJECT.RENDERER,
         actionSubjectId: ACTION_SUBJECT_ID.MEDIA,
@@ -85,6 +86,16 @@ export class MediaCardView extends Component {
         }
       });
     });
+    _defineProperty(this, "onConsumerError", reason => {
+      var _this$props$onError2, _this$props3;
+      (_this$props$onError2 = (_this$props3 = this.props).onError) === null || _this$props$onError2 === void 0 ? void 0 : _this$props$onError2.call(_this$props3, reason);
+    });
+    _defineProperty(this, "getMediaErrorHandler", () => {
+      if (expValEquals('platform_editor_media_error_analytics', 'isEnabled', true)) {
+        return this.onError;
+      }
+      return this.props.onError ? this.onConsumerError : undefined;
+    });
     _defineProperty(this, "renderLoadingCard", () => {
       const {
         cardDimensions
@@ -218,7 +229,8 @@ export class MediaCardView extends Component {
         featureFlags: featureFlags,
         ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
         shouldHideTooltip: false,
-        onError: expValEquals('platform_editor_media_error_analytics', 'isEnabled', true) ? this.onError : undefined
+        onError: this.getMediaErrorHandler(),
+        onPreviewRender: this.props.onPreviewRender
       }))
     );
   }
@@ -316,7 +328,8 @@ export class MediaCardView extends Component {
       shouldHideTooltip: isMobile,
       mediaViewerExtensions: mediaViewerExtensions,
       fallbackMediaNameFetcher: fallbackMediaNameFetcher,
-      onError: expValEquals('platform_editor_media_error_analytics', 'isEnabled', true) ? this.onError : undefined
+      onError: this.getMediaErrorHandler(),
+      onPreviewRender: this.props.onPreviewRender
     }));
   }
 }

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

@@ -1278,6 +1278,14 @@ const centerWrapperStyles = css({
     }
   }
 });
+
+// Reset only Expands with no preceding content sibling. Streaming SSR style/script siblings
+// are ignored so moving them to the head on the client does not change the top margin.
+const expandSsrMarginStyles = css({
+  [`.${RendererCssClassName.DOCUMENT} .${RendererCssClassName.STICKY_SAFE_BREAKOUT_INNER} > [data-node-type='expand']:not(:not(style, script) ~ *)`]: {
+    marginTop: 0
+  }
+});
 const baseOtherStylesDuplicateAnchor = css({
   '& .UnknownBlock': {
     fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
@@ -2919,7 +2927,7 @@ export const RendererStyleContainer = props => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     textHighlightPaddingStyles, tasksAndDecisionsStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && (expValEquals('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-    fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
+    fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, fg('platform_renderer_expand_ssr_margin_fix') && expandSsrMarginStyles,
     // this should be placed after baseOtherStyles
     expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), fg('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeScopedStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_fit_to_content_patch_2') && tableContentModeExtensionContainmentStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && isExperimentEnabled('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId

package/dist/esm/react/index.js

@@ -502,7 +502,8 @@ var ReactSerializer = /*#__PURE__*/function () {
         _this$media,
         _this$media2,
         _this$media3,
-        _this$media4;
+        _this$media4,
+        _this$media5;
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var _node$type$schema$mar = node.type.schema.marks,
         annotation = _node$type$schema$mar.annotation,
@@ -539,6 +540,7 @@ var ReactSerializer = /*#__PURE__*/function () {
         enableSyncMediaCard: (_this$media2 = this.media) === null || _this$media2 === void 0 ? void 0 : _this$media2.enableSyncMediaCard,
         mediaViewerExtensions: (_this$media3 = this.media) === null || _this$media3 === void 0 ? void 0 : _this$media3.mediaViewerExtensions,
         fallbackMediaNameFetcher: (_this$media4 = this.media) === null || _this$media4 === void 0 ? void 0 : _this$media4.fallbackMediaNameFetcher,
+        onMediaRenderEvent: (_this$media5 = this.media) === null || _this$media5 === void 0 ? void 0 : _this$media5.onMediaRenderEvent,
         nestedUnder: nestedUnder
       });
     }
@@ -601,22 +603,22 @@ var ReactSerializer = /*#__PURE__*/function () {
   }, {
     key: "getMediaGroupProps",
     value: function getMediaGroupProps(node) {
-      var _this$media5, _this$media6;
+      var _this$media6, _this$media7;
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         shouldOpenMediaViewer: this.shouldOpenMediaViewer,
         allowAltTextOnImages: this.allowAltTextOnImages,
         featureFlags: this.media && this.media.featureFlags,
-        enableDownloadButton: (_this$media5 = this.media) === null || _this$media5 === void 0 ? void 0 : _this$media5.enableDownloadButton,
-        ssr: (_this$media6 = this.media) === null || _this$media6 === void 0 ? void 0 : _this$media6.ssr
+        enableDownloadButton: (_this$media6 = this.media) === null || _this$media6 === void 0 ? void 0 : _this$media6.enableDownloadButton,
+        ssr: (_this$media7 = this.media) === null || _this$media7 === void 0 ? void 0 : _this$media7.ssr
       });
     }
   }, {
     key: "getMediaInlineProps",
     value: function getMediaInlineProps(node) {
-      var _this$media7, _this$media8;
+      var _this$media8, _this$media9;
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
-        ssr: (_this$media7 = this.media) === null || _this$media7 === void 0 ? void 0 : _this$media7.ssr,
-        fallbackMediaNameFetcher: (_this$media8 = this.media) === null || _this$media8 === void 0 ? void 0 : _this$media8.fallbackMediaNameFetcher
+        ssr: (_this$media8 = this.media) === null || _this$media8 === void 0 ? void 0 : _this$media8.ssr,
+        fallbackMediaNameFetcher: (_this$media9 = this.media) === null || _this$media9 === void 0 ? void 0 : _this$media9.fallbackMediaNameFetcher
       });
     }
   }, {

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

@@ -37,6 +37,15 @@ import { useInlineCommentsFilter } from '../../../ui/annotations/hooks/use-inlin
 import { useInlineCommentSubscriberContext } from '../../../ui/annotations/hooks/use-inline-comment-subscriber';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
 import { useAnnotationRangeState } from '../../../ui/annotations/contexts/AnnotationRangeContext';
+var getDataConsumerMark = function getDataConsumerMark(marks) {
+  return marks.find(function (mark) {
+    var _mark$type;
+    return mark.type === 'dataConsumer' || ((_mark$type = mark.type) === null || _mark$type === void 0 ? void 0 : _mark$type.name) === 'dataConsumer';
+  });
+};
+var getRemixDataConsumerMark = function getRemixDataConsumerMark(marks) {
+  return fg('cc-maui-add-mark-for-remix-generated-images') ? getDataConsumerMark(marks) : undefined;
+};
 var linkStyle = css({
   position: 'absolute',
   background: 'transparent',
@@ -233,32 +242,60 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
 // Ignored via go/ees005
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var Media = /*#__PURE__*/function (_PureComponent) {
-  function Media(props) {
+  function Media(_props) {
     var _this;
     _classCallCheck(this, Media);
-    _this = _callSuper(this, Media, [props]);
+    _this = _callSuper(this, Media, [_props]);
+    _defineProperty(_this, "mediaInstance", {});
     _defineProperty(_this, "getDataConsumerMark", function () {
-      return fg('cc-maui-add-mark-for-remix-generated-images') ? _this.props.marks.find(function (m) {
-        var _m$type;
-        return m.type === 'dataConsumer' || ((_m$type = m.type) === null || _m$type === void 0 ? void 0 : _m$type.name) === 'dataConsumer';
-      }) : undefined;
+      return getRemixDataConsumerMark(_this.props.marks);
+    });
+    _defineProperty(_this, "getDataConsumerSource", function () {
+      var _getDataConsumerMark;
+      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props;
+      return (_getDataConsumerMark = getDataConsumerMark(props.marks)) === null || _getDataConsumerMark === void 0 || (_getDataConsumerMark = _getDataConsumerMark.attrs.sources) === null || _getDataConsumerMark === void 0 ? void 0 : _getDataConsumerMark[0];
+    });
+    _defineProperty(_this, "emitMediaRenderEvent", function (event) {
+      var _props$onMediaRenderE;
+      var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.props;
+      (_props$onMediaRenderE = props.onMediaRenderEvent) === null || _props$onMediaRenderE === void 0 || _props$onMediaRenderE.call(props, _objectSpread(_objectSpread({}, event), {}, {
+        dataConsumerSource: _this.getDataConsumerSource(props),
+        mediaId: props.id,
+        mediaInstance: _this.mediaInstance
+      }));
+    });
+    _defineProperty(_this, "onPreviewRender", function (renderedMediaId) {
+      var _this$props$onPreview, _this$props;
+      (_this$props$onPreview = (_this$props = _this.props).onPreviewRender) === null || _this$props$onPreview === void 0 || _this$props$onPreview.call(_this$props, renderedMediaId);
+      _this.emitMediaRenderEvent({
+        renderedMediaId: renderedMediaId,
+        type: 'preview-rendered'
+      });
+    });
+    _defineProperty(_this, "onError", function (reason) {
+      var _this$props$onError, _this$props2;
+      (_this$props$onError = (_this$props2 = _this.props).onError) === null || _this$props$onError === void 0 || _this$props$onError.call(_this$props2, reason);
+      _this.emitMediaRenderEvent({
+        reason: reason,
+        type: 'error'
+      });
     });
     _defineProperty(_this, "renderCard", function () {
       var _dataConsumerMark$att;
       var providers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var contextIdentifierProvider = providers.contextIdentifierProvider;
-      var _this$props = _this.props,
-        allowAltTextOnImages = _this$props.allowAltTextOnImages,
-        alt = _this$props.alt,
-        featureFlags = _this$props.featureFlags,
-        allowMediaViewer = _this$props.shouldOpenMediaViewer,
-        enableDownloadButton = _this$props.enableDownloadButton,
-        ssr = _this$props.ssr,
-        width = _this$props.width,
-        height = _this$props.height,
-        mediaSingleElement = _this$props.mediaSingleElement,
-        _this$props$isDraftin = _this$props.isDrafting,
-        isDrafting = _this$props$isDraftin === void 0 ? false : _this$props$isDraftin;
+      var _this$props3 = _this.props,
+        allowAltTextOnImages = _this$props3.allowAltTextOnImages,
+        alt = _this$props3.alt,
+        featureFlags = _this$props3.featureFlags,
+        allowMediaViewer = _this$props3.shouldOpenMediaViewer,
+        enableDownloadButton = _this$props3.enableDownloadButton,
+        ssr = _this$props3.ssr,
+        width = _this$props3.width,
+        height = _this$props3.height,
+        mediaSingleElement = _this$props3.mediaSingleElement,
+        _this$props3$isDrafti = _this$props3.isDrafting,
+        isDrafting = _this$props3$isDrafti === void 0 ? false : _this$props3$isDrafti;
       var annotationMarks = _this.props.isAnnotationMark ? _this.props.marks.filter(_this.props.isAnnotationMark) : undefined;
       var borderMark = _this.props.marks.find(_this.props.isBorderMark);
       var dataConsumerMark = _this.getDataConsumerMark();
@@ -310,14 +347,16 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         alt: allowAltTextOnImages ? alt : undefined,
         featureFlags: featureFlags,
         shouldEnableDownloadButton: enableDownloadButton,
-        ssr: ssr
+        ssr: ssr,
+        onError: _this.props.onMediaRenderEvent || _this.props.onError ? _this.onError : undefined,
+        onPreviewRender: _this.props.onMediaRenderEvent || _this.props.onPreviewRender ? _this.onPreviewRender : undefined
       }))))));
     });
     _defineProperty(_this, "handleMediaLinkClick", function (event) {
-      var _this$props2 = _this.props,
-        fireAnalyticsEvent = _this$props2.fireAnalyticsEvent,
-        isLinkMark = _this$props2.isLinkMark,
-        marks = _this$props2.marks;
+      var _this$props4 = _this.props,
+        fireAnalyticsEvent = _this$props4.fireAnalyticsEvent,
+        isLinkMark = _this$props4.isLinkMark,
+        marks = _this$props4.marks;
       if (fireAnalyticsEvent) {
         fireAnalyticsEvent({
           action: ACTION.VISITED,
@@ -346,6 +385,9 @@ var Media = /*#__PURE__*/function (_PureComponent) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _dataConsumerMark$att2;
+      this.emitMediaRenderEvent({
+        type: 'mounted'
+      });
       var dataConsumerMark = this.getDataConsumerMark();
       var infographicType = dataConsumerMark === null || dataConsumerMark === void 0 || (_dataConsumerMark$att2 = dataConsumerMark.attrs.sources) === null || _dataConsumerMark$att2 === void 0 ? void 0 : _dataConsumerMark$att2[0];
       if (infographicType && this.props.fireAnalyticsEvent) {
@@ -362,6 +404,25 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         });
       }
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.id !== this.props.id || this.getDataConsumerSource(prevProps) !== this.getDataConsumerSource() || prevProps.onMediaRenderEvent !== this.props.onMediaRenderEvent) {
+        this.emitMediaRenderEvent({
+          type: 'unmounted'
+        }, prevProps);
+        this.emitMediaRenderEvent({
+          type: 'mounted'
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.emitMediaRenderEvent({
+        type: 'unmounted'
+      });
+    }
   }, {
     key: "render",
     value: function render() {

package/dist/esm/ui/MediaCard.js

@@ -99,11 +99,12 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
       };
     }());
     _defineProperty(_this, "onError", function (reason) {
-      var _this$props$fireAnaly, _this$props3;
+      var _this$props$onError, _this$props3, _this$props$fireAnaly, _this$props4;
       var _this$props2 = _this.props,
         nestedUnder = _this$props2.nestedUnder,
         rendererContext = _this$props2.rendererContext;
-      (_this$props$fireAnaly = (_this$props3 = _this.props).fireAnalyticsEvent) === null || _this$props$fireAnaly === void 0 || _this$props$fireAnaly.call(_this$props3, {
+      (_this$props$onError = (_this$props3 = _this.props).onError) === null || _this$props$onError === void 0 || _this$props$onError.call(_this$props3, reason);
+      (_this$props$fireAnaly = (_this$props4 = _this.props).fireAnalyticsEvent) === null || _this$props$fireAnaly === void 0 || _this$props$fireAnaly.call(_this$props4, {
         action: ACTION.ERRORED,
         actionSubject: ACTION_SUBJECT.RENDERER,
         actionSubjectId: ACTION_SUBJECT_ID.MEDIA,
@@ -118,6 +119,16 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
         } : {})
       });
     });
+    _defineProperty(_this, "onConsumerError", function (reason) {
+      var _this$props$onError2, _this$props5;
+      (_this$props$onError2 = (_this$props5 = _this.props).onError) === null || _this$props$onError2 === void 0 || _this$props$onError2.call(_this$props5, reason);
+    });
+    _defineProperty(_this, "getMediaErrorHandler", function () {
+      if (expValEquals('platform_editor_media_error_analytics', 'isEnabled', true)) {
+        return _this.onError;
+      }
+      return _this.props.onError ? _this.onConsumerError : undefined;
+    });
     _defineProperty(_this, "renderLoadingCard", function () {
       var cardDimensions = _this.props.cardDimensions;
       return /*#__PURE__*/React.createElement(CardLoading, {
@@ -151,11 +162,11 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-        var _this$props4, rendererContext, contextIdentifierProvider, id, url, collectionName, nodeIsInCache, _t2, _t3;
+        var _this$props6, rendererContext, contextIdentifierProvider, id, url, collectionName, nodeIsInCache, _t2, _t3;
         return _regeneratorRuntime.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              _this$props4 = this.props, rendererContext = _this$props4.rendererContext, contextIdentifierProvider = _this$props4.contextIdentifierProvider, id = _this$props4.id, url = _this$props4.url, collectionName = _this$props4.collection;
+              _this$props6 = this.props, rendererContext = _this$props6.rendererContext, contextIdentifierProvider = _this$props6.contextIdentifierProvider, id = _this$props6.id, url = _this$props6.url, collectionName = _this$props6.collection;
               if (!contextIdentifierProvider) {
                 _context2.next = 2;
                 break;
@@ -206,9 +217,9 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$props5 = this.props,
-        id = _this$props5.id,
-        dataURI = _this$props5.url;
+      var _this$props7 = this.props,
+        id = _this$props7.id,
+        dataURI = _this$props7.url;
       if (id) {
         mediaIdentifierMap.delete(id);
       } else if (dataURI) {
@@ -218,20 +229,20 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderExternal",
     value: function renderExternal(shouldOpenMediaViewer) {
-      var _this$props6 = this.props,
-        cardDimensions = _this$props6.cardDimensions,
-        resizeMode = _this$props6.resizeMode,
-        appearance = _this$props6.appearance,
-        url = _this$props6.url,
-        imageStatus = _this$props6.imageStatus,
-        disableOverlay = _this$props6.disableOverlay,
-        alt = _this$props6.alt,
-        featureFlags = _this$props6.featureFlags,
-        ssr = _this$props6.ssr,
-        mediaClient = _this$props6.mediaClient,
-        dataAttributes = _this$props6.dataAttributes,
-        enableSyncMediaCard = _this$props6.enableSyncMediaCard,
-        localId = _this$props6.localId;
+      var _this$props8 = this.props,
+        cardDimensions = _this$props8.cardDimensions,
+        resizeMode = _this$props8.resizeMode,
+        appearance = _this$props8.appearance,
+        url = _this$props8.url,
+        imageStatus = _this$props8.imageStatus,
+        disableOverlay = _this$props8.disableOverlay,
+        alt = _this$props8.alt,
+        featureFlags = _this$props8.featureFlags,
+        ssr = _this$props8.ssr,
+        mediaClient = _this$props8.mediaClient,
+        dataAttributes = _this$props8.dataAttributes,
+        enableSyncMediaCard = _this$props8.enableSyncMediaCard,
+        localId = _this$props8.localId;
       if (imageStatus === 'loading' || !url) {
         return this.renderLoadingCard();
       }
@@ -269,7 +280,8 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
           featureFlags: featureFlags,
           ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
           shouldHideTooltip: false,
-          onError: expValEquals('platform_editor_media_error_analytics', 'isEnabled', true) ? this.onError : undefined
+          onError: this.getMediaErrorHandler(),
+          onPreviewRender: this.props.onPreviewRender
         }))
       );
     }
@@ -280,27 +292,27 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
       var _this$state = this.state,
         contextIdentifierProvider = _this$state.contextIdentifierProvider,
         fileState = _this$state.fileState;
-      var _this$props7 = this.props,
-        id = _this$props7.id,
-        alt = _this$props7.alt,
-        type = _this$props7.type,
-        collection = _this$props7.collection,
-        occurrenceKey = _this$props7.occurrenceKey,
-        cardDimensions = _this$props7.cardDimensions,
-        resizeMode = _this$props7.resizeMode,
-        disableOverlay = _this$props7.disableOverlay,
-        useInlinePlayer = _this$props7.useInlinePlayer,
-        originalDimensions = _this$props7.originalDimensions,
-        forceOpenMediaViewer = _this$props7.shouldOpenMediaViewer,
-        featureFlags = _this$props7.featureFlags,
-        shouldEnableDownloadButton = _this$props7.shouldEnableDownloadButton,
-        ssr = _this$props7.ssr,
-        mediaClient = _this$props7.mediaClient,
-        dataAttributes = _this$props7.dataAttributes,
-        enableSyncMediaCard = _this$props7.enableSyncMediaCard,
-        localId = _this$props7.localId,
-        mediaViewerExtensions = _this$props7.mediaViewerExtensions,
-        fallbackMediaNameFetcher = _this$props7.fallbackMediaNameFetcher;
+      var _this$props9 = this.props,
+        id = _this$props9.id,
+        alt = _this$props9.alt,
+        type = _this$props9.type,
+        collection = _this$props9.collection,
+        occurrenceKey = _this$props9.occurrenceKey,
+        cardDimensions = _this$props9.cardDimensions,
+        resizeMode = _this$props9.resizeMode,
+        disableOverlay = _this$props9.disableOverlay,
+        useInlinePlayer = _this$props9.useInlinePlayer,
+        originalDimensions = _this$props9.originalDimensions,
+        forceOpenMediaViewer = _this$props9.shouldOpenMediaViewer,
+        featureFlags = _this$props9.featureFlags,
+        shouldEnableDownloadButton = _this$props9.shouldEnableDownloadButton,
+        ssr = _this$props9.ssr,
+        mediaClient = _this$props9.mediaClient,
+        dataAttributes = _this$props9.dataAttributes,
+        enableSyncMediaCard = _this$props9.enableSyncMediaCard,
+        localId = _this$props9.localId,
+        mediaViewerExtensions = _this$props9.mediaViewerExtensions,
+        fallbackMediaNameFetcher = _this$props9.fallbackMediaNameFetcher;
       var isMobile = false;
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
       var isInlinePlayer = isMobile ? false : shouldPlayInline;
@@ -369,7 +381,8 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
         shouldHideTooltip: isMobile,
         mediaViewerExtensions: mediaViewerExtensions,
         fallbackMediaNameFetcher: fallbackMediaNameFetcher,
-        onError: expValEquals('platform_editor_media_error_analytics', 'isEnabled', true) ? this.onError : undefined
+        onError: this.getMediaErrorHandler(),
+        onPreviewRender: this.props.onPreviewRender
       }));
     }
   }]);

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

@@ -1071,6 +1071,12 @@ var centerWrapperStyles = css(_defineProperty({}, ".".concat(RendererCssClassNam
     flexShrink: 0
   }
 }));
+
+// Reset only Expands with no preceding content sibling. Streaming SSR style/script siblings
+// are ignored so moving them to the head on the client does not change the top margin.
+var expandSsrMarginStyles = css(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " .").concat(RendererCssClassName.STICKY_SAFE_BREAKOUT_INNER, " > [data-node-type='expand']:not(:not(style, script) ~ *)"), {
+  marginTop: 0
+}));
 var baseOtherStylesDuplicateAnchor = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
   '& .UnknownBlock': {
     fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
@@ -2282,7 +2288,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     textHighlightPaddingStyles, tasksAndDecisionsStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && (expValEquals('confluence_fe_renderer_inline_node_mark_color_fix', 'isEnabled', true) ? rendererAnnotationStyles : rendererAnnotationStylesOld),
     // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-    fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
+    fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, fg('platform_renderer_expand_ssr_margin_fix') && expandSsrMarginStyles,
     // this should be placed after baseOtherStyles
     expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), fg('platform_forge_inline_bodied_macro') && [migratedInlineBodiedFlowStyle, forgeInlineBodiedSpacingStyle], inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle, firstWrappedMediaStyles, tableSharedStyle, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableOuterBorderOverlayStyles, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && roundedTableRemixBlockHighlightStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeScopedStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && isExperimentEnabled('platform_editor_table_fit_to_content_patch_2') && tableContentModeExtensionContainmentStyles, expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true) && tableContentModeNestedTableStyles, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, firstNodeWithNotMarginTopWithNestedDnD, rendererTableStyles, isStickyScrollbarOn && stickyScrollbarStyles, isStickyScrollbarOn && isExperimentEnabled('platform_editor_table_css_overflow_shadow') && stickyScrollbarOverflowShadowFixStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && expValEqualsNoExposure('platform_editor_table_menu_updates', 'isEnabled', true) && rendererTableSortableColumnValignStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? contentMode === 'compact' ? scaledDenseEmojiStyles : scaledEmojiStyles : contentMode === 'compact' ? denseStyles : undefined, contentMode === 'compact' ? scaledDenseUnicodeEmojiStylesNew : scaledUnicodeEmojiStylesNew, syncBlockStyles, centerWrapperStyles, isInsideSyncBlock ? syncBlockRendererStyles : null, isInsideSyncBlock && tableFakeBorderStyles, isInsideSyncBlock && expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? roundedTableFakeBorderOverlayStyles : null, expValEquals('platform_editor_hide_extension_renderer_support', 'isEnabled', true) && hideExtensionStyles],
     "data-testid": testId

package/dist/types/react/nodes/media/index.d.ts

@@ -13,6 +13,7 @@ import type { BorderMarkDefinition } from '@atlaskit/adf-schema/border';
 import type { AnnotationMarkDefinition } from '@atlaskit/adf-schema/annotation';
 import type { DataConsumerDefinition } from '@atlaskit/adf-schema/data-consumer';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';
+import type { MediaRenderEvent } from '../../../types/mediaOptions';
 import type { AnalyticsEventPayload } from '../../../analytics/events';
 export type MediaProps = MediaCardProps & {
     allowAltTextOnImages?: boolean;
@@ -30,6 +31,7 @@ export type MediaProps = MediaCardProps & {
     isLinkMark: () => boolean;
     marks: Array<LinkDefinition | BorderMarkDefinition | AnnotationMarkDefinition | DataConsumerDefinition>;
     mediaSingleElement?: HTMLElement | null;
+    onMediaRenderEvent?: (event: MediaRenderEvent) => void;
     providers?: ProviderFactory;
     width?: number;
 };

package/dist/types/types/mediaOptions.d.ts

@@ -13,6 +13,20 @@ export type MediaSSR = {
         id?: string;
     }>;
 };
+export type MediaRenderEventPayload = {
+    type: 'mounted' | 'unmounted';
+} | {
+    renderedMediaId?: string;
+    type: 'preview-rendered';
+} | {
+    reason: string;
+    type: 'error';
+};
+export type MediaRenderEvent = {
+    dataConsumerSource?: string;
+    mediaId?: string;
+    mediaInstance: object;
+} & MediaRenderEventPayload;
 export interface MediaOptions {
     allowCaptions?: boolean;
     allowLinking?: boolean;
@@ -27,5 +41,7 @@ export interface MediaOptions {
     featureFlags?: MediaFeatureFlags;
     /** Extensions for the media viewer header (e.g. comment navigation button). */
     mediaViewerExtensions?: MediaViewerExtensions;
+    /** Receives lifecycle events for each rendered media node. */
+    onMediaRenderEvent?: (event: MediaRenderEvent) => void;
     ssr?: MediaSSR;
 }

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

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import type { ADFEntity } from '@atlaskit/adf-utils/types';
-import type { CardAppearance, CardDimensions, CardOnClickCallback, NumericalCardDimensions } from '@atlaskit/media-card';
+import type { CardAppearance, CardDimensions, CardOnClickCallback, CardProps as AtlaskitMediaCardProps, NumericalCardDimensions } from '@atlaskit/media-card';
 import type { MediaClientConfig } from '@atlaskit/media-core/auth';
 import type { ImageResizeMode, Identifier, FileState, MediaClient } from '@atlaskit/media-client';
 import type { MediaType } from '@atlaskit/adf-schema/media';
@@ -46,6 +46,8 @@ export interface MediaCardProps {
      */
     nestedUnder?: string;
     occurrenceKey?: string;
+    onError?: AtlaskitMediaCardProps['onError'];
+    onPreviewRender?: AtlaskitMediaCardProps['onPreviewRender'];
     originalDimensions?: NumericalCardDimensions;
     rendererAppearance?: RendererAppearance;
     /**
@@ -77,6 +79,8 @@ export declare class MediaCardView extends Component<MediaCardProps & {
     componentWillUnmount(): void;
     saveFileState: (id: string) => Promise<void>;
     private onError;
+    private onConsumerError;
+    private getMediaErrorHandler;
     private renderLoadingCard;
     private renderExternal;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "139.0.0",
+	"version": "139.1.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -66,7 +66,7 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^3.1.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/react-ufo": "^7.9.0",
-		"@atlaskit/smart-card": "^45.21.0",
+		"@atlaskit/smart-card": "^45.22.0",
 		"@atlaskit/status": "^5.9.0",
 		"@atlaskit/task-decision": "^21.9.0",
 		"@atlaskit/theme": "^28.2.0",
@@ -97,7 +97,7 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/analytics-gas-types": "^6.2.0",
 		"@atlaskit/checkbox": "^19.2.0",
-		"@atlaskit/editor-plugin-media": "^19.1.0",
+		"@atlaskit/editor-plugin-media": "^19.2.0",
 		"@atlaskit/editor-test-helpers": "workspace:^",
 		"@atlaskit/inline-edit": "^16.4.0",
 		"@atlaskit/json-ld-types": "^2.0.0",
@@ -143,6 +143,9 @@
 		"worker-plugin": "^4.0.2"
 	},
 	"platform-feature-flags": {
+		"platform_renderer_expand_ssr_margin_fix": {
+			"type": "boolean"
+		},
 		"platform_native_embeds_rollout_non_maui_experience": {
 			"type": "boolean"
 		},