@atlaskit/editor-plugin-media 3.0.9 → 3.0.10

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

@@ -1,6 +1,5 @@
 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';
@@ -8,7 +7,6 @@ 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';
-import RemoveIcon from '@atlaskit/icon/core/migration/delete--editor-remove';
 import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
 import { messages } from '@atlaskit/media-ui';
@@ -24,7 +22,7 @@ import { changeInlineToMediaCard, changeMediaInlineToMediaSingle, removeInlineCa
 import { shouldShowImageBorder } from './imageBorder';
 import { getOpenLinkToolbarButtonOption, shouldShowMediaLinkToolbar } from './linking';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
-import { downloadMedia } from './utils';
+import { downloadMedia, getMediaSingleAndMediaInlineSwitcherDropdown } from './utils';
 import { handleShowMediaViewer } from './index';
 export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options = {}) => {
   var _pluginInjectionApi$a, _pluginInjectionApi$f, _pluginInjectionApi$f2;
@@ -45,8 +43,6 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
     testId: 'file-preview-toolbar-button',
     type: 'button',
     icon: editorExperiment('platform_editor_controls', 'variant1') ? GrowDiagonalIcon : MaximizeIcon,
-    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-    iconFallback: MaximizeIcon,
     title: intl.formatMessage(messages.preview),
     onClick: () => {
       var _handleShowMediaViewe;
@@ -77,7 +73,6 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
       id: 'editor.media.view.switcher.inline',
       type: 'button',
       icon: ImageInlineIcon,
-      iconFallback: IconInline,
       selected: true,
       disabled: false,
       focusEditoronEnter: true,
@@ -89,7 +84,6 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
       id: 'editor.media.view.switcher.thumbnail',
       type: 'button',
       icon: SmartLinkCardIcon,
-      iconFallback: IconCard,
       selected: false,
       disabled: false,
       focusEditoronEnter: true,
@@ -119,7 +113,6 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
       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),
@@ -241,9 +234,7 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
       icon: () => /*#__PURE__*/React.createElement(ImageInlineIcon, {
         color: "currentColor",
         spacing: "spacious",
-        label: mediaInlineImageTitle,
-        LEGACY_size: "medium",
-        LEGACY_fallbackIcon: IconInline
+        label: mediaInlineImageTitle
       }),
       onClick: () => {
         return true;
@@ -256,9 +247,7 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
       icon: () => /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
         color: "currentColor",
         spacing: "spacious",
-        label: mediaSingleTitle,
-        LEGACY_size: "medium",
-        LEGACY_fallbackIcon: IconEmbed
+        label: mediaSingleTitle
       }),
       onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState, options === null || options === void 0 ? void 0 : options.allowPixelResizing)
     }, {
@@ -324,9 +313,7 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
       icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
         color: "currentColor",
         spacing: "spacious",
-        label: fg('platform_editor_controls_patch_7') ? '' : mediaInlineImageTitle,
-        LEGACY_size: "medium",
-        LEGACY_fallbackIcon: IconInline
+        label: fg('platform_editor_controls_patch_7') ? '' : mediaInlineImageTitle
       })
     }, {
       id: 'editor.media.convert.mediasingle',
@@ -339,25 +326,26 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
       }) : /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
         color: "currentColor",
         spacing: "spacious",
-        label: fg('platform_editor_controls_patch_7') ? '' : mediaSingleTitle,
-        LEGACY_size: "medium",
-        LEGACY_fallbackIcon: IconEmbed
+        label: fg('platform_editor_controls_patch_7') ? '' : mediaSingleTitle
       })
     }];
