@atlaskit/editor-plugin-media 1.24.4 → 1.25.0

package/dist/cjs/ui/MediaPicker/PickerFacadeProvider.js

@@ -1,12 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = PickerFacadeProvider;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -14,11 +14,15 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _utils = require("@atlaskit/editor-common/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pickerFacade = _interopRequireDefault(require("../../picker-facade"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var dummyMediaPickerObject = {
@@ -28,55 +32,154 @@ var dummyMediaPickerObject = {
   destroy: function destroy() {},
   setUploadParams: function setUploadParams() {}
 };
+function PickerFacadeProviderNew(_ref) {
+  var mediaState = _ref.mediaState,
+    analyticsName = _ref.analyticsName,
+    children = _ref.children;
+  var _useState = (0, _react.useState)({
+      pickerFacadeInstance: undefined,
+      config: undefined,
+      mediaClientConfig: undefined
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var mediaProvider = (0, _react.useMemo)(function () {
+    return mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
+  }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
+  var handleMediaProvider = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_name, provider) {
+      var mediaProvider, resolvedMediaClientConfig, pickerFacadeConfig, pickerFacadeInstance, config;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return provider;
+          case 2:
+            mediaProvider = _context.sent;
+            if (!(!mediaProvider || !mediaProvider.uploadParams)) {
+              _context.next = 5;
+              break;
+            }
+            return _context.abrupt("return");
+          case 5:
+            _context.next = 7;
+            return mediaProvider.uploadMediaClientConfig;
+          case 7:
+            _context.t0 = _context.sent;
+            if (_context.t0) {
+              _context.next = 12;
+              break;
+            }
+            _context.next = 11;
+            return mediaProvider.viewMediaClientConfig;
+          case 11:
+            _context.t0 = _context.sent;
+          case 12:
+            resolvedMediaClientConfig = _context.t0;
+            if (resolvedMediaClientConfig) {
+              _context.next = 15;
+              break;
+            }
+            return _context.abrupt("return");
+          case 15:
+            pickerFacadeConfig = {
+              mediaClientConfig: resolvedMediaClientConfig,
+              errorReporter: mediaState.options.errorReporter || new _utils.ErrorReporter(),
+              featureFlags: mediaState.mediaOptions && mediaState.mediaOptions.featureFlags
+            };
+            _context.next = 18;
+            return new _pickerFacade.default('customMediaPicker', pickerFacadeConfig, dummyMediaPickerObject, analyticsName).init();
+          case 18:
+            pickerFacadeInstance = _context.sent;
+            pickerFacadeInstance.onNewMedia(mediaState.insertFile);
+            pickerFacadeInstance.setUploadParams(mediaProvider.uploadParams);
+            config = {
+              uploadParams: mediaProvider.uploadParams
+            };
+            (0, _reactDom.flushSync)(function () {
+              setState({
+                pickerFacadeInstance: pickerFacadeInstance,
+                config: config,
+                mediaClientConfig: resolvedMediaClientConfig
+              });
+            });
+          case 23:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [analyticsName, mediaState.insertFile, mediaState.mediaOptions, mediaState.options.errorReporter]);
+  (0, _react.useEffect)(function () {
+    if (mediaProvider) {
+      handleMediaProvider('mediaProvider', Promise.resolve(mediaProvider));
+    }
+  }, [mediaProvider, handleMediaProvider]);
+  var mediaClientConfig = state.mediaClientConfig,
+    config = state.config,
+    pickerFacadeInstance = state.pickerFacadeInstance;
+  if (!mediaClientConfig || !config || !pickerFacadeInstance) {
+    return null;
+  }
+  return children({
+    mediaClientConfig: mediaClientConfig,
+    config: config,
+    pickerFacadeInstance: pickerFacadeInstance
+  });
+}
 
-//eslint-disable-next-line @repo/internal/react/no-class-components
-var PickerFacadeProvider = exports.default = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(PickerFacadeProvider, _React$Component);
-  var _super = _createSuper(PickerFacadeProvider);
-  function PickerFacadeProvider() {
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var PickerFacadeProviderOld = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(PickerFacadeProviderOld, _React$Component);
+  var _super = _createSuper(PickerFacadeProviderOld);
+  function PickerFacadeProviderOld() {
     var _this;
-    (0, _classCallCheck2.default)(this, PickerFacadeProvider);
+    (0, _classCallCheck2.default)(this, PickerFacadeProviderOld);
     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), "handleMediaProvider", /*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_name, provider) {
+      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(_name, provider) {
         var _this$props, mediaState, analyticsName, mediaProvider, resolvedMediaClientConfig, pickerFacadeConfig, pickerFacadeInstance, config;
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
               _this$props = _this.props, mediaState = _this$props.mediaState, analyticsName = _this$props.analyticsName;
-              _context.next = 3;
+              _context2.next = 3;
               return provider;
             case 3:
-              mediaProvider = _context.sent;
+              mediaProvider = _context2.sent;
               if (!(!mediaProvider || !mediaProvider.uploadParams)) {
-                _context.next = 6;
+                _context2.next = 6;
                 break;
               }
-              return _context.abrupt("return");
+              return _context2.abrupt("return");
             case 6:
-              _context.next = 8;
+              _context2.next = 8;
               return mediaProvider.uploadMediaClientConfig;
             case 8:
-              _context.t0 = _context.sent;
-              if (_context.t0) {
-                _context.next = 13;
+              _context2.t0 = _context2.sent;
+              if (_context2.t0) {
+                _context2.next = 13;
                 break;
               }
-              _context.next = 12;
+              _context2.next = 12;
               return mediaProvider.viewMediaClientConfig;
             case 12:
-              _context.t0 = _context.sent;
+              _context2.t0 = _context2.sent;
             case 13:
-              resolvedMediaClientConfig = _context.t0;
+              resolvedMediaClientConfig = _context2.t0;
               if (resolvedMediaClientConfig) {
-                _context.next = 16;
+                _context2.next = 16;
                 break;
               }
-              return _context.abrupt("return");
+              return _context2.abrupt("return");
             case 16:
               pickerFacadeConfig = {
                 mediaClientConfig: resolvedMediaClientConfig,
@@ -91,10 +194,10 @@ var PickerFacadeProvider = exports.default = /*#__PURE__*/function (_React$Compo
                * But we don't want this to do anything since it's all part of the new React component (`Clipboard` component in this case).
                * Eventually PickerFacade will be removed and replaced with a new abstraction explained here https://product-fabric.atlassian.net/browse/MS-1937
                */
-              _context.next = 19;
+              _context2.next = 19;
               return new _pickerFacade.default('customMediaPicker', pickerFacadeConfig, dummyMediaPickerObject, analyticsName).init();
             case 19:
-              pickerFacadeInstance = _context.sent;
+              pickerFacadeInstance = _context2.sent;
               /**
                * Based on the `initPickers` method in `MediaPluginState` we need these 2 `onNewMedia` subscriptions.
                * First one in order to trigger the entire process of uploading a file for when `onPreviewUpdate` is called
@@ -114,17 +217,17 @@ var PickerFacadeProvider = exports.default = /*#__PURE__*/function (_React$Compo
               });
             case 24:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
-        }, _callee);
+        }, _callee2);
       }));
-      return function (_x, _x2) {
-        return _ref.apply(this, arguments);
+      return function (_x3, _x4) {
+        return _ref3.apply(this, arguments);
       };
     }());
     return _this;
   }
-  (0, _createClass2.default)(PickerFacadeProvider, [{
+  (0, _createClass2.default)(PickerFacadeProviderOld, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var mediaProvider = this.props.mediaState.mediaProvider;
@@ -156,5 +259,8 @@ var PickerFacadeProvider = exports.default = /*#__PURE__*/function (_React$Compo
       });
     }
   }]);
-  return PickerFacadeProvider;
-}(_react.default.Component);
+  return PickerFacadeProviderOld;
+}(_react.default.Component);
+function PickerFacadeProvider(props) {
+  return (0, _platformFeatureFlags.fg)('platform_editor_media_provider_from_plugin_config') ? /*#__PURE__*/_react.default.createElement(PickerFacadeProviderNew, props) : /*#__PURE__*/_react.default.createElement(PickerFacadeProviderOld, props);
+}

package/dist/cjs/ui/MediaViewer/MediaViewerContainer.js

@@ -15,7 +15,10 @@ var _isType = require("../../utils/is-type");
 var _PortalWrapper = require("./PortalWrapper");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

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

@@ -19,7 +19,10 @@ var _constants = require("./constants");
 var _styles = require("./styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/ui/ResizableMediaSingle/ResizableMediaMigrationNotification.js

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.ResizableMediaMigrationNotification = void 0;
 var _react = require("@emotion/react");
 var _styles = require("./styles");
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var ResizableMediaMigrationNotification = exports.ResizableMediaMigrationNotification = function ResizableMediaMigrationNotification() {

package/dist/cjs/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -34,7 +34,10 @@ var _checkMediaType = require("../../utils/check-media-type");
 var _ResizableMediaMigrationNotification = require("./ResizableMediaMigrationNotification");
 var _styled = require("./styled");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var resizerNextTestId = exports.resizerNextTestId = 'mediaSingle.resizerNext.testid';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {

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

@@ -25,7 +25,10 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _checkMediaType = require("../../utils/check-media-type");
 var _styled = require("./styled");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var ResizableMediaSingle = exports.default = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ResizableMediaSingle, _React$Component);

package/dist/es2019/hooks/useMediaProvider.js

@@ -0,0 +1,11 @@
+import { useMemo } from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+export const useMediaProvider = pluginInjectionApi => {
+  const {
+    mediaState
+  } = useSharedPluginState(pluginInjectionApi, ['media']);
+  const provider = useMemo(() => {
+    return mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider;
+  }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
+  return provider;
+};

package/dist/es2019/nodeviews/mediaGroup.js

@@ -9,6 +9,8 @@ import { isNodeSelectedOrInRange, SelectedState, setNodeSelection } from '@atlas
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { Filmstrip } from '@atlaskit/media-filmstrip';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { useMediaProvider } from '../hooks/useMediaProvider';
 import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 const isMediaGroupSelectedFromProps = props => {
@@ -259,9 +261,11 @@ function MediaGroupNodeViewInternal({
     editorDisabledState: editorDisabledPlugin,
     editorViewModeState: editorViewModePlugin
   } = useSharedPluginState(pluginInjectionApi, ['editorDisabled', 'editorViewMode']);
+  const mediaProvider = useMediaProvider(pluginInjectionApi);
   return renderFn({
     editorDisabledPlugin,
-    editorViewModePlugin
+    editorViewModePlugin,
+    mediaProvider
   });
 }
 class MediaGroupNodeView extends ReactNodeView {
@@ -272,7 +276,10 @@ class MediaGroupNodeView extends ReactNodeView {
       pluginInjectionApi
     } = props;
     const getPos = this.getPos;
-    return /*#__PURE__*/React.createElement(WithProviders, {
+    return /*#__PURE__*/React.createElement(WithProviders
+    // Cleanup: `platform_editor_media_provider_from_plugin_config`
+    // Remove `mediaProvider`
+    , {
       providers: ['mediaProvider', 'contextIdentifierProvider'],
       providerFactory: providerFactory,
       renderNode: ({
@@ -281,8 +288,30 @@ class MediaGroupNodeView extends ReactNodeView {
       }) => {
         const renderFn = ({
           editorDisabledPlugin,
-          editorViewModePlugin
+          editorViewModePlugin,
+          mediaProvider: mediaProviderFromState
         }) => {
+          if (fg('platform_editor_media_provider_from_plugin_config')) {
+            const newMediaProvider = mediaProviderFromState ? Promise.resolve(mediaProviderFromState) : undefined;
+            if (!newMediaProvider) {
+              return null;
+            }
+            return /*#__PURE__*/React.createElement(IntlMediaGroup, {
+              node: this.node,
+              getPos: getPos,
+              view: this.view,
+              forwardRef: forwardRef,
+              disabled: (editorDisabledPlugin || {}).editorDisabled,
+              allowLazyLoading: mediaOptions.allowLazyLoading,
+              mediaProvider: newMediaProvider,
+              contextIdentifierProvider: contextIdentifierProvider,
+              isCopyPasteEnabled: mediaOptions.isCopyPasteEnabled,
+              anchorPos: this.view.state.selection.$anchor.pos,
+              headPos: this.view.state.selection.$head.pos,
+              mediaOptions: mediaOptions,
+              editorViewMode: (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view'
+            });
+          }
           if (!mediaProvider) {
             return null;
           }

package/dist/es2019/nodeviews/mediaInline.js

@@ -1,5 +1,8 @@
-/** @jsx jsx */
-import { useEffect, useState } from 'react';
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useEffect, useMemo, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
@@ -10,6 +13,7 @@ import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { getMediaClient } from '@atlaskit/media-client-react';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MediaViewerContainer } from '../ui/MediaViewer/MediaViewerContainer';
 import { isImage } from '../utils/is-type';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
@@ -159,7 +163,24 @@ const MediaInlineSharedState = ({
     editorViewModeState,
     mediaState
   } = useSharedPluginState(api, ['editorViewMode', 'media']);
-  if (!mediaState) {
+  const newMediaProvider = useMemo(() => mediaState !== null && mediaState !== void 0 && mediaState.mediaProvider ? Promise.resolve(mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider) : undefined, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
+  if (fg('platform_editor_media_provider_from_plugin_config')) {
+    if (!mediaState || !newMediaProvider) {
+      return null;
+    }
+    return jsx(MediaInline, {
+      identifier: identifier,
+      mediaProvider: newMediaProvider,
+      mediaPluginState: mediaState,
+      node: node,
+      isSelected: isSelected,
+      view: view,
+      getPos: getPos,
+      contextIdentifierProvider: contextIdentifierProvider,
+      editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view'
+    });
+  }
+  if (!mediaState || !mediaProvider) {
     return null;
   }
   return jsx(MediaInline, {
@@ -198,14 +219,17 @@ export class MediaInlineNodeView extends SelectionBasedNodeView {
       view
     } = this;
     const getPos = this.getPos;
-    return jsx(WithProviders, {
+    return jsx(WithProviders
+    // Cleanup: `platform_editor_media_provider_from_plugin_config`
+    // Remove `mediaProvider`
+    , {
       providers: ['mediaProvider', 'contextIdentifierProvider'],
       providerFactory: providerFactory,
       renderNode: ({
         mediaProvider,
         contextIdentifierProvider
       }) => {
-        if (!mediaProvider) {
+        if (!mediaProvider && !fg('platform_editor_media_provider_from_plugin_config')) {
           return null;
         }
         return jsx(MediaInlineSharedState, {

package/dist/es2019/nodeviews/mediaNodeView/index.js

@@ -5,6 +5,7 @@ import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-comm
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { updateCurrentMediaNodeAttrs } from '../../commands/helpers';
 import { isMediaBlobUrlFromAttrs } from '../../utils/media-common';
 import MediaNode from './media';
@@ -13,10 +14,12 @@ const MediaNodeWithProviders = ({
   innerComponent
 }) => {
   const {
-    widthState
-  } = useSharedPluginState(pluginInjectionApi, ['width']);
+    widthState,
+    mediaState
+  } = useSharedPluginState(pluginInjectionApi, ['width', 'media']);
   return innerComponent({
-    width: widthState
+    width: widthState,
+    newMediaProvider: mediaState !== null && mediaState !== void 0 && mediaState.mediaProvider ? Promise.resolve(mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider) : undefined
   });
 };
 function isMediaDecorationSpec(decoration) {
@@ -46,7 +49,8 @@ class MediaNodeView extends SelectionBasedNodeView {
     });
     _defineProperty(this, "renderMediaNodeWithState", (mediaProvider, contextIdentifierProvider) => {
       return ({
-        width: editorWidth
+        width: editorWidth,
+        newMediaProvider
       }) => {
         const getPos = this.getPos;
         const {
@@ -89,7 +93,7 @@ class MediaNodeView extends SelectionBasedNodeView {
           originalDimensions: originalDimensions,
           maxDimensions: maxDimensions,
           url: url,
-          mediaProvider: mediaProvider,
+          mediaProvider: fg('platform_editor_media_provider_from_plugin_config') ? newMediaProvider : mediaProvider,
           contextIdentifierProvider: contextIdentifierProvider,
           mediaOptions: mediaOptions,
           onExternalImageLoaded: this.onExternalImageLoaded
@@ -153,7 +157,10 @@ class MediaNodeView extends SelectionBasedNodeView {
     const {
       providerFactory
     } = this.reactComponentProps;
-    return /*#__PURE__*/React.createElement(WithProviders, {
+    return /*#__PURE__*/React.createElement(WithProviders
+    // Cleanup: `platform_editor_media_provider_from_plugin_config`
+    // Remove `mediaProvider`
+    , {
       providers: ['mediaProvider', 'contextIdentifierProvider'],
       providerFactory: providerFactory,
       renderNode: this.renderMediaNodeWithProviders

package/dist/es2019/nodeviews/mediaSingle.js

@@ -1,8 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
-import React, { Component, Fragment } from 'react';
+import React, { Component, Fragment, useMemo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -423,12 +426,13 @@ const MediaSingleNodeWrapper = ({
     editorDisabledState,
     editorViewModeState
   } = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']);
+  const newMediaProvider = useMemo(() => mediaState !== null && mediaState !== void 0 && mediaState.mediaProvider ? Promise.resolve(mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider) : undefined, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
   return jsx(MediaSingleNode, {
     width: widthState.width,
     lineLength: widthState.lineLength,
     node: node,
     getPos: getPos,
-    mediaProvider: mediaProvider,
+    mediaProvider: fg('platform_editor_media_provider_from_plugin_config') ? newMediaProvider : mediaProvider,
     contextIdentifierProvider: contextIdentifierProvider,
     mediaOptions: mediaOptions,
     view: view,
@@ -546,7 +550,10 @@ class MediaSingleNodeView extends ReactNodeView {
 
     // getPos is a boolean for marks, since this is a node we know it must be a function
     const getPos = this.getPos;
-    return jsx(WithProviders, {
+    return jsx(WithProviders
+    // Cleanup: `platform_editor_media_provider_from_plugin_config`
+    // Remove `mediaProvider`
+    , {
       providers: ['mediaProvider', 'contextIdentifierProvider'],
       providerFactory: providerFactory,
       renderNode: ({

package/dist/es2019/nodeviews/styles.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/es2019/plugin.js

@@ -59,6 +59,14 @@ export const mediaPlugin = ({
       insertMediaAsMediaSingle: (view, node, inputMethod) => {
         var _api$analytics;
         return insertMediaAsMediaSingle(view, node, inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+      },
+      setProvider: provider => {
+        var _api$core$actions$exe;
+        return (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(({
+          tr
+        }) => tr.setMeta(stateKey, {
+          mediaProvider: provider
+        }))) !== null && _api$core$actions$exe !== void 0 ? _api$core$actions$exe : false;
       }
     },
     nodes() {

package/dist/es2019/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -1,5 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 
 import React from 'react';
 

package/dist/es2019/pm-plugins/main.js

@@ -445,8 +445,10 @@ export class MediaPluginStateImplementation {
       nodes
     } = _state.schema;
     assert(nodes.media && (nodes.mediaGroup || nodes.mediaSingle), 'Editor: unable to init media plugin - media or mediaGroup/mediaSingle node absent in schema');
-    if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.provider && fg('platform_editor_media_provider_from_plugin_config')) {
-      this.setMediaProvider(mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.provider);
+    if (fg('platform_editor_media_provider_from_plugin_config')) {
+      if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.provider) {
+        this.setMediaProvider(mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.provider);
+      }
     } else {
       options.providerFactory.subscribe('mediaProvider', (_name, provider) => this.setMediaProvider(provider));
     }
@@ -617,8 +619,10 @@ export const createPlugin = (_schema, options, reactContext, getIntl, pluginInje
         return new MediaPluginStateImplementation(state, options, mediaOptions, newInsertionBehaviour, dispatch, pluginInjectionApi);
       },
       apply(tr, pluginState) {
+        var _tr$getMeta;
         const isResizing = tr.getMeta(MEDIA_PLUGIN_IS_RESIZING_KEY);
         const resizingWidth = tr.getMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY);
+        const mediaProvider = (_tr$getMeta = tr.getMeta(stateKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.mediaProvider;
         // Yes, I agree with you; this approach, using the clone() fuction, below is horrifying.
         // However, we needed to implement this workaround to solve the singleton Media PluginState.
         // The entire PluginInjectionAPI relies on the following axiom: "A PluginState that reflects a new EditorState.". We can not have the mutable singleton instance for all EditorState.
@@ -628,6 +632,9 @@ export const createPlugin = (_schema, options, reactContext, getIntl, pluginInje
           pluginState.setIsResizing(isResizing);
           nextPluginState = nextPluginState.clone();
         }
+        if (mediaProvider && fg('platform_editor_media_provider_from_plugin_config')) {
+          pluginState.setMediaProvider(mediaProvider);
+        }
         if (resizingWidth) {
           pluginState.setResizingWidth(resizingWidth);
           nextPluginState = nextPluginState.clone();

package/dist/es2019/toolbar/layout-group.js

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { ButtonGroup } from '@atlaskit/button';