@atlaskit/editor-plugin-media 2.3.10 → 2.3.12

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

@@ -11,7 +11,6 @@ import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert as pmSafeInsert, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { copyOptionalAttrsFromMediaState, isInsidePotentialEmptyParagraph } from '../utils/media-common';
 import { findChangeFromLocation, getChangeMediaAnalytics } from './analytics';
 import { isImage } from './is-type';
@@ -100,7 +99,7 @@ export var insertMediaAsMediaSingle = function insertMediaAsMediaSingle(view, no
     return false;
   }
   var resizeExperience = fg('platform_editor_media_extended_resize_experience');
-  var insertMediaPopup = editorExperiment('add-media-from-url', true);
+  var insertMediaPopup = fg('platform_editor_add_media_from_url_rollout');
   var mediaSingleAttrs = resizeExperience && insertMediaPopup ? {
     widthType: 'pixel',
     width: getMediaSingleInitialWidth((_node$attrs$width = node.attrs.width) !== null && _node$attrs$width !== void 0 ? _node$attrs$width : DEFAULT_IMAGE_WIDTH),

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

@@ -75,7 +75,7 @@ export var CommentBadge = injectIntl(CommentBadgeWrapper);
 /**
  * Remove CommentBadgeWrapper component above
  * and rename CommentBadgeNextWrapper to CommentBadgeWrapper
- * when clean up platform_editor_add_media_from_url feature flag
+ * when clean up platform_editor_add_media_from_url_rollout feature flag
  */
 
 export var CommentBadgeNextWrapper = function CommentBadgeNextWrapper(_ref2) {
@@ -83,8 +83,7 @@ export var CommentBadgeNextWrapper = function CommentBadgeNextWrapper(_ref2) {
     mediaNode = _ref2.mediaNode,
     view = _ref2.view,
     getPos = _ref2.getPos,
-    isDrafting = _ref2.isDrafting,
-    badgeSize = _ref2.badgeSize;
+    isDrafting = _ref2.isDrafting;
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     entered = _useState4[0],
@@ -130,7 +129,6 @@ export var CommentBadgeNextWrapper = function CommentBadgeNextWrapper(_ref2) {
     },
     onMouseLeave: function onMouseLeave() {
       return setEntered(false);
-    },
-    badgeSize: badgeSize
+    }
   });
 };

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

@@ -7,6 +7,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';
@@ -41,7 +42,7 @@ export var MediaViewerContainer = function MediaViewerContainer(_ref) {
     setShowMediaViewer(false);
   };
   var isVideoMedia = 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 && 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", {

package/dist/esm/ui/MediaViewer/PortalWrapper.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { MediaViewer } from '@atlaskit/media-viewer';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { isExternalMedia } from '../../ui/toolbar/utils';
 var getIdentifier = function getIdentifier(attrs) {
   if (isExternalMedia(attrs)) {
@@ -26,7 +26,7 @@ export var RenderMediaViewer = function RenderMediaViewer(_ref) {
     selectedNodeAttrs = _ref.selectedNodeAttrs,
     _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items;
-  if (editorExperiment('add-media-from-url', true)) {
+  if (fg('platform_editor_add_media_from_url_rollout')) {
     var _identifier = getIdentifier(selectedNodeAttrs);
     var collectionName = isExternalMedia(selectedNodeAttrs) ? '' : selectedNodeAttrs.collection;
     return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(MediaViewer, {

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

@@ -1,6 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _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 React from 'react';
@@ -81,41 +81,10 @@ export var handleShowMediaViewer = function handleShowMediaViewer(_ref) {
 };
 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: ImageInlineIcon,
-    iconFallback: IconInline,
-    selected: false,
-    focusEditoronEnter: true,
-    disabled: false,
-    onClick: changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector),
-    title: intl.formatMessage(cardMessages.inlineTitle),
-    testId: 'inline-appearance',
-    className: 'inline-appearance' // a11y. uses to force focus on item
-  }, {
-    id: 'editor.media.view.switcher.thumbnail',
-    type: 'button',
-    icon: SmartLinkCardIcon,
-    iconFallback: IconCard,
-    selected: true,
-    disabled: false,
-    focusEditoronEnter: true,
-    onClick: function onClick() {
-      return true;
-    },
-    title: intl.formatMessage(cardMessages.blockTitle),
-    testId: 'thumbnail-appearance',
-    className: 'thumbnail-appearance' // a11y. uses to force focus on item
-  }, {
-    type: 'separator'
-  }, {
+  var isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
+  var preview = {
     id: 'editor.media.viewer',
     testId: 'file-preview-toolbar-button',
     type: 'button',
@@ -131,9 +100,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: DownloadIcon,
@@ -143,33 +111,118 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     },
     title: intl.formatMessage(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: DeleteIcon,
-    iconFallback: RemoveIcon,
-    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(commonMessages.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: ImageInlineIcon,
+      iconFallback: IconInline,
+      selected: false,
+      focusEditoronEnter: true,
+      disabled: false,
+      onClick: changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector),
+      title: intl.formatMessage(cardMessages.inlineTitle),
+      testId: 'inline-appearance',
+      className: 'inline-appearance' // a11y. uses to force focus on item
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      type: 'button',
+      icon: SmartLinkCardIcon,
+      iconFallback: IconCard,
+      selected: true,
+      disabled: false,
+      focusEditoronEnter: true,
+      onClick: function onClick() {
+        return true;
+      },
+      title: intl.formatMessage(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: DeleteIcon,
+      iconFallback: RemoveIcon,
+      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(commonMessages.remove),
+      onClick: handleRemoveMediaGroup,
+      testId: 'media-toolbar-remove-button'
+    });
+  } else {
+    var options = [{
+      id: 'editor.media.view.switcher.inline',
+      title: intl.formatMessage(cardMessages.inlineTitle),
+      onClick: changeMediaCardToInline(editorAnalyticsAPI, forceFocusSelector),
+      icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
+        label: "",
+        spacing: "spacious"
+      })
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      title: intl.formatMessage(cardMessages.blockTitle),
+      selected: true,
+      onClick: function onClick() {
+        return true;
+      },
+      icon: /*#__PURE__*/React.createElement(SmartLinkCardIcon, {
+        label: "",
+        spacing: "spacious"
+      })
+    }];
+    var switcherDropdown = {
+      title: intl.formatMessage(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.createElement(SmartLinkCardIcon, {
+          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/esm/ui/toolbar/mediaInline.js

@@ -1,9 +1,13 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _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 React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { IconCard, IconEmbed, IconInline } from '@atlaskit/editor-common/card';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import DeleteIcon from '@atlaskit/icon/core/delete';
+import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
 import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
 import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
 import MaximizeIcon from '@atlaskit/icon/core/maximize';
@@ -36,39 +40,13 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
   if (mediaPluginState.allowInlineImages && isImage(mediaType)) {
     return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState, options);
   }
-  var items = [{
-    id: 'editor.media.view.switcher.inline',
-    type: 'button',
-    icon: ImageInlineIcon,
-    iconFallback: IconInline,
-    selected: true,
-    disabled: false,
-    focusEditoronEnter: true,
-    onClick: function onClick() {
-      return true;
-    },
-    title: intl.formatMessage(cardMessages.inlineTitle),
-    testId: 'inline-appearance',
-    className: 'inline-appearance' // a11y. uses to force focus on item
-  }, {
-    id: 'editor.media.view.switcher.thumbnail',
-    type: 'button',
-    icon: SmartLinkCardIcon,
-    iconFallback: IconCard,
-    selected: false,
-    disabled: false,
-    focusEditoronEnter: true,
-    onClick: changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector),
-    title: intl.formatMessage(cardMessages.blockTitle),
-    testId: 'thumbnail-appearance',
-    className: 'thumbnail-appearance' // a11y. uses to force focus on item
-  }, {
-    type: 'separator'
-  }, {
+  var items = [];
+  var isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
+  var preview = _objectSpread({
     id: 'editor.media.viewer',
     testId: 'file-preview-toolbar-button',
     type: 'button',
-    icon: MaximizeIcon,
+    icon: editorExperiment('platform_editor_controls', 'variant1') ? GrowDiagonalIcon : MaximizeIcon,
     iconFallback: FilePreviewIcon,
     title: intl.formatMessage(messages.preview),
     onClick: function onClick() {
@@ -78,10 +56,10 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
         api: pluginInjectionApi
       })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
     }
-  }, {
-    type: 'separator',
-    fullHeight: editorExperiment('platform_editor_controls', 'variant1')
-  }, {
+  }, isEditorControlsEnabled && {
+    supportsViewMode: true
+  });
+  var download = _objectSpread({
     id: 'editor.media.card.download',
     type: 'button',
     icon: DownloadIcon,
@@ -90,33 +68,113 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
       return true;
     },
     title: intl.formatMessage(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: DeleteIcon,
-    iconFallback: RemoveIcon,
-    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(commonMessages.remove),
-    onClick: removeInlineCard,
-    testId: 'media-toolbar-remove-button'
-  }];
+  }, isEditorControlsEnabled && {
+    supportsViewMode: true
+  });
+  if (!isEditorControlsEnabled) {
+    items.push({
+      id: 'editor.media.view.switcher.inline',
+      type: 'button',
+      icon: ImageInlineIcon,
+      iconFallback: IconInline,
+      selected: true,
+      disabled: false,
+      focusEditoronEnter: true,
+      onClick: function onClick() {
+        return true;
+      },
+      title: intl.formatMessage(cardMessages.inlineTitle),
+      testId: 'inline-appearance',
+      className: 'inline-appearance' // a11y. uses to force focus on item
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      type: 'button',
+      icon: SmartLinkCardIcon,
+      iconFallback: IconCard,
+      selected: false,
+      disabled: false,
+      focusEditoronEnter: true,
+      onClick: changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector),
+      title: intl.formatMessage(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: DeleteIcon,
+      iconFallback: RemoveIcon,
+      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(commonMessages.remove),
+      onClick: removeInlineCard,
+      testId: 'media-toolbar-remove-button'
+    });
+  } else {
+    var _options = [{
+      id: 'editor.media.view.switcher.inline',
+      title: intl.formatMessage(cardMessages.inlineTitle),
+      onClick: function onClick() {
+        return true;
+      },
+      selected: true,
+      icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
+        label: "",
+        spacing: "spacious"
+      })
+    }, {
+      id: 'editor.media.view.switcher.thumbnail',
+      title: intl.formatMessage(cardMessages.blockTitle),
+      onClick: changeInlineToMediaCard(editorAnalyticsAPI, forceFocusSelector),
+      icon: /*#__PURE__*/React.createElement(SmartLinkCardIcon, {
+        label: "",
+        spacing: "spacious"
+      })
+    }];
+    var switcherDropdown = {
+      title: intl.formatMessage(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.createElement(ImageInlineIcon, {
+          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) {
@@ -194,7 +252,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       type: 'separator'
     });
   } else {
-    var _options = [{
+    var _options2 = [{
       id: 'editor.media.convert.mediainline',
       title: mediaInlineImageTitle,
       onClick: function onClick() {
@@ -225,7 +283,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(messages.sizeOptions),
       icon: function icon() {
         return /*#__PURE__*/React.createElement(ImageInlineIcon, {

package/dist/types/pm-plugins/pixel-resizing/reducer.d.ts

@@ -1,4 +1,4 @@
-type mediaPixelResizingState = {
+type MediaPixelResizingState = {
     isPixelEditorOpen: boolean;
 };
 type OpenPixelEditor = {
@@ -8,5 +8,5 @@ type ClosePixelEditor = {
     type: 'closePixelEditor';
 };
 type MediaPixelResizingAction = OpenPixelEditor | ClosePixelEditor;
-declare const _default: (state: mediaPixelResizingState, action: MediaPixelResizingAction) => mediaPixelResizingState;
+declare const _default: (state: MediaPixelResizingState, action: MediaPixelResizingAction) => MediaPixelResizingState;
 export default _default;

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

@@ -21,7 +21,7 @@ export declare const CommentBadge: React.FC<import("react-intl-next").WithIntlPr
 /**
  * Remove CommentBadgeWrapper component above
  * and rename CommentBadgeNextWrapper to CommentBadgeWrapper
- * when clean up platform_editor_add_media_from_url feature flag
+ * when clean up platform_editor_add_media_from_url_rollout feature flag
  */
 type CommentBadgeNextWrapperProps = {
     mediaSingleElement?: HTMLElement | null;
@@ -31,7 +31,6 @@ type CommentBadgeNextWrapperProps = {
     mediaNode: PMNode | null;
     view: EditorView;
     getPos: getPosHandler;
-    badgeSize: 'small' | 'medium';
 };
-export declare const CommentBadgeNextWrapper: ({ api, mediaNode, view, getPos, isDrafting, badgeSize, }: CommentBadgeNextWrapperProps) => React.JSX.Element | null;
+export declare const CommentBadgeNextWrapper: ({ api, mediaNode, view, getPos, isDrafting, }: CommentBadgeNextWrapperProps) => React.JSX.Element | null;
 export {};

package/dist/types-ts4.5/pm-plugins/pixel-resizing/reducer.d.ts

@@ -1,4 +1,4 @@
-type mediaPixelResizingState = {
+type MediaPixelResizingState = {
     isPixelEditorOpen: boolean;
 };
 type OpenPixelEditor = {
@@ -8,5 +8,5 @@ type ClosePixelEditor = {
     type: 'closePixelEditor';
 };
 type MediaPixelResizingAction = OpenPixelEditor | ClosePixelEditor;
-declare const _default: (state: mediaPixelResizingState, action: MediaPixelResizingAction) => mediaPixelResizingState;
+declare const _default: (state: MediaPixelResizingState, action: MediaPixelResizingAction) => MediaPixelResizingState;
 export default _default;

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

@@ -21,7 +21,7 @@ export declare const CommentBadge: React.FC<import("react-intl-next").WithIntlPr
 /**
  * Remove CommentBadgeWrapper component above
  * and rename CommentBadgeNextWrapper to CommentBadgeWrapper
- * when clean up platform_editor_add_media_from_url feature flag
+ * when clean up platform_editor_add_media_from_url_rollout feature flag
  */
 type CommentBadgeNextWrapperProps = {
     mediaSingleElement?: HTMLElement | null;
@@ -31,7 +31,6 @@ type CommentBadgeNextWrapperProps = {
     mediaNode: PMNode | null;
     view: EditorView;
     getPos: getPosHandler;
-    badgeSize: 'small' | 'medium';
 };
-export declare const CommentBadgeNextWrapper: ({ api, mediaNode, view, getPos, isDrafting, badgeSize, }: CommentBadgeNextWrapperProps) => React.JSX.Element | null;
+export declare const CommentBadgeNextWrapper: ({ api, mediaNode, view, getPos, isDrafting, }: CommentBadgeNextWrapperProps) => React.JSX.Element | null;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "2.3.10",
+	"version": "2.3.12",
 	"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": "^21.1.0",
-		"@atlaskit/editor-common": "^102.12.0",
+		"@atlaskit/editor-common": "^102.13.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-annotation": "^2.1.0",
@@ -63,13 +63,13 @@
 		"@atlaskit/media-common": "^12.0.0",
 		"@atlaskit/media-filmstrip": "^49.0.0",
 		"@atlaskit/media-picker": "^68.0.0",
-		"@atlaskit/media-ui": "^28.0.0",
+		"@atlaskit/media-ui": "^28.1.0",
 		"@atlaskit/media-viewer": "^52.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.1.0",
+		"@atlaskit/tmp-editor-statsig": "^4.3.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -150,9 +150,6 @@
 		"confluence_frontend_media_scroll_fix": {
 			"type": "boolean"
 		},
-		"platform_editor_hide_external_media_badge": {
-			"type": "boolean"
-		},
 		"platform_editor_media_block_default": {
 			"type": "boolean"
 		},
@@ -164,6 +161,12 @@
 		},
 		"platform_editor_safari_media_clipboard_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_add_media_from_url_rollout": {
+			"type": "boolean"
+		},
+		"platform_editor_render_media_viewer_as_inline": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {