@atlaskit/editor-core 187.14.7 → 187.14.8

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-core
 
+## 187.14.8
+
+### Patch Changes
+
+- [`8fe864e4f7a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8fe864e4f7a) - [ux] ED-19336: Fixed insert column button not visible when sticky header is enabled."
+- [`4cbae03c15c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4cbae03c15c) - Set maxWidth for ResizerNext to stop lable updating when reaching max width
+
 ## 187.14.7
 
 ### Patch Changes

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ReactMediaSingleNode = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -247,11 +248,17 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       }
       (0, _captions.insertAndSelectCaptionFromMediaSinglePos)(getPos(), node)(view.state, view.dispatch);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLineLength", function (view, pos) {
+    /**
+     * Get parent width for a nested media single node
+     * @param view Editor view
+     * @param pos node position
+     * @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
+     */
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLineLength", function (view, pos, includeMoreParentNodeTypes) {
       if (typeof pos !== 'number') {
         return null;
       }
-      if ((0, _utils.isRichMediaInsideOfBlockNode)(view, pos)) {
+      if ((0, _utils.isRichMediaInsideOfBlockNode)(view, pos, includeMoreParentNodeTypes)) {
         var $pos = view.state.doc.resolve(pos);
         var domNode = view.nodeDOM($pos.pos);
         if ($pos.nodeAfter && _utils.floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
@@ -363,7 +370,8 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         height = _mediaSingle.DEFAULT_IMAGE_HEIGHT;
       }
       var isSelected = selected();
-      var contentWidth = this.getLineLength(view, getPos()) || lineLength;
+      var contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
+      var contentWidth = this.getLineLength(view, getPos(), true) || lineLength;
       var mediaSingleProps = {
         layout: layout,
         width: width,
@@ -378,7 +386,9 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
           widthType: widthType,
           origWidth: width,
           layout: layout,
-          contentWidth: contentWidth,
+          // This will only be used when calculating legacy media single width
+          // thus we use the legecy value (exclude table as container node)
+          contentWidth: contentWidthForLegacyExperience,
           containerWidth: containerWidth,
           gutterOffset: _mediaSingle.MEDIA_SINGLE_GUTTER_SIZE
         })
@@ -417,7 +427,9 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         ref: this.captionPlaceHolderRef,
         onClick: this.clickPlaceholder
       }));
-      return canResize ? (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? (0, _react.jsx)(_ResizableMediaSingleNext.default, ResizableMediaSingleProps, MediaChildren) : (0, _react.jsx)(_ResizableMediaSingle.default, ResizableMediaSingleProps, MediaChildren) : (0, _react.jsx)(_ui.MediaSingle, mediaSingleProps, MediaChildren);
+      return canResize ? (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? (0, _react.jsx)(_ResizableMediaSingleNext.default, ResizableMediaSingleProps, MediaChildren) : (0, _react.jsx)(_ResizableMediaSingle.default, (0, _extends2.default)({}, ResizableMediaSingleProps, {
+        lineLength: contentWidthForLegacyExperience
+      }), MediaChildren) : (0, _react.jsx)(_ui.MediaSingle, mediaSingleProps, MediaChildren);
     }
   }]);
   return MediaSingleNode;

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

@@ -32,6 +32,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _guideline = require("@atlaskit/editor-common/guideline");
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var resizerNextTestId = 'mediaSingle.resizerNext.testid';
@@ -142,6 +143,12 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
       return dispatch(tr);
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcMaxWidth", (0, _memoizeOne.default)(function (contentWidth, containerWidth, fullWidthMode) {
+      if (_this.isNestedNode() || fullWidthMode) {
+        return contentWidth;
+      }
+      return (0, _mediaSingle.calcMediaSingleMaxWidth)(containerWidth);
+    }));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateActiveGuidelines", function () {
       var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
       var guidelines = arguments.length > 1 ? arguments[1] : undefined;
@@ -214,9 +221,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       if (calculatedWidthWithLayout.layout !== layout) {
         updateSize(width, calculatedWidthWithLayout.layout);
       }
-
-      // TODO: Update once type updated from editor common resizer
-      return 0;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResizeStop", function (size, delta) {
       var _this$props5 = _this.props,
@@ -243,9 +247,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       }, function () {
         updateSize(width, calculatedWidthWithLayout.layout);
       });
