@atlaskit/editor-core 187.42.3 → 187.42.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-core
 
+## 187.42.5
+
+### Patch Changes
+
+- [`1c085549bd9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1c085549bd9) - clean up pctWidth used in new image resize experience
+
+## 187.42.4
+
+### Patch Changes
+
+- [`e6122bf1c9a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e6122bf1c9a) - MEX-2481 revert and re-introduce a new fix for media border gap issue
+- [`a29f4f2d43c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a29f4f2d43c) - Fix legacy resizer handle is not highlighted on delete button hover
+- Updated dependencies
+
 ## 187.42.3
 
 ### Patch Changes

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

@@ -18,7 +18,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _utils = require("@atlaskit/editor-common/utils");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
-var _ui = require("@atlaskit/editor-common/ui");
 var _mediaCard = require("@atlaskit/media-card");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _react = _interopRequireWildcard(require("react"));
@@ -222,7 +221,6 @@ var MediaNode = /*#__PURE__*/function (_Component) {
           border: !!borderMark
         })
       }, /*#__PURE__*/_react.default.createElement(_mediaCard.Card, {
-        expandByPixel: borderMark && _ui.IMAGE_AND_BORDER_ADJUSTMENT,
         mediaClientConfig: mediaClientConfig,
         resizeMode: "stretchy-fit",
         dimensions: maxDimensions,

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

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

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

@@ -33,9 +33,7 @@ var MediaCardWrapper = function MediaCardWrapper(_ref) {
       borderColor: "var(--custom-palette-color)",
       borderWidth: "".concat(calculatedBorderWidth, "px"),
       borderStyle: 'solid',
-      borderRadius: "".concat(calculatedBorderWidth * 2, "px"),
-      width: calculatedBorderWidth > 0 ? "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)") : undefined,
-      height: calculatedBorderWidth > 0 ? "calc(100% - ".concat(_ui.IMAGE_AND_BORDER_ADJUSTMENT, "px)") : undefined
+      borderRadius: "".concat(calculatedBorderWidth * 2, "px")
     }
   }, (0, _react2.jsx)("div", {
     css: forcedDimensions,
@@ -43,7 +41,9 @@ var MediaCardWrapper = function MediaCardWrapper(_ref) {
       paddingBottom: "".concat(dimensions.height / dimensions.width * 100, "%")
     },
     onContextMenuCapture: onContextMenu
-  }, (0, _react2.jsx)("div", {
+  }, borderWidth > 0 && (0, _react2.jsx)(_ui.MediaBorderGapFiller, {
+    borderColor: "var(--custom-palette-color)"
+  }), (0, _react2.jsx)("div", {
     css: absoluteDiv
   }, children)));
 };

package/dist/cjs/plugins/media/styles.js

@@ -12,7 +12,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _mediaCard = require("@atlaskit/media-card");
 var _templateObject;
-var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    .media-extended-resize-experience[layout^='wrap-'] {\n      // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n      // to prevent scroll bar\n      overflow: visible !important;\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: ", ";\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: ", ";\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .resizer-handle-thumb {\n      background: ", " !important;\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n\n  .warning {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n\n    .resizer-handle-thumb {\n      background: ", " !important;\n    }\n  }\n"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border, ".concat(_colors.N60, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), "var(--ds-icon-warning, ".concat(_colors.Y500, ")"));
+var mediaStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    .media-extended-resize-experience[layout^='wrap-'] {\n      // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n      // to prevent scroll bar\n      overflow: visible !important;\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: ", ";\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: ", ";\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize legacy handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", " !important;\n    }\n    /* Media resize new handlers */\n    .resizer-handle-thumb {\n      background: ", " !important;\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n\n  .warning {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n\n    .resizer-handle-thumb {\n      background: ", " !important;\n    }\n  }\n"])), _styles.mediaSingleSharedStyle, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", _editorSharedStyles.akEditorMediaResizeHandlerPadding, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border, ".concat(_colors.N60, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", _styles.richMediaClassName, _mediaCard.fileCardImageViewSelector, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), _styles.richMediaClassName, _mediaCard.inlinePlayerClassName, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), _styles.richMediaClassName, _mediaCard.newFileExperienceClassName, "var(--ds-border-warning, ".concat(_colors.Y500, ")"), "var(--ds-icon-warning, ".concat(_colors.Y500, ")"));
 
 /* `left: unset` above is to work around Chrome bug where rendering a div with
  * that style applied inside a container that has a scroll, causes any svgs on

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

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

package/dist/cjs/version-wrapper.js

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

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

@@ -2,7 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { withImageLoader } from '@atlaskit/editor-common/utils';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
-import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
 import { Card, CardLoading } from '@atlaskit/media-card';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import React, { Component } from 'react';
@@ -161,7 +160,6 @@ export class MediaNode extends Component {
         }
       }
     }, /*#__PURE__*/React.createElement(Card, {
-      expandByPixel: borderMark && IMAGE_AND_BORDER_ADJUSTMENT,
       mediaClientConfig: mediaClientConfig,
       resizeMode: "stretchy-fit",
       dimensions: maxDimensions,

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

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

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
+import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
 export const MediaInlineNodeSelector = 'media-inline-node';
 export const MediaSingleNodeSelector = 'media-single-node';
 export const figureWrapper = css`
@@ -30,9 +30,7 @@ export const MediaCardWrapper = ({
       borderColor: `var(--custom-palette-color)`,
       borderWidth: `${calculatedBorderWidth}px`,
       borderStyle: 'solid',
-      borderRadius: `${calculatedBorderWidth * 2}px`,
-      width: calculatedBorderWidth > 0 ? `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)` : undefined,
-      height: calculatedBorderWidth > 0 ? `calc(100% - ${IMAGE_AND_BORDER_ADJUSTMENT}px)` : undefined
+      borderRadius: `${calculatedBorderWidth * 2}px`
     }
   }, jsx("div", {
     css: forcedDimensions,
@@ -40,7 +38,9 @@ export const MediaCardWrapper = ({
       paddingBottom: `${dimensions.height / dimensions.width * 100}%`
     },
     onContextMenuCapture: onContextMenu
-  }, jsx("div", {
+  }, borderWidth > 0 && jsx(MediaBorderGapFiller, {
+    borderColor: `var(--custom-palette-color)`
+  }), jsx("div", {
     css: absoluteDiv
   }, children)));
 };

package/dist/es2019/plugins/media/styles.js

@@ -141,7 +141,12 @@ export const mediaStyles = css`
       box-shadow: 0 0 0 1px
         ${`var(--ds-border-danger, ${akEditorDeleteIconColor})`} !important;
     }
-    /* Media resize handlers */
+    /* Media resize legacy handlers */
+    .richMedia-resize-handle-right::after,
+    .richMedia-resize-handle-left::after {
+      background: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`} !important;
+    }
+    /* Media resize new handlers */
     .resizer-handle-thumb {
       background: ${`var(--ds-icon-danger, ${akEditorDeleteIconColor})`} !important;
     }

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

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

