@atlaskit/editor-core 187.42.4 → 187.42.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-core
 
+## 187.42.5
+
+### Patch Changes
+
+- [`1c085549bd9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1c085549bd9) - clean up pctWidth used in new image resize experience
+
 ## 187.42.4
 
 ### Patch Changes

package/dist/cjs/plugins/media/nodeviews/mediaSingle.js

@@ -358,7 +358,6 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         height: height,
         containerWidth: containerWidth,
         lineLength: contentWidth,
-        pctWidth: mediaSingleWidthAttribute,
         fullWidthMode: fullWidthMode,
         hasFallbackContainer: false,
         mediaSingleWidth: (0, _mediaSingle.calcMediaSinglePixelWidth)({
@@ -410,8 +409,11 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       return canResize ? (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? (0, _react.jsx)(_ResizableMediaSingleNext.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
         showLegacyNotification: widthType !== 'pixel'
       }), MediaChildren) : (0, _react.jsx)(_ResizableMediaSingle.default, (0, _extends2.default)({}, resizableMediaSingleProps, {
-        lineLength: contentWidthForLegacyExperience
-      }), MediaChildren) : (0, _react.jsx)(_ui.MediaSingle, mediaSingleProps, MediaChildren);
+        lineLength: contentWidthForLegacyExperience,
+        pctWidth: mediaSingleWidthAttribute
+      }), MediaChildren) : (0, _react.jsx)(_ui.MediaSingle, (0, _extends2.default)({}, mediaSingleProps, {
+        pctWidth: mediaSingleWidthAttribute
+      }), MediaChildren);
     }
   }]);
   return MediaSingleNode;

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

@@ -66,29 +66,19 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         guidelines: [].concat((0, _toConsumableArray2.default)(defaultGuidelines), (0, _toConsumableArray2.default)(dynamicGuidelines))
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcNewSize", function (newWidth, stop) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcNewLayout", function (newWidth, stop) {
       var _this$props2 = _this.props,
         layout = _this$props2.layout,
         containerWidth = _this$props2.containerWidth,
         lineLength = _this$props2.lineLength,
         fullWidthMode = _this$props2.fullWidthMode;
       var newPct = (0, _ui.calcPctFromPx)(newWidth, lineLength) * 100;
-      _this.setState({
-        resizedPctWidth: newPct
-      });
-      var newLayout = _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode, _this.isNestedNode());
-      if (newPct <= 100) {
-        if (_this.wrappedLayout && (stop ? newPct !== 100 : true)) {
-          newLayout = layout;
+      if (newPct <= 100 && _this.wrappedLayout) {
+        if (!stop || newPct !== 100) {
+          return layout;
         }
-        return {
-          layout: newLayout
-        };
-      } else {
-        return {
-          layout: newLayout
-        };
       }
+      return _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode, _this.isNestedNode());
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth, fullWidthMode, isNestedNode) {
       if (isNestedNode) {
@@ -185,11 +175,11 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calculateSizeState", function (size, delta) {
       var onResizeStop = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       var calculatedWidth = Math.round(size.width + delta.width);
-      var calculatedWidthWithLayout = _this.calcNewSize(calculatedWidth, onResizeStop);
+      var calculatedWidthWithLayout = _this.calcNewLayout(calculatedWidth, onResizeStop);
       return {
         width: calculatedWidth,
         height: calculatedWidth / _this.aspectRatio,
-        calculatedWidthWithLayout: calculatedWidthWithLayout
+        layout: calculatedWidthWithLayout
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectCurrentMediaNode", function () {
@@ -219,7 +209,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       var _this$calculateSizeSt = _this.calculateSizeState(size, delta),
         width = _this$calculateSizeSt.width,
         height = _this$calculateSizeSt.height,
-        calculatedWidthWithLayout = _this$calculateSizeSt.calculatedWidthWithLayout;
+        newLayout = _this$calculateSizeSt.layout;
       if (_this.isGuidelineEnabled) {
         var guidelineSnaps = (0, _guideline.getGuidelineSnaps)(_this.state.guidelines, lineLength, layout);
         _this.updateActiveGuidelines(width, _this.state.guidelines, guidelineSnaps);
@@ -242,8 +232,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         });
       }
       _this.updateSizeInPluginState(width);
-      if (calculatedWidthWithLayout.layout !== layout) {
-        updateSize(width, calculatedWidthWithLayout.layout);
+      if (newLayout !== layout) {
+        updateSize(width, newLayout);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResizeStop", function (size, delta) {
@@ -254,12 +244,12 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       var _this$calculateSizeSt2 = _this.calculateSizeState(size, delta, true),
         width = _this$calculateSizeSt2.width,
         height = _this$calculateSizeSt2.height,
-        calculatedWidthWithLayout = _this$calculateSizeSt2.calculatedWidthWithLayout;
+        newLayout = _this$calculateSizeSt2.layout;
       if (dispatchAnalyticsEvent) {
         var $pos = _this.$pos;
         var event = (0, _analytics.getMediaResizeAnalyticsEvent)(nodeType || 'mediaSingle', {
           width: width,
-          layout: calculatedWidthWithLayout.layout,
+          layout: newLayout,
           widthType: 'pixel',
           snapType: (0, _guideline.getGuidelineTypeFromKey)(_this.lastSnappedGuidelineKeys, _this.state.guidelines),
           parentNode: $pos ? $pos.parent.type.name : undefined
@@ -271,7 +261,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       _this.setIsResizing(false);
       _this.displayGuideline([]);
       var newWidth = width;
-      if (calculatedWidthWithLayout.layout === 'full-width') {
+      if (newLayout === 'full-width') {
         // When a node reaches full width in current viewport,
         // update its width with 1800 to align with pixel entry
         newWidth = _editorSharedStyles.akEditorFullWidthLayoutWidth;
@@ -283,7 +273,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           height: height
         }
       }, function () {
-        updateSize(newWidth, calculatedWidthWithLayout.layout);
+        updateSize(newWidth, newLayout);
       });
     });
     var initialWidth = props.mediaSingleWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
@@ -303,13 +293,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(ResizableMediaSingleNext, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      // Handle undo, when the actual pctWidth changed,
-      // we sync up with the internal state.
-      if (prevProps.pctWidth !== this.props.pctWidth) {
-        this.setState({
-          resizedPctWidth: this.props.pctWidth
-        });
-      }
       if (prevProps.mediaSingleWidth !== this.props.mediaSingleWidth && this.props.mediaSingleWidth) {
         // update size when lineLength becomes defined later
         // ensures extended experience renders legacy image with the same size as the legacy experience
@@ -498,7 +481,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       var _this$props8 = this.props,
         origWidth = _this$props8.width,
         layout = _this$props8.layout,
-        pctWidth = _this$props8.pctWidth,
         containerWidth = _this$props8.containerWidth,
         fullWidthMode = _this$props8.fullWidthMode,
         selected = _this$props8.selected,
@@ -520,7 +502,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
 
       // TODO: Clean up where this lives and how it gets generated
       var className = (0, _classnames.default)(_styles.richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', this.props.className, {
-        'not-resized': !pctWidth,
         'richMedia-selected': selected,
         'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
       });
@@ -533,7 +514,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       return (0, _react2.jsx)("div", {
         css: (0, _styled.wrapperStyle)({
           layout: layout,
-          isResized: !!pctWidth,
           containerWidth: containerWidth || origWidth,
           fullWidthMode: fullWidthMode,
           mediaSingleWidth: this.state.size.width,

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.42.4";
+var version = "187.42.5";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/es2019/plugins/media/nodeviews/mediaSingle.js

@@ -265,7 +265,6 @@ export default class MediaSingleNode extends Component {
       height,
       containerWidth: containerWidth,
       lineLength: contentWidth,
-      pctWidth: mediaSingleWidthAttribute,
       fullWidthMode,
       hasFallbackContainer: false,
       mediaSingleWidth: calcMediaSinglePixelWidth({
@@ -320,8 +319,11 @@ export default class MediaSingleNode extends Component {
     return canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, _extends({}, resizableMediaSingleProps, {
       showLegacyNotification: widthType !== 'pixel'
     }), MediaChildren) : jsx(ResizableMediaSingle, _extends({}, resizableMediaSingleProps, {
-      lineLength: contentWidthForLegacyExperience
-    }), MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
+      lineLength: contentWidthForLegacyExperience,
+      pctWidth: mediaSingleWidthAttribute
+    }), MediaChildren) : jsx(MediaSingle, _extends({}, mediaSingleProps, {
+      pctWidth: mediaSingleWidthAttribute
+    }), MediaChildren);
   }
 }
 _defineProperty(MediaSingleNode, "defaultProps", {

package/dist/es2019/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -46,7 +46,7 @@ class ResizableMediaSingleNext extends React.Component {
         guidelines: [...defaultGuidelines, ...dynamicGuidelines]
       });
     });
-    _defineProperty(this, "calcNewSize", (newWidth, stop) => {
+    _defineProperty(this, "calcNewLayout", (newWidth, stop) => {
       const {
         layout,
         containerWidth,
@@ -54,22 +54,12 @@ class ResizableMediaSingleNext extends React.Component {
         fullWidthMode
       } = this.props;
       const newPct = calcPctFromPx(newWidth, lineLength) * 100;
-      this.setState({
-        resizedPctWidth: newPct
-      });
-      let newLayout = this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode, this.isNestedNode());
-      if (newPct <= 100) {
-        if (this.wrappedLayout && (stop ? newPct !== 100 : true)) {
-          newLayout = layout;
+      if (newPct <= 100 && this.wrappedLayout) {
+        if (!stop || newPct !== 100) {
+          return layout;
         }
-        return {
-          layout: newLayout
-        };
-      } else {
-        return {
-          layout: newLayout
-        };
       }
+      return this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode, this.isNestedNode());
     });
     _defineProperty(this, "calcUnwrappedLayout", (width, containerWidth, contentWidth, fullWidthMode, isNestedNode) => {
       if (isNestedNode) {
@@ -164,11 +154,11 @@ class ResizableMediaSingleNext extends React.Component {
     });
     _defineProperty(this, "calculateSizeState", (size, delta, onResizeStop = false) => {
       const calculatedWidth = Math.round(size.width + delta.width);
-      const calculatedWidthWithLayout = this.calcNewSize(calculatedWidth, onResizeStop);
+      const calculatedWidthWithLayout = this.calcNewLayout(calculatedWidth, onResizeStop);
       return {
         width: calculatedWidth,
         height: calculatedWidth / this.aspectRatio,
-        calculatedWidthWithLayout
+        layout: calculatedWidthWithLayout
       };
     });
     _defineProperty(this, "selectCurrentMediaNode", () => {
@@ -199,7 +189,7 @@ class ResizableMediaSingleNext extends React.Component {
       const {
         width,
         height,
-        calculatedWidthWithLayout
+        layout: newLayout
       } = this.calculateSizeState(size, delta);
       if (this.isGuidelineEnabled) {
         const guidelineSnaps = getGuidelineSnaps(this.state.guidelines, lineLength, layout);
@@ -223,8 +213,8 @@ class ResizableMediaSingleNext extends React.Component {
         });
       }
       this.updateSizeInPluginState(width);
-      if (calculatedWidthWithLayout.layout !== layout) {
-        updateSize(width, calculatedWidthWithLayout.layout);
+      if (newLayout !== layout) {
+        updateSize(width, newLayout);
       }
     });
     _defineProperty(this, "handleResizeStop", (size, delta) => {
@@ -236,13 +226,13 @@ class ResizableMediaSingleNext extends React.Component {
       const {
         width,
         height,
-        calculatedWidthWithLayout
+        layout: newLayout
       } = this.calculateSizeState(size, delta, true);
       if (dispatchAnalyticsEvent) {
         const $pos = this.$pos;
         const event = getMediaResizeAnalyticsEvent(nodeType || 'mediaSingle', {
           width,
-          layout: calculatedWidthWithLayout.layout,
+          layout: newLayout,
           widthType: 'pixel',
           snapType: getGuidelineTypeFromKey(this.lastSnappedGuidelineKeys, this.state.guidelines),
           parentNode: $pos ? $pos.parent.type.name : undefined
@@ -254,7 +244,7 @@ class ResizableMediaSingleNext extends React.Component {
       this.setIsResizing(false);
       this.displayGuideline([]);
       let newWidth = width;
-      if (calculatedWidthWithLayout.layout === 'full-width') {
+      if (newLayout === 'full-width') {
         // When a node reaches full width in current viewport,
         // update its width with 1800 to align with pixel entry
         newWidth = akEditorFullWidthLayoutWidth;
@@ -266,7 +256,7 @@ class ResizableMediaSingleNext extends React.Component {
           height
         }
       }, () => {
-        updateSize(newWidth, calculatedWidthWithLayout.layout);
+        updateSize(newWidth, newLayout);
       });
     });
     const initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
@@ -283,13 +273,6 @@ class ResizableMediaSingleNext extends React.Component {
     };
   }
   componentDidUpdate(prevProps) {
-    // Handle undo, when the actual pctWidth changed,
-    // we sync up with the internal state.
-    if (prevProps.pctWidth !== this.props.pctWidth) {
-      this.setState({
-        resizedPctWidth: this.props.pctWidth
-      });
-    }
     if (prevProps.mediaSingleWidth !== this.props.mediaSingleWidth && this.props.mediaSingleWidth) {
       // update size when lineLength becomes defined later
       // ensures extended experience renders legacy image with the same size as the legacy experience
@@ -414,7 +397,6 @@ class ResizableMediaSingleNext extends React.Component {
     const {
       width: origWidth,
       layout,
-      pctWidth,
       containerWidth,
       fullWidthMode,
       selected,
@@ -438,7 +420,6 @@ class ResizableMediaSingleNext extends React.Component {
 
     // TODO: Clean up where this lives and how it gets generated
     const className = classnames(richMediaClassName, `image-${layout}`, isResizing ? 'is-resizing' : 'not-resizing', this.props.className, {
-      'not-resized': !pctWidth,
       'richMedia-selected': selected,
       'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
     });
@@ -451,7 +432,6 @@ class ResizableMediaSingleNext extends React.Component {
     return jsx("div", {
       css: wrapperStyle({
         layout,
-        isResized: !!pctWidth,
         containerWidth: containerWidth || origWidth,
         fullWidthMode,
         mediaSingleWidth: this.state.size.width,

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.42.4";
+export const version = "187.42.5";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/plugins/media/nodeviews/mediaSingle.js

@@ -349,7 +349,6 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         height: height,
         containerWidth: containerWidth,
         lineLength: contentWidth,
-        pctWidth: mediaSingleWidthAttribute,
         fullWidthMode: fullWidthMode,
         hasFallbackContainer: false,
         mediaSingleWidth: calcMediaSinglePixelWidth({
@@ -401,8 +400,11 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       return canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, _extends({}, resizableMediaSingleProps, {
         showLegacyNotification: widthType !== 'pixel'
       }), MediaChildren) : jsx(ResizableMediaSingle, _extends({}, resizableMediaSingleProps, {
-        lineLength: contentWidthForLegacyExperience
-      }), MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
+        lineLength: contentWidthForLegacyExperience,
+        pctWidth: mediaSingleWidthAttribute
+      }), MediaChildren) : jsx(MediaSingle, _extends({}, mediaSingleProps, {
+        pctWidth: mediaSingleWidthAttribute
+      }), MediaChildren);
     }
   }]);
   return MediaSingleNode;

package/dist/esm/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -59,29 +59,19 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         guidelines: [].concat(_toConsumableArray(defaultGuidelines), _toConsumableArray(dynamicGuidelines))
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "calcNewSize", function (newWidth, stop) {
+    _defineProperty(_assertThisInitialized(_this), "calcNewLayout", function (newWidth, stop) {
       var _this$props2 = _this.props,
         layout = _this$props2.layout,
         containerWidth = _this$props2.containerWidth,
         lineLength = _this$props2.lineLength,
         fullWidthMode = _this$props2.fullWidthMode;
       var newPct = calcPctFromPx(newWidth, lineLength) * 100;
-      _this.setState({
-        resizedPctWidth: newPct
-      });
-      var newLayout = _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode, _this.isNestedNode());
-      if (newPct <= 100) {
-        if (_this.wrappedLayout && (stop ? newPct !== 100 : true)) {
-          newLayout = layout;
+      if (newPct <= 100 && _this.wrappedLayout) {
+        if (!stop || newPct !== 100) {
+          return layout;
         }
-        return {
-          layout: newLayout
-        };
-      } else {
-        return {
-          layout: newLayout
-        };
       }
+      return _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode, _this.isNestedNode());
     });
     _defineProperty(_assertThisInitialized(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth, fullWidthMode, isNestedNode) {
       if (isNestedNode) {
@@ -178,11 +168,11 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "calculateSizeState", function (size, delta) {
       var onResizeStop = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       var calculatedWidth = Math.round(size.width + delta.width);
-      var calculatedWidthWithLayout = _this.calcNewSize(calculatedWidth, onResizeStop);
+      var calculatedWidthWithLayout = _this.calcNewLayout(calculatedWidth, onResizeStop);
       return {
         width: calculatedWidth,
         height: calculatedWidth / _this.aspectRatio,
-        calculatedWidthWithLayout: calculatedWidthWithLayout
+        layout: calculatedWidthWithLayout
       };
     });
     _defineProperty(_assertThisInitialized(_this), "selectCurrentMediaNode", function () {
@@ -212,7 +202,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       var _this$calculateSizeSt = _this.calculateSizeState(size, delta),
         width = _this$calculateSizeSt.width,
         height = _this$calculateSizeSt.height,
-        calculatedWidthWithLayout = _this$calculateSizeSt.calculatedWidthWithLayout;
+        newLayout = _this$calculateSizeSt.layout;
       if (_this.isGuidelineEnabled) {
         var guidelineSnaps = getGuidelineSnaps(_this.state.guidelines, lineLength, layout);
         _this.updateActiveGuidelines(width, _this.state.guidelines, guidelineSnaps);
@@ -235,8 +225,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         });
       }
       _this.updateSizeInPluginState(width);
-      if (calculatedWidthWithLayout.layout !== layout) {
-        updateSize(width, calculatedWidthWithLayout.layout);
+      if (newLayout !== layout) {
+        updateSize(width, newLayout);
       }
     });
     _defineProperty(_assertThisInitialized(_this), "handleResizeStop", function (size, delta) {
@@ -247,12 +237,12 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       var _this$calculateSizeSt2 = _this.calculateSizeState(size, delta, true),
         width = _this$calculateSizeSt2.width,
         height = _this$calculateSizeSt2.height,
-        calculatedWidthWithLayout = _this$calculateSizeSt2.calculatedWidthWithLayout;
+        newLayout = _this$calculateSizeSt2.layout;
       if (dispatchAnalyticsEvent) {
         var $pos = _this.$pos;
         var event = getMediaResizeAnalyticsEvent(nodeType || 'mediaSingle', {
           width: width,
-          layout: calculatedWidthWithLayout.layout,
+          layout: newLayout,
           widthType: 'pixel',
           snapType: getGuidelineTypeFromKey(_this.lastSnappedGuidelineKeys, _this.state.guidelines),
           parentNode: $pos ? $pos.parent.type.name : undefined
@@ -264,7 +254,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       _this.setIsResizing(false);
       _this.displayGuideline([]);
       var newWidth = width;
-      if (calculatedWidthWithLayout.layout === 'full-width') {
+      if (newLayout === 'full-width') {
         // When a node reaches full width in current viewport,
         // update its width with 1800 to align with pixel entry
         newWidth = akEditorFullWidthLayoutWidth;
@@ -276,7 +266,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           height: height
         }
       }, function () {
-        updateSize(newWidth, calculatedWidthWithLayout.layout);
+        updateSize(newWidth, newLayout);
       });
     });
     var initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
@@ -296,13 +286,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   _createClass(ResizableMediaSingleNext, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      // Handle undo, when the actual pctWidth changed,
-      // we sync up with the internal state.
-      if (prevProps.pctWidth !== this.props.pctWidth) {
-        this.setState({
-          resizedPctWidth: this.props.pctWidth
-        });
-      }
       if (prevProps.mediaSingleWidth !== this.props.mediaSingleWidth && this.props.mediaSingleWidth) {
         // update size when lineLength becomes defined later
         // ensures extended experience renders legacy image with the same size as the legacy experience
@@ -491,7 +474,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       var _this$props8 = this.props,
         origWidth = _this$props8.width,
         layout = _this$props8.layout,
-        pctWidth = _this$props8.pctWidth,
         containerWidth = _this$props8.containerWidth,
         fullWidthMode = _this$props8.fullWidthMode,
         selected = _this$props8.selected,
@@ -513,7 +495,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
 
       // TODO: Clean up where this lives and how it gets generated
       var className = classnames(richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', this.props.className, {
-        'not-resized': !pctWidth,
         'richMedia-selected': selected,
         'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
       });
@@ -526,7 +507,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       return jsx("div", {
         css: wrapperStyle({
           layout: layout,
-          isResized: !!pctWidth,
           containerWidth: containerWidth || origWidth,
           fullWidthMode: fullWidthMode,
           mediaSingleWidth: this.state.size.width,

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "187.42.4";
+export var version = "187.42.5";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/types/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts

@@ -8,7 +8,6 @@ import type { Dimensions, HandleResize, HandleResizeStart, Position, Snap } from
 import type { GuidelineConfig, RelativeGuides, GuidelineSnapsReference } from '@atlaskit/editor-common/guideline';
 type State = {
     isVideoFile: boolean;
-    resizedPctWidth?: number;
     isResizing: boolean;
     size: Dimensions;
     snaps: Snap;
@@ -36,9 +35,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
     private getDefaultGuidelines;
     private updateGuidelines;
     checkVideoFile(viewMediaClientConfig?: MediaClientConfig): Promise<void>;
-    calcNewSize: (newWidth: number, stop: boolean) => {
-        layout: MediaSingleLayout;
-    };
+    calcNewLayout: (newWidth: number, stop: boolean) => MediaSingleLayout;
     calcUnwrappedLayout: (width: number, containerWidth: number, contentWidth: number, fullWidthMode?: boolean, isNestedNode?: boolean) => 'center' | 'wide' | 'full-width';
     calcPxHeight: (newWidth: number) => number;
     private displayGuideline;
@@ -51,9 +48,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
     calculateSizeState: (size: Position & Dimensions, delta: Dimensions, onResizeStop?: boolean) => {
         width: number;
         height: number;
-        calculatedWidthWithLayout: {
-            layout: MediaSingleLayout;
-        };
+        layout: MediaSingleLayout;
     };
     selectCurrentMediaNode: () => void;
     handleResizeStart: HandleResizeStart;

package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts

@@ -8,7 +8,6 @@ import type { Dimensions, HandleResize, HandleResizeStart, Position, Snap } from
 import type { GuidelineConfig, RelativeGuides, GuidelineSnapsReference } from '@atlaskit/editor-common/guideline';
 type State = {
     isVideoFile: boolean;
-    resizedPctWidth?: number;
     isResizing: boolean;
     size: Dimensions;
     snaps: Snap;
@@ -36,9 +35,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
     private getDefaultGuidelines;
     private updateGuidelines;
     checkVideoFile(viewMediaClientConfig?: MediaClientConfig): Promise<void>;
-    calcNewSize: (newWidth: number, stop: boolean) => {
-        layout: MediaSingleLayout;
-    };
+    calcNewLayout: (newWidth: number, stop: boolean) => MediaSingleLayout;
     calcUnwrappedLayout: (width: number, containerWidth: number, contentWidth: number, fullWidthMode?: boolean, isNestedNode?: boolean) => 'center' | 'wide' | 'full-width';
     calcPxHeight: (newWidth: number) => number;
     private displayGuideline;
@@ -51,9 +48,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
     calculateSizeState: (size: Position & Dimensions, delta: Dimensions, onResizeStop?: boolean) => {
         width: number;
         height: number;
-        calculatedWidthWithLayout: {
-            layout: MediaSingleLayout;
-        };
+        layout: MediaSingleLayout;
     };
     selectCurrentMediaNode: () => void;
     handleResizeStart: HandleResizeStart;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "187.42.4",
+  "version": "187.42.5",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"