-    const switchFromInlineToBlock = {
-      id: 'media-inline-to-block-toolbar-item',
-      testId: 'media-inline-to-block-dropdown',
-      type: 'dropdown',
-      options: options,
-      title: intl.formatMessage(messages.sizeOptions),
-      icon: () => /*#__PURE__*/React.createElement(ImageInlineIcon, {
-        color: "currentColor",
-        spacing: "spacious",
-        label: mediaInlineImageTitle,
-        LEGACY_size: "medium",
-        LEGACY_fallbackIcon: IconInline
-      })
-    };
+    let switchFromInlineToBlock;
+    if (fg('platform_editor_controls_patch_11')) {
+      switchFromInlineToBlock = getMediaSingleAndMediaInlineSwitcherDropdown('inline', intl, pluginInjectionApi);
+    } else {
+      switchFromInlineToBlock = {
+        id: 'media-inline-to-block-toolbar-item',
+        testId: 'media-inline-to-block-dropdown',
+        type: 'dropdown',
+        options: options,
+        title: intl.formatMessage(messages.sizeOptions),
+        icon: () => /*#__PURE__*/React.createElement(ImageInlineIcon, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: mediaInlineImageTitle
+        })
+      };
+    }
     inlineImageItems.push(switchFromInlineToBlock, {
       type: 'separator',
       fullHeight: true
@@ -377,7 +365,6 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
       testId: 'file-preview-toolbar-button',
       type: 'button',
       icon: isEditorControlsEnabled ? GrowDiagonalIcon : MaximizeIcon,
-      iconFallback: MaximizeIcon,
       title: intl.formatMessage(messages.preview),
       onClick: () => {
         var _handleShowMediaViewe2;
@@ -433,7 +420,6 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
       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),

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

@@ -1,10 +1,16 @@
+import React from 'react';
 import memoizeOne from 'memoize-one';
 import { wrappedLayouts } from '@atlaskit/editor-common/media-single';
+import { mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { nonWrappedLayouts } from '@atlaskit/editor-common/utils';
 import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
+import MaximizeIcon from '@atlaskit/icon/core/maximize';
 import { getMediaClient } from '@atlaskit/media-client-react';
+import { messages } from '@atlaskit/media-ui';
 import { isVideo } from '../../pm-plugins/utils/media-single';
+import { changeMediaInlineToMediaSingle, changeMediaSingleToMediaInline } from './commands';
 export const isExternalMedia = attrs => {
   return attrs.type === 'external';
 };
@@ -139,4 +145,60 @@ export const updateToFullHeightSeparator = items => {
       fullHeight: true
     });
   }
+};
+export const getMediaSingleAndMediaInlineSwitcherDropdown = (nodeType, intl, pluginInjectionApi, hasCaption = false) => {
+  var _pluginInjectionApi$a, _pluginInjectionApi$a2;
+  const mediaInlineImageTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
+  const mediaSingleTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
+  const inlineSwitcherTitle = intl.formatMessage(hasCaption ? mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
+  const InlineIcon = () => /*#__PURE__*/React.createElement(ImageInlineIcon, {
+    color: "currentColor",
+    spacing: "spacious",
+    label: ""
+  });
+  const BlockIcon = () => /*#__PURE__*/React.createElement(MaximizeIcon, {
+    color: "currentColor",
+    spacing: "spacious",
+    label: ""
+  });
+  const dropdownConfig = {
+    inline: {
+      handleInlineButtonClick: () => {
+        return true;
+      },
+      handleBlockButtonClick: changeMediaInlineToMediaSingle(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width.sharedState.currentState()),
+      id: 'media-inline-to-block-toolbar-item',
+      icon: InlineIcon
+    },
+    block: {
+      handleInlineButtonClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions),
+      handleBlockButtonClick: () => {
+        return true;
+      },
+      id: 'media-block-to-inline-toolbar-item',
+      icon: BlockIcon
+    }
+  };
+  const options = [{
+    id: 'editor.media.convert.mediainline',
+    title: mediaInlineImageTitle,
+    onClick: dropdownConfig[nodeType].handleInlineButtonClick,
+    selected: nodeType === 'inline',
+    icon: /*#__PURE__*/React.createElement(InlineIcon, null),
+    tooltip: hasCaption ? inlineSwitcherTitle : undefined
+  }, {
+    id: 'editor.media.convert.mediasingle',
+    title: mediaSingleTitle,
+    onClick: dropdownConfig[nodeType].handleBlockButtonClick,
+    selected: nodeType === 'block',
+    icon: /*#__PURE__*/React.createElement(BlockIcon, null)
+  }];
+  return {
+    id: dropdownConfig[nodeType].id,
+    testId: 'media-inline-to-block-dropdown',
+    title: intl.formatMessage(messages.sizeOptions),
+    type: 'dropdown',
+    options,
+    icon: dropdownConfig[nodeType].icon
+  };
 };

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

@@ -6,7 +6,6 @@ import { annotationMessages } from '@atlaskit/editor-common/messages';
 import CommentIcon from '@atlaskit/icon/core/comment';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { CommentWithDotIcon } from './assets/commentWithDotIcon';
 import { getSelectedMediaSingle } from './utils';
 export var commentButton = function commentButton(intl, state, api, onCommentButtonMount) {
   var _getSelectedMediaSing, _api$annotation, _api$connectivity;
@@ -39,7 +38,6 @@ export var commentButton = function commentButton(intl, state, api, onCommentBut
     type: 'button',
     testId: 'add-comment-media-button',
     icon: CommentIcon,
-    iconFallback: hasActiveComments ? CommentWithDotIcon : CommentIcon,
     title: editorExperiment('platform_editor_controls', 'control') ? title : buttonLabel,
     showTitle: editorExperiment('platform_editor_controls', 'control') ? undefined : true,
     onClick: onClickHandler,

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

@@ -5,7 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { alignmentIcons, buildLayoutButtons, buildLayoutDropdown, IconCard, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
+import { alignmentIcons, buildLayoutButtons, buildLayoutDropdown, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { mediaInlineImagesEnabled } from '@atlaskit/editor-common/media-inline';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
@@ -18,7 +18,6 @@ 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';
-import RemoveIcon from '@atlaskit/icon/core/migration/delete--editor-remove';
 import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
 import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
@@ -44,7 +43,7 @@ import { getLinkingDropdownOptions, getLinkingToolbar, getOpenLinkToolbarButtonO
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { generateMediaInlineFloatingToolbar } from './mediaInline';
 import { getPixelResizingToolbar, getResizeDropdownOption } from './pixel-resizing';
-import { canShowSwitchButtons, downloadMedia, getMaxToolbarWidth, getSelectedLayoutIcon, getSelectedMediaSingle, getSelectedNearestMediaContainerNodeAttrs, removeMediaGroupNode, updateToFullHeightSeparator } from './utils';
+import { canShowSwitchButtons, downloadMedia, getMaxToolbarWidth, getMediaSingleAndMediaInlineSwitcherDropdown, getSelectedLayoutIcon, getSelectedMediaSingle, getSelectedNearestMediaContainerNodeAttrs, removeMediaGroupNode, updateToFullHeightSeparator } from './utils';
 var mediaTypeMessages = {
   image: messages.file_image_is_selected,
   video: messages.file_video_is_selected,
@@ -121,7 +120,6 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     testId: 'file-preview-toolbar-button',
     type: 'button',
     icon: editorExperiment('platform_editor_controls', 'variant1') ? GrowDiagonalIcon : MaximizeIcon,
-    iconFallback: MaximizeIcon,
     title: intl.formatMessage(messages.preview),
     onClick: function onClick() {
       var _handleShowMediaViewe;
@@ -156,7 +154,6 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
       id: 'editor.media.view.switcher.inline',
       type: 'button',
       icon: ImageInlineIcon,
-      iconFallback: IconInline,
       selected: false,
       focusEditoronEnter: true,
       disabled: false,
@@ -168,7 +165,6 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
       id: 'editor.media.view.switcher.thumbnail',
       type: 'button',
       icon: SmartLinkCardIcon,
-      iconFallback: IconCard,
       selected: true,
       disabled: false,
       focusEditoronEnter: true,
@@ -200,7 +196,6 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
       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),
@@ -397,9 +392,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               return /*#__PURE__*/React.createElement(ImageInlineIcon, {
                 color: "currentColor",
                 spacing: "spacious",
-                label: inlineSwitcherTitle,
-                LEGACY_size: "medium",
-                LEGACY_fallbackIcon: IconInline
+                label: inlineSwitcherTitle
               });
             },
             onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
@@ -412,9 +405,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               return /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
                 color: "currentColor",
                 spacing: "spacious",
-                label: floatingSwitcherTitle,
-                LEGACY_size: "medium",
-                LEGACY_fallbackIcon: IconEmbed
+                label: floatingSwitcherTitle
               });
             },
             onClick: function onClick() {
@@ -435,9 +426,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
               color: "currentColor",
               spacing: "spacious",
-              label: fg('platform_editor_controls_patch_7') ? '' : inlineTitle,
-              LEGACY_size: "medium",
-              LEGACY_fallbackIcon: IconInline
+              label: fg('platform_editor_controls_patch_7') ? '' : inlineTitle
             }),
             tooltip: hasCaption ? inlineSwitcherTitle : undefined
           }, {
@@ -454,31 +443,32 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             }) : /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
               color: "currentColor",
               spacing: "spacious",
-              label: fg('platform_editor_controls_patch_7') ? '' : floatingSwitcherTitle,
-              LEGACY_size: "medium",
-              LEGACY_fallbackIcon: IconEmbed
+              label: fg('platform_editor_controls_patch_7') ? '' : floatingSwitcherTitle
             })
           }];
