@atlaskit/renderer 108.20.10 → 108.21.0

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

@@ -3,7 +3,7 @@ import React, { useEffect, useState, useCallback } from 'react';
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { MediaInlineCardErroredView, MediaInlineCardLoadingView, messages } from '@atlaskit/media-ui';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { getMediaClient } from '@atlaskit/media-client-react';
+import { MediaClientContext } from '@atlaskit/media-client-react';
 import { getClipboardAttrs, mediaIdentifierMap } from '../../ui/MediaCard';
 import { createIntl, injectIntl } from 'react-intl-next';
 import { shouldShowInlineImage, MediaInlineImageCard } from '@atlaskit/editor-common/media-inline';
@@ -21,26 +21,27 @@ export const RenderMediaInline = ({
   type
 }) => {
   const [contextIdentifierProvider, setContextIdentifierProvider] = useState();
-  const [viewMediaClientConfigState, setViewMediaClientConfigState] = useState();
   const [fileState, setFileState] = useState();
+  const mediaClient = React.useContext(MediaClientContext);
   const updateContext = async contextIdentifierProvider => {
     if (contextIdentifierProvider) {
       const resolvedContextID = await contextIdentifierProvider;
       setContextIdentifierProvider(resolvedContextID);
     }
   };
-  const updateFileState = useCallback(async (id, mediaClientConfig) => {
-    const mediaClient = getMediaClient(mediaClientConfig);
+  const updateFileState = useCallback(async id => {
     const options = {
       collectionName
     };
     try {
-      const fileState = await mediaClient.file.getCurrentState(id, options);
-      setFileState(fileState);
+      if (mediaClient) {
+        const fileState = await mediaClient.file.getCurrentState(id, options);
+        setFileState(fileState);
+      }
     } catch (error) {
       // do not set state on error
     }
-  }, [collectionName]);
+  }, [collectionName, mediaClient]);
   useEffect(() => {
     const {
       id
@@ -58,28 +59,20 @@ export const RenderMediaInline = ({
   }, [identifier, collectionName]);
   useEffect(() => {
     const {
-      mediaProvider,
       contextIdentifierProvider
     } = mediaInlineProviders;
     const {
       id
     } = clipboardAttrs;
-    updateViewMediaClientConfigState(mediaProvider);
     updateContext(contextIdentifierProvider);
-    id && viewMediaClientConfigState && updateFileState(id, viewMediaClientConfigState);
-  }, [mediaInlineProviders, contextIdentifierProvider, clipboardAttrs, viewMediaClientConfigState, updateFileState]);
-  const updateViewMediaClientConfigState = async mediaProvider => {
-    if (mediaProvider) {
-      const mediaClientConfig = await mediaProvider;
-      setViewMediaClientConfigState(mediaClientConfig.viewMediaClientConfig);
-    }
-  };
+    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.createElement(MediaInlineCardLoadingView, {
       message: "",
       isSelected: false
@@ -87,7 +80,7 @@ export const RenderMediaInline = ({
   }
   if (type && shouldShowInlineImage(type)) {
     return /*#__PURE__*/React.createElement(MediaInlineImageCard, {
-      mediaClient: getMediaClient(viewMediaClientConfigState),
+      mediaClient: mediaClient,
       identifier: identifier,
       alt: alt,
       width: width,
@@ -122,7 +115,7 @@ export const RenderMediaInline = ({
     onClick: handleMediaInlineClick,
     shouldOpenMediaViewer: shouldOpenMediaViewer,
     shouldDisplayToolTip: shouldDisplayToolTip,
-    mediaClientConfig: viewMediaClientConfigState,
+    mediaClientConfig: mediaClient.mediaClientConfig,
     mediaViewerItems: Array.from(mediaIdentifierMap.values())
   }) : /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
     message: (intl || createIntl({

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

@@ -0,0 +1,33 @@
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { MediaClientContext, getMediaClient } from '@atlaskit/media-client-react';
+import { useProvider } from '@atlaskit/editor-common/provider-factory';
+export const EditorMediaClientProvider = ({
+  children,
+  ssr
+}) => {
+  const [mediaClientConfig, setMediaClientConfig] = useState();
+  const mediaProvider = useProvider('mediaProvider');
+  const contextMediaClient = useContext(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
+  const mediaClient = useMemo(() => mediaClientConfig ? 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.
+  useEffect(() => {
+    if (ssr !== null && ssr !== void 0 && ssr.config) {
+      setMediaClientConfig(ssr.config);
+    } else if (mediaProvider) {
+      mediaProvider.then(provider => {
+        setMediaClientConfig(provider.viewMediaClientConfig);
+      });
+    }
+  }, [mediaProvider, ssr]);
+  return /*#__PURE__*/React.createElement(MediaClientContext.Provider, {
+    value: mediaClient || contextMediaClient
+  }, children);
+};

package/dist/es2019/ui/MediaCard.js

@@ -1,8 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from 'react';
+import React, { Component, useContext } from 'react';
 import { filter } from '@atlaskit/adf-utils/traverse';
 import { Card, CardLoading, CardError } from '@atlaskit/media-card';
-import { getMediaClient } from '@atlaskit/media-client-react';
+import { MediaClientContext } from '@atlaskit/media-client-react';
 import { withImageLoader } from '@atlaskit/editor-common/utils';
 export const mediaIdentifierMap = new Map();
 export const getListOfIdentifiersFromDoc = doc => {
@@ -32,23 +33,25 @@ export const getListOfIdentifiersFromDoc = doc => {
     return identifierList;
   }, []);
 };
-export class MediaCardInternal extends Component {
+export class MediaCardView extends Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "state", {});
-    _defineProperty(this, "saveFileState", async (id, mediaClientConfig) => {
+    _defineProperty(this, "saveFileState", async id => {
       const {
-        collection: collectionName
+        collection: collectionName,
+        mediaClient
       } = this.props;
-      const mediaClient = getMediaClient(mediaClientConfig);
       const options = {
         collectionName
       };
       try {
-        const fileState = await mediaClient.file.getCurrentState(id, options);
-        this.setState({
-          fileState
-        });
+        if (mediaClient) {
+          const fileState = await mediaClient.file.getCurrentState(id, options);
+          this.setState({
+            fileState
+          });
+        }
       } catch (error) {
         // do not set state on error
       }
@@ -86,22 +89,16 @@ export class MediaCardInternal extends Component {
   async componentDidMount() {
     const {
       rendererContext,
-      mediaProvider,
       contextIdentifierProvider,
       id,
       url,
       collection: collectionName
     } = this.props;
-    if (!mediaProvider) {
-      return;
-    }
     if (contextIdentifierProvider) {
       this.setState({
         contextIdentifierProvider: await contextIdentifierProvider
       });
     }
-    const mediaProviderObject = await mediaProvider;
-    const mediaClientConfig = mediaProviderObject.viewMediaClientConfig;
     const nodeIsInCache = id && mediaIdentifierMap.has(id) || url && mediaIdentifierMap.has(url);
     if (rendererContext && rendererContext.adDoc && !nodeIsInCache) {
       getListOfIdentifiersFromDoc(rendererContext.adDoc).forEach(identifier => {
@@ -115,22 +112,16 @@ export class MediaCardInternal extends Component {
         }
       });
     }
-    this.setState({
-      mediaClientConfig: mediaClientConfig
-    });
     if (id) {
-      this.saveFileState(id, mediaClientConfig);
+      this.saveFileState(id);
     }
   }
   UNSAFE_componentWillReceiveProps(newProps) {
-    const {
-      mediaClientConfig
-    } = this.state;
     const {
       id: newId
     } = newProps;
-    if (mediaClientConfig && newId && newId !== this.props.id) {
-      this.saveFileState(newId, mediaClientConfig);
+    if (newId && newId !== this.props.id) {
+      this.saveFileState(newId);
     }
   }
   componentWillUnmount() {
@@ -145,9 +136,6 @@ export class MediaCardInternal extends Component {
     }
   }
   renderExternal(shouldOpenMediaViewer) {
-    const {
-      mediaClientConfig
-    } = this.state;
     const {
       cardDimensions,
       resizeMode,
@@ -158,7 +146,8 @@ export class MediaCardInternal extends Component {
       alt,
       featureFlags,
       ssr,
-      rendererAppearance
+      rendererAppearance,
+      mediaClient
     } = this.props;
     if (imageStatus === 'loading' || !url) {
       return this.renderLoadingCard();
@@ -168,6 +157,9 @@ export class MediaCardInternal extends Component {
       name: url,
       mediaItemType: 'external-image'
     };
+
+    // we need this statement for the mandatory mediaClientConfig below
+    const mediaClientConfig = mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig;
     return /*#__PURE__*/React.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
@@ -189,7 +181,6 @@ export class MediaCardInternal extends Component {
   render() {
     const {
       contextIdentifierProvider,
-      mediaClientConfig: mediaClientConfigInState,
       fileState
     } = this.state;
     const {
@@ -207,7 +198,8 @@ export class MediaCardInternal extends Component {
       shouldOpenMediaViewer: forceOpenMediaViewer,
       featureFlags,
       shouldEnableDownloadButton,
-      ssr
+      ssr,
+      mediaClient
     } = this.props;
     const isMobile = rendererAppearance === 'mobile';
     const shouldPlayInline = useInlinePlayer !== undefined ? useInlinePlayer : true;
@@ -220,7 +212,7 @@ export class MediaCardInternal extends Component {
     if (type === 'link') {
       return null;
     }
-    const mediaClientConfig = !!ssr ? ssr.config : mediaClientConfigInState;
+    const mediaClientConfig = !!ssr ? ssr.config : mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig;
     if (!mediaClientConfig || !id) {
       return this.renderLoadingCard();
     }
@@ -298,4 +290,10 @@ export const getClipboardAttrs = ({
     'data-alt': alt
   };
 };
+export const MediaCardInternal = props => {
+  const mediaClient = useContext(MediaClientContext);
+  return /*#__PURE__*/React.createElement(MediaCardView, _extends({}, props, {
+    mediaClient: mediaClient
+  }));
+};
 export const MediaCard = withImageLoader(MediaCardInternal);

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

@@ -1,12 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-import React, { Fragment, useContext, useLayoutEffect, useRef } from 'react';
+import React, { Fragment, useContext, useLayoutEffect, useRef, PureComponent } from 'react';
 import { jsx } from '@emotion/react';
-import { PureComponent } from 'react';
 import { getSchemaBasedOnStage } from '@atlaskit/adf-schema/schema-default';
 import { reduce } from '@atlaskit/adf-utils/traverse';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { ProviderFactory, ProviderFactoryProvider } from '@atlaskit/editor-common/provider-factory';
 import { UnsupportedBlock, BaseTheme, WidthProvider, WithCreateAnalyticsEvent, IntlErrorBoundary } from '@atlaskit/editor-common/ui';
 import { getAnalyticsAppearance, getAnalyticsEventSeverity, getResponseEndTime, startMeasure, stopMeasure, shouldForceTracking, measureTTI, getDistortedDurationMonitor, browser } from '@atlaskit/editor-common/utils';
 import { normalizeFeatureFlags } from '@atlaskit/editor-common/normalize-feature-flags';
@@ -32,10 +31,11 @@ import { RendererContextProvider } from '../../renderer-context';
 import memoizeOne from 'memoize-one';
 import { ErrorBoundary } from './ErrorBoundary';
 import { RenderTracking } from '../../react/utils/performance/RenderTracking';
+import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientProvider';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "108.20.10";
+const packageVersion = "108.21.0";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);
@@ -277,7 +277,8 @@ export class Renderer extends PureComponent {
       allowColumnSorting,
       allowCopyToClipboard,
       allowWrapCodeBlock,
-      allowCustomPanels
+      allowCustomPanels,
+      media
     } = this.props;
     const featureFlags = this.featureFlags(this.props.featureFlags);
     const allowNestedHeaderLinks = isNestedHeaderLinksEnabled(allowHeadingAnchorLinks);
@@ -345,7 +346,9 @@ export class Renderer extends PureComponent {
         value: {
           fireAnalyticsEvent: event => this.fireAnalyticsEvent(event)
         }
-      }, jsx(SmartCardStorageProvider, null, jsx(RendererWrapper, {
+      }, jsx(SmartCardStorageProvider, null, jsx(ProviderFactoryProvider, {
+        value: this.providerFactory
+      }, jsx(RendererWrapper, {
         appearance: appearance,
         allowNestedHeaderLinks: allowNestedHeaderLinks,
         allowColumnSorting: allowColumnSorting,
@@ -357,12 +360,13 @@ export class Renderer extends 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 ? jsx(BreakoutSSRInlineScript, null) : null, jsx(RendererActionsInternalUpdater, {
         doc: pmDoc,
         schema: schema,
         onAnalyticsEvent: this.fireAnalyticsEvent
-      }, result))))));
+      }, result)))))));
       let rendererResult = truncated ? jsx(TruncatedWrapper, {
         height: maxHeight,
         fadeHeight: fadeOutHeight
@@ -440,7 +444,8 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
     onClick,
     onMouseDown,
     useBlockRenderForCodeBlock,
-    addTelepointer
+    addTelepointer,
+    ssr
   } = props;
   const createTelepointer = () => {
     const telepointer = document.createElement('span');
@@ -496,6 +501,8 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
     "data-appearance": appearance
   }, jsx(BaseTheme, {
     baseFontSize: appearance && appearance !== 'comment' ? akEditorFullPageDefaultFontSize : undefined
+  }, jsx(EditorMediaClientProvider, {
+    ssr: ssr
   }, jsx("div", {
     ref: innerRef,
     onClick: onClick,
@@ -506,7 +513,7 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
       allowColumnSorting: !!allowColumnSorting,
       useBlockRenderForCodeBlock
     })
-  }, children)));
+  }, children))));
 });
 function RendererActionsInternalUpdater({
   children,

package/dist/esm/react/index.js

@@ -432,7 +432,10 @@ var ReactSerializer = /*#__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/esm/react/nodes/media/index.js

@@ -10,8 +10,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /** @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';
@@ -36,8 +35,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_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,
@@ -57,7 +55,6 @@ var Media = /*#__PURE__*/function (_PureComponent) {
           border: !!borderMark
         })
       }, jsx(MediaCard, _extends({
-        mediaProvider: mediaProvider,
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
         shouldOpenMediaViewer: shouldOpenMediaViewer,

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

@@ -9,7 +9,7 @@ import React, { useEffect, useState, useCallback } from 'react';
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { MediaInlineCardErroredView, MediaInlineCardLoadingView, messages } from '@atlaskit/media-ui';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { getMediaClient } from '@atlaskit/media-client-react';
+import { MediaClientContext } from '@atlaskit/media-client-react';
 import { getClipboardAttrs, mediaIdentifierMap } from '../../ui/MediaCard';
 import { createIntl, injectIntl } from 'react-intl-next';
 import { shouldShowInlineImage, MediaInlineImageCard } from '@atlaskit/editor-common/media-inline';
@@ -31,12 +31,9 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
     setContextIdentifierProvider = _useState2[1];
   var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
-    viewMediaClientConfigState = _useState4[0],
-    setViewMediaClientConfigState = _useState4[1];
-  var _useState5 = useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    fileState = _useState6[0],
-    setFileState = _useState6[1];
+    fileState = _useState4[0],
+    setFileState = _useState4[1];
+  var mediaClient = React.useContext(MediaClientContext);
   var updateContext = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(contextIdentifierProvider) {
       var resolvedContextID;
@@ -63,36 +60,40 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
     };
   }();
   var updateFileState = useCallback( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(id, mediaClientConfig) {
-      var mediaClient, options, _fileState;
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(id) {
+      var options, _fileState;
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            mediaClient = 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]);
   useEffect(function () {
     var id = identifier.id;
     var nodeIsInCache = id && mediaIdentifierMap.has(id);
@@ -106,44 +107,17 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
     };
   }, [identifier, collectionName]);
   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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(mediaProvider) {
-      var mediaClientConfig;
-      return _regeneratorRuntime.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.createElement(MediaInlineCardLoadingView, {
       message: "",
       isSelected: false
@@ -151,7 +125,7 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
   }
   if (type && shouldShowInlineImage(type)) {
     return /*#__PURE__*/React.createElement(MediaInlineImageCard, {
-      mediaClient: getMediaClient(viewMediaClientConfigState),
+      mediaClient: mediaClient,
       identifier: identifier,
       alt: alt,
       width: width,
@@ -182,7 +156,7 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
     onClick: handleMediaInlineClick,
     shouldOpenMediaViewer: shouldOpenMediaViewer,
     shouldDisplayToolTip: shouldDisplayToolTip,
-    mediaClientConfig: viewMediaClientConfigState,
+    mediaClientConfig: mediaClient.mediaClientConfig,
     mediaViewerItems: Array.from(mediaIdentifierMap.values())
   }) : /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
     message: (intl || createIntl({

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

@@ -0,0 +1,38 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { MediaClientContext, getMediaClient } from '@atlaskit/media-client-react';
+import { useProvider } from '@atlaskit/editor-common/provider-factory';
+export var EditorMediaClientProvider = function EditorMediaClientProvider(_ref) {
+  var children = _ref.children,
+    ssr = _ref.ssr;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    mediaClientConfig = _useState2[0],
+    setMediaClientConfig = _useState2[1];
+  var mediaProvider = useProvider('mediaProvider');
+  var contextMediaClient = useContext(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 = useMemo(function () {
+    return mediaClientConfig ? 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.
+  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.createElement(MediaClientContext.Provider, {
+    value: mediaClient || contextMediaClient
+  }, children);
+};