@atlaskit/editor-core 187.14.4 → 187.14.8

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @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
+
+- [`3bbe8f91f34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3bbe8f91f34) - refactor ResizableMediaSingleNext around guidelines and snapping
+- [`a675f834911`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a675f834911) - Introduce `commands` optional parameter to `NextEditorPlugin`. It can be used similarly to `actions` in `NextEditorPlugin` but `commands` must adhere to the type of `PluginCommand`:
+
+  ```ts
+  type PluginCommand = ({ tr }: { tr: Transaction }) => Transaction | null;
+  ```
+
+  `PluginCommand`s are specifically used for code that is executed to modify a Transaction. They should be used in preference to the existing prosemirror `Command` type.
+
+- Updated dependencies
+
 ## 187.14.4
 
 ### Patch Changes

package/dist/cjs/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -19,6 +19,7 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
 var _picker = require("@atlaskit/emoji/picker");
 var _ui = require("@atlaskit/editor-common/ui");
+var _preset = require("@atlaskit/editor-common/preset");
 var _ToolbarButton = _interopRequireDefault(require("../../../../ui/ToolbarButton"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _actions = require("../../../date/actions");
@@ -177,7 +178,9 @@ var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         pluginInjectionApi = _this$props.pluginInjectionApi;
       var state = editorView.state,
         dispatch = editorView.dispatch;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.hyperlink) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions.showLinkToolbar(inputMethod)(state, dispatch);
+
+      // We should update this to use `pluginInjectionApi.executeCommand` once available
+      (0, _preset.pluginCommandToPMCommand)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.hyperlink) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.commands.showLinkToolbar(inputMethod))(state, dispatch);
       return true;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insertMention", function (inputMethod) {

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';
@@ -58,12 +59,28 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     var _this;
     (0, _classCallCheck2.default)(this, ResizableMediaSingleNext);
     _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcNewSize", function (newWidth, stop) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "guidelines", []);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getAllGuidelines", function () {
       var _this$props = _this.props,
-        layout = _this$props.layout,
-        state = _this$props.view.state,
-        containerWidth = _this$props.containerWidth,
+        view = _this$props.view,
         lineLength = _this$props.lineLength;
+      var defaultGuidelines = _this.getDefaultGuidelines();
+      // disable guidelines for nested media single node
+      var dynamicGuidelines = _this.isNestedNode() ? [] : (0, _guideline.generateDynamicGuidelines)(view.state, lineLength, {
+        styles: {
+          lineStyle: 'dashed'
+        },
+        show: false
+      });
+      var guidelines = [].concat((0, _toConsumableArray2.default)(defaultGuidelines), (0, _toConsumableArray2.default)(dynamicGuidelines));
+      return guidelines;
+    });
+    (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;
       var newPct = (0, _ui.calcPctFromPx)(newWidth, _this.props.lineLength) * 100;
       _this.setState({
         resizedPctWidth: newPct
@@ -102,10 +119,10 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       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$props2 = _this.props,
-        _this$props2$width = _this$props2.width,
-        width = _this$props2$width === void 0 ? newWidth : _this$props2$width,
-        height = _this$props2.height;
+      var _this$props3 = _this.props,
+        _this$props3$width = _this$props3.width,
+        width = _this$props3$width === void 0 ? newWidth : _this$props3$width,
+        height = _this$props3.height;
       return Math.round(height / width * newWidth);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "saveWrapper", function (wrapper) {
@@ -126,6 +143,111 @@ 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;
+      var guidelineSnapsReference = arguments.length > 2 ? arguments[2] : undefined;
+      if (guidelineSnapsReference.snaps.x) {
+        var _findClosestSnap = (0, _guideline.findClosestSnap)(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, _mediaSingle.MEDIA_SINGLE_SNAP_GAP),
+          gap = _findClosestSnap.gap,
+          activeGuidelineKeys = _findClosestSnap.keys;
+        _this.displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _mediaSingle.MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines));
+      }
+    });
+    (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 calculatedWidthWithLayout = _this.calcNewSize(calculatedWidth, onResizeStop);
+      var calculatedHeightWithLayout = _this.getHeightFromNewWidth(originalWidth, originalHeight, calculatedWidth);
+      return {
+        width: calculatedWidth,
+        height: calculatedHeightWithLayout,
+        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), "handleResizeStart", function () {
+      _this.setState({
+        isResizing: true
+      });
+      _this.selectCurrentMediaNode();
+      _this.setIsResizing(true);
+      // re-calucate guidelines
+      _this.guidelines = _this.getAllGuidelines();
+      return 0;
+    });
+    (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),
+        width = _this$calculateSizeSt.width,
+        height = _this$calculateSizeSt.height,
+        calculatedWidthWithLayout = _this$calculateSizeSt.calculatedWidthWithLayout;
+      var guidelineSnaps = (0, _guideline.getGuidelineSnaps)(_this.guidelines, lineLength, layout);
+      _this.updateActiveGuidelines(width, _this.guidelines, guidelineSnaps);
+      _this.setState({
+        size: {
+          width: width,
+          height: height
+        },
+        snaps: guidelineSnaps.snaps
+      });
+      if (calculatedWidthWithLayout.layout !== layout) {
+        updateSize(width, calculatedWidthWithLayout.layout);
+      }
+    });
+    (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),
+        width = _this$calculateSizeSt2.width,
+        height = _this$calculateSizeSt2.height,
+        calculatedWidthWithLayout = _this$calculateSizeSt2.calculatedWidthWithLayout;
+      _this.setIsResizing(false);
+      _this.displayGuideline([]);
+      if (dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent(getResizeAnalyticsEvent(nodeType, calculatedWidthWithLayout.width, calculatedWidthWithLayout.layout));
+      }
+      _this.setState({
+        isResizing: false,
+        size: {
+          width: width,
+          height: height
+        }
+      }, function () {
+        updateSize(width, calculatedWidthWithLayout.layout);
+      });
+    });
     var initialWidth = props.mediaSingleWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
     _this.state = {
       offsetLeft: (0, _mediaSingle.calculateOffsetLeft)(_this.insideInlineLike, _this.insideLayout, _this.props.view.dom, undefined),
@@ -135,7 +257,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       size: {
         width: initialWidth,
         height: _this.calcPxHeight(initialWidth)
-      }
+      },
+      snaps: {}
     };
     return _this;
   }
@@ -149,15 +272,15 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(ResizableMediaSingleNext, [{
     key: "calcInitialWidth",
     value: function calcInitialWidth() {
-      var _this$props3 = this.props,
-        origWidth = _this$props3.width,
-        contentWidth = _this$props3.lineLength,
-        containerWidth = _this$props3.containerWidth;
+      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, prevState) {
+    value: function componentDidUpdate(prevProps) {
       var offsetLeft = (0, _mediaSingle.calculateOffsetLeft)(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
       if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
         this.setState({
@@ -172,10 +295,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           resizedPctWidth: this.props.pctWidth
         });
       }
-      if (prevState.isResizing !== this.state.isResizing && this.state.isResizing) {
-        var guidelines = this.getDefaultGuidelines();
-        this.displayGuideline(guidelines);
-      }
       if (prevProps.mediaSingleWidth !== this.props.mediaSingleWidth && this.props.mediaSingleWidth) {
         // update size when lineLength becomes defined later
         // ensures extended experience renders legacy image with the same size as the legacy experience
@@ -199,78 +318,14 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getDefaultGuidelines",
     value: function getDefaultGuidelines() {
-      var _this$props4 = this.props,
-        lineLength = _this$props4.lineLength,
-        containerWidth = _this$props4.containerWidth,
-        fullWidthMode = _this$props4.fullWidthMode;
+      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);
     }
-
-    // Calculate width of media nodes for snaps based on dynamic guidelines
-    // TODO:  refactor this later, maybe use state to hold snaps array
-  }, {
-    key: "getSnaps",
-    value: function getSnaps() {
-      var _this$props5 = this.props,
-        view = _this$props5.view,
-        lineLength = _this$props5.lineLength;
-      var dom = view.dom;
-      var defaultGuidelines = this.getDefaultGuidelines();
-      // disable guidelines for nested media single node
-      var dynamicGuidelines = this.isNestedNode() ? [] : (0, _guideline.generateDynamicGuidelines)(view.state, lineLength, {
-        styles: {
-          lineStyle: 'dashed'
-        },
-        show: false
-      });
-      var guidelines = [].concat((0, _toConsumableArray2.default)(defaultGuidelines), (0, _toConsumableArray2.default)(dynamicGuidelines));
-      var mediaSingleSelector = 'div.mediaSingleView-content-wrap.ProseMirror-selectednode';
-      var _dom$getBoundingClien = dom.getBoundingClientRect(),
-        width = _dom$getBoundingClien.width;
-      var halfWidth = width / 2;
-      var selectedMedia = dom.querySelector(mediaSingleSelector);
-      if (selectedMedia) {
-        var pixelWidth = parseFloat(selectedMedia.getAttribute('width') || '') || 0;
-        var layout = selectedMedia.getAttribute('layout');
-        var snap = 0;
-        switch (layout) {
-          case 'align-start':
-          case 'wrap-left':
-            snap = pixelWidth - halfWidth;
-            break;
-          case 'align-end':
-          case 'wrap-right':
-            snap = width - pixelWidth - halfWidth;
-            break;
-          case 'center':
-          case 'wide':
-          case 'full-width':
-            snap = -pixelWidth / 2;
-            break;
-          // we ingnore full-width and wide
-          default:
-            snap = 0;
-        }
-        var snapWidths = (0, _guideline.getSnapWidth)(guidelines, pixelWidth, snap, layout);
-        var snapToWidths = snapWidths.map(function (s) {
-          return s && s.width;
-        });
-
-        // update guidelines
-        if (this.state.isResizing) {
-          var _findClosestSnap = (0, _guideline.findClosestSnap)(this.state.size.width, snapToWidths, snapWidths, _mediaSingle.MEDIA_SINGLE_HIGHLIGHT_GAP),
-            gap = _findClosestSnap.gap,
-            activeGuidelineKeys = _findClosestSnap.keys;
-          this.displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _mediaSingle.MEDIA_SINGLE_HIGHLIGHT_GAP, activeGuidelineKeys, guidelines));
-        }
-        return snapToWidths.length > 0 ? {
-          x: snapToWidths
-        } : {};
-      }
-      return {};
-    }
   }, {
     key: "wrappedLayout",
     get: function get() {
@@ -411,15 +466,16 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props6 = this.props,
-        origWidth = _this$props6.width,
-        layout = _this$props6.layout,
-        pctWidth = _this$props6.pctWidth,
-        containerWidth = _this$props6.containerWidth,
-        fullWidthMode = _this$props6.fullWidthMode,
-        selected = _this$props6.selected,
-        children = _this$props6.children,
-        intl = _this$props6.intl;
+      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,
+        intl = _this$props8.intl,
+        lineLength = _this$props8.lineLength;
       var _this$state = this.state,
         isResizing = _this$state.isResizing,
         size = _this$state.size;
@@ -432,99 +488,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         }
       });
 
-      /**
-       * NEW REFACTOR
-       */
-      var roundPixelValue = function roundPixelValue(value) {
-        return Math.round(value);
-      };
-      var getHeightFromNewWidth = function getHeightFromNewWidth(originalWidth, originalHeight, newWidth) {
-        return roundPixelValue(originalHeight / originalWidth * newWidth);
-      };
-      var calculateSizeState = function calculateSizeState(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 = roundPixelValue(size.width + delta.width);
-        var calculatedWidthWithLayout = _this2.calcNewSize(calculatedWidth, onResizeStop);
-        var calculatedHeightWithLayout = getHeightFromNewWidth(originalWidth, originalHeight, calculatedWidth);
-        return {
-          width: calculatedWidth,
-          height: calculatedHeightWithLayout,
-          calculatedWidthWithLayout: calculatedWidthWithLayout
-        };
-      };
-      var selectCurrentMediaNode = function selectCurrentMediaNode() {
-        if (!_this2.props.selected && typeof _this2.props.getPos === 'function') {
-          var propPos = _this2.props.getPos();
-          if (propPos !== undefined) {
-            (0, _utils2.setNodeSelection)(_this2.props.view, propPos);
-          }
-        }
-      };
-      var handleResizeStart = function handleResizeStart() {
-        _this2.setState({
-          isResizing: true
-        });
-        selectCurrentMediaNode();
-        _this2.setIsResizing(true);
-
-        // TODO: Update once type updated from editor common resizer
-        return 0;
-      };
-      var handleResize = function handleResize(size, delta) {
-        var _this2$props = _this2.props,
-          originalWidth = _this2$props.width,
-          originalHeight = _this2$props.height,
-          layout = _this2$props.layout,
-          updateSize = _this2$props.updateSize;
-        var _calculateSizeState = calculateSizeState(size, delta, originalWidth, originalHeight),
-          width = _calculateSizeState.width,
-          height = _calculateSizeState.height,
-          calculatedWidthWithLayout = _calculateSizeState.calculatedWidthWithLayout;
-        _this2.setState({
-          size: {
-            width: width,
-            height: height
-          }
-        });
-        if (calculatedWidthWithLayout.layout !== layout) {
-          updateSize(width, calculatedWidthWithLayout.layout);
-        }
-
-        // TODO: Update once type updated from editor common resizer
-        return 0;
-      };
-      var handleResizeStop = function handleResizeStop(size, delta) {
-        var _this2$props2 = _this2.props,
-          originalWidth = _this2$props2.width,
-          originalHeight = _this2$props2.height,
-          updateSize = _this2$props2.updateSize,
-          dispatchAnalyticsEvent = _this2$props2.dispatchAnalyticsEvent,
-          nodeType = _this2$props2.nodeType;
-        var _calculateSizeState2 = calculateSizeState(size, delta, originalWidth, originalHeight, true),
-          width = _calculateSizeState2.width,
-          height = _calculateSizeState2.height,
-          calculatedWidthWithLayout = _calculateSizeState2.calculatedWidthWithLayout;
-        _this2.setIsResizing(false);
-        _this2.displayGuideline([]);
-        if (dispatchAnalyticsEvent) {
-          dispatchAnalyticsEvent(getResizeAnalyticsEvent(nodeType, calculatedWidthWithLayout.width, calculatedWidthWithLayout.layout));
-        }
-        _this2.setState({
-          isResizing: false,
-          size: {
-            width: width,
-            height: height
-          }
-        }, function () {
-          updateSize(width, calculatedWidthWithLayout.layout);
-        });
-
-        // TODO: Update once type updated from editor common resizer
-        return 0;
-      };
-
       // TODO: Clean up where this lives and how it gets generated
       var className = (0, _classnames.default)(_styles.richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', this.props.className, {
         'not-resized': !pctWidth,
@@ -534,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)({
@@ -547,14 +511,15 @@ 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,
         width: size.width,
-        handleResizeStart: handleResizeStart,
-        handleResize: handleResize,
-        handleResizeStop: handleResizeStop,
-        snap: this.getSnaps(),
+        handleResizeStart: this.handleResizeStart,
+        handleResize: this.handleResize,
+        handleResizeStop: this.handleResizeStop,
+        snap: this.state.snaps,
         resizeRatio: _utils2.nonWrappedLayouts.includes(layout) ? 2 : 1,
         "data-testid": resizerNextTestId
       }, showSizeGuide && (0, _react2.jsx)(_ResizeLabel.default, {

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.4";
+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.4",
+	"version": "187.14.8",
 	"sideEffects": false
 }

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl-next';
 import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
 import { Popup } from '@atlaskit/editor-common/ui';
+import { pluginCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import ToolbarButton from '../../../../ui/ToolbarButton';
 import { separatorStyles, buttonGroupStyle, wrapperStyle } from '@atlaskit/editor-common/styles';
 import { insertDate } from '../../../date/actions';
@@ -161,7 +162,9 @@ export class ToolbarInsertBlock extends React.PureComponent {
         state,
         dispatch
       } = editorView;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.hyperlink) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions.showLinkToolbar(inputMethod)(state, dispatch);
+
+      // We should update this to use `pluginInjectionApi.executeCommand` once available
+      pluginCommandToPMCommand(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.hyperlink) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.commands.showLinkToolbar(inputMethod))(state, dispatch);
       return true;
     });
     _defineProperty(this, "insertMention", inputMethod => {

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", {