-          var switchFromBlockToInline = {
-            id: 'media-block-to-inline-toolbar-item',
-            testId: 'media-inline-to-block-dropdown',
-            type: 'dropdown',
-            options: _options2,
-            title: intl.formatMessage(messages.sizeOptions),
-            icon: function icon() {
-              return fg('platform_editor_controls_patch_7') ? /*#__PURE__*/React.createElement(MaximizeIcon, {
-                color: "currentColor",
-                spacing: "spacious",
-                label: intl.formatMessage(messages.sizeOptions)
-              }) : /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
-                color: "currentColor",
-                spacing: "spacious",
-                label: intl.formatMessage(messages.sizeOptions),
-                LEGACY_size: "medium",
-                LEGACY_fallbackIcon: IconEmbed
-              });
-            }
-          };
+          var switchFromBlockToInline;
+          if (fg('platform_editor_controls_patch_11')) {
+            switchFromBlockToInline = getMediaSingleAndMediaInlineSwitcherDropdown('block', intl, pluginInjectionApi, hasCaption);
+          } else {
+            switchFromBlockToInline = {
+              id: 'media-block-to-inline-toolbar-item',
+              testId: 'media-inline-to-block-dropdown',
+              type: 'dropdown',
+              options: _options2,
+              title: intl.formatMessage(messages.sizeOptions),
+              icon: function icon() {
+                return fg('platform_editor_controls_patch_7') ? /*#__PURE__*/React.createElement(MaximizeIcon, {
+                  color: "currentColor",
+                  spacing: "spacious",
+                  label: intl.formatMessage(messages.sizeOptions)
+                }) : /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
+                  color: "currentColor",
+                  spacing: "spacious",
+                  label: intl.formatMessage(messages.sizeOptions)
+                });
+              }
+            };
+          }
           toolbarButtons.push(switchFromBlockToInline, {
             type: 'separator',
             fullHeight: true
@@ -601,7 +591,6 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             testId: 'file-preview-toolbar-button',
             type: 'button',
             icon: editorExperiment('platform_editor_controls', 'variant1') ? GrowDiagonalIcon : MaximizeIcon,
-            iconFallback: MaximizeIcon,
             title: intl.formatMessage(messages.preview),
             onClick: function onClick() {
               var _handleShowMediaViewe2;
@@ -650,7 +639,6 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       appearance: 'danger',
       focusEditoronEnter: true,
       icon: DeleteIcon,
-      iconFallback: RemoveIcon,
       onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true),
       onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false),
       onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true),
@@ -688,7 +676,6 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           testId: 'file-preview-toolbar-button',
           type: 'button',
           icon: editorExperiment('platform_editor_controls', 'variant1') ? GrowDiagonalIcon : MaximizeIcon,
-          iconFallback: MaximizeIcon,
           title: intl.formatMessage(messages.preview),
           onClick: function onClick() {
             var _handleShowMediaViewe3;

package/dist/esm/ui/toolbar/linking-toolbar-appearance.js

@@ -13,7 +13,6 @@ import { linkMessages, linkToolbarMessages } from '@atlaskit/editor-common/messa
 import { FloatingToolbarSeparator as Separator, FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
 import LinkIcon from '@atlaskit/icon/core/migration/link';
-import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { currentMediaInlineNode, currentMediaNode } from '../../pm-plugins//utils/current-media-node';
 import { stateKey } from '../../pm-plugins/plugin-key';
 import { checkMediaType } from '../../pm-plugins/utils/check-media-type';
@@ -76,8 +75,7 @@ export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
       icon: jsx(LinkExternalIcon, {
         color: "currentColor",
         spacing: "spacious",
-        label: linkTitle,
-        LEGACY_fallbackIcon: OpenIcon
+        label: linkTitle
       })
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,

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

@@ -3,7 +3,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import 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';
@@ -11,7 +10,6 @@ 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';
-import RemoveIcon from '@atlaskit/icon/core/migration/delete--editor-remove';
 import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
 import { messages } from '@atlaskit/media-ui';
@@ -27,7 +25,7 @@ import { changeInlineToMediaCard, changeMediaInlineToMediaSingle, removeInlineCa
 import { shouldShowImageBorder } from './imageBorder';
 import { getOpenLinkToolbarButtonOption, shouldShowMediaLinkToolbar } from './linking';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
-import { downloadMedia } from './utils';
+import { downloadMedia, getMediaSingleAndMediaInlineSwitcherDropdown } from './utils';
 import { handleShowMediaViewer } from './index';
 export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi) {
   var _pluginInjectionApi$a, _pluginInjectionApi$f;
@@ -47,8 +45,6 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
     testId: 'file-preview-toolbar-button',
     type: 'button',
     icon: editorExperiment('platform_editor_controls', 'variant1') ? GrowDiagonalIcon : MaximizeIcon,
-    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-    iconFallback: MaximizeIcon,
     title: intl.formatMessage(messages.preview),
     onClick: function onClick() {
       var _handleShowMediaViewe;
@@ -77,7 +73,6 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
       id: 'editor.media.view.switcher.inline',
       type: 'button',
       icon: ImageInlineIcon,
-      iconFallback: IconInline,
       selected: true,
       disabled: false,
       focusEditoronEnter: true,
@@ -91,7 +86,6 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
       id: 'editor.media.view.switcher.thumbnail',
       type: 'button',
       icon: SmartLinkCardIcon,
-      iconFallback: IconCard,
       selected: false,
       disabled: false,
       focusEditoronEnter: true,
@@ -121,7 +115,6 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
       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),
@@ -243,9 +236,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
         return /*#__PURE__*/React.createElement(ImageInlineIcon, {
           color: "currentColor",
           spacing: "spacious",
-          label: mediaInlineImageTitle,
-          LEGACY_size: "medium",
-          LEGACY_fallbackIcon: IconInline
+          label: mediaInlineImageTitle
         });
       },
       onClick: function onClick() {
@@ -260,9 +251,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
         return /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
           color: "currentColor",
           spacing: "spacious",
-          label: mediaSingleTitle,
-          LEGACY_size: "medium",
-          LEGACY_fallbackIcon: IconEmbed
+          label: mediaSingleTitle
         });
       },
       onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState, options === null || options === void 0 ? void 0 : options.allowPixelResizing)
