@atlaskit/editor-plugin-media 2.4.1 → 2.5.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-media
 
+## 2.5.0
+
+### Minor Changes
+
+- [#134613](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134613)
+  [`be20cc186939b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/be20cc186939b) -
+  ED-26247 Remove feature flag platform_media_extended_resize_experience and replace it with a new
+  media prop which defaults to false allowPixelResizing
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.4.1
 
 ### Patch Changes

package/dist/cjs/mediaPlugin.js

@@ -106,7 +106,7 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
     actions: {
       insertMediaAsMediaSingle: function insertMediaAsMediaSingle(view, node, inputMethod, insertMediaVia) {
         var _api$analytics;
-        return (0, _mediaSingle2.insertMediaAsMediaSingle)(view, node, inputMethod, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, insertMediaVia);
+        return (0, _mediaSingle2.insertMediaAsMediaSingle)(view, node, inputMethod, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, insertMediaVia, options === null || options === void 0 ? void 0 : options.allowPixelResizing);
       },
       setProvider: function setProvider(provider) {
         var _api$core$actions$exe;
@@ -134,16 +134,15 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
         allowMediaGroup = _ref5$allowMediaGroup === void 0 ? true : _ref5$allowMediaGroup,
         _ref5$allowMediaSingl = _ref5.allowMediaSingle,
         allowMediaSingle = _ref5$allowMediaSingl === void 0 ? false : _ref5$allowMediaSingl,
+        _ref5$allowPixelResiz = _ref5.allowPixelResizing,
+        allowPixelResizing = _ref5$allowPixelResiz === void 0 ? false : _ref5$allowPixelResiz,
         allowCaptions = _ref5.allowCaptions,
         allowMediaInlineImages = _ref5.allowMediaInlineImages,
         mediaFeatureFlags = _ref5.featureFlags;
       var allowMediaInline = (0, _platformFeatureFlags.fg)('platform_editor_remove_media_inline_feature_flag') ? allowMediaInlineImages : (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaFeatureFlags);
-      var mediaSingleOption = (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience') ? {
+      var mediaSingleOption = {
         withCaption: allowCaptions,
-        withExtendedWidthTypes: true
-      } : {
-        withCaption: allowCaptions,
-        withExtendedWidthTypes: false
+        withExtendedWidthTypes: allowPixelResizing
       };
       return [{
         name: 'mediaGroup',
@@ -246,7 +245,7 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
           }
         });
       }
-      if (options && options.allowAdvancedToolBarOptions && options.allowResizing && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience')) {
+      if (options && options.allowAdvancedToolBarOptions && options.allowResizing && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && options.allowPixelResizing) {
         pmPlugins.push({
           name: 'mediaPixelResizing',
           plugin: _pixelResizing.createPlugin
@@ -351,7 +350,8 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
           altTextValidator: options && options.altTextValidator,
           fullWidthEnabled: options && options.fullWidthEnabled,
           allowMediaInlineImages: options && options.allowMediaInlineImages,
-          isViewOnly: (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view'
+          isViewOnly: (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view',
+          allowPixelResizing: options === null || options === void 0 ? void 0 : options.allowPixelResizing
         }, api);
       }
     }

package/dist/cjs/nodeviews/mediaSingle.js

@@ -481,7 +481,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         mediaElement: currentMediaElement(),
         mediaHeight: height,
         mediaWidth: width,
-        extendedResizeOffset: (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience') && !isInsideTable
+        extendedResizeOffset: mediaOptions.allowPixelResizing && !isInsideTable
       }, function (_ref5) {
         var visible = _ref5.visible;
         return (0, _react2.jsx)(_react.default.Fragment, null, visible && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
@@ -515,7 +515,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         onClick: this.clickPlaceholder,
         placeholderMessage: mediaOptions.allowImagePreview ? _media.captionMessages.placeholderWithDoubleClickPrompt : _media.captionMessages.placeholder
       })));
-      return (0, _react2.jsx)(_react.Fragment, null, canResize ? (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience') ? (0, _react2.jsx)(_ResizableMediaSingleNext.default
+      return (0, _react2.jsx)(_react.Fragment, null, canResize ? mediaOptions.allowPixelResizing ? (0, _react2.jsx)(_ResizableMediaSingleNext.default
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
       , (0, _extends2.default)({}, resizableMediaSingleProps, {
@@ -656,14 +656,14 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   return (0, _createClass2.default)(MediaSingleNodeView, [{
     key: "createDomRef",
     value: function createDomRef() {
-      var _this$reactComponentP;
+      var _this$reactComponentP, _this$reactComponentP2;
       var domRef = document.createElement('div');
 
       // control the domRef contentEditable attribute based on the editor view mode
       this.unsubscribeToViewModeChange = this.subscribeToViewModeChange(domRef);
       var initialViewMode = (_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.sharedState.currentState()) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.mode;
       this.updateDomRefContentEditable(domRef, initialViewMode);
-      if ((0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience')) {
+      if ((_this$reactComponentP2 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP2 !== void 0 && _this$reactComponentP2.allowPixelResizing) {
         domRef.classList.add('media-extended-resize-experience');
       }
       return domRef;
@@ -698,9 +698,9 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "subscribeToViewModeChange",
     value: function subscribeToViewModeChange(domRef) {
-      var _this$reactComponentP2,
+      var _this$reactComponentP3,
         _this3 = this;
-      return (_this$reactComponentP2 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP2 === void 0 || (_this$reactComponentP2 = _this$reactComponentP2.editorViewMode) === null || _this$reactComponentP2 === void 0 ? void 0 : _this$reactComponentP2.sharedState.onChange(function (viewModeState) {
+      return (_this$reactComponentP3 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP3 === void 0 || (_this$reactComponentP3 = _this$reactComponentP3.editorViewMode) === null || _this$reactComponentP3 === void 0 ? void 0 : _this$reactComponentP3.sharedState.onChange(function (viewModeState) {
         var _viewModeState$nextSh;
         _this3.updateDomRefContentEditable(domRef, (_viewModeState$nextSh = viewModeState.nextSharedState) === null || _viewModeState$nextSh === void 0 ? void 0 : _viewModeState$nextSh.mode);
       });
@@ -708,7 +708,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "updateDomRefContentEditable",
     value: function updateDomRefContentEditable(domRef, editorViewMode) {
-      var _this$reactComponentP3;
+      var _this$reactComponentP4;
       // if the editor is in view mode, we should not allow editing
       if (editorViewMode === 'view') {
         domRef.contentEditable = 'false';
@@ -716,7 +716,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       }
 
       // if the editor is in edit mode, we should allow editing if the media options allow it
-      if ((_this$reactComponentP3 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP3 !== void 0 && _this$reactComponentP3.allowMediaSingleEditable) {
+      if ((_this$reactComponentP4 = this.reactComponentProps.mediaOptions) !== null && _this$reactComponentP4 !== void 0 && _this$reactComponentP4.allowMediaSingleEditable) {
         // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
         // see also: https://github.com/ProseMirror/prosemirror/issues/884
         domRef.contentEditable = 'true';
@@ -756,14 +756,14 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
     key: "render",
     value: function render(props, forwardRef) {
       var _this5 = this;
-      var _this$reactComponentP4 = this.reactComponentProps,
-        eventDispatcher = _this$reactComponentP4.eventDispatcher,
-        fullWidthMode = _this$reactComponentP4.fullWidthMode,
-        providerFactory = _this$reactComponentP4.providerFactory,
-        mediaOptions = _this$reactComponentP4.mediaOptions,
-        dispatchAnalyticsEvent = _this$reactComponentP4.dispatchAnalyticsEvent,
-        pluginInjectionApi = _this$reactComponentP4.pluginInjectionApi,
-        editorAppearance = _this$reactComponentP4.editorAppearance;
+      var _this$reactComponentP5 = this.reactComponentProps,
+        eventDispatcher = _this$reactComponentP5.eventDispatcher,
+        fullWidthMode = _this$reactComponentP5.fullWidthMode,
+        providerFactory = _this$reactComponentP5.providerFactory,
+        mediaOptions = _this$reactComponentP5.mediaOptions,
+        dispatchAnalyticsEvent = _this$reactComponentP5.dispatchAnalyticsEvent,
+        pluginInjectionApi = _this$reactComponentP5.pluginInjectionApi,
+        editorAppearance = _this$reactComponentP5.editorAppearance;
 
       // getPos is a boolean for marks, since this is a node we know it must be a function
       var getPos = this.getPos;

package/dist/cjs/nodeviews/mediaSingleNext.js

@@ -478,7 +478,7 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
     mediaElement: currentMediaElement(),
     mediaHeight: height,
     mediaWidth: width,
-    extendedResizeOffset: (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience') && !isInsideTable
+    extendedResizeOffset: mediaOptions.allowPixelResizing && !isInsideTable
   }, function (_ref7) {
     var visible = _ref7.visible;
     return (0, _react2.jsx)(_react.default.Fragment, null, visible && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
@@ -512,7 +512,7 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
     onClick: clickPlaceholder,
     placeholderMessage: mediaOptions.allowImagePreview ? _media.captionMessages.placeholderWithDoubleClickPrompt : _media.captionMessages.placeholder
   })));
-  return (0, _react2.jsx)(_react.Fragment, null, canResize ? (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience') ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, {
+  return (0, _react2.jsx)(_react.Fragment, null, canResize ? mediaOptions.allowPixelResizing ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, {
     view: view,
     getPos: getPos,
     updateSize: updateSize,

package/dist/cjs/nodeviews/toDOM-fixes/mediaSingle.js

@@ -4,11 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toDOM = exports.prepareWrapperContentDOM = exports.mediaWidthCSSCalc = exports.mediaSingleSpecWithFixedToDOM = exports.mediaProportionalWidthCSSCalc = exports.mediaJustifyContentCSS = exports.mediaContentWrapperWidthCSSCalc = void 0;
+exports.prepareWrapperContentDOM = exports.mediaWidthCSSCalc = exports.mediaSingleSpecWithFixedToDOM = exports.mediaProportionalWidthCSSCalc = exports.mediaJustifyContentCSS = exports.mediaContentWrapperWidthCSSCalc = exports.getToDom = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _toDOMAttrs = require("./toDOMAttrs");
@@ -157,55 +156,57 @@ var prepareWrapperContentDOM = exports.prepareWrapperContentDOM = function prepa
     class: 'media-content-wrap'
   }, 0]]]]];
 };
-var toDOM = exports.toDOM = function toDOM(node) {
-  var _mediaSingleAttrs$lay;
-  var mediaSingleAttrs = node.attrs;
-  var isPixelWidth = (mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.widthType) === 'pixel';
-  var layout = (_mediaSingleAttrs$lay = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.layout) !== null && _mediaSingleAttrs$lay !== void 0 ? _mediaSingleAttrs$lay : 'center';
-  var childNode = node.firstChild;
-  var isExternalMedia = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs.type) === 'external';
-  var childMediaWidth = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs.width) || DEFAULT_IMAGE_WIDTH;
-  var childMediaHeight = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs.height) || DEFAULT_IMAGE_HEIGHT;
-  var dataAttrs = (0, _toDOMAttrs.getAttrsFromNodeMediaSingle)((0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience'), node);
-  var content = prepareWrapperContentDOM({
-    layout: layout,
-    dataAttrs: dataAttrs,
-    childMediaWidth: childMediaWidth,
-    childMediaHeight: childMediaHeight,
-    mediaSingleDimensionWidth: mediaSingleAttrs.width,
-    isPixelWidth: isPixelWidth,
-    isExtendedResizeExperience: (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience')
-  });
-  var isMediaWrapped = WRAPPED_LAYOUTS.includes(layout);
-  var proportionCalc = mediaProportionalWidthCSSCalc({
-    isPixelWidth: isPixelWidth,
-    isMediaWrapped: isMediaWrapped,
-    mediaSingleDimensionWidth: mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width,
-    isExtendedResizeExperience: (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience')
-  });
-  var contentWrapperWidth = mediaContentWrapperWidthCSSCalc({
-    isMediaWrapped: isMediaWrapped,
-    isExternalMedia: isExternalMedia,
-    isPixelWidth: isPixelWidth,
-    childMediaWidth: childMediaWidth,
-    mediaSingleDimensionWidth: mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width
-  });
-  return ['div', {
-    class: 'mediaSingleView-content-wrap',
-    layout: layout,
-    style: (0, _lazyNodeView.convertToInlineCss)({
-      '--ak-editor-media-single--proportion': proportionCalc,
-      '--ak-editor-media-card-display': 'block',
-      '--ak-editor-media-single--gutter-size': GUTTER_SIZE,
-      '--ak-editor-media-margin-right': '0',
-      '--ak-editor-media-card-background-color': "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
-      marginTop: isMediaWrapped ? HALF_GUTTER_SIZE : "var(--ds-space-300, 24px)",
-      marginBottom: isMediaWrapped ? HALF_GUTTER_SIZE : "var(--ds-space-300, 24px)",
-      marginRight: isMediaWrapped ? layout === 'wrap-right' ? 'auto' : HALF_GUTTER_SIZE : 0,
-      marginLeft: isMediaWrapped ? layout === 'wrap-left' ? 'auto' : HALF_GUTTER_SIZE : 0,
-      width: contentWrapperWidth
-    })
-  }, content];
+var getToDom = exports.getToDom = function getToDom(allowPixelResizing) {
+  return function (node) {
+    var _mediaSingleAttrs$lay;
+    var mediaSingleAttrs = node.attrs;
+    var isPixelWidth = (mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.widthType) === 'pixel';
+    var layout = (_mediaSingleAttrs$lay = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.layout) !== null && _mediaSingleAttrs$lay !== void 0 ? _mediaSingleAttrs$lay : 'center';
+    var childNode = node.firstChild;
+    var isExternalMedia = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs.type) === 'external';
+    var childMediaWidth = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs.width) || DEFAULT_IMAGE_WIDTH;
+    var childMediaHeight = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs.height) || DEFAULT_IMAGE_HEIGHT;
+    var dataAttrs = (0, _toDOMAttrs.getAttrsFromNodeMediaSingle)(true, node);
+    var content = prepareWrapperContentDOM({
+      layout: layout,
+      dataAttrs: dataAttrs,
+      childMediaWidth: childMediaWidth,
+      childMediaHeight: childMediaHeight,
+      mediaSingleDimensionWidth: mediaSingleAttrs.width,
+      isPixelWidth: isPixelWidth,
+      isExtendedResizeExperience: allowPixelResizing
+    });
+    var isMediaWrapped = WRAPPED_LAYOUTS.includes(layout);
+    var proportionCalc = mediaProportionalWidthCSSCalc({
+      isPixelWidth: isPixelWidth,
+      isMediaWrapped: isMediaWrapped,
+      mediaSingleDimensionWidth: mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width,
+      isExtendedResizeExperience: allowPixelResizing
+    });
+    var contentWrapperWidth = mediaContentWrapperWidthCSSCalc({
+      isMediaWrapped: isMediaWrapped,
+      isExternalMedia: isExternalMedia,
+      isPixelWidth: isPixelWidth,
+      childMediaWidth: childMediaWidth,
+      mediaSingleDimensionWidth: mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width
+    });
+    return ['div', {
+      class: 'mediaSingleView-content-wrap',
+      layout: layout,
+      style: (0, _lazyNodeView.convertToInlineCss)({
+        '--ak-editor-media-single--proportion': proportionCalc,
+        '--ak-editor-media-card-display': 'block',
+        '--ak-editor-media-single--gutter-size': GUTTER_SIZE,
+        '--ak-editor-media-margin-right': '0',
+        '--ak-editor-media-card-background-color': "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
+        marginTop: isMediaWrapped ? HALF_GUTTER_SIZE : "var(--ds-space-300, 24px)",
+        marginBottom: isMediaWrapped ? HALF_GUTTER_SIZE : "var(--ds-space-300, 24px)",
+        marginRight: isMediaWrapped ? layout === 'wrap-right' ? 'auto' : HALF_GUTTER_SIZE : 0,
+        marginLeft: isMediaWrapped ? layout === 'wrap-left' ? 'auto' : HALF_GUTTER_SIZE : 0,
+        width: contentWrapperWidth
+      })
+    }, content];
+  };
 };
 
 // @nodeSpecException:toDOM patch
@@ -214,6 +215,7 @@ var mediaSingleSpecWithFixedToDOM = exports.mediaSingleSpecWithFixedToDOM = func
   if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false)) {
     return mediaSingleNode;
   }
+  var toDOM = getToDom(mediaSingleOption.withExtendedWidthTypes);
   return _objectSpread(_objectSpread({}, mediaSingleNode), {}, {
     toDOM: toDOM
   });

package/dist/cjs/pm-plugins/keymap.js

@@ -11,7 +11,6 @@ var _selection = require("@atlaskit/editor-common/selection");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _captions = require("../pm-plugins/commands/captions");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _commands = require("../ui/toolbar/commands");
@@ -44,7 +43,7 @@ function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, widthPlug
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.enter.common, splitMediaGroup, list);
-  if ((0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience')) {
+  if (options !== null && options !== void 0 && options.allowPixelResizing) {
     (0, _keymaps.bindKeymapWithCommand)(
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

package/dist/cjs/pm-plugins/main.js

@@ -158,7 +158,7 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
         case 'block':
           // read width state right before inserting to get up-to-date and define values
           var widthPluginState = (_this$pluginInjection2 = _this.pluginInjectionApi) === null || _this$pluginInjection2 === void 0 || (_this$pluginInjection2 = _this$pluginInjection2.width) === null || _this$pluginInjection2 === void 0 ? void 0 : _this$pluginInjection2.sharedState.currentState();
-          (0, _mediaSingle2.insertMediaSingleNode)(_this.view, mediaStateWithContext, _this.getInputMethod(pickerType), collection, _this.mediaOptions && _this.mediaOptions.alignLeftOnInsert, widthPluginState, editorAnalyticsAPI, _this.onNodeInserted, insertMediaVia);
+          (0, _mediaSingle2.insertMediaSingleNode)(_this.view, mediaStateWithContext, _this.getInputMethod(pickerType), collection, _this.mediaOptions && _this.mediaOptions.alignLeftOnInsert, widthPluginState, editorAnalyticsAPI, _this.onNodeInserted, insertMediaVia, _this.mediaOptions && _this.mediaOptions.allowPixelResizing);
           break;
         case 'group':
           (0, _mediaFiles.insertMediaGroupNode)(editorAnalyticsAPI)(_this.view, [mediaStateWithContext], collection, _this.getInputMethod(pickerType), insertMediaVia);

package/dist/cjs/pm-plugins/utils/media-single.js

@@ -101,7 +101,7 @@ function insertNodesWithOptionalParagraph(_ref) {
 var isMediaSingle = exports.isMediaSingle = function isMediaSingle(schema, fileMimeType) {
   return !!schema.nodes.mediaSingle && (0, _isType.isImage)(fileMimeType);
 };
-var insertMediaAsMediaSingle = exports.insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, node, inputMethod, editorAnalyticsAPI, insertMediaVia) {
+var insertMediaAsMediaSingle = exports.insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, node, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing) {
   var _node$attrs$width;
   var state = view.state,
     dispatch = view.dispatch;
@@ -116,9 +116,8 @@ var insertMediaAsMediaSingle = exports.insertMediaAsMediaSingle = function inser
   if (node.type !== media || !(0, _isType.isImage)(node.attrs.__fileMimeType) && node.attrs.type !== 'external') {
     return false;
   }
-  var resizeExperience = (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience');
   var insertMediaPopup = (0, _platformFeatureFlags.fg)('platform_editor_add_media_from_url_rollout');
-  var mediaSingleAttrs = resizeExperience && insertMediaPopup ? {
+  var mediaSingleAttrs = allowPixelResizing && insertMediaPopup ? {
     widthType: 'pixel',
     width: (0, _mediaSingle.getMediaSingleInitialWidth)((_node$attrs$width = node.attrs.width) !== null && _node$attrs$width !== void 0 ? _node$attrs$width : _mediaSingle.DEFAULT_IMAGE_WIDTH),
     layout: 'center'
@@ -143,7 +142,7 @@ var getFileExtension = function getFileExtension(fileName) {
   }
   return undefined;
 };
-var insertMediaSingleNode = exports.insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inputMethod, collection, alignLeftOnInsert, widthPluginState, editorAnalyticsAPI, onNodeInserted, insertMediaVia) {
+var insertMediaSingleNode = exports.insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inputMethod, collection, alignLeftOnInsert, widthPluginState, editorAnalyticsAPI, onNodeInserted, insertMediaVia, allowPixelResizing) {
   var _state$selection$$fro;
   if (collection === undefined) {
     return false;
@@ -156,7 +155,7 @@ var insertMediaSingleNode = exports.insertMediaSingleNode = function insertMedia
   // add undefined as fallback as we don't want media single width to have upper limit as 0
   // if widthPluginState.width is 0, default 760 will be used
   var contentWidth = (0, _mediaSingle.getMaxWidthForNestedNodeNext)(view, state.selection.$from.pos, true) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
-  var node = createMediaSingleNode(state.schema, collection, contentWidth, mediaState.status !== 'error' && isVideo(mediaState.fileMimeType) ? _mediaSingle.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert)(mediaState);
+  var node = createMediaSingleNode(state.schema, collection, contentWidth, mediaState.status !== 'error' && isVideo(mediaState.fileMimeType) ? _mediaSingle.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert, allowPixelResizing)(mediaState);
   var fileExtension;
   if (mediaState.fileName) {
     var extensionIdx = mediaState.fileName.lastIndexOf('.');
@@ -195,7 +194,7 @@ var insertMediaSingleNode = exports.insertMediaSingleNode = function insertMedia
   }
   return true;
 };
-var changeFromMediaInlineToMediaSingleNode = exports.changeFromMediaInlineToMediaSingleNode = function changeFromMediaInlineToMediaSingleNode(view, fromNode, widthPluginState, editorAnalyticsAPI) {
+var changeFromMediaInlineToMediaSingleNode = exports.changeFromMediaInlineToMediaSingleNode = function changeFromMediaInlineToMediaSingleNode(view, fromNode, widthPluginState, editorAnalyticsAPI, allowPixelResizing) {
   var _state$selection$$fro2;
   var state = view.state,
     dispatch = view.dispatch;
@@ -209,7 +208,7 @@ var changeFromMediaInlineToMediaSingleNode = exports.changeFromMediaInlineToMedi
   // add undefined as fallback as we don't want media single width to have upper limit as 0
   // if widthPluginState.width is 0, default 760 will be used
   var contentWidth = (0, _mediaSingle.getMaxWidthForNestedNodeNext)(view, state.selection.$from.pos, true) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
-  var node = replaceWithMediaSingleNode(state.schema, contentWidth, _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH)(fromNode);
+  var node = replaceWithMediaSingleNode(state.schema, contentWidth, _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, allowPixelResizing)(fromNode);
   var fileExtension = getFileExtension(fromNode.attrs.__fileName);
   // should split if media is valid content for the grandparent of the selected node
   // and the parent node is a paragraph
@@ -241,7 +240,7 @@ var changeFromMediaInlineToMediaSingleNode = exports.changeFromMediaInlineToMedi
   }
   return true;
 };
-var createMediaSingleNode = function createMediaSingleNode(schema, collection, maxWidth, minWidth, alignLeftOnInsert) {
+var createMediaSingleNode = function createMediaSingleNode(schema, collection, maxWidth, minWidth, alignLeftOnInsert, allowPixelResizing) {
   return function (mediaState) {
     var id = mediaState.id,
       dimensions = mediaState.dimensions,
@@ -272,7 +271,7 @@ var createMediaSingleNode = function createMediaSingleNode(schema, collection, m
     var mediaSingleAttrs = alignLeftOnInsert ? {
       layout: 'align-start'
     } : {};
-    var extendedMediaSingleAttrs = (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience') ? _objectSpread(_objectSpread({}, mediaSingleAttrs), {}, {
+    var extendedMediaSingleAttrs = allowPixelResizing ? _objectSpread(_objectSpread({}, mediaSingleAttrs), {}, {
       width: (0, _mediaSingle.getMediaSingleInitialWidth)(scaledWidth, maxWidth, minWidth),
       // TODO: ED-26962 - change to use enum
       widthType: 'pixel'
@@ -281,7 +280,7 @@ var createMediaSingleNode = function createMediaSingleNode(schema, collection, m
     return mediaSingle.createChecked(extendedMediaSingleAttrs, mediaNode);
   };
 };
-var replaceWithMediaSingleNode = function replaceWithMediaSingleNode(schema, maxWidth, minWidth) {
+var replaceWithMediaSingleNode = function replaceWithMediaSingleNode(schema, maxWidth, minWidth, allowPixelResizing) {
   return function (mediaNode) {
     var width = mediaNode.attrs.width;
     var _schema$nodes2 = schema.nodes,
@@ -290,7 +289,7 @@ var replaceWithMediaSingleNode = function replaceWithMediaSingleNode(schema, max
     var copiedMediaNode = media.create(_objectSpread(_objectSpread({}, mediaNode.attrs), {}, {
       type: 'file'
     }), mediaNode.content, mediaNode.marks);
-    var extendedMediaSingleAttrs = (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience') ? {
+    var extendedMediaSingleAttrs = allowPixelResizing ? {
       width: (0, _mediaSingle.getMediaSingleInitialWidth)(width, maxWidth, minWidth),
       widthType: 'pixel'
     } : {};

package/dist/cjs/ui/toolbar/commands.js

@@ -130,7 +130,7 @@ var changeMediaCardToInline = exports.changeMediaCardToInline = function changeM
     return true;
   };
 };
-var changeMediaInlineToMediaSingle = exports.changeMediaInlineToMediaSingle = function changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState) {
+var changeMediaInlineToMediaSingle = exports.changeMediaInlineToMediaSingle = function changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState, allowPixelResizing) {
   return function (state, dispatch, view) {
     var mediaInline = state.schema.nodes.mediaInline;
     var selectedNode = state.selection instanceof _state.NodeSelection && state.selection.node.type === mediaInline && state.selection.node;
@@ -138,7 +138,7 @@ var changeMediaInlineToMediaSingle = exports.changeMediaInlineToMediaSingle = fu
       return false;
     }
     if (view) {
-      return (0, _mediaSingle2.changeFromMediaInlineToMediaSingleNode)(view, selectedNode, widthPluginState, editorAnalyticsAPI);
+      return (0, _mediaSingle2.changeFromMediaInlineToMediaSingleNode)(view, selectedNode, widthPluginState, editorAnalyticsAPI, allowPixelResizing);
     }
     return true;
   };

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

@@ -241,7 +241,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     allowMediaInline = options.allowMediaInline,
     allowMediaInlineImages = options.allowMediaInlineImages,
     allowImagePreview = options.allowImagePreview,
-    isViewOnly = options.isViewOnly;
+    isViewOnly = options.isViewOnly,
+    allowPixelResizing = options.allowPixelResizing;
   var toolbarButtons = [];
   var _ref2 = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
     hoverDecoration = _ref2.hoverDecoration;
@@ -280,7 +281,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     var widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width;
     var isChangingLayoutDisabled = false;
     var selectedNode = (0, _utils2.getSelectedMediaSingle)(state);
-    if ((0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience')) {
+    if (allowPixelResizing) {
       var _widthPlugin$sharedSt;
       var contentWidth = widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt === void 0 ? void 0 : _widthPlugin$sharedSt.lineLength;
       var selectedNodeMaxWidth = pluginState.currentMaxWidth || contentWidth;
@@ -288,7 +289,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         isChangingLayoutDisabled = true;
       }
     }
-    var layoutButtons = (0, _card.buildLayoutButtons)(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
+    var layoutButtons = (0, _card.buildLayoutButtons)(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled, allowPixelResizing);
     var addLayoutDropdownToToolbar = function addLayoutDropdownToToolbar() {
       var selectedLayoutIcon = (0, _utils2.getSelectedLayoutIcon)([].concat((0, _toConsumableArray2.default)(_card.alignmentIcons), (0, _toConsumableArray2.default)(_card.wrappingIcons)),
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -445,7 +446,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     // Pixel Entry Toolbar Support
     var selection = state.selection;
     var isWithinTable = (0, _utils.hasParentNodeOfType)([state.schema.nodes.table])(selection);
-    if (allowResizing && (!isWithinTable || allowResizingInTables === true) && (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience')) {
+    if (allowResizing && (!isWithinTable || allowResizingInTables === true) && allowPixelResizing) {
       var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
       var sizeInput = {
         type: 'custom',
@@ -709,7 +710,8 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     allowResizing = options.allowResizing,
     isViewOnly = options.isViewOnly,
     allowResizingInTables = options.allowResizingInTables,
-    allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions;
+    allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions,
+    allowPixelResizing = options.allowPixelResizing;
   var allowMediaInline = options.allowMediaInline;
   allowMediaInline = (0, _platformFeatureFlags.fg)('platform_editor_remove_media_inline_feature_flag') ? allowMediaInlineImages : allowMediaInline;
   var mediaPluginState = _pluginKey.stateKey.getState(state);
@@ -748,7 +750,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
   }
   var selection = state.selection;
   var isWithinTable = (0, _utils.hasParentNodeOfType)([state.schema.nodes.table])(selection);
-  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience')) {
+  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && allowPixelResizing && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
     var mediaPixelResizingPluginState = (0, _pixelResizing.getPluginState)(state);
     if (mediaPixelResizingPluginState !== null && mediaPixelResizingPluginState !== void 0 && mediaPixelResizingPluginState.isPixelEditorOpen) {
       return (0, _pixelResizing2.getPixelResizingToolbar)(baseToolbar, {
@@ -850,7 +852,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     scrollable: true,
     mediaAssistiveMessage: assistiveMessage
   });
-  if (allowResizing && (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience')) {
+  if (allowResizing && allowPixelResizing) {
     return _objectSpread(_objectSpread({}, toolbarConfig), {}, {
       width: mediaPluginState.isResizing ? undefined : (0, _utils2.getMaxToolbarWidth)()
     });

package/dist/cjs/ui/toolbar/mediaInline.js

@@ -272,7 +272,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
           LEGACY_fallbackIcon: _card.IconEmbed
         });
       },
-      onClick: (0, _commands.changeMediaInlineToMediaSingle)(editorAnalyticsAPI, widthPluginState)
+      onClick: (0, _commands.changeMediaInlineToMediaSingle)(editorAnalyticsAPI, widthPluginState, options === null || options === void 0 ? void 0 : options.allowPixelResizing)
     }, {
       type: 'separator'
     }, {

package/dist/cjs/ui/toolbar/pixel-resizing.js

@@ -10,7 +10,6 @@ var _react = _interopRequireDefault(require("react"));
 var _media = require("@atlaskit/editor-common/media");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _growHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/grow-horizontal"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../../pm-plugins/pixel-resizing/commands");
 var _ui = require("../../pm-plugins/pixel-resizing/ui");
 var _constants = require("../../pm-plugins/pixel-resizing/ui/constants");
@@ -56,9 +55,10 @@ var getResizeDropdownOption = exports.getResizeDropdownOption = function getResi
   }
   var allowResizing = mediaOptions.allowResizing,
     allowResizingInTables = mediaOptions.allowResizingInTables,
-    allowAdvancedToolBarOptions = mediaOptions.allowAdvancedToolBarOptions;
+    allowAdvancedToolBarOptions = mediaOptions.allowAdvancedToolBarOptions,
+    allowPixelResizing = mediaOptions.allowPixelResizing;
   var isWithinTable = (0, _utils.hasParentNodeOfType)(state.schema.nodes.table)(state.selection);
-  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience')) {
+  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && allowPixelResizing) {
     return [{
       title: formatMessage(_media.pixelEntryMessages.resizeOption),
       onClick: (0, _commands.openPixelEditor)(),

package/dist/es2019/mediaPlugin.js

@@ -100,7 +100,7 @@ export const mediaPlugin = ({
     actions: {
       insertMediaAsMediaSingle: (view, node, inputMethod, insertMediaVia) => {
         var _api$analytics;
-        return insertMediaAsMediaSingle(view, node, inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, insertMediaVia);
+        return insertMediaAsMediaSingle(view, node, inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, insertMediaVia, options === null || options === void 0 ? void 0 : options.allowPixelResizing);
       },
       setProvider: provider => {
         var _api$core$actions$exe;
@@ -125,17 +125,15 @@ export const mediaPlugin = ({
       const {
         allowMediaGroup = true,
         allowMediaSingle = false,
+        allowPixelResizing = false,
         allowCaptions,
         allowMediaInlineImages,
         featureFlags: mediaFeatureFlags
       } = options || {};
       const allowMediaInline = fg('platform_editor_remove_media_inline_feature_flag') ? allowMediaInlineImages : getMediaFeatureFlag('mediaInline', mediaFeatureFlags);
-      const mediaSingleOption = fg('platform_editor_media_extended_resize_experience') ? {
+      const mediaSingleOption = {
         withCaption: allowCaptions,
-        withExtendedWidthTypes: true
-      } : {
-        withCaption: allowCaptions,
-        withExtendedWidthTypes: false
+        withExtendedWidthTypes: allowPixelResizing
       };
       return [{
         name: 'mediaGroup',
@@ -238,7 +236,7 @@ export const mediaPlugin = ({
           }) => keymapLinkingPlugin(schema)
         });
       }
-      if (options && options.allowAdvancedToolBarOptions && options.allowResizing && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_media_extended_resize_experience')) {
+      if (options && options.allowAdvancedToolBarOptions && options.allowResizing && editorExperiment('platform_editor_controls', 'variant1') && options.allowPixelResizing) {
         pmPlugins.push({
           name: 'mediaPixelResizing',
           plugin: createMediaPixelResizingPlugin
@@ -347,7 +345,8 @@ export const mediaPlugin = ({
           altTextValidator: options && options.altTextValidator,
           fullWidthEnabled: options && options.fullWidthEnabled,
           allowMediaInlineImages: options && options.allowMediaInlineImages,
-          isViewOnly: (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view'
+          isViewOnly: (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view',
+          allowPixelResizing: options === null || options === void 0 ? void 0 : options.allowPixelResizing
         }, api);
       }
     }