@atlaskit/editor-core 187.27.0 → 187.27.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-core
 
+## 187.27.1
+
+### Patch Changes
+
+- [`719a3a60441`](https://bitbucket.org/atlassian/atlassian-frontend/commits/719a3a60441) - ED-19411 minor refactor of ResizableMediaSingleNext
+
 ## 187.27.0
 
 ### Minor Changes

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

@@ -111,10 +111,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       // so that we have image aligned with text
       return 'full-width';
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcColumnLeftOffset", function () {
-      var offsetLeft = _this.state.offsetLeft;
-      return _this.insideInlineLike ? (0, _ui.calcColumnsFromPx)(offsetLeft, _this.props.lineLength, _this.props.gridSize) : 0;
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcPxHeight", function (newWidth) {
       var _this$props3 = _this.props,
         _this$props3$width = _this$props3.width,
@@ -126,9 +122,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       return _this.wrapper = wrapper;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "displayGuideline", function (guidelines) {
-      var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3;
-      var pluginInjectionApi = _this.props.pluginInjectionApi;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.guideline) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : (_pluginInjectionApi$d3 = _pluginInjectionApi$d2.actions) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.displayGuideline(_this.props.view)({
+      var _this$props$pluginInj, _this$props$pluginInj2, _this$props$pluginInj3, _this$props$pluginInj4;
+      return (_this$props$pluginInj = _this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.dependencies) === null || _this$props$pluginInj2 === void 0 ? void 0 : (_this$props$pluginInj3 = _this$props$pluginInj2.guideline) === null || _this$props$pluginInj3 === void 0 ? void 0 : (_this$props$pluginInj4 = _this$props$pluginInj3.actions) === null || _this$props$pluginInj4 === void 0 ? void 0 : _this$props$pluginInj4.displayGuideline(_this.props.view)({
         guidelines: guidelines
       });
     });
@@ -155,9 +150,10 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       return (0, _mediaSingle.calcMediaSingleMaxWidth)(containerWidth);
     }));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getRelativeGuides", function () {
-      var relativeGuides = _this.$pos && _this.$pos.nodeAfter && _this.state.size.width ? (0, _guideline.getRelativeGuidelines)(_this.state.relativeGuides, {
-        node: _this.$pos.nodeAfter,
-        pos: _this.$pos.pos
+      var $pos = _this.$pos;
+      var relativeGuides = $pos && $pos.nodeAfter && _this.state.size.width ? (0, _guideline.getRelativeGuidelines)(_this.state.relativeGuides, {
+        node: $pos.nodeAfter,
+        pos: $pos.pos
       }, _this.props.view, _this.props.lineLength, _this.state.size) : [];
       return relativeGuides;
     });
