@atlaskit/renderer 120.4.1 → 120.4.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/renderer
 
+## 120.4.3
+
+### Patch Changes
+
+- [`0198dcd9d80fe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0198dcd9d80fe) -
+  Added the enableSyncMediaCard media toggle, that loads the MediaCard in sync without
+  react-loadable.
+- [`3fff102f55da9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3fff102f55da9) -
+  Cleanup FG platform_editor_ol_padding_fix
+- Updated dependencies
+
+## 120.4.2
+
+### Patch Changes
+
+- [`598cea2432fa9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/598cea2432fa9) -
+  [ux] UI and behaviour updates of the HoverLinkOverlay for the Preview Panels.
+- Updated dependencies
+
 ## 120.4.1
 
 ### Patch Changes

package/actions/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/actions.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/actions.d.ts"
       ]

package/afm-passionfruit/tsconfig.json

@@ -0,0 +1,135 @@
+{
+	"extends": "../../../../tsconfig.entry-points.passionfruit.json",
+	"compilerOptions": {
+		"declaration": true,
+		"target": "es5",
+		"outDir": "../../../../../passionfruit/tsDist/@atlaskit__renderer/app",
+		"rootDir": "../",
+		"composite": true
+	},
+	"include": [
+		"../src/**/*.ts",
+		"../src/**/*.tsx"
+	],
+	"exclude": [
+		"../src/**/__tests__/*",
+		"../src/**/*.test.*",
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
+	],
+	"references": [
+		{
+			"path": "../../adf-utils/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../analytics/analytics-listeners/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../analytics/analytics-namespaced-context/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../analytics/analytics-next/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/button/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/code/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-json-transformer/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-palette/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-shared-styles/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-tables/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../elements/emoji/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../measurement/feature-gate-js-client/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/icon/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/link/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../linking-platform/link-datasource/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-card/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-client/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-client-react/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-common/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-filmstrip/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-ui/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-viewer/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../react-ufo/atlaskit/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../linking-platform/smart-card/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../elements/status/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../elements/task-decision/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/theme/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../tmp-editor-statsig/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tokens/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/tooltip/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../design-system/visually-hidden/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../editor-common/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../linking-platform/link-provider/afm-passionfruit/tsconfig.json"
+		},
+		{
+			"path": "../../../media/media-core/afm-passionfruit/tsconfig.json"
+		}
+	]
+}

package/afm-volt/tsconfig.json

@@ -14,7 +14,13 @@
 	"exclude": [
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",
-		"../src/**/test.*"
+		"../src/**/test.*",
+		"../src/**/examples.*",
+		"../src/**/examples/*",
+		"../src/**/examples/**/*",
+		"../src/**/*.stories.*",
+		"../src/**/stories/*",
+		"../src/**/stories/**/*"
 	],
 	"references": [
 		{
@@ -35,9 +41,6 @@
 		{
 			"path": "../../../design-system/code/afm-volt/tsconfig.json"
 		},
-		{
-			"path": "../../editor-common/afm-volt/tsconfig.json"
-		},
 		{
 			"path": "../../editor-json-transformer/afm-volt/tsconfig.json"
 		},
@@ -119,6 +122,9 @@
 		{
 			"path": "../../../design-system/visually-hidden/afm-volt/tsconfig.json"
 		},
+		{
+			"path": "../../editor-common/afm-volt/tsconfig.json"
+		},
 		{
 			"path": "../../../linking-platform/link-provider/afm-volt/tsconfig.json"
 		},

package/consts/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/consts.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/consts.d.ts"
       ]

package/custom-nodes/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/custom-nodes.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/custom-nodes.d.ts"
       ]

package/dist/cjs/react/index.js

@@ -460,7 +460,8 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     key: "getMediaProps",
     value: function getMediaProps(node) {
       var _this6 = this,
-        _this$media;
+        _this$media,
+        _this$media2;
       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,
@@ -491,7 +492,8 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         shouldOpenMediaViewer: this.shouldOpenMediaViewer,
         ssr: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.ssr,
         // surroundTextNodesWithTextWrapper checks inlineComment.allowDraftMode
-        allowAnnotationsDraftMode: this.surroundTextNodesWithTextWrapper
+        allowAnnotationsDraftMode: this.surroundTextNodesWithTextWrapper,
+        enableSyncMediaCard: (_this$media2 = this.media) === null || _this$media2 === void 0 ? void 0 : _this$media2.enableSyncMediaCard
       });
     }
   }, {
@@ -532,21 +534,21 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
   }, {
     key: "getMediaGroupProps",
     value: function getMediaGroupProps(node) {
-      var _this$media2, _this$media3;
+      var _this$media3, _this$media4;
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         shouldOpenMediaViewer: this.shouldOpenMediaViewer,
         allowAltTextOnImages: this.allowAltTextOnImages,
         featureFlags: this.media && this.media.featureFlags,
-        enableDownloadButton: (_this$media2 = this.media) === null || _this$media2 === void 0 ? void 0 : _this$media2.enableDownloadButton,
-        ssr: (_this$media3 = this.media) === null || _this$media3 === void 0 ? void 0 : _this$media3.ssr
+        enableDownloadButton: (_this$media3 = this.media) === null || _this$media3 === void 0 ? void 0 : _this$media3.enableDownloadButton,
+        ssr: (_this$media4 = this.media) === null || _this$media4 === void 0 ? void 0 : _this$media4.ssr
       });
     }
   }, {
     key: "getMediaInlineProps",
     value: function getMediaInlineProps(node) {
-      var _this$media4;
+      var _this$media5;
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
-        ssr: (_this$media4 = this.media) === null || _this$media4 === void 0 ? void 0 : _this$media4.ssr
+        ssr: (_this$media5 = this.media) === null || _this$media5 === void 0 ? void 0 : _this$media5.ssr
       });
     }
   }, {

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

@@ -11,6 +11,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _linkProvider = require("@atlaskit/link-provider");
 var _smartCard = require("@atlaskit/smart-card");
+var _hooks = require("@atlaskit/smart-card/hooks");
 var _ssr = require("@atlaskit/smart-card/ssr");
 var _ui = require("@atlaskit/editor-common/ui");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -34,8 +35,64 @@ var HoverLinkOverlayNoop = function HoverLinkOverlayNoop(props) {
 var HoverLinkOverlayWithCondition = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
   return (0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking');
 }, _ui.HoverLinkOverlay, HoverLinkOverlayNoop);
-var InlineCard = function InlineCard(props) {
+var OverlayWithCardContext = function OverlayWithCardContext(_ref) {
   var _cardContext$value, _cardContext$value2, _cardContext$value2$i, _cardContext$value3;
+  var rendererAppearance = _ref.rendererAppearance,
+    isResolvedViewRendered = _ref.isResolvedViewRendered,
+    url = _ref.url,
+    children = _ref.children;
+  var cardContext = (0, _linkProvider.useSmartCardContext)();
+  // Note: useSmartLinkActions throws without smart card context. Using it here is safe
+  // because we checked cardContext availability in the parent component
+  var actions = (0, _hooks.useSmartLinkActions)({
+    url: url,
+    appearance: 'inline'
+  });
+  var preview = (0, _react.useMemo)(function () {
+    return actions.find(function (action) {
+      return action.id === 'preview-content';
+    });
+  }, [actions]);
+  var cardState = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 || (_cardContext$value = _cardContext$value.store) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.getState()[url || ''];
+  var ari = (0, _smartCard.getObjectAri)(cardState === null || cardState === void 0 ? void 0 : cardState.details);
+  var name = (0, _smartCard.getObjectName)(cardState === null || cardState === void 0 ? void 0 : cardState.details);
+  var iconUrl = (0, _smartCard.getObjectIconUrl)(cardState === null || cardState === void 0 ? void 0 : cardState.details);
+  var isPanelAvailable = ari && (cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 || (_cardContext$value2$i = _cardContext$value2.isPreviewPanelAvailable) === null || _cardContext$value2$i === void 0 ? void 0 : _cardContext$value2$i.call(_cardContext$value2, {
+    ari: ari
+  }));
+  var openPreviewPanel = cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
+  var isPreviewPanelAvailable = Boolean(openPreviewPanel && isPanelAvailable);
+  var isPreviewModalAvailable = Boolean(preview);
+  var isPreviewAvailable = isPreviewModalAvailable || isPreviewPanelAvailable;
+  var showPanelButtonIcon = isPreviewPanelAvailable ? 'panel' : isPreviewModalAvailable ? 'modal' : undefined;
+  var Overlay = isPreviewAvailable ? HoverLinkOverlayWithCondition : HoverLinkOverlayNoop;
+  return (0, _react2.jsx)(Overlay, {
+    isVisible: isResolvedViewRendered,
+    url: url,
+    compactPadding: rendererAppearance === 'comment',
+    showPanelButton: isPreviewAvailable,
+    showPanelButtonIcon: showPanelButtonIcon,
+    onClick: function onClick(event) {
+      if (isPreviewPanelAvailable) {
+        // Prevent anchor default behaviour(click to open the anchor link)
+        // When glance panel is available, let openPreviewPanel handle it
+        event.preventDefault();
+        openPreviewPanel === null || openPreviewPanel === void 0 || openPreviewPanel({
+          url: url || '',
+          ari: ari || '',
+          name: name || '',
+          iconUrl: iconUrl
+        });
+      } else if (isPreviewModalAvailable) {
+        event.preventDefault();
+        if (preview) {
+          preview.invoke();
+        }
+      }
+    }
+  }, children);
+};
+var InlineCard = function InlineCard(props) {
   var url = props.url,
     data = props.data,
     eventHandlers = props.eventHandlers,
@@ -54,10 +111,10 @@ var InlineCard = function InlineCard(props) {
     onClick: onClick,
     container: portal
   };
-  var _ref = smartLinks || {},
-    hideHoverPreview = _ref.hideHoverPreview,
-    actionOptions = _ref.actionOptions,
-    ssr = _ref.ssr;
+  var _ref2 = smartLinks || {},
+    hideHoverPreview = _ref2.hideHoverPreview,
+    actionOptions = _ref2.actionOptions,
+    ssr = _ref2.ssr;
   var analyticsData = {
     attributes: {
       location: 'renderer'
@@ -101,33 +158,13 @@ var InlineCard = function InlineCard(props) {
       onClick: onClick
     }));
   }
-  var onError = function onError(_ref2) {
-    var err = _ref2.err;
+  var onError = function onError(_ref3) {
+    var err = _ref3.err;
     if (err) {
       throw err;
     }
   };
-  var cardState = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 || (_cardContext$value = _cardContext$value.store) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.getState()[url || ''];
-  var ari = (0, _smartCard.getObjectAri)(cardState === null || cardState === void 0 ? void 0 : cardState.details);
-  var name = (0, _smartCard.getObjectName)(cardState === null || cardState === void 0 ? void 0 : cardState.details);
-  var iconUrl = (0, _smartCard.getObjectIconUrl)(cardState === null || cardState === void 0 ? void 0 : cardState.details);
-  var isPanelAvailable = ari && (cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 || (_cardContext$value2$i = _cardContext$value2.isPreviewPanelAvailable) === null || _cardContext$value2$i === void 0 ? void 0 : _cardContext$value2$i.call(_cardContext$value2, {
-    ari: ari
-  }));
-  var openPreviewPanel = cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
-  var handleOpenGlancePanelClick = function handleOpenGlancePanelClick(event) {
-    if (openPreviewPanel && isPanelAvailable) {
-      // Prevent anchor default behaviour(click to open the anchor link)
-      // When glance panel is available, let openPreviewPanel handle it
-      event.preventDefault();
-      openPreviewPanel({
-        url: url || '',
-        ari: ari,
-        name: name || '',
-        iconUrl: iconUrl
-      });
-    }
-  };
+  var MaybeOverlay = cardContext !== null && cardContext !== void 0 && cardContext.value ? OverlayWithCardContext : HoverLinkOverlayNoop;
   return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
     data: analyticsData
   }, (0, _react2.jsx)("span", (0, _extends2.default)({
@@ -140,12 +177,10 @@ var InlineCard = function InlineCard(props) {
     unsupportedComponent: _ui.UnsupportedInline
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
-  }, cardProps), (0, _react2.jsx)(HoverLinkOverlayWithCondition, {
-    isVisible: isResolvedViewRendered,
+  }, cardProps), (0, _react2.jsx)(MaybeOverlay, {
     url: url || '',
-    compactPadding: rendererAppearance === 'comment',
-    showPanelButton: !!isPanelAvailable,
-    onClick: handleOpenGlancePanelClick
+    rendererAppearance: rendererAppearance,
+    isResolvedViewRendered: isResolvedViewRendered
   }, (0, _react2.jsx)(_smartCard.Card, (0, _extends2.default)({
     appearance: "inline",
     showHoverPreview: !hideHoverPreview,

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

@@ -11,7 +11,6 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _lists = require("../utils/lists");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function OrderedList(props) {
   var _props$content;
   var extraProps = {};
@@ -19,7 +18,7 @@ function OrderedList(props) {
     order: props.order,
     itemsCount: props === null || props === void 0 || (_props$content = props.content) === null || _props$content === void 0 ? void 0 : _props$content.length
   });
-  if (itemCounterDigitsSize && itemCounterDigitsSize > ((0, _platformFeatureFlags.fg)('platform_editor_ol_padding_fix') ? 1 : 2)) {
+  if (itemCounterDigitsSize && itemCounterDigitsSize > 1) {
     extraProps.style = (0, _styles.getOrderedListInlineStyles)(itemCounterDigitsSize, 'object');
   }
   if (props.order !== undefined) {

package/dist/cjs/ui/MediaCard.js

@@ -17,6 +17,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _traverse = require("@atlaskit/adf-utils/traverse");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _mediaCard = require("@atlaskit/media-card");
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -216,7 +217,8 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         featureFlags = _this$props4.featureFlags,
         ssr = _this$props4.ssr,
         mediaClient = _this$props4.mediaClient,
-        dataAttributes = _this$props4.dataAttributes;
+        dataAttributes = _this$props4.dataAttributes,
+        enableSyncMediaCard = _this$props4.enableSyncMediaCard;
       if (imageStatus === 'loading' || !url) {
         return this.renderLoadingCard();
       }
@@ -228,13 +230,14 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
 
       // we need this statement for the mandatory mediaClientConfig below
       var mediaClientConfig = mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig;
+      var Card = enableSyncMediaCard && (0, _platformFeatureFlags.fg)('jfp-magma-ssr-iv-editor-media') ? _mediaCard.CardSync : _mediaCard.Card;
       return (
         /*#__PURE__*/
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
         _react.default.createElement("div", (0, _extends2.default)({}, dataAttributes, {
           "data-node-type": "media"
-        }), /*#__PURE__*/_react.default.createElement(_mediaCard.Card
+        }), /*#__PURE__*/_react.default.createElement(Card
         // TODO: MPT-315 - clean up after we move mediaClientConfig into FileIdentifier
         // context is not really used when the type is external and we want to render the component asap
         // Ignored via go/ees005
@@ -277,7 +280,8 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         shouldEnableDownloadButton = _this$props5.shouldEnableDownloadButton,
         ssr = _this$props5.ssr,
         mediaClient = _this$props5.mediaClient,
-        dataAttributes = _this$props5.dataAttributes;
+        dataAttributes = _this$props5.dataAttributes,
+        enableSyncMediaCard = _this$props5.enableSyncMediaCard;
       var isMobile = false;
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
       var isInlinePlayer = isMobile ? false : shouldPlayInline;
@@ -305,6 +309,7 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         collectionName: collection,
         occurrenceKey: occurrenceKey
       };
+      var Card = enableSyncMediaCard && (0, _platformFeatureFlags.fg)('jfp-magma-ssr-iv-editor-media') ? _mediaCard.CardSync : _mediaCard.Card;
       return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, getClipboardAttrs({
         id: id,
         alt: alt,
@@ -312,7 +317,7 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         contextIdentifierProvider: contextIdentifierProvider,
         originalDimensions: originalDimensions,
         fileState: fileState
-      }), dataAttributes), /*#__PURE__*/_react.default.createElement(_mediaCard.Card, {
+      }), dataAttributes), /*#__PURE__*/_react.default.createElement(Card, {
         identifier: identifier,
         alt: alt,
         contextId: contextId,

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

@@ -781,6 +781,16 @@ var smartCardStylesAvatarMarginFix2 = (0, _react.css)((0, _defineProperty2.defau
     marginTop: 0
   }
 }));
+
+// In Renderer in Jira there is no SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, so using data-inline-cart="true"
+var headerSmartCardStyles = (0, _react.css)({
+  '[data-inline-card="true"]': {
+    '[data-inlinecard-button-overlay="icon-wrapper-line-height"] span': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: 0
+    }
+  }
+});
 var baseOtherStyles = (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, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
@@ -1453,7 +1463,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
         '--ak-renderer-editor-font-heading-h6': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.heading.h6')),
         '--ak-renderer-editor-font-normal-text': "".concat((0, _ugcTokens.editorUGCToken)('editor.font.body'))
       },
-      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _platformFeatureFlags.fg)('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, (0, _platformFeatureFlags.fg)('platform_editor_avatar_group_margin_fix') && smartCardStylesAvatarMarginFix2,
+      css: [baseStyles, hideHeadingCopyLinkWrapperStyles, appearance === 'full-page' && isPreviewPanelResponsivenessOn && rendererFullPageStylesWithReducedPadding, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && rendererFullPageStyles, appearance === 'full-width' && rendererFullWidthStyles, appearance === 'full-width' && !(0, _table.isTableResizingEnabled)(appearance) && rendererFullWidthStylesForTableResizing, telepointerStyles, whitespaceSharedStyles, blockquoteSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? headingsSharedStylesWithEditorUGC : headingsSharedStyles, headingWithAlignmentStyles, ruleSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? paragraphSharedStylesWithEditorUGC : paragraphSharedStyles, listsSharedStyles, _browser.browser.gecko && listsSharedStylesForGekko, indentationSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor__renderer_indentation_text_margin') && indentationSharedStylesWithMarginFix, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles, tasksAndDecisionsStyles, smartCardStyles, smartCardStylesAvatarFix, (0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking') && headerSmartCardStyles, (0, _platformFeatureFlags.fg)('smartcard_avatar_margin_fix') && smartCardStylesAvatarMarginFix, (0, _platformFeatureFlags.fg)('platform_editor_avatar_group_margin_fix') && smartCardStylesAvatarMarginFix2,
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix

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

@@ -63,7 +63,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "120.4.0";
+var packageVersion = "120.4.2";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/react/index.js

@@ -419,7 +419,7 @@ export default class ReactSerializer {
     };
   }
   getMediaProps(node, path = []) {
-    var _this$media;
+    var _this$media, _this$media2;
     const {
       marks: {
         annotation,
@@ -445,7 +445,8 @@ export default class ReactSerializer {
       shouldOpenMediaViewer: this.shouldOpenMediaViewer,
       ssr: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.ssr,
       // surroundTextNodesWithTextWrapper checks inlineComment.allowDraftMode
-      allowAnnotationsDraftMode: this.surroundTextNodesWithTextWrapper
+      allowAnnotationsDraftMode: this.surroundTextNodesWithTextWrapper,
+      enableSyncMediaCard: (_this$media2 = this.media) === null || _this$media2 === void 0 ? void 0 : _this$media2.enableSyncMediaCard
     };
   }
   getExtensionProps(node, path = []) {
@@ -476,21 +477,21 @@ export default class ReactSerializer {
     };
   }
   getMediaGroupProps(node) {
-    var _this$media2, _this$media3;
+    var _this$media3, _this$media4;
     return {
       ...this.getProps(node),
       shouldOpenMediaViewer: this.shouldOpenMediaViewer,
       allowAltTextOnImages: this.allowAltTextOnImages,
       featureFlags: this.media && this.media.featureFlags,
-      enableDownloadButton: (_this$media2 = this.media) === null || _this$media2 === void 0 ? void 0 : _this$media2.enableDownloadButton,
-      ssr: (_this$media3 = this.media) === null || _this$media3 === void 0 ? void 0 : _this$media3.ssr
+      enableDownloadButton: (_this$media3 = this.media) === null || _this$media3 === void 0 ? void 0 : _this$media3.enableDownloadButton,
+      ssr: (_this$media4 = this.media) === null || _this$media4 === void 0 ? void 0 : _this$media4.ssr
     };
   }
   getMediaInlineProps(node) {
-    var _this$media4;
+    var _this$media5;
     return {
       ...this.getProps(node),
-      ssr: (_this$media4 = this.media) === null || _this$media4 === void 0 ? void 0 : _this$media4.ssr
+      ssr: (_this$media5 = this.media) === null || _this$media5 === void 0 ? void 0 : _this$media5.ssr
     };
   }
   getTaskItemProps(node, path = []) {