@atlaskit/editor-plugin-media 2.4.1 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/editor-plugin-media
 
+## 2.6.0
+
+### Minor Changes
+
+- [#123268](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123268)
+  [`f47a830143188`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f47a830143188) -
+  Allow for passing in a resolved media provider to enable SSR'ing media in the editor
+
+### Patch Changes
+
+- [#140448](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/140448)
+  [`1bbf6b1e2ade5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1bbf6b1e2ade5) -
+  [HOT-116646] Fix inline media check
+- Updated dependencies
+
+## 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/lazy-media-single.js

@@ -7,13 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.lazyMediaSingleView = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _mediaSingle = require("./mediaSingle");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var lazyMediaSingleView = exports.lazyMediaSingleView = function lazyMediaSingleView(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent) {
   var options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
-  if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false)) {
+  if ((0, _platformFeatureFlags.fg)('platform_editor_ssr_media') || (0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false)) {
     return (0, _mediaSingle.ReactMediaSingleNode)(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options);
   }
   return (0, _lazyNodeView.withLazyLoading)({

package/dist/cjs/nodeviews/lazy-media.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.lazyMediaView = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _mediaNodeView = require("./mediaNodeView");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -14,7 +15,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var lazyMediaView = exports.lazyMediaView = function lazyMediaView(portalProviderAPI, eventDispatcher, providerFactory) {
   var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
   var api = arguments.length > 4 ? arguments[4] : undefined;
-  if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false)) {
+  if ((0, _platformFeatureFlags.fg)('platform_editor_ssr_media') || (0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false)) {
     return (0, _mediaNodeView.ReactMediaNode)(portalProviderAPI, eventDispatcher, providerFactory, options, api);
   }
   return (0, _lazyNodeView.withLazyLoading)({

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

@@ -21,6 +21,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _utils = require("@atlaskit/editor-common/utils");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _mediaCard = require("@atlaskit/media-card");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _pluginKey = require("../../pm-plugins/plugin-key");
 var _styles = require("../styles");
@@ -285,6 +286,10 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
           return {};
         }
       };
+      var ssr;
+      if ((0, _platformFeatureFlags.fg)('platform_editor_ssr_media')) {
+        ssr = process.env.REACT_SSR ? 'server' : 'client';
+      }
       return /*#__PURE__*/_react.default.createElement(_styles.MediaCardWrapper, {
         dimensions: originalDimensions,
         onContextMenu: this.selectMediaSingle,
@@ -310,7 +315,8 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
         featureFlags: mediaOptions && mediaOptions.featureFlags,
         contextId: contextId,
         alt: alt,
-        videoControlsWrapperRef: this.videoControlsWrapperRef
+        videoControlsWrapperRef: this.videoControlsWrapperRef,
+        ssr: ssr
       })));
     }
   }]);

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);
@@ -461,7 +461,9 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
     this.waitForMediaUpload = options.waitForMediaUpload === undefined ? true : options.waitForMediaUpload;
     var nodes = _state.schema.nodes;
     (0, _assert.default)(nodes.media && (nodes.mediaGroup || nodes.mediaSingle), 'Editor: unable to init media plugin - media or mediaGroup/mediaSingle node absent in schema');
-    if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.provider) {
+    if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.syncProvider) {
+      this.setMediaProvider(mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.syncProvider);
+    } else if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.provider) {
       this.setMediaProvider(mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.provider);
     }
     if ((0, _platformFeatureFlags.fg)('platform_editor_remove_media_inline_feature_flag')) {
@@ -532,10 +534,19 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
               return _context.abrupt("return");
             case 8:
               _context.prev = 8;
-              _context.next = 11;
+              if (!(mediaProvider instanceof Promise)) {
+                _context.next = 15;
+                break;
+              }
+              _context.next = 12;
               return mediaProvider;
-            case 11:
+            case 12:
               this.mediaProvider = _context.sent;
+              _context.next = 16;
+              break;
+            case 15:
+              this.mediaProvider = mediaProvider;
+            case 16:
               // Ignored via go/ees007
               // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
               // TODO [MS-2038]: remove once context api is removed
@@ -548,10 +559,10 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
                 }
               }
               (0, _assert.default)(this.mediaProvider.viewMediaClientConfig, "MediaProvider promise did not resolve to a valid instance of MediaProvider - ".concat(this.mediaProvider));
-              _context.next = 24;
+              _context.next = 28;
               break;
-            case 16:
-              _context.prev = 16;
+            case 20:
+              _context.prev = 20;
               _context.t0 = _context["catch"](8);
               wrappedError = new Error("Media functionality disabled due to rejected provider: ".concat(_context.t0 instanceof Error ? _context.t0.message : String(_context.t0)));
               this.errorReporter.captureException(wrappedError);
@@ -563,7 +574,7 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
                 }));
               }
               return _context.abrupt("return");
-            case 24:
+            case 28:
               this.mediaClientConfig = this.mediaProvider.viewMediaClientConfig;
               this.allowsUploads = !!this.mediaProvider.uploadMediaClientConfig;
               view = this.view, allowsUploads = this.allowsUploads; // make sure editable DOM node is mounted
@@ -574,31 +585,31 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
                 }));
               }
               if (!this.allowsUploads) {
-                _context.next = 38;
+                _context.next = 42;
                 break;
               }
               this.uploadMediaClientConfig = this.mediaProvider.uploadMediaClientConfig;
               if (!(this.mediaProvider.uploadParams && this.uploadMediaClientConfig)) {
-                _context.next = 35;
+                _context.next = 39;
                 break;
               }
-              _context.next = 33;
+              _context.next = 37;
               return this.initPickers(this.mediaProvider.uploadParams, _pickerFacade.default);
-            case 33:
-              _context.next = 36;
+            case 37:
+              _context.next = 40;
               break;
-            case 35:
+            case 39:
               this.destroyPickers();
-            case 36:
-              _context.next = 39;
+            case 40:
+              _context.next = 43;
               break;
-            case 38:
+            case 42:
               this.destroyPickers();
-            case 39:
+            case 43:
             case "end":
               return _context.stop();
           }
-        }, _callee, this, [[8, 16]]);
+        }, _callee, this, [[8, 20]]);
       }));
       function setMediaProvider(_x) {
         return _setMediaProvider.apply(this, arguments);

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

@@ -26,7 +26,9 @@ var getMediaNodeInsertionType = exports.getMediaNodeInsertionType = function get
   var canInsertInlineNode = (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.featureFlags) && !(0, _utils.isInEmptyLine)(state) && (!(0, _mediaCommon2.isInsidePotentialEmptyParagraph)(state) || isInSupportedInlineImageParent(state)) && (0, _mediaFiles.canInsertMediaInline)(state);
   if ((0, _platformFeatureFlags.fg)('platform_editor_remove_media_inline_feature_flag')) {
     if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.allowMediaInlineImages) {
-      return 'inline';
+      if (canInsertInlineNode && !(0, _isType.isVideo)(fileMimeType)) {
+        return 'inline';
+      }
     }
   } else {
     if ((0, _mediaInline.mediaInlineImagesEnabled)((0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.featureFlags), mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.allowMediaInlineImages)) {

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'
     } : {};