@atlaskit/editor-plugin-media 24.0.10 → 24.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-media
 
+## 24.1.0
+
+### Minor Changes
+
+- [`051cd10867eae`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/051cd10867eae) -
+  Expose uploadStatus and mentionProviderStatus to distinguish pending providers from unavailable
+  capabilities. Under platform_editor_ssr_toolbar_optimistic, keep mention and media toolbar buttons
+  enabled while providers are pending, avoiding class changes on successful initialization while
+  preserving existing insertion restrictions.
+
+  When a view-only synchronous SSR media provider accompanies a pending full provider, keep uploads
+  pending until the full provider resolves instead of treating the SSR config as a permission
+  denial.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 24.0.10
 
 ### Patch Changes

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

@@ -28,6 +28,7 @@ var _view3 = require("@atlaskit/editor-prosemirror/view");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _mediaClient = require("@atlaskit/media-client");
 var _mediaCommon = require("@atlaskit/media-common");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _mediaNodeUpdater = require("../nodeviews/mediaNodeUpdater");
 var _helpers = _interopRequireWildcard(require("../pm-plugins/commands/helpers"));
 var helpers = _helpers;
@@ -40,7 +41,7 @@ var _actions = require("./actions");
 var _mediaTaskManager = require("./mediaTaskManager");
 var _pickerFacade = _interopRequireDefault(require("./picker-facade"));
 var _pluginKey = require("./plugin-key");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t3 in e) "default" !== _t3 && {}.hasOwnProperty.call(e, _t3) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t3)) && (i.get || i.set) ? o(f, _t3, i) : f[_t3] = e[_t3]); return f; })(e, t); }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t4 in e) "default" !== _t4 && {}.hasOwnProperty.call(e, _t4) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t4)) && (i.get || i.set) ? o(f, _t4, i) : f[_t4] = e[_t4]); return f; })(e, t); }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -79,6 +80,7 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
       _this$mediaOptions2;
     (0, _classCallCheck2.default)(this, MediaPluginStateImplementation);
     (0, _defineProperty2.default)(this, "allowsUploads", false);
+    (0, _defineProperty2.default)(this, "uploadStatus", 'pending');
     (0, _defineProperty2.default)(this, "ignoreLinks", false);
     (0, _defineProperty2.default)(this, "waitForMediaUpload", true);
     (0, _defineProperty2.default)(this, "allUploadsFinished", true);
@@ -658,7 +660,15 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
     var nodes = _state.schema.nodes;
     (0, _assert.default)(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.syncProvider) {
-      this.setMediaProvider(mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.syncProvider);
+      this.setMediaProvider(mediaOptions.syncProvider);
+      if (mediaOptions.provider && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_ssr_toolbar_optimistic')) {
+        // The synchronous SSR provider may only support viewing. Keep its view
+        // config, but wait for the full provider before deciding upload availability.
+        if (!this.allowsUploads) {
+          this.uploadStatus = 'pending';
+        }
+        this.setMediaProvider(mediaOptions.provider);
+      }
     } else if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.provider) {
       this.setMediaProvider(mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.provider);
     }
