@atlaskit/editor-core 187.35.0 → 187.35.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-core
 
+## 187.35.1
+
+### Patch Changes
+
+- [`b1e03fb86a1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1e03fb86a1) - Update layout and width calculation for resizing
+- [`6f85651b350`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6f85651b350) - Reduce the gap between handles when image is a nested node
+
 ## 187.35.0
 
 ### Minor Changes

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

@@ -78,7 +78,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcNewSize", function (newWidth, stop) {
       var _this$props2 = _this.props,
         layout = _this$props2.layout,
-        state = _this$props2.view.state,
         containerWidth = _this$props2.containerWidth,
         lineLength = _this$props2.lineLength,
         fullWidthMode = _this$props2.fullWidthMode;
@@ -86,29 +85,32 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       _this.setState({
         resizedPctWidth: newPct
       });
-      var newLayout = (0, _utils.hasParentNodeOfType)(state.schema.nodes.table)(state.selection) ? layout : _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode);
+      var newLayout = _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode, _this.isNestedNode());
       if (newPct <= 100) {
         if (_this.wrappedLayout && (stop ? newPct !== 100 : true)) {
           newLayout = layout;
         }
         return {
-          width: newPct,
           layout: newLayout
         };
       } else {
         return {
-          width: _this.props.pctWidth || null,
           layout: newLayout
         };
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth, fullWidthMode) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth, fullWidthMode, isNestedNode) {
+      if (isNestedNode) {
+        return 'center';
+      }
       if (fullWidthMode) {
         if (width < contentWidth) {
           return 'center';
         }
         return 'full-width';
       }
+
+      // handle top-level node in fixed-width editor
       if (width <= contentWidth) {
         return 'center';
       }
@@ -154,7 +156,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       return dispatch(tr);
     }, _mediaSingle.MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcMaxWidth", (0, _memoizeOne.default)(function (contentWidth, containerWidth, fullWidthMode) {
-      if (fullWidthMode) {
+      if (_this.isNestedNode() || fullWidthMode) {
         return contentWidth;
       }
       return (0, _mediaSingle.calcMediaSingleMaxWidth)(containerWidth);
@@ -269,14 +271,20 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       }
       _this.setIsResizing(false);
       _this.displayGuideline([]);
+      var newWidth = width;
+      if (calculatedWidthWithLayout.layout === 'full-width') {
+        // When a node reaches full width in current viewport,
+        // update its width with 1800 to align with pixel entry
+        newWidth = _editorSharedStyles.akEditorFullWidthLayoutWidth;
+      }
       _this.setState({
         isResizing: false,
         size: {
-          width: width,
+          width: newWidth,
           height: height
         }
       }, function () {
-        updateSize(width, calculatedWidthWithLayout.layout);
+        updateSize(newWidth, calculatedWidthWithLayout.layout);
       });
     });
     var initialWidth = props.mediaSingleWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
@@ -298,7 +306,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(ResizableMediaSingleNext, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
       var offsetLeft = (0, _mediaSingle.calculateOffsetLeft)(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
       if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
         this.setState({
@@ -324,18 +331,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           }
         });
       }
-      if (this.props.layout === 'full-width' && !this.isNestedNode() && prevProps.containerWidth !== this.props.containerWidth) {
-        // To achieve edge-to-edge for full-width, we need to update its width according to containerWidth
-        // Update state to allow resizer to get most up-to-date width to avoid jumping when start resizing
-        this.setState(function (prevState) {
-          return {
-            size: {
-              width: (0, _mediaSingle.calcMediaSingleMaxWidth)(_this2.props.containerWidth),
-              height: prevState.size.height
-            }
-          };
-        });
-      }
       return true;
     }
   }, {
@@ -503,7 +498,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      var _this2 = this;
       var _this$props8 = this.props,
         origWidth = _this$props8.width,
         layout = _this$props8.layout,
@@ -521,7 +516,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       _ui.handleSides.forEach(function (side) {
         var oppositeSide = side === 'left' ? 'right' : 'left';
         enable[side] = _utils2.nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(_ui.imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
-        if (side === 'left' && _this3.insideInlineLike) {
+        if (side === 'left' && _this2.insideInlineLike) {
           enable[side] = false;
         }
       });
@@ -533,9 +528,23 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
       });
       var resizerNextClassName = (0, _classnames.default)(className, _styles.resizerStyles);
-      var maxWidth = this.isNestedNode() ? undefined // fall back to 'max-width: 100%'
-      : this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
+      var maxWidth = !isResizing && this.isNestedNode() ?
+      // set undefined to fall back to 100%
+      undefined : this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
       var minWidth = this.calcMinWidth(isVideoFile, lineLength);
+      var nestedHandleStyles = function nestedHandleStyles(isNestedNode) {
+        if (!isNestedNode) {
+          return;
+        }
+        return {
+          left: {
+            left: "calc(".concat("var(--ds-space-075, 0.375em)", " * -1)")
+          },
+          right: {
+            right: "calc(".concat("var(--ds-space-075, 0.375em)", " * -1)")
+          }
+        };
+      };
       return (0, _react2.jsx)("div", {
         ref: this.saveWrapper,
         css: (0, _styled.wrapperStyle)({
@@ -561,7 +570,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         resizeRatio: _utils2.nonWrappedLayouts.includes(layout) ? 2 : 1,
         handleComponent: handleComponent,
         "data-testid": resizerNextTestId,
-        isHandleVisible: selected
+        isHandleVisible: selected,
+        handleStyles: nestedHandleStyles(this.isNestedNode())
       }, children));
     }
   }]);

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.35.0";
+var version = "187.35.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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { getMediaClient } from '@atlaskit/media-client';
 import { calcPctFromPx, wrappedLayouts, handleSides, imageAlignmentMap } from '@atlaskit/editor-common/ui';
 import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/utils';
@@ -58,9 +58,6 @@ class ResizableMediaSingleNext extends React.Component {
     _defineProperty(this, "calcNewSize", (newWidth, stop) => {
       const {
         layout,
-        view: {
-          state
-        },
         containerWidth,
         lineLength,
         fullWidthMode
@@ -69,29 +66,32 @@ class ResizableMediaSingleNext extends React.Component {
       this.setState({
         resizedPctWidth: newPct
       });
-      let newLayout = hasParentNodeOfType(state.schema.nodes.table)(state.selection) ? layout : this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode);
+      let newLayout = this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode, this.isNestedNode());
       if (newPct <= 100) {
         if (this.wrappedLayout && (stop ? newPct !== 100 : true)) {
           newLayout = layout;
         }
         return {
-          width: newPct,
           layout: newLayout
         };
       } else {
         return {
-          width: this.props.pctWidth || null,
           layout: newLayout
         };
       }
     });
-    _defineProperty(this, "calcUnwrappedLayout", (width, containerWidth, contentWidth, fullWidthMode) => {
+    _defineProperty(this, "calcUnwrappedLayout", (width, containerWidth, contentWidth, fullWidthMode, isNestedNode) => {
+      if (isNestedNode) {
+        return 'center';
+      }
       if (fullWidthMode) {
         if (width < contentWidth) {
           return 'center';
         }
         return 'full-width';
       }
+
+      // handle top-level node in fixed-width editor
       if (width <= contentWidth) {
         return 'center';
       }
@@ -137,7 +137,7 @@ class ResizableMediaSingleNext extends React.Component {
       return dispatch(tr);
     }, MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
     _defineProperty(this, "calcMaxWidth", memoizeOne((contentWidth, containerWidth, fullWidthMode) => {
-      if (fullWidthMode) {
+      if (this.isNestedNode() || fullWidthMode) {
         return contentWidth;
       }
       return calcMediaSingleMaxWidth(containerWidth);
@@ -252,14 +252,20 @@ class ResizableMediaSingleNext extends React.Component {
       }
       this.setIsResizing(false);
       this.displayGuideline([]);
+      let newWidth = width;
+      if (calculatedWidthWithLayout.layout === 'full-width') {
+        // When a node reaches full width in current viewport,
+        // update its width with 1800 to align with pixel entry
+        newWidth = akEditorFullWidthLayoutWidth;
+      }
       this.setState({
         isResizing: false,
         size: {
-          width,
+          width: newWidth,
           height
         }
       }, () => {
-        updateSize(width, calculatedWidthWithLayout.layout);
+        updateSize(newWidth, calculatedWidthWithLayout.layout);
       });
     });
     const initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
@@ -303,18 +309,6 @@ class ResizableMediaSingleNext extends React.Component {
         }
       });
     }
-    if (this.props.layout === 'full-width' && !this.isNestedNode() && prevProps.containerWidth !== this.props.containerWidth) {
-      // To achieve edge-to-edge for full-width, we need to update its width according to containerWidth
-      // Update state to allow resizer to get most up-to-date width to avoid jumping when start resizing
-      this.setState(prevState => {
-        return {
-          size: {
-            width: calcMediaSingleMaxWidth(this.props.containerWidth),
-            height: prevState.size.height
-          }
-        };
-      });
-    }
     return true;
   }
   async componentDidMount() {
@@ -452,9 +446,23 @@ class ResizableMediaSingleNext extends React.Component {
       'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
     });
     const resizerNextClassName = classnames(className, resizerStyles);
-    const maxWidth = this.isNestedNode() ? undefined // fall back to 'max-width: 100%'
-    : this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
+    const maxWidth = !isResizing && this.isNestedNode() ?
+    // set undefined to fall back to 100%
+    undefined : this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
     const minWidth = this.calcMinWidth(isVideoFile, lineLength);
+    const nestedHandleStyles = isNestedNode => {
+      if (!isNestedNode) {
+        return;
+      }
+      return {
+        left: {
+          left: `calc(${"var(--ds-space-075, 0.375em)"} * -1)`
+        },
+        right: {
+          right: `calc(${"var(--ds-space-075, 0.375em)"} * -1)`
+        }
+      };
+    };
     return jsx("div", {
       ref: this.saveWrapper,
       css: wrapperStyle({
@@ -480,7 +488,8 @@ class ResizableMediaSingleNext extends React.Component {
       resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
       handleComponent: handleComponent,
       "data-testid": resizerNextTestId,
-      isHandleVisible: selected
+      isHandleVisible: selected,
+      handleStyles: nestedHandleStyles(this.isNestedNode())
     }, children));
   }
 }

package/dist/es2019/version-wrapper.js

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

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

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { getMediaClient } from '@atlaskit/media-client';
 import { calcPctFromPx, wrappedLayouts, handleSides, imageAlignmentMap } from '@atlaskit/editor-common/ui';
 import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/utils';
@@ -71,7 +71,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "calcNewSize", function (newWidth, stop) {
       var _this$props2 = _this.props,
         layout = _this$props2.layout,
-        state = _this$props2.view.state,
         containerWidth = _this$props2.containerWidth,
         lineLength = _this$props2.lineLength,
         fullWidthMode = _this$props2.fullWidthMode;
@@ -79,29 +78,32 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       _this.setState({
         resizedPctWidth: newPct
       });
-      var newLayout = hasParentNodeOfType(state.schema.nodes.table)(state.selection) ? layout : _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode);
+      var newLayout = _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode, _this.isNestedNode());
       if (newPct <= 100) {
         if (_this.wrappedLayout && (stop ? newPct !== 100 : true)) {
           newLayout = layout;
         }
         return {
-          width: newPct,
           layout: newLayout
         };
       } else {
         return {
-          width: _this.props.pctWidth || null,
           layout: newLayout
         };
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth, fullWidthMode) {
+    _defineProperty(_assertThisInitialized(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth, fullWidthMode, isNestedNode) {
+      if (isNestedNode) {
+        return 'center';
+      }
       if (fullWidthMode) {
         if (width < contentWidth) {
           return 'center';
         }
         return 'full-width';
       }
+
+      // handle top-level node in fixed-width editor
       if (width <= contentWidth) {
         return 'center';
       }
@@ -147,7 +149,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       return dispatch(tr);
     }, MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
     _defineProperty(_assertThisInitialized(_this), "calcMaxWidth", memoizeOne(function (contentWidth, containerWidth, fullWidthMode) {
-      if (fullWidthMode) {
+      if (_this.isNestedNode() || fullWidthMode) {
         return contentWidth;
       }
       return calcMediaSingleMaxWidth(containerWidth);
@@ -262,14 +264,20 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       }
       _this.setIsResizing(false);
       _this.displayGuideline([]);
+      var newWidth = width;
+      if (calculatedWidthWithLayout.layout === 'full-width') {
+        // When a node reaches full width in current viewport,
+        // update its width with 1800 to align with pixel entry
+        newWidth = akEditorFullWidthLayoutWidth;
+      }
       _this.setState({
         isResizing: false,
         size: {
-          width: width,
+          width: newWidth,
           height: height
         }
       }, function () {
-        updateSize(width, calculatedWidthWithLayout.layout);
+        updateSize(newWidth, calculatedWidthWithLayout.layout);
       });
     });
     var initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
@@ -291,7 +299,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   _createClass(ResizableMediaSingleNext, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
       var offsetLeft = calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
       if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
         this.setState({
@@ -317,18 +324,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           }
         });
       }
-      if (this.props.layout === 'full-width' && !this.isNestedNode() && prevProps.containerWidth !== this.props.containerWidth) {
-        // To achieve edge-to-edge for full-width, we need to update its width according to containerWidth
-        // Update state to allow resizer to get most up-to-date width to avoid jumping when start resizing
-        this.setState(function (prevState) {
-          return {
-            size: {
-              width: calcMediaSingleMaxWidth(_this2.props.containerWidth),
-              height: prevState.size.height
-            }
-          };
-        });
-      }
       return true;
     }
   }, {
@@ -496,7 +491,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      var _this2 = this;
       var _this$props8 = this.props,
         origWidth = _this$props8.width,
         layout = _this$props8.layout,
@@ -514,7 +509,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       handleSides.forEach(function (side) {
         var oppositeSide = side === 'left' ? 'right' : 'left';
         enable[side] = nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
-        if (side === 'left' && _this3.insideInlineLike) {
+        if (side === 'left' && _this2.insideInlineLike) {
           enable[side] = false;
         }
       });
@@ -526,9 +521,23 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
       });
       var resizerNextClassName = classnames(className, resizerStyles);
-      var maxWidth = this.isNestedNode() ? undefined // fall back to 'max-width: 100%'
-      : this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
+      var maxWidth = !isResizing && this.isNestedNode() ?
+      // set undefined to fall back to 100%
+      undefined : this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
       var minWidth = this.calcMinWidth(isVideoFile, lineLength);
+      var nestedHandleStyles = function nestedHandleStyles(isNestedNode) {
+        if (!isNestedNode) {
+          return;
+        }
+        return {
+          left: {
+            left: "calc(".concat("var(--ds-space-075, 0.375em)", " * -1)")
+          },
+          right: {
+            right: "calc(".concat("var(--ds-space-075, 0.375em)", " * -1)")
+          }
+        };
+      };
       return jsx("div", {
         ref: this.saveWrapper,
         css: wrapperStyle({
@@ -554,7 +563,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
         handleComponent: handleComponent,
         "data-testid": resizerNextTestId,
-        isHandleVisible: selected
+        isHandleVisible: selected,
+        handleStyles: nestedHandleStyles(this.isNestedNode())
       }, children));
     }
   }]);

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "187.35.0";
+export var version = "187.35.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

@@ -36,10 +36,9 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
     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';
+    calcUnwrappedLayout: (width: number, containerWidth: number, contentWidth: number, fullWidthMode?: boolean, isNestedNode?: boolean) => 'center' | 'wide' | 'full-width';
     calcPxHeight: (newWidth: number) => number;
     private saveWrapper;
     private displayGuideline;
@@ -53,7 +52,6 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
         width: number;
         height: number;
         calculatedWidthWithLayout: {
-            width: number | null;
             layout: MediaSingleLayout;
         };
     };

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

@@ -36,10 +36,9 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
     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';
+    calcUnwrappedLayout: (width: number, containerWidth: number, contentWidth: number, fullWidthMode?: boolean, isNestedNode?: boolean) => 'center' | 'wide' | 'full-width';
     calcPxHeight: (newWidth: number) => number;
     private saveWrapper;
     private displayGuideline;
@@ -53,7 +52,6 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
         width: number;
         height: number;
         calculatedWidthWithLayout: {
-            width: number | null;
             layout: MediaSingleLayout;
         };
     };

package/package.json

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