@@ -174,57 +170,20 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         _this.displayGuideline([].concat((0, _toConsumableArray2.default)((0, _guideline.getGuidelinesWithHighlights)(gap, _mediaSingle.MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines)), (0, _toConsumableArray2.default)(relativeGuidelines)));
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "roundPixelValue", function (value) {
-      return Math.round(value);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getHeightFromNewWidth", function (originalWidth, originalHeight, newWidth) {
-      return _this.roundPixelValue(originalHeight / originalWidth * newWidth);
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calculateSizeState", function (size, delta) {
-      var originalWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-      var originalHeight = arguments.length > 3 ? arguments[3] : undefined;
-      var onResizeStop = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-      var calculatedWidth = _this.roundPixelValue(size.width + delta.width);
+      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 calculatedHeightWithLayout = _this.getHeightFromNewWidth(originalWidth, originalHeight, calculatedWidth);
       return {
         width: calculatedWidth,
-        height: calculatedHeightWithLayout,
+        height: calculatedWidth / _this.aspectRatio,
         calculatedWidthWithLayout: calculatedWidthWithLayout
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectCurrentMediaNode", function () {
       // TODO: if adding !this.props.selected, it doesn't work if media single node is at top postion
-      if (typeof _this.props.getPos === 'function') {
-        var propPos = _this.props.getPos();
-        if (propPos !== undefined) {
-          (0, _utils2.setNodeSelection)(_this.props.view, propPos);
-        }
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getParentNodeTypeNameFromCurrentPositionNode", function () {
-      var $pos = _this.$pos;
-      if (!$pos) {
-        return undefined;
-      }
-
-      // Supported Parent Nodes
-      var _this$props$view$stat = _this.props.view.state.schema.nodes,
-        listItem = _this$props$view$stat.listItem,
-        expand = _this$props$view$stat.expand,
-        tableCell = _this$props$view$stat.tableCell,
-        tableHeader = _this$props$view$stat.tableHeader,
-        layoutSection = _this$props$view$stat.layoutSection,
-        nestedExpand = _this$props$view$stat.nestedExpand;
-      var parentNode = (0, _utils.findParentNodeOfTypeClosestToPos)($pos, [listItem, expand, tableCell, tableHeader, layoutSection, nestedExpand]);
-
-      // Return matched parent node name
-      if (parentNode) {
-        return parentNode.node.type.name;
-      }
-
-      // Return undefined if parent node cannot be found
-      return undefined;
+      var pos = _this.pos;
+      pos && (0, _utils2.setNodeSelection)(_this.props.view, pos);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResizeStart", function () {
       _this.setState({
@@ -233,17 +192,15 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       _this.selectCurrentMediaNode();
       _this.setIsResizing(true);
       _this.updateSizeInPluginState(_this.state.size.width);
-      // re-calucate guidelines
+      // re-calculate guidelines
       _this.updateGuidelines();
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResize", function (size, delta) {
       var _this$props4 = _this.props,
-        originalWidth = _this$props4.width,
-        originalHeight = _this$props4.height,
         layout = _this$props4.layout,
         updateSize = _this$props4.updateSize,
         lineLength = _this$props4.lineLength;
-      var _this$calculateSizeSt = _this.calculateSizeState(size, delta, originalWidth, originalHeight),
+      var _this$calculateSizeSt = _this.calculateSizeState(size, delta),
         width = _this$calculateSizeSt.width,
         height = _this$calculateSizeSt.height,
         calculatedWidthWithLayout = _this$calculateSizeSt.calculatedWidthWithLayout;
@@ -266,22 +223,21 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResizeStop", function (size, delta) {
       var _this$props5 = _this.props,
-        originalWidth = _this$props5.width,
-        originalHeight = _this$props5.height,
         updateSize = _this$props5.updateSize,
         dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent,
         nodeType = _this$props5.nodeType;
-      var _this$calculateSizeSt2 = _this.calculateSizeState(size, delta, originalWidth, originalHeight, true),
+      var _this$calculateSizeSt2 = _this.calculateSizeState(size, delta, true),
         width = _this$calculateSizeSt2.width,
         height = _this$calculateSizeSt2.height,
         calculatedWidthWithLayout = _this$calculateSizeSt2.calculatedWidthWithLayout;
       if (dispatchAnalyticsEvent) {
+        var $pos = _this.$pos;
         var event = (0, _analytics.getMediaResizeAnalyticsEvent)(nodeType || 'mediaSingle', {
           width: width,
           layout: calculatedWidthWithLayout.layout,
           widthType: 'pixel',
           snapType: (0, _guideline.getGuidelineTypeFromKey)(_this.lastSnappedGuidelineKeys, _this.state.guidelines),
-          parentNode: _this.getParentNodeTypeNameFromCurrentPositionNode()
+          parentNode: $pos ? $pos.parent.type.name : undefined
         });
         if (event) {
           dispatchAnalyticsEvent(event);
@@ -315,23 +271,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     };
     return _this;
   }
-
-  /**
-   * Calculate media single node initial width if props.mediaSingleWidth is undefined
-   * (Mainly when switching from lagacy experience to new experience).
-   *
-   * @returns initial width in pixel
-   */
   (0, _createClass2.default)(ResizableMediaSingleNext, [{
-    key: "calcInitialWidth",
-    value: function calcInitialWidth() {
-      var _this$props6 = this.props,
-        origWidth = _this$props6.width,
-        contentWidth = _this$props6.lineLength,
-        containerWidth = _this$props6.containerWidth;
-      return Math.max(Math.min(origWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH, contentWidth || containerWidth || _editorSharedStyles.akEditorDefaultLayoutWidth), _mediaSingle.MEDIA_SINGLE_MIN_PIXEL_WIDTH);
-    }
-  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _this2 = this;
@@ -374,29 +314,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       }
       return true;
     }
-
-    // check if is inside of layout, table, expand, nestedExpand and list item
-  }, {
-    key: "isNestedNode",
-    value: function isNestedNode() {
-      return !!(this.$pos && this.$pos.parent.type.name !== 'doc');
-    }
-  }, {
-    key: "getDefaultGuidelines",
-    value: function getDefaultGuidelines() {
-      var _this$props7 = this.props,
-        lineLength = _this$props7.lineLength,
-        containerWidth = _this$props7.containerWidth,
-        fullWidthMode = _this$props7.fullWidthMode;
-
-      // disable guidelines for nested media single node
-      return this.isNestedNode() ? [] : (0, _guideline.generateDefaultGuidelines)(lineLength, containerWidth, fullWidthMode);
-    }
-  }, {
-    key: "wrappedLayout",
-    get: function get() {
-      return _ui.wrappedLayouts.indexOf(this.props.layout) > -1;
-    }
   }, {
     key: "componentDidMount",
     value: function () {
@@ -430,18 +347,82 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         this.checkVideoFile(nextProps.viewMediaClientConfig);
       }
     }
+  }, {
+    key: "wrappedLayout",
+    get: function get() {
+      return _ui.wrappedLayouts.indexOf(this.props.layout) > -1;
+    }
+  }, {
+    key: "pos",
+    get: function get() {
+      if (typeof this.props.getPos !== 'function') {
+        return null;
+      }
+      var pos = this.props.getPos();
+      if (Number.isNaN(pos) || typeof pos !== 'number') {
+        return null;
+      }
+      return pos;
+    }
+  }, {
+    key: "$pos",
+    get: function get() {
+      var pos = this.pos;
+      // need to pass view because we may not get updated props in time
+      return pos && this.props.view.state.doc.resolve(pos);
+    }
   }, {
     key: "aspectRatio",
     get: function get() {
-      var _this$props8 = this.props,
-        width = _this$props8.width,
-        height = _this$props8.height;
+      var _this$props6 = this.props,
+        width = _this$props6.width,
+        height = _this$props6.height;
       if (width) {
         return width / height;
       }
+
       // TODO handle this case
       return 1;
     }
+  }, {
+    key: "insideInlineLike",
+    get: function get() {
+      var $pos = this.$pos;
+      if (!$pos) {
+        return false;
+      }
+      var listItem = this.props.view.state.schema.nodes.listItem;
+      return !!(0, _utils.findParentNodeOfTypeClosestToPos)($pos, [listItem]);
+    }
+  }, {
+    key: "insideLayout",
+    get: function get() {
+      var $pos = this.$pos;
+      if (!$pos) {
+        return false;
+      }
+      var layoutColumn = this.props.view.state.schema.nodes.layoutColumn;
+      return !!(0, _utils.findParentNodeOfTypeClosestToPos)($pos, [layoutColumn]);
+    }
+
+    // check if is inside of layout, table, expand, nestedExpand and list item
+  }, {
+    key: "isNestedNode",
+    value: function isNestedNode() {
+      var $pos = this.$pos;
+      return !!($pos && $pos.parent.type !== $pos.parent.type.schema.nodes.doc);
+    }
+  }, {
+    key: "getDefaultGuidelines",
+    value: function getDefaultGuidelines() {
+      var _this$props7 = this.props,
+        lineLength = _this$props7.lineLength,
+        containerWidth = _this$props7.containerWidth,
+        fullWidthMode = _this$props7.fullWidthMode;
+
+      // disable guidelines for nested media single node
+      return this.isNestedNode() ? [] : (0, _guideline.generateDefaultGuidelines)(lineLength, containerWidth, fullWidthMode);
+    }
   }, {
     key: "checkVideoFile",
     value: function () {
@@ -496,63 +477,19 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       }
       return checkVideoFile;
     }()
-  }, {
-    key: "$pos",
-    get: function get() {
-      if (typeof this.props.getPos !== 'function') {
-        return null;
-      }
-      var pos = this.props.getPos();
-      if (Number.isNaN(pos) || typeof pos !== 'number') {
-        return null;
-      }
-
-      // need to pass view because we may not get updated props in time
-      return this.props.view.state.doc.resolve(pos);
-    }
-
-    /**
-     * The maxmimum number of grid columns this node can resize to.
-     */
-  }, {
-    key: "gridWidth",
-    get: function get() {
-      var gridSize = this.props.gridSize;
-      return !(this.wrappedLayout || this.insideInlineLike) ? gridSize / 2 : gridSize;
-    }
-  }, {
-    key: "insideInlineLike",
-    get: function get() {
-      var $pos = this.$pos;
-      if (!$pos) {
-        return false;
-      }
-      var listItem = this.props.view.state.schema.nodes.listItem;
-      return !!(0, _utils.findParentNodeOfTypeClosestToPos)($pos, [listItem]);
-    }
-  }, {
-    key: "insideLayout",
-    get: function get() {
-      var $pos = this.$pos;
-      if (!$pos) {
-        return false;
-      }
-      var layoutColumn = this.props.view.state.schema.nodes.layoutColumn;
-      return !!(0, _utils.findParentNodeOfTypeClosestToPos)($pos, [layoutColumn]);
-    }
   }, {
     key: "render",
     value: function render() {
       var _this3 = this;
-      var _this$props9 = this.props,
-        origWidth = _this$props9.width,
-        layout = _this$props9.layout,
-        pctWidth = _this$props9.pctWidth,
-        containerWidth = _this$props9.containerWidth,
-        fullWidthMode = _this$props9.fullWidthMode,
-        selected = _this$props9.selected,
-        children = _this$props9.children,
-        lineLength = _this$props9.lineLength;
+      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,
+        children = _this$props8.children,
+        lineLength = _this$props8.lineLength;
       var _this$state = this.state,
         isResizing = _this$state.isResizing,
         size = _this$state.size;

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.27.0";
+var version = "187.27.1";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

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

@@ -4,9 +4,9 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { getMediaClient } from '@atlaskit/media-client';
-import { calcPctFromPx, wrappedLayouts, handleSides, imageAlignmentMap, calcColumnsFromPx } from '@atlaskit/editor-common/ui';
+import { calcPctFromPx, wrappedLayouts, handleSides, imageAlignmentMap } from '@atlaskit/editor-common/ui';
 import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/utils';
-import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
 import { wrapperStyle } from './styled';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import classnames from 'classnames';
@@ -94,12 +94,6 @@ class ResizableMediaSingleNext extends React.Component {
       // so that we have image aligned with text
       return 'full-width';
     });
-    _defineProperty(this, "calcColumnLeftOffset", () => {
-      const {
-        offsetLeft
-      } = this.state;
-      return this.insideInlineLike ? calcColumnsFromPx(offsetLeft, this.props.lineLength, this.props.gridSize) : 0;
-    });
     _defineProperty(this, "calcPxHeight", newWidth => {
       const {
         width = newWidth,
@@ -109,11 +103,8 @@ class ResizableMediaSingleNext extends React.Component {
     });
     _defineProperty(this, "saveWrapper", wrapper => this.wrapper = wrapper);
     _defineProperty(this, "displayGuideline", guidelines => {
-      var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3;
-      const {
-        pluginInjectionApi
-      } = this.props;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.guideline) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : (_pluginInjectionApi$d3 = _pluginInjectionApi$d2.actions) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.displayGuideline(this.props.view)({
+      var _this$props$pluginInj, _this$props$pluginInj2, _this$props$pluginInj3, _this$props$pluginInj4;
+      return (_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.dependencies) === null || _this$props$pluginInj2 === void 0 ? void 0 : (_this$props$pluginInj3 = _this$props$pluginInj2.guideline) === null || _this$props$pluginInj3 === void 0 ? void 0 : (_this$props$pluginInj4 = _this$props$pluginInj3.actions) === null || _this$props$pluginInj4 === void 0 ? void 0 : _this$props$pluginInj4.displayGuideline(this.props.view)({
         guidelines
       });
     });
@@ -142,9 +133,10 @@ class ResizableMediaSingleNext extends React.Component {
       return calcMediaSingleMaxWidth(containerWidth);
     }));
     _defineProperty(this, "getRelativeGuides", () => {
-      const relativeGuides = this.$pos && this.$pos.nodeAfter && this.state.size.width ? getRelativeGuidelines(this.state.relativeGuides, {
-        node: this.$pos.nodeAfter,
-        pos: this.$pos.pos
+      const $pos = this.$pos;
+      const relativeGuides = $pos && $pos.nodeAfter && this.state.size.width ? getRelativeGuidelines(this.state.relativeGuides, {
+        node: $pos.nodeAfter,
+        pos: $pos.pos
       }, this.props.view, this.props.lineLength, this.state.size) : [];
       return relativeGuides;
     });
@@ -159,51 +151,19 @@ class ResizableMediaSingleNext extends React.Component {
         this.displayGuideline([...getGuidelinesWithHighlights(gap, MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines), ...relativeGuidelines]);
       }
     });
-    _defineProperty(this, "roundPixelValue", value => Math.round(value));
-    _defineProperty(this, "getHeightFromNewWidth", (originalWidth, originalHeight, newWidth) => this.roundPixelValue(originalHeight / originalWidth * newWidth));
-    _defineProperty(this, "calculateSizeState", (size, delta, originalWidth = 0, originalHeight, onResizeStop = false) => {
-      const calculatedWidth = this.roundPixelValue(size.width + delta.width);
+    _defineProperty(this, "calculateSizeState", (size, delta, onResizeStop = false) => {
+      const calculatedWidth = Math.round(size.width + delta.width);
       const calculatedWidthWithLayout = this.calcNewSize(calculatedWidth, onResizeStop);
-      const calculatedHeightWithLayout = this.getHeightFromNewWidth(originalWidth, originalHeight, calculatedWidth);
       return {
         width: calculatedWidth,
-        height: calculatedHeightWithLayout,
+        height: calculatedWidth / this.aspectRatio,
         calculatedWidthWithLayout
       };
     });
     _defineProperty(this, "selectCurrentMediaNode", () => {
       // TODO: if adding !this.props.selected, it doesn't work if media single node is at top postion
-      if (typeof this.props.getPos === 'function') {
-        const propPos = this.props.getPos();
-        if (propPos !== undefined) {
-          setNodeSelection(this.props.view, propPos);
-        }
-      }
-    });
-    _defineProperty(this, "getParentNodeTypeNameFromCurrentPositionNode", () => {
-      const $pos = this.$pos;
-      if (!$pos) {
-        return undefined;
-      }
-
-      // Supported Parent Nodes
-      const {
-        listItem,
-        expand,
-        tableCell,
-        tableHeader,
-        layoutSection,
-        nestedExpand
-      } = this.props.view.state.schema.nodes;
-      const parentNode = findParentNodeOfTypeClosestToPos($pos, [listItem, expand, tableCell, tableHeader, layoutSection, nestedExpand]);
-
-      // Return matched parent node name
-      if (parentNode) {
-        return parentNode.node.type.name;
-      }
-
-      // Return undefined if parent node cannot be found
-      return undefined;
+      const pos = this.pos;
+      pos && setNodeSelection(this.props.view, pos);
     });
     _defineProperty(this, "handleResizeStart", () => {
       this.setState({
@@ -212,13 +172,11 @@ class ResizableMediaSingleNext extends React.Component {
       this.selectCurrentMediaNode();
       this.setIsResizing(true);
       this.updateSizeInPluginState(this.state.size.width);
-      // re-calucate guidelines
+      // re-calculate guidelines
       this.updateGuidelines();
     });
     _defineProperty(this, "handleResize", (size, delta) => {
       const {
-        width: originalWidth,
-        height: originalHeight,
         layout,
         updateSize,
         lineLength
@@ -227,7 +185,7 @@ class ResizableMediaSingleNext extends React.Component {
         width,
         height,
         calculatedWidthWithLayout
-      } = this.calculateSizeState(size, delta, originalWidth, originalHeight);
+      } = this.calculateSizeState(size, delta);
       const guidelineSnaps = getGuidelineSnaps(this.state.guidelines, lineLength, layout);
       this.updateActiveGuidelines(width, this.state.guidelines, guidelineSnaps);
       const relativeSnaps = getRelativeGuideSnaps(this.state.relativeGuides, this.aspectRatio);
@@ -247,8 +205,6 @@ class ResizableMediaSingleNext extends React.Component {
     });
     _defineProperty(this, "handleResizeStop", (size, delta) => {
       const {
-        width: originalWidth,
-        height: originalHeight,
         updateSize,
         dispatchAnalyticsEvent,
         nodeType
@@ -257,14 +213,15 @@ class ResizableMediaSingleNext extends React.Component {
         width,
         height,
         calculatedWidthWithLayout
-      } = this.calculateSizeState(size, delta, originalWidth, originalHeight, true);
+      } = this.calculateSizeState(size, delta, true);
       if (dispatchAnalyticsEvent) {
+        const $pos = this.$pos;
         const event = getMediaResizeAnalyticsEvent(nodeType || 'mediaSingle', {
           width,
           layout: calculatedWidthWithLayout.layout,
           widthType: 'pixel',
           snapType: getGuidelineTypeFromKey(this.lastSnappedGuidelineKeys, this.state.guidelines),
-          parentNode: this.getParentNodeTypeNameFromCurrentPositionNode()
+          parentNode: $pos ? $pos.parent.type.name : undefined
         });
         if (event) {
           dispatchAnalyticsEvent(event);
@@ -297,21 +254,6 @@ class ResizableMediaSingleNext extends React.Component {
       guidelines: []
     };
   }
-
-  /**
-   * Calculate media single node initial width if props.mediaSingleWidth is undefined
-   * (Mainly when switching from lagacy experience to new experience).
-   *
-   * @returns initial width in pixel
-   */
-  calcInitialWidth() {
-    const {
-      width: origWidth,
-      lineLength: contentWidth,
-      containerWidth
-    } = this.props;
-    return Math.max(Math.min(origWidth || DEFAULT_IMAGE_WIDTH, contentWidth || containerWidth || akEditorDefaultLayoutWidth), MEDIA_SINGLE_MIN_PIXEL_WIDTH);
-  }
   componentDidUpdate(prevProps) {
     const offsetLeft = calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
     if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
@@ -352,24 +294,6 @@ class ResizableMediaSingleNext extends React.Component {
     }
     return true;
   }
-
-  // check if is inside of layout, table, expand, nestedExpand and list item
-  isNestedNode() {
-    return !!(this.$pos && this.$pos.parent.type.name !== 'doc');
-  }
-  getDefaultGuidelines() {
-    const {
-      lineLength,
-      containerWidth,
-      fullWidthMode
-    } = this.props;
-
-    // disable guidelines for nested media single node
-    return this.isNestedNode() ? [] : generateDefaultGuidelines(lineLength, containerWidth, fullWidthMode);
-  }
-  get wrappedLayout() {
-    return wrappedLayouts.indexOf(this.props.layout) > -1;
-  }
   async componentDidMount() {
     const {
       viewMediaClientConfig
@@ -383,6 +307,24 @@ class ResizableMediaSingleNext extends React.Component {
       this.checkVideoFile(nextProps.viewMediaClientConfig);
     }
   }
+  get wrappedLayout() {
+    return wrappedLayouts.indexOf(this.props.layout) > -1;
+  }
+  get pos() {
+    if (typeof this.props.getPos !== 'function') {
+      return null;
+    }
+    const pos = this.props.getPos();
+    if (Number.isNaN(pos) || typeof pos !== 'number') {
+      return null;
+    }
+    return pos;
+  }
+  get $pos() {
+    const pos = this.pos;
+    // need to pass view because we may not get updated props in time
+    return pos && this.props.view.state.doc.resolve(pos);
+  }
   get aspectRatio() {
     const {
       width,
@@ -391,9 +333,46 @@ class ResizableMediaSingleNext extends React.Component {
     if (width) {
       return width / height;
     }
+
     // TODO handle this case
     return 1;
   }
+  get insideInlineLike() {
+    const $pos = this.$pos;
+    if (!$pos) {
+      return false;
+    }
+    const {
+      listItem
+    } = this.props.view.state.schema.nodes;
+    return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
+  }
+  get insideLayout() {
+    const $pos = this.$pos;
+    if (!$pos) {
+      return false;
+    }
+    const {
+      layoutColumn
+    } = this.props.view.state.schema.nodes;
+    return !!findParentNodeOfTypeClosestToPos($pos, [layoutColumn]);
+  }
+
+  // check if is inside of layout, table, expand, nestedExpand and list item
+  isNestedNode() {
+    const $pos = this.$pos;
+    return !!($pos && $pos.parent.type !== $pos.parent.type.schema.nodes.doc);
+  }
+  getDefaultGuidelines() {
+    const {
+      lineLength,
+      containerWidth,
+      fullWidthMode
+    } = this.props;
+
+    // disable guidelines for nested media single node
+    return this.isNestedNode() ? [] : generateDefaultGuidelines(lineLength, containerWidth, fullWidthMode);
+  }
   async checkVideoFile(viewMediaClientConfig) {
     const $pos = this.$pos;
     if (!$pos || !viewMediaClientConfig) {
@@ -419,48 +398,6 @@ class ResizableMediaSingleNext extends React.Component {
       });
     }
   }
-  get $pos() {
-    if (typeof this.props.getPos !== 'function') {
-      return null;
-    }
-    const pos = this.props.getPos();
-    if (Number.isNaN(pos) || typeof pos !== 'number') {
-      return null;
-    }
-
-    // need to pass view because we may not get updated props in time
-    return this.props.view.state.doc.resolve(pos);
-  }
-
-  /**
-   * The maxmimum number of grid columns this node can resize to.
-   */
-  get gridWidth() {
-    const {
-      gridSize
-    } = this.props;
-    return !(this.wrappedLayout || this.insideInlineLike) ? gridSize / 2 : gridSize;
-  }
-  get insideInlineLike() {
-    const $pos = this.$pos;
-    if (!$pos) {
-      return false;
-    }
-    const {
-      listItem
-    } = this.props.view.state.schema.nodes;
-    return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
-  }
-  get insideLayout() {
-    const $pos = this.$pos;
-    if (!$pos) {
-      return false;
-    }
-    const {
-      layoutColumn
-    } = this.props.view.state.schema.nodes;
-    return !!findParentNodeOfTypeClosestToPos($pos, [layoutColumn]);
-  }
   render() {
     const {
       width: origWidth,

package/dist/es2019/version-wrapper.js

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

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

@@ -15,9 +15,9 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { getMediaClient } from '@atlaskit/media-client';
-import { calcPctFromPx, wrappedLayouts, handleSides, imageAlignmentMap, calcColumnsFromPx } from '@atlaskit/editor-common/ui';
+import { calcPctFromPx, wrappedLayouts, handleSides, imageAlignmentMap } from '@atlaskit/editor-common/ui';
 import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/utils';
-import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
 import { wrapperStyle } from './styled';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import classnames from 'classnames';
@@ -104,10 +104,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       // so that we have image aligned with text
       return 'full-width';
     });
-    _defineProperty(_assertThisInitialized(_this), "calcColumnLeftOffset", function () {
-      var offsetLeft = _this.state.offsetLeft;
-      return _this.insideInlineLike ? calcColumnsFromPx(offsetLeft, _this.props.lineLength, _this.props.gridSize) : 0;
-    });
     _defineProperty(_assertThisInitialized(_this), "calcPxHeight", function (newWidth) {
       var _this$props3 = _this.props,
         _this$props3$width = _this$props3.width,
@@ -119,9 +115,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       return _this.wrapper = wrapper;
     });
     _defineProperty(_assertThisInitialized(_this), "displayGuideline", function (guidelines) {
-      var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3;
-      var pluginInjectionApi = _this.props.pluginInjectionApi;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.guideline) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : (_pluginInjectionApi$d3 = _pluginInjectionApi$d2.actions) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.displayGuideline(_this.props.view)({
+      var _this$props$pluginInj, _this$props$pluginInj2, _this$props$pluginInj3, _this$props$pluginInj4;
+      return (_this$props$pluginInj = _this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 ? void 0 : (_this$props$pluginInj2 = _this$props$pluginInj.dependencies) === null || _this$props$pluginInj2 === void 0 ? void 0 : (_this$props$pluginInj3 = _this$props$pluginInj2.guideline) === null || _this$props$pluginInj3 === void 0 ? void 0 : (_this$props$pluginInj4 = _this$props$pluginInj3.actions) === null || _this$props$pluginInj4 === void 0 ? void 0 : _this$props$pluginInj4.displayGuideline(_this.props.view)({
         guidelines: guidelines
       });
     });
@@ -148,9 +143,10 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       return calcMediaSingleMaxWidth(containerWidth);
     }));
     _defineProperty(_assertThisInitialized(_this), "getRelativeGuides", function () {
-      var relativeGuides = _this.$pos && _this.$pos.nodeAfter && _this.state.size.width ? getRelativeGuidelines(_this.state.relativeGuides, {
-        node: _this.$pos.nodeAfter,
-        pos: _this.$pos.pos
+      var $pos = _this.$pos;
+      var relativeGuides = $pos && $pos.nodeAfter && _this.state.size.width ? getRelativeGuidelines(_this.state.relativeGuides, {
+        node: $pos.nodeAfter,
+        pos: $pos.pos
       }, _this.props.view, _this.props.lineLength, _this.state.size) : [];
       return relativeGuides;
     });
@@ -167,57 +163,20 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         _this.displayGuideline([].concat(_toConsumableArray(getGuidelinesWithHighlights(gap, MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines)), _toConsumableArray(relativeGuidelines)));
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "roundPixelValue", function (value) {
-      return Math.round(value);
-    });
-    _defineProperty(_assertThisInitialized(_this), "getHeightFromNewWidth", function (originalWidth, originalHeight, newWidth) {
-      return _this.roundPixelValue(originalHeight / originalWidth * newWidth);
-    });
     _defineProperty(_assertThisInitialized(_this), "calculateSizeState", function (size, delta) {
-      var originalWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-      var originalHeight = arguments.length > 3 ? arguments[3] : undefined;
-      var onResizeStop = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-      var calculatedWidth = _this.roundPixelValue(size.width + delta.width);
+      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 calculatedHeightWithLayout = _this.getHeightFromNewWidth(originalWidth, originalHeight, calculatedWidth);
       return {
         width: calculatedWidth,
-        height: calculatedHeightWithLayout,
+        height: calculatedWidth / _this.aspectRatio,
         calculatedWidthWithLayout: calculatedWidthWithLayout
       };
     });
     _defineProperty(_assertThisInitialized(_this), "selectCurrentMediaNode", function () {
       // TODO: if adding !this.props.selected, it doesn't work if media single node is at top postion
-      if (typeof _this.props.getPos === 'function') {
-        var propPos = _this.props.getPos();
-        if (propPos !== undefined) {
-          setNodeSelection(_this.props.view, propPos);
-        }
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "getParentNodeTypeNameFromCurrentPositionNode", function () {
-      var $pos = _this.$pos;
-      if (!$pos) {
-        return undefined;
-      }
-
-      // Supported Parent Nodes
-      var _this$props$view$stat = _this.props.view.state.schema.nodes,
-        listItem = _this$props$view$stat.listItem,
-        expand = _this$props$view$stat.expand,
-        tableCell = _this$props$view$stat.tableCell,
-        tableHeader = _this$props$view$stat.tableHeader,
-        layoutSection = _this$props$view$stat.layoutSection,
-        nestedExpand = _this$props$view$stat.nestedExpand;
-      var parentNode = findParentNodeOfTypeClosestToPos($pos, [listItem, expand, tableCell, tableHeader, layoutSection, nestedExpand]);
-
-      // Return matched parent node name
-      if (parentNode) {
-        return parentNode.node.type.name;
-      }
-
-      // Return undefined if parent node cannot be found
-      return undefined;
+      var pos = _this.pos;
+      pos && setNodeSelection(_this.props.view, pos);
     });
     _defineProperty(_assertThisInitialized(_this), "handleResizeStart", function () {
       _this.setState({
@@ -226,17 +185,15 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       _this.selectCurrentMediaNode();
       _this.setIsResizing(true);
       _this.updateSizeInPluginState(_this.state.size.width);
-      // re-calucate guidelines
+      // re-calculate guidelines
       _this.updateGuidelines();
     });
     _defineProperty(_assertThisInitialized(_this), "handleResize", function (size, delta) {
       var _this$props4 = _this.props,
-        originalWidth = _this$props4.width,
-        originalHeight = _this$props4.height,
         layout = _this$props4.layout,
         updateSize = _this$props4.updateSize,
         lineLength = _this$props4.lineLength;
-      var _this$calculateSizeSt = _this.calculateSizeState(size, delta, originalWidth, originalHeight),
+      var _this$calculateSizeSt = _this.calculateSizeState(size, delta),
         width = _this$calculateSizeSt.width,
         height = _this$calculateSizeSt.height,
         calculatedWidthWithLayout = _this$calculateSizeSt.calculatedWidthWithLayout;
@@ -259,22 +216,21 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "handleResizeStop", function (size, delta) {
       var _this$props5 = _this.props,
-        originalWidth = _this$props5.width,
-        originalHeight = _this$props5.height,
         updateSize = _this$props5.updateSize,
         dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent,
         nodeType = _this$props5.nodeType;
-      var _this$calculateSizeSt2 = _this.calculateSizeState(size, delta, originalWidth, originalHeight, true),
+      var _this$calculateSizeSt2 = _this.calculateSizeState(size, delta, true),
         width = _this$calculateSizeSt2.width,
         height = _this$calculateSizeSt2.height,
         calculatedWidthWithLayout = _this$calculateSizeSt2.calculatedWidthWithLayout;
       if (dispatchAnalyticsEvent) {
+        var $pos = _this.$pos;
         var event = getMediaResizeAnalyticsEvent(nodeType || 'mediaSingle', {
           width: width,
           layout: calculatedWidthWithLayout.layout,
           widthType: 'pixel',
           snapType: getGuidelineTypeFromKey(_this.lastSnappedGuidelineKeys, _this.state.guidelines),
-          parentNode: _this.getParentNodeTypeNameFromCurrentPositionNode()
+          parentNode: $pos ? $pos.parent.type.name : undefined
         });
         if (event) {
           dispatchAnalyticsEvent(event);
@@ -308,23 +264,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     };
     return _this;
   }
-
-  /**
-   * Calculate media single node initial width if props.mediaSingleWidth is undefined
-   * (Mainly when switching from lagacy experience to new experience).
-   *
-   * @returns initial width in pixel
-   */
   _createClass(ResizableMediaSingleNext, [{
-    key: "calcInitialWidth",
-    value: function calcInitialWidth() {
-      var _this$props6 = this.props,
-        origWidth = _this$props6.width,
-        contentWidth = _this$props6.lineLength,
-        containerWidth = _this$props6.containerWidth;
-      return Math.max(Math.min(origWidth || DEFAULT_IMAGE_WIDTH, contentWidth || containerWidth || akEditorDefaultLayoutWidth), MEDIA_SINGLE_MIN_PIXEL_WIDTH);
-    }
-  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _this2 = this;
@@ -367,29 +307,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       }
       return true;
     }
-
-    // check if is inside of layout, table, expand, nestedExpand and list item
-  }, {
-    key: "isNestedNode",
-    value: function isNestedNode() {
-      return !!(this.$pos && this.$pos.parent.type.name !== 'doc');
-    }
-  }, {
-    key: "getDefaultGuidelines",
-    value: function getDefaultGuidelines() {
-      var _this$props7 = this.props,
-        lineLength = _this$props7.lineLength,
-        containerWidth = _this$props7.containerWidth,
-        fullWidthMode = _this$props7.fullWidthMode;
-
-      // disable guidelines for nested media single node
-      return this.isNestedNode() ? [] : generateDefaultGuidelines(lineLength, containerWidth, fullWidthMode);
-    }
-  }, {
-    key: "wrappedLayout",
-    get: function get() {
-      return wrappedLayouts.indexOf(this.props.layout) > -1;
-    }
   }, {
     key: "componentDidMount",
     value: function () {
@@ -423,18 +340,82 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         this.checkVideoFile(nextProps.viewMediaClientConfig);
       }
     }
+  }, {
+    key: "wrappedLayout",
+    get: function get() {
+      return wrappedLayouts.indexOf(this.props.layout) > -1;
+    }
+  }, {
+    key: "pos",
+    get: function get() {
+      if (typeof this.props.getPos !== 'function') {
+        return null;
+      }
+      var pos = this.props.getPos();
+      if (Number.isNaN(pos) || typeof pos !== 'number') {
+        return null;
+      }
+      return pos;
+    }
+  }, {
+    key: "$pos",
+    get: function get() {
+      var pos = this.pos;
+      // need to pass view because we may not get updated props in time
+      return pos && this.props.view.state.doc.resolve(pos);
+    }
   }, {
     key: "aspectRatio",
     get: function get() {
-      var _this$props8 = this.props,
-        width = _this$props8.width,
-        height = _this$props8.height;
+      var _this$props6 = this.props,
+        width = _this$props6.width,
+        height = _this$props6.height;
       if (width) {
         return width / height;
       }
+
       // TODO handle this case
       return 1;
     }
+  }, {
+    key: "insideInlineLike",
+    get: function get() {
+      var $pos = this.$pos;
+      if (!$pos) {
+        return false;
+      }
+      var listItem = this.props.view.state.schema.nodes.listItem;
+      return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
+    }
+  }, {
+    key: "insideLayout",
+    get: function get() {
+      var $pos = this.$pos;
+      if (!$pos) {
+        return false;
+      }
+      var layoutColumn = this.props.view.state.schema.nodes.layoutColumn;
+      return !!findParentNodeOfTypeClosestToPos($pos, [layoutColumn]);
+    }
+
+    // check if is inside of layout, table, expand, nestedExpand and list item
+  }, {
+    key: "isNestedNode",
+    value: function isNestedNode() {
+      var $pos = this.$pos;
+      return !!($pos && $pos.parent.type !== $pos.parent.type.schema.nodes.doc);
+    }
+  }, {
+    key: "getDefaultGuidelines",
+    value: function getDefaultGuidelines() {
+      var _this$props7 = this.props,
+        lineLength = _this$props7.lineLength,
+        containerWidth = _this$props7.containerWidth,
+        fullWidthMode = _this$props7.fullWidthMode;
+
+      // disable guidelines for nested media single node
+      return this.isNestedNode() ? [] : generateDefaultGuidelines(lineLength, containerWidth, fullWidthMode);
+    }
   }, {
     key: "checkVideoFile",
     value: function () {
@@ -489,63 +470,19 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       }
       return checkVideoFile;
     }()
-  }, {
-    key: "$pos",
-    get: function get() {
-      if (typeof this.props.getPos !== 'function') {
-        return null;
-      }
-      var pos = this.props.getPos();
-      if (Number.isNaN(pos) || typeof pos !== 'number') {
-        return null;
-      }
-
-      // need to pass view because we may not get updated props in time
-      return this.props.view.state.doc.resolve(pos);
-    }
-
-    /**
-     * The maxmimum number of grid columns this node can resize to.
-     */
-  }, {
-    key: "gridWidth",
-    get: function get() {
-      var gridSize = this.props.gridSize;
-      return !(this.wrappedLayout || this.insideInlineLike) ? gridSize / 2 : gridSize;
-    }
-  }, {
-    key: "insideInlineLike",
-    get: function get() {
-      var $pos = this.$pos;
-      if (!$pos) {
-        return false;
-      }
-      var listItem = this.props.view.state.schema.nodes.listItem;
-      return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
-    }
-  }, {
-    key: "insideLayout",
-    get: function get() {
-      var $pos = this.$pos;
-      if (!$pos) {
-        return false;
-      }
-      var layoutColumn = this.props.view.state.schema.nodes.layoutColumn;
-      return !!findParentNodeOfTypeClosestToPos($pos, [layoutColumn]);
-    }
   }, {
     key: "render",
     value: function render() {
       var _this3 = this;
-      var _this$props9 = this.props,
-        origWidth = _this$props9.width,
-        layout = _this$props9.layout,
-        pctWidth = _this$props9.pctWidth,
-        containerWidth = _this$props9.containerWidth,
-        fullWidthMode = _this$props9.fullWidthMode,
-        selected = _this$props9.selected,
-        children = _this$props9.children,
-        lineLength = _this$props9.lineLength;
+      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,
+        children = _this$props8.children,
+        lineLength = _this$props8.lineLength;
       var _this$state = this.state,
         isResizing = _this$state.isResizing,
         size = _this$state.size;

package/dist/esm/version-wrapper.js

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

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

@@ -20,38 +20,27 @@ export declare const resizerNextTestId = "mediaSingle.resizerNext.testid";
 type ResizableMediaSingleNextProps = Props;
 declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
     private lastSnappedGuidelineKeys;
+    private wrapper?;
     constructor(props: ResizableMediaSingleNextProps);
-    /**
-     * Calculate media single node initial width if props.mediaSingleWidth is undefined
-     * (Mainly when switching from lagacy experience to new experience).
-     *
-     * @returns initial width in pixel
-     */
-    calcInitialWidth(): number;
     componentDidUpdate(prevProps: Props): boolean;
-    isNestedNode(): boolean;
-    private getDefaultGuidelines;
-    private updateGuidelines;
-    get wrappedLayout(): boolean;
     componentDidMount(): Promise<void>;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    get wrappedLayout(): boolean;
+    get pos(): number | null;
+    get $pos(): 0 | import("prosemirror-model").ResolvedPos | null;
     get aspectRatio(): number;
+    get insideInlineLike(): boolean;
+    get insideLayout(): boolean;
+    isNestedNode(): boolean;
+    private getDefaultGuidelines;
+    private updateGuidelines;
     checkVideoFile(viewMediaClientConfig?: MediaClientConfig): Promise<void>;
     calcNewSize: (newWidth: number, stop: boolean) => {
         width: number | null;
         layout: MediaSingleLayout;
     };
     calcUnwrappedLayout: (width: number, containerWidth: number, contentWidth: number, fullWidthMode?: boolean) => 'center' | 'wide' | 'full-width';
-    get $pos(): import("prosemirror-model").ResolvedPos | null;
-    /**
-     * The maxmimum number of grid columns this node can resize to.
-     */
-    get gridWidth(): number;
-    calcColumnLeftOffset: () => number;
-    wrapper?: HTMLElement;
     calcPxHeight: (newWidth: number) => number;
-    get insideInlineLike(): boolean;
-    get insideLayout(): boolean;
     private saveWrapper;
     private displayGuideline;
     private setIsResizing;
@@ -59,9 +48,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
     private calcMaxWidth;
     private getRelativeGuides;
     updateActiveGuidelines: (width: number | undefined, guidelines: GuidelineConfig[], guidelineSnapsReference: GuidelineSnapsReference) => void;
-    roundPixelValue: (value: number) => number;
-    getHeightFromNewWidth: (originalWidth: number, originalHeight: number, newWidth: number) => number;
-    calculateSizeState: (size: Position & Dimensions, delta: Dimensions, originalWidth: number | undefined, originalHeight: number, onResizeStop?: boolean) => {
+    calculateSizeState: (size: Position & Dimensions, delta: Dimensions, onResizeStop?: boolean) => {
         width: number;
         height: number;
         calculatedWidthWithLayout: {
@@ -70,7 +57,6 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
         };
     };
     selectCurrentMediaNode: () => void;
-    getParentNodeTypeNameFromCurrentPositionNode: () => string | undefined;
     handleResizeStart: HandleResizeStart;
     handleResize: HandleResize;
     handleResizeStop: HandleResize;

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

@@ -20,38 +20,27 @@ export declare const resizerNextTestId = "mediaSingle.resizerNext.testid";
 type ResizableMediaSingleNextProps = Props;
 declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
     private lastSnappedGuidelineKeys;
+    private wrapper?;
     constructor(props: ResizableMediaSingleNextProps);
-    /**
-     * Calculate media single node initial width if props.mediaSingleWidth is undefined
-     * (Mainly when switching from lagacy experience to new experience).
-     *
-     * @returns initial width in pixel
-     */
-    calcInitialWidth(): number;
     componentDidUpdate(prevProps: Props): boolean;
-    isNestedNode(): boolean;
-    private getDefaultGuidelines;
-    private updateGuidelines;
-    get wrappedLayout(): boolean;
     componentDidMount(): Promise<void>;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    get wrappedLayout(): boolean;
+    get pos(): number | null;
+    get $pos(): 0 | import("prosemirror-model").ResolvedPos | null;
     get aspectRatio(): number;
+    get insideInlineLike(): boolean;
+    get insideLayout(): boolean;
+    isNestedNode(): boolean;
+    private getDefaultGuidelines;
+    private updateGuidelines;
     checkVideoFile(viewMediaClientConfig?: MediaClientConfig): Promise<void>;
     calcNewSize: (newWidth: number, stop: boolean) => {
         width: number | null;
         layout: MediaSingleLayout;
     };
     calcUnwrappedLayout: (width: number, containerWidth: number, contentWidth: number, fullWidthMode?: boolean) => 'center' | 'wide' | 'full-width';
-    get $pos(): import("prosemirror-model").ResolvedPos | null;
-    /**
-     * The maxmimum number of grid columns this node can resize to.
-     */
-    get gridWidth(): number;
-    calcColumnLeftOffset: () => number;
-    wrapper?: HTMLElement;
     calcPxHeight: (newWidth: number) => number;
-    get insideInlineLike(): boolean;
-    get insideLayout(): boolean;
     private saveWrapper;
     private displayGuideline;
     private setIsResizing;
@@ -59,9 +48,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
     private calcMaxWidth;
     private getRelativeGuides;
     updateActiveGuidelines: (width: number | undefined, guidelines: GuidelineConfig[], guidelineSnapsReference: GuidelineSnapsReference) => void;
-    roundPixelValue: (value: number) => number;
-    getHeightFromNewWidth: (originalWidth: number, originalHeight: number, newWidth: number) => number;
-    calculateSizeState: (size: Position & Dimensions, delta: Dimensions, originalWidth: number | undefined, originalHeight: number, onResizeStop?: boolean) => {
+    calculateSizeState: (size: Position & Dimensions, delta: Dimensions, onResizeStop?: boolean) => {
         width: number;
         height: number;
         calculatedWidthWithLayout: {
@@ -70,7 +57,6 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
         };
     };
     selectCurrentMediaNode: () => void;
-    getParentNodeTypeNameFromCurrentPositionNode: () => string | undefined;
     handleResizeStart: HandleResizeStart;
     handleResize: HandleResize;
     handleResizeStop: HandleResize;

package/package.json

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