@atlaskit/renderer 82.0.0 → 84.0.0

package/dist/cjs/ui/annotations/context.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AnnotationsDraftContextWrapper = exports.InlineCommentsStateContext = exports.ProvidersContext = exports.AnnotationsDraftContext = void 0;
+exports.ProvidersContext = exports.InlineCommentsStateContext = exports.AnnotationsDraftContextWrapper = exports.AnnotationsDraftContext = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/dist/cjs/ui/annotations/draft/component.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TextWithAnnotationDraft = exports.applyAnnotationOnText = exports.getAnnotationIndex = exports.AnnotationDraft = void 0;
+exports.getAnnotationIndex = exports.applyAnnotationOnText = exports.TextWithAnnotationDraft = exports.AnnotationDraft = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -83,7 +83,7 @@ exports.applyAnnotationOnText = applyAnnotationOnText;
 var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
   var startPos = _ref3.startPos,
       endPos = _ref3.endPos,
-      text = _ref3.text;
+      children = _ref3.children;
 
   var textPosition = _react.default.useMemo(function () {
     return {
@@ -103,21 +103,21 @@ var TextWithAnnotationDraft = function TextWithAnnotationDraft(_ref3) {
   }, [nextDraftPosition, textPosition]);
 
   if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, text);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
   }
 
   if (shouldApplyAnnotationAt === _types.InsertDraftPosition.AROUND_TEXT) {
     return /*#__PURE__*/_react.default.createElement(AnnotationDraft, {
       key: 0,
       draftPosition: nextDraftPosition
-    }, text);
+    }, children);
   }
 
