@atlaskit/editor-core 187.35.0 → 187.35.2

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-core
 
+## 187.35.2
+
+### Patch Changes
+
+- [`6acf9830b36`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6acf9830b36) - Update feature flags plugin
+  (@atlaskit/editor-plugin-feature-flags) to use a named export
+  rather than default export to match other plugins.
+
+  ```ts
+  // Before
+  import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+
+  // After
+  import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
+  ```
+
+- Updated dependencies
+
+## 187.35.1
+
+### Patch Changes
+
+- [`b1e03fb86a1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1e03fb86a1) - Update layout and width calculation for resizing
+- [`6f85651b350`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6f85651b350) - Reduce the gap between handles when image is a nested node
+
 ## 187.35.0
 
 ### Minor Changes

package/dist/cjs/labs/next/presets/default.js

@@ -19,7 +19,7 @@ var _editorPluginEditorDisabled = require("@atlaskit/editor-plugin-editor-disabl
 var _typeAhead = _interopRequireDefault(require("../../../plugins/type-ahead"));
 var _submitEditor = _interopRequireDefault(require("../../../plugins/submit-editor"));
 var _fakeTextCursor = _interopRequireDefault(require("../../../plugins/fake-text-cursor"));
-var _editorPluginFeatureFlags = _interopRequireDefault(require("@atlaskit/editor-plugin-feature-flags"));
+var _editorPluginFeatureFlags = require("@atlaskit/editor-plugin-feature-flags");
 var _floatingToolbar = _interopRequireDefault(require("../../../plugins/floating-toolbar"));
 var _clipboard = _interopRequireDefault(require("../../../plugins/clipboard"));
 var _plugins = require("../../../plugins");
@@ -42,7 +42,7 @@ var _preset = require("@atlaskit/editor-common/preset");
  * their placement in the editor toolbar
  */
 function createDefaultPreset(options) {
-  var preset = new _preset.EditorPresetBuilder().add([_editorPluginFeatureFlags.default, options.featureFlags || {}]).maybeAdd(_editorPluginAnalytics.analyticsPlugin, function (plugin, builder) {
+  var preset = new _preset.EditorPresetBuilder().add([_editorPluginFeatureFlags.featureFlagsPlugin, options.featureFlags || {}]).maybeAdd(_editorPluginAnalytics.analyticsPlugin, function (plugin, builder) {
     if (options.allowAnalyticsGASV3) {
       var performanceTracking = options.performanceTracking,
         createAnalyticsEvent = options.createAnalyticsEvent;

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

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

package/dist/cjs/version-wrapper.js

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

package/dist/es2019/labs/next/presets/default.js

@@ -13,7 +13,7 @@ import { editorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import typeAheadPlugin from '../../../plugins/type-ahead';
 import submitEditorPlugin from '../../../plugins/submit-editor';
 import fakeTextCursorPlugin from '../../../plugins/fake-text-cursor';
-import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import floatingToolbarPlugin from '../../../plugins/floating-toolbar';
 import clipboardPlugin from '../../../plugins/clipboard';
 import { analyticsPlugin as deprecatedAnalyticsPlugin } from '../../../plugins';

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

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

package/dist/es2019/version-wrapper.js

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

package/dist/esm/labs/next/presets/default.js

@@ -13,7 +13,7 @@ import { editorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import typeAheadPlugin from '../../../plugins/type-ahead';
 import submitEditorPlugin from '../../../plugins/submit-editor';
 import fakeTextCursorPlugin from '../../../plugins/fake-text-cursor';
-import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import { featureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import floatingToolbarPlugin from '../../../plugins/floating-toolbar';
 import clipboardPlugin from '../../../plugins/clipboard';
 import { analyticsPlugin as deprecatedAnalyticsPlugin } from '../../../plugins';

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

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

package/dist/esm/version-wrapper.js

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

package/dist/types/plugins/analytics/plugin.d.ts

@@ -1,7 +1,7 @@
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsEventPayload } from './types';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { PerformanceTracking } from '../../types/performance-tracking';
 import type { analyticsPlugin as newAnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 interface AnalyticsPluginOptions {
@@ -16,7 +16,7 @@ interface AnalyticsPluginOptions {
  */
 declare const analyticsPlugin: NextEditorPlugin<'deprecatedAnalytics', {
     pluginConfiguration: AnalyticsPluginOptions;
-    dependencies: [typeof featureFlagsPlugin, typeof newAnalyticsPlugin];
+    dependencies: [FeatureFlagsPlugin, typeof newAnalyticsPlugin];
 }>;
 export declare function extendPayload({ payload, duration, distortedDuration, }: {
     payload: AnalyticsEventPayload;

package/dist/types/plugins/avatar-group/index.d.ts

@@ -1,12 +1,12 @@
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 type Config = {
     collabEdit?: CollabEditOptions;
     takeFullWidth: boolean;
 };
 declare const avatarGroup: NextEditorPlugin<'avatarGroup', {
     pluginConfiguration: Config;
-    dependencies: [typeof featureFlagsPlugin];
+    dependencies: [FeatureFlagsPlugin];
 }>;
 export default avatarGroup;

package/dist/types/plugins/collab-edit/index.d.ts

@@ -1,14 +1,11 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import { pluginKey } from './plugin';
 import type { PrivateCollabEditOptions } from './types';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 export { pluginKey };
 declare const collabEditPlugin: NextEditorPlugin<'collabEdit', {
     pluginConfiguration: PrivateCollabEditOptions;
-    dependencies: [
-        typeof featureFlagsPlugin,
-        OptionalPlugin<typeof analyticsPlugin>
-    ];
+    dependencies: [FeatureFlagsPlugin, OptionalPlugin<typeof analyticsPlugin>];
 }>;
 export default collabEditPlugin;

package/dist/types/plugins/expand/index.d.ts

@@ -1,6 +1,6 @@
 import type { NextEditorPlugin, EditorProps } from '../../types';
 import type { LongPressSelectionPluginOptions } from '@atlaskit/editor-common/types';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 interface ExpandPluginOptions extends LongPressSelectionPluginOptions {
     allowInsertion?: boolean;
@@ -8,7 +8,7 @@ interface ExpandPluginOptions extends LongPressSelectionPluginOptions {
 }
 declare const expandPlugin: NextEditorPlugin<'expand', {
     pluginConfiguration: ExpandPluginOptions | undefined;
-    dependencies: [typeof featureFlagsPlugin, typeof decorationsPlugin];
+    dependencies: [FeatureFlagsPlugin, typeof decorationsPlugin];
 }>;
 interface ExpandEditorProps {
     allowExpand?: EditorProps['allowExpand'];

package/dist/types/plugins/find-replace/index.d.ts

@@ -1,11 +1,11 @@
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 type Config = {
     takeFullWidth: boolean;
     twoLineEditorToolbar: boolean;
 };
 export declare const findReplacePlugin: NextEditorPlugin<'findReplace', {
     pluginConfiguration: Config;
-    dependencies: [typeof featureFlagsPlugin];
+    dependencies: [FeatureFlagsPlugin];
 }>;
 export default findReplacePlugin;

package/dist/types/plugins/insert-block/types.d.ts

@@ -4,7 +4,7 @@ import type { EmojiPlugin } from '@atlaskit/editor-plugin-emoji';
 import type datePlugin from '../date';
 import type { tablesPlugin } from '@atlaskit/editor-plugin-table';
 import type { hyperlinkPlugin } from '@atlaskit/editor-plugin-hyperlink';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type mentionsPlugin from '../mentions';
 import type quickInsertPlugin from '../quick-insert';
@@ -12,7 +12,7 @@ import type blockTypePlugin from '../block-type';
 import type codeBlockPlugin from '../code-block';
 import type panelPlugin from '../panel';
 export type InsertBlockPluginDependencies = [
-    typeof featureFlagsPlugin,
+    FeatureFlagsPlugin,
     OptionalPlugin<typeof tablesPlugin>,
     OptionalPlugin<typeof hyperlinkPlugin>,
     OptionalPlugin<typeof datePlugin>,

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

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

package/dist/types/plugins/paste/index.d.ts

@@ -1,6 +1,6 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { CardOptions } from '@atlaskit/editor-common/card';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { cardPlugin } from '@atlaskit/editor-plugin-card';
 import type betterTypeHistoryPlugin from '../better-type-history';
 import type { listPlugin } from '@atlaskit/editor-plugin-list';
@@ -12,7 +12,7 @@ export type PastePluginOptions = {
 declare const pastePlugin: NextEditorPlugin<'paste', {
     pluginConfiguration: PastePluginOptions;
     dependencies: [
-        typeof featureFlagsPlugin,
+        FeatureFlagsPlugin,
         OptionalPlugin<typeof listPlugin>,
         typeof betterTypeHistoryPlugin,
         OptionalPlugin<typeof cardPlugin>,

package/dist/types/plugins/rule/index.d.ts

@@ -1,7 +1,7 @@
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 declare const rulePlugin: NextEditorPlugin<'rule', {
     pluginConfiguration: undefined;
-    dependencies: [typeof featureFlagsPlugin];
+    dependencies: [FeatureFlagsPlugin];
 }>;
 export default rulePlugin;

package/dist/types/plugins/text-color/index.d.ts

@@ -1,11 +1,11 @@
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { TextColorPluginConfig, TextColorPluginState } from './pm-plugins/main';
 import { pluginKey as textColorPluginKey } from './pm-plugins/main';
 type Config = TextColorPluginConfig | boolean;
 declare const textColorPlugin: NextEditorPlugin<'textColor', {
     pluginConfiguration: Config | undefined;
-    dependencies: [typeof featureFlagsPlugin];
+    dependencies: [FeatureFlagsPlugin];
 }>;
 export { textColorPluginKey };
 export type { TextColorPluginState };

package/dist/types-ts4.5/plugins/analytics/plugin.d.ts

@@ -1,7 +1,7 @@
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { AnalyticsEventPayload } from './types';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { PerformanceTracking } from '../../types/performance-tracking';
 import type { analyticsPlugin as newAnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 interface AnalyticsPluginOptions {
@@ -17,7 +17,7 @@ interface AnalyticsPluginOptions {
 declare const analyticsPlugin: NextEditorPlugin<'deprecatedAnalytics', {
     pluginConfiguration: AnalyticsPluginOptions;
     dependencies: [
-        typeof featureFlagsPlugin,
+        FeatureFlagsPlugin,
         typeof newAnalyticsPlugin
     ];
 }>;

package/dist/types-ts4.5/plugins/avatar-group/index.d.ts

@@ -1,6 +1,6 @@
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 type Config = {
     collabEdit?: CollabEditOptions;
     takeFullWidth: boolean;
@@ -8,7 +8,7 @@ type Config = {
 declare const avatarGroup: NextEditorPlugin<'avatarGroup', {
     pluginConfiguration: Config;
     dependencies: [
-        typeof featureFlagsPlugin
+        FeatureFlagsPlugin
     ];
 }>;
 export default avatarGroup;

package/dist/types-ts4.5/plugins/collab-edit/index.d.ts

@@ -1,13 +1,13 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import { pluginKey } from './plugin';
 import type { PrivateCollabEditOptions } from './types';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 export { pluginKey };
 declare const collabEditPlugin: NextEditorPlugin<'collabEdit', {
     pluginConfiguration: PrivateCollabEditOptions;
     dependencies: [
-        typeof featureFlagsPlugin,
+        FeatureFlagsPlugin,
         OptionalPlugin<typeof analyticsPlugin>
     ];
 }>;

package/dist/types-ts4.5/plugins/expand/index.d.ts

@@ -1,6 +1,6 @@
 import type { NextEditorPlugin, EditorProps } from '../../types';
 import type { LongPressSelectionPluginOptions } from '@atlaskit/editor-common/types';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 interface ExpandPluginOptions extends LongPressSelectionPluginOptions {
     allowInsertion?: boolean;
@@ -9,7 +9,7 @@ interface ExpandPluginOptions extends LongPressSelectionPluginOptions {
 declare const expandPlugin: NextEditorPlugin<'expand', {
     pluginConfiguration: ExpandPluginOptions | undefined;
     dependencies: [
-        typeof featureFlagsPlugin,
+        FeatureFlagsPlugin,
         typeof decorationsPlugin
     ];
 }>;

package/dist/types-ts4.5/plugins/find-replace/index.d.ts

@@ -1,5 +1,5 @@
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 type Config = {
     takeFullWidth: boolean;
     twoLineEditorToolbar: boolean;
@@ -7,7 +7,7 @@ type Config = {
 export declare const findReplacePlugin: NextEditorPlugin<'findReplace', {
     pluginConfiguration: Config;
     dependencies: [
-        typeof featureFlagsPlugin
+        FeatureFlagsPlugin
     ];
 }>;
 export default findReplacePlugin;

package/dist/types-ts4.5/plugins/insert-block/types.d.ts

@@ -4,7 +4,7 @@ import type { EmojiPlugin } from '@atlaskit/editor-plugin-emoji';
 import type datePlugin from '../date';
 import type { tablesPlugin } from '@atlaskit/editor-plugin-table';
 import type { hyperlinkPlugin } from '@atlaskit/editor-plugin-hyperlink';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type mentionsPlugin from '../mentions';
 import type quickInsertPlugin from '../quick-insert';
@@ -12,7 +12,7 @@ import type blockTypePlugin from '../block-type';
 import type codeBlockPlugin from '../code-block';
 import type panelPlugin from '../panel';
 export type InsertBlockPluginDependencies = [
-    typeof featureFlagsPlugin,
+    FeatureFlagsPlugin,
     OptionalPlugin<typeof tablesPlugin>,
     OptionalPlugin<typeof hyperlinkPlugin>,
     OptionalPlugin<typeof datePlugin>,

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

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

package/dist/types-ts4.5/plugins/paste/index.d.ts

@@ -1,6 +1,6 @@
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { CardOptions } from '@atlaskit/editor-common/card';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { cardPlugin } from '@atlaskit/editor-plugin-card';
 import type betterTypeHistoryPlugin from '../better-type-history';
 import type { listPlugin } from '@atlaskit/editor-plugin-list';
@@ -12,7 +12,7 @@ export type PastePluginOptions = {
 declare const pastePlugin: NextEditorPlugin<'paste', {
     pluginConfiguration: PastePluginOptions;
     dependencies: [
-        typeof featureFlagsPlugin,
+        FeatureFlagsPlugin,
         OptionalPlugin<typeof listPlugin>,
         typeof betterTypeHistoryPlugin,
         OptionalPlugin<typeof cardPlugin>,

package/dist/types-ts4.5/plugins/rule/index.d.ts

@@ -1,9 +1,9 @@
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 declare const rulePlugin: NextEditorPlugin<'rule', {
     pluginConfiguration: undefined;
     dependencies: [
-        typeof featureFlagsPlugin
+        FeatureFlagsPlugin
     ];
 }>;
 export default rulePlugin;

package/dist/types-ts4.5/plugins/text-color/index.d.ts

@@ -1,12 +1,12 @@
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { TextColorPluginConfig, TextColorPluginState } from './pm-plugins/main';
 import { pluginKey as textColorPluginKey } from './pm-plugins/main';
 type Config = TextColorPluginConfig | boolean;
 declare const textColorPlugin: NextEditorPlugin<'textColor', {
     pluginConfiguration: Config | undefined;
     dependencies: [
-        typeof featureFlagsPlugin
+        FeatureFlagsPlugin
     ];
 }>;
 export { textColorPluginKey };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "187.35.0",
+  "version": "187.35.2",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -67,7 +67,7 @@
     "@atlaskit/editor-plugin-decorations": "^0.2.0",
     "@atlaskit/editor-plugin-editor-disabled": "^0.2.0",
     "@atlaskit/editor-plugin-emoji": "^0.3.0",
-    "@atlaskit/editor-plugin-feature-flags": "^0.2.0",
+    "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
     "@atlaskit/editor-plugin-floating-toolbar": "^0.4.0",
     "@atlaskit/editor-plugin-focus": "^0.2.0",
     "@atlaskit/editor-plugin-grid": "^0.2.0",