@atlaskit/editor-plugin-media 2.3.9 → 2.3.11

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-media
 
+## 2.3.11
+
+### Patch Changes
+
+- [#128574](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128574)
+  [`cba34b8397ba2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cba34b8397ba2) -
+  [ux] [ED-26973] Update floating toolbar for inline and thumbnail file
+- Updated dependencies
+
+## 2.3.10
+
+### Patch Changes
+
+- [#129550](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129550)
+  [`bee10fefc48ef`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bee10fefc48ef) -
+  [ED-26955] Update check for external media
+
 ## 2.3.9
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaGroup.js

@@ -24,6 +24,7 @@ var _close = _interopRequireDefault(require("@atlaskit/icon/glyph/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 _useMediaProvider = require("../ui/hooks/useMediaProvider");
 var _mediaGroupNext = require("./mediaGroupNext");
@@ -181,7 +182,7 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
         items: items,
         mediaClientConfig: viewMediaClientConfig,
         featureFlags: mediaOptions.featureFlags,
-        shouldOpenMediaViewer: editorViewMode
+        shouldOpenMediaViewer: editorViewMode && (0, _experiments.editorExperiment)('platform_editor_controls', 'control')
       });
     });
     _this.mediaNodes = [];

package/dist/cjs/nodeviews/mediaGroupNext.js

@@ -18,6 +18,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _close = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/close"));
 var _mediaCommon = require("@atlaskit/media-common");
 var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -289,7 +290,7 @@ var MediaGroupNext = exports.MediaGroupNext = (0, _reactIntlNext.injectIntl)( /*
     items: items,
     mediaClientConfig: viewMediaClientConfig,
     featureFlags: featureFlags,
-    shouldOpenMediaViewer: editorViewMode
+    shouldOpenMediaViewer: editorViewMode && (0, _experiments.editorExperiment)('platform_editor_controls', 'control')
   });
 }));
 MediaGroupNext.displayName = 'MediaGroup';

package/dist/cjs/nodeviews/mediaInline.js

@@ -24,6 +24,7 @@ var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-n
 var _mediaCard = require("@atlaskit/media-card");
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _mediaUi = require("@atlaskit/media-ui");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _isType = require("../pm-plugins/utils/is-type");
 var _MediaViewerContainer = require("../ui/MediaViewer/MediaViewerContainer");
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
@@ -211,7 +212,8 @@ var MediaInline = exports.MediaInline = function MediaInline(props) {
     mediaNode: props.node,
     mediaPluginState: props.mediaPluginState,
     isEditorViewMode: props.editorViewMode,
-    isSelected: props.isSelected
+    isSelected: props.isSelected,
+    isInline: (0, _platformFeatureFlags.fg)('platform_editor_render_media_viewer_as_inline')
   }, (0, _react2.jsx)(_mediaCard.MediaInlineCard, {
     isSelected: props.isSelected,
     identifier: identifier,

package/dist/cjs/ui/MediaViewer/MediaViewerContainer.js

@@ -9,6 +9,7 @@ exports.MediaViewerContainer = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _isType = require("../../pm-plugins/utils/is-type");
 var _utils = require("../../ui/toolbar/utils");
 var _PortalWrapper = require("./PortalWrapper");
@@ -52,7 +53,7 @@ var MediaViewerContainer = exports.MediaViewerContainer = function MediaViewerCo
     setShowMediaViewer(false);
   };
   var isVideoMedia = (0, _isType.isVideo)((_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.__fileMimeType);
-  var shouldShowViewer = isEditorViewMode && showViewer && selectedNodeAttrs && mediaClientConfig && !isVideoMedia;
+  var shouldShowViewer = isEditorViewMode && showViewer && selectedNodeAttrs && mediaClientConfig && !isVideoMedia && (0, _experiments.editorExperiment)('platform_editor_controls', 'control');
   return (0, _react2.jsx)(_react.Fragment, null, isEditorViewMode ? (0, _react2.jsx)(_react.Fragment, null, isInline ?
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
   (0, _react2.jsx)("span", {

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

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.handleShowMediaViewer = exports.floatingToolbar = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _card = require("@atlaskit/editor-common/card");
@@ -91,41 +91,10 @@ var handleShowMediaViewer = exports.handleShowMediaViewer = function handleShowM
 };
 var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, editorAnalyticsAPI, forceFocusSelector, isViewOnly) {
   var _mediaPluginState$med, _pluginInjectionApi$c;
-  if (isViewOnly) {
-    return [];
-  }
   var enforceMediaDataSecurityPolicy = mediaPluginState === null || mediaPluginState === void 0 || (_mediaPluginState$med = mediaPluginState.mediaClientConfig) === null || _mediaPluginState$med === void 0 ? void 0 : _mediaPluginState$med.enforceDataSecurityPolicy;
   var disableDownloadButton = typeof enforceMediaDataSecurityPolicy === 'boolean' ? enforceMediaDataSecurityPolicy : false;
-  var mediaGroup = state.schema.nodes.mediaGroup;
-  var items = [{
-    id: 'editor.media.view.switcher.inline',
-    type: 'button',
-    icon: _imageInline.default,
-    iconFallback: _card.IconInline,
-    selected: false,
-    focusEditoronEnter: true,
-    disabled: false,
-    onClick: (0, _commands3.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
-    title: intl.formatMessage(_messages.cardMessages.inlineTitle),
-    testId: 'inline-appearance',
-    className: 'inline-appearance' // a11y. uses to force focus on item
-  }, {
-    id: 'editor.media.view.switcher.thumbnail',
-    type: 'button',
-    icon: _smartLinkCard.default,
-    iconFallback: _card.IconCard,
-    selected: true,
-    disabled: false,
-    focusEditoronEnter: true,
-    onClick: function onClick() {
-      return true;
-    },
-    title: intl.formatMessage(_messages.cardMessages.blockTitle),
-    testId: 'thumbnail-appearance',
-    className: 'thumbnail-appearance' // a11y. uses to force focus on item
-  }, {
-    type: 'separator'
-  }, {
+  var isEditorControlsEnabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
+  var preview = {
     id: 'editor.media.viewer',
     testId: 'file-preview-toolbar-button',
     type: 'button',
@@ -141,9 +110,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     },
     disabled: (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.sharedState) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.currentState()) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.mode) === 'offline',
     supportsViewMode: true
-  }, {
-    type: 'separator'
-  }, {
+  };
+  var download = _objectSpread({
     id: 'editor.media.card.download',
     type: 'button',
     icon: _download.default,
@@ -153,33 +121,118 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     },
     title: intl.formatMessage(_mediaUi.messages.download),
     disabled: disableDownloadButton
-  }, {
-    type: 'separator'
-  }, {
-    type: 'copy-button',
-    supportsViewMode: true,
-    items: [{
-      state: state,
-      formatMessage: intl.formatMessage,
-      nodeType: mediaGroup
-    }]
-  }, {
-    type: 'separator'
-  }, {
-    id: 'editor.media.delete',
-    type: 'button',
-    appearance: 'danger',
-    focusEditoronEnter: true,
-    icon: _delete.default,
-    iconFallback: _remove.default,
-    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
-    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
-    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
-    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
-    title: intl.formatMessage(_messages.default.remove),
-    onClick: handleRemoveMediaGroup,
-    testId: 'media-toolbar-remove-button'
-  }];
+  }, isEditorControlsEnabled && {
+    supportsViewMode: true
+  });
+  if (isViewOnly && !isEditorControlsEnabled) {
+    return [];
+  }
+  var mediaGroup = state.schema.nodes.mediaGroup;
+  var items = [];
+  if (!isEditorControlsEnabled) {
+    items.push({
+      id: 'editor.media.view.switcher.inline',
+      type: 'button',
+      icon: _imageInline.default,
+      iconFallback: _card.IconInline,
+      selected: false,
+      focusEditoronEnter: true,
+      disabled: false,
+      onClick: (0, _commands3.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
+      title: intl.formatMessage(_messages.cardMessages.inlineTitle),
+      testId: 'inline-appearance',
+      className: 'inline-appearance' // a11y. uses to force focus on item
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      type: 'button',
+      icon: _smartLinkCard.default,
+      iconFallback: _card.IconCard,
+      selected: true,
+      disabled: false,
+      focusEditoronEnter: true,
+      onClick: function onClick() {
+        return true;
+      },
+      title: intl.formatMessage(_messages.cardMessages.blockTitle),
+      testId: 'thumbnail-appearance',
+      className: 'thumbnail-appearance' // a11y. uses to force focus on item
+    }, {
+      type: 'separator'
+    }, preview, {
+      type: 'separator'
+    }, download, {
+      type: 'separator'
+    }, {
+      type: 'copy-button',
+      supportsViewMode: true,
+      items: [{
+        state: state,
+        formatMessage: intl.formatMessage,
+        nodeType: mediaGroup
+      }]
+    }, {
+      type: 'separator'
+    }, {
+      id: 'editor.media.delete',
+      type: 'button',
+      appearance: 'danger',
+      focusEditoronEnter: true,
+      icon: _delete.default,
+      iconFallback: _remove.default,
+      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
+      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
+      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
+      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
+      title: intl.formatMessage(_messages.default.remove),
+      onClick: handleRemoveMediaGroup,
+      testId: 'media-toolbar-remove-button'
+    });
+  } else {
+    var options = [{
+      id: 'editor.media.view.switcher.inline',
+      title: intl.formatMessage(_messages.cardMessages.inlineTitle),
+      onClick: (0, _commands3.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
+      icon: /*#__PURE__*/_react.default.createElement(_imageInline.default, {
+        label: "",
+        spacing: "spacious"
+      })
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      title: intl.formatMessage(_messages.cardMessages.blockTitle),
+      selected: true,
+      onClick: function onClick() {
+        return true;
+      },
+      icon: /*#__PURE__*/_react.default.createElement(_smartLinkCard.default, {
+        label: "",
+        spacing: "spacious"
+      })
+    }];
+    var switcherDropdown = {
+      title: intl.formatMessage(_mediaUi.messages.fileDisplayOptions),
+      id: 'media-group-inline-switcher-toolbar-item',
+      testId: 'media-group-inline-switcher-dropdown',
+      type: 'dropdown',
+      options: options,
+      icon: function icon() {
+        return /*#__PURE__*/_react.default.createElement(_smartLinkCard.default, {
+          label: "",
+          spacing: "spacious"
+        });
+      }
+    };
+    items.push(switcherDropdown, {
+      type: 'separator',
+      fullHeight: true
+    }, download, {
+      type: 'separator',
+      fullHeight: true,
+      supportsViewMode: true
+    }, preview, {
+      type: 'separator',
+      fullHeight: true
+    });
+  }
   return items;
 };
 var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToolbar(state, intl, options, pluginState, mediaLinkingState, pluginInjectionApi) {

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

@@ -118,7 +118,9 @@ var getLinkingDropdownOptions = exports.getLinkingDropdownOptions = function get
     var selectedNodeTypeSingle = mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.attrs.__fileMimeType;
     mediaType = getMediaType(selectedNodeTypeSingle);
   }
-  if (mediaType !== 'external' && mediaType !== 'image') {
+
+  // Only show link dropdown option for images and external media (shown as images)
+  if (mediaType !== 'image' && (mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.attrs.type) !== 'external') {
     return [];
   }
   if (mediaLinkingState && mediaLinkingState.editable) {

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

@@ -6,12 +6,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateMediaInlineFloatingToolbar = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _card = require("@atlaskit/editor-common/card");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
+var _growDiagonal = _interopRequireDefault(require("@atlaskit/icon/core/grow-diagonal"));
 var _imageFullscreen = _interopRequireDefault(require("@atlaskit/icon/core/image-fullscreen"));
 var _imageInline = _interopRequireDefault(require("@atlaskit/icon/core/image-inline"));
 var _maximize = _interopRequireDefault(require("@atlaskit/icon/core/maximize"));
@@ -35,6 +37,8 @@ var _utils = require("./utils");
 var _index = require("./index");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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) { (0, _defineProperty2.default)(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; }
 var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi) {
   var _pluginInjectionApi$a, _pluginInjectionApi$f;
   var options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
@@ -46,39 +50,13 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
   if (mediaPluginState.allowInlineImages && (0, _isType.isImage)(mediaType)) {
     return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState, options);
   }
-  var items = [{
-    id: 'editor.media.view.switcher.inline',
-    type: 'button',
-    icon: _imageInline.default,
-    iconFallback: _card.IconInline,
-    selected: true,
-    disabled: false,
-    focusEditoronEnter: true,
-    onClick: function onClick() {
-      return true;
-    },
-    title: intl.formatMessage(_messages.cardMessages.inlineTitle),
-    testId: 'inline-appearance',
-    className: 'inline-appearance' // a11y. uses to force focus on item
-  }, {
-    id: 'editor.media.view.switcher.thumbnail',
-    type: 'button',
-    icon: _smartLinkCard.default,
-    iconFallback: _card.IconCard,
-    selected: false,
-    disabled: false,
-    focusEditoronEnter: true,
-    onClick: (0, _commands.changeInlineToMediaCard)(editorAnalyticsAPI, forceFocusSelector),
-    title: intl.formatMessage(_messages.cardMessages.blockTitle),
-    testId: 'thumbnail-appearance',
-    className: 'thumbnail-appearance' // a11y. uses to force focus on item
-  }, {
-    type: 'separator'
-  }, {
+  var items = [];
+  var isEditorControlsEnabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
+  var preview = _objectSpread({
     id: 'editor.media.viewer',
     testId: 'file-preview-toolbar-button',
     type: 'button',
-    icon: _maximize.default,
+    icon: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? _growDiagonal.default : _maximize.default,
     iconFallback: _filePreview.default,
     title: intl.formatMessage(_mediaUi.messages.preview),
     onClick: function onClick() {
@@ -88,10 +66,10 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
         api: pluginInjectionApi
       })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
     }
-  }, {
-    type: 'separator',
-    fullHeight: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')
-  }, {
+  }, isEditorControlsEnabled && {
+    supportsViewMode: true
+  });
+  var download = _objectSpread({
     id: 'editor.media.card.download',
     type: 'button',
     icon: _download.default,
@@ -100,33 +78,113 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
       return true;
     },
     title: intl.formatMessage(_mediaUi.messages.download)
-  }, {
-    type: 'separator'
-  }, {
-    type: 'copy-button',
-    supportsViewMode: true,
-    items: [{
-      state: state,
-      formatMessage: intl.formatMessage,
-      nodeType: mediaInline
-    }]
-  }, {
-    type: 'separator'
-  }, {
-    id: 'editor.media.delete',
-    type: 'button',
-    appearance: 'danger',
-    focusEditoronEnter: true,
-    icon: _delete.default,
-    iconFallback: _remove.default,
-    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
-    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
-    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
-    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
-    title: intl.formatMessage(_messages.default.remove),
-    onClick: _commands.removeInlineCard,
-    testId: 'media-toolbar-remove-button'
-  }];
+  }, isEditorControlsEnabled && {
+    supportsViewMode: true
+  });
+  if (!isEditorControlsEnabled) {
+    items.push({
+      id: 'editor.media.view.switcher.inline',
+      type: 'button',
+      icon: _imageInline.default,
+      iconFallback: _card.IconInline,
+      selected: true,
+      disabled: false,
+      focusEditoronEnter: true,
+      onClick: function onClick() {
+        return true;
+      },
+      title: intl.formatMessage(_messages.cardMessages.inlineTitle),
+      testId: 'inline-appearance',
+      className: 'inline-appearance' // a11y. uses to force focus on item
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      type: 'button',
+      icon: _smartLinkCard.default,
+      iconFallback: _card.IconCard,
+      selected: false,
+      disabled: false,
+      focusEditoronEnter: true,
+      onClick: (0, _commands.changeInlineToMediaCard)(editorAnalyticsAPI, forceFocusSelector),
+      title: intl.formatMessage(_messages.cardMessages.blockTitle),
+      testId: 'thumbnail-appearance',
+      className: 'thumbnail-appearance' // a11y. uses to force focus on item
+    }, {
+      type: 'separator'
+    }, preview, {
+      type: 'separator'
+    }, download, {
+      type: 'separator'
+    }, {
+      type: 'copy-button',
+      supportsViewMode: true,
+      items: [{
+        state: state,
+        formatMessage: intl.formatMessage,
+        nodeType: mediaInline
+      }]
+    }, {
+      type: 'separator'
+    }, {
+      id: 'editor.media.delete',
+      type: 'button',
+      appearance: 'danger',
+      focusEditoronEnter: true,
+      icon: _delete.default,
+      iconFallback: _remove.default,
+      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
+      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
+      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, true),
+      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaInline, false),
+      title: intl.formatMessage(_messages.default.remove),
+      onClick: _commands.removeInlineCard,
+      testId: 'media-toolbar-remove-button'
+    });
+  } else {
+    var _options = [{
+      id: 'editor.media.view.switcher.inline',
+      title: intl.formatMessage(_messages.cardMessages.inlineTitle),
+      onClick: function onClick() {
+        return true;
+      },
+      selected: true,
+      icon: /*#__PURE__*/_react.default.createElement(_imageInline.default, {
+        label: "",
+        spacing: "spacious"
+      })
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      title: intl.formatMessage(_messages.cardMessages.blockTitle),
+      onClick: (0, _commands.changeInlineToMediaCard)(editorAnalyticsAPI, forceFocusSelector),
+      icon: /*#__PURE__*/_react.default.createElement(_smartLinkCard.default, {
+        label: "",
+        spacing: "spacious"
+      })
+    }];
+    var switcherDropdown = {
+      title: intl.formatMessage(_mediaUi.messages.fileDisplayOptions),
+      id: 'media-group-inline-switcher-toolbar-item',
+      testId: 'media-group-inline-switcher-dropdown',
+      type: 'dropdown',
+      options: _options,
+      icon: function icon() {
+        return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
+          label: "",
+          spacing: "spacious"
+        });
+      }
+    };
+    items.push(switcherDropdown, {
+      type: 'separator',
+      fullHeight: true
+    }, download, {
+      type: 'separator',
+      fullHeight: true,
+      supportsViewMode: true
+    }, preview, {
+      type: 'separator',
+      fullHeight: true
+    });
+  }
   return items;
 };
 var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState) {
@@ -204,7 +262,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       type: 'separator'
     });
   } else {
-    var _options = [{
+    var _options2 = [{
       id: 'editor.media.convert.mediainline',
       title: mediaInlineImageTitle,
       onClick: function onClick() {
@@ -235,7 +293,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       id: 'media-inline-to-block-toolbar-item',
       testId: 'media-inline-to-block-dropdown',
       type: 'dropdown',
-      options: _options,
+      options: _options2,
       title: intl.formatMessage(_mediaUi.messages.sizeOptions),
       icon: function icon() {
         return /*#__PURE__*/_react.default.createElement(_imageInline.default, {

package/dist/es2019/nodeviews/mediaGroup.js

@@ -10,6 +10,7 @@ import EditorCloseIcon from '@atlaskit/icon/glyph/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 { useMediaProvider } from '../ui/hooks/useMediaProvider';
 import { MediaGroupNext } from './mediaGroupNext';
@@ -167,7 +168,7 @@ class MediaGroup extends React.Component {
         items: items,
         mediaClientConfig: viewMediaClientConfig,
         featureFlags: mediaOptions.featureFlags,
-        shouldOpenMediaViewer: editorViewMode
+        shouldOpenMediaViewer: editorViewMode && editorExperiment('platform_editor_controls', 'control')
       });
     });
     this.mediaNodes = [];

package/dist/es2019/nodeviews/mediaGroupNext.js

@@ -6,6 +6,7 @@ import { isNodeSelectedOrInRange, SelectedState, setNodeSelection } from '@atlas
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { Filmstrip } from '@atlaskit/media-filmstrip';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { stateKey as mediaStateKey } from '../pm-plugins/plugin-key';
 import { createMediaNodeUpdater } from './mediaNodeUpdater';
 const getIdentifier = item => {
@@ -243,7 +244,7 @@ export const MediaGroupNext = injectIntl( /*#__PURE__*/React.memo(props => {
     items: items,
     mediaClientConfig: viewMediaClientConfig,
     featureFlags: featureFlags,
-    shouldOpenMediaViewer: editorViewMode
+    shouldOpenMediaViewer: editorViewMode && editorExperiment('platform_editor_controls', 'control')
   });
 }));
 MediaGroupNext.displayName = 'MediaGroup';

package/dist/es2019/nodeviews/mediaInline.js

@@ -13,6 +13,7 @@ import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { getMediaClient } from '@atlaskit/media-client-react';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { isImage } from '../pm-plugins/utils/is-type';
 import { MediaViewerContainer } from '../ui/MediaViewer/MediaViewerContainer';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
@@ -143,7 +144,8 @@ export const MediaInline = props => {
     mediaNode: props.node,
     mediaPluginState: props.mediaPluginState,
     isEditorViewMode: props.editorViewMode,
-    isSelected: props.isSelected
+    isSelected: props.isSelected,
+    isInline: fg('platform_editor_render_media_viewer_as_inline')
   }, jsx(MediaInlineCard, {
     isSelected: props.isSelected,
     identifier: identifier,

package/dist/es2019/ui/MediaViewer/MediaViewerContainer.js

@@ -6,6 +6,7 @@ import React, { Fragment, useEffect, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { isVideo } from '../../pm-plugins/utils/is-type';
 import { getSelectedNearestMediaContainerNodeAttrs } from '../../ui/toolbar/utils';
 import { RenderMediaViewer } from './PortalWrapper';
@@ -35,7 +36,7 @@ export const MediaViewerContainer = ({
     setShowMediaViewer(false);
   };
   const isVideoMedia = isVideo((_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.__fileMimeType);
-  const shouldShowViewer = isEditorViewMode && showViewer && selectedNodeAttrs && mediaClientConfig && !isVideoMedia;
+  const shouldShowViewer = isEditorViewMode && showViewer && selectedNodeAttrs && mediaClientConfig && !isVideoMedia && editorExperiment('platform_editor_controls', 'control');
   return jsx(Fragment, null, isEditorViewMode ? jsx(Fragment, null, isInline ?
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
   jsx("span", {