@atlaskit/renderer 108.20.9 → 108.21.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 108.21.0
+
+### Minor Changes
+
+- [#59780](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59780) [`31d9b09ffea0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/31d9b09ffea0) - ED-20985 use mediaClientContext to replace getMediaClient
+
+## 108.20.10
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 108.20.9
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -439,7 +439,10 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
   }, {
     key: "getMediaInlineProps",
     value: function getMediaInlineProps(node) {
-      return _objectSpread({}, this.getProps(node));
+      var _this$media4;
+      return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
+        ssr: (_this$media4 = this.media) === null || _this$media4 === void 0 ? void 0 : _this$media4.ssr
+      });
     }
   }, {
     key: "getTaskItemProps",

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

@@ -43,8 +43,7 @@ var Media = exports.default = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCard", function () {
       var _borderMark$attrs$col, _borderMark$attrs$siz;
       var providers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      var mediaProvider = providers.mediaProvider,
-        contextIdentifierProvider = providers.contextIdentifierProvider;
+      var contextIdentifierProvider = providers.contextIdentifierProvider;
       var _this$props = _this.props,
         allowAltTextOnImages = _this$props.allowAltTextOnImages,
         alt = _this$props.alt,
@@ -64,7 +63,6 @@ var Media = exports.default = /*#__PURE__*/function (_PureComponent) {
           border: !!borderMark
         })
       }, (0, _react2.jsx)(_MediaCard.MediaCard, (0, _extends2.default)({
-        mediaProvider: mediaProvider,
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
         shouldOpenMediaViewer: shouldOpenMediaViewer,

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

@@ -41,12 +41,9 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
     setContextIdentifierProvider = _useState2[1];
   var _useState3 = (0, _react.useState)(),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    viewMediaClientConfigState = _useState4[0],
-    setViewMediaClientConfigState = _useState4[1];
-  var _useState5 = (0, _react.useState)(),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    fileState = _useState6[0],
-    setFileState = _useState6[1];
+    fileState = _useState4[0],
+    setFileState = _useState4[1];
+  var mediaClient = _react.default.useContext(_mediaClientReact.MediaClientContext);
   var updateContext = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(contextIdentifierProvider) {
       var resolvedContextID;
@@ -73,36 +70,40 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
     };
   }();
   var updateFileState = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(id, mediaClientConfig) {
-      var mediaClient, options, _fileState;
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(id) {
+      var options, _fileState;
       return _regenerator.default.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            mediaClient = (0, _mediaClientReact.getMediaClient)(mediaClientConfig);
             options = {
               collectionName: collectionName
             };
-            _context2.prev = 2;
+            _context2.prev = 1;
+            if (!mediaClient) {
+              _context2.next = 7;
+              break;
+            }
             _context2.next = 5;
             return mediaClient.file.getCurrentState(id, options);
           case 5:
             _fileState = _context2.sent;
             setFileState(_fileState);
+          case 7:
             _context2.next = 11;
             break;
           case 9:
             _context2.prev = 9;
-            _context2.t0 = _context2["catch"](2);
+            _context2.t0 = _context2["catch"](1);
           case 11:
           case "end":
             return _context2.stop();
         }
-      }, _callee2, null, [[2, 9]]);
+      }, _callee2, null, [[1, 9]]);
     }));
-    return function (_x2, _x3) {
+    return function (_x2) {
       return _ref3.apply(this, arguments);
     };
-  }(), [collectionName]);
+  }(), [collectionName, mediaClient]);
   (0, _react.useEffect)(function () {
     var id = identifier.id;
     var nodeIsInCache = id && _MediaCard.mediaIdentifierMap.has(id);
@@ -116,44 +117,17 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
     };
   }, [identifier, collectionName]);
   (0, _react.useEffect)(function () {
-    var mediaProvider = mediaInlineProviders.mediaProvider,
-      contextIdentifierProvider = mediaInlineProviders.contextIdentifierProvider;
+    var contextIdentifierProvider = mediaInlineProviders.contextIdentifierProvider;
     var id = clipboardAttrs.id;
-    updateViewMediaClientConfigState(mediaProvider);
     updateContext(contextIdentifierProvider);
-    id && viewMediaClientConfigState && updateFileState(id, viewMediaClientConfigState);
-  }, [mediaInlineProviders, contextIdentifierProvider, clipboardAttrs, viewMediaClientConfigState, updateFileState]);
-  var updateViewMediaClientConfigState = /*#__PURE__*/function () {
-    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(mediaProvider) {
-      var mediaClientConfig;
-      return _regenerator.default.wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            if (!mediaProvider) {
-              _context3.next = 5;
-              break;
-            }
-            _context3.next = 3;
-            return mediaProvider;
-          case 3:
-            mediaClientConfig = _context3.sent;
-            setViewMediaClientConfigState(mediaClientConfig.viewMediaClientConfig);
-          case 5:
-          case "end":
-            return _context3.stop();
-        }
-      }, _callee3);
-    }));
-    return function updateViewMediaClientConfigState(_x4) {
-      return _ref4.apply(this, arguments);
-    };
-  }();
+    id && updateFileState(id);
+  }, [mediaInlineProviders, contextIdentifierProvider, clipboardAttrs, updateFileState]);
 
   /*
    * Only show the loading view if the media provider is not ready
    * prevents calling the media API before the provider is ready
    */
-  if (!viewMediaClientConfigState) {
+  if (!mediaClient) {
     return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadingView, {
       message: "",
       isSelected: false
@@ -161,7 +135,7 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
   }
   if (type && (0, _mediaInline.shouldShowInlineImage)(type)) {
     return /*#__PURE__*/_react.default.createElement(_mediaInline.MediaInlineImageCard, {
-      mediaClient: (0, _mediaClientReact.getMediaClient)(viewMediaClientConfigState),
+      mediaClient: mediaClient,
       identifier: identifier,
       alt: alt,
       width: width,
@@ -192,7 +166,7 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
     onClick: handleMediaInlineClick,
     shouldOpenMediaViewer: shouldOpenMediaViewer,
     shouldDisplayToolTip: shouldDisplayToolTip,
-    mediaClientConfig: viewMediaClientConfigState,
+    mediaClientConfig: mediaClient.mediaClientConfig,
     mediaViewerItems: Array.from(_MediaCard.mediaIdentifierMap.values())
   }) : /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
     message: (intl || (0, _reactIntlNext.createIntl)({

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

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditorMediaClientProvider = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _mediaClientReact = require("@atlaskit/media-client-react");
+var _providerFactory = require("@atlaskit/editor-common/provider-factory");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var EditorMediaClientProvider = exports.EditorMediaClientProvider = function EditorMediaClientProvider(_ref) {
+  var children = _ref.children,
+    ssr = _ref.ssr;
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    mediaClientConfig = _useState2[0],
+    setMediaClientConfig = _useState2[1];
+  var mediaProvider = (0, _providerFactory.useProvider)('mediaProvider');
+  var contextMediaClient = (0, _react.useContext)(_mediaClientReact.MediaClientContext);
+
+  // MediaClientProvider currently requires a mediaClientConfig
+  // And inserting the MediaClientProvider will cause a re-render
+  // We should use MediaClientProvider once it no longer requires a config
+  var mediaClient = (0, _react.useMemo)(function () {
+    return mediaClientConfig ? (0, _mediaClientReact.getMediaClient)(mediaClientConfig) : undefined;
+  }, [mediaClientConfig]);
+
+  // Consumers can override the mediaClient for renderer,
+  // by not providing both SSR config and mediaProvider,
+  // and provide a top level mediaClient context
+  // This is useful for testing and creating examples.
+  (0, _react.useEffect)(function () {
+    if (ssr !== null && ssr !== void 0 && ssr.config) {
+      setMediaClientConfig(ssr.config);
+    } else if (mediaProvider) {
+      mediaProvider.then(function (provider) {
+        setMediaClientConfig(provider.viewMediaClientConfig);
+      });
+    }
+  }, [mediaProvider, ssr]);
+  return /*#__PURE__*/_react.default.createElement(_mediaClientReact.MediaClientContext.Provider, {
+    value: mediaClient || contextMediaClient
+  }, children);
+};

package/dist/cjs/ui/MediaCard.js

@@ -5,8 +5,9 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mediaIdentifierMap = exports.getListOfIdentifiersFromDoc = exports.getClipboardAttrs = exports.MediaCardInternal = exports.MediaCard = void 0;
+exports.mediaIdentifierMap = exports.getListOfIdentifiersFromDoc = exports.getClipboardAttrs = exports.MediaCardView = exports.MediaCardInternal = exports.MediaCard = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -55,29 +56,32 @@ var getListOfIdentifiersFromDoc = exports.getListOfIdentifiersFromDoc = function
     return identifierList;
   }, []);
 };
-var MediaCardInternal = exports.MediaCardInternal = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(MediaCardInternal, _Component);
-  var _super = _createSuper(MediaCardInternal);
-  function MediaCardInternal() {
+var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(MediaCardView, _Component);
+  var _super = _createSuper(MediaCardView);
+  function MediaCardView() {
     var _this;
-    (0, _classCallCheck2.default)(this, MediaCardInternal);
+    (0, _classCallCheck2.default)(this, MediaCardView);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {});
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "saveFileState", /*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(id, mediaClientConfig) {
-        var collectionName, mediaClient, options, fileState;
+      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(id) {
+        var _this$props, collectionName, mediaClient, options, fileState;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              collectionName = _this.props.collection;
-              mediaClient = (0, _mediaClientReact.getMediaClient)(mediaClientConfig);
+              _this$props = _this.props, collectionName = _this$props.collection, mediaClient = _this$props.mediaClient;
               options = {
                 collectionName: collectionName
               };
-              _context.prev = 3;
+              _context.prev = 2;
+              if (!mediaClient) {
+                _context.next = 8;
+                break;
+              }
               _context.next = 6;
               return mediaClient.file.getCurrentState(id, options);
             case 6:
@@ -85,18 +89,19 @@ var MediaCardInternal = exports.MediaCardInternal = /*#__PURE__*/function (_Comp
               _this.setState({
                 fileState: fileState
               });
+            case 8:
               _context.next = 12;
               break;
             case 10:
               _context.prev = 10;
-              _context.t0 = _context["catch"](3);
+              _context.t0 = _context["catch"](2);
             case 12:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[3, 10]]);
+        }, _callee, null, [[2, 10]]);
       }));
