@atlaskit/editor-plugin-media 1.28.0 → 1.28.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-media
 
+## 1.28.2
+
+### Patch Changes
+
+- [#128977](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128977)
+  [`bfcf3686fbc97`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bfcf3686fbc97) -
+  Improvement to setting media provider performance to only set it once.
+
+## 1.28.1
+
+### Patch Changes
+
+- [#128613](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128613)
+  [`9ca6a3874ec07`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9ca6a3874ec07) -
+  [ED-24516] Fix prepareDiff to avoid toDOM usage
+- Updated dependencies
+
 ## 1.28.0
 
 ### Minor Changes

package/dist/cjs/plugin.js

@@ -59,6 +59,7 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
   var _ref2$config = _ref2.config,
     options = _ref2$config === void 0 ? {} : _ref2$config,
     api = _ref2.api;
+  var previousMediaProvider;
   return {
     name: 'media',
     getSharedState: function getSharedState(editorState) {
@@ -74,6 +75,11 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref2) {
       },
       setProvider: function setProvider(provider) {
         var _api$core$actions$exe;
+        // Prevent someone trying to set the exact same provider twice for performance reasons
+        if (previousMediaProvider === provider) {
+          return false;
+        }
+        previousMediaProvider = provider;
         return (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(function (_ref3) {
           var tr = _ref3.tr;
           return tr.setMeta(_main.stateKey, {

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

@@ -98,102 +98,12 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
     (0, _defineProperty2.default)(this, "taskManager", new _mediaTaskManager.MediaTaskManager());
     (0, _defineProperty2.default)(this, "pickers", []);
     (0, _defineProperty2.default)(this, "pickerPromises", []);
-    (0, _defineProperty2.default)(this, "setMediaProvider", /*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaProvider) {
-        var viewMediaClientConfig, wrappedError, view, allowsUploads;
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (mediaProvider) {
-                _context.next = 5;
-                break;
-              }
-              _this.destroyPickers();
-              _this.allowsUploads = false;
-              if (!_this.destroyed) {
-                _this.view.dispatch(_this.view.state.tr.setMeta(_pluginKey.stateKey, {
-                  allowsUploads: _this.allowsUploads
-                }));
-              }
-              return _context.abrupt("return");
-            case 5:
-              _context.prev = 5;
-              _context.next = 8;
-              return mediaProvider;
-            case 8:
-              _this.mediaProvider = _context.sent;
-              // TODO [MS-2038]: remove once context api is removed
-              // We want to re assign the view and upload configs if they are missing for backwards compatibility
-              // as currently integrators can pass context || mediaClientConfig
-              if (!_this.mediaProvider.viewMediaClientConfig) {
-                viewMediaClientConfig = _this.mediaProvider.viewMediaClientConfig;
-                if (viewMediaClientConfig) {
-                  _this.mediaProvider.viewMediaClientConfig = viewMediaClientConfig;
-                }
-              }
-              (0, _assert.default)(_this.mediaProvider.viewMediaClientConfig, "MediaProvider promise did not resolve to a valid instance of MediaProvider - ".concat(_this.mediaProvider));
-              _context.next = 21;
-              break;
-            case 13:
-              _context.prev = 13;
-              _context.t0 = _context["catch"](5);
-              wrappedError = new Error("Media functionality disabled due to rejected provider: ".concat(_context.t0 instanceof Error ? _context.t0.message : String(_context.t0)));
-              _this.errorReporter.captureException(wrappedError);
-              _this.destroyPickers();
-              _this.allowsUploads = false;
-              if (!_this.destroyed) {
-                _this.view.dispatch(_this.view.state.tr.setMeta(_pluginKey.stateKey, {
-                  allowsUploads: _this.allowsUploads
-                }));
-              }
-              return _context.abrupt("return");
-            case 21:
-              _this.mediaClientConfig = _this.mediaProvider.viewMediaClientConfig;
-              _this.allowsUploads = !!_this.mediaProvider.uploadMediaClientConfig;
-              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
-                view.dispatch(view.state.tr.setMeta(_pluginKey.stateKey, {
-                  allowsUploads: allowsUploads
-                }));
-              }
-              if (!_this.allowsUploads) {
-                _context.next = 35;
-                break;
-              }
-              _this.uploadMediaClientConfig = _this.mediaProvider.uploadMediaClientConfig;
-              if (!(_this.mediaProvider.uploadParams && _this.uploadMediaClientConfig)) {
-                _context.next = 32;
-                break;
-              }
-              _context.next = 30;
-              return _this.initPickers(_this.mediaProvider.uploadParams, _pickerFacade.default);
-            case 30:
-              _context.next = 33;
-              break;
-            case 32:
-              _this.destroyPickers();
-            case 33:
-              _context.next = 36;
-              break;
-            case 35:
-              _this.destroyPickers();
-            case 36:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, null, [[5, 13]]);
-      }));
-      return function (_x) {
-        return _ref.apply(this, arguments);
-      };
-    }());
     (0, _defineProperty2.default)(this, "getMediaOptions", function () {
       return _this.options;
     });
-    (0, _defineProperty2.default)(this, "isMediaSchemaNode", function (_ref2) {
+    (0, _defineProperty2.default)(this, "isMediaSchemaNode", function (_ref) {
       var _this$mediaOptions;
-      var type = _ref2.type;
+      var type = _ref.type;
       var _this$view$state$sche = _this.view.state.schema.nodes,
         mediaInline = _this$view$state$sche.mediaInline,
         mediaSingle = _this$view$state$sche.mediaSingle,
@@ -368,8 +278,8 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
      */
     (0, _defineProperty2.default)(this, "handleMediaNodeUnmount", function (oldNode) {
       _this.trackMediaNodeRemoval(oldNode);
-      _this.mediaNodes = _this.mediaNodes.filter(function (_ref3) {
-        var node = _ref3.node;
+      _this.mediaNodes = _this.mediaNodes.filter(function (_ref2) {
+        var node = _ref2.node;
         return oldNode !== node;
       });
     });
@@ -540,6 +450,106 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
         return subscribedFn !== fn;
       });
     }
+  }, {
+    key: "setMediaProvider",
+    value: function () {
+      var _setMediaProvider = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaProvider) {
+        var viewMediaClientConfig, wrappedError, view, allowsUploads;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!(this.previousMediaProvider === mediaProvider)) {
+                _context.next = 2;
+                break;
+              }
+              return _context.abrupt("return");
+            case 2:
+              this.previousMediaProvider = mediaProvider;
+              if (mediaProvider) {
+                _context.next = 8;
+                break;
+              }
+              this.destroyPickers();
+              this.allowsUploads = false;
+              if (!this.destroyed) {
+                this.view.dispatch(this.view.state.tr.setMeta(_pluginKey.stateKey, {
+                  allowsUploads: this.allowsUploads
+                }));
+              }
+              return _context.abrupt("return");
+            case 8:
+              _context.prev = 8;
+              _context.next = 11;
+              return mediaProvider;
+            case 11:
+              this.mediaProvider = _context.sent;
+              // TODO [MS-2038]: remove once context api is removed
+              // We want to re assign the view and upload configs if they are missing for backwards compatibility
+              // as currently integrators can pass context || mediaClientConfig
+              if (!this.mediaProvider.viewMediaClientConfig) {
+                viewMediaClientConfig = this.mediaProvider.viewMediaClientConfig;
+                if (viewMediaClientConfig) {
+                  this.mediaProvider.viewMediaClientConfig = viewMediaClientConfig;
+                }
+              }
+              (0, _assert.default)(this.mediaProvider.viewMediaClientConfig, "MediaProvider promise did not resolve to a valid instance of MediaProvider - ".concat(this.mediaProvider));
+              _context.next = 24;
+              break;
+            case 16:
+              _context.prev = 16;
+              _context.t0 = _context["catch"](8);
+              wrappedError = new Error("Media functionality disabled due to rejected provider: ".concat(_context.t0 instanceof Error ? _context.t0.message : String(_context.t0)));
+              this.errorReporter.captureException(wrappedError);
+              this.destroyPickers();
+              this.allowsUploads = false;
+              if (!this.destroyed) {
+                this.view.dispatch(this.view.state.tr.setMeta(_pluginKey.stateKey, {
+                  allowsUploads: this.allowsUploads
+                }));
+              }
+              return _context.abrupt("return");
+            case 24:
+              this.mediaClientConfig = this.mediaProvider.viewMediaClientConfig;
+              this.allowsUploads = !!this.mediaProvider.uploadMediaClientConfig;
+              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
+                view.dispatch(view.state.tr.setMeta(_pluginKey.stateKey, {
+                  allowsUploads: allowsUploads
+                }));
+              }
+              if (!this.allowsUploads) {
+                _context.next = 38;
+                break;
+              }
+              this.uploadMediaClientConfig = this.mediaProvider.uploadMediaClientConfig;
+              if (!(this.mediaProvider.uploadParams && this.uploadMediaClientConfig)) {
+                _context.next = 35;
+                break;
+              }
+              _context.next = 33;
+              return this.initPickers(this.mediaProvider.uploadParams, _pickerFacade.default);
+            case 33:
+              _context.next = 36;
+              break;
+            case 35:
+              this.destroyPickers();
+            case 36:
+              _context.next = 39;
+              break;
+            case 38:
+              this.destroyPickers();
+            case 39:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this, [[8, 16]]);
+      }));
+      function setMediaProvider(_x) {
+        return _setMediaProvider.apply(this, arguments);
+      }
+      return setMediaProvider;
+    }()
   }, {
     key: "setIsResizing",
     value: function setIsResizing(isResizing) {

package/dist/cjs/toDOM-fixes/mediaSingle.js

@@ -128,14 +128,13 @@ var mediaSingleSpecWithFixedToDOM = exports.mediaSingleSpecWithFixedToDOM = func
   }
   return _objectSpread(_objectSpread({}, mediaSingleNode), {}, {
     toDOM: function toDOM(node) {
-      var _mediaSingleAttrs$lay, _childNode$type;
+      var _mediaSingleAttrs$lay;
       var childNode = node.firstChild;
       var mediaSingleAttrs = node.attrs;
       var layout = (_mediaSingleAttrs$lay = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.layout) !== null && _mediaSingleAttrs$lay !== void 0 ? _mediaSingleAttrs$lay : 'center';
       var mediaSingleWidth = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width;
       var widthType = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.widthType;
       var dataAttrs = (0, _toDOMAttrs.getAttrsFromNodeMediaSingle)(mediaSingleOption.withExtendedWidthTypes, node);
-      var mediaAttrs = (childNode === null || childNode === void 0 || (_childNode$type = childNode.type) === null || _childNode$type === void 0 ? void 0 : _childNode$type.name) === 'media' ? (0, _toDOMAttrs.getMediaAttrs)('media', childNode) : undefined;
       var _computeMediaSingleDi = computeMediaSingleDimensions({
           childNode: childNode,
           widthType: widthType,
@@ -145,16 +144,20 @@ var mediaSingleSpecWithFixedToDOM = exports.mediaSingleSpecWithFixedToDOM = func
         height = _computeMediaSingleDi.height;
       var layoutStyles = computeLayoutStyles(width, layout);
       var style = "display: block; margin-top: ".concat("var(--ds-space-300, 24px)", "; margin-bottom: ", "var(--ds-space-300, 24px)", "; ", layoutStyles);
-      if ((childNode === null || childNode === void 0 ? void 0 : childNode.attrs.type) === 'external') {
-        return ['div', dataAttrs, ['img', _objectSpread(_objectSpread({}, mediaAttrs), {}, {
-          src: childNode.attrs.url,
-          style: style
-        })]];
-      }
-      return ['div', dataAttrs, ['div', _objectSpread(_objectSpread({}, mediaAttrs), {}, {
+      var content = ['div', _objectSpread({
+        class: 'rich-media-item mediaSingleView-content-wrap image-center'
+      }, dataAttrs), ['div', {
+        class: 'css-13f4nzt-MediaWrapper',
         // Transparent image workaround to control styling
         style: "width: ".concat(width, "px; height: ").concat(height, "px; ").concat(style, " ").concat(skeletonStyling, " border-radius: ", "var(--ds-border-radius, 3px)", ";")
-      })]];
+      }, ['figure', {
+        class: 'media-single-node'
+      }, ['div', {}, ['div', {
+        class: 'media-content-wrap'
+      }, 0]]]]];
+      return ['div', {
+        class: 'mediaSingleView-content-wrap'
+      }, content];
     }
   });
 };

package/dist/cjs/toDOM-fixes/toDOMAttrs.js

@@ -64,17 +64,13 @@ var getAttrsFromNodeMediaSingle = exports.getAttrsFromNodeMediaSingle = function
     width = _node$attrs.width;
   var attrs = {
     'data-node-type': 'mediaSingle',
-    'data-layout': layout,
-    'data-width': ''
+    'data-layout': layout
   };
   if (width) {
     attrs['data-width'] = isFinite(width) && Math.floor(width) === width ? width : width.toFixed(2);
   }
-  if (withExtendedWidthTypes && node.attrs.widthType) {
-    var widthType = node.attrs.widthType;
-    return _objectSpread(_objectSpread({}, attrs), {}, {
-      'data-width-type': widthType || 'percentage'
-    });
-  }
-  return attrs;
+  var widthType = node.attrs.widthType;
+  return _objectSpread(_objectSpread({}, attrs), {}, {
+    'data-width-type': widthType || 'percentage'
+  });
 };

package/dist/es2019/plugin.js

@@ -49,6 +49,7 @@ export const mediaPlugin = ({
   config: options = {},
   api
 }) => {
+  let previousMediaProvider;
   return {
     name: 'media',
     getSharedState(editorState) {
@@ -64,6 +65,11 @@ export const mediaPlugin = ({
       },
       setProvider: provider => {
         var _api$core$actions$exe;
+        // Prevent someone trying to set the exact same provider twice for performance reasons
+        if (previousMediaProvider === provider) {
+          return false;
+        }
+        previousMediaProvider = provider;
         return (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(({
           tr
         }) => tr.setMeta(stateKey, {

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

@@ -71,68 +71,6 @@ export class MediaPluginStateImplementation {
     _defineProperty(this, "taskManager", new MediaTaskManager());
     _defineProperty(this, "pickers", []);
     _defineProperty(this, "pickerPromises", []);
-    _defineProperty(this, "setMediaProvider", async mediaProvider => {
-      if (!mediaProvider) {
-        this.destroyPickers();
-        this.allowsUploads = false;
-        if (!this.destroyed) {
-          this.view.dispatch(this.view.state.tr.setMeta(stateKey, {
-            allowsUploads: this.allowsUploads
-          }));
-        }
-        return;
-      }
-
-      // TODO disable (not destroy!) pickers until mediaProvider is resolved
-      try {
-        this.mediaProvider = await mediaProvider;
-
-        // TODO [MS-2038]: remove once context api is removed
-        // We want to re assign the view and upload configs if they are missing for backwards compatibility
-        // as currently integrators can pass context || mediaClientConfig
-        if (!this.mediaProvider.viewMediaClientConfig) {
-          const viewMediaClientConfig = this.mediaProvider.viewMediaClientConfig;
-          if (viewMediaClientConfig) {
-            this.mediaProvider.viewMediaClientConfig = viewMediaClientConfig;
-          }
-        }
-        assert(this.mediaProvider.viewMediaClientConfig, `MediaProvider promise did not resolve to a valid instance of MediaProvider - ${this.mediaProvider}`);
-      } catch (err) {
-        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.view.dispatch(this.view.state.tr.setMeta(stateKey, {
-            allowsUploads: this.allowsUploads
-          }));
-        }
-        return;
-      }
-      this.mediaClientConfig = this.mediaProvider.viewMediaClientConfig;
-      this.allowsUploads = !!this.mediaProvider.uploadMediaClientConfig;
-      const {
-        view,
-        allowsUploads
-      } = this;
-      // 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
-        view.dispatch(view.state.tr.setMeta(stateKey, {
-          allowsUploads
-        }));
-      }
-      if (this.allowsUploads) {
-        this.uploadMediaClientConfig = this.mediaProvider.uploadMediaClientConfig;
-        if (this.mediaProvider.uploadParams && this.uploadMediaClientConfig) {
-          await this.initPickers(this.mediaProvider.uploadParams, PickerFacade);
-        } else {
-          this.destroyPickers();
-        }
-      } else {
-        this.destroyPickers();
-      }
-    });
     _defineProperty(this, "getMediaOptions", () => this.options);
     _defineProperty(this, "isMediaSchemaNode", ({
       type
@@ -475,6 +413,73 @@ export class MediaPluginStateImplementation {
   unsubscribeFromUploadInProgressState(fn) {
     this.uploadInProgressSubscriptions = this.uploadInProgressSubscriptions.filter(subscribedFn => subscribedFn !== fn);
   }
+  async setMediaProvider(mediaProvider) {
+    // Prevent someone trying to set the exact same provider twice for performance reasons
+    if (this.previousMediaProvider === mediaProvider) {
+      return;
+    }
+    this.previousMediaProvider = mediaProvider;
+    if (!mediaProvider) {
+      this.destroyPickers();
+      this.allowsUploads = false;
+      if (!this.destroyed) {
+        this.view.dispatch(this.view.state.tr.setMeta(stateKey, {
+          allowsUploads: this.allowsUploads
+        }));
+      }
+      return;
+    }
+
+    // TODO disable (not destroy!) pickers until mediaProvider is resolved
+    try {
+      this.mediaProvider = await mediaProvider;
+
+      // TODO [MS-2038]: remove once context api is removed
+      // We want to re assign the view and upload configs if they are missing for backwards compatibility
+      // as currently integrators can pass context || mediaClientConfig
+      if (!this.mediaProvider.viewMediaClientConfig) {
+        const viewMediaClientConfig = this.mediaProvider.viewMediaClientConfig;
+        if (viewMediaClientConfig) {
+          this.mediaProvider.viewMediaClientConfig = viewMediaClientConfig;
+        }
+      }
+      assert(this.mediaProvider.viewMediaClientConfig, `MediaProvider promise did not resolve to a valid instance of MediaProvider - ${this.mediaProvider}`);
+    } catch (err) {
+      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.view.dispatch(this.view.state.tr.setMeta(stateKey, {
+          allowsUploads: this.allowsUploads
+        }));
+      }
+      return;
+    }
+    this.mediaClientConfig = this.mediaProvider.viewMediaClientConfig;
+    this.allowsUploads = !!this.mediaProvider.uploadMediaClientConfig;
+    const {
+      view,
+      allowsUploads
+    } = this;
+    // 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
+      view.dispatch(view.state.tr.setMeta(stateKey, {
+        allowsUploads
+      }));
+    }
+    if (this.allowsUploads) {
+      this.uploadMediaClientConfig = this.mediaProvider.uploadMediaClientConfig;
+      if (this.mediaProvider.uploadParams && this.uploadMediaClientConfig) {
+        await this.initPickers(this.mediaProvider.uploadParams, PickerFacade);
+      } else {
+        this.destroyPickers();
+      }
+    } else {
+      this.destroyPickers();
+    }
+  }
   setIsResizing(isResizing) {
     this.isResizing = isResizing;
   }

package/dist/es2019/toDOM-fixes/mediaSingle.js

@@ -1,6 +1,6 @@
 import { mediaSingleSpec } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { getAttrsFromNodeMediaSingle, getMediaAttrs } from './toDOMAttrs';
+import { getAttrsFromNodeMediaSingle } from './toDOMAttrs';
 const skeletonStyling = `background: ${"var(--ds-background-neutral, #091E420F)"}; outline: none;`;
 export const wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
 
@@ -117,14 +117,13 @@ export const mediaSingleSpecWithFixedToDOM = mediaSingleOption => {
   return {
     ...mediaSingleNode,
     toDOM: node => {
-      var _mediaSingleAttrs$lay, _childNode$type;
+      var _mediaSingleAttrs$lay;
       const childNode = node.firstChild;
       const mediaSingleAttrs = node.attrs;
       const layout = (_mediaSingleAttrs$lay = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.layout) !== null && _mediaSingleAttrs$lay !== void 0 ? _mediaSingleAttrs$lay : 'center';
       const mediaSingleWidth = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width;
       const widthType = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.widthType;
       const dataAttrs = getAttrsFromNodeMediaSingle(mediaSingleOption.withExtendedWidthTypes, node);
-      const mediaAttrs = (childNode === null || childNode === void 0 ? void 0 : (_childNode$type = childNode.type) === null || _childNode$type === void 0 ? void 0 : _childNode$type.name) === 'media' ? getMediaAttrs('media', childNode) : undefined;
       const {
         width,
         height
@@ -135,18 +134,21 @@ export const mediaSingleSpecWithFixedToDOM = mediaSingleOption => {
       });
       const layoutStyles = computeLayoutStyles(width, layout);
       const style = `display: block; margin-top: ${"var(--ds-space-300, 24px)"}; margin-bottom: ${"var(--ds-space-300, 24px)"}; ${layoutStyles}`;
-      if ((childNode === null || childNode === void 0 ? void 0 : childNode.attrs.type) === 'external') {
-        return ['div', dataAttrs, ['img', {
-          ...mediaAttrs,
-          src: childNode.attrs.url,
-          style
-        }]];
-      }
-      return ['div', dataAttrs, ['div', {
-        ...mediaAttrs,
+      const content = ['div', {
+        class: 'rich-media-item mediaSingleView-content-wrap image-center',
+        ...dataAttrs
+      }, ['div', {
+        class: 'css-13f4nzt-MediaWrapper',
         // Transparent image workaround to control styling
         style: `width: ${width}px; height: ${height}px; ${style} ${skeletonStyling} border-radius: ${"var(--ds-border-radius, 3px)"};`
-      }]];
+      }, ['figure', {
+        class: 'media-single-node'
+      }, ['div', {}, ['div', {
+        class: 'media-content-wrap'
+      }, 0]]]]];
+      return ['div', {
+        class: 'mediaSingleView-content-wrap'
+      }, content];
     }
   };
 };

package/dist/es2019/toDOM-fixes/toDOMAttrs.js

@@ -50,20 +50,16 @@ export const getAttrsFromNodeMediaSingle = (withExtendedWidthTypes, node) => {
   } = node.attrs;
   const attrs = {
     'data-node-type': 'mediaSingle',
-    'data-layout': layout,
-    'data-width': ''
+    'data-layout': layout
   };
   if (width) {
     attrs['data-width'] = isFinite(width) && Math.floor(width) === width ? width : width.toFixed(2);
   }
-  if (withExtendedWidthTypes && node.attrs.widthType) {
-    const {
-      widthType
-    } = node.attrs;
-    return {
-      ...attrs,
-      'data-width-type': widthType || 'percentage'
-    };
-  }
-  return attrs;
+  const {
+    widthType
+  } = node.attrs;
+  return {
+    ...attrs,
+    'data-width-type': widthType || 'percentage'
+  };
 };

package/dist/esm/plugin.js

@@ -47,6 +47,7 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
   var _ref2$config = _ref2.config,
     options = _ref2$config === void 0 ? {} : _ref2$config,
     api = _ref2.api;
+  var previousMediaProvider;
   return {
     name: 'media',
     getSharedState: function getSharedState(editorState) {
@@ -62,6 +63,11 @@ export var mediaPlugin = function mediaPlugin(_ref2) {
       },
       setProvider: function setProvider(provider) {
         var _api$core$actions$exe;
+        // Prevent someone trying to set the exact same provider twice for performance reasons
+        if (previousMediaProvider === provider) {
+          return false;
+        }
+        previousMediaProvider = provider;
         return (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(function (_ref3) {
           var tr = _ref3.tr;
           return tr.setMeta(stateKey, {

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

@@ -5,9 +5,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, 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 normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import assert from 'assert';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -83,102 +83,12 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     _defineProperty(this, "taskManager", new MediaTaskManager());
     _defineProperty(this, "pickers", []);
     _defineProperty(this, "pickerPromises", []);
-    _defineProperty(this, "setMediaProvider", /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mediaProvider) {
-        var viewMediaClientConfig, wrappedError, view, allowsUploads;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (mediaProvider) {
-                _context.next = 5;
-                break;
-              }
-              _this.destroyPickers();
-              _this.allowsUploads = false;
-              if (!_this.destroyed) {
-                _this.view.dispatch(_this.view.state.tr.setMeta(stateKey, {
-                  allowsUploads: _this.allowsUploads
-                }));
-              }
-              return _context.abrupt("return");
-            case 5:
-              _context.prev = 5;
-              _context.next = 8;
-              return mediaProvider;
-            case 8:
-              _this.mediaProvider = _context.sent;
-              // TODO [MS-2038]: remove once context api is removed
-              // We want to re assign the view and upload configs if they are missing for backwards compatibility
-              // as currently integrators can pass context || mediaClientConfig
-              if (!_this.mediaProvider.viewMediaClientConfig) {
-                viewMediaClientConfig = _this.mediaProvider.viewMediaClientConfig;
-                if (viewMediaClientConfig) {
-                  _this.mediaProvider.viewMediaClientConfig = viewMediaClientConfig;
-                }
-              }
-              assert(_this.mediaProvider.viewMediaClientConfig, "MediaProvider promise did not resolve to a valid instance of MediaProvider - ".concat(_this.mediaProvider));
-              _context.next = 21;
-              break;
-            case 13:
-              _context.prev = 13;
-              _context.t0 = _context["catch"](5);
-              wrappedError = new Error("Media functionality disabled due to rejected provider: ".concat(_context.t0 instanceof Error ? _context.t0.message : String(_context.t0)));
-              _this.errorReporter.captureException(wrappedError);
-              _this.destroyPickers();
-              _this.allowsUploads = false;
-              if (!_this.destroyed) {
-                _this.view.dispatch(_this.view.state.tr.setMeta(stateKey, {
-                  allowsUploads: _this.allowsUploads
-                }));
-              }
-              return _context.abrupt("return");
-            case 21:
-              _this.mediaClientConfig = _this.mediaProvider.viewMediaClientConfig;
-              _this.allowsUploads = !!_this.mediaProvider.uploadMediaClientConfig;
-              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
-                view.dispatch(view.state.tr.setMeta(stateKey, {
-                  allowsUploads: allowsUploads
-                }));
-              }
-              if (!_this.allowsUploads) {
-                _context.next = 35;
-                break;
-              }
-              _this.uploadMediaClientConfig = _this.mediaProvider.uploadMediaClientConfig;
-              if (!(_this.mediaProvider.uploadParams && _this.uploadMediaClientConfig)) {
-                _context.next = 32;
-                break;
-              }
-              _context.next = 30;
-              return _this.initPickers(_this.mediaProvider.uploadParams, PickerFacade);
-            case 30:
-              _context.next = 33;
-              break;
-            case 32:
-              _this.destroyPickers();
-            case 33:
-              _context.next = 36;
-              break;
-            case 35:
-              _this.destroyPickers();
-            case 36:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, null, [[5, 13]]);
-      }));
-      return function (_x) {
-        return _ref.apply(this, arguments);
-      };
-    }());
     _defineProperty(this, "getMediaOptions", function () {
       return _this.options;
     });
-    _defineProperty(this, "isMediaSchemaNode", function (_ref2) {
+    _defineProperty(this, "isMediaSchemaNode", function (_ref) {
       var _this$mediaOptions;
-      var type = _ref2.type;
+      var type = _ref.type;
       var _this$view$state$sche = _this.view.state.schema.nodes,
         mediaInline = _this$view$state$sche.mediaInline,
         mediaSingle = _this$view$state$sche.mediaSingle,
@@ -353,8 +263,8 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
      */
     _defineProperty(this, "handleMediaNodeUnmount", function (oldNode) {
       _this.trackMediaNodeRemoval(oldNode);
-      _this.mediaNodes = _this.mediaNodes.filter(function (_ref3) {
-        var node = _ref3.node;
+      _this.mediaNodes = _this.mediaNodes.filter(function (_ref2) {
+        var node = _ref2.node;
         return oldNode !== node;
       });
     });
@@ -525,6 +435,106 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
         return subscribedFn !== fn;
       });
     }
+  }, {
+    key: "setMediaProvider",
+    value: function () {
+      var _setMediaProvider = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mediaProvider) {
+        var viewMediaClientConfig, wrappedError, view, allowsUploads;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!(this.previousMediaProvider === mediaProvider)) {
+                _context.next = 2;
+                break;
+              }
+              return _context.abrupt("return");
+            case 2:
+              this.previousMediaProvider = mediaProvider;
+              if (mediaProvider) {
+                _context.next = 8;
+                break;
+              }
+              this.destroyPickers();
+              this.allowsUploads = false;
+              if (!this.destroyed) {
+                this.view.dispatch(this.view.state.tr.setMeta(stateKey, {
+                  allowsUploads: this.allowsUploads
+                }));
+              }
+              return _context.abrupt("return");
+            case 8:
+              _context.prev = 8;
+              _context.next = 11;
+              return mediaProvider;
+            case 11:
+              this.mediaProvider = _context.sent;
+              // TODO [MS-2038]: remove once context api is removed
+              // We want to re assign the view and upload configs if they are missing for backwards compatibility
+              // as currently integrators can pass context || mediaClientConfig
+              if (!this.mediaProvider.viewMediaClientConfig) {
+                viewMediaClientConfig = this.mediaProvider.viewMediaClientConfig;
+                if (viewMediaClientConfig) {
+                  this.mediaProvider.viewMediaClientConfig = viewMediaClientConfig;
+                }
+              }
+              assert(this.mediaProvider.viewMediaClientConfig, "MediaProvider promise did not resolve to a valid instance of MediaProvider - ".concat(this.mediaProvider));
+              _context.next = 24;
+              break;
+            case 16:
+              _context.prev = 16;
+              _context.t0 = _context["catch"](8);
+              wrappedError = new Error("Media functionality disabled due to rejected provider: ".concat(_context.t0 instanceof Error ? _context.t0.message : String(_context.t0)));
+              this.errorReporter.captureException(wrappedError);
+              this.destroyPickers();
+              this.allowsUploads = false;
+              if (!this.destroyed) {
+                this.view.dispatch(this.view.state.tr.setMeta(stateKey, {
+                  allowsUploads: this.allowsUploads
+                }));
+              }
+              return _context.abrupt("return");
+            case 24:
+              this.mediaClientConfig = this.mediaProvider.viewMediaClientConfig;
+              this.allowsUploads = !!this.mediaProvider.uploadMediaClientConfig;
+              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
+                view.dispatch(view.state.tr.setMeta(stateKey, {
+                  allowsUploads: allowsUploads
+                }));
+              }
+              if (!this.allowsUploads) {
+                _context.next = 38;
+                break;
+              }
+              this.uploadMediaClientConfig = this.mediaProvider.uploadMediaClientConfig;
+              if (!(this.mediaProvider.uploadParams && this.uploadMediaClientConfig)) {
+                _context.next = 35;
+                break;
+              }
+              _context.next = 33;
+              return this.initPickers(this.mediaProvider.uploadParams, PickerFacade);
+            case 33:
+              _context.next = 36;
+              break;
+            case 35:
+              this.destroyPickers();
+            case 36:
+              _context.next = 39;
+              break;
+            case 38:
+              this.destroyPickers();
+            case 39:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this, [[8, 16]]);
+      }));
+      function setMediaProvider(_x) {
+        return _setMediaProvider.apply(this, arguments);
+      }
+      return setMediaProvider;
+    }()
   }, {
     key: "setIsResizing",
     value: function setIsResizing(isResizing) {

package/dist/esm/toDOM-fixes/mediaSingle.js

@@ -3,7 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { mediaSingleSpec } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { getAttrsFromNodeMediaSingle, getMediaAttrs } from './toDOMAttrs';
+import { getAttrsFromNodeMediaSingle } from './toDOMAttrs';
 var skeletonStyling = "background: ".concat("var(--ds-background-neutral, #091E420F)", "; outline: none;");
 export var wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
 
@@ -120,14 +120,13 @@ export var mediaSingleSpecWithFixedToDOM = function mediaSingleSpecWithFixedToDO
   }
   return _objectSpread(_objectSpread({}, mediaSingleNode), {}, {
     toDOM: function toDOM(node) {
-      var _mediaSingleAttrs$lay, _childNode$type;
+      var _mediaSingleAttrs$lay;
       var childNode = node.firstChild;
       var mediaSingleAttrs = node.attrs;
       var layout = (_mediaSingleAttrs$lay = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.layout) !== null && _mediaSingleAttrs$lay !== void 0 ? _mediaSingleAttrs$lay : 'center';
       var mediaSingleWidth = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width;
       var widthType = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.widthType;
       var dataAttrs = getAttrsFromNodeMediaSingle(mediaSingleOption.withExtendedWidthTypes, node);
-      var mediaAttrs = (childNode === null || childNode === void 0 || (_childNode$type = childNode.type) === null || _childNode$type === void 0 ? void 0 : _childNode$type.name) === 'media' ? getMediaAttrs('media', childNode) : undefined;
       var _computeMediaSingleDi = computeMediaSingleDimensions({
           childNode: childNode,
           widthType: widthType,
@@ -137,16 +136,20 @@ export var mediaSingleSpecWithFixedToDOM = function mediaSingleSpecWithFixedToDO
         height = _computeMediaSingleDi.height;
       var layoutStyles = computeLayoutStyles(width, layout);
       var style = "display: block; margin-top: ".concat("var(--ds-space-300, 24px)", "; margin-bottom: ", "var(--ds-space-300, 24px)", "; ", layoutStyles);
-      if ((childNode === null || childNode === void 0 ? void 0 : childNode.attrs.type) === 'external') {
-        return ['div', dataAttrs, ['img', _objectSpread(_objectSpread({}, mediaAttrs), {}, {
-          src: childNode.attrs.url,
-          style: style
-        })]];
-      }
-      return ['div', dataAttrs, ['div', _objectSpread(_objectSpread({}, mediaAttrs), {}, {
+      var content = ['div', _objectSpread({
+        class: 'rich-media-item mediaSingleView-content-wrap image-center'
+      }, dataAttrs), ['div', {
+        class: 'css-13f4nzt-MediaWrapper',
         // Transparent image workaround to control styling
         style: "width: ".concat(width, "px; height: ").concat(height, "px; ").concat(style, " ").concat(skeletonStyling, " border-radius: ", "var(--ds-border-radius, 3px)", ";")
-      })]];
+      }, ['figure', {
+        class: 'media-single-node'
+      }, ['div', {}, ['div', {
+        class: 'media-content-wrap'
+      }, 0]]]]];
+      return ['div', {
+        class: 'mediaSingleView-content-wrap'
+      }, content];
     }
   });
 };

package/dist/esm/toDOM-fixes/toDOMAttrs.js

@@ -58,17 +58,13 @@ export var getAttrsFromNodeMediaSingle = function getAttrsFromNodeMediaSingle(wi
     width = _node$attrs.width;
   var attrs = {
     'data-node-type': 'mediaSingle',
-    'data-layout': layout,
-    'data-width': ''
+    'data-layout': layout
   };
   if (width) {
     attrs['data-width'] = isFinite(width) && Math.floor(width) === width ? width : width.toFixed(2);
   }
-  if (withExtendedWidthTypes && node.attrs.widthType) {
-    var widthType = node.attrs.widthType;
-    return _objectSpread(_objectSpread({}, attrs), {}, {
-      'data-width-type': widthType || 'percentage'
-    });
-  }
-  return attrs;
+  var widthType = node.attrs.widthType;
+  return _objectSpread(_objectSpread({}, attrs), {}, {
+    'data-width-type': widthType || 'percentage'
+  });
 };

package/dist/types/next-plugin-type.d.ts

@@ -35,7 +35,10 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
     actions: {
         insertMediaAsMediaSingle: InsertMediaAsMediaSingle;
         /**
-         * Used to update the initial provider passed to the media plugin
+         * Used to update the initial provider passed to the media plugin.
+         *
+         * For performance reasons if you attempt to set the same provider more
+         * than once this method will fail and return false.
          *
          * @param provider Promise<MediaProvider>
          * @returns {boolean} if setting the provider was successful or not

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

@@ -66,7 +66,8 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     clone(): this;
     subscribeToUploadInProgressState(fn: (isUploading: boolean) => void): void;
     unsubscribeFromUploadInProgressState(fn: (isUploading: boolean) => void): void;
-    setMediaProvider: (mediaProvider?: Promise<MediaProvider>) => Promise<void>;
+    private previousMediaProvider;
+    setMediaProvider(mediaProvider?: Promise<MediaProvider>): Promise<void>;
     getMediaOptions: () => MediaPluginOptions;
     setIsResizing(isResizing: boolean): void;
     setResizingWidth(width: number): void;

package/dist/types/toDOM-fixes/toDOMAttrs.d.ts

@@ -24,12 +24,5 @@ export declare const camelCaseToKebabCase: (str: string) => string;
  * When we patch adf-schema with media `toDOM` fixes we can remove this.
  */
 export declare const getAttrsFromNodeMediaSingle: (withExtendedWidthTypes: boolean, node: PMNode) => {
-    'data-node-type': string;
-    'data-layout': any;
-    'data-width': string;
-} | {
     'data-width-type': any;
-    'data-node-type': string;
-    'data-layout': any;
-    'data-width': string;
 };

package/dist/types-ts4.5/next-plugin-type.d.ts

@@ -35,7 +35,10 @@ export type MediaNextEditorPluginType = NextEditorPlugin<'media', {
     actions: {
         insertMediaAsMediaSingle: InsertMediaAsMediaSingle;
         /**
-         * Used to update the initial provider passed to the media plugin
+         * Used to update the initial provider passed to the media plugin.
+         *
+         * For performance reasons if you attempt to set the same provider more
+         * than once this method will fail and return false.
          *
          * @param provider Promise<MediaProvider>
          * @returns {boolean} if setting the provider was successful or not

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

@@ -66,7 +66,8 @@ export declare class MediaPluginStateImplementation implements MediaPluginState
     clone(): this;
     subscribeToUploadInProgressState(fn: (isUploading: boolean) => void): void;
     unsubscribeFromUploadInProgressState(fn: (isUploading: boolean) => void): void;
-    setMediaProvider: (mediaProvider?: Promise<MediaProvider>) => Promise<void>;
+    private previousMediaProvider;
+    setMediaProvider(mediaProvider?: Promise<MediaProvider>): Promise<void>;
     getMediaOptions: () => MediaPluginOptions;
     setIsResizing(isResizing: boolean): void;
     setResizingWidth(width: number): void;

package/dist/types-ts4.5/toDOM-fixes/toDOMAttrs.d.ts

@@ -24,12 +24,5 @@ export declare const camelCaseToKebabCase: (str: string) => string;
  * When we patch adf-schema with media `toDOM` fixes we can remove this.
  */
 export declare const getAttrsFromNodeMediaSingle: (withExtendedWidthTypes: boolean, node: PMNode) => {
-    'data-node-type': string;
-    'data-layout': any;
-    'data-width': string;
-} | {
     'data-width-type': any;
-    'data-node-type': string;
-    'data-layout': any;
-    'data-width': string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "1.28.0",
+	"version": "1.28.2",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,10 +34,10 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.8.1",
-		"@atlaskit/analytics-namespaced-context": "^6.10.0",
-		"@atlaskit/analytics-next": "^10.0.0",
-		"@atlaskit/button": "^19.1.0",
-		"@atlaskit/editor-common": "^87.6.0",
+		"@atlaskit/analytics-namespaced-context": "^6.11.0",
+		"@atlaskit/analytics-next": "^10.1.0",
+		"@atlaskit/button": "^19.2.0",
+		"@atlaskit/editor-common": "^87.7.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-analytics": "^1.7.0",
 		"@atlaskit/editor-plugin-annotation": "1.19.0",
@@ -53,22 +53,22 @@
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/form": "^10.4.0",
-		"@atlaskit/icon": "^22.11.0",
+		"@atlaskit/form": "^10.5.0",
+		"@atlaskit/icon": "^22.12.0",
 		"@atlaskit/media-card": "^78.0.0",
 		"@atlaskit/media-client": "^27.3.0",
 		"@atlaskit/media-client-react": "^2.0.0",
 		"@atlaskit/media-common": "^11.3.0",
-		"@atlaskit/media-filmstrip": "^47.1.0",
+		"@atlaskit/media-filmstrip": "^47.2.0",
 		"@atlaskit/media-picker": "^66.4.0",
 		"@atlaskit/media-ui": "^25.10.0",
 		"@atlaskit/media-viewer": "^48.6.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^11.1.0",
-		"@atlaskit/textfield": "^6.4.0",
-		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.57.0",
-		"@atlaskit/tooltip": "^18.6.0",
+		"@atlaskit/primitives": "^12.0.0",
+		"@atlaskit/textfield": "^6.5.0",
+		"@atlaskit/theme": "^12.12.0",
+		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tooltip": "^18.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",