@atlaskit/editor-plugin-media 3.0.8 → 3.0.10

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-media
 
+## 3.0.10
+
+### Patch Changes
+
+- [#161063](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/161063)
+  [`1a976ba4cbdc4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1a976ba4cbdc4) -
+  [ED-26871] Remove icon fallback for toolbar icons and create an utility function that returns size
+  option dropdown config for inline and block node types
+- Updated dependencies
+
+## 3.0.9
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.0.8
 
 ### Patch Changes

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

@@ -13,7 +13,6 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _commentWithDotIcon = require("./assets/commentWithDotIcon");
 var _utils = require("./utils");
 var commentButton = exports.commentButton = function commentButton(intl, state, api, onCommentButtonMount) {
   var _getSelectedMediaSing, _api$annotation, _api$connectivity;
@@ -46,7 +45,6 @@ var commentButton = exports.commentButton = function commentButton(intl, state,
     type: 'button',
     testId: 'add-comment-media-button',
     icon: _comment.default,
-    iconFallback: hasActiveComments ? _commentWithDotIcon.CommentWithDotIcon : _comment.default,
     title: (0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? title : buttonLabel,
     showTitle: (0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? undefined : true,
     onClick: onClickHandler,

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

@@ -24,7 +24,6 @@ var _growDiagonal = _interopRequireDefault(require("@atlaskit/icon/core/grow-dia
 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"));
-var _deleteEditorRemove = _interopRequireDefault(require("@atlaskit/icon/core/migration/delete--editor-remove"));
 var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
 var _smartLinkCard = _interopRequireDefault(require("@atlaskit/icon/core/smart-link-card"));
 var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
@@ -131,7 +130,6 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     testId: 'file-preview-toolbar-button',
     type: 'button',
     icon: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? _growDiagonal.default : _maximize.default,
-    iconFallback: _maximize.default,
     title: intl.formatMessage(_mediaUi.messages.preview),
     onClick: function onClick() {
       var _handleShowMediaViewe;
@@ -166,7 +164,6 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
       id: 'editor.media.view.switcher.inline',
       type: 'button',
       icon: _imageInline.default,
-      iconFallback: _card.IconInline,
       selected: false,
       focusEditoronEnter: true,
       disabled: false,
@@ -178,7 +175,6 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
       id: 'editor.media.view.switcher.thumbnail',
       type: 'button',
       icon: _smartLinkCard.default,
-      iconFallback: _card.IconCard,
       selected: true,
       disabled: false,
       focusEditoronEnter: true,
@@ -210,7 +206,6 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
       appearance: 'danger',
       focusEditoronEnter: true,
       icon: _delete.default,
-      iconFallback: _deleteEditorRemove.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),
@@ -407,9 +402,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
                 color: "currentColor",
                 spacing: "spacious",
-                label: inlineSwitcherTitle,
-                LEGACY_size: "medium",
-                LEGACY_fallbackIcon: _card.IconInline
+                label: inlineSwitcherTitle
               });
             },
             onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
@@ -422,9 +415,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
                 color: "currentColor",
                 spacing: "spacious",
-                label: floatingSwitcherTitle,
-                LEGACY_size: "medium",
-                LEGACY_fallbackIcon: _card.IconEmbed
+                label: floatingSwitcherTitle
               });
             },
             onClick: function onClick() {
@@ -445,9 +436,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             icon: /*#__PURE__*/_react.default.createElement(_imageInline.default, {
               color: "currentColor",
               spacing: "spacious",
-              label: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7') ? '' : inlineTitle,
-              LEGACY_size: "medium",
-              LEGACY_fallbackIcon: _card.IconInline
+              label: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7') ? '' : inlineTitle
             }),
             tooltip: hasCaption ? inlineSwitcherTitle : undefined
           }, {
@@ -464,31 +453,32 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             }) : /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
               color: "currentColor",
               spacing: "spacious",
-              label: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7') ? '' : floatingSwitcherTitle,
-              LEGACY_size: "medium",
-              LEGACY_fallbackIcon: _card.IconEmbed
+              label: (0, _platformFeatureFlags.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(_mediaUi.messages.sizeOptions),
-            icon: function icon() {
-              return (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7') ? /*#__PURE__*/_react.default.createElement(_maximize.default, {
-                color: "currentColor",
-                spacing: "spacious",
-                label: intl.formatMessage(_mediaUi.messages.sizeOptions)
-              }) : /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
-                color: "currentColor",
-                spacing: "spacious",
-                label: intl.formatMessage(_mediaUi.messages.sizeOptions),
-                LEGACY_size: "medium",
-                LEGACY_fallbackIcon: _card.IconEmbed
-              });
-            }
-          };
+          var switchFromBlockToInline;
+          if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_11')) {
+            switchFromBlockToInline = (0, _utils2.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(_mediaUi.messages.sizeOptions),
+              icon: function icon() {
+                return (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7') ? /*#__PURE__*/_react.default.createElement(_maximize.default, {
+                  color: "currentColor",
+                  spacing: "spacious",
+                  label: intl.formatMessage(_mediaUi.messages.sizeOptions)
+                }) : /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
+                  color: "currentColor",
+                  spacing: "spacious",
+                  label: intl.formatMessage(_mediaUi.messages.sizeOptions)
+                });
+              }
+            };
+          }
           toolbarButtons.push(switchFromBlockToInline, {
             type: 'separator',
             fullHeight: true
@@ -611,7 +601,6 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             testId: 'file-preview-toolbar-button',
             type: 'button',
             icon: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? _growDiagonal.default : _maximize.default,
-            iconFallback: _maximize.default,
             title: intl.formatMessage(_mediaUi.messages.preview),
             onClick: function onClick() {
               var _handleShowMediaViewe2;
@@ -660,7 +649,6 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       appearance: 'danger',
       focusEditoronEnter: true,
       icon: _delete.default,
-      iconFallback: _deleteEditorRemove.default,
       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),
@@ -698,7 +686,6 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           testId: 'file-preview-toolbar-button',
           type: 'button',
           icon: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? _growDiagonal.default : _maximize.default,
-          iconFallback: _maximize.default,
           title: intl.formatMessage(_mediaUi.messages.preview),
           onClick: function onClick() {
             var _handleShowMediaViewe3;

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

@@ -15,7 +15,6 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
-var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 var _currentMediaNode = require("../../pm-plugins//utils/current-media-node");
 var _pluginKey = require("../../pm-plugins/plugin-key");
 var _checkMediaType = require("../../pm-plugins/utils/check-media-type");
@@ -87,8 +86,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
       icon: (0, _react2.jsx)(_linkExternal.default, {
         color: "currentColor",
         spacing: "spacious",
-        label: linkTitle,
-        LEGACY_fallbackIcon: _shortcut.default
+        label: linkTitle
       })
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,

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

@@ -9,7 +9,6 @@ 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"));
@@ -17,7 +16,6 @@ var _growDiagonal = _interopRequireDefault(require("@atlaskit/icon/core/grow-dia
 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"));
-var _deleteEditorRemove = _interopRequireDefault(require("@atlaskit/icon/core/migration/delete--editor-remove"));
 var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
 var _smartLinkCard = _interopRequireDefault(require("@atlaskit/icon/core/smart-link-card"));
 var _mediaUi = require("@atlaskit/media-ui");
@@ -57,8 +55,6 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
     testId: 'file-preview-toolbar-button',
     type: 'button',
     icon: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? _growDiagonal.default : _maximize.default,
-    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
-    iconFallback: _maximize.default,
     title: intl.formatMessage(_mediaUi.messages.preview),
     onClick: function onClick() {
       var _handleShowMediaViewe;
@@ -87,7 +83,6 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
       id: 'editor.media.view.switcher.inline',
       type: 'button',
       icon: _imageInline.default,
-      iconFallback: _card.IconInline,
       selected: true,
       disabled: false,
       focusEditoronEnter: true,
@@ -101,7 +96,6 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
       id: 'editor.media.view.switcher.thumbnail',
       type: 'button',
       icon: _smartLinkCard.default,
-      iconFallback: _card.IconCard,
       selected: false,
       disabled: false,
       focusEditoronEnter: true,
@@ -131,7 +125,6 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
       appearance: 'danger',
       focusEditoronEnter: true,
       icon: _delete.default,
-      iconFallback: _deleteEditorRemove.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),
@@ -253,9 +246,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
         return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
           color: "currentColor",
           spacing: "spacious",
-          label: mediaInlineImageTitle,
-          LEGACY_size: "medium",
-          LEGACY_fallbackIcon: _card.IconInline
+          label: mediaInlineImageTitle
         });
       },
       onClick: function onClick() {
@@ -270,9 +261,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
         return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
           color: "currentColor",
           spacing: "spacious",
-          label: mediaSingleTitle,
-          LEGACY_size: "medium",
-          LEGACY_fallbackIcon: _card.IconEmbed
+          label: mediaSingleTitle
         });
       },
       onClick: (0, _commands.changeMediaInlineToMediaSingle)(editorAnalyticsAPI, widthPluginState, options === null || options === void 0 ? void 0 : options.allowPixelResizing)
@@ -333,9 +322,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       icon: /*#__PURE__*/_react.default.createElement(_imageInline.default, {
         color: "currentColor",
         spacing: "spacious",
-        label: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7') ? '' : mediaInlineImageTitle,
-        LEGACY_size: "medium",
-        LEGACY_fallbackIcon: _card.IconInline
+        label: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7') ? '' : mediaInlineImageTitle
       })
     }, {
       id: 'editor.media.convert.mediasingle',
@@ -348,27 +335,28 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       }) : /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
         color: "currentColor",
         spacing: "spacious",
-        label: (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_7') ? '' : mediaSingleTitle,
-        LEGACY_size: "medium",
-        LEGACY_fallbackIcon: _card.IconEmbed
+        label: (0, _platformFeatureFlags.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(_mediaUi.messages.sizeOptions),
-      icon: function icon() {
-        return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
-          color: "currentColor",
-          spacing: "spacious",
-          label: mediaInlineImageTitle,
-          LEGACY_size: "medium",
-          LEGACY_fallbackIcon: _card.IconInline
-        });
-      }
-    };
+    var switchFromInlineToBlock;
+    if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_11')) {
+      switchFromInlineToBlock = (0, _utils.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(_mediaUi.messages.sizeOptions),
+        icon: function icon() {
+          return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
+            color: "currentColor",
+            spacing: "spacious",
+            label: mediaInlineImageTitle
+          });
+        }
+      };
+    }
     inlineImageItems.push(switchFromInlineToBlock, {
       type: 'separator',
       fullHeight: true
@@ -388,7 +376,6 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       testId: 'file-preview-toolbar-button',
       type: 'button',
       icon: isEditorControlsEnabled ? _growDiagonal.default : _maximize.default,
-      iconFallback: _maximize.default,
       title: intl.formatMessage(_mediaUi.messages.preview),
       onClick: function onClick() {
         var _handleShowMediaViewe2;
@@ -444,7 +431,6 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       appearance: 'danger',
       focusEditoronEnter: true,
       icon: _delete.default,
-      iconFallback: _deleteEditorRemove.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),

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

@@ -4,16 +4,22 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateToFullHeightSeparator = exports.removeMediaGroupNode = exports.isExternalMedia = exports.getSelectedNearestMediaContainerNodeAttrsFunction = exports.getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedMediaSingle = exports.getSelectedLayoutIcon = exports.getPixelWidthOfElement = exports.getMaxToolbarWidth = exports.downloadMedia = exports.canShowSwitchButtons = exports.calcNewLayout = void 0;
+exports.updateToFullHeightSeparator = exports.removeMediaGroupNode = exports.isExternalMedia = exports.getSelectedNearestMediaContainerNodeAttrsFunction = exports.getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedMediaSingle = exports.getSelectedLayoutIcon = exports.getPixelWidthOfElement = exports.getMediaSingleAndMediaInlineSwitcherDropdown = exports.getMaxToolbarWidth = exports.downloadMedia = exports.canShowSwitchButtons = exports.calcNewLayout = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
+var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _imageInline = _interopRequireDefault(require("@atlaskit/icon/core/image-inline"));
+var _maximize = _interopRequireDefault(require("@atlaskit/icon/core/maximize"));
 var _mediaClientReact = require("@atlaskit/media-client-react");
+var _mediaUi = require("@atlaskit/media-ui");
 var _mediaSingle2 = require("../../pm-plugins/utils/media-single");
+var _commands = require("./commands");
 var isExternalMedia = exports.isExternalMedia = function isExternalMedia(attrs) {
   return attrs.type === 'external';
 };
@@ -166,4 +172,65 @@ var updateToFullHeightSeparator = exports.updateToFullHeightSeparator = function
       fullHeight: true
     });
   }
+};
+var getMediaSingleAndMediaInlineSwitcherDropdown = exports.getMediaSingleAndMediaInlineSwitcherDropdown = function getMediaSingleAndMediaInlineSwitcherDropdown(nodeType, intl, pluginInjectionApi) {
+  var _pluginInjectionApi$a, _pluginInjectionApi$a2;
+  var hasCaption = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var mediaInlineImageTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
+  var mediaSingleTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
+  var inlineSwitcherTitle = intl.formatMessage(hasCaption ? _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
+  var InlineIcon = function InlineIcon() {
+    return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    });
+  };
+  var BlockIcon = function BlockIcon() {
+    return /*#__PURE__*/_react.default.createElement(_maximize.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    });
+  };
+  var dropdownConfig = {
+    inline: {
+      handleInlineButtonClick: function handleInlineButtonClick() {
+        return true;
+      },
+      handleBlockButtonClick: (0, _commands.changeMediaInlineToMediaSingle)(pluginInjectionApi === null || pluginInjectionApi === 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: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions),
+      handleBlockButtonClick: function handleBlockButtonClick() {
+        return true;
+      },
+      id: 'media-block-to-inline-toolbar-item',
+      icon: BlockIcon
+    }
+  };
+  var options = [{
+    id: 'editor.media.convert.mediainline',
+    title: mediaInlineImageTitle,
+    onClick: dropdownConfig[nodeType].handleInlineButtonClick,
+    selected: nodeType === 'inline',
+    icon: /*#__PURE__*/_react.default.createElement(InlineIcon, null),
+    tooltip: hasCaption ? inlineSwitcherTitle : undefined
+  }, {
+    id: 'editor.media.convert.mediasingle',
+    title: mediaSingleTitle,
+    onClick: dropdownConfig[nodeType].handleBlockButtonClick,
+    selected: nodeType === 'block',
+    icon: /*#__PURE__*/_react.default.createElement(BlockIcon, null)
+  }];
+  return {
+    id: dropdownConfig[nodeType].id,
+    testId: 'media-inline-to-block-dropdown',
+    title: intl.formatMessage(_mediaUi.messages.sizeOptions),
+    type: 'dropdown',
+    options: options,
+    icon: dropdownConfig[nodeType].icon
+  };
 };

package/dist/es2019/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 const commentButton = (intl, state, api, onCommentButtonMount) => {
   var _getSelectedMediaSing, _api$annotation, _api$annotation$share, _api$connectivity, _api$connectivity$sha, _api$connectivity$sha2;
@@ -38,7 +37,6 @@ export const commentButton = (intl, state, api, onCommentButtonMount) => {
     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/es2019/ui/toolbar/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 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';
@@ -14,7 +14,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';
@@ -40,7 +39,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';
 const mediaTypeMessages = {
   image: messages.file_image_is_selected,
   video: messages.file_video_is_selected,
@@ -118,7 +117,6 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
     testId: 'file-preview-toolbar-button',
     type: 'button',
     icon: editorExperiment('platform_editor_controls', 'variant1') ? GrowDiagonalIcon : MaximizeIcon,
-    iconFallback: MaximizeIcon,
     title: intl.formatMessage(messages.preview),
     onClick: () => {
       var _handleShowMediaViewe;
@@ -156,7 +154,6 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
       id: 'editor.media.view.switcher.inline',
       type: 'button',
       icon: ImageInlineIcon,
-      iconFallback: IconInline,
       selected: false,
       focusEditoronEnter: true,
       disabled: false,
@@ -168,7 +165,6 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
       id: 'editor.media.view.switcher.thumbnail',
       type: 'button',
       icon: SmartLinkCardIcon,
-      iconFallback: IconCard,
       selected: true,
       disabled: false,
       focusEditoronEnter: true,
@@ -198,7 +194,6 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
       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 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             icon: () => /*#__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 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
             testId: 'image-inline-appearance'
@@ -410,9 +403,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             icon: () => /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
               color: "currentColor",
               spacing: "spacious",
-              label: floatingSwitcherTitle,
-              LEGACY_size: "medium",
-              LEGACY_fallbackIcon: IconEmbed
+              label: floatingSwitcherTitle
             }),
             onClick: () => {
               return true;
@@ -432,9 +423,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             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
           }, {
@@ -451,29 +440,30 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             }) : /*#__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
             })
           }];
-          const switchFromBlockToInline = {
-            id: 'media-block-to-inline-toolbar-item',
-            testId: 'media-inline-to-block-dropdown',
-            type: 'dropdown',
-            options: options,
-            title: intl.formatMessage(messages.sizeOptions),
-            icon: () => 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
-            })
-          };
+          let 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: options,
+              title: intl.formatMessage(messages.sizeOptions),
+              icon: () => 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
@@ -606,7 +596,6 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             testId: 'file-preview-toolbar-button',
             type: 'button',
             icon: editorExperiment('platform_editor_controls', 'variant1') ? GrowDiagonalIcon : MaximizeIcon,
-            iconFallback: MaximizeIcon,
             title: intl.formatMessage(messages.preview),
             onClick: () => {
               var _handleShowMediaViewe2;
@@ -655,7 +644,6 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
       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),
@@ -693,7 +681,6 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
           testId: 'file-preview-toolbar-button',
           type: 'button',
           icon: editorExperiment('platform_editor_controls', 'variant1') ? GrowDiagonalIcon : MaximizeIcon,
-          iconFallback: MaximizeIcon,
           title: intl.formatMessage(messages.preview),
           onClick: () => {
             var _handleShowMediaViewe3;

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

@@ -12,7 +12,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';
@@ -73,8 +72,7 @@ export const LinkToolbarAppearance = ({
       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
       ,