-
-      // TODO: Update once type updated from editor common resizer
-      return 0;
     });
     var initialWidth = props.mediaSingleWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
     _this.state = {
@@ -473,7 +474,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         fullWidthMode = _this$props8.fullWidthMode,
         selected = _this$props8.selected,
         children = _this$props8.children,
-        intl = _this$props8.intl;
+        intl = _this$props8.intl,
+        lineLength = _this$props8.lineLength;
       var _this$state = this.state,
         isResizing = _this$state.isResizing,
         size = _this$state.size;
@@ -495,6 +497,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       var resizerNextClassName = (0, _classnames.default)(className, _styles.resizerStyles);
       var showSizeGuide = selected || isResizing;
       var label = layout === 'full-width' ? intl.formatMessage(_resizableMediaSingleMessages.messages.fullWidthImage) : "".concat(this.state.size.width, " x ").concat(this.state.size.height);
+      var maxWidth = this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
       return (0, _react2.jsx)("div", {
         ref: this.saveWrapper,
         css: (0, _styled.wrapperStyle)({
@@ -508,6 +511,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         })
       }, (0, _react2.jsx)(_resizer.ResizerNext, {
         minWidth: _mediaSingle.MEDIA_SINGLE_MIN_PIXEL_WIDTH,
+        maxWidth: maxWidth,
         className: resizerNextClassName,
         snapGap: _mediaSingle.MEDIA_SINGLE_SNAP_GAP,
         enable: enable,

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

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.14.7",
+	"version": "187.14.8",
 	"sideEffects": false
 }

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
@@ -173,11 +174,17 @@ export default class MediaSingleNode extends Component {
       }
       insertAndSelectCaptionFromMediaSinglePos(getPos(), node)(view.state, view.dispatch);
     });
-    _defineProperty(this, "getLineLength", (view, pos) => {
+    /**
+     * Get parent width for a nested media single node
+     * @param view Editor view
+     * @param pos node position
+     * @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
+     */
+    _defineProperty(this, "getLineLength", (view, pos, includeMoreParentNodeTypes) => {
       if (typeof pos !== 'number') {
         return null;
       }
-      if (isRichMediaInsideOfBlockNode(view, pos)) {
+      if (isRichMediaInsideOfBlockNode(view, pos, includeMoreParentNodeTypes)) {
         const $pos = view.state.doc.resolve(pos);
         const domNode = view.nodeDOM($pos.pos);
         if ($pos.nodeAfter && floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
@@ -270,7 +277,8 @@ export default class MediaSingleNode extends Component {
       height = DEFAULT_IMAGE_HEIGHT;
     }
     const isSelected = selected();
-    const contentWidth = this.getLineLength(view, getPos()) || lineLength;
+    const contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
+    const contentWidth = this.getLineLength(view, getPos(), true) || lineLength;
     const mediaSingleProps = {
       layout,
       width,
@@ -285,7 +293,9 @@ export default class MediaSingleNode extends Component {
         widthType,
         origWidth: width,
         layout,
-        contentWidth,
+        // This will only be used when calculating legacy media single width
+        // thus we use the legecy value (exclude table as container node)
+        contentWidth: contentWidthForLegacyExperience,
         containerWidth,
         gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
       })
@@ -327,7 +337,9 @@ export default class MediaSingleNode extends Component {
       ref: this.captionPlaceHolderRef,
       onClick: this.clickPlaceholder
     }));
-    return canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, ResizableMediaSingleProps, MediaChildren) : jsx(ResizableMediaSingle, ResizableMediaSingleProps, MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
+    return canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, ResizableMediaSingleProps, MediaChildren) : jsx(ResizableMediaSingle, _extends({}, ResizableMediaSingleProps, {
+      lineLength: contentWidthForLegacyExperience
+    }), MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
   }
 }
 _defineProperty(MediaSingleNode, "defaultProps", {

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

@@ -15,8 +15,9 @@ import { messages } from './resizable-media-single-messages';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import classnames from 'classnames';
 import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
-import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
+import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
 import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps } from '@atlaskit/editor-common/guideline';
+import memoizeOne from 'memoize-one';
 export const resizerNextTestId = 'mediaSingle.resizerNext.testid';
 
 // TODO: Create new fixed image size event
@@ -127,6 +128,12 @@ class ResizableMediaSingleNext extends React.Component {
       tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
       return dispatch(tr);
     });
+    _defineProperty(this, "calcMaxWidth", memoizeOne((contentWidth, containerWidth, fullWidthMode) => {
+      if (this.isNestedNode() || fullWidthMode) {
+        return contentWidth;
+      }
+      return calcMediaSingleMaxWidth(containerWidth);
+    }));
     _defineProperty(this, "updateActiveGuidelines", (width = 0, guidelines, guidelineSnapsReference) => {
       if (guidelineSnapsReference.snaps.x) {
         const {
@@ -192,9 +199,6 @@ class ResizableMediaSingleNext extends React.Component {
       if (calculatedWidthWithLayout.layout !== layout) {
         updateSize(width, calculatedWidthWithLayout.layout);
       }
-
-      // TODO: Update once type updated from editor common resizer
-      return 0;
     });
     _defineProperty(this, "handleResizeStop", (size, delta) => {
       const {
@@ -223,9 +227,6 @@ class ResizableMediaSingleNext extends React.Component {
       }, () => {
         updateSize(width, calculatedWidthWithLayout.layout);
       });
-
-      // TODO: Update once type updated from editor common resizer
-      return 0;
     });
     const initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
     this.state = {
@@ -390,7 +391,8 @@ class ResizableMediaSingleNext extends React.Component {
       fullWidthMode,
       selected,
       children,
-      intl
+      intl,
+      lineLength
     } = this.props;
     const {
       isResizing,
@@ -414,6 +416,7 @@ class ResizableMediaSingleNext extends React.Component {
     const resizerNextClassName = classnames(className, resizerStyles);
     const showSizeGuide = selected || isResizing;
     const label = layout === 'full-width' ? intl.formatMessage(messages.fullWidthImage) : `${this.state.size.width} x ${this.state.size.height}`;
+    const maxWidth = this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
     return jsx("div", {
       ref: this.saveWrapper,
       css: wrapperStyle({
@@ -427,6 +430,7 @@ class ResizableMediaSingleNext extends React.Component {
       })
     }, jsx(ResizerNext, {
       minWidth: MEDIA_SINGLE_MIN_PIXEL_WIDTH,
+      maxWidth: maxWidth,
       className: resizerNextClassName,
       snapGap: MEDIA_SINGLE_SNAP_GAP,
       enable: enable,

package/dist/es2019/version-wrapper.js

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

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.14.7",
+	"version": "187.14.8",
 	"sideEffects": false
 }

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

@@ -1,4 +1,5 @@
 import _get from "@babel/runtime/helpers/get";
+import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -238,11 +239,17 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       }
       insertAndSelectCaptionFromMediaSinglePos(getPos(), node)(view.state, view.dispatch);
     });
-    _defineProperty(_assertThisInitialized(_this), "getLineLength", function (view, pos) {
+    /**
+     * Get parent width for a nested media single node
+     * @param view Editor view
+     * @param pos node position
+     * @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
+     */
+    _defineProperty(_assertThisInitialized(_this), "getLineLength", function (view, pos, includeMoreParentNodeTypes) {
       if (typeof pos !== 'number') {
         return null;
       }
-      if (isRichMediaInsideOfBlockNode(view, pos)) {
+      if (isRichMediaInsideOfBlockNode(view, pos, includeMoreParentNodeTypes)) {
         var $pos = view.state.doc.resolve(pos);
         var domNode = view.nodeDOM($pos.pos);
         if ($pos.nodeAfter && floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
@@ -354,7 +361,8 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         height = DEFAULT_IMAGE_HEIGHT;
       }
       var isSelected = selected();
-      var contentWidth = this.getLineLength(view, getPos()) || lineLength;
+      var contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
+      var contentWidth = this.getLineLength(view, getPos(), true) || lineLength;
       var mediaSingleProps = {
         layout: layout,
         width: width,
@@ -369,7 +377,9 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
           widthType: widthType,
           origWidth: width,
           layout: layout,
-          contentWidth: contentWidth,
+          // This will only be used when calculating legacy media single width
+          // thus we use the legecy value (exclude table as container node)
+          contentWidth: contentWidthForLegacyExperience,
           containerWidth: containerWidth,
           gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
         })
@@ -408,7 +418,9 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         ref: this.captionPlaceHolderRef,
         onClick: this.clickPlaceholder
       }));
-      return canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, ResizableMediaSingleProps, MediaChildren) : jsx(ResizableMediaSingle, ResizableMediaSingleProps, MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
+      return canResize ? getBooleanFF('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, ResizableMediaSingleProps, MediaChildren) : jsx(ResizableMediaSingle, _extends({}, ResizableMediaSingleProps, {
+        lineLength: contentWidthForLegacyExperience
+      }), MediaChildren) : jsx(MediaSingle, mediaSingleProps, MediaChildren);
     }
   }]);
   return MediaSingleNode;

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

@@ -26,8 +26,9 @@ import { messages } from './resizable-media-single-messages';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import classnames from 'classnames';
 import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
-import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
+import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
 import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps } from '@atlaskit/editor-common/guideline';
+import memoizeOne from 'memoize-one';
 export var resizerNextTestId = 'mediaSingle.resizerNext.testid';
 
 // TODO: Create new fixed image size event
@@ -135,6 +136,12 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
       return dispatch(tr);
     });
+    _defineProperty(_assertThisInitialized(_this), "calcMaxWidth", memoizeOne(function (contentWidth, containerWidth, fullWidthMode) {
+      if (_this.isNestedNode() || fullWidthMode) {
+        return contentWidth;
+      }
+      return calcMediaSingleMaxWidth(containerWidth);
+    }));
     _defineProperty(_assertThisInitialized(_this), "updateActiveGuidelines", function () {
       var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
       var guidelines = arguments.length > 1 ? arguments[1] : undefined;
@@ -207,9 +214,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       if (calculatedWidthWithLayout.layout !== layout) {
         updateSize(width, calculatedWidthWithLayout.layout);
       }
-
-      // TODO: Update once type updated from editor common resizer
-      return 0;
     });
     _defineProperty(_assertThisInitialized(_this), "handleResizeStop", function (size, delta) {
       var _this$props5 = _this.props,
@@ -236,9 +240,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       }, function () {
         updateSize(width, calculatedWidthWithLayout.layout);
       });
-
-      // TODO: Update once type updated from editor common resizer
-      return 0;
     });
     var initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
     _this.state = {
@@ -466,7 +467,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         fullWidthMode = _this$props8.fullWidthMode,
         selected = _this$props8.selected,
         children = _this$props8.children,
-        intl = _this$props8.intl;
+        intl = _this$props8.intl,
+        lineLength = _this$props8.lineLength;
       var _this$state = this.state,
         isResizing = _this$state.isResizing,
         size = _this$state.size;
@@ -488,6 +490,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       var resizerNextClassName = classnames(className, resizerStyles);
       var showSizeGuide = selected || isResizing;
       var label = layout === 'full-width' ? intl.formatMessage(messages.fullWidthImage) : "".concat(this.state.size.width, " x ").concat(this.state.size.height);
+      var maxWidth = this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
       return jsx("div", {
         ref: this.saveWrapper,
         css: wrapperStyle({
@@ -501,6 +504,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         })
       }, jsx(ResizerNext, {
         minWidth: MEDIA_SINGLE_MIN_PIXEL_WIDTH,
+        maxWidth: maxWidth,
         className: resizerNextClassName,
         snapGap: MEDIA_SINGLE_SNAP_GAP,
         enable: enable,

package/dist/esm/version-wrapper.js

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

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.14.7",
+	"version": "187.14.8",
 	"sideEffects": false
 }

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

@@ -41,6 +41,12 @@ export default class MediaSingleNode extends Component<MediaSingleNodeProps, Med
     onMediaSingleClicked: (event: MouseEvent) => void;
     render(): jsx.JSX.Element;
     private clickPlaceholder;
+    /**
+     * Get parent width for a nested media single node
+     * @param view Editor view
+     * @param pos node position
+     * @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
+     */
     private getLineLength;
 }
 declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps> {

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

@@ -54,6 +54,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
     private saveWrapper;
     private displayGuideline;
     private setIsResizing;
+    private calcMaxWidth;
     updateActiveGuidelines: (width: number | undefined, guidelines: GuidelineConfig[], guidelineSnapsReference: GuidelineSnapsReference) => void;
     roundPixelValue: (value: number) => number;
     getHeightFromNewWidth: (originalWidth: number, originalHeight: number, newWidth: number) => number;

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

@@ -41,6 +41,12 @@ export default class MediaSingleNode extends Component<MediaSingleNodeProps, Med
     onMediaSingleClicked: (event: MouseEvent) => void;
     render(): jsx.JSX.Element;
     private clickPlaceholder;
+    /**
+     * Get parent width for a nested media single node
+     * @param view Editor view
+     * @param pos node position
+     * @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
+     */
     private getLineLength;
 }
 declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps> {

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

@@ -54,6 +54,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
     private saveWrapper;
     private displayGuideline;
     private setIsResizing;
+    private calcMaxWidth;
     updateActiveGuidelines: (width: number | undefined, guidelines: GuidelineConfig[], guidelineSnapsReference: GuidelineSnapsReference) => void;
     roundPixelValue: (value: number) => number;
     getHeightFromNewWidth: (originalWidth: number, originalHeight: number, newWidth: number) => number;

package/package.json

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