@@ -706,11 +716,11 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
     key: "setMediaProvider",
     value: function () {
       var _setMediaProvider = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaProvider) {
-        var viewMediaClientConfig, wrappedError, view, allowsUploads, _t;
+        var resolvedProvider, viewMediaClientConfig, wrappedError, view, allowsUploads, _t, _t2;
         return _regenerator.default.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              if (!(this.previousMediaProvider === mediaProvider)) {
+              if (!(this.previousMediaProvider === mediaProvider && !((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_ssr_toolbar_optimistic') && this.uploadStatus === 'pending' && !mediaProvider))) {
                 _context.next = 1;
                 break;
               }
@@ -723,7 +733,8 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
               }
               this.destroyPickers();
               this.allowsUploads = false;
-              if (!this.destroyed) {
+              this.uploadStatus = 'unavailable';
+              if (!this.destroyed && (this.view || !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_ssr_toolbar_optimistic'))) {
                 this.view.dispatch(this.view.state.tr.setMeta(_pluginKey.stateKey, {
                   allowsUploads: this.allowsUploads
                 }));
@@ -738,12 +749,21 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
               _context.next = 3;
               return mediaProvider;
             case 3:
-              this.mediaProvider = _context.sent;
+              _t = _context.sent;
               _context.next = 5;
               break;
             case 4:
-              this.mediaProvider = mediaProvider;
+              _t = mediaProvider;
             case 5:
+              resolvedProvider = _t;
+              if (!((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_ssr_toolbar_optimistic') && (this.destroyed || this.previousMediaProvider !== mediaProvider))) {
+                _context.next = 6;
+                break;
+              }
+              return _context.abrupt("return");
+            case 6:
+              this.mediaProvider = resolvedProvider;
+
               // Ignored via go/ees007
               // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
               // TODO [MS-2038]: remove once context api is removed
@@ -756,24 +776,32 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
                 }
               }
               (0, _assert.default)(this.mediaProvider.viewMediaClientConfig, "MediaProvider promise did not resolve to a valid instance of MediaProvider - ".concat(this.mediaProvider));
-              _context.next = 7;
+              _context.next = 9;
               break;
-            case 6:
-              _context.prev = 6;
-              _t = _context["catch"](2);
-              wrappedError = new Error("Media functionality disabled due to rejected provider: ".concat(_t instanceof Error ? _t.message : String(_t)));
+            case 7:
+              _context.prev = 7;
+              _t2 = _context["catch"](2);
+              if (!((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_ssr_toolbar_optimistic') && (this.destroyed || this.previousMediaProvider !== mediaProvider))) {
+                _context.next = 8;
+                break;
+              }
+              return _context.abrupt("return");
+            case 8:
+              wrappedError = new Error("Media functionality disabled due to rejected provider: ".concat(_t2 instanceof Error ? _t2.message : String(_t2)));
               this.errorReporter.captureException(wrappedError);
               this.destroyPickers();
               this.allowsUploads = false;
-              if (!this.destroyed) {
+              this.uploadStatus = 'unavailable';
+              if (!this.destroyed && (this.view || !(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_ssr_toolbar_optimistic'))) {
                 this.view.dispatch(this.view.state.tr.setMeta(_pluginKey.stateKey, {
                   allowsUploads: this.allowsUploads
                 }));
               }
               return _context.abrupt("return");
-            case 7:
+            case 9:
               this.mediaClientConfig = this.mediaProvider.viewMediaClientConfig;
               this.allowsUploads = !!this.mediaProvider.uploadMediaClientConfig;
+              this.uploadStatus = this.allowsUploads ? 'available' : 'unavailable';
               view = this.view, allowsUploads = this.allowsUploads; // make sure editable DOM node is mounted
               if (!this.destroyed && view && view.dom.parentNode) {
                 // make PM plugin aware of the state change to update UI during 'apply' hook
@@ -782,31 +810,31 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
                 }));
               }
               if (!this.allowsUploads) {
-                _context.next = 11;
+                _context.next = 13;
                 break;
               }
               this.uploadMediaClientConfig = this.mediaProvider.uploadMediaClientConfig;
               if (!(this.mediaProvider.uploadParams && this.uploadMediaClientConfig)) {
-                _context.next = 9;
+                _context.next = 11;
                 break;
               }
-              _context.next = 8;
-              return this.initPickers(this.mediaProvider.uploadParams, _pickerFacade.default);
-            case 8:
               _context.next = 10;
-              break;
-            case 9:
-              this.destroyPickers();
+              return this.initPickers(this.mediaProvider.uploadParams, _pickerFacade.default);
             case 10:
               _context.next = 12;
               break;
             case 11:
               this.destroyPickers();
             case 12:
+              _context.next = 14;
+              break;
+            case 13:
+              this.destroyPickers();
+            case 14:
             case "end":
               return _context.stop();
           }
-        }, _callee, this, [[2, 6]]);
+        }, _callee, this, [[2, 7]]);
       }));
       function setMediaProvider(_x) {
         return _setMediaProvider.apply(this, arguments);
@@ -906,6 +934,10 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
     key: "setView",
     value: function setView(view) {
       this.view = view;
+      if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_ssr_toolbar_optimistic') && this.uploadStatus === 'pending' && !this.previousMediaProvider) {
+        // No provider was configured for this client editor. SSR has no view and stays pending.
+        this.uploadStatus = 'unavailable';
+      }
     }
   }, {
     key: "destroy",
@@ -924,7 +956,7 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
     value: function () {
       var _initPickers = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(uploadParams, Picker) {
         var _this3 = this;
-        var errorReporter, pickers, pickerPromises, pickerFacadeConfig, customPicker, _t2;
+        var errorReporter, pickers, pickerPromises, pickerFacadeConfig, customPicker, _t3;
         return _regenerator.default.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -949,11 +981,11 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
               }
               customPicker = new Picker('customMediaPicker', pickerFacadeConfig, this.options.customMediaPicker).init();
               pickerPromises.push(customPicker);
-              _t2 = pickers;
+              _t3 = pickers;
               _context2.next = 2;
               return customPicker;
             case 2:
-              _t2.push.call(_t2, this.customPicker = _context2.sent);
+              _t3.push.call(_t3, this.customPicker = _context2.sent);
             case 3:
               pickers.forEach(function (picker) {
                 picker.onNewMedia(_this3.insertFile);

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

@@ -17,6 +17,7 @@ import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { isFileIdentifier } from '@atlaskit/media-client';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { createMediaNodeUpdater } from '../nodeviews/mediaNodeUpdater';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-namespace
@@ -56,6 +57,7 @@ export class MediaPluginStateImplementation {
   constructor(_state, options, mediaOptions, _dispatch, pluginInjectionApi) {
     var _this$mediaOptions2;
     _defineProperty(this, "allowsUploads", false);
+    _defineProperty(this, "uploadStatus", 'pending');
     _defineProperty(this, "ignoreLinks", false);
     _defineProperty(this, "waitForMediaUpload", true);
     _defineProperty(this, "allUploadsFinished", true);
@@ -649,7 +651,15 @@ export class MediaPluginStateImplementation {
     } = _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.syncProvider) {
-      this.setMediaProvider(mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.syncProvider);
+      this.setMediaProvider(mediaOptions.syncProvider);
+      if (mediaOptions.provider && isExperimentEnabled('platform_editor_ssr_toolbar_optimistic')) {
+        // The synchronous SSR provider may only support viewing. Keep its view
+        // config, but wait for the full provider before deciding upload availability.
+        if (!this.allowsUploads) {
+          this.uploadStatus = 'pending';
+        }
+        this.setMediaProvider(mediaOptions.provider);
+      }
     } else if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.provider) {
       this.setMediaProvider(mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.provider);
     }
@@ -687,14 +697,15 @@ export class MediaPluginStateImplementation {
   }
   async setMediaProvider(mediaProvider) {
     // Prevent someone trying to set the exact same provider twice for performance reasons
-    if (this.previousMediaProvider === mediaProvider) {
+    if (this.previousMediaProvider === mediaProvider && !(isExperimentEnabled('platform_editor_ssr_toolbar_optimistic') && this.uploadStatus === 'pending' && !mediaProvider)) {
       return;
     }
     this.previousMediaProvider = mediaProvider;
     if (!mediaProvider) {
       this.destroyPickers();
       this.allowsUploads = false;
-      if (!this.destroyed) {
+      this.uploadStatus = 'unavailable';
+      if (!this.destroyed && (this.view || !isExperimentEnabled('platform_editor_ssr_toolbar_optimistic'))) {
         this.view.dispatch(this.view.state.tr.setMeta(stateKey, {
           allowsUploads: this.allowsUploads
         }));
@@ -706,11 +717,11 @@ export class MediaPluginStateImplementation {
     // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
     // TODO disable (not destroy!) pickers until mediaProvider is resolved
     try {
-      if (mediaProvider instanceof Promise) {
-        this.mediaProvider = await mediaProvider;
-      } else {
-        this.mediaProvider = mediaProvider;
+      const resolvedProvider = mediaProvider instanceof Promise ? await mediaProvider : mediaProvider;
+      if (isExperimentEnabled('platform_editor_ssr_toolbar_optimistic') && (this.destroyed || this.previousMediaProvider !== mediaProvider)) {
+        return;
       }
+      this.mediaProvider = resolvedProvider;
 
       // Ignored via go/ees007
       // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
@@ -725,11 +736,15 @@ export class MediaPluginStateImplementation {
       }
       assert(this.mediaProvider.viewMediaClientConfig, `MediaProvider promise did not resolve to a valid instance of MediaProvider - ${this.mediaProvider}`);
     } catch (err) {
+      if (isExperimentEnabled('platform_editor_ssr_toolbar_optimistic') && (this.destroyed || this.previousMediaProvider !== mediaProvider)) {
+        return;
+      }
       const wrappedError = new Error(`Media functionality disabled due to rejected provider: ${err instanceof Error ? err.message : String(err)}`);
       this.errorReporter.captureException(wrappedError);
       this.destroyPickers();
       this.allowsUploads = false;
-      if (!this.destroyed) {
+      this.uploadStatus = 'unavailable';
+      if (!this.destroyed && (this.view || !isExperimentEnabled('platform_editor_ssr_toolbar_optimistic'))) {
         this.view.dispatch(this.view.state.tr.setMeta(stateKey, {
           allowsUploads: this.allowsUploads
         }));
@@ -738,6 +753,7 @@ export class MediaPluginStateImplementation {
     }
     this.mediaClientConfig = this.mediaProvider.viewMediaClientConfig;
     this.allowsUploads = !!this.mediaProvider.uploadMediaClientConfig;
+    this.uploadStatus = this.allowsUploads ? 'available' : 'unavailable';
     const {
       view,
       allowsUploads
@@ -841,6 +857,10 @@ export class MediaPluginStateImplementation {
   }
   setView(view) {
     this.view = view;
+    if (isExperimentEnabled('platform_editor_ssr_toolbar_optimistic') && this.uploadStatus === 'pending' && !this.previousMediaProvider) {
+      // No provider was configured for this client editor. SSR has no view and stays pending.
+      this.uploadStatus = 'unavailable';
+    }
   }
   destroy() {
     if (this.destroyed) {

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

@@ -26,6 +26,7 @@ import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { isFileIdentifier } from '@atlaskit/media-client';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { createMediaNodeUpdater } from '../nodeviews/mediaNodeUpdater';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-namespace
@@ -71,6 +72,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
       _this$mediaOptions2;
     _classCallCheck(this, MediaPluginStateImplementation);
     _defineProperty(this, "allowsUploads", false);
+    _defineProperty(this, "uploadStatus", 'pending');
     _defineProperty(this, "ignoreLinks", false);
     _defineProperty(this, "waitForMediaUpload", true);
     _defineProperty(this, "allUploadsFinished", true);
@@ -650,7 +652,15 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     var nodes = _state.schema.nodes;
     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.syncProvider) {
-      this.setMediaProvider(mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.syncProvider);
+      this.setMediaProvider(mediaOptions.syncProvider);
+      if (mediaOptions.provider && isExperimentEnabled('platform_editor_ssr_toolbar_optimistic')) {
+        // The synchronous SSR provider may only support viewing. Keep its view
+        // config, but wait for the full provider before deciding upload availability.
+        if (!this.allowsUploads) {
+          this.uploadStatus = 'pending';
+        }
+        this.setMediaProvider(mediaOptions.provider);
+      }
     } else if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.provider) {
       this.setMediaProvider(mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.provider);
     }
@@ -698,11 +708,11 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     key: "setMediaProvider",
     value: function () {
       var _setMediaProvider = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mediaProvider) {
-        var viewMediaClientConfig, wrappedError, view, allowsUploads, _t;
+        var resolvedProvider, viewMediaClientConfig, wrappedError, view, allowsUploads, _t, _t2;
         return _regeneratorRuntime.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              if (!(this.previousMediaProvider === mediaProvider)) {
+              if (!(this.previousMediaProvider === mediaProvider && !(isExperimentEnabled('platform_editor_ssr_toolbar_optimistic') && this.uploadStatus === 'pending' && !mediaProvider))) {
                 _context.next = 1;
                 break;
               }
@@ -715,7 +725,8 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
               }
               this.destroyPickers();
               this.allowsUploads = false;
-              if (!this.destroyed) {
+              this.uploadStatus = 'unavailable';
+              if (!this.destroyed && (this.view || !isExperimentEnabled('platform_editor_ssr_toolbar_optimistic'))) {
                 this.view.dispatch(this.view.state.tr.setMeta(stateKey, {
                   allowsUploads: this.allowsUploads
                 }));
@@ -730,12 +741,21 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
               _context.next = 3;
               return mediaProvider;
             case 3:
-              this.mediaProvider = _context.sent;
+              _t = _context.sent;
               _context.next = 5;
               break;
             case 4:
-              this.mediaProvider = mediaProvider;
+              _t = mediaProvider;
             case 5:
+              resolvedProvider = _t;
+              if (!(isExperimentEnabled('platform_editor_ssr_toolbar_optimistic') && (this.destroyed || this.previousMediaProvider !== mediaProvider))) {
+                _context.next = 6;
+                break;
+              }
+              return _context.abrupt("return");
+            case 6:
+              this.mediaProvider = resolvedProvider;
+
               // Ignored via go/ees007
               // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
               // TODO [MS-2038]: remove once context api is removed
@@ -748,24 +768,32 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
                 }
               }
               assert(this.mediaProvider.viewMediaClientConfig, "MediaProvider promise did not resolve to a valid instance of MediaProvider - ".concat(this.mediaProvider));
-              _context.next = 7;
+              _context.next = 9;
               break;
-            case 6:
-              _context.prev = 6;
-              _t = _context["catch"](2);
-              wrappedError = new Error("Media functionality disabled due to rejected provider: ".concat(_t instanceof Error ? _t.message : String(_t)));
+            case 7:
+              _context.prev = 7;
+              _t2 = _context["catch"](2);
+              if (!(isExperimentEnabled('platform_editor_ssr_toolbar_optimistic') && (this.destroyed || this.previousMediaProvider !== mediaProvider))) {
+                _context.next = 8;
+                break;
+              }
+              return _context.abrupt("return");
+            case 8:
+              wrappedError = new Error("Media functionality disabled due to rejected provider: ".concat(_t2 instanceof Error ? _t2.message : String(_t2)));
               this.errorReporter.captureException(wrappedError);
               this.destroyPickers();
               this.allowsUploads = false;
-              if (!this.destroyed) {
+              this.uploadStatus = 'unavailable';
+              if (!this.destroyed && (this.view || !isExperimentEnabled('platform_editor_ssr_toolbar_optimistic'))) {
                 this.view.dispatch(this.view.state.tr.setMeta(stateKey, {
                   allowsUploads: this.allowsUploads
                 }));
               }
               return _context.abrupt("return");
-            case 7:
+            case 9:
               this.mediaClientConfig = this.mediaProvider.viewMediaClientConfig;
               this.allowsUploads = !!this.mediaProvider.uploadMediaClientConfig;
+              this.uploadStatus = this.allowsUploads ? 'available' : 'unavailable';
               view = this.view, allowsUploads = this.allowsUploads; // make sure editable DOM node is mounted
               if (!this.destroyed && view && view.dom.parentNode) {
                 // make PM plugin aware of the state change to update UI during 'apply' hook
@@ -774,31 +802,31 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
                 }));
               }
               if (!this.allowsUploads) {
-                _context.next = 11;
+                _context.next = 13;
                 break;
               }
               this.uploadMediaClientConfig = this.mediaProvider.uploadMediaClientConfig;
               if (!(this.mediaProvider.uploadParams && this.uploadMediaClientConfig)) {
-                _context.next = 9;
+                _context.next = 11;
                 break;
               }
-              _context.next = 8;
-              return this.initPickers(this.mediaProvider.uploadParams, PickerFacade);
-            case 8:
               _context.next = 10;
-              break;
-            case 9:
-              this.destroyPickers();
+              return this.initPickers(this.mediaProvider.uploadParams, PickerFacade);
             case 10:
               _context.next = 12;
               break;
             case 11:
               this.destroyPickers();
             case 12:
+              _context.next = 14;
+              break;
+            case 13:
+              this.destroyPickers();
+            case 14:
             case "end":
               return _context.stop();
           }
-        }, _callee, this, [[2, 6]]);
+        }, _callee, this, [[2, 7]]);
       }));
       function setMediaProvider(_x) {
         return _setMediaProvider.apply(this, arguments);
@@ -898,6 +926,10 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     key: "setView",
     value: function setView(view) {
       this.view = view;
+      if (isExperimentEnabled('platform_editor_ssr_toolbar_optimistic') && this.uploadStatus === 'pending' && !this.previousMediaProvider) {
+        // No provider was configured for this client editor. SSR has no view and stays pending.
+        this.uploadStatus = 'unavailable';
+      }
     }
   }, {
     key: "destroy",
@@ -916,7 +948,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     value: function () {
       var _initPickers = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(uploadParams, Picker) {
         var _this3 = this;
-        var errorReporter, pickers, pickerPromises, pickerFacadeConfig, customPicker, _t2;
+        var errorReporter, pickers, pickerPromises, pickerFacadeConfig, customPicker, _t3;
         return _regeneratorRuntime.wrap(function (_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -941,11 +973,11 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
               }
               customPicker = new Picker('customMediaPicker', pickerFacadeConfig, this.options.customMediaPicker).init();
               pickerPromises.push(customPicker);
-              _t2 = pickers;
+              _t3 = pickers;
               _context2.next = 2;
               return customPicker;
             case 2:
-              _t2.push.call(_t2, this.customPicker = _context2.sent);
+              _t3.push.call(_t3, this.customPicker = _context2.sent);
             case 3:
               pickers.forEach(function (picker) {
                 picker.onNewMedia(_this3.insertFile);

package/dist/types/pm-plugins/main.d.ts

@@ -21,6 +21,7 @@ export declare const MEDIA_PLUGIN_IS_RESIZING_KEY = "mediaSinglePlugin.isResizin
 export declare const MEDIA_PLUGIN_RESIZING_WIDTH_KEY = "mediaSinglePlugin.resizing-width";
 export declare class MediaPluginStateImplementation implements MediaPluginState {
     allowsUploads: boolean;
+    uploadStatus: 'pending' | 'available' | 'unavailable';
     mediaClientConfig?: MediaClientConfig;
     uploadMediaClientConfig?: MediaClientConfig;
     ignoreLinks: boolean;

package/dist/types/pm-plugins/types.d.ts

@@ -76,6 +76,8 @@ export interface MediaPluginState {
     updateElement: () => void;
     updateMediaSingleNodeAttrs: (id: string, attrs: object) => undefined | boolean;
     uploadMediaClientConfig?: MediaClientConfig;
+    /** Initial upload capability resolution; does not grant permission to upload. */
+    uploadStatus?: 'pending' | 'available' | 'unavailable';
     videoControlsWrapperRef?: HTMLElement;
     waitForMediaUpload: boolean;
     waitForPendingTasks: (timeout?: number, lastTask?: Promise<MediaState | null>) => Promise<MediaState | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "24.0.10",
+	"version": "24.1.0",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",