@atlaskit/editor-plugin-media 2.4.1 → 2.6.0

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
 import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { openPixelEditor } from '../../pm-plugins/pixel-resizing/commands';
 import { PixelEntry } from '../../pm-plugins/pixel-resizing/ui';
 import { PIXEL_RESIZING_TOOLBAR_WIDTH } from '../../pm-plugins/pixel-resizing/ui/constants';
@@ -47,10 +46,11 @@ export const getResizeDropdownOption = (mediaOptions, state, formatMessage, sele
   const {
     allowResizing,
     allowResizingInTables,
-    allowAdvancedToolBarOptions
+    allowAdvancedToolBarOptions,
+    allowPixelResizing
   } = mediaOptions;
   const isWithinTable = hasParentNodeOfType(state.schema.nodes.table)(state.selection);
-  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && fg('platform_editor_media_extended_resize_experience')) {
+  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && allowPixelResizing) {
     return [{
       title: formatMessage(messages.resizeOption),
       onClick: openPixelEditor(),

package/dist/esm/mediaPlugin.js

@@ -96,7 +96,7 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
     actions: {
       insertMediaAsMediaSingle: function insertMediaAsMediaSingle(view, node, inputMethod, insertMediaVia) {
         var _api$analytics;
-        return _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 _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;
@@ -124,16 +124,15 @@ export var 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 = fg('platform_editor_remove_media_inline_feature_flag') ? allowMediaInlineImages : getMediaFeatureFlag('mediaInline', mediaFeatureFlags);
-      var mediaSingleOption = fg('platform_editor_media_extended_resize_experience') ? {
+      var mediaSingleOption = {
         withCaption: allowCaptions,
-        withExtendedWidthTypes: true
-      } : {
-        withCaption: allowCaptions,
-        withExtendedWidthTypes: false
+        withExtendedWidthTypes: allowPixelResizing
       };
       return [{
         name: 'mediaGroup',
@@ -236,7 +235,7 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
           }
         });
       }
-      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
@@ -341,7 +340,8 @@ export var 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/esm/nodeviews/lazy-media-single.js

@@ -1,9 +1,10 @@
 import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { ReactMediaSingleNode } from './mediaSingle';
 export var lazyMediaSingleView = function lazyMediaSingleView(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent) {
   var options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
-  if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
+  if (fg('platform_editor_ssr_media') || editorExperiment('platform_editor_exp_lazy_node_views', false)) {
     return ReactMediaSingleNode(portalProviderAPI, eventDispatcher, providerFactory, api, dispatchAnalyticsEvent, options);
   }
   return withLazyLoading({

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

@@ -1,10 +1,11 @@
 import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { ReactMediaNode } from './mediaNodeView';
 export var 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 (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
+  if (fg('platform_editor_ssr_media') || editorExperiment('platform_editor_exp_lazy_node_views', false)) {
     return ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory, options, api);
   }
   return withLazyLoading({

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

@@ -15,6 +15,7 @@ import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { setNodeSelection, setTextSelection, withImageLoader } from '@atlaskit/editor-common/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { Card, CardLoading } from '@atlaskit/media-card';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { stateKey as mediaStateKey } from '../../pm-plugins/plugin-key';
 import { MediaCardWrapper } from '../styles';
@@ -276,6 +277,10 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
           return {};
         }
       };
+      var ssr;
+      if (fg('platform_editor_ssr_media')) {
+        ssr = process.env.REACT_SSR ? 'server' : 'client';
+      }
       return /*#__PURE__*/React.createElement(MediaCardWrapper, {
         dimensions: originalDimensions,
         onContextMenu: this.selectMediaSingle,
@@ -301,7 +306,8 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
         featureFlags: mediaOptions && mediaOptions.featureFlags,
         contextId: contextId,
         alt: alt,
-        videoControlsWrapperRef: this.videoControlsWrapperRef
+        videoControlsWrapperRef: this.videoControlsWrapperRef,
+        ssr: ssr
       })));
     }
   }]);

package/dist/esm/nodeviews/mediaSingle.js

@@ -475,7 +475,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         mediaElement: currentMediaElement(),
         mediaHeight: height,
         mediaWidth: width,
-        extendedResizeOffset: fg('platform_editor_media_extended_resize_experience') && !isInsideTable
+        extendedResizeOffset: mediaOptions.allowPixelResizing && !isInsideTable
       }, function (_ref5) {
         var visible = _ref5.visible;
         return jsx(React.Fragment, null, visible && jsx(ExternalImageBadge, {
@@ -509,7 +509,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         onClick: this.clickPlaceholder,
         placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
       })));
