@atlaskit/editor-common 74.32.0 → 74.33.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-common
 
+## 74.33.0
+
+### Minor Changes
+
+- [`936c30f8dc9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/936c30f8dc9) - support new image resize experience under feature flag
+
+## 74.32.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 74.32.0
 
 ### Minor Changes

package/dist/cjs/card/MediaAndEmbedsToolbar/index.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -17,12 +18,15 @@ var _mediaFullWidth = _interopRequireDefault(require("@atlaskit/icon/glyph/edito
 var _mediaWide = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-wide"));
 var _mediaWrapLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-wrap-left"));
 var _mediaWrapRight = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-wrap-right"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics = require("../../analytics");
 var _coreUtils = require("../../core-utils");
 var _messages = _interopRequireWildcard(require("../../messages"));
 var _utils2 = require("../../utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // Workaround as we don't want to import this package into `editor-common`
 // We'll get type errors if this gets out of sync with `editor-plugin-width`.
 var alignmentIcons = [{
@@ -84,7 +88,10 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
       return false;
     }
     var nodeWidth = getNodeWidth(node, state.schema);
-    var newAttrs = (0, _utils2.alignAttributes)(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
+    var newAttrs = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? // with extended experience, change alignment does not change media single width
+    _objectSpread(_objectSpread({}, node.attrs), {}, {
+      layout: layout
+    }) : (0, _utils2.alignAttributes)(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
     var tr = state.tr.setNodeMarkup(state.selection.from, undefined, newAttrs);
     tr.setMeta('scrollIntoView', false);
     // when image captions are enabled, the wrong node gets selected after
@@ -113,18 +120,26 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
     return true;
   };
 };
-var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) {
+var getToolbarLayout = function getToolbarLayout(layout) {
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') && _utils2.nonWrappedLayouts.includes(layout)) {
+    return 'center';
+  }
+  return layout;
+};
+var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) {
   return icons.map(function (toolbarItem) {
     var id = toolbarItem.id,
       value = toolbarItem.value;
-    return {
+    return _objectSpread({
       id: id,
       type: 'button',
       icon: toolbarItem.icon,
       title: intl.formatMessage(layoutToMessages[value]),
-      selected: layout === value,
+      selected: getToolbarLayout(layout) === value,
       onClick: makeAlign(value, nodeType, widthPluginDependencyApi, analyticsApi)
-    };
+    }, isChangingLayoutDisabled && {
+      disabled: value !== 'center'
+    });
   });
 };
 var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref2, allowResizingInTables) {
@@ -134,13 +149,14 @@ var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref2,
 var buildLayoutButtons = function buildLayoutButtons(state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables) {
   var allowWrapping = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
   var allowAlignment = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
+  var isChangingLayoutDisabled = arguments.length > 9 ? arguments[9] : undefined;
   var selection = state.selection;
   if (!(selection instanceof _state.NodeSelection) || !selection.node || !nodeType || shouldHideLayoutToolbar(selection, state.schema, allowResizingInTables)) {
     return [];
   }
   var layout = selection.node.attrs.layout;
-  var alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
-  var wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
+  var alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) : [];
+  var wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) : [];
   var breakOutToolbarItems = !allowResizing ? mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
   var items = [].concat((0, _toConsumableArray2.default)(alignmentToolbarItems), (0, _toConsumableArray2.default)(getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping)), (0, _toConsumableArray2.default)(wrappingToolbarItems), (0, _toConsumableArray2.default)(getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing)), (0, _toConsumableArray2.default)(breakOutToolbarItems));
   return items;

package/dist/cjs/guideline/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "createGuidesFromLengths", {
     return _fixedGuideline.createGuidesFromLengths;
   }
 });
+Object.defineProperty(exports, "findClosestSnap", {
+  enumerable: true,
+  get: function get() {
+    return _snapping.findClosestSnap;
+  }
+});
 Object.defineProperty(exports, "generateDefaultGuidelines", {
   enumerable: true,
   get: function get() {
@@ -45,6 +51,12 @@ Object.defineProperty(exports, "getGuidelinesWithHighlights", {
     return _updateGuideline.getGuidelinesWithHighlights;
   }
 });
+Object.defineProperty(exports, "getSnapWidth", {
+  enumerable: true,
+  get: function get() {
+    return _snapping.getSnapWidth;
+  }
+});
 Object.defineProperty(exports, "isVerticalPosition", {
   enumerable: true,
   get: function get() {
@@ -56,4 +68,5 @@ var _fixedGuideline = require("./fixedGuideline");
 var _defaultGuideline = require("./defaultGuideline");
 var _updateGuideline = require("./updateGuideline");
 var _constants = require("./constants");
+var _snapping = require("./snapping");
 var _utils = require("./utils");

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "74.32.0";
+var packageVersion = "74.33.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/styles/shared/media-single.js

@@ -7,9 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.richMediaClassName = exports.mediaSingleSharedStyle = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _templateObject;
 var richMediaClassName = 'rich-media-item';
 exports.richMediaClassName = richMediaClassName;
 var wrappedMediaBreakoutPoint = 410;
-var mediaSingleSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  li .", " {\n    margin: 0;\n  }\n\n  /* Hack for chrome to fix media single position\n     inside a list when media is the first child */\n  &.ua-chrome li > .mediaSingleView-content-wrap::before {\n    content: '';\n    display: block;\n    height: 0;\n  }\n\n  &.ua-firefox {\n    .mediaSingleView-content-wrap {\n      user-select: none;\n    }\n\n    .captionView-content-wrap {\n      user-select: text;\n    }\n  }\n\n  .mediaSingleView-content-wrap[layout='center'] {\n    clear: both;\n  }\n\n  table .", " {\n    margin-top: 12px;\n    margin-bottom: 12px;\n    clear: both;\n\n    &.image-wrap-left,\n    &.image-wrap-right {\n      clear: none;\n\n      &:first-child {\n        margin-top: 12px;\n      }\n    }\n  }\n\n  .", ".image-wrap-right\n    + .", ".image-wrap-left {\n    clear: both;\n  }\n\n  .", ".image-wrap-left\n    + .", ".image-wrap-right,\n    .", ".image-wrap-right\n    + .", ".image-wrap-left,\n    .", ".image-wrap-left\n    + .", ".image-wrap-left,\n    .", ".image-wrap-right\n    + .", ".image-wrap-right {\n    margin-right: 0;\n    margin-left: 0;\n  }\n\n  @media all and (max-width: ", "px) {\n    div.mediaSingleView-content-wrap[layout='wrap-left'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-left'],\n    div.mediaSingleView-content-wrap[layout='wrap-right'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-right'] {\n      float: none;\n      overflow: auto;\n      margin: 12px 0;\n    }\n  }\n"])), richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, wrappedMediaBreakoutPoint);
+var mediaSingleSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  li .", " {\n    margin: 0;\n  }\n\n  /* Hack for chrome to fix media single position\n     inside a list when media is the first child */\n  &.ua-chrome li > .mediaSingleView-content-wrap::before {\n    content: '';\n    display: block;\n    height: 0;\n  }\n\n  &.ua-firefox {\n    .mediaSingleView-content-wrap {\n      user-select: none;\n    }\n\n    .captionView-content-wrap {\n      user-select: text;\n    }\n  }\n\n  .mediaSingleView-content-wrap[layout='center'] {\n    clear: both;\n  }\n\n  table .", " {\n    margin-top: ", ";\n    margin-bottom: ", ";\n    clear: both;\n\n    &.image-wrap-left,\n    &.image-wrap-right {\n      clear: none;\n\n      &:first-child {\n        margin-top: ", ";\n      }\n    }\n  }\n\n  .", ".image-wrap-right\n    + .", ".image-wrap-left {\n    clear: both;\n  }\n\n  .", ".image-wrap-left\n    + .", ".image-wrap-right,\n    .", ".image-wrap-right\n    + .", ".image-wrap-left,\n    .", ".image-wrap-left\n    + .", ".image-wrap-left,\n    .", ".image-wrap-right\n    + .", ".image-wrap-right {\n    margin-right: 0;\n    margin-left: 0;\n  }\n\n  ", "\n"])), richMediaClassName, richMediaClassName, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') && "@media all and (max-width: ".concat(wrappedMediaBreakoutPoint, "px) {\n    div.mediaSingleView-content-wrap[layout='wrap-left'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-left'],\n    div.mediaSingleView-content-wrap[layout='wrap-right'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-right'] {\n      float: none;\n      overflow: auto;\n      margin: 12px 0;\n    }\n  }"));
 exports.mediaSingleSharedStyle = mediaSingleSharedStyle;

package/dist/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.32.0";
+var packageVersion = "74.33.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/ui/MediaSingle/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.IMAGE_AND_BORDER_ADJUSTMENT = exports.DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_HEIGHT = void 0;
 exports.default = MediaSingle;
-exports.shouldAddDefaultWrappedWidth = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
@@ -14,7 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _constants = require("../../media-single/constants");
 var _utils = require("../../media-single/utils");
-var _grid = require("./grid");
+var _richMediaUtils = require("../../utils/rich-media-utils");
 var _styled = require("./styled");
 /** @jsx jsx */
 
@@ -29,10 +28,6 @@ var DEFAULT_IMAGE_HEIGHT = 200;
 exports.DEFAULT_IMAGE_HEIGHT = DEFAULT_IMAGE_HEIGHT;
 var IMAGE_AND_BORDER_ADJUSTMENT = 2;
 exports.IMAGE_AND_BORDER_ADJUSTMENT = IMAGE_AND_BORDER_ADJUSTMENT;
-var shouldAddDefaultWrappedWidth = function shouldAddDefaultWrappedWidth(layout, width, lineLength) {
-  return _grid.wrappedLayouts.indexOf(layout) > -1 && lineLength && width && width > 0.5 * lineLength;
-};
-exports.shouldAddDefaultWrappedWidth = shouldAddDefaultWrappedWidth;
 function MediaSingle(_ref) {
   var layout = _ref.layout,
     width = _ref.width,
@@ -55,7 +50,7 @@ function MediaSingle(_ref) {
   var isPixelWidth = (size === null || size === void 0 ? void 0 : size.widthType) === 'pixel';
   var mediaSingleWidth = (size === null || size === void 0 ? void 0 : size.width) || pctWidth;
   var children = _react.default.Children.toArray(propsChildren);
-  if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(layout, width, editorWidth)) {
+  if (!mediaSingleWidth && (0, _richMediaUtils.shouldAddDefaultWrappedWidth)(layout, width, editorWidth)) {
     // if width is not available, set to half of editor width
     mediaSingleWidth = isPixelWidth ? editorWidth / 2 : 50;
   }

package/dist/cjs/ui/MediaSingle/styled.js

@@ -13,6 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _utils = require("../../utils");
 var _breakout = require("../../utils/breakout");
 var _excluded = ["children"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -87,6 +88,24 @@ function calcMaxWidth(layout, containerWidth) {
       return '100%';
   }
 }
+var getEffectiveFullWidth = function getEffectiveFullWidth(containerWidth, fullWidthMode) {
+  if (fullWidthMode) {
+    return '100%';
+  }
+  // There is always padding for renderer, so we don't need padding for it
+  var fullWidthPadding = _editorSharedStyles.akEditorGutterPadding * 2;
+  return "".concat(Math.min(containerWidth - fullWidthPadding, _editorSharedStyles.akEditorFullWidthLayoutWidth), "px");
+};
+var calcMaxWidthWhenResizing = function calcMaxWidthWhenResizing(containerWidth, fullWidthMode, isNestedNode) {
+  if (isNestedNode) {
+    return '100%';
+  }
+  // non-nested node can resize up to full width
+  return getEffectiveFullWidth(containerWidth, fullWidthMode);
+};
+var calcMaxWidthWhenNotResizing = function calcMaxWidthWhenNotResizing(containerWidth, mediaSingleWidth) {
+  return "".concat(Math.min(mediaSingleWidth, containerWidth - _editorSharedStyles.akEditorGutterPadding * 2), "px");
+};
 function calcMargin(layout) {
   switch (layout) {
     case 'wrap-right':
@@ -119,8 +138,11 @@ var MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref) {
     layout = _ref.layout,
     pctWidth = _ref.pctWidth,
     mediaSingleWidth = _ref.mediaSingleWidth,
-    width = _ref.width;
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), mediaSingleWidth || pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' && (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    min-width: 100%;\n  "]))), calcMaxWidth(layout, containerWidth), float(layout), calcMargin(layout), isImageAligned(layout));
+    width = _ref.width,
+    isExtendedResizeExperienceOn = _ref.isExtendedResizeExperienceOn,
+    _ref$isNestedNode = _ref.isNestedNode,
+    isNestedNode = _ref$isNestedNode === void 0 ? false : _ref$isNestedNode;
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n  &[class*='is-resizing'] {\n    ", "\n  }\n\n  /* Handles responsiveness of non-nested, not-resizing nodes in editor */\n  &[class*='not-resizing'] {\n    ", "\n  }\n\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), mediaSingleWidth || pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' && (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    min-width: 100%;\n  "]))), calcMaxWidth(layout, containerWidth), isExtendedResizeExperienceOn && "max-width: ".concat(calcMaxWidthWhenResizing(containerWidth, fullWidthMode, isNestedNode), ";\n\n    ").concat(_utils.nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n      transform: translateX(-50%);", "\n\n    .new-file-experience-wrapper {\n      box-shadow: none;\n    }"), !isNestedNode && "max-width: ".concat(layout !== 'full-width' && mediaSingleWidth && calcMaxWidthWhenNotResizing(containerWidth, mediaSingleWidth), ";\n\n    ").concat(_utils.nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n      transform: translateX(-50%);", "\n\n    // override min-width to counteract max-width set in old experience\n    ").concat(layout === 'full-width' && "min-width: ".concat(getEffectiveFullWidth(containerWidth, fullWidthMode), " !important;"), ";"), float(layout), calcMargin(layout), isImageAligned(layout));
 };
 exports.MediaSingleDimensionHelper = MediaSingleDimensionHelper;
 var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {

package/dist/cjs/ui/index.js

@@ -347,12 +347,6 @@ Object.defineProperty(exports, "sharedExpandStyles", {
     return _Expand.sharedExpandStyles;
   }
 });
-Object.defineProperty(exports, "shouldAddDefaultWrappedWidth", {
-  enumerable: true,
-  get: function get() {
-    return _MediaSingle.shouldAddDefaultWrappedWidth;
-  }
-});
 Object.defineProperty(exports, "snapTo", {
   enumerable: true,
   get: function get() {

package/dist/cjs/utils/index.js

@@ -694,6 +694,12 @@ Object.defineProperty(exports, "nonNullable", {
     return _editorCoreUtils.nonNullable;
   }
 });
+Object.defineProperty(exports, "nonWrappedLayouts", {
+  enumerable: true,
+  get: function get() {
+    return _richMediaUtils.nonWrappedLayouts;
+  }
+});
 Object.defineProperty(exports, "normalizeUrl", {
   enumerable: true,
   get: function get() {

package/dist/cjs/utils/rich-media-utils.js

@@ -6,14 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.alignAttributes = void 0;
 exports.calculateSnapPoints = calculateSnapPoints;
-exports.nonWrappedLayouts = exports.isRichMediaInsideOfBlockNode = exports.floatingLayouts = void 0;
+exports.shouldAddDefaultWrappedWidth = exports.nonWrappedLayouts = exports.isRichMediaInsideOfBlockNode = exports.floatingLayouts = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _MediaSingle = require("../ui/MediaSingle");
 var _grid = require("../ui/MediaSingle/grid");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var shouldAddDefaultWrappedWidth = function shouldAddDefaultWrappedWidth(layout, width, lineLength) {
+  return _grid.wrappedLayouts.indexOf(layout) > -1 && lineLength && width && width > 0.5 * lineLength;
+};
+exports.shouldAddDefaultWrappedWidth = shouldAddDefaultWrappedWidth;
 var nonWrappedLayouts = ['center', 'wide', 'full-width'];
 exports.nonWrappedLayouts = nonWrappedLayouts;
 var floatingLayouts = ['wrap-left', 'wrap-right'];
@@ -40,7 +43,7 @@ var alignAttributes = function alignAttributes(layout, oldAttrs) {
   var newLayoutIsNonWrapped = nonWrappedLayouts.indexOf(layout) > -1;
   var newLayoutIsWrapped = _grid.wrappedLayouts.indexOf(layout) > -1;
   var oldLayoutIsWrapped = _grid.wrappedLayouts.indexOf(oldLayout) > -1;
-  if (oldLayoutIsNonWrapped && (0, _MediaSingle.shouldAddDefaultWrappedWidth)(layout, originalWidth, lineLength)) {
+  if (oldLayoutIsNonWrapped && shouldAddDefaultWrappedWidth(layout, originalWidth, lineLength)) {
     // 'full-width' or 'wide' or 'center' -> 'wrap-left' or 'wrap-right' or 'align-end' or 'align-start'
     if (!width || width >= 100 || oldLayout !== 'center' // == 'full-width' or 'wide'
     ) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.32.0",
+	"version": "74.33.0",
 	"sideEffects": false
 }

package/dist/es2019/card/MediaAndEmbedsToolbar/index.js

@@ -8,10 +8,11 @@ import FullWidthIcon from '@atlaskit/icon/glyph/editor/media-full-width';
 import WideIcon from '@atlaskit/icon/glyph/editor/media-wide';
 import WrapLeftIcon from '@atlaskit/icon/glyph/editor/media-wrap-left';
 import WrapRightIcon from '@atlaskit/icon/glyph/editor/media-wrap-right';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
 import { insideTable } from '../../core-utils';
 import commonMessages, { mediaAndEmbedToolbarMessages as toolbarMessages } from '../../messages';
-import { alignAttributes, isInLayoutColumn } from '../../utils';
+import { alignAttributes, isInLayoutColumn, nonWrappedLayouts } from '../../utils';
 
 // Workaround as we don't want to import this package into `editor-common`
 // We'll get type errors if this gets out of sync with `editor-plugin-width`.
@@ -81,7 +82,12 @@ const makeAlign = (layout, nodeType, widthPluginDependencyApi, analyticsApi) =>
       return false;
     }
     const nodeWidth = getNodeWidth(node, state.schema);
-    const newAttrs = alignAttributes(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
+    const newAttrs = getBooleanFF('platform.editor.media.extended-resize-experience') ?
+    // with extended experience, change alignment does not change media single width
+    {
+      ...node.attrs,
+      layout
+    } : alignAttributes(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
     const tr = state.tr.setNodeMarkup(state.selection.from, undefined, newAttrs);
     tr.setMeta('scrollIntoView', false);
     // when image captions are enabled, the wrong node gets selected after
@@ -120,7 +126,13 @@ const makeAlign = (layout, nodeType, widthPluginDependencyApi, analyticsApi) =>
     return true;
   };
 };
-const mapIconsToToolbarItem = (icons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) => icons.map(toolbarItem => {
+const getToolbarLayout = layout => {
+  if (getBooleanFF('platform.editor.media.extended-resize-experience') && nonWrappedLayouts.includes(layout)) {
+    return 'center';
+  }
+  return layout;
+};
+const mapIconsToToolbarItem = (icons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) => icons.map(toolbarItem => {
   const {
     id,
     value
@@ -130,8 +142,11 @@ const mapIconsToToolbarItem = (icons, layout, intl, nodeType, widthPluginDepende
     type: 'button',
     icon: toolbarItem.icon,
     title: intl.formatMessage(layoutToMessages[value]),
-    selected: layout === value,
-    onClick: makeAlign(value, nodeType, widthPluginDependencyApi, analyticsApi)
+    selected: getToolbarLayout(layout) === value,
+    onClick: makeAlign(value, nodeType, widthPluginDependencyApi, analyticsApi),
+    ...(isChangingLayoutDisabled && {
+      disabled: value !== 'center'
+    })
   };
 });
 const shouldHideLayoutToolbar = (selection, {
@@ -139,7 +154,7 @@ const shouldHideLayoutToolbar = (selection, {
 }, allowResizingInTables) => {
   return hasParentNodeOfType([nodes.bodiedExtension, nodes.listItem, nodes.expand, nodes.nestedExpand, ...(allowResizingInTables ? [] : [nodes.table])].filter(Boolean))(selection);
 };
-const buildLayoutButtons = (state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables, allowWrapping = true, allowAlignment = true) => {
+const buildLayoutButtons = (state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables, allowWrapping = true, allowAlignment = true, isChangingLayoutDisabled) => {
   const {
     selection
   } = state;
@@ -149,8 +164,8 @@ const buildLayoutButtons = (state, intl, nodeType, widthPluginDependencyApi, ana
   const {
     layout
   } = selection.node.attrs;
-  const alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
-  const wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
+  const alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) : [];
+  const wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) : [];
   const breakOutToolbarItems = !allowResizing ? mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
   const items = [...alignmentToolbarItems, ...getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping), ...wrappingToolbarItems, ...getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing), ...breakOutToolbarItems];
   return items;

package/dist/es2019/guideline/index.js

@@ -3,4 +3,5 @@ export { createFixedGuidelinesFromLengths, createGuidesFromLengths } from './fix
 export { generateDefaultGuidelines } from './defaultGuideline';
 export { getGuidelinesWithHighlights } from './updateGuideline';
 export { MEDIA_DYNAMIC_GUIDELINE_PREFIX } from './constants';
+export { getSnapWidth, findClosestSnap } from './snapping';
 export { isVerticalPosition, getContainerWidthOrFullEditorWidth } from './utils';

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "74.32.0";
+const packageVersion = "74.33.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/styles/shared/media-single.js

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const richMediaClassName = 'rich-media-item';
 const wrappedMediaBreakoutPoint = 410;
 const mediaSingleSharedStyle = css`
@@ -29,8 +30,8 @@ const mediaSingleSharedStyle = css`
   }
 
   table .${richMediaClassName} {
-    margin-top: 12px;
-    margin-bottom: 12px;
+    margin-top: ${"var(--ds-space-150, 12px)"};
+    margin-bottom: ${"var(--ds-space-150, 12px)"};
     clear: both;
 
     &.image-wrap-left,
@@ -38,7 +39,7 @@ const mediaSingleSharedStyle = css`
       clear: none;
 
       &:first-child {
-        margin-top: 12px;
+        margin-top: ${"var(--ds-space-150, 12px)"};
       }
     }
   }
