@atlaskit/editor-plugin-media 0.3.3 → 0.3.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-media
 
+## 0.3.4
+
+### Patch Changes
+
+- [#41343](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41343) [`243143e8007`](https://bitbucket.org/atlassian/atlassian-frontend/commits/243143e8007) - Improved media single performance by preventing unnecessary updates to collab service on every component update
+
 ## 0.3.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/helpers.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasPrivateAttrsChanged = void 0;
+var hasPrivateAttrsChanged = exports.hasPrivateAttrsChanged = function hasPrivateAttrsChanged(currentAttrs, newAttrs) {
+  return currentAttrs.__fileName !== newAttrs.__fileName || currentAttrs.__fileMimeType !== newAttrs.__fileMimeType || currentAttrs.__fileSize !== newAttrs.__fileSize || currentAttrs.__contextId !== newAttrs.__contextId;
+};

package/dist/cjs/nodeviews/mediaNodeUpdater.js

@@ -15,6 +15,8 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _mediaClient = require("@atlaskit/media-client");
 var _helpers = require("../commands/helpers");
+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) { (0, _defineProperty2.default)(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; }
 var MediaNodeUpdater = exports.MediaNodeUpdater = /*#__PURE__*/function () {
   function MediaNodeUpdater(props) {
     var _this = this;
@@ -601,6 +603,11 @@ var MediaNodeUpdater = exports.MediaNodeUpdater = /*#__PURE__*/function () {
     this.props = props;
   }
   (0, _createClass2.default)(MediaNodeUpdater, [{
+    key: "setProps",
+    value: function setProps(newComponentProps) {
+      this.props = _objectSpread(_objectSpread({}, this.props), newComponentProps);
+    }
+  }, {
     key: "isMediaBlobUrl",
     value: function isMediaBlobUrl() {
       var attrs = this.getAttrs();

package/dist/cjs/nodeviews/mediaSingle.js

@@ -37,6 +37,7 @@ var _CaptionPlaceholder = _interopRequireDefault(require("../ui/CaptionPlacehold
 var _ResizableMediaSingle = _interopRequireDefault(require("../ui/ResizableMediaSingle"));
 var _ResizableMediaSingleNext = _interopRequireDefault(require("../ui/ResizableMediaSingle/ResizableMediaSingleNext"));
 var _mediaCommon2 = require("../utils/media-common");
+var _helpers = require("./helpers");
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
 var _styles = require("./styles");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -46,8 +47,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/react/no-class-components
-var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(MediaSingleNode, _Component);
+var MediaSingleNode = exports.default = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(MediaSingleNode, _PureComponent);
   var _super = _createSuper(MediaSingleNode);
   function MediaSingleNode() {
     var _this;
@@ -56,6 +57,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mediaNodeUpdater", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       width: undefined,
       height: undefined,
@@ -64,13 +66,19 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mediaSingleWrapperRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "captionPlaceHolderRef", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createMediaNodeUpdater", function (props) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createOrUpdateMediaNodeUpdater", function (props) {
       var node = _this.props.node.firstChild;
-      return new _mediaNodeUpdater.MediaNodeUpdater(_objectSpread(_objectSpread({}, props), {}, {
+      var updaterProps = _objectSpread(_objectSpread({}, props), {}, {
         isMediaSingle: true,
         node: node ? node : _this.props.node,
         dispatchAnalyticsEvent: _this.props.dispatchAnalyticsEvent
-      }));
+      });
+      if (!_this.mediaNodeUpdater) {
+        _this.mediaNodeUpdater = new _mediaNodeUpdater.MediaNodeUpdater(updaterProps);
+      } else {
+        var _this$mediaNodeUpdate;
+        (_this$mediaNodeUpdate = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate === void 0 || _this$mediaNodeUpdate.setProps(updaterProps);
+      }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setViewMediaClientConfig", /*#__PURE__*/function () {
       var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(props) {
@@ -100,11 +108,12 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
     }());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateMediaNodeAttributes", /*#__PURE__*/function () {
       var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(props) {
-        var mediaNodeUpdater, addPendingTask, node, updatedDimensions, updatingNode, contextId, hasDifferentContextId, copyNode;
+        var _this$mediaNodeUpdate2, _this$props$node$firs, _this$mediaNodeUpdate4, _this$mediaNodeUpdate6;
+        var addPendingTask, node, updatedDimensions, currentAttrs, _this$mediaNodeUpdate3, updatingNode, contextId, _this$mediaNodeUpdate5, hasDifferentContextId, copyNode;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              mediaNodeUpdater = _this.createMediaNodeUpdater(props);
+              _this.createOrUpdateMediaNodeUpdater(props);
               addPendingTask = _this.props.mediaPluginState.addPendingTask; // we want the first child of MediaSingle (type "media")
               node = _this.props.node.firstChild;
               if (node) {
@@ -114,64 +123,65 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
               return _context2.abrupt("return");
             case 5:
               _context2.next = 7;
-              return mediaNodeUpdater.getRemoteDimensions();
+              return (_this$mediaNodeUpdate2 = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate2 === void 0 ? void 0 : _this$mediaNodeUpdate2.getRemoteDimensions();
             case 7:
               updatedDimensions = _context2.sent;
-              if (updatedDimensions) {
-                mediaNodeUpdater.updateDimensions(updatedDimensions);
+              currentAttrs = (_this$props$node$firs = _this.props.node.firstChild) === null || _this$props$node$firs === void 0 ? void 0 : _this$props$node$firs.attrs;
+              if (updatedDimensions && ((currentAttrs === null || currentAttrs === void 0 ? void 0 : currentAttrs.width) !== updatedDimensions.width || (currentAttrs === null || currentAttrs === void 0 ? void 0 : currentAttrs.height) !== updatedDimensions.height)) {
+                (_this$mediaNodeUpdate3 = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate3 === void 0 || _this$mediaNodeUpdate3.updateDimensions(updatedDimensions);
               }
               if (!(node.attrs.type === 'external' && node.attrs.__external)) {
-                _context2.next = 15;
+                _context2.next = 16;
                 break;
               }
-              updatingNode = mediaNodeUpdater.handleExternalMedia(_this.props.getPos);
+              updatingNode = _this.mediaNodeUpdater.handleExternalMedia(_this.props.getPos);
               addPendingTask(updatingNode);
-              _context2.next = 14;
+              _context2.next = 15;
               return updatingNode;
-            case 14:
-              return _context2.abrupt("return");
             case 15:
-              contextId = mediaNodeUpdater.getNodeContextId();
+              return _context2.abrupt("return");
+            case 16:
+              contextId = (_this$mediaNodeUpdate4 = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate4 === void 0 ? void 0 : _this$mediaNodeUpdate4.getNodeContextId();
               if (contextId) {
-                _context2.next = 19;
+                _context2.next = 20;
                 break;
               }
-              _context2.next = 19;
-              return mediaNodeUpdater.updateContextId();
-            case 19:
-              _context2.next = 21;
-              return mediaNodeUpdater.hasDifferentContextId();
-            case 21:
+              _context2.next = 20;
+              return (_this$mediaNodeUpdate5 = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate5 === void 0 ? void 0 : _this$mediaNodeUpdate5.updateContextId();
+            case 20:
+              _context2.next = 22;
+              return (_this$mediaNodeUpdate6 = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate6 === void 0 ? void 0 : _this$mediaNodeUpdate6.hasDifferentContextId();
+            case 22:
               hasDifferentContextId = _context2.sent;
               if (!hasDifferentContextId) {
-                _context2.next = 34;
+                _context2.next = 35;
                 break;
               }
               _this.setState({
                 isCopying: true
               });
-              _context2.prev = 24;
-              copyNode = mediaNodeUpdater.copyNode({
+              _context2.prev = 25;
+              copyNode = _this.mediaNodeUpdater.copyNode({
                 traceId: node.attrs.__mediaTraceId
               });
               addPendingTask(copyNode);
-              _context2.next = 29;
+              _context2.next = 30;
               return copyNode;
-            case 29:
-              _context2.next = 34;
+            case 30:
+              _context2.next = 35;
               break;
-            case 31:
-              _context2.prev = 31;
-              _context2.t0 = _context2["catch"](24);
+            case 32:
+              _context2.prev = 32;
+              _context2.t0 = _context2["catch"](25);
               // if copyNode fails, let's set isCopying false so we can show the eventual error
               _this.setState({
                 isCopying: false
               });
-            case 34:
+            case 35:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, null, [[24, 31]]);
+        }, _callee2, null, [[25, 32]]);
       }));
       return function (_x2) {
         return _ref2.apply(this, arguments);
@@ -254,6 +264,9 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(MediaSingleNode, [{
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (!this.mediaNodeUpdater) {
+        this.createOrUpdateMediaNodeUpdater(nextProps);
+      }
       if (nextProps.mediaProvider !== this.props.mediaProvider) {
         this.setViewMediaClientConfig(nextProps);
       }
@@ -262,10 +275,19 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
       if (nextProps.isCopyPasteEnabled === false) {
         return;
       }
-
-      // We need to call this method on any prop change since attrs can get removed with collab editing
-      // the method internally checks if we already have all attrs
-      this.createMediaNodeUpdater(nextProps).updateMediaSingleFileAttrs();
+      if (nextProps.mediaProvider !== this.props.mediaProvider) {
+        var _this$mediaNodeUpdate7;
+        this.createOrUpdateMediaNodeUpdater(nextProps);
+        (_this$mediaNodeUpdate7 = this.mediaNodeUpdater) === null || _this$mediaNodeUpdate7 === void 0 || _this$mediaNodeUpdate7.updateMediaSingleFileAttrs();
+      } else if (nextProps.node.firstChild && this.props.node.firstChild) {
+        var attrsChanged = (0, _helpers.hasPrivateAttrsChanged)(this.props.node.firstChild.attrs, nextProps.node.firstChild.attrs);
+        if (attrsChanged) {
+          var _this$mediaNodeUpdate8;
+          this.createOrUpdateMediaNodeUpdater(nextProps);
+          // We need to call this method on any prop change since attrs can get removed with collab editing
+          (_this$mediaNodeUpdate8 = this.mediaNodeUpdater) === null || _this$mediaNodeUpdate8 === void 0 || _this$mediaNodeUpdate8.updateMediaSingleFileAttrs();
+        }
+      }
     }
   }, {
     key: "componentDidMount",
@@ -276,19 +298,20 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
               contextIdentifierProvider = this.props.contextIdentifierProvider;
-              _context3.next = 3;
+              this.createOrUpdateMediaNodeUpdater(this.props);
+              _context3.next = 4;
               return Promise.all([this.setViewMediaClientConfig(this.props), this.updateMediaNodeAttributes(this.props)]);
-            case 3:
+            case 4:
               _context3.t0 = this;
-              _context3.next = 6;
+              _context3.next = 7;
               return contextIdentifierProvider;
-            case 6:
+            case 7:
               _context3.t1 = _context3.sent;
               _context3.t2 = {
                 contextIdentifierProvider: _context3.t1
               };
               _context3.t0.setState.call(_context3.t0, _context3.t2);
-            case 9:
+            case 10:
             case "end":
               return _context3.stop();
           }
@@ -419,7 +442,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
     }
   }]);
   return MediaSingleNode;
-}(_react.Component);
+}(_react.PureComponent);
 (0, _defineProperty2.default)(MediaSingleNode, "defaultProps", {
   mediaOptions: {}
 });

package/dist/es2019/nodeviews/helpers.js

@@ -0,0 +1,3 @@
+export const hasPrivateAttrsChanged = (currentAttrs, newAttrs) => {
+  return currentAttrs.__fileName !== newAttrs.__fileName || currentAttrs.__fileMimeType !== newAttrs.__fileMimeType || currentAttrs.__fileSize !== newAttrs.__fileSize || currentAttrs.__contextId !== newAttrs.__contextId;
+};

package/dist/es2019/nodeviews/mediaNodeUpdater.js

@@ -311,6 +311,12 @@ export class MediaNodeUpdater {
     });
     this.props = props;
   }
+  setProps(newComponentProps) {
+    this.props = {
+      ...this.props,
+      ...newComponentProps
+    };
+  }
   isMediaBlobUrl() {
     const attrs = this.getAttrs();
     return !!(attrs && attrs.type === 'external' && isMediaBlobUrl(attrs.url));

package/dist/es2019/nodeviews/mediaSingle.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, getMaxWidthForNestedNode, MEDIA_SINGLE_GUTTER_SIZE } from '@atlaskit/editor-common/media-single';
@@ -22,12 +22,14 @@ import CaptionPlaceholder from '../ui/CaptionPlaceholder';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
 import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
+import { hasPrivateAttrsChanged } from './helpers';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { figureWrapper, MediaSingleNodeSelector } from './styles';
 // eslint-disable-next-line @repo/internal/react/no-class-components
-export default class MediaSingleNode extends Component {
+export default class MediaSingleNode extends PureComponent {
   constructor(...args) {
     super(...args);
+    _defineProperty(this, "mediaNodeUpdater", null);
     _defineProperty(this, "state", {
       width: undefined,
       height: undefined,
@@ -36,14 +38,20 @@ export default class MediaSingleNode extends Component {
     });
     _defineProperty(this, "mediaSingleWrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "captionPlaceHolderRef", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "createMediaNodeUpdater", props => {
+    _defineProperty(this, "createOrUpdateMediaNodeUpdater", props => {
       const node = this.props.node.firstChild;
-      return new MediaNodeUpdater({
+      const updaterProps = {
         ...props,
         isMediaSingle: true,
         node: node ? node : this.props.node,
         dispatchAnalyticsEvent: this.props.dispatchAnalyticsEvent
-      });
+      };
+      if (!this.mediaNodeUpdater) {
+        this.mediaNodeUpdater = new MediaNodeUpdater(updaterProps);
+      } else {
+        var _this$mediaNodeUpdate;
+        (_this$mediaNodeUpdate = this.mediaNodeUpdater) === null || _this$mediaNodeUpdate === void 0 ? void 0 : _this$mediaNodeUpdate.setProps(updaterProps);
+      }
     });
     _defineProperty(this, "setViewMediaClientConfig", async props => {
       const mediaProvider = await props.mediaProvider;
@@ -55,7 +63,8 @@ export default class MediaSingleNode extends Component {
       }
     });
     _defineProperty(this, "updateMediaNodeAttributes", async props => {
-      const mediaNodeUpdater = this.createMediaNodeUpdater(props);
+      var _this$mediaNodeUpdate2, _this$props$node$firs, _this$mediaNodeUpdate4, _this$mediaNodeUpdate6;
+      this.createOrUpdateMediaNodeUpdater(props);
       const {
         addPendingTask
       } = this.props.mediaPluginState;
@@ -65,27 +74,30 @@ export default class MediaSingleNode extends Component {
       if (!node) {
         return;
       }
-      const updatedDimensions = await mediaNodeUpdater.getRemoteDimensions();
-      if (updatedDimensions) {
-        mediaNodeUpdater.updateDimensions(updatedDimensions);
+      const updatedDimensions = await ((_this$mediaNodeUpdate2 = this.mediaNodeUpdater) === null || _this$mediaNodeUpdate2 === void 0 ? void 0 : _this$mediaNodeUpdate2.getRemoteDimensions());
+      const currentAttrs = (_this$props$node$firs = this.props.node.firstChild) === null || _this$props$node$firs === void 0 ? void 0 : _this$props$node$firs.attrs;
+      if (updatedDimensions && ((currentAttrs === null || currentAttrs === void 0 ? void 0 : currentAttrs.width) !== updatedDimensions.width || (currentAttrs === null || currentAttrs === void 0 ? void 0 : currentAttrs.height) !== updatedDimensions.height)) {
+        var _this$mediaNodeUpdate3;
+        (_this$mediaNodeUpdate3 = this.mediaNodeUpdater) === null || _this$mediaNodeUpdate3 === void 0 ? void 0 : _this$mediaNodeUpdate3.updateDimensions(updatedDimensions);
       }
       if (node.attrs.type === 'external' && node.attrs.__external) {
-        const updatingNode = mediaNodeUpdater.handleExternalMedia(this.props.getPos);
+        const updatingNode = this.mediaNodeUpdater.handleExternalMedia(this.props.getPos);
         addPendingTask(updatingNode);
         await updatingNode;
         return;
       }
-      const contextId = mediaNodeUpdater.getNodeContextId();
+      const contextId = (_this$mediaNodeUpdate4 = this.mediaNodeUpdater) === null || _this$mediaNodeUpdate4 === void 0 ? void 0 : _this$mediaNodeUpdate4.getNodeContextId();
       if (!contextId) {
-        await mediaNodeUpdater.updateContextId();
+        var _this$mediaNodeUpdate5;
+        await ((_this$mediaNodeUpdate5 = this.mediaNodeUpdater) === null || _this$mediaNodeUpdate5 === void 0 ? void 0 : _this$mediaNodeUpdate5.updateContextId());
       }
-      const hasDifferentContextId = await mediaNodeUpdater.hasDifferentContextId();
+      const hasDifferentContextId = await ((_this$mediaNodeUpdate6 = this.mediaNodeUpdater) === null || _this$mediaNodeUpdate6 === void 0 ? void 0 : _this$mediaNodeUpdate6.hasDifferentContextId());
       if (hasDifferentContextId) {
         this.setState({
           isCopying: true
         });
         try {
-          const copyNode = mediaNodeUpdater.copyNode({
+          const copyNode = this.mediaNodeUpdater.copyNode({
             traceId: node.attrs.__mediaTraceId
           });
           addPendingTask(copyNode);
@@ -178,6 +190,9 @@ export default class MediaSingleNode extends Component {
     });
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!this.mediaNodeUpdater) {
+      this.createOrUpdateMediaNodeUpdater(nextProps);
+    }
     if (nextProps.mediaProvider !== this.props.mediaProvider) {
       this.setViewMediaClientConfig(nextProps);
     }
@@ -186,15 +201,25 @@ export default class MediaSingleNode extends Component {
     if (nextProps.isCopyPasteEnabled === false) {
       return;
     }
-
-    // We need to call this method on any prop change since attrs can get removed with collab editing
-    // the method internally checks if we already have all attrs
-    this.createMediaNodeUpdater(nextProps).updateMediaSingleFileAttrs();
+    if (nextProps.mediaProvider !== this.props.mediaProvider) {
+      var _this$mediaNodeUpdate7;
+      this.createOrUpdateMediaNodeUpdater(nextProps);
+      (_this$mediaNodeUpdate7 = this.mediaNodeUpdater) === null || _this$mediaNodeUpdate7 === void 0 ? void 0 : _this$mediaNodeUpdate7.updateMediaSingleFileAttrs();
+    } else if (nextProps.node.firstChild && this.props.node.firstChild) {
+      const attrsChanged = hasPrivateAttrsChanged(this.props.node.firstChild.attrs, nextProps.node.firstChild.attrs);
+      if (attrsChanged) {
+        var _this$mediaNodeUpdate8;
+        this.createOrUpdateMediaNodeUpdater(nextProps);
+        // We need to call this method on any prop change since attrs can get removed with collab editing
+        (_this$mediaNodeUpdate8 = this.mediaNodeUpdater) === null || _this$mediaNodeUpdate8 === void 0 ? void 0 : _this$mediaNodeUpdate8.updateMediaSingleFileAttrs();
+      }
+    }
   }
   async componentDidMount() {
     const {
       contextIdentifierProvider
     } = this.props;
+    this.createOrUpdateMediaNodeUpdater(this.props);
     await Promise.all([this.setViewMediaClientConfig(this.props), this.updateMediaNodeAttributes(this.props)]);
     this.setState({
       contextIdentifierProvider: await contextIdentifierProvider

package/dist/esm/nodeviews/helpers.js

@@ -0,0 +1,3 @@
+export var hasPrivateAttrsChanged = function hasPrivateAttrsChanged(currentAttrs, newAttrs) {
+  return currentAttrs.__fileName !== newAttrs.__fileName || currentAttrs.__fileMimeType !== newAttrs.__fileMimeType || currentAttrs.__fileSize !== newAttrs.__fileSize || currentAttrs.__contextId !== newAttrs.__contextId;
+};

package/dist/esm/nodeviews/mediaNodeUpdater.js

@@ -2,6 +2,8 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 uuidV4 from 'uuid/v4';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
@@ -594,6 +596,11 @@ export var MediaNodeUpdater = /*#__PURE__*/function () {
     this.props = props;
   }
   _createClass(MediaNodeUpdater, [{
+    key: "setProps",
+    value: function setProps(newComponentProps) {
+      this.props = _objectSpread(_objectSpread({}, this.props), newComponentProps);
+    }
+  }, {
     key: "isMediaBlobUrl",
     value: function isMediaBlobUrl() {
       var attrs = this.getAttrs();

package/dist/esm/nodeviews/mediaSingle.js

@@ -15,7 +15,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /** @jsx jsx */
 
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, getMaxWidthForNestedNode, MEDIA_SINGLE_GUTTER_SIZE } from '@atlaskit/editor-common/media-single';
@@ -35,11 +35,12 @@ import CaptionPlaceholder from '../ui/CaptionPlaceholder';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
 import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
+import { hasPrivateAttrsChanged } from './helpers';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
 import { figureWrapper, MediaSingleNodeSelector } from './styles';
 // eslint-disable-next-line @repo/internal/react/no-class-components
-var MediaSingleNode = /*#__PURE__*/function (_Component) {
-  _inherits(MediaSingleNode, _Component);
+var MediaSingleNode = /*#__PURE__*/function (_PureComponent) {
+  _inherits(MediaSingleNode, _PureComponent);
   var _super = _createSuper(MediaSingleNode);
   function MediaSingleNode() {
     var _this;
@@ -48,6 +49,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "mediaNodeUpdater", null);
     _defineProperty(_assertThisInitialized(_this), "state", {
       width: undefined,
       height: undefined,
@@ -56,13 +58,19 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "mediaSingleWrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "captionPlaceHolderRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "createMediaNodeUpdater", function (props) {
+    _defineProperty(_assertThisInitialized(_this), "createOrUpdateMediaNodeUpdater", function (props) {
       var node = _this.props.node.firstChild;
-      return new MediaNodeUpdater(_objectSpread(_objectSpread({}, props), {}, {
+      var updaterProps = _objectSpread(_objectSpread({}, props), {}, {
         isMediaSingle: true,
         node: node ? node : _this.props.node,
         dispatchAnalyticsEvent: _this.props.dispatchAnalyticsEvent
-      }));
+      });
+      if (!_this.mediaNodeUpdater) {
+        _this.mediaNodeUpdater = new MediaNodeUpdater(updaterProps);
+      } else {
+        var _this$mediaNodeUpdate;
+        (_this$mediaNodeUpdate = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate === void 0 || _this$mediaNodeUpdate.setProps(updaterProps);
+      }
     });
     _defineProperty(_assertThisInitialized(_this), "setViewMediaClientConfig", /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(props) {
@@ -92,11 +100,12 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
     }());
     _defineProperty(_assertThisInitialized(_this), "updateMediaNodeAttributes", /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(props) {
-        var mediaNodeUpdater, addPendingTask, node, updatedDimensions, updatingNode, contextId, hasDifferentContextId, copyNode;
+        var _this$mediaNodeUpdate2, _this$props$node$firs, _this$mediaNodeUpdate4, _this$mediaNodeUpdate6;
+        var addPendingTask, node, updatedDimensions, currentAttrs, _this$mediaNodeUpdate3, updatingNode, contextId, _this$mediaNodeUpdate5, hasDifferentContextId, copyNode;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              mediaNodeUpdater = _this.createMediaNodeUpdater(props);
+              _this.createOrUpdateMediaNodeUpdater(props);
               addPendingTask = _this.props.mediaPluginState.addPendingTask; // we want the first child of MediaSingle (type "media")
               node = _this.props.node.firstChild;
               if (node) {
@@ -106,64 +115,65 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
               return _context2.abrupt("return");
             case 5:
               _context2.next = 7;
-              return mediaNodeUpdater.getRemoteDimensions();
+              return (_this$mediaNodeUpdate2 = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate2 === void 0 ? void 0 : _this$mediaNodeUpdate2.getRemoteDimensions();
             case 7:
               updatedDimensions = _context2.sent;
-              if (updatedDimensions) {
-                mediaNodeUpdater.updateDimensions(updatedDimensions);
+              currentAttrs = (_this$props$node$firs = _this.props.node.firstChild) === null || _this$props$node$firs === void 0 ? void 0 : _this$props$node$firs.attrs;
+              if (updatedDimensions && ((currentAttrs === null || currentAttrs === void 0 ? void 0 : currentAttrs.width) !== updatedDimensions.width || (currentAttrs === null || currentAttrs === void 0 ? void 0 : currentAttrs.height) !== updatedDimensions.height)) {
+                (_this$mediaNodeUpdate3 = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate3 === void 0 || _this$mediaNodeUpdate3.updateDimensions(updatedDimensions);
               }
               if (!(node.attrs.type === 'external' && node.attrs.__external)) {
-                _context2.next = 15;
+                _context2.next = 16;
                 break;
               }
-              updatingNode = mediaNodeUpdater.handleExternalMedia(_this.props.getPos);
+              updatingNode = _this.mediaNodeUpdater.handleExternalMedia(_this.props.getPos);
               addPendingTask(updatingNode);
-              _context2.next = 14;
+              _context2.next = 15;
               return updatingNode;
-            case 14:
-              return _context2.abrupt("return");
             case 15:
-              contextId = mediaNodeUpdater.getNodeContextId();
+              return _context2.abrupt("return");
+            case 16:
+              contextId = (_this$mediaNodeUpdate4 = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate4 === void 0 ? void 0 : _this$mediaNodeUpdate4.getNodeContextId();
               if (contextId) {
-                _context2.next = 19;
+                _context2.next = 20;
                 break;
               }
-              _context2.next = 19;
-              return mediaNodeUpdater.updateContextId();
-            case 19:
-              _context2.next = 21;
-              return mediaNodeUpdater.hasDifferentContextId();
-            case 21:
+              _context2.next = 20;
+              return (_this$mediaNodeUpdate5 = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate5 === void 0 ? void 0 : _this$mediaNodeUpdate5.updateContextId();
+            case 20:
+              _context2.next = 22;
+              return (_this$mediaNodeUpdate6 = _this.mediaNodeUpdater) === null || _this$mediaNodeUpdate6 === void 0 ? void 0 : _this$mediaNodeUpdate6.hasDifferentContextId();
+            case 22:
               hasDifferentContextId = _context2.sent;
               if (!hasDifferentContextId) {
-                _context2.next = 34;
+                _context2.next = 35;
                 break;
               }
               _this.setState({
                 isCopying: true
               });
-              _context2.prev = 24;
-              copyNode = mediaNodeUpdater.copyNode({
+              _context2.prev = 25;
+              copyNode = _this.mediaNodeUpdater.copyNode({
                 traceId: node.attrs.__mediaTraceId
               });
               addPendingTask(copyNode);
-              _context2.next = 29;
+              _context2.next = 30;
               return copyNode;
-            case 29:
-              _context2.next = 34;
+            case 30:
+              _context2.next = 35;
               break;
-            case 31:
-              _context2.prev = 31;
-              _context2.t0 = _context2["catch"](24);
+            case 32:
+              _context2.prev = 32;
+              _context2.t0 = _context2["catch"](25);
               // if copyNode fails, let's set isCopying false so we can show the eventual error
               _this.setState({
                 isCopying: false
               });
-            case 34:
+            case 35:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, null, [[24, 31]]);
+        }, _callee2, null, [[25, 32]]);
       }));
       return function (_x2) {
         return _ref2.apply(this, arguments);
@@ -246,6 +256,9 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
   _createClass(MediaSingleNode, [{
     key: "UNSAFE_componentWillReceiveProps",
     value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (!this.mediaNodeUpdater) {
+        this.createOrUpdateMediaNodeUpdater(nextProps);
+      }
       if (nextProps.mediaProvider !== this.props.mediaProvider) {
         this.setViewMediaClientConfig(nextProps);
       }
@@ -254,10 +267,19 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       if (nextProps.isCopyPasteEnabled === false) {
         return;
       }
-
-      // We need to call this method on any prop change since attrs can get removed with collab editing
-      // the method internally checks if we already have all attrs
-      this.createMediaNodeUpdater(nextProps).updateMediaSingleFileAttrs();
+      if (nextProps.mediaProvider !== this.props.mediaProvider) {
+        var _this$mediaNodeUpdate7;
+        this.createOrUpdateMediaNodeUpdater(nextProps);
+        (_this$mediaNodeUpdate7 = this.mediaNodeUpdater) === null || _this$mediaNodeUpdate7 === void 0 || _this$mediaNodeUpdate7.updateMediaSingleFileAttrs();
+      } else if (nextProps.node.firstChild && this.props.node.firstChild) {
+        var attrsChanged = hasPrivateAttrsChanged(this.props.node.firstChild.attrs, nextProps.node.firstChild.attrs);
+        if (attrsChanged) {
+          var _this$mediaNodeUpdate8;
+          this.createOrUpdateMediaNodeUpdater(nextProps);
+          // We need to call this method on any prop change since attrs can get removed with collab editing
+          (_this$mediaNodeUpdate8 = this.mediaNodeUpdater) === null || _this$mediaNodeUpdate8 === void 0 || _this$mediaNodeUpdate8.updateMediaSingleFileAttrs();
+        }
+      }
     }
   }, {
     key: "componentDidMount",
@@ -268,19 +290,20 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
               contextIdentifierProvider = this.props.contextIdentifierProvider;
-              _context3.next = 3;
+              this.createOrUpdateMediaNodeUpdater(this.props);
+              _context3.next = 4;
               return Promise.all([this.setViewMediaClientConfig(this.props), this.updateMediaNodeAttributes(this.props)]);
-            case 3:
+            case 4:
               _context3.t0 = this;
-              _context3.next = 6;
+              _context3.next = 7;
               return contextIdentifierProvider;
-            case 6:
+            case 7:
               _context3.t1 = _context3.sent;
               _context3.t2 = {
                 contextIdentifierProvider: _context3.t1
               };
               _context3.t0.setState.call(_context3.t0, _context3.t2);
-            case 9:
+            case 10:
             case "end":
               return _context3.stop();
           }
@@ -411,7 +434,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
     }
   }]);
   return MediaSingleNode;
-}(Component);
+}(PureComponent);
 _defineProperty(MediaSingleNode, "defaultProps", {
   mediaOptions: {}
 });

package/dist/types/nodeviews/__mocks__/mediaNodeUpdater.d.ts

@@ -4,6 +4,7 @@ export declare class MediaNodeUpdater {
     static mockReset(): void;
     constructor();
     static setMock(thisKey: string, value: any): void;
+    setProps(): void;
     updateContextId(): Promise<void>;
     updateNodeContextId(): Promise<void>;
     getAttrs(): void;

package/dist/types/nodeviews/helpers.d.ts

@@ -0,0 +1,2 @@
+import type { MediaAttributes } from '@atlaskit/adf-schema';
+export declare const hasPrivateAttrsChanged: (currentAttrs: MediaAttributes, newAttrs: Partial<MediaAttributes>) => boolean;

package/dist/types/nodeviews/mediaNodeUpdater.d.ts

@@ -22,6 +22,7 @@ export interface MediaNodeUpdaterProps {
 export declare class MediaNodeUpdater {
     props: MediaNodeUpdaterProps;
     constructor(props: MediaNodeUpdaterProps);
+    setProps(newComponentProps: Partial<MediaNodeUpdaterProps>): void;
     isMediaBlobUrl(): boolean;
     updateContextId: () => Promise<void>;
     updateNodeContextId: (getPos: ProsemirrorGetPosHandler) => Promise<void>;

package/dist/types/nodeviews/mediaSingle.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import type { MouseEvent } from 'react';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
@@ -25,13 +25,14 @@ export interface MediaSingleNodeState {
     contextIdentifierProvider?: ContextIdentifierProvider;
     isCopying: boolean;
 }
-export default class MediaSingleNode extends Component<MediaSingleNodeProps, MediaSingleNodeState> {
+export default class MediaSingleNode extends PureComponent<MediaSingleNodeProps, MediaSingleNodeState> {
     static defaultProps: Partial<MediaSingleNodeProps>;
     static displayName: string;
+    mediaNodeUpdater: MediaNodeUpdater | null;
     state: MediaSingleNodeState;
     mediaSingleWrapperRef: React.RefObject<HTMLDivElement>;
     captionPlaceHolderRef: React.RefObject<HTMLSpanElement>;
-    createMediaNodeUpdater: (props: MediaSingleNodeProps) => MediaNodeUpdater;
+    createOrUpdateMediaNodeUpdater: (props: MediaSingleNodeProps) => void;
     UNSAFE_componentWillReceiveProps(nextProps: MediaSingleNodeProps): void;
     setViewMediaClientConfig: (props: MediaSingleNodeProps) => Promise<void>;
     updateMediaNodeAttributes: (props: MediaSingleNodeProps) => Promise<void>;

package/dist/types-ts4.5/nodeviews/__mocks__/mediaNodeUpdater.d.ts

@@ -4,6 +4,7 @@ export declare class MediaNodeUpdater {
     static mockReset(): void;
     constructor();
     static setMock(thisKey: string, value: any): void;
+    setProps(): void;
     updateContextId(): Promise<void>;
     updateNodeContextId(): Promise<void>;
     getAttrs(): void;

package/dist/types-ts4.5/nodeviews/helpers.d.ts

@@ -0,0 +1,2 @@
+import type { MediaAttributes } from '@atlaskit/adf-schema';
+export declare const hasPrivateAttrsChanged: (currentAttrs: MediaAttributes, newAttrs: Partial<MediaAttributes>) => boolean;

package/dist/types-ts4.5/nodeviews/mediaNodeUpdater.d.ts

@@ -22,6 +22,7 @@ export interface MediaNodeUpdaterProps {
 export declare class MediaNodeUpdater {
     props: MediaNodeUpdaterProps;
     constructor(props: MediaNodeUpdaterProps);
+    setProps(newComponentProps: Partial<MediaNodeUpdaterProps>): void;
     isMediaBlobUrl(): boolean;
     updateContextId: () => Promise<void>;
     updateNodeContextId: (getPos: ProsemirrorGetPosHandler) => Promise<void>;

package/dist/types-ts4.5/nodeviews/mediaSingle.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import type { MouseEvent } from 'react';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
@@ -25,13 +25,14 @@ export interface MediaSingleNodeState {
     contextIdentifierProvider?: ContextIdentifierProvider;
     isCopying: boolean;
 }
-export default class MediaSingleNode extends Component<MediaSingleNodeProps, MediaSingleNodeState> {
+export default class MediaSingleNode extends PureComponent<MediaSingleNodeProps, MediaSingleNodeState> {
     static defaultProps: Partial<MediaSingleNodeProps>;
     static displayName: string;
+    mediaNodeUpdater: MediaNodeUpdater | null;
     state: MediaSingleNodeState;
     mediaSingleWrapperRef: React.RefObject<HTMLDivElement>;
     captionPlaceHolderRef: React.RefObject<HTMLSpanElement>;
-    createMediaNodeUpdater: (props: MediaSingleNodeProps) => MediaNodeUpdater;
+    createOrUpdateMediaNodeUpdater: (props: MediaSingleNodeProps) => void;
     UNSAFE_componentWillReceiveProps(nextProps: MediaSingleNodeProps): void;
     setViewMediaClientConfig: (props: MediaSingleNodeProps) => Promise<void>;
     updateMediaNodeAttributes: (props: MediaSingleNodeProps) => Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-media",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Media plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -36,7 +36,7 @@
     "@atlaskit/analytics-namespaced-context": "^6.7.0",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.10.0",
-    "@atlaskit/editor-common": "^76.9.0",
+    "@atlaskit/editor-common": "^76.10.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-decorations": "^0.2.0",