-      return jsx(Fragment, null, canResize ? fg('platform_editor_media_extended_resize_experience') ? jsx(ResizableMediaSingleNext
+      return jsx(Fragment, null, canResize ? mediaOptions.allowPixelResizing ? jsx(ResizableMediaSingleNext
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
       , _extends({}, resizableMediaSingleProps, {
@@ -651,14 +651,14 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   return _createClass(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 (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;
@@ -693,9 +693,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);
       });
@@ -703,7 +703,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';
@@ -711,7 +711,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';
@@ -751,14 +751,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/esm/nodeviews/mediaSingleNext.js

@@ -471,7 +471,7 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
     mediaElement: currentMediaElement(),
     mediaHeight: height,
     mediaWidth: width,
-    extendedResizeOffset: fg('platform_editor_media_extended_resize_experience') && !isInsideTable
+    extendedResizeOffset: mediaOptions.allowPixelResizing && !isInsideTable
   }, function (_ref7) {
     var visible = _ref7.visible;
     return jsx(React.Fragment, null, visible && jsx(ExternalImageBadge, {
@@ -505,7 +505,7 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
     onClick: clickPlaceholder,
     placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
   })));
-  return jsx(Fragment, null, canResize ? fg('platform_editor_media_extended_resize_experience') ? jsx(ResizableMediaSingleNext, {
+  return jsx(Fragment, null, canResize ? mediaOptions.allowPixelResizing ? jsx(ResizableMediaSingleNext, {
     view: view,
     getPos: getPos,
     updateSize: updateSize,

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

@@ -3,7 +3,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { mediaSingleSpec } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { N20, N50 } from '@atlaskit/theme/colors';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getAttrsFromNodeMediaSingle } from './toDOMAttrs';
@@ -150,55 +149,57 @@ export var prepareWrapperContentDOM = function prepareWrapperContentDOM(_ref5) {
     class: 'media-content-wrap'
   }, 0]]]]];
 };
-export var 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 = getAttrsFromNodeMediaSingle(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: 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: 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: 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(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];
+export var 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 = 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: 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(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
@@ -207,6 +208,7 @@ export var mediaSingleSpecWithFixedToDOM = function mediaSingleSpecWithFixedToDO
   if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
     return mediaSingleNode;
   }
+  var toDOM = getToDom(mediaSingleOption.withExtendedWidthTypes);
   return _objectSpread(_objectSpread({}, mediaSingleNode), {}, {
     toDOM: toDOM
   });

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

@@ -5,7 +5,6 @@ import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { insertAndSelectCaptionFromMediaSinglePos, selectCaptionFromMediaSinglePos } from '../pm-plugins/commands/captions';
 import { stateKey } from '../pm-plugins/plugin-key';
 import { updateMediaSingleWidth } from '../ui/toolbar/commands';
@@ -38,7 +37,7 @@ function keymapPlugin(options, editorAnalyticsAPI, editorSelectionAPI, widthPlug
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   bindKeymapWithCommand(enter.common, splitMediaGroup, list);
-  if (fg('platform_editor_media_extended_resize_experience')) {
+  if (options !== null && options !== void 0 && options.allowPixelResizing) {
     bindKeymapWithCommand(
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

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

@@ -149,7 +149,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
         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();
-          insertMediaSingleNode(_this.view, mediaStateWithContext, _this.getInputMethod(pickerType), collection, _this.mediaOptions && _this.mediaOptions.alignLeftOnInsert, widthPluginState, editorAnalyticsAPI, _this.onNodeInserted, insertMediaVia);
+          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':
           insertMediaGroupNode(editorAnalyticsAPI)(_this.view, [mediaStateWithContext], collection, _this.getInputMethod(pickerType), insertMediaVia);
@@ -452,7 +452,9 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     this.waitForMediaUpload = options.waitForMediaUpload === undefined ? true : options.waitForMediaUpload;
     var nodes = _state.schema.nodes;
     assert(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 (fg('platform_editor_remove_media_inline_feature_flag')) {
@@ -523,10 +525,19 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
               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
@@ -539,10 +550,10 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
                 }
               }
               assert(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);
@@ -554,7 +565,7 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
                 }));
               }
               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
@@ -565,31 +576,31 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
                 }));
               }
               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);