@@ -60,7 +61,7 @@ const mediaSingleSharedStyle = css`
     margin-left: 0;
   }
 
-  @media all and (max-width: ${wrappedMediaBreakoutPoint}px) {
+  ${!getBooleanFF('platform.editor.media.extended-resize-experience') && `@media all and (max-width: ${wrappedMediaBreakoutPoint}px) {
     div.mediaSingleView-content-wrap[layout='wrap-left'],
     div.mediaSingleView-content-wrap[data-layout='wrap-left'],
     div.mediaSingleView-content-wrap[layout='wrap-right'],
@@ -69,6 +70,6 @@ const mediaSingleSharedStyle = css`
       overflow: auto;
       margin: 12px 0;
     }
-  }
+  }`}
 `;
 export { mediaSingleSharedStyle, richMediaClassName };

package/dist/es2019/ui/DropList/index.js

@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "74.32.0";
+const packageVersion = "74.33.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/ui/MediaSingle/index.js

@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import { akEditorMediaResizeHandlerPaddingWide, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { MEDIA_SINGLE_GUTTER_SIZE } from '../../media-single/constants';
 import { getMediaSinglePixelWidth } from '../../media-single/utils';
-import { wrappedLayouts } from './grid';
+import { shouldAddDefaultWrappedWidth } from '../../utils/rich-media-utils';
 import { MediaSingleDimensionHelper, MediaWrapper } from './styled';
 export const DEFAULT_IMAGE_WIDTH = 250;
 export const DEFAULT_IMAGE_HEIGHT = 200;
@@ -15,9 +15,6 @@ export const DEFAULT_IMAGE_HEIGHT = 200;
     Read more: https://product-fabric.atlassian.net/browse/MEX-2481
 */
 export const IMAGE_AND_BORDER_ADJUSTMENT = 2;
-export const shouldAddDefaultWrappedWidth = (layout, width, lineLength) => {
-  return wrappedLayouts.indexOf(layout) > -1 && lineLength && width && width > 0.5 * lineLength;
-};
 export default function MediaSingle({
   layout,
   width,

package/dist/es2019/ui/MediaSingle/styled.js

@@ -1,7 +1,8 @@
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { nonWrappedLayouts } from '../../utils';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
 function float(layout) {
   switch (layout) {
@@ -69,6 +70,24 @@ function calcMaxWidth(layout, containerWidth) {
       return '100%';
   }
 }
+const getEffectiveFullWidth = (containerWidth, fullWidthMode) => {
+  if (fullWidthMode) {
+    return '100%';
+  }
+  // There is always padding for renderer, so we don't need padding for it
+  const fullWidthPadding = akEditorGutterPadding * 2;
+  return `${Math.min(containerWidth - fullWidthPadding, akEditorFullWidthLayoutWidth)}px`;
+};
+const calcMaxWidthWhenResizing = (containerWidth, fullWidthMode, isNestedNode) => {
+  if (isNestedNode) {
+    return '100%';
+  }
+  // non-nested node can resize up to full width
+  return getEffectiveFullWidth(containerWidth, fullWidthMode);
+};
+const calcMaxWidthWhenNotResizing = (containerWidth, mediaSingleWidth) => {
+  return `${Math.min(mediaSingleWidth, containerWidth - akEditorGutterPadding * 2)}px`;
+};
 function calcMargin(layout) {
   switch (layout) {
     case 'wrap-right':
@@ -100,7 +119,9 @@ export const MediaSingleDimensionHelper = ({
   layout,
   pctWidth,
   mediaSingleWidth,
-  width
+  width,
+  isExtendedResizeExperienceOn,
+  isNestedNode = false
 }) => css`
   /* For nested rich media items, set max-width to 100% */
   tr &,