@@ -323,9 +312,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
         color: "currentColor",
         spacing: "spacious",
-        label: fg('platform_editor_controls_patch_7') ? '' : mediaInlineImageTitle,
-        LEGACY_size: "medium",
-        LEGACY_fallbackIcon: IconInline
+        label: fg('platform_editor_controls_patch_7') ? '' : mediaInlineImageTitle
       })
     }, {
       id: 'editor.media.convert.mediasingle',
@@ -338,27 +325,28 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       }) : /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
         color: "currentColor",
         spacing: "spacious",
-        label: fg('platform_editor_controls_patch_7') ? '' : mediaSingleTitle,
-        LEGACY_size: "medium",
-        LEGACY_fallbackIcon: IconEmbed
+        label: fg('platform_editor_controls_patch_7') ? '' : mediaSingleTitle
       })
     }];
-    var switchFromInlineToBlock = {
-      id: 'media-inline-to-block-toolbar-item',
-      testId: 'media-inline-to-block-dropdown',
-      type: 'dropdown',
-      options: _options2,
-      title: intl.formatMessage(messages.sizeOptions),
-      icon: function icon() {
-        return /*#__PURE__*/React.createElement(ImageInlineIcon, {
-          color: "currentColor",
-          spacing: "spacious",
-          label: mediaInlineImageTitle,
-          LEGACY_size: "medium",
-          LEGACY_fallbackIcon: IconInline
-        });
-      }
-    };
+    var switchFromInlineToBlock;
+    if (fg('platform_editor_controls_patch_11')) {
+      switchFromInlineToBlock = getMediaSingleAndMediaInlineSwitcherDropdown('inline', intl, pluginInjectionApi);
+    } else {
+      switchFromInlineToBlock = {
+        id: 'media-inline-to-block-toolbar-item',
+        testId: 'media-inline-to-block-dropdown',
+        type: 'dropdown',
+        options: _options2,
+        title: intl.formatMessage(messages.sizeOptions),
+        icon: function icon() {
+          return /*#__PURE__*/React.createElement(ImageInlineIcon, {
+            color: "currentColor",
+            spacing: "spacious",
+            label: mediaInlineImageTitle
+          });
+        }
+      };
+    }
     inlineImageItems.push(switchFromInlineToBlock, {
       type: 'separator',
       fullHeight: true
@@ -378,7 +366,6 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       testId: 'file-preview-toolbar-button',
       type: 'button',
       icon: isEditorControlsEnabled ? GrowDiagonalIcon : MaximizeIcon,
-      iconFallback: MaximizeIcon,
       title: intl.formatMessage(messages.preview),
       onClick: function onClick() {
         var _handleShowMediaViewe2;
@@ -434,7 +421,6 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       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),