@atlaskit/editor-plugin-media 2.4.0 → 2.5.0

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);

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/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;
   };

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

@@ -231,7 +231,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;
@@ -270,7 +271,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     var widthPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width;
     var isChangingLayoutDisabled = false;
     var selectedNode = getSelectedMediaSingle(state);
-    if (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;
@@ -278,7 +279,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         isChangingLayoutDisabled = true;
       }
     }
-    var layoutButtons = 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 = 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 = getSelectedLayoutIcon([].concat(_toConsumableArray(alignmentIcons), _toConsumableArray(wrappingIcons)),
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -435,7 +436,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     // Pixel Entry Toolbar Support
     var selection = state.selection;
     var isWithinTable = hasParentNodeOfType([state.schema.nodes.table])(selection);
-    if (allowResizing && (!isWithinTable || allowResizingInTables === true) && fg('platform_editor_media_extended_resize_experience')) {
+    if (allowResizing && (!isWithinTable || allowResizingInTables === true) && allowPixelResizing) {
       var selectedMediaSingleNode = getSelectedMediaSingle(state);
       var sizeInput = {
         type: 'custom',
@@ -699,7 +700,8 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     allowResizing = options.allowResizing,
     isViewOnly = options.isViewOnly,
     allowResizingInTables = options.allowResizingInTables,
-    allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions;
+    allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions,
+    allowPixelResizing = options.allowPixelResizing;
   var allowMediaInline = options.allowMediaInline;
   allowMediaInline = fg('platform_editor_remove_media_inline_feature_flag') ? allowMediaInlineImages : allowMediaInline;
   var mediaPluginState = stateKey.getState(state);
@@ -738,7 +740,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
   }
   var selection = state.selection;
   var isWithinTable = hasParentNodeOfType([state.schema.nodes.table])(selection);
-  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_media_extended_resize_experience')) {
+  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && allowPixelResizing && editorExperiment('platform_editor_controls', 'variant1')) {
     var mediaPixelResizingPluginState = getMediaPixelResizingPluginState(state);
     if (mediaPixelResizingPluginState !== null && mediaPixelResizingPluginState !== void 0 && mediaPixelResizingPluginState.isPixelEditorOpen) {
       return getPixelResizingToolbar(baseToolbar, {
@@ -789,12 +791,12 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
       });
     }
     var hoverDecorationProps = function hoverDecorationProps(nodeType, className) {
-      return fg('platform_editor_controls_patch_1') ? {
+      return {
         onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
         onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
         onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
         onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
-      } : undefined;
+      };
     };
     items.push({
       type: 'overflow-dropdown',
@@ -840,7 +842,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     scrollable: true,
     mediaAssistiveMessage: assistiveMessage
   });
-  if (allowResizing && fg('platform_editor_media_extended_resize_experience')) {
+  if (allowResizing && allowPixelResizing) {
     return _objectSpread(_objectSpread({}, toolbarConfig), {}, {
       width: mediaPluginState.isResizing ? undefined : getMaxToolbarWidth()
     });

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

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

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

@@ -5,7 +5,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';
@@ -49,9 +48,10 @@ export var getResizeDropdownOption = function getResizeDropdownOption(mediaOptio
   }
   var allowResizing = mediaOptions.allowResizing,
     allowResizingInTables = mediaOptions.allowResizingInTables,
-    allowAdvancedToolBarOptions = mediaOptions.allowAdvancedToolBarOptions;
+    allowAdvancedToolBarOptions = mediaOptions.allowAdvancedToolBarOptions,
+    allowPixelResizing = mediaOptions.allowPixelResizing;
   var 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/types/nodeviews/toDOM-fixes/mediaSingle.d.ts

@@ -37,7 +37,7 @@ type PrepareWrapperContentDOMProps = {
     isExtendedResizeExperience: boolean;
 };
 export declare const prepareWrapperContentDOM: ({ layout, dataAttrs, childMediaWidth, childMediaHeight, mediaSingleDimensionWidth, isPixelWidth, isExtendedResizeExperience, }: PrepareWrapperContentDOMProps) => DOMOutputSpec;
-export declare const toDOM: (node: PMNode) => DOMOutputSpec;
+export declare const getToDom: (allowPixelResizing: boolean) => (node: PMNode) => DOMOutputSpec;
 export declare const mediaSingleSpecWithFixedToDOM: (mediaSingleOption: {
     withCaption?: boolean;
     withExtendedWidthTypes: boolean;

package/dist/types/pm-plugins/utils/media-single.d.ts

@@ -5,8 +5,8 @@ import type { Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model'
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaState } from '../../types';
 export declare const isMediaSingle: (schema: Schema, fileMimeType?: string) => boolean;
-export type InsertMediaAsMediaSingle = (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia, insertMediaVia?: InsertMediaVia) => boolean;
-export declare const insertMediaAsMediaSingle: (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, insertMediaVia?: InsertMediaVia) => boolean;
-export declare const insertMediaSingleNode: (view: EditorView, mediaState: MediaState, inputMethod?: InputMethodInsertMedia, collection?: string, alignLeftOnInsert?: boolean, widthPluginState?: WidthPluginState | undefined, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined, onNodeInserted?: ((id: string, selectionPosition: number) => void) | undefined, insertMediaVia?: InsertMediaVia) => boolean;
-export declare const changeFromMediaInlineToMediaSingleNode: (view: EditorView, fromNode: PMNode, widthPluginState?: WidthPluginState | undefined, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined) => boolean;
+export type InsertMediaAsMediaSingle = (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia, insertMediaVia?: InsertMediaVia, allowPixelResizing?: boolean) => boolean;
+export declare const insertMediaAsMediaSingle: (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, insertMediaVia?: InsertMediaVia, allowPixelResizing?: boolean) => boolean;
+export declare const insertMediaSingleNode: (view: EditorView, mediaState: MediaState, inputMethod?: InputMethodInsertMedia, collection?: string, alignLeftOnInsert?: boolean, widthPluginState?: WidthPluginState | undefined, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined, onNodeInserted?: ((id: string, selectionPosition: number) => void) | undefined, insertMediaVia?: InsertMediaVia, allowPixelResizing?: boolean) => boolean;
+export declare const changeFromMediaInlineToMediaSingleNode: (view: EditorView, fromNode: PMNode, widthPluginState?: WidthPluginState | undefined, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined, allowPixelResizing?: boolean) => boolean;
 export declare const isVideo: import("memoize-one").MemoizedFn<(fileType?: string) => boolean>;

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

@@ -55,6 +55,7 @@ export interface MediaPluginOptions {
     editorAppearance?: EditorAppearance;
     forceHandlePositioning?: HandlePositioning;
     mediaShallowCopyScope?: MediaCopyScope;
+    allowPixelResizing?: boolean;
 }
 /**
  * @private
@@ -125,6 +126,7 @@ export type MediaFloatingToolbarOptions = {
     fullWidthEnabled?: boolean;
     allowCommentsOnMedia?: boolean;
     isViewOnly?: boolean;
+    allowPixelResizing?: boolean;
 };
 export type MediaDecorationSpec = {
     type: 'media';

package/dist/types/ui/toolbar/commands.d.ts

@@ -10,7 +10,7 @@ export declare const DEFAULT_BORDER_SIZE = 2;
 export declare const getNodeType: (state: EditorState) => "mediaSingle" | "mediaInline";
 export declare const changeInlineToMediaCard: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
 export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
-export declare const changeMediaInlineToMediaSingle: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined) => Command;
+export declare const changeMediaInlineToMediaSingle: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined, allowPixelResizing?: boolean) => Command;
 export declare const removeInlineCard: Command;
 export declare const toggleBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const setBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (attrs: Partial<BorderMarkAttributes>) => Command;

package/dist/types-ts4.5/nodeviews/toDOM-fixes/mediaSingle.d.ts

@@ -37,7 +37,7 @@ type PrepareWrapperContentDOMProps = {
     isExtendedResizeExperience: boolean;
 };
 export declare const prepareWrapperContentDOM: ({ layout, dataAttrs, childMediaWidth, childMediaHeight, mediaSingleDimensionWidth, isPixelWidth, isExtendedResizeExperience, }: PrepareWrapperContentDOMProps) => DOMOutputSpec;
-export declare const toDOM: (node: PMNode) => DOMOutputSpec;
+export declare const getToDom: (allowPixelResizing: boolean) => (node: PMNode) => DOMOutputSpec;
 export declare const mediaSingleSpecWithFixedToDOM: (mediaSingleOption: {
     withCaption?: boolean;
     withExtendedWidthTypes: boolean;

package/dist/types-ts4.5/pm-plugins/utils/media-single.d.ts

@@ -5,8 +5,8 @@ import type { Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model'
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaState } from '../../types';
 export declare const isMediaSingle: (schema: Schema, fileMimeType?: string) => boolean;
-export type InsertMediaAsMediaSingle = (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia, insertMediaVia?: InsertMediaVia) => boolean;
-export declare const insertMediaAsMediaSingle: (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, insertMediaVia?: InsertMediaVia) => boolean;
-export declare const insertMediaSingleNode: (view: EditorView, mediaState: MediaState, inputMethod?: InputMethodInsertMedia, collection?: string, alignLeftOnInsert?: boolean, widthPluginState?: WidthPluginState | undefined, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined, onNodeInserted?: ((id: string, selectionPosition: number) => void) | undefined, insertMediaVia?: InsertMediaVia) => boolean;
-export declare const changeFromMediaInlineToMediaSingleNode: (view: EditorView, fromNode: PMNode, widthPluginState?: WidthPluginState | undefined, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined) => boolean;
+export type InsertMediaAsMediaSingle = (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia, insertMediaVia?: InsertMediaVia, allowPixelResizing?: boolean) => boolean;
+export declare const insertMediaAsMediaSingle: (view: EditorView, node: PMNode, inputMethod: InputMethodInsertMedia, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, insertMediaVia?: InsertMediaVia, allowPixelResizing?: boolean) => boolean;
+export declare const insertMediaSingleNode: (view: EditorView, mediaState: MediaState, inputMethod?: InputMethodInsertMedia, collection?: string, alignLeftOnInsert?: boolean, widthPluginState?: WidthPluginState | undefined, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined, onNodeInserted?: ((id: string, selectionPosition: number) => void) | undefined, insertMediaVia?: InsertMediaVia, allowPixelResizing?: boolean) => boolean;
+export declare const changeFromMediaInlineToMediaSingleNode: (view: EditorView, fromNode: PMNode, widthPluginState?: WidthPluginState | undefined, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined, allowPixelResizing?: boolean) => boolean;
 export declare const isVideo: import("memoize-one").MemoizedFn<(fileType?: string) => boolean>;

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

@@ -55,6 +55,7 @@ export interface MediaPluginOptions {
     editorAppearance?: EditorAppearance;
     forceHandlePositioning?: HandlePositioning;
     mediaShallowCopyScope?: MediaCopyScope;
+    allowPixelResizing?: boolean;
 }
 /**
  * @private
@@ -125,6 +126,7 @@ export type MediaFloatingToolbarOptions = {
     fullWidthEnabled?: boolean;
     allowCommentsOnMedia?: boolean;
     isViewOnly?: boolean;
+    allowPixelResizing?: boolean;
 };
 export type MediaDecorationSpec = {
     type: 'media';

package/dist/types-ts4.5/ui/toolbar/commands.d.ts

@@ -10,7 +10,7 @@ export declare const DEFAULT_BORDER_SIZE = 2;
 export declare const getNodeType: (state: EditorState) => "mediaSingle" | "mediaInline";
 export declare const changeInlineToMediaCard: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
 export declare const changeMediaCardToInline: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, forceFocusSelector: ForceFocusSelector | undefined) => Command;
-export declare const changeMediaInlineToMediaSingle: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined) => Command;
+export declare const changeMediaInlineToMediaSingle: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, widthPluginState: WidthPluginState | undefined, allowPixelResizing?: boolean) => Command;
 export declare const removeInlineCard: Command;
 export declare const toggleBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const setBorderMark: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (attrs: Partial<BorderMarkAttributes>) => Command;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "2.4.0",
+	"version": "2.5.0",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,7 +38,7 @@
 		"@atlaskit/analytics-namespaced-context": "^7.0.0",
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/button": "^23.0.0",
-		"@atlaskit/editor-common": "^103.4.0",
+		"@atlaskit/editor-common": "^103.6.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-annotation": "^2.5.0",
@@ -135,9 +135,6 @@
 		"platform_media_cross_client_copy": {
 			"type": "boolean"
 		},
-		"platform_editor_media_extended_resize_experience": {
-			"type": "boolean"
-		},
 		"platform_editor_media_batch_updates": {
 			"type": "boolean"
 		},
@@ -174,9 +171,6 @@
 		"platform_editor_multi_images_overridden_upload_fix": {
 			"type": "boolean"
 		},
-		"platform_editor_controls_patch_1": {
-			"type": "boolean"
-		},
 		"platform_editor_remove_media_inline_feature_flag": {
 			"type": "boolean"
 		},