package/dist/es2019/version-wrapper.js

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

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

@@ -12,7 +12,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { withImageLoader } from '@atlaskit/editor-common/utils';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
-import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
 import { Card, CardLoading } from '@atlaskit/media-card';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import React, { Component } from 'react';
@@ -210,7 +209,6 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
           border: !!borderMark
         })
       }, /*#__PURE__*/React.createElement(Card, {
-        expandByPixel: borderMark && IMAGE_AND_BORDER_ADJUSTMENT,
         mediaClientConfig: mediaClientConfig,
         resizeMode: "stretchy-fit",
         dimensions: maxDimensions,

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

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

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

@@ -3,7 +3,7 @@ var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { IMAGE_AND_BORDER_ADJUSTMENT } from '@atlaskit/editor-common/ui';
+import { MediaBorderGapFiller } from '@atlaskit/editor-common/ui';
 export var MediaInlineNodeSelector = 'media-inline-node';
 export var MediaSingleNodeSelector = 'media-single-node';
 export var figureWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0;\n"])));
@@ -23,9 +23,7 @@ export var MediaCardWrapper = function MediaCardWrapper(_ref) {
       borderColor: "var(--custom-palette-color)",
       borderWidth: "".concat(calculatedBorderWidth, "px"),
       borderStyle: 'solid',
-      borderRadius: "".concat(calculatedBorderWidth * 2, "px"),
-      width: calculatedBorderWidth > 0 ? "calc(100% - ".concat(IMAGE_AND_BORDER_ADJUSTMENT, "px)") : undefined,
-      height: calculatedBorderWidth > 0 ? "calc(100% - ".concat(IMAGE_AND_BORDER_ADJUSTMENT, "px)") : undefined
+      borderRadius: "".concat(calculatedBorderWidth * 2, "px")
     }
   }, jsx("div", {
     css: forcedDimensions,
@@ -33,7 +31,9 @@ export var MediaCardWrapper = function MediaCardWrapper(_ref) {
       paddingBottom: "".concat(dimensions.height / dimensions.width * 100, "%")
     },
     onContextMenuCapture: onContextMenu
-  }, jsx("div", {
+  }, borderWidth > 0 && jsx(MediaBorderGapFiller, {
+    borderColor: "var(--custom-palette-color)"
+  }), jsx("div", {
     css: absoluteDiv
   }, children)));
 };