-  var offsets = (0, _text.calcTextSplitOffset)(nextDraftPosition, textPosition, text);
-  var texts = (0, _text.splitText)(text, offsets);
+  var offsets = (0, _text.calcTextSplitOffset)(nextDraftPosition, textPosition, children);
+  var texts = (0, _text.splitText)(children, offsets);
 
   if (!texts) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, text);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
   }
 
   var components = applyAnnotationOnText({

package/dist/cjs/ui/annotations/draft/index.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "updateWindowSelectionAroundDraft", {
+Object.defineProperty(exports, "TextWithAnnotationDraft", {
   enumerable: true,
   get: function get() {
-    return _dom.updateWindowSelectionAroundDraft;
+    return _component.TextWithAnnotationDraft;
   }
 });
-Object.defineProperty(exports, "TextWithAnnotationDraft", {
+Object.defineProperty(exports, "updateWindowSelectionAroundDraft", {
   enumerable: true,
   get: function get() {
-    return _component.TextWithAnnotationDraft;
+    return _dom.updateWindowSelectionAroundDraft;
   }
 });
 

package/dist/cjs/ui/annotations/draft/text.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.calcTextSplitOffset = exports.splitText = void 0;
+exports.splitText = exports.calcTextSplitOffset = void 0;
 
 var splitText = function splitText(text, _ref) {
   var startOffset = _ref.startOffset,

package/dist/cjs/ui/annotations/hooks/index.js

@@ -3,22 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "useHasFocusEvent", {
-  enumerable: true,
-  get: function get() {
-    return _useEvents.useHasFocusEvent;
-  }
-});
 Object.defineProperty(exports, "useAnnotationClickEvent", {
   enumerable: true,
   get: function get() {
     return _useEvents.useAnnotationClickEvent;
   }
 });
-Object.defineProperty(exports, "useInlineCommentsFilter", {
+Object.defineProperty(exports, "useHasFocusEvent", {
   enumerable: true,
   get: function get() {
-    return _useInlineCommentsFilter.useInlineCommentsFilter;
+    return _useEvents.useHasFocusEvent;
   }
 });
 Object.defineProperty(exports, "useInlineCommentSubscriberContext", {
@@ -27,6 +21,12 @@ Object.defineProperty(exports, "useInlineCommentSubscriberContext", {
     return _useInlineCommentSubscriber.useInlineCommentSubscriberContext;
   }
 });
+Object.defineProperty(exports, "useInlineCommentsFilter", {
+  enumerable: true,
+  get: function get() {
+    return _useInlineCommentsFilter.useInlineCommentsFilter;
+  }
+});
 
 var _useEvents = require("./use-events");
 

package/dist/cjs/ui/annotations/hooks/use-events.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useAnnotationClickEvent = exports.useHasFocusEvent = exports.useAnnotationStateByTypeEvent = void 0;
+exports.useHasFocusEvent = exports.useAnnotationStateByTypeEvent = exports.useAnnotationClickEvent = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -46,7 +46,9 @@ var useAnnotationStateByTypeEvent = function useAnnotationStateByTypeEvent(_ref)
 
       var nextStates = Object.values(payload).reduce(function (acc, curr) {
         if (curr.annotationType === type) {
-          return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, curr.id, curr.state));
+          // Check for empty state to prevent additional renders
+          var isEmpty = curr.state === null || curr.state === undefined;
+          return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, curr.id, !isEmpty ? curr.state : states[curr.id]));
         }
 
         return acc;

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

@@ -5,19 +5,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "TextWithAnnotationDraft", {
+Object.defineProperty(exports, "AnnotationMark", {
   enumerable: true,
   get: function get() {
-    return _draft.TextWithAnnotationDraft;
+    return _element.MarkElement;
   }
 });
-Object.defineProperty(exports, "AnnotationMark", {
+exports.AnnotationsWrapper = void 0;
+Object.defineProperty(exports, "TextWithAnnotationDraft", {
   enumerable: true,
   get: function get() {
-    return _element.MarkElement;
+    return _draft.TextWithAnnotationDraft;
   }
 });
-exports.AnnotationsWrapper = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/dist/cjs/utils.js

@@ -5,9 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.ADFEncoder = void 0;
 exports.findHorizontalOverflowScrollParent = findHorizontalOverflowScrollParent;
 exports.findInTree = findInTree;
-exports.getPlatform = exports.getEventHandler = exports.getText = exports.ADFEncoder = void 0;
+exports.getText = exports.getPlatform = exports.getEventHandler = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "82.0.0",
+	"version": "84.0.0",
 	"sideEffects": false
 }

package/dist/es2019/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const headingAnchorLinkMessages = defineMessages({
   copyHeadingLinkToClipboard: {
     id: 'fabric.editor.headingLink.copyAnchorLink',

package/dist/es2019/react/index.js

@@ -10,6 +10,7 @@ import { getMarksByOrder, isSameMark, calcTableColumnWidths } from '@atlaskit/ed
 import { getText } from '../utils';
 import { findChildrenByType } from 'prosemirror-utils';
 import { insideBreakoutLayout } from './renderer-node';
+import { isCodeMark } from './marks/code';
 
 function mergeMarks(marksAndNodes) {
   return marksAndNodes.reduce((acc, markOrNode) => {
@@ -128,13 +129,23 @@ export default class ReactSerializer {
       } = mark.attrs;
       const extraProps = {
         isInline: node === null || node === void 0 ? void 0 : node.isInline
-      };
+      }; // currently the only mark which has custom props is the code mark
+
+      const markSpecificProps = isCodeMark(mark) ? {
+        // The appearance being mobile indicates we are in an renderer being
+        // rendered by mobile bridge in a web view.
+        // The tooltip is likely to have unexpected behaviour there, with being cut
+        // off, so we disable it. This is also to keep the behaviour consistent with
+        // the rendering in the mobile Native Renderer.
+        codeBidiWarningTooltipEnabled: this.appearance !== 'mobile'
+      } : {};
       const props = {
         eventHandlers: this.eventHandlers,
         fireAnalyticsEvent: this.fireAnalyticsEvent,
         markKey: key,
         ...otherAttrs,
         ...extraProps,
+        ...markSpecificProps,
         dataAttributes: {
           'data-renderer-mark': true
         }
@@ -299,9 +310,8 @@ export default class ReactSerializer {
       return /*#__PURE__*/React.createElement(TextWrapperComponent, {
         key: textKey,
         startPos: startPos + parentDepth,
-        endPos: endPos + parentDepth,
-        text: mark.text
-      });
+        endPos: endPos + parentDepth
+      }, mark.text);
     }
 
     return mark.text || '';
@@ -369,6 +379,8 @@ export default class ReactSerializer {
   }
 
   getMediaProps(node, path = []) {
+    var _this$media;
+
     const {
       marks: {
         link
@@ -382,7 +394,8 @@ export default class ReactSerializer {
       isLinkMark,
       allowAltTextOnImages: this.allowAltTextOnImages,
       featureFlags: this.media && this.media.featureFlags,
-      shouldOpenMediaViewer: this.shouldOpenMediaViewer
+      shouldOpenMediaViewer: this.shouldOpenMediaViewer,
+      ssr: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.ssr
     };
   }
 
@@ -403,13 +416,14 @@ export default class ReactSerializer {
   }
 
   getMediaGroupProps(node) {
-    var _this$media;
+    var _this$media2, _this$media3;
 
     return { ...this.getProps(node),
       shouldOpenMediaViewer: this.shouldOpenMediaViewer,
       allowAltTextOnImages: this.allowAltTextOnImages,
       featureFlags: this.media && this.media.featureFlags,
-      enableDownloadButton: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.enableDownloadButton
+      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
     };
   }
 
@@ -438,8 +452,15 @@ export default class ReactSerializer {
   }
 
   getCodeBlockProps(node) {
+    // The appearance being mobile indicates we are in an renderer being
+    // rendered by mobile bridge in a web view.
+    // The tooltip is likely to have unexpected behaviour there, with being cut
+    // off, so we disable it. This is also to keep the behaviour consistent with
+    // the rendering in the mobile Native Renderer.
+    const codeBidiWarningTooltipEnabled = this.appearance !== 'mobile';
     return { ...this.getProps(node),
-      text: node.textContent
+      text: node.textContent,
+      codeBidiWarningTooltipEnabled
     };
   }
 

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

@@ -1,8 +1,20 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import { injectIntl } from 'react-intl-next';
 import AkCode from '@atlaskit/code/inline';
-export default function Code(props) {
+import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
+import { useFeatureFlags } from '../../use-feature-flags';
+export const isCodeMark = mark => {
+  return mark && mark.type && mark.type.name === 'code';
+};
+export function CodeWithIntl(props) {
+  const featureFlags = useFeatureFlags();
+  const codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   return /*#__PURE__*/React.createElement(AkCode, _extends({
-    className: "code"
+    className: "code",
+    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
+    codeBidiWarningLabel: codeBidiWarningLabel,
+    codeBidiWarningTooltipEnabled: props.codeBidiWarningTooltipEnabled
   }, props.dataAttributes), props.children);
-}
+}
+export default injectIntl(CodeWithIntl);

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

@@ -0,0 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+export default function FragmentMark(props) {
+  const WrapperElement = props.isInline ? 'span' : 'div';
+  return /*#__PURE__*/React.createElement(WrapperElement, _extends({
+    "data-localId": props.localId,
+    "data-name": props.name,
+    "data-mark-type": "fragment"
+  }, props.dataAttributes), props.children);
+}

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

@@ -12,6 +12,7 @@ import Indentation from './indentation';
 import UnsupportedMark from './unsupportedMark';
 import UnsupportedNodeAttribute from './unsupportedNodeAttribute';
 import DataConsumer from './data-consumer';
+import FragmentMark from './fragment';
 import Annotation, { isAnnotationMark } from './annotation'; // Stage0
 
 import ConfluenceInlineComment from './confluence-inline-comment';
@@ -32,9 +33,10 @@ export const markToReact = {
   indentation: Indentation,
   unsupportedMark: UnsupportedMark,
   unsupportedNodeAttribute: UnsupportedNodeAttribute,
-  dataConsumer: DataConsumer
+  dataConsumer: DataConsumer,
+  fragment: FragmentMark
 };
 export const toReact = mark => {
   return markToReact[mark.type.name];
 };
-export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer };
+export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark };

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

@@ -1,18 +1,24 @@
 import React from 'react';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import { CodeBlock as AkCodeBlock } from '@atlaskit/code';
 import { overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N20, DN50 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
+import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
+import { useFeatureFlags } from '../../use-feature-flags';
 import CopyButton from './codeBlockCopyButton';
 
 function CodeBlock(props) {
   const {
     text,
     language,
-    allowCopyToClipboard = false
+    allowCopyToClipboard = false,
+    codeBidiWarningTooltipEnabled
   } = props;
+  const featureFlags = useFeatureFlags();
+  const codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   const className = ['code-block', props.className].join(' ');
   return /*#__PURE__*/React.createElement("div", {
     className: className
@@ -20,11 +26,15 @@ function CodeBlock(props) {
     content: text
   }) : null, /*#__PURE__*/React.createElement(AkCodeBlock, {
     language: language,
-    text: text
+    text: text,
+    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
+    codeBidiWarningLabel: codeBidiWarningLabel,
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
   }));
 }
 
-export default styled(CodeBlock)`
+const IntlCodeBlock = injectIntl(CodeBlock);
+export default styled(IntlCodeBlock)`
   tab-size: 4;
   [data-ds--code--code-block] {
     font-size: ${relativeFontSizeToBase16(fontSize())};

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import styled from 'styled-components';
 import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/custom-theme-button';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PureComponent } from 'react';
 import { isPastDate, timestampToString, timestampToTaskContext, DateSharedCssClassName } from '@atlaskit/editor-common';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 
 class Date extends PureComponent {
   render() {

package/dist/es2019/react/nodes/heading-anchor.js

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { N200, N500, B400 } from '@atlaskit/theme/colors';
 import LinkIcon from '@atlaskit/icon/glyph/link';
 import Tooltip from '@atlaskit/tooltip';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { headingAnchorLinkMessages } from '../../messages';
 export const HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
 const CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef((props, ref) => {

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

@@ -1,14 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import HeadingAnchor from './heading-anchor';
-import Url from 'url-parse';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics/enums';
 import AnalyticsContext from '../../analytics/analyticsContext';
 import { CopyTextConsumer } from './copy-text-provider';
 
 const getCurrentUrlWithHash = (hash = '') => {
-  const url = new Url(window.location.href);
-  url.set('hash', encodeURIComponent(hash));
+  const url = new URL(window.location.href);
+  url.hash = encodeURIComponent(hash);
   return url.href;
 };
 

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

@@ -21,7 +21,8 @@ export default class Media extends PureComponent {
         alt,
         featureFlags,
         shouldOpenMediaViewer: allowMediaViewer,
-        enableDownloadButton
+        enableDownloadButton,
+        ssr
       } = this.props;
       const linkMark = this.props.marks.find(this.props.isLinkMark);
       const linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
@@ -35,7 +36,8 @@ export default class Media extends PureComponent {
         eventHandlers: eventHandlers,
         alt: allowAltTextOnImages ? alt : undefined,
         featureFlags: featureFlags,
-        shouldEnableDownloadButton: enableDownloadButton
+        shouldEnableDownloadButton: enableDownloadButton,
+        ssr: ssr
       }));
       return linkHref ? /*#__PURE__*/React.createElement(MediaLink, {
         href: linkHref,

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { mapBreakpointToLayoutMaxWidth, WidthConsumer } from '@atlaskit/editor-common';
 import { akEditorFullWidthLayoutWidth, getAkEditorFullPageMaxWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { Component, default as React } from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { FullPagePadding } from '../../../ui/Renderer/style';
 import { ExtendedUIMediaSingle } from './styles';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';

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

@@ -13,21 +13,20 @@ import EmojiItem from './emoji'; // AFP-2532 TODO: Fix automatic suppressions be
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { themed } from '@atlaskit/theme';
+import { getPanelBackgroundDarkModeColors } from '@atlaskit/editor-common';
 const PanelStyled = styled.div`
   ${props => {
   if (props['data-panel-type'] !== PanelType.CUSTOM || !props.backgroundColor) {
     return '';
-  }
+  } // Similar to mainDynamicStyles()
 
-  const border = themed({
-    light: 'none',
-    dark: `1px solid rgba(255, 255, 255, 0.4)`
-  })(props); // Similar to mainDynamicStyles()
 
   return `
       &[data-panel-type=${PanelType.CUSTOM}] {
         background-color: ${props.backgroundColor};
-        border: ${border};
+        ${themed({
+    dark: getPanelBackgroundDarkModeColors
+  })};
       }
     `;
 }}

package/dist/es2019/react/nodes/text-wrapper.js

@@ -1,22 +1,23 @@
 import React from 'react';
 import { TextWithAnnotationDraft } from '../../ui/annotations';
-const TextWrapper = /*#__PURE__*/React.memo(props => {
+
+const TextWrapper = props => {
   const {
     startPos,
     endPos
   } = props;
   const {
-    text
+    children
   } = props;
 
-  if (!text) {
+  if (!children) {
     return null;
   }
 
   return /*#__PURE__*/React.createElement(TextWithAnnotationDraft, {
-    text: text,
     startPos: startPos,
     endPos: endPos
-  });
-});
+  }, children);
+};
+
 export default TextWrapper;

package/dist/es2019/ui/Expand.js

@@ -8,7 +8,7 @@ import { expandMessages, sharedExpandStyles, WidthProvider, ExpandIconWrapper, E
 import { akEditorLineHeight, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { PLATFORM, MODE } from '../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics/enums';
-import { injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { ActiveHeaderIdConsumer } from './active-header-id-provider';
 import _uniqueId from 'lodash/uniqueId';
 const Title = styled.span`

package/dist/es2019/ui/MediaCard.js

@@ -174,7 +174,8 @@ export class MediaCardInternal extends Component {
       imageStatus,
       disableOverlay,
       alt,
-      featureFlags
+      featureFlags,
+      ssr
     } = this.props;
 
     if (imageStatus === 'loading' || !url) {
@@ -200,7 +201,8 @@ export class MediaCardInternal extends Component {
       mediaViewerDataSource: {
         list: Array.from(mediaIdentifierMap.values())
       },
-      featureFlags: featureFlags
+      featureFlags: featureFlags,
+      ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
     });
   }
   /**
@@ -214,7 +216,7 @@ export class MediaCardInternal extends Component {
   render() {
     const {
       contextIdentifierProvider,
-      mediaClientConfig,
+      mediaClientConfig: mediaClientConfigInState,
       fileState
     } = this.state;
     const {
@@ -231,7 +233,8 @@ export class MediaCardInternal extends Component {
       originalDimensions,
       shouldOpenMediaViewer: forceOpenMediaViewer,
       featureFlags,
-      shouldEnableDownloadButton
+      shouldEnableDownloadButton,
+      ssr
     } = this.props;
     const isMobile = rendererAppearance === 'mobile';
     const shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
@@ -247,6 +250,8 @@ export class MediaCardInternal extends Component {
       return null;
     }
 
+    const mediaClientConfig = !!ssr ? ssr.config : mediaClientConfigInState;
+
     if (!mediaClientConfig || !id) {
       return this.renderLoadingCard();
     }
@@ -288,7 +293,8 @@ export class MediaCardInternal extends Component {
         list: Array.from(mediaIdentifierMap.values())
       },
       featureFlags: featureFlags,
-      shouldEnableDownloadButton: shouldEnableDownloadButton
+      shouldEnableDownloadButton: shouldEnableDownloadButton,
+      ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode
     }));
   }