@@ -114,6 +135,28 @@ export const MediaSingleDimensionHelper = ({
     min-width: 100%;
   `}
   max-width: ${calcMaxWidth(layout, containerWidth)};
+  &[class*='is-resizing'] {
+    ${isExtendedResizeExperienceOn && `max-width: ${calcMaxWidthWhenResizing(containerWidth, fullWidthMode, isNestedNode)};
+
+    ${nonWrappedLayouts.includes(layout) && `margin-left: 50%;
+      transform: translateX(-50%);`}
+
+    .new-file-experience-wrapper {
+      box-shadow: none;
+    }`}
+  }
+
+  /* Handles responsiveness of non-nested, not-resizing nodes in editor */
+  &[class*='not-resizing'] {
+    ${!isNestedNode && `max-width: ${layout !== 'full-width' && mediaSingleWidth && calcMaxWidthWhenNotResizing(containerWidth, mediaSingleWidth)};
+
+    ${nonWrappedLayouts.includes(layout) && `margin-left: 50%;
+      transform: translateX(-50%);`}
+
+    // override min-width to counteract max-width set in old experience
+    ${layout === 'full-width' && `min-width: ${getEffectiveFullWidth(containerWidth, fullWidthMode)} !important;`};`}
+  }
+
   float: ${float(layout)};
   margin: ${calcMargin(layout)};
   ${isImageAligned(layout)};

package/dist/es2019/ui/index.js

@@ -1,5 +1,5 @@
 export { default as Caption } from './Caption';
-export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT, shouldAddDefaultWrappedWidth } from './MediaSingle';
+export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT } from './MediaSingle';
 export { MediaSingleDimensionHelper } from './MediaSingle/styled';
 export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid, calcMediaPxWidth, wrappedLayouts } from './MediaSingle/grid';
 export { mediaLinkStyle } from './MediaSingle/link';

package/dist/es2019/utils/index.js

@@ -42,7 +42,7 @@ export { isFromCurrentDomain, LinkMatcher, normalizeUrl, linkifyContent, getLink
 export const pmHistoryPluginKey = 'history$';
 export { gridTypeForLayout } from './grid';
 export { nodesBetweenChanged, getStepRange, isEmptyDocument, processRawValue, hasDocAsParent, bracketTyped, hasVisibleContent } from './document';
-export { floatingLayouts, isRichMediaInsideOfBlockNode, calculateSnapPoints, alignAttributes } from './rich-media-utils';
+export { floatingLayouts, isRichMediaInsideOfBlockNode, calculateSnapPoints, alignAttributes, nonWrappedLayouts } from './rich-media-utils';
 export { sanitizeNodeForPrivacy } from './filter/privacy-filter';
 export { canRenderDatasource } from './datasource';
 export { filterCommand, walkPrevNode, walkNextNode, isEmptySelectionAtStart, isEmptySelectionAtEnd, insertContentDeleteRange, deleteEmptyParagraphAndMoveBlockUp } from './commands';

package/dist/es2019/utils/rich-media-utils.js

@@ -1,7 +1,9 @@
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
-import { shouldAddDefaultWrappedWidth } from '../ui/MediaSingle';
 import { calcPxFromColumns, wrappedLayouts } from '../ui/MediaSingle/grid';
+export const shouldAddDefaultWrappedWidth = (layout, width, lineLength) => {
+  return wrappedLayouts.indexOf(layout) > -1 && lineLength && width && width > 0.5 * lineLength;
+};
 export const nonWrappedLayouts = ['center', 'wide', 'full-width'];
 export const floatingLayouts = ['wrap-left', 'wrap-right'];
 export const isRichMediaInsideOfBlockNode = (view, pos) => {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.32.0",
+	"version": "74.33.0",
 	"sideEffects": false
 }

package/dist/esm/card/MediaAndEmbedsToolbar/index.js

@@ -1,4 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
@@ -9,10 +12,11 @@ import FullWidthIcon from '@atlaskit/icon/glyph/editor/media-full-width';
 import WideIcon from '@atlaskit/icon/glyph/editor/media-wide';
 import WrapLeftIcon from '@atlaskit/icon/glyph/editor/media-wrap-left';
 import WrapRightIcon from '@atlaskit/icon/glyph/editor/media-wrap-right';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
 import { insideTable } from '../../core-utils';
 import commonMessages, { mediaAndEmbedToolbarMessages as toolbarMessages } from '../../messages';
-import { alignAttributes, isInLayoutColumn } from '../../utils';
+import { alignAttributes, isInLayoutColumn, nonWrappedLayouts } from '../../utils';
 
 // Workaround as we don't want to import this package into `editor-common`
 // We'll get type errors if this gets out of sync with `editor-plugin-width`.
@@ -75,7 +79,10 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
       return false;
     }
     var nodeWidth = getNodeWidth(node, state.schema);
-    var newAttrs = alignAttributes(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
+    var newAttrs = getBooleanFF('platform.editor.media.extended-resize-experience') ? // with extended experience, change alignment does not change media single width
+    _objectSpread(_objectSpread({}, node.attrs), {}, {
+      layout: layout
+    }) : alignAttributes(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
     var tr = state.tr.setNodeMarkup(state.selection.from, undefined, newAttrs);
     tr.setMeta('scrollIntoView', false);
     // when image captions are enabled, the wrong node gets selected after
@@ -104,18 +111,26 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
     return true;
   };
 };
-var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) {
+var getToolbarLayout = function getToolbarLayout(layout) {
+  if (getBooleanFF('platform.editor.media.extended-resize-experience') && nonWrappedLayouts.includes(layout)) {
+    return 'center';
+  }
+  return layout;
+};
+var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) {
   return icons.map(function (toolbarItem) {
     var id = toolbarItem.id,
       value = toolbarItem.value;
-    return {
+    return _objectSpread({
       id: id,
       type: 'button',
       icon: toolbarItem.icon,
       title: intl.formatMessage(layoutToMessages[value]),
-      selected: layout === value,
+      selected: getToolbarLayout(layout) === value,
       onClick: makeAlign(value, nodeType, widthPluginDependencyApi, analyticsApi)
-    };
+    }, isChangingLayoutDisabled && {
+      disabled: value !== 'center'
+    });
   });
 };
 var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref2, allowResizingInTables) {
@@ -125,13 +140,14 @@ var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref2,
 var buildLayoutButtons = function buildLayoutButtons(state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables) {
   var allowWrapping = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
   var allowAlignment = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
+  var isChangingLayoutDisabled = arguments.length > 9 ? arguments[9] : undefined;
   var selection = state.selection;
   if (!(selection instanceof NodeSelection) || !selection.node || !nodeType || shouldHideLayoutToolbar(selection, state.schema, allowResizingInTables)) {
     return [];
   }
   var layout = selection.node.attrs.layout;
-  var alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
-  var wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
+  var alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) : [];
+  var wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) : [];
   var breakOutToolbarItems = !allowResizing ? mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
   var items = [].concat(_toConsumableArray(alignmentToolbarItems), _toConsumableArray(getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping)), _toConsumableArray(wrappingToolbarItems), _toConsumableArray(getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing)), _toConsumableArray(breakOutToolbarItems));
   return items;

package/dist/esm/guideline/index.js

@@ -3,4 +3,5 @@ export { createFixedGuidelinesFromLengths, createGuidesFromLengths } from './fix
 export { generateDefaultGuidelines } from './defaultGuideline';
 export { getGuidelinesWithHighlights } from './updateGuideline';
 export { MEDIA_DYNAMIC_GUIDELINE_PREFIX } from './constants';
+export { getSnapWidth, findClosestSnap } from './snapping';
 export { isVerticalPosition, getContainerWidthOrFullEditorWidth } from './utils';

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "74.32.0";
+var packageVersion = "74.33.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/styles/shared/media-single.js

@@ -1,7 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 import { css } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var richMediaClassName = 'rich-media-item';
 var wrappedMediaBreakoutPoint = 410;
-var mediaSingleSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  li .", " {\n    margin: 0;\n  }\n\n  /* Hack for chrome to fix media single position\n     inside a list when media is the first child */\n  &.ua-chrome li > .mediaSingleView-content-wrap::before {\n    content: '';\n    display: block;\n    height: 0;\n  }\n\n  &.ua-firefox {\n    .mediaSingleView-content-wrap {\n      user-select: none;\n    }\n\n    .captionView-content-wrap {\n      user-select: text;\n    }\n  }\n\n  .mediaSingleView-content-wrap[layout='center'] {\n    clear: both;\n  }\n\n  table .", " {\n    margin-top: 12px;\n    margin-bottom: 12px;\n    clear: both;\n\n    &.image-wrap-left,\n    &.image-wrap-right {\n      clear: none;\n\n      &:first-child {\n        margin-top: 12px;\n      }\n    }\n  }\n\n  .", ".image-wrap-right\n    + .", ".image-wrap-left {\n    clear: both;\n  }\n\n  .", ".image-wrap-left\n    + .", ".image-wrap-right,\n    .", ".image-wrap-right\n    + .", ".image-wrap-left,\n    .", ".image-wrap-left\n    + .", ".image-wrap-left,\n    .", ".image-wrap-right\n    + .", ".image-wrap-right {\n    margin-right: 0;\n    margin-left: 0;\n  }\n\n  @media all and (max-width: ", "px) {\n    div.mediaSingleView-content-wrap[layout='wrap-left'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-left'],\n    div.mediaSingleView-content-wrap[layout='wrap-right'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-right'] {\n      float: none;\n      overflow: auto;\n      margin: 12px 0;\n    }\n  }\n"])), richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, wrappedMediaBreakoutPoint);
+var mediaSingleSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  li .", " {\n    margin: 0;\n  }\n\n  /* Hack for chrome to fix media single position\n     inside a list when media is the first child */\n  &.ua-chrome li > .mediaSingleView-content-wrap::before {\n    content: '';\n    display: block;\n    height: 0;\n  }\n\n  &.ua-firefox {\n    .mediaSingleView-content-wrap {\n      user-select: none;\n    }\n\n    .captionView-content-wrap {\n      user-select: text;\n    }\n  }\n\n  .mediaSingleView-content-wrap[layout='center'] {\n    clear: both;\n  }\n\n  table .", " {\n    margin-top: ", ";\n    margin-bottom: ", ";\n    clear: both;\n\n    &.image-wrap-left,\n    &.image-wrap-right {\n      clear: none;\n\n      &:first-child {\n        margin-top: ", ";\n      }\n    }\n  }\n\n  .", ".image-wrap-right\n    + .", ".image-wrap-left {\n    clear: both;\n  }\n\n  .", ".image-wrap-left\n    + .", ".image-wrap-right,\n    .", ".image-wrap-right\n    + .", ".image-wrap-left,\n    .", ".image-wrap-left\n    + .", ".image-wrap-left,\n    .", ".image-wrap-right\n    + .", ".image-wrap-right {\n    margin-right: 0;\n    margin-left: 0;\n  }\n\n  ", "\n"])), richMediaClassName, richMediaClassName, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, !getBooleanFF('platform.editor.media.extended-resize-experience') && "@media all and (max-width: ".concat(wrappedMediaBreakoutPoint, "px) {\n    div.mediaSingleView-content-wrap[layout='wrap-left'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-left'],\n    div.mediaSingleView-content-wrap[layout='wrap-right'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-right'] {\n      float: none;\n      overflow: auto;\n      margin: 12px 0;\n    }\n  }"));
 export { mediaSingleSharedStyle, richMediaClassName };

package/dist/esm/ui/DropList/index.js

@@ -18,7 +18,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.32.0";
+var packageVersion = "74.33.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/ui/MediaSingle/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 import { akEditorMediaResizeHandlerPaddingWide, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { MEDIA_SINGLE_GUTTER_SIZE } from '../../media-single/constants';
 import { getMediaSinglePixelWidth } from '../../media-single/utils';
-import { wrappedLayouts } from './grid';
+import { shouldAddDefaultWrappedWidth } from '../../utils/rich-media-utils';
 import { MediaSingleDimensionHelper, MediaWrapper } from './styled';
 export var DEFAULT_IMAGE_WIDTH = 250;
 export var DEFAULT_IMAGE_HEIGHT = 200;
@@ -16,9 +16,6 @@ export var DEFAULT_IMAGE_HEIGHT = 200;
     Read more: https://product-fabric.atlassian.net/browse/MEX-2481
 */
 export var IMAGE_AND_BORDER_ADJUSTMENT = 2;
-export var shouldAddDefaultWrappedWidth = function shouldAddDefaultWrappedWidth(layout, width, lineLength) {
-  return wrappedLayouts.indexOf(layout) > -1 && lineLength && width && width > 0.5 * lineLength;
-};
 export default function MediaSingle(_ref) {
   var layout = _ref.layout,
     width = _ref.width,

package/dist/esm/ui/MediaSingle/styled.js

@@ -5,7 +5,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { nonWrappedLayouts } from '../../utils';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
 function float(layout) {
   switch (layout) {
@@ -77,6 +78,24 @@ function calcMaxWidth(layout, containerWidth) {
       return '100%';
   }
 }
+var getEffectiveFullWidth = function getEffectiveFullWidth(containerWidth, fullWidthMode) {
+  if (fullWidthMode) {
+    return '100%';
+  }
+  // There is always padding for renderer, so we don't need padding for it
+  var fullWidthPadding = akEditorGutterPadding * 2;
+  return "".concat(Math.min(containerWidth - fullWidthPadding, akEditorFullWidthLayoutWidth), "px");
+};
+var calcMaxWidthWhenResizing = function calcMaxWidthWhenResizing(containerWidth, fullWidthMode, isNestedNode) {
+  if (isNestedNode) {
+    return '100%';
+  }
+  // non-nested node can resize up to full width
+  return getEffectiveFullWidth(containerWidth, fullWidthMode);
+};
+var calcMaxWidthWhenNotResizing = function calcMaxWidthWhenNotResizing(containerWidth, mediaSingleWidth) {
+  return "".concat(Math.min(mediaSingleWidth, containerWidth - akEditorGutterPadding * 2), "px");
+};
 function calcMargin(layout) {
   switch (layout) {
     case 'wrap-right':
@@ -109,8 +128,11 @@ export var MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref
     layout = _ref.layout,
     pctWidth = _ref.pctWidth,
     mediaSingleWidth = _ref.mediaSingleWidth,
-    width = _ref.width;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), mediaSingleWidth || pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    min-width: 100%;\n  "]))), calcMaxWidth(layout, containerWidth), float(layout), calcMargin(layout), isImageAligned(layout));
+    width = _ref.width,
+    isExtendedResizeExperienceOn = _ref.isExtendedResizeExperienceOn,
+    _ref$isNestedNode = _ref.isNestedNode,
+    isNestedNode = _ref$isNestedNode === void 0 ? false : _ref$isNestedNode;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n  &[class*='is-resizing'] {\n    ", "\n  }\n\n  /* Handles responsiveness of non-nested, not-resizing nodes in editor */\n  &[class*='not-resizing'] {\n    ", "\n  }\n\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), mediaSingleWidth || pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    min-width: 100%;\n  "]))), calcMaxWidth(layout, containerWidth), isExtendedResizeExperienceOn && "max-width: ".concat(calcMaxWidthWhenResizing(containerWidth, fullWidthMode, isNestedNode), ";\n\n    ").concat(nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n      transform: translateX(-50%);", "\n\n    .new-file-experience-wrapper {\n      box-shadow: none;\n    }"), !isNestedNode && "max-width: ".concat(layout !== 'full-width' && mediaSingleWidth && calcMaxWidthWhenNotResizing(containerWidth, mediaSingleWidth), ";\n\n    ").concat(nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n      transform: translateX(-50%);", "\n\n    // override min-width to counteract max-width set in old experience\n    ").concat(layout === 'full-width' && "min-width: ".concat(getEffectiveFullWidth(containerWidth, fullWidthMode), " !important;"), ";"), float(layout), calcMargin(layout), isImageAligned(layout));
 };
 var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
   var hasFallbackContainer = _ref2.hasFallbackContainer,

package/dist/esm/ui/index.js

@@ -1,5 +1,5 @@
 export { default as Caption } from './Caption';
-export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT, shouldAddDefaultWrappedWidth } from './MediaSingle';
+export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT } from './MediaSingle';
 export { MediaSingleDimensionHelper } from './MediaSingle/styled';
 export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid, calcMediaPxWidth, wrappedLayouts } from './MediaSingle/grid';
 export { mediaLinkStyle } from './MediaSingle/link';

package/dist/esm/utils/index.js

@@ -42,7 +42,7 @@ export { isFromCurrentDomain, LinkMatcher, normalizeUrl, linkifyContent, getLink
 export var pmHistoryPluginKey = 'history$';
 export { gridTypeForLayout } from './grid';
 export { nodesBetweenChanged, getStepRange, isEmptyDocument, processRawValue, hasDocAsParent, bracketTyped, hasVisibleContent } from './document';
-export { floatingLayouts, isRichMediaInsideOfBlockNode, calculateSnapPoints, alignAttributes } from './rich-media-utils';
+export { floatingLayouts, isRichMediaInsideOfBlockNode, calculateSnapPoints, alignAttributes, nonWrappedLayouts } from './rich-media-utils';
 export { sanitizeNodeForPrivacy } from './filter/privacy-filter';
 export { canRenderDatasource } from './datasource';
 export { filterCommand, walkPrevNode, walkNextNode, isEmptySelectionAtStart, isEmptySelectionAtEnd, insertContentDeleteRange, deleteEmptyParagraphAndMoveBlockUp } from './commands';

package/dist/esm/utils/rich-media-utils.js

@@ -3,8 +3,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
-import { shouldAddDefaultWrappedWidth } from '../ui/MediaSingle';
 import { calcPxFromColumns, wrappedLayouts } from '../ui/MediaSingle/grid';
+export var shouldAddDefaultWrappedWidth = function shouldAddDefaultWrappedWidth(layout, width, lineLength) {
+  return wrappedLayouts.indexOf(layout) > -1 && lineLength && width && width > 0.5 * lineLength;
+};
 export var nonWrappedLayouts = ['center', 'wide', 'full-width'];
 export var floatingLayouts = ['wrap-left', 'wrap-right'];
 export var isRichMediaInsideOfBlockNode = function isRichMediaInsideOfBlockNode(view, pos) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.32.0",
+	"version": "74.33.0",
 	"sideEffects": false
 }

package/dist/types/card/MediaAndEmbedsToolbar/index.d.ts

@@ -7,5 +7,5 @@ type WidthPluginType = NextEditorPlugin<'width', {
     sharedState: EditorContainerWidth | undefined;
 }>;
 type WidthPluginDependencyApi = PluginDependenciesAPI<WidthPluginType> | undefined;
-declare const buildLayoutButtons: (state: EditorState, intl: IntlShape, nodeType: NodeType, widthPluginDependencyApi: WidthPluginDependencyApi, analyticsApi: EditorAnalyticsAPI | undefined, allowResizing?: boolean, allowResizingInTables?: boolean, allowWrapping?: boolean, allowAlignment?: boolean) => FloatingToolbarItem<Command>[];
+declare const buildLayoutButtons: (state: EditorState, intl: IntlShape, nodeType: NodeType, widthPluginDependencyApi: WidthPluginDependencyApi, analyticsApi: EditorAnalyticsAPI | undefined, allowResizing?: boolean, allowResizingInTables?: boolean, allowWrapping?: boolean, allowAlignment?: boolean, isChangingLayoutDisabled?: boolean) => FloatingToolbarItem<Command>[];
 export default buildLayoutButtons;

package/dist/types/guideline/index.d.ts

@@ -4,4 +4,5 @@ export { generateDefaultGuidelines } from './defaultGuideline';
 export { getGuidelinesWithHighlights } from './updateGuideline';
 export { MEDIA_DYNAMIC_GUIDELINE_PREFIX } from './constants';
 export type { WidthTypes, Position, GuidelineConfig, GuidelinePluginState, GuidelinePluginOptions, DisplayGuideline, DisplayGrid, VerticalPosition, HorizontalPosition, } from './types';
+export { getSnapWidth, findClosestSnap } from './snapping';
 export { isVerticalPosition, getContainerWidthOrFullEditorWidth, } from './utils';

package/dist/types/types/feature-flags.d.ts

@@ -416,6 +416,14 @@ export type FeatureFlags = {
      * @default false
      */
     useFragmentMarkBreakoutWidthStylingFix?: boolean;
+    /**
+     * @description
+     * Enable the new editor media resize experience.
+     *
+     * @see https://product-fabric.atlassian.net/browse/ED-18316
+     * @default false
+     */
+    extendedMediaResizeExperience?: boolean | undefined;
 };
 export type FeatureFlagKey = keyof FeatureFlags;
 export type GetEditorFeatureFlags = () => FeatureFlags;

package/dist/types/ui/DropList/index.d.ts

@@ -16,5 +16,5 @@ export type OpenChangedEvent = {
     isOpen: boolean;
     event: MouseEvent | KeyboardEvent;
 };
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "id" | "children" | "position" | "testId" | "analyticsContext" | "shouldFitContainer" | "trigger" | "isOpen" | "onPositioned" | "onOpenChange"> & import("react").RefAttributes<any>>;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "id" | "children" | "testId" | "position" | "analyticsContext" | "shouldFitContainer" | "trigger" | "isOpen" | "onPositioned" | "onOpenChange"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/types/ui/MediaSingle/index.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { RichMediaLayout as MediaSingleLayout, RichMediaLayout } from '@atlaskit/adf-schema';
+import { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import type { MediaSingleSize, MediaSingleWidthType } from './types';
 export declare const DEFAULT_IMAGE_WIDTH = 250;
 export declare const DEFAULT_IMAGE_HEIGHT = 200;
@@ -27,6 +27,5 @@ export interface Props {
     hasFallbackContainer?: boolean;
     handleMediaSingleRef?: React.RefObject<HTMLDivElement>;
 }
-export declare const shouldAddDefaultWrappedWidth: (layout: RichMediaLayout, width?: number, lineLength?: number) => boolean | 0 | undefined;
 export type { MediaSingleWidthType, MediaSingleSize };
 export default function MediaSingle({ layout, width, height, containerWidth, isLoading, pctWidth, size, className, children: propsChildren, nodeType, fullWidthMode, lineLength: editorWidth, hasFallbackContainer, handleMediaSingleRef, }: Props): jsx.JSX.Element;

package/dist/types/ui/MediaSingle/styled.d.ts

@@ -31,12 +31,14 @@ export interface MediaSingleWrapperProps {
     mediaSingleWidth?: number;
     width?: number;
     innerRef?: ((elem: HTMLDivElement) => void) | RefObject<HTMLDivElement>;
+    isExtendedResizeExperienceOn?: boolean;
+    isNestedNode?: boolean;
 }
 /**
  * Can't use `.attrs` to handle highly dynamic styles because we are still
  * supporting `styled-components` v1.
  */
-export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, pctWidth, mediaSingleWidth, width, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
+export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, pctWidth, mediaSingleWidth, width, isExtendedResizeExperienceOn, isNestedNode, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
 export interface MediaWrapperProps {
     paddingBottom?: string;
     height?: number;

package/dist/types/ui/index.d.ts

@@ -1,5 +1,5 @@
 export { default as Caption } from './Caption';
-export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT, shouldAddDefaultWrappedWidth, } from './MediaSingle';
+export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT, } from './MediaSingle';
 export type { Props as MediaSingleProps, MediaSingleWidthType, MediaSingleSize, } from './MediaSingle';
 export { MediaSingleDimensionHelper } from './MediaSingle/styled';
 export type { MediaSingleWrapperProps as MediaSingleDimensionHelperProps } from './MediaSingle/styled';

package/dist/types/utils/index.d.ts

@@ -52,7 +52,7 @@ export { isFromCurrentDomain, LinkMatcher, normalizeUrl, linkifyContent, getLink
 export declare const pmHistoryPluginKey = "history$";
 export { gridTypeForLayout } from './grid';
 export { nodesBetweenChanged, getStepRange, isEmptyDocument, processRawValue, hasDocAsParent, bracketTyped, hasVisibleContent, } from './document';
-export { floatingLayouts, isRichMediaInsideOfBlockNode, calculateSnapPoints, alignAttributes, } from './rich-media-utils';
+export { floatingLayouts, isRichMediaInsideOfBlockNode, calculateSnapPoints, alignAttributes, nonWrappedLayouts, } from './rich-media-utils';
 export { sanitizeNodeForPrivacy } from './filter/privacy-filter';
 export { canRenderDatasource } from './datasource';
 export { filterCommand, walkPrevNode, walkNextNode, isEmptySelectionAtStart, isEmptySelectionAtEnd, insertContentDeleteRange, deleteEmptyParagraphAndMoveBlockUp, } from './commands';

package/dist/types/utils/rich-media-utils.d.ts

@@ -1,6 +1,7 @@
 import { RichMediaAttributes, RichMediaLayout } from '@atlaskit/adf-schema';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { SnapPointsProps } from '../types';
+export declare const shouldAddDefaultWrappedWidth: (layout: RichMediaLayout, width?: number, lineLength?: number) => boolean | 0 | undefined;
 export declare const nonWrappedLayouts: RichMediaLayout[];
 export declare const floatingLayouts: string[];
 export declare const isRichMediaInsideOfBlockNode: (view: EditorView, pos: number | boolean) => boolean;

package/dist/types-ts4.5/card/MediaAndEmbedsToolbar/index.d.ts

@@ -7,5 +7,5 @@ type WidthPluginType = NextEditorPlugin<'width', {
     sharedState: EditorContainerWidth | undefined;
 }>;
 type WidthPluginDependencyApi = PluginDependenciesAPI<WidthPluginType> | undefined;
-declare const buildLayoutButtons: (state: EditorState, intl: IntlShape, nodeType: NodeType, widthPluginDependencyApi: WidthPluginDependencyApi, analyticsApi: EditorAnalyticsAPI | undefined, allowResizing?: boolean, allowResizingInTables?: boolean, allowWrapping?: boolean, allowAlignment?: boolean) => FloatingToolbarItem<Command>[];
+declare const buildLayoutButtons: (state: EditorState, intl: IntlShape, nodeType: NodeType, widthPluginDependencyApi: WidthPluginDependencyApi, analyticsApi: EditorAnalyticsAPI | undefined, allowResizing?: boolean, allowResizingInTables?: boolean, allowWrapping?: boolean, allowAlignment?: boolean, isChangingLayoutDisabled?: boolean) => FloatingToolbarItem<Command>[];
 export default buildLayoutButtons;

package/dist/types-ts4.5/guideline/index.d.ts

@@ -4,4 +4,5 @@ export { generateDefaultGuidelines } from './defaultGuideline';
 export { getGuidelinesWithHighlights } from './updateGuideline';
 export { MEDIA_DYNAMIC_GUIDELINE_PREFIX } from './constants';
 export type { WidthTypes, Position, GuidelineConfig, GuidelinePluginState, GuidelinePluginOptions, DisplayGuideline, DisplayGrid, VerticalPosition, HorizontalPosition, } from './types';
+export { getSnapWidth, findClosestSnap } from './snapping';
 export { isVerticalPosition, getContainerWidthOrFullEditorWidth, } from './utils';

package/dist/types-ts4.5/types/feature-flags.d.ts

@@ -416,6 +416,14 @@ export type FeatureFlags = {
      * @default false
      */
     useFragmentMarkBreakoutWidthStylingFix?: boolean;
+    /**
+     * @description
+     * Enable the new editor media resize experience.
+     *
+     * @see https://product-fabric.atlassian.net/browse/ED-18316
+     * @default false
+     */
+    extendedMediaResizeExperience?: boolean | undefined;
 };
 export type FeatureFlagKey = keyof FeatureFlags;
 export type GetEditorFeatureFlags = () => FeatureFlags;

package/dist/types-ts4.5/ui/DropList/index.d.ts

@@ -16,5 +16,5 @@ export type OpenChangedEvent = {
     isOpen: boolean;
     event: MouseEvent | KeyboardEvent;
 };
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "id" | "children" | "position" | "testId" | "analyticsContext" | "shouldFitContainer" | "trigger" | "isOpen" | "onPositioned" | "onOpenChange"> & import("react").RefAttributes<any>>;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "key" | "id" | "children" | "testId" | "position" | "analyticsContext" | "shouldFitContainer" | "trigger" | "isOpen" | "onPositioned" | "onOpenChange"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/ui/MediaSingle/index.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { RichMediaLayout as MediaSingleLayout, RichMediaLayout } from '@atlaskit/adf-schema';
+import { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import type { MediaSingleSize, MediaSingleWidthType } from './types';
 export declare const DEFAULT_IMAGE_WIDTH = 250;
 export declare const DEFAULT_IMAGE_HEIGHT = 200;
@@ -27,6 +27,5 @@ export interface Props {
     hasFallbackContainer?: boolean;
     handleMediaSingleRef?: React.RefObject<HTMLDivElement>;
 }
-export declare const shouldAddDefaultWrappedWidth: (layout: RichMediaLayout, width?: number, lineLength?: number) => boolean | 0 | undefined;
 export type { MediaSingleWidthType, MediaSingleSize };
 export default function MediaSingle({ layout, width, height, containerWidth, isLoading, pctWidth, size, className, children: propsChildren, nodeType, fullWidthMode, lineLength: editorWidth, hasFallbackContainer, handleMediaSingleRef, }: Props): jsx.JSX.Element;

package/dist/types-ts4.5/ui/MediaSingle/styled.d.ts

@@ -31,12 +31,14 @@ export interface MediaSingleWrapperProps {
     mediaSingleWidth?: number;
     width?: number;
     innerRef?: ((elem: HTMLDivElement) => void) | RefObject<HTMLDivElement>;
+    isExtendedResizeExperienceOn?: boolean;
+    isNestedNode?: boolean;
 }
 /**
  * Can't use `.attrs` to handle highly dynamic styles because we are still
  * supporting `styled-components` v1.
  */
-export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, pctWidth, mediaSingleWidth, width, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
+export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, pctWidth, mediaSingleWidth, width, isExtendedResizeExperienceOn, isNestedNode, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
 export interface MediaWrapperProps {
     paddingBottom?: string;
     height?: number;

package/dist/types-ts4.5/ui/index.d.ts

@@ -1,5 +1,5 @@
 export { default as Caption } from './Caption';
-export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT, shouldAddDefaultWrappedWidth, } from './MediaSingle';
+export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT, } from './MediaSingle';
 export type { Props as MediaSingleProps, MediaSingleWidthType, MediaSingleSize, } from './MediaSingle';
 export { MediaSingleDimensionHelper } from './MediaSingle/styled';
 export type { MediaSingleWrapperProps as MediaSingleDimensionHelperProps } from './MediaSingle/styled';

package/dist/types-ts4.5/utils/index.d.ts

@@ -52,7 +52,7 @@ export { isFromCurrentDomain, LinkMatcher, normalizeUrl, linkifyContent, getLink
 export declare const pmHistoryPluginKey = "history$";
 export { gridTypeForLayout } from './grid';
 export { nodesBetweenChanged, getStepRange, isEmptyDocument, processRawValue, hasDocAsParent, bracketTyped, hasVisibleContent, } from './document';
-export { floatingLayouts, isRichMediaInsideOfBlockNode, calculateSnapPoints, alignAttributes, } from './rich-media-utils';
+export { floatingLayouts, isRichMediaInsideOfBlockNode, calculateSnapPoints, alignAttributes, nonWrappedLayouts, } from './rich-media-utils';
 export { sanitizeNodeForPrivacy } from './filter/privacy-filter';
 export { canRenderDatasource } from './datasource';
 export { filterCommand, walkPrevNode, walkNextNode, isEmptySelectionAtStart, isEmptySelectionAtEnd, insertContentDeleteRange, deleteEmptyParagraphAndMoveBlockUp, } from './commands';

package/dist/types-ts4.5/utils/rich-media-utils.d.ts

@@ -1,6 +1,7 @@
 import { RichMediaAttributes, RichMediaLayout } from '@atlaskit/adf-schema';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { SnapPointsProps } from '../types';
+export declare const shouldAddDefaultWrappedWidth: (layout: RichMediaLayout, width?: number, lineLength?: number) => boolean | 0 | undefined;
 export declare const nonWrappedLayouts: RichMediaLayout[];
 export declare const floatingLayouts: string[];
 export declare const isRichMediaInsideOfBlockNode: (view: EditorView, pos: number | boolean) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "74.32.0",
+  "version": "74.33.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -97,7 +97,7 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/icon-object": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.2.0",
-    "@atlaskit/link-datasource": "^0.31.0",
+    "@atlaskit/link-datasource": "^0.32.0",
     "@atlaskit/link-picker": "^1.25.0",
     "@atlaskit/media-card": "^76.1.0",
     "@atlaskit/media-client": "^23.1.0",
@@ -191,6 +191,9 @@
     "platform.linking-platform.datasource-jira_issues": {
       "type": "boolean"
     },
+    "platform.editor.media.extended-resize-experience": {
+      "type": "boolean"
+    },
     "platform.linking-platform.datasource-assets_objects": {
       "type": "boolean"
     }