-      return function (_x, _x2) {
+      return function (_x) {
         return _ref.apply(this, arguments);
       };
     }());
@@ -127,40 +132,29 @@ var MediaCardInternal = exports.MediaCardInternal = /*#__PURE__*/function (_Comp
     });
     return _this;
   }
-  (0, _createClass2.default)(MediaCardInternal, [{
+  (0, _createClass2.default)(MediaCardView, [{
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var _this$props, rendererContext, mediaProvider, contextIdentifierProvider, id, url, collectionName, mediaProviderObject, mediaClientConfig, nodeIsInCache;
+        var _this$props2, rendererContext, contextIdentifierProvider, id, url, collectionName, nodeIsInCache;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              _this$props = this.props, rendererContext = _this$props.rendererContext, mediaProvider = _this$props.mediaProvider, contextIdentifierProvider = _this$props.contextIdentifierProvider, id = _this$props.id, url = _this$props.url, collectionName = _this$props.collection;
-              if (mediaProvider) {
-                _context2.next = 3;
-                break;
-              }
-              return _context2.abrupt("return");
-            case 3:
+              _this$props2 = this.props, rendererContext = _this$props2.rendererContext, contextIdentifierProvider = _this$props2.contextIdentifierProvider, id = _this$props2.id, url = _this$props2.url, collectionName = _this$props2.collection;
               if (!contextIdentifierProvider) {
-                _context2.next = 10;
+                _context2.next = 8;
                 break;
               }
               _context2.t0 = this;
-              _context2.next = 7;
+              _context2.next = 5;
               return contextIdentifierProvider;
-            case 7:
+            case 5:
               _context2.t1 = _context2.sent;
               _context2.t2 = {
                 contextIdentifierProvider: _context2.t1
               };
               _context2.t0.setState.call(_context2.t0, _context2.t2);
-            case 10:
-              _context2.next = 12;
-              return mediaProvider;
-            case 12:
-              mediaProviderObject = _context2.sent;
-              mediaClientConfig = mediaProviderObject.viewMediaClientConfig;
+            case 8:
               nodeIsInCache = id && mediaIdentifierMap.has(id) || url && mediaIdentifierMap.has(url);
               if (rendererContext && rendererContext.adDoc && !nodeIsInCache) {
                 getListOfIdentifiersFromDoc(rendererContext.adDoc).forEach(function (identifier) {
@@ -173,13 +167,10 @@ var MediaCardInternal = exports.MediaCardInternal = /*#__PURE__*/function (_Comp
                   }
                 });
               }
-              this.setState({
-                mediaClientConfig: mediaClientConfig
-              });
               if (id) {
-                this.saveFileState(id, mediaClientConfig);
+                this.saveFileState(id);
               }
-            case 18:
+            case 11:
             case "end":
               return _context2.stop();
           }
@@ -193,18 +184,17 @@ var MediaCardInternal = exports.MediaCardInternal = /*#__PURE__*/function (_Comp
   }, {
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(newProps) {
-      var mediaClientConfig = this.state.mediaClientConfig;
       var newId = newProps.id;
-      if (mediaClientConfig && newId && newId !== this.props.id) {
-        this.saveFileState(newId, mediaClientConfig);
+      if (newId && newId !== this.props.id) {
+        this.saveFileState(newId);
       }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$props2 = this.props,
-        id = _this$props2.id,
-        dataURI = _this$props2.url;
+      var _this$props3 = this.props,
+        id = _this$props3.id,
+        dataURI = _this$props3.url;
       if (id) {
         mediaIdentifierMap.delete(id);
       } else if (dataURI) {
@@ -214,18 +204,18 @@ var MediaCardInternal = exports.MediaCardInternal = /*#__PURE__*/function (_Comp
   }, {
     key: "renderExternal",
     value: function renderExternal(shouldOpenMediaViewer) {
-      var mediaClientConfig = this.state.mediaClientConfig;
-      var _this$props3 = this.props,
-        cardDimensions = _this$props3.cardDimensions,
-        resizeMode = _this$props3.resizeMode,
-        appearance = _this$props3.appearance,
-        url = _this$props3.url,
-        imageStatus = _this$props3.imageStatus,
-        disableOverlay = _this$props3.disableOverlay,
-        alt = _this$props3.alt,
-        featureFlags = _this$props3.featureFlags,
-        ssr = _this$props3.ssr,
-        rendererAppearance = _this$props3.rendererAppearance;
+      var _this$props4 = this.props,
+        cardDimensions = _this$props4.cardDimensions,
+        resizeMode = _this$props4.resizeMode,
+        appearance = _this$props4.appearance,
+        url = _this$props4.url,
+        imageStatus = _this$props4.imageStatus,
+        disableOverlay = _this$props4.disableOverlay,
+        alt = _this$props4.alt,
+        featureFlags = _this$props4.featureFlags,
+        ssr = _this$props4.ssr,
+        rendererAppearance = _this$props4.rendererAppearance,
+        mediaClient = _this$props4.mediaClient;
       if (imageStatus === 'loading' || !url) {
         return this.renderLoadingCard();
       }
@@ -234,6 +224,9 @@ var MediaCardInternal = exports.MediaCardInternal = /*#__PURE__*/function (_Comp
         name: url,
         mediaItemType: 'external-image'
       };
+
+      // we need this statement for the mandatory mediaClientConfig below
+      var mediaClientConfig = mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig;
       return /*#__PURE__*/_react.default.createElement(_mediaCard.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
@@ -257,24 +250,24 @@ var MediaCardInternal = exports.MediaCardInternal = /*#__PURE__*/function (_Comp
     value: function render() {
       var _this$state = this.state,
         contextIdentifierProvider = _this$state.contextIdentifierProvider,
-        mediaClientConfigInState = _this$state.mediaClientConfig,
         fileState = _this$state.fileState;
-      var _this$props4 = this.props,
-        id = _this$props4.id,
-        alt = _this$props4.alt,
-        type = _this$props4.type,
-        collection = _this$props4.collection,
-        occurrenceKey = _this$props4.occurrenceKey,
-        cardDimensions = _this$props4.cardDimensions,
-        resizeMode = _this$props4.resizeMode,
-        rendererAppearance = _this$props4.rendererAppearance,
-        disableOverlay = _this$props4.disableOverlay,
-        useInlinePlayer = _this$props4.useInlinePlayer,
-        originalDimensions = _this$props4.originalDimensions,
-        forceOpenMediaViewer = _this$props4.shouldOpenMediaViewer,
-        featureFlags = _this$props4.featureFlags,
-        shouldEnableDownloadButton = _this$props4.shouldEnableDownloadButton,
-        ssr = _this$props4.ssr;
+      var _this$props5 = this.props,
+        id = _this$props5.id,
+        alt = _this$props5.alt,
+        type = _this$props5.type,
+        collection = _this$props5.collection,
+        occurrenceKey = _this$props5.occurrenceKey,
+        cardDimensions = _this$props5.cardDimensions,
+        resizeMode = _this$props5.resizeMode,
+        rendererAppearance = _this$props5.rendererAppearance,
+        disableOverlay = _this$props5.disableOverlay,
+        useInlinePlayer = _this$props5.useInlinePlayer,
+        originalDimensions = _this$props5.originalDimensions,
+        forceOpenMediaViewer = _this$props5.shouldOpenMediaViewer,
+        featureFlags = _this$props5.featureFlags,
+        shouldEnableDownloadButton = _this$props5.shouldEnableDownloadButton,
+        ssr = _this$props5.ssr,
+        mediaClient = _this$props5.mediaClient;
       var isMobile = rendererAppearance === 'mobile';
       var shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
       var isInlinePlayer = isMobile ? false : shouldPlayInline;
@@ -286,7 +279,7 @@ var MediaCardInternal = exports.MediaCardInternal = /*#__PURE__*/function (_Comp
       if (type === 'link') {
         return null;
       }
-      var mediaClientConfig = !!ssr ? ssr.config : mediaClientConfigInState;
+      var mediaClientConfig = !!ssr ? ssr.config : mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig;
       if (!mediaClientConfig || !id) {
         return this.renderLoadingCard();
       }
@@ -330,7 +323,7 @@ var MediaCardInternal = exports.MediaCardInternal = /*#__PURE__*/function (_Comp
       }));
     }
   }]);
-  return MediaCardInternal;
+  return MediaCardView;
 }(_react.Component);
 // Needed for copy & paste
 var getClipboardAttrs = exports.getClipboardAttrs = function getClipboardAttrs(_ref2) {
@@ -365,4 +358,10 @@ var getClipboardAttrs = exports.getClipboardAttrs = function getClipboardAttrs(_
     'data-alt': alt
   };
 };
+var MediaCardInternal = exports.MediaCardInternal = function MediaCardInternal(props) {
+  var mediaClient = (0, _react.useContext)(_mediaClientReact.MediaClientContext);
+  return /*#__PURE__*/_react.default.createElement(MediaCardView, (0, _extends2.default)({}, props, {
+    mediaClient: mediaClient
+  }));
+};
 var MediaCard = exports.MediaCard = (0, _utils.withImageLoader)(MediaCardInternal);

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

@@ -44,6 +44,7 @@ var _rendererContext = require("../../renderer-context");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _ErrorBoundary = require("./ErrorBoundary");
 var _RenderTracking = require("../../react/utils/performance/RenderTracking");
+var _EditorMediaClientProvider = require("../../react/utils/EditorMediaClientProvider");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -53,7 +54,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.20.9";
+var packageVersion = "108.21.0";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -300,7 +301,8 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
         allowColumnSorting = _this$props.allowColumnSorting,
         allowCopyToClipboard = _this$props.allowCopyToClipboard,
         allowWrapCodeBlock = _this$props.allowWrapCodeBlock,
-        allowCustomPanels = _this$props.allowCustomPanels;
+        allowCustomPanels = _this$props.allowCustomPanels,
+        media = _this$props.media;
       var featureFlags = this.featureFlags(this.props.featureFlags);
       var allowNestedHeaderLinks = (0, _links.isNestedHeaderLinksEnabled)(allowHeadingAnchorLinks);
       /**
@@ -368,7 +370,9 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
               return _this3.fireAnalyticsEvent(event);
             }
           }
-        }, (0, _react2.jsx)(_SmartCardStorage.Provider, null, (0, _react2.jsx)(RendererWrapper, {
+        }, (0, _react2.jsx)(_SmartCardStorage.Provider, null, (0, _react2.jsx)(_providerFactory.ProviderFactoryProvider, {
+          value: this.providerFactory
+        }, (0, _react2.jsx)(RendererWrapper, {
           appearance: appearance,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
           allowColumnSorting: allowColumnSorting,
@@ -380,12 +384,13 @@ var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
           addTelepointer: this.props.addTelepointer,
           innerRef: this.editorRef,
           onClick: handleWrapperOnClick,
-          onMouseDown: this.onMouseDownEditView
+          onMouseDown: this.onMouseDownEditView,
+          ssr: media === null || media === void 0 ? void 0 : media.ssr
         }, enableSsrInlineScripts ? (0, _react2.jsx)(_breakoutSsr.BreakoutSSRInlineScript, null) : null, (0, _react2.jsx)(RendererActionsInternalUpdater, {
           doc: pmDoc,
           schema: schema,
           onAnalyticsEvent: this.fireAnalyticsEvent
-        }, result))))));
+        }, result)))))));
         var rendererResult = truncated ? (0, _react2.jsx)(_truncatedWrapper.TruncatedWrapper, {
           height: maxHeight,
           fadeHeight: fadeOutHeight
@@ -466,7 +471,8 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     onClick = props.onClick,
     onMouseDown = props.onMouseDown,
     useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock,
-    addTelepointer = props.addTelepointer;
+    addTelepointer = props.addTelepointer,
+    ssr = props.ssr;
   var createTelepointer = function createTelepointer() {
     var telepointer = document.createElement('span');
     telepointer.textContent = "\u200B";
@@ -523,6 +529,8 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     "data-appearance": appearance
   }, (0, _react2.jsx)(_ui.BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
+  }, (0, _react2.jsx)(_EditorMediaClientProvider.EditorMediaClientProvider, {
+    ssr: ssr
   }, (0, _react2.jsx)("div", {
     ref: innerRef,
     onClick: onClick,
@@ -533,7 +541,7 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
       allowColumnSorting: !!allowColumnSorting,
       useBlockRenderForCodeBlock: useBlockRenderForCodeBlock
     })
-  }, children)));
+  }, children))));
 });
 function RendererActionsInternalUpdater(_ref) {
   var children = _ref.children,

package/dist/es2019/react/index.js

@@ -383,8 +383,10 @@ export default class ReactSerializer {
     };
   }
   getMediaInlineProps(node) {
+    var _this$media4;
     return {
-      ...this.getProps(node)
+      ...this.getProps(node),
+      ssr: (_this$media4 = this.media) === null || _this$media4 === void 0 ? void 0 : _this$media4.ssr
     };
   }
   getTaskItemProps(node, path = []) {

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

@@ -2,8 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 
-import React from 'react';
-import { PureComponent } from 'react';
+import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
@@ -21,7 +20,6 @@ export default class Media extends PureComponent {
     _defineProperty(this, "renderCard", (providers = {}) => {
       var _borderMark$attrs$col, _borderMark$attrs$siz;
       const {
-        mediaProvider,
         contextIdentifierProvider
       } = providers;
       const {
@@ -46,7 +44,6 @@ export default class Media extends PureComponent {
           }
         }
       }, jsx(MediaCard, _extends({
-        mediaProvider: mediaProvider,
         contextIdentifierProvider: contextIdentifierProvider
       }, this.props, {
         shouldOpenMediaViewer: shouldOpenMediaViewer,