-            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/esm/pm-plugins/utils/media-inline.js

@@ -20,7 +20,9 @@ export var getMediaNodeInsertionType = function getMediaNodeInsertionType(state,
   var canInsertInlineNode = getMediaFeatureFlag('mediaInline', mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.featureFlags) && !isInEmptyLine(state) && (!isInsidePotentialEmptyParagraph(state) || isInSupportedInlineImageParent(state)) && canInsertMediaInline(state);
   if (fg('platform_editor_remove_media_inline_feature_flag')) {
     if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.allowMediaInlineImages) {
-      return 'inline';
+      if (canInsertInlineNode && !isVideo(fileMimeType)) {
+        return 'inline';
+      }
     }
   } else {
     if (mediaInlineImagesEnabled(getMediaFeatureFlag('mediaInline', mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.featureFlags), mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.allowMediaInlineImages)) {

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

@@ -94,7 +94,7 @@ function insertNodesWithOptionalParagraph(_ref) {
 export var isMediaSingle = function isMediaSingle(schema, fileMimeType) {
   return !!schema.nodes.mediaSingle && isImage(fileMimeType);
 };
-export var insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, node, inputMethod, editorAnalyticsAPI, insertMediaVia) {
+export var insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, node, inputMethod, editorAnalyticsAPI, insertMediaVia, allowPixelResizing) {
   var _node$attrs$width;
   var state = view.state,
     dispatch = view.dispatch;
@@ -109,9 +109,8 @@ export var insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, no
   if (node.type !== media || !isImage(node.attrs.__fileMimeType) && node.attrs.type !== 'external') {
     return false;
   }
-  var resizeExperience = fg('platform_editor_media_extended_resize_experience');
   var insertMediaPopup = fg('platform_editor_add_media_from_url_rollout');
-  var mediaSingleAttrs = resizeExperience && insertMediaPopup ? {
+  var mediaSingleAttrs = allowPixelResizing && insertMediaPopup ? {
     widthType: 'pixel',
     width: getMediaSingleInitialWidth((_node$attrs$width = node.attrs.width) !== null && _node$attrs$width !== void 0 ? _node$attrs$width : DEFAULT_IMAGE_WIDTH),
     layout: 'center'
@@ -136,7 +135,7 @@ var getFileExtension = function getFileExtension(fileName) {
   }
   return undefined;
 };
-export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inputMethod, collection, alignLeftOnInsert, widthPluginState, editorAnalyticsAPI, onNodeInserted, insertMediaVia) {
+export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inputMethod, collection, alignLeftOnInsert, widthPluginState, editorAnalyticsAPI, onNodeInserted, insertMediaVia, allowPixelResizing) {
   var _state$selection$$fro;
   if (collection === undefined) {
     return false;
@@ -149,7 +148,7 @@ export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaSta
   // 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 = 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) ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert)(mediaState);
+  var node = createMediaSingleNode(state.schema, collection, contentWidth, mediaState.status !== 'error' && isVideo(mediaState.fileMimeType) ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert, allowPixelResizing)(mediaState);
   var fileExtension;
   if (mediaState.fileName) {
     var extensionIdx = mediaState.fileName.lastIndexOf('.');
@@ -188,7 +187,7 @@ export var insertMediaSingleNode = function insertMediaSingleNode(view, mediaSta
   }
   return true;
 };
-export var changeFromMediaInlineToMediaSingleNode = function changeFromMediaInlineToMediaSingleNode(view, fromNode, widthPluginState, editorAnalyticsAPI) {
+export var changeFromMediaInlineToMediaSingleNode = function changeFromMediaInlineToMediaSingleNode(view, fromNode, widthPluginState, editorAnalyticsAPI, allowPixelResizing) {
   var _state$selection$$fro2;
   var state = view.state,
     dispatch = view.dispatch;
@@ -202,7 +201,7 @@ export var changeFromMediaInlineToMediaSingleNode = function changeFromMediaInli
   // 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 = 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, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH)(fromNode);
+  var node = replaceWithMediaSingleNode(state.schema, contentWidth, 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
@@ -234,7 +233,7 @@ export var changeFromMediaInlineToMediaSingleNode = function changeFromMediaInli
   }
   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,
@@ -265,7 +264,7 @@ var createMediaSingleNode = function createMediaSingleNode(schema, collection, m
     var mediaSingleAttrs = alignLeftOnInsert ? {
       layout: 'align-start'
     } : {};
-    var extendedMediaSingleAttrs = fg('platform_editor_media_extended_resize_experience') ? _objectSpread(_objectSpread({}, mediaSingleAttrs), {}, {
+    var extendedMediaSingleAttrs = allowPixelResizing ? _objectSpread(_objectSpread({}, mediaSingleAttrs), {}, {
       width: getMediaSingleInitialWidth(scaledWidth, maxWidth, minWidth),
       // TODO: ED-26962 - change to use enum
       widthType: 'pixel'
@@ -274,7 +273,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,
@@ -283,7 +282,7 @@ var replaceWithMediaSingleNode = function replaceWithMediaSingleNode(schema, max
     var copiedMediaNode = media.create(_objectSpread(_objectSpread({}, mediaNode.attrs), {}, {
       type: 'file'
     }), mediaNode.content, mediaNode.marks);
-    var extendedMediaSingleAttrs = fg('platform_editor_media_extended_resize_experience') ? {
+    var extendedMediaSingleAttrs = allowPixelResizing ? {
       width: getMediaSingleInitialWidth(width, maxWidth, minWidth),
       widthType: 'pixel'
     } : {};

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

@@ -727,7 +727,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
     _useState6 = _slicedToArray(_useState5, 2),
     isResizing = _useState6[0],
     setIsResizing = _useState6[1];
-  var _useState7 = useState(true),
+  var _useState7 = useState(!fg('platform_editor_ssr_media')),
     _useState8 = _slicedToArray(_useState7, 2),
     isVideoFile = _useState8[0],
     setIsVideoFile = _useState8[1];

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

@@ -123,7 +123,7 @@ export var changeMediaCardToInline = function changeMediaCardToInline(editorAnal
     return true;
   };
 };
-export var changeMediaInlineToMediaSingle = function changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState) {
+export var changeMediaInlineToMediaSingle = function changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState, allowPixelResizing) {
   return function (state, dispatch, view) {
     var mediaInline = state.schema.nodes.mediaInline;
     var selectedNode = state.selection instanceof NodeSelection && state.selection.node.type === mediaInline && state.selection.node;
@@ -131,7 +131,7 @@ export var changeMediaInlineToMediaSingle = function changeMediaInlineToMediaSin
       return false;
     }
     if (view) {
-      return changeFromMediaInlineToMediaSingleNode(view, selectedNode, widthPluginState, editorAnalyticsAPI);
+      return changeFromMediaInlineToMediaSingleNode(view, selectedNode, widthPluginState, editorAnalyticsAPI, allowPixelResizing);
     }
     return true;
   };