package/dist/esm/plugins/media/styles.js

@@ -5,7 +5,7 @@ import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-com
 import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
 import { N60, B200, Y500 } from '@atlaskit/theme/colors';
 import { fileCardImageViewSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
-export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    .media-extended-resize-experience[layout^='wrap-'] {\n      // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n      // to prevent scroll bar\n      overflow: visible !important;\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: ", ";\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: ", ";\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize handlers */\n    .resizer-handle-thumb {\n      background: ", " !important;\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n\n  .warning {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n\n    .resizer-handle-thumb {\n      background: ", " !important;\n    }\n  }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", richMediaClassName, fileCardImageViewSelector, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-warning, ".concat(Y500, ")"), "var(--ds-icon-warning, ".concat(Y500, ")"));
+export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    ", " & [layout='full-width'] .", ",\n    & [layout='wide'] .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n    }\n\n    .media-extended-resize-experience[layout^='wrap-'] {\n      // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n      // to prevent scroll bar\n      overflow: visible !important;\n    }\n\n    & [layout^='wrap-'] + [layout^='wrap-'] {\n      clear: none;\n      & + p,\n      & + div[class^='fabric-editor-align'],\n      & + ul,\n      & + ol,\n      & + h1,\n      & + h2,\n      & + h3,\n      & + h4,\n      & + h5,\n      & + h6 {\n        clear: both !important;\n      }\n      & .", " {\n        margin-left: 0;\n        margin-right: 0;\n      }\n    }\n\n    .mediaSingleView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n      // overwrite default Prosemirror setting making it clear: both\n      clear: inherit;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .mediaSingleView-content-wrap[layout='wrap-right']\n      + .mediaSingleView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n\n    /* Larger margins for resize handlers when at depth 0 of the document */\n    & > .mediaSingleView-content-wrap {\n      .richMedia-resize-handle-right {\n        margin-right: -", "px;\n      }\n      .richMedia-resize-handle-left {\n        margin-left: -", "px;\n      }\n    }\n  }\n\n  .richMedia-resize-handle-right,\n  .richMedia-resize-handle-left {\n    display: flex;\n    flex-direction: column;\n\n    /* vertical align */\n    justify-content: center;\n  }\n\n  .richMedia-resize-handle-right {\n    align-items: flex-end;\n    padding-right: ", ";\n    margin-right: -", "px;\n  }\n\n  .richMedia-resize-handle-left {\n    align-items: flex-start;\n    padding-left: ", ";\n    margin-left: -", "px;\n  }\n\n  .richMedia-resize-handle-right::after,\n  .richMedia-resize-handle-left::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover .richMedia-resize-handle-left::after,\n  .", ":hover .richMedia-resize-handle-right::after {\n    background: ", ";\n  }\n\n  .", " .richMedia-resize-handle-right::after,\n  .", " .richMedia-resize-handle-left::after,\n  .", " .richMedia-resize-handle-right:hover::after,\n  .", " .richMedia-resize-handle-left:hover::after,\n  .", ".is-resizing .richMedia-resize-handle-right::after,\n  .", ".is-resizing .richMedia-resize-handle-left::after {\n    background: ", ";\n  }\n\n  .__resizable_base__ {\n    left: unset !important;\n    width: auto !important;\n    height: auto !important;\n  }\n\n  /* Danger when top level node for smart cards / inline links */\n  .danger > div > div > .media-card-frame,\n  .danger > span > a {\n    background-color: ", ";\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    transition: background-color 0s, box-shadow 0s;\n  }\n  /* Danger when nested node or common */\n  .danger {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* Media single video player */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n    /* New file experience */\n    .", " .", " {\n      box-shadow: 0 0 0 1px\n        ", " !important;\n    }\n    /* Media resize legacy handlers */\n    .richMedia-resize-handle-right::after,\n    .richMedia-resize-handle-left::after {\n      background: ", " !important;\n    }\n    /* Media resize new handlers */\n    .resizer-handle-thumb {\n      background: ", " !important;\n    }\n\n    /* Smart cards */\n    div div .media-card-frame,\n    .inlineCardView-content-wrap > span > a {\n      background-color: ", "; /* R75 with 50% opactiy */\n      transition: background-color 0s;\n    }\n\n    div div .media-card-frame::after {\n      box-shadow: none;\n    }\n  }\n\n  .warning {\n    /* Media single */\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", "::after {\n      border: 1px solid ", ";\n    }\n\n    .", " .", " {\n      box-shadow: 0 0 0 1px ", " !important;\n    }\n\n    .resizer-handle-thumb {\n      background: ", " !important;\n    }\n  }\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", richMediaClassName, fileCardImageViewSelector, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-warning, ".concat(Y500, ")"), "var(--ds-icon-warning, ".concat(Y500, ")"));
 
 /* `left: unset` above is to work around Chrome bug where rendering a div with
  * that style applied inside a container that has a scroll, causes any svgs on

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

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

package/dist/esm/version-wrapper.js

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "187.42.3",
+  "version": "187.42.5",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -55,7 +55,7 @@
     "@atlaskit/code": "^14.6.0",
     "@atlaskit/date": "^0.10.0",
     "@atlaskit/datetime-picker": "^12.10.0",
-    "@atlaskit/editor-common": "^74.59.0",
+    "@atlaskit/editor-common": "^75.0.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-markdown-transformer": "^5.2.5",
     "@atlaskit/editor-palette": "1.5.1",
@@ -93,12 +93,12 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/locale": "^2.5.0",
     "@atlaskit/logo": "^13.14.0",
-    "@atlaskit/media-card": "^76.2.0",
+    "@atlaskit/media-card": "^77.0.0",
     "@atlaskit/media-client": "^24.0.0",
     "@atlaskit/media-common": "^9.0.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
     "@atlaskit/media-picker": "^66.2.0",
-    "@atlaskit/media-ui": "^24.0.0",
+    "@atlaskit/media-ui": "^25.0.0",
     "@atlaskit/media-viewer": "^48.0.0",
     "@atlaskit/mention": "^22.1.0",
     "@atlaskit/menu": "^1.10.0",
@@ -152,7 +152,7 @@
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/code": "^14.6.0",
-    "@atlaskit/collab-provider": "9.12.2",
+    "@atlaskit/collab-provider": "9.12.3",
     "@atlaskit/dropdown-menu": "^11.13.0",
     "@atlaskit/editor-extension-dropbox": "^0.4.0",
     "@atlaskit/editor-plugin-table": "^3.0.0",
@@ -181,7 +181,7 @@
     "@atlassian/editor-extension-link-create": "^0.1.0",
     "@atlassian/feature-flags-test-utils": "^0.1.1",
     "@atlassian/link-picker-plugins": "^23.0.0",
-    "@atlassian/search-provider": "2.4.6",
+    "@atlassian/search-provider": "2.4.7",
     "@atlassian/ufo": "^0.2.0",
     "@emotion/jest": "^11.8.0",
     "@storybook/addon-knobs": "^5.3.18",