@atlaskit/editor-plugin-media 2.3.17 → 2.3.19

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-media
 
+## 2.3.19
+
+### Patch Changes
+
+- [#134978](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134978)
+  [`e4ea317cdb9ac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e4ea317cdb9ac) -
+  [EDITOR-549] Update mediaInline usage behind fg platform_editor_remove_media_inline_feature_flag
+- Updated dependencies
+
+## 2.3.18
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.3.17
 
 ### Patch Changes

package/dist/cjs/mediaPlugin.js

@@ -135,8 +135,9 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
         _ref5$allowMediaSingl = _ref5.allowMediaSingle,
         allowMediaSingle = _ref5$allowMediaSingl === void 0 ? false : _ref5$allowMediaSingl,
         allowCaptions = _ref5.allowCaptions,
+        allowMediaInlineImages = _ref5.allowMediaInlineImages,
         mediaFeatureFlags = _ref5.featureFlags;
-      var allowMediaInline = (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaFeatureFlags);
+      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') ? {
         withCaption: allowCaptions,
         withExtendedWidthTypes: true

package/dist/cjs/nodeviews/mediaGroup.js

@@ -176,7 +176,7 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
           onClick: function onClick() {
             (0, _utils.setNodeSelection)(_this.props.view, getNodePos());
           }
-        }, mediaInlineOptions((0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaOptions.featureFlags)));
+        }, mediaInlineOptions((0, _platformFeatureFlags.fg)('platform_editor_remove_media_inline_feature_flag') ? mediaOptions.allowMediaInlineImages : (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaOptions.featureFlags)));
       });
       return /*#__PURE__*/_react.default.createElement(_mediaFilmstrip.Filmstrip, {
         items: items,

package/dist/cjs/nodeviews/mediaGroupNext.js

@@ -18,6 +18,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _closeEditorClose = _interopRequireDefault(require("@atlaskit/icon/core/migration/close--editor-close"));
 var _mediaCommon = require("@atlaskit/media-common");
 var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
@@ -52,6 +53,7 @@ var isNodeSelected = function isNodeSelected(props) {
 };
 var prepareFilmstripItem = function prepareFilmstripItem(_ref) {
   var allowLazyLoading = _ref.allowLazyLoading,
+    allowMediaInlineImages = _ref.allowMediaInlineImages,
     enableDownloadButton = _ref.enableDownloadButton,
     handleMediaNodeRemoval = _ref.handleMediaNodeRemoval,
     getPos = _ref.getPos,
@@ -97,7 +99,7 @@ var prepareFilmstripItem = function prepareFilmstripItem(_ref) {
       onClick: function onClick() {
         setMediaGroupNodeSelection(getNodePos());
       }
-    }, mediaInlineOptions((0, _mediaCommon.getMediaFeatureFlag)('mediaInline', featureFlags)));
+    }, mediaInlineOptions((0, _platformFeatureFlags.fg)('platform_editor_remove_media_inline_feature_flag') ? allowMediaInlineImages : (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', featureFlags)));
   };
 };
 
@@ -174,6 +176,7 @@ var noop = function noop() {};
 var MediaGroupNext = exports.MediaGroupNext = (0, _reactIntlNext.injectIntl)( /*#__PURE__*/_react.default.memo(function (props) {
   var _props$mediaOptions = props.mediaOptions,
     allowLazyLoading = _props$mediaOptions.allowLazyLoading,
+    allowMediaInlineImages = _props$mediaOptions.allowMediaInlineImages,
     enableDownloadButton = _props$mediaOptions.enableDownloadButton,
     featureFlags = _props$mediaOptions.featureFlags,
     intl = props.intl,
@@ -224,6 +227,7 @@ var MediaGroupNext = exports.MediaGroupNext = (0, _reactIntlNext.injectIntl)( /*
   var filmstripItem = (0, _react.useMemo)(function () {
     return prepareFilmstripItem({
       allowLazyLoading: allowLazyLoading,
+      allowMediaInlineImages: allowMediaInlineImages,
       enableDownloadButton: enableDownloadButton,
       handleMediaNodeRemoval: handleMediaNodeRemoval,
       getPos: _getPos,
@@ -232,7 +236,7 @@ var MediaGroupNext = exports.MediaGroupNext = (0, _reactIntlNext.injectIntl)( /*
       setMediaGroupNodeSelection: setMediaGroupNodeSelection,
       featureFlags: featureFlags
     });
-  }, [allowLazyLoading, enableDownloadButton, handleMediaNodeRemoval, _getPos, intl, isMediaItemSelected, setMediaGroupNodeSelection, featureFlags]);
+  }, [allowLazyLoading, allowMediaInlineImages, enableDownloadButton, handleMediaNodeRemoval, _getPos, intl, isMediaItemSelected, setMediaGroupNodeSelection, featureFlags]);
   var items = (0, _react.useMemo)(function () {
     return mediaNodesWithOffsets.map(function (_ref4) {
       var node = _ref4.node,

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

@@ -27,6 +27,7 @@ var _view2 = require("@atlaskit/editor-prosemirror/view");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _mediaClient = require("@atlaskit/media-client");
 var _mediaCommon = require("@atlaskit/media-common");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _helpers = _interopRequireWildcard(require("../pm-plugins/commands/helpers"));
 var helpers = _helpers;
 var _mediaCommon2 = require("../pm-plugins/utils/media-common");
@@ -72,9 +73,7 @@ var createDropPlaceholder = function createDropPlaceholder(intl, nodeViewPortalP
 var MEDIA_RESOLVED_STATES = ['ready', 'error', 'cancelled'];
 var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*#__PURE__*/function () {
   function MediaPluginStateImplementation(_state, options, mediaOptions, _dispatch, pluginInjectionApi) {
-    var _this = this,
-      _this$mediaOptions2,
-      _this$mediaOptions3;
+    var _this = this;
     (0, _classCallCheck2.default)(this, MediaPluginStateImplementation);
     (0, _defineProperty2.default)(this, "allowsUploads", false);
     (0, _defineProperty2.default)(this, "ignoreLinks", false);
@@ -465,8 +464,16 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
     if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.provider) {
       this.setMediaProvider(mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.provider);
     }
-    if ((0, _mediaInline.mediaInlineImagesEnabled)((0, _mediaCommon.getMediaFeatureFlag)('mediaInline', (_this$mediaOptions2 = this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags), (_this$mediaOptions3 = this.mediaOptions) === null || _this$mediaOptions3 === void 0 ? void 0 : _this$mediaOptions3.allowMediaInlineImages)) {
-      this.allowInlineImages = true;
+    if ((0, _platformFeatureFlags.fg)('platform_editor_remove_media_inline_feature_flag')) {
+      var _this$mediaOptions2;
+      if ((_this$mediaOptions2 = this.mediaOptions) !== null && _this$mediaOptions2 !== void 0 && _this$mediaOptions2.allowMediaInlineImages) {
+        this.allowInlineImages = true;
+      }
+    } else {
+      var _this$mediaOptions3, _this$mediaOptions4;
+      if ((0, _mediaInline.mediaInlineImagesEnabled)((0, _mediaCommon.getMediaFeatureFlag)('mediaInline', (_this$mediaOptions3 = this.mediaOptions) === null || _this$mediaOptions3 === void 0 ? void 0 : _this$mediaOptions3.featureFlags), (_this$mediaOptions4 = this.mediaOptions) === null || _this$mediaOptions4 === void 0 ? void 0 : _this$mediaOptions4.allowMediaInlineImages)) {
+        this.allowInlineImages = true;
+      }
     }
     this.errorReporter = options.errorReporter || new _utils.ErrorReporter();
     this.singletonCreatedAt = (performance || Date).now();

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

@@ -24,10 +24,16 @@ var getMediaNodeInsertionType = exports.getMediaNodeInsertionType = function get
     return 'group';
   }
   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, _mediaInline.mediaInlineImagesEnabled)((0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.featureFlags), mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.allowMediaInlineImages)) {
-    if (canInsertInlineNode && !(0, _isType.isVideo)(fileMimeType)) {
+  if ((0, _platformFeatureFlags.fg)('platform_editor_remove_media_inline_feature_flag')) {
+    if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.allowMediaInlineImages) {
       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)) {
+      if (canInsertInlineNode && !(0, _isType.isVideo)(fileMimeType)) {
+        return 'inline';
+      }
+    }
   }
   if ((0, _mediaSingle.isMediaSingle)(state.schema, fileMimeType)) {
     return 'block';

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

@@ -289,8 +289,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       }
     }
     var layoutButtons = (0, _card.buildLayoutButtons)(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
-    if ((0, _mediaInline.mediaInlineImagesEnabled)(allowMediaInline, allowMediaInlineImages) && selectedNode) {
-      var selectedLayoutIcon = (0, _utils2.getSelectedLayoutIcon)([].concat((0, _toConsumableArray2.default)(_card.alignmentIcons), (0, _toConsumableArray2.default)(_card.wrappingIcons)), selectedNode.node);
+    var addLayoutDropdownToToolbar = function addLayoutDropdownToToolbar() {
+      var selectedLayoutIcon = (0, _utils2.getSelectedLayoutIcon)([].concat((0, _toConsumableArray2.default)(_card.alignmentIcons), (0, _toConsumableArray2.default)(_card.wrappingIcons)),
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      selectedNode.node);
       if (selectedLayoutIcon && layoutButtons.length) {
         var _options = {
           render: function render(props) {
@@ -315,12 +317,28 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           type: 'separator'
         }]);
       }
+    };
+    if ((0, _platformFeatureFlags.fg)('platform_editor_remove_media_inline_feature_flag')) {
+      if (allowMediaInlineImages && selectedNode) {
+        addLayoutDropdownToToolbar();
+      } else {
+        toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)(layoutButtons));
+        if (layoutButtons.length) {
+          toolbarButtons.push({
+            type: 'separator'
+          });
+        }
+      }
     } else {
-      toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)(layoutButtons));
-      if (layoutButtons.length) {
-        toolbarButtons.push({
-          type: 'separator'
-        });
+      if ((0, _mediaInline.mediaInlineImagesEnabled)(allowMediaInline, allowMediaInlineImages) && selectedNode) {
+        addLayoutDropdownToToolbar();
+      } else {
+        toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)(layoutButtons));
+        if (layoutButtons.length) {
+          toolbarButtons.push({
+            type: 'separator'
+          });
+        }
       }
     }
 
@@ -687,11 +705,13 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     allowLinking = options.allowLinking,
     allowAltTextOnImages = options.allowAltTextOnImages,
     providerFactory = options.providerFactory,
-    allowMediaInline = options.allowMediaInline,
+    allowMediaInlineImages = options.allowMediaInlineImages,
     allowResizing = options.allowResizing,
     isViewOnly = options.isViewOnly,
     allowResizingInTables = options.allowResizingInTables,
     allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions;
+  var allowMediaInline = options.allowMediaInline;
+  allowMediaInline = (0, _platformFeatureFlags.fg)('platform_editor_remove_media_inline_feature_flag') ? allowMediaInlineImages : allowMediaInline;
   var mediaPluginState = _pluginKey.stateKey.getState(state);
   var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
   var _ref3 = (_pluginInjectionApi$d3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d4 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions) !== null && _pluginInjectionApi$d3 !== void 0 ? _pluginInjectionApi$d3 : {},

package/dist/es2019/mediaPlugin.js

@@ -126,9 +126,10 @@ export const mediaPlugin = ({
         allowMediaGroup = true,
         allowMediaSingle = false,
         allowCaptions,
+        allowMediaInlineImages,
         featureFlags: mediaFeatureFlags
       } = options || {};
-      const allowMediaInline = getMediaFeatureFlag('mediaInline', mediaFeatureFlags);
+      const allowMediaInline = fg('platform_editor_remove_media_inline_feature_flag') ? allowMediaInlineImages : getMediaFeatureFlag('mediaInline', mediaFeatureFlags);
       const mediaSingleOption = fg('platform_editor_media_extended_resize_experience') ? {
         withCaption: allowCaptions,
         withExtendedWidthTypes: true

package/dist/es2019/nodeviews/mediaGroup.js

@@ -161,7 +161,7 @@ class MediaGroup extends React.Component {
           onClick: () => {
             setNodeSelection(this.props.view, getNodePos());
           },
-          ...mediaInlineOptions(getMediaFeatureFlag('mediaInline', mediaOptions.featureFlags))
+          ...mediaInlineOptions(fg('platform_editor_remove_media_inline_feature_flag') ? mediaOptions.allowMediaInlineImages : getMediaFeatureFlag('mediaInline', mediaOptions.featureFlags))
         };
       });
       return /*#__PURE__*/React.createElement(Filmstrip, {

package/dist/es2019/nodeviews/mediaGroupNext.js

@@ -6,6 +6,7 @@ import { isNodeSelectedOrInRange, SelectedState, setNodeSelection } from '@atlas
 import EditorCloseIcon from '@atlaskit/icon/core/migration/close--editor-close';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { Filmstrip } from '@atlaskit/media-filmstrip';
+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 { createMediaNodeUpdater } from './mediaNodeUpdater';
@@ -34,6 +35,7 @@ const isNodeSelected = props => (mediaItemPos, mediaGroupPos) => {
 };
 const prepareFilmstripItem = ({
   allowLazyLoading,
+  allowMediaInlineImages,
   enableDownloadButton,
   handleMediaNodeRemoval,
   getPos,
@@ -78,7 +80,7 @@ const prepareFilmstripItem = ({
     onClick: () => {
       setMediaGroupNodeSelection(getNodePos());
     },
-    ...mediaInlineOptions(getMediaFeatureFlag('mediaInline', featureFlags))
+    ...mediaInlineOptions(fg('platform_editor_remove_media_inline_feature_flag') ? allowMediaInlineImages : getMediaFeatureFlag('mediaInline', featureFlags))
   };
 };
 
@@ -129,6 +131,7 @@ export const MediaGroupNext = injectIntl( /*#__PURE__*/React.memo(props => {
   const {
     mediaOptions: {
       allowLazyLoading,
+      allowMediaInlineImages,
       enableDownloadButton,
       featureFlags
     },
@@ -178,6 +181,7 @@ export const MediaGroupNext = injectIntl( /*#__PURE__*/React.memo(props => {
   const filmstripItem = useMemo(() => {
     return prepareFilmstripItem({
       allowLazyLoading,
+      allowMediaInlineImages,
       enableDownloadButton,
       handleMediaNodeRemoval,
       getPos,
@@ -186,7 +190,7 @@ export const MediaGroupNext = injectIntl( /*#__PURE__*/React.memo(props => {
       setMediaGroupNodeSelection,
       featureFlags
     });
-  }, [allowLazyLoading, enableDownloadButton, handleMediaNodeRemoval, getPos, intl, isMediaItemSelected, setMediaGroupNodeSelection, featureFlags]);
+  }, [allowLazyLoading, allowMediaInlineImages, enableDownloadButton, handleMediaNodeRemoval, getPos, intl, isMediaItemSelected, setMediaGroupNodeSelection, featureFlags]);
   const items = useMemo(() => {
     return mediaNodesWithOffsets.map(({
       node,

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

@@ -15,6 +15,7 @@ import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { isFileIdentifier } from '@atlaskit/media-client';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { updateMediaNodeAttrs } from '../pm-plugins/commands/helpers';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-namespace
@@ -50,7 +51,6 @@ const createDropPlaceholder = (intl, nodeViewPortalProviderAPI, dropPlaceholderK
 const MEDIA_RESOLVED_STATES = ['ready', 'error', 'cancelled'];
 export class MediaPluginStateImplementation {
   constructor(_state, options, mediaOptions, _dispatch, pluginInjectionApi) {
-    var _this$mediaOptions2, _this$mediaOptions3;
     _defineProperty(this, "allowsUploads", false);
     _defineProperty(this, "ignoreLinks", false);
     _defineProperty(this, "waitForMediaUpload", true);
@@ -442,8 +442,16 @@ export class MediaPluginStateImplementation {
     if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.provider) {
       this.setMediaProvider(mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.provider);
     }
-    if (mediaInlineImagesEnabled(getMediaFeatureFlag('mediaInline', (_this$mediaOptions2 = this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags), (_this$mediaOptions3 = this.mediaOptions) === null || _this$mediaOptions3 === void 0 ? void 0 : _this$mediaOptions3.allowMediaInlineImages)) {
-      this.allowInlineImages = true;
+    if (fg('platform_editor_remove_media_inline_feature_flag')) {
+      var _this$mediaOptions2;
+      if ((_this$mediaOptions2 = this.mediaOptions) !== null && _this$mediaOptions2 !== void 0 && _this$mediaOptions2.allowMediaInlineImages) {
+        this.allowInlineImages = true;
+      }
+    } else {
+      var _this$mediaOptions3, _this$mediaOptions4;
+      if (mediaInlineImagesEnabled(getMediaFeatureFlag('mediaInline', (_this$mediaOptions3 = this.mediaOptions) === null || _this$mediaOptions3 === void 0 ? void 0 : _this$mediaOptions3.featureFlags), (_this$mediaOptions4 = this.mediaOptions) === null || _this$mediaOptions4 === void 0 ? void 0 : _this$mediaOptions4.allowMediaInlineImages)) {
+        this.allowInlineImages = true;
+      }
     }
     this.errorReporter = options.errorReporter || new ErrorReporter();
     this.singletonCreatedAt = (performance || Date).now();

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

@@ -18,10 +18,16 @@ export const getMediaNodeInsertionType = (state, mediaOptions, fileMimeType) =>
     return 'group';
   }
   const canInsertInlineNode = getMediaFeatureFlag('mediaInline', mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.featureFlags) && !isInEmptyLine(state) && (!isInsidePotentialEmptyParagraph(state) || isInSupportedInlineImageParent(state)) && canInsertMediaInline(state);
-  if (mediaInlineImagesEnabled(getMediaFeatureFlag('mediaInline', mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.featureFlags), mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.allowMediaInlineImages)) {
-    if (canInsertInlineNode && !isVideo(fileMimeType)) {
+  if (fg('platform_editor_remove_media_inline_feature_flag')) {
+    if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.allowMediaInlineImages) {
       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)) {
+      if (canInsertInlineNode && !isVideo(fileMimeType)) {
+        return 'inline';
+      }
+    }
   }
   if (isMediaSingle(state.schema, fileMimeType)) {
     return 'block';

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

@@ -280,8 +280,10 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
       }
     }
     const layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled);
-    if (mediaInlineImagesEnabled(allowMediaInline, allowMediaInlineImages) && selectedNode) {
-      const selectedLayoutIcon = getSelectedLayoutIcon([...alignmentIcons, ...wrappingIcons], selectedNode.node);
+    const addLayoutDropdownToToolbar = () => {
+      const selectedLayoutIcon = getSelectedLayoutIcon([...alignmentIcons, ...wrappingIcons],
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      selectedNode.node);
       if (selectedLayoutIcon && layoutButtons.length) {
         const options = {
           render: props => {
@@ -306,12 +308,28 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
           type: 'separator'
         }];
       }
+    };
+    if (fg('platform_editor_remove_media_inline_feature_flag')) {
+      if (allowMediaInlineImages && selectedNode) {
+        addLayoutDropdownToToolbar();
+      } else {
+        toolbarButtons = [...toolbarButtons, ...layoutButtons];
+        if (layoutButtons.length) {
+          toolbarButtons.push({
+            type: 'separator'
+          });
+        }
+      }
     } else {
-      toolbarButtons = [...toolbarButtons, ...layoutButtons];
-      if (layoutButtons.length) {
-        toolbarButtons.push({
-          type: 'separator'
-        });
+      if (mediaInlineImagesEnabled(allowMediaInline, allowMediaInlineImages) && selectedNode) {
+        addLayoutDropdownToToolbar();
+      } else {
+        toolbarButtons = [...toolbarButtons, ...layoutButtons];
+        if (layoutButtons.length) {
+          toolbarButtons.push({
+            type: 'separator'
+          });
+        }
       }
     }
 
@@ -680,12 +698,16 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     allowLinking,
     allowAltTextOnImages,
     providerFactory,
-    allowMediaInline,
+    allowMediaInlineImages,
     allowResizing,
     isViewOnly,
     allowResizingInTables,
     allowAdvancedToolBarOptions
   } = options;
+  let {
+    allowMediaInline
+  } = options;
+  allowMediaInline = fg('platform_editor_remove_media_inline_feature_flag') ? allowMediaInlineImages : allowMediaInline;
   const mediaPluginState = stateKey.getState(state);
   const mediaLinkingState = getMediaLinkingState(state);
   const {

package/dist/esm/mediaPlugin.js

@@ -125,8 +125,9 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
         _ref5$allowMediaSingl = _ref5.allowMediaSingle,
         allowMediaSingle = _ref5$allowMediaSingl === void 0 ? false : _ref5$allowMediaSingl,
         allowCaptions = _ref5.allowCaptions,
+        allowMediaInlineImages = _ref5.allowMediaInlineImages,
         mediaFeatureFlags = _ref5.featureFlags;
-      var allowMediaInline = getMediaFeatureFlag('mediaInline', mediaFeatureFlags);
+      var allowMediaInline = fg('platform_editor_remove_media_inline_feature_flag') ? allowMediaInlineImages : getMediaFeatureFlag('mediaInline', mediaFeatureFlags);
       var mediaSingleOption = fg('platform_editor_media_extended_resize_experience') ? {
         withCaption: allowCaptions,
         withExtendedWidthTypes: true

package/dist/esm/nodeviews/mediaGroup.js

@@ -169,7 +169,7 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
           onClick: function onClick() {
             setNodeSelection(_this.props.view, getNodePos());
           }
-        }, mediaInlineOptions(getMediaFeatureFlag('mediaInline', mediaOptions.featureFlags)));
+        }, mediaInlineOptions(fg('platform_editor_remove_media_inline_feature_flag') ? mediaOptions.allowMediaInlineImages : getMediaFeatureFlag('mediaInline', mediaOptions.featureFlags)));
       });
       return /*#__PURE__*/React.createElement(Filmstrip, {
         items: items,

package/dist/esm/nodeviews/mediaGroupNext.js

@@ -12,6 +12,7 @@ import { isNodeSelectedOrInRange, SelectedState, setNodeSelection } from '@atlas
 import EditorCloseIcon from '@atlaskit/icon/core/migration/close--editor-close';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { Filmstrip } from '@atlaskit/media-filmstrip';
+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 { createMediaNodeUpdater } from './mediaNodeUpdater';
@@ -42,6 +43,7 @@ var isNodeSelected = function isNodeSelected(props) {
 };
 var prepareFilmstripItem = function prepareFilmstripItem(_ref) {
   var allowLazyLoading = _ref.allowLazyLoading,
+    allowMediaInlineImages = _ref.allowMediaInlineImages,
     enableDownloadButton = _ref.enableDownloadButton,
     handleMediaNodeRemoval = _ref.handleMediaNodeRemoval,
     getPos = _ref.getPos,
@@ -87,7 +89,7 @@ var prepareFilmstripItem = function prepareFilmstripItem(_ref) {
       onClick: function onClick() {
         setMediaGroupNodeSelection(getNodePos());
       }
-    }, mediaInlineOptions(getMediaFeatureFlag('mediaInline', featureFlags)));
+    }, mediaInlineOptions(fg('platform_editor_remove_media_inline_feature_flag') ? allowMediaInlineImages : getMediaFeatureFlag('mediaInline', featureFlags)));
   };
 };
 
@@ -164,6 +166,7 @@ var noop = function noop() {};
 export var MediaGroupNext = injectIntl( /*#__PURE__*/React.memo(function (props) {
   var _props$mediaOptions = props.mediaOptions,
     allowLazyLoading = _props$mediaOptions.allowLazyLoading,
+    allowMediaInlineImages = _props$mediaOptions.allowMediaInlineImages,
     enableDownloadButton = _props$mediaOptions.enableDownloadButton,
     featureFlags = _props$mediaOptions.featureFlags,
     intl = props.intl,
@@ -214,6 +217,7 @@ export var MediaGroupNext = injectIntl( /*#__PURE__*/React.memo(function (props)
   var filmstripItem = useMemo(function () {
     return prepareFilmstripItem({
       allowLazyLoading: allowLazyLoading,
+      allowMediaInlineImages: allowMediaInlineImages,
       enableDownloadButton: enableDownloadButton,
       handleMediaNodeRemoval: handleMediaNodeRemoval,
       getPos: _getPos,
@@ -222,7 +226,7 @@ export var MediaGroupNext = injectIntl( /*#__PURE__*/React.memo(function (props)
       setMediaGroupNodeSelection: setMediaGroupNodeSelection,
       featureFlags: featureFlags
     });
-  }, [allowLazyLoading, enableDownloadButton, handleMediaNodeRemoval, _getPos, intl, isMediaItemSelected, setMediaGroupNodeSelection, featureFlags]);
+  }, [allowLazyLoading, allowMediaInlineImages, enableDownloadButton, handleMediaNodeRemoval, _getPos, intl, isMediaItemSelected, setMediaGroupNodeSelection, featureFlags]);
   var items = useMemo(function () {
     return mediaNodesWithOffsets.map(function (_ref4) {
       var node = _ref4.node,

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

@@ -24,6 +24,7 @@ import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { isFileIdentifier } from '@atlaskit/media-client';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { updateMediaNodeAttrs } from '../pm-plugins/commands/helpers';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-namespace
@@ -63,9 +64,7 @@ var createDropPlaceholder = function createDropPlaceholder(intl, nodeViewPortalP
 var MEDIA_RESOLVED_STATES = ['ready', 'error', 'cancelled'];
 export var MediaPluginStateImplementation = /*#__PURE__*/function () {
   function MediaPluginStateImplementation(_state, options, mediaOptions, _dispatch, pluginInjectionApi) {
-    var _this = this,
-      _this$mediaOptions2,
-      _this$mediaOptions3;
+    var _this = this;
     _classCallCheck(this, MediaPluginStateImplementation);
     _defineProperty(this, "allowsUploads", false);
     _defineProperty(this, "ignoreLinks", false);
@@ -456,8 +455,16 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
     if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.provider) {
       this.setMediaProvider(mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.provider);
     }
-    if (mediaInlineImagesEnabled(getMediaFeatureFlag('mediaInline', (_this$mediaOptions2 = this.mediaOptions) === null || _this$mediaOptions2 === void 0 ? void 0 : _this$mediaOptions2.featureFlags), (_this$mediaOptions3 = this.mediaOptions) === null || _this$mediaOptions3 === void 0 ? void 0 : _this$mediaOptions3.allowMediaInlineImages)) {
-      this.allowInlineImages = true;
+    if (fg('platform_editor_remove_media_inline_feature_flag')) {
+      var _this$mediaOptions2;
+      if ((_this$mediaOptions2 = this.mediaOptions) !== null && _this$mediaOptions2 !== void 0 && _this$mediaOptions2.allowMediaInlineImages) {
+        this.allowInlineImages = true;
+      }
+    } else {
+      var _this$mediaOptions3, _this$mediaOptions4;
+      if (mediaInlineImagesEnabled(getMediaFeatureFlag('mediaInline', (_this$mediaOptions3 = this.mediaOptions) === null || _this$mediaOptions3 === void 0 ? void 0 : _this$mediaOptions3.featureFlags), (_this$mediaOptions4 = this.mediaOptions) === null || _this$mediaOptions4 === void 0 ? void 0 : _this$mediaOptions4.allowMediaInlineImages)) {
+        this.allowInlineImages = true;
+      }
     }
     this.errorReporter = options.errorReporter || new ErrorReporter();
     this.singletonCreatedAt = (performance || Date).now();

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

@@ -18,10 +18,16 @@ export var getMediaNodeInsertionType = function getMediaNodeInsertionType(state,
     return 'group';
   }
   var canInsertInlineNode = getMediaFeatureFlag('mediaInline', mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.featureFlags) && !isInEmptyLine(state) && (!isInsidePotentialEmptyParagraph(state) || isInSupportedInlineImageParent(state)) && canInsertMediaInline(state);
-  if (mediaInlineImagesEnabled(getMediaFeatureFlag('mediaInline', mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.featureFlags), mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.allowMediaInlineImages)) {
-    if (canInsertInlineNode && !isVideo(fileMimeType)) {
+  if (fg('platform_editor_remove_media_inline_feature_flag')) {
+    if (mediaOptions !== null && mediaOptions !== void 0 && mediaOptions.allowMediaInlineImages) {
       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)) {
+      if (canInsertInlineNode && !isVideo(fileMimeType)) {
+        return 'inline';
+      }
+    }
   }
   if (isMediaSingle(state.schema, fileMimeType)) {
     return 'block';

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

@@ -279,8 +279,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       }
     }
     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);
-    if (mediaInlineImagesEnabled(allowMediaInline, allowMediaInlineImages) && selectedNode) {
-      var selectedLayoutIcon = getSelectedLayoutIcon([].concat(_toConsumableArray(alignmentIcons), _toConsumableArray(wrappingIcons)), selectedNode.node);
+    var addLayoutDropdownToToolbar = function addLayoutDropdownToToolbar() {
+      var selectedLayoutIcon = getSelectedLayoutIcon([].concat(_toConsumableArray(alignmentIcons), _toConsumableArray(wrappingIcons)),
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      selectedNode.node);
       if (selectedLayoutIcon && layoutButtons.length) {
         var _options = {
           render: function render(props) {
@@ -305,12 +307,28 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           type: 'separator'
         }]);
       }
+    };
+    if (fg('platform_editor_remove_media_inline_feature_flag')) {
+      if (allowMediaInlineImages && selectedNode) {
+        addLayoutDropdownToToolbar();
+      } else {
+        toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), _toConsumableArray(layoutButtons));
+        if (layoutButtons.length) {
+          toolbarButtons.push({
+            type: 'separator'
+          });
+        }
+      }
     } else {
-      toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), _toConsumableArray(layoutButtons));
-      if (layoutButtons.length) {
-        toolbarButtons.push({
-          type: 'separator'
-        });
+      if (mediaInlineImagesEnabled(allowMediaInline, allowMediaInlineImages) && selectedNode) {
+        addLayoutDropdownToToolbar();
+      } else {
+        toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), _toConsumableArray(layoutButtons));
+        if (layoutButtons.length) {
+          toolbarButtons.push({
+            type: 'separator'
+          });
+        }
       }
     }
 
@@ -677,11 +695,13 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     allowLinking = options.allowLinking,
     allowAltTextOnImages = options.allowAltTextOnImages,
     providerFactory = options.providerFactory,
-    allowMediaInline = options.allowMediaInline,
+    allowMediaInlineImages = options.allowMediaInlineImages,
     allowResizing = options.allowResizing,
     isViewOnly = options.isViewOnly,
     allowResizingInTables = options.allowResizingInTables,
     allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions;
+  var allowMediaInline = options.allowMediaInline;
+  allowMediaInline = fg('platform_editor_remove_media_inline_feature_flag') ? allowMediaInlineImages : allowMediaInline;
   var mediaPluginState = stateKey.getState(state);
   var mediaLinkingState = getMediaLinkingState(state);
   var _ref3 = (_pluginInjectionApi$d3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d4 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions) !== null && _pluginInjectionApi$d3 !== void 0 ? _pluginInjectionApi$d3 : {},

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "2.3.17",
+	"version": "2.3.19",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,8 +37,8 @@
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/analytics-namespaced-context": "^7.0.0",
 		"@atlaskit/analytics-next": "^11.0.0",
-		"@atlaskit/button": "^22.0.0",
-		"@atlaskit/editor-common": "^102.15.0",
+		"@atlaskit/button": "^23.0.0",
+		"@atlaskit/editor-common": "^102.17.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-annotation": "^2.2.0",
@@ -56,7 +56,7 @@
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/form": "^12.0.0",
-		"@atlaskit/icon": "^25.3.0",
+		"@atlaskit/icon": "^25.4.0",
 		"@atlaskit/media-card": "^79.0.0",
 		"@atlaskit/media-client": "^32.0.0",
 		"@atlaskit/media-client-react": "^4.0.0",
@@ -173,6 +173,9 @@
 		},
 		"platform_editor_controls_patch_1": {
 			"type": "boolean"
+		},
+		"platform_editor_remove_media_inline_feature_flag": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {