@atlaskit/editor-plugin-media 2.3.14 → 2.3.16

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-media
 
+## 2.3.16
+
+### Patch Changes
+
+- [#131525](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/131525)
+  [`cb8403ffb5a8b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cb8403ffb5a8b) -
+  ENGHEALTH-23697 Iconography update for editor-plugin-media
+- Updated dependencies
+
+## 2.3.15
+
+### Patch Changes
+
+- [#131280](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/131280)
+  [`9ff92ea2432f2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9ff92ea2432f2) -
+  [ED-27082] Fix media overflow toolbar to show correct options + update separators between button
+  groups
+- Updated dependencies
+
 ## 2.3.14
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaGroup.js

@@ -20,7 +20,7 @@ var _media = require("@atlaskit/editor-common/media");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _utils = require("@atlaskit/editor-common/utils");
-var _close = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/close"));
+var _closeEditorClose = _interopRequireDefault(require("@atlaskit/icon/core/migration/close--editor-close"));
 var _mediaCommon = require("@atlaskit/media-common");
 var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -162,7 +162,7 @@ var MediaGroup = /*#__PURE__*/function (_React$Component) {
               shouldEnableDownloadButton: mediaOptions.enableDownloadButton,
               actions: [{
                 handler: disabled || !_this.mediaPluginState ? function () {} : _this.mediaPluginState.handleMediaNodeRemoval.bind(null, undefined, getNodePos),
-                icon: /*#__PURE__*/_react.default.createElement(_close.default, {
+                icon: /*#__PURE__*/_react.default.createElement(_closeEditorClose.default, {
                   label: _this.props.intl.formatMessage(_media.nodeViewsMessages.mediaGroupDeleteLabel)
                 })
               }]

package/dist/cjs/nodeviews/mediaGroupNext.js

@@ -15,7 +15,7 @@ var _reactIntlNext = require("react-intl-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _media = require("@atlaskit/editor-common/media");
 var _utils = require("@atlaskit/editor-common/utils");
-var _close = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/close"));
+var _closeEditorClose = _interopRequireDefault(require("@atlaskit/icon/core/migration/close--editor-close"));
 var _mediaCommon = require("@atlaskit/media-common");
 var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -82,7 +82,7 @@ var prepareFilmstripItem = function prepareFilmstripItem(_ref) {
           shouldEnableDownloadButton: enableDownloadButton,
           actions: [{
             handler: handleMediaNodeRemoval.bind(null, undefined, getNodePos),
-            icon: /*#__PURE__*/_react.default.createElement(_close.default, {
+            icon: /*#__PURE__*/_react.default.createElement(_closeEditorClose.default, {
               label: intl.formatMessage(_media.nodeViewsMessages.mediaGroupDeleteLabel)
             })
           }]

package/dist/cjs/nodeviews/mediaInline.js

@@ -205,7 +205,8 @@ var MediaInline = exports.MediaInline = function MediaInline(props) {
       border: {
         borderSize: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
         borderColor: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color
-      }
+      },
+      isViewOnly: props.editorViewMode
     });
   }
   return (0, _react2.jsx)(_MediaViewerContainer.MediaViewerContainer, {

package/dist/cjs/nodeviews/mediaNodeView/index.js

@@ -70,6 +70,7 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
     });
     (0, _defineProperty2.default)(_this, "renderMediaNodeWithState", function (contextIdentifierProvider) {
       return function (_ref2) {
+        var _this$reactComponentP;
         var editorWidth = _ref2.width,
           mediaProvider = _ref2.mediaProvider;
         var getPos = _this.getPos;
@@ -110,7 +111,8 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           mediaProvider: mediaProvider,
           contextIdentifierProvider: contextIdentifierProvider,
           mediaOptions: mediaOptions,
-          onExternalImageLoaded: _this.onExternalImageLoaded
+          onExternalImageLoaded: _this.onExternalImageLoaded,
+          isViewOnly: ((_this$reactComponentP = _this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.sharedState.currentState()) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.mode) === 'view'
         });
       };
     });

package/dist/cjs/nodeviews/mediaNodeView/media.js

@@ -21,6 +21,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _utils = require("@atlaskit/editor-common/utils");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _mediaCard = require("@atlaskit/media-card");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _pluginKey = require("../../pm-plugins/plugin-key");
 var _styles = require("../styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -63,6 +64,13 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)(_this, "selectMediaSingleFromCard", function (_ref2) {
       var event = _ref2.event;
       _this.selectMediaSingle(event);
+
+      // In edit mode (node content wrapper has contenteditable set to true), link redirection is disabled by default
+      // We need to call "stopPropagation" here in order to prevent in editor view mode, the browser from navigating to
+      // another URL if the media node is wrapped in a link mark.
+      if (_this.props.isViewOnly && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+        event.preventDefault();
+      }
     });
     (0, _defineProperty2.default)(_this, "selectMediaSingle", function (event) {
       var propPos = _this.props.getPos();
@@ -70,9 +78,13 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
         return;
       }
 
+      // NOTE: This does not prevent the link navigation in the editor view mode, .preventDefault is needed (see selectMediaSingleFromCard)
+      // Hence it should be removed
       // We need to call "stopPropagation" here in order to prevent the browser from navigating to
       // another URL if the media node is wrapped in a link mark.
-      event.stopPropagation();
+      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+        event.stopPropagation();
+      }
       var state = _this.props.view.state;
       if (event.shiftKey) {
         // don't select text if there is current selection in a table (as this would override selected cells)

package/dist/cjs/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -20,8 +20,8 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _media = require("@atlaskit/editor-common/media");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
-var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
+var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle"));
+var _chevronLeftChevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-left--chevron-left-large"));
 var _colors = require("@atlaskit/theme/colors");
 var _commands = require("../commands");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -196,7 +196,7 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
         css: buttonWrapperStyles
       }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
         title: formatMessage(_media.altTextMessages.back),
-        icon: (0, _react2.jsx)(_chevronLeftLarge.default, {
+        icon: (0, _react2.jsx)(_chevronLeftChevronLeftLarge.default, {
           label: formatMessage(_media.altTextMessages.back)
         }),
         tooltipContent: backButtonMessageComponent,

package/dist/cjs/ui/Media/DropPlaceholder.js

@@ -9,7 +9,7 @@ var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _media = require("@atlaskit/editor-common/media");
-var _documentFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/document-filled"));
+var _fileDocumentFilled = _interopRequireDefault(require("@atlaskit/icon/core/migration/file--document-filled"));
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _media2 = require("../../nodeviews/mediaNodeView/media");
@@ -48,9 +48,9 @@ var IconWrapperComponent = function IconWrapperComponent(props) {
   var dropPlaceholderLabel = _media.dropPlaceholderMessages.dropPlaceholderLabel;
   return (0, _react.jsx)("div", {
     css: iconWrapperStyles
-  }, (0, _react.jsx)(_documentFilled.default, {
+  }, (0, _react.jsx)(_fileDocumentFilled.default, {
     label: intl.formatMessage(dropPlaceholderLabel),
-    size: "medium"
+    LEGACY_size: "medium"
   }));
 };
 var IntlIconWrapper = (0, _reactIntlNext.injectIntl)(IconWrapperComponent);

package/dist/cjs/ui/MediaLinkingToolbar.js

@@ -20,8 +20,8 @@ var _media = require("@atlaskit/editor-common/media");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
-var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
-var _unlink = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/unlink"));
+var _linkBrokenEditorUnlink = _interopRequireDefault(require("@atlaskit/icon/core/migration/link-broken--editor-unlink"));
+var _chevronLeftChevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-left--chevron-left-large"));
 var _colors = require("@atlaskit/theme/colors");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -124,7 +124,7 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
           css: buttonWrapper
         }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
           title: formatLinkAddressText,
-          icon: (0, _react2.jsx)(_chevronLeftLarge.default, {
+          icon: (0, _react2.jsx)(_chevronLeftChevronLeftLarge.default, {
             label: formatLinkAddressText
           }),
           onClick: function onClick() {
@@ -161,7 +161,7 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
           htmlFor: "media-link-search-input"
         }, formatMessage(_messages.linkToolbarMessages.searchInput)), (0, _utils.normalizeUrl)(displayUrl) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
           title: formatUnlinkText,
-          icon: (0, _react2.jsx)(_unlink.default, {
+          icon: (0, _react2.jsx)(_linkBrokenEditorUnlink.default, {
             label: formatUnlinkText
           }),
           onClick: _this.handleUnlink

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

@@ -10,7 +10,7 @@ var _reactIntlNext = require("react-intl-next");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _media = require("@atlaskit/editor-common/media");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
-var _attachment = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/attachment"));
+var _attachmentEditorAttachment = _interopRequireDefault(require("@atlaskit/icon/core/migration/attachment--editor-attachment"));
 var onClickMediaButton = function onClickMediaButton(pluginState) {
   return function () {
     pluginState.showMediaPicker();
@@ -34,7 +34,7 @@ var ToolbarMedia = function ToolbarMedia(_ref) {
     disabled: isDisabled,
     title: intl.formatMessage(toolbarMediaTitle),
     spacing: isReducedSpacing ? 'none' : 'default',
-    iconBefore: /*#__PURE__*/_react.default.createElement(_attachment.default, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_attachmentEditorAttachment.default, {
       label: intl.formatMessage(toolbarMediaTitle)
     })
   });

package/dist/cjs/ui/toolbar/alt-text.js

@@ -4,15 +4,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getAltTextToolbar = exports.altTextButton = void 0;
+exports.getAltTextToolbar = exports.getAltTextDropdownOption = exports.altTextButton = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _media = require("@atlaskit/editor-common/media");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _text = _interopRequireDefault(require("@atlaskit/icon/core/text"));
 var _commands = require("../../pm-plugins/alt-text/commands");
 var _AltTextEdit = _interopRequireDefault(require("../../pm-plugins/alt-text/ui/AltTextEdit"));
+var _isType = require("../../pm-plugins/utils/is-type");
 var _mediaCommon = require("../../pm-plugins/utils/media-common");
 var _commands2 = require("./commands");
 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; }
@@ -80,4 +83,20 @@ var getAltTextToolbar = exports.getAltTextToolbar = function getAltTextToolbar(t
     className: _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT,
     items: [altTextEditComponent(options)]
   });
+};
+var getAltTextDropdownOption = exports.getAltTextDropdownOption = function getAltTextDropdownOption(state, formatMessage, allowAltTextOnImages, selectedNodeType, editorAnalyticsAPI) {
+  var _state$schema$nodes = state.schema.nodes,
+    mediaSingle = _state$schema$nodes.mediaSingle,
+    mediaInline = _state$schema$nodes.mediaInline;
+  var mediaType = state.selection instanceof _state.NodeSelection && state.selection.node.attrs.type;
+  if (allowAltTextOnImages && (selectedNodeType === mediaSingle || selectedNodeType === mediaInline && (0, _isType.isImage)(mediaType))) {
+    return [{
+      title: formatMessage(_media.altTextMessages.addAltText),
+      onClick: (0, _commands.openMediaAltTextMenu)(editorAnalyticsAPI),
+      icon: /*#__PURE__*/_react.default.createElement(_text.default, {
+        label: ""
+      })
+    }];
+  }
+  return [];
 };

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

@@ -11,7 +11,6 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _media = require("@atlaskit/editor-common/media");
 var _messages = require("@atlaskit/editor-common/messages");
 var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
-var _comment2 = _interopRequireDefault(require("@atlaskit/icon/glyph/comment"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commentWithDotIcon = require("./assets/commentWithDotIcon");
@@ -47,7 +46,7 @@ var commentButton = exports.commentButton = function commentButton(intl, state,
     type: 'button',
     testId: 'add-comment-media-button',
     icon: _comment.default,
-    iconFallback: hasActiveComments ? _commentWithDotIcon.CommentWithDotIcon : _comment2.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

@@ -12,7 +12,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _card = require("@atlaskit/editor-common/card");
-var _media = require("@atlaskit/editor-common/media");
 var _mediaInline = require("@atlaskit/editor-common/media-inline");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
 var _state2 = require("@atlaskit/editor-prosemirror/state");
@@ -20,33 +19,29 @@ var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
 var _growDiagonal = _interopRequireDefault(require("@atlaskit/icon/core/grow-diagonal"));
-var _growHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/grow-horizontal"));
 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 _text = _interopRequireDefault(require("@atlaskit/icon/core/text"));
 var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
-var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
 var _mediaUi = require("@atlaskit/media-ui");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _styles = require("../../nodeviews/styles");
 var _altText = require("../../pm-plugins/alt-text");
-var _commands = require("../../pm-plugins/alt-text/commands");
 var _linking = require("../../pm-plugins/commands/linking");
 var _linking2 = require("../../pm-plugins/linking");
 var _pixelResizing = require("../../pm-plugins/pixel-resizing");
-var _commands2 = require("../../pm-plugins/pixel-resizing/commands");
 var _ui = require("../../pm-plugins/pixel-resizing/ui");
 var _pluginKey = require("../../pm-plugins/plugin-key");
 var _currentMediaNode = require("../../pm-plugins/utils/current-media-node");
 var _mediaSingle = require("../../pm-plugins/utils/media-single");
 var _ImageBorder = _interopRequireDefault(require("../../ui/ImageBorder"));
 var _altText2 = require("./alt-text");
-var _commands3 = require("./commands");
+var _commands = require("./commands");
 var _comments = require("./comments");
 var _imageBorder = require("./imageBorder");
 var _layoutGroup = require("./layout-group");
@@ -99,6 +94,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     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: _filePreview.default,
     title: intl.formatMessage(_mediaUi.messages.preview),
     onClick: function onClick() {
@@ -138,7 +134,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
       selected: false,
       focusEditoronEnter: true,
       disabled: false,
-      onClick: (0, _commands3.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
+      onClick: (0, _commands.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
       title: intl.formatMessage(_messages.cardMessages.inlineTitle),
       testId: 'inline-appearance',
       className: 'inline-appearance' // a11y. uses to force focus on item
@@ -178,7 +174,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
       appearance: 'danger',
       focusEditoronEnter: true,
       icon: _delete.default,
-      iconFallback: _remove.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),
@@ -191,7 +187,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     var options = [{
       id: 'editor.media.view.switcher.inline',
       title: intl.formatMessage(_messages.cardMessages.inlineTitle),
-      onClick: (0, _commands3.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
+      onClick: (0, _commands.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
       icon: /*#__PURE__*/_react.default.createElement(_imageInline.default, {
         label: "",
         spacing: "spacious"
@@ -226,7 +222,6 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
       fullHeight: true
     }, download, {
       type: 'separator',
-      fullHeight: true,
       supportsViewMode: true
     }, preview, {
       type: 'separator',
@@ -251,6 +246,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
   var toolbarButtons = [];
   var _ref2 = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
     hoverDecoration = _ref2.hoverDecoration;
+  var isEditorControlsEnabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
   if ((0, _imageBorder.shouldShowImageBorder)(state)) {
     toolbarButtons.push({
       type: 'custom',
@@ -265,11 +261,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         return /*#__PURE__*/_react.default.createElement(_ImageBorder.default, {
           toggleBorder: function toggleBorder() {
             var _pluginInjectionApi$a;
-            (0, _commands3.toggleBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(state, dispatch);
+            (0, _commands.toggleBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(state, dispatch);
           },
           setBorder: function setBorder(attrs) {
             var _pluginInjectionApi$a2;
-            (0, _commands3.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(attrs)(state, dispatch);
+            (0, _commands.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(attrs)(state, dispatch);
           },
           borderMark: borderMark,
           intl: intl
@@ -337,7 +333,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         var hasCaption = (0, _utils.contains)(selectedNode.node, state.schema.nodes.caption);
         var inlineSwitcherTitle = intl.formatMessage(hasCaption ? _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
         var floatingSwitcherTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
-        if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+        if (!isEditorControlsEnabled) {
           var _pluginInjectionApi$a4;
           toolbarButtons.push({
             type: 'button',
@@ -352,7 +348,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
                 LEGACY_fallbackIcon: _card.IconInline
               });
             },
-            onClick: (0, _commands3.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
+            onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
             testId: 'image-inline-appearance'
           }, {
             type: 'button',
@@ -381,7 +377,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           var _options2 = [{
             id: 'editor.media.convert.mediainline',
             title: inlineTitle,
-            onClick: (0, _commands3.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
+            onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
             icon: /*#__PURE__*/_react.default.createElement(_imageInline.default, {
               color: "currentColor",
               spacing: "spacious",
@@ -473,14 +469,14 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         }
         return [sizeInput];
       }
-      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+      if (!isEditorControlsEnabled) {
         toolbarButtons.push(sizeInput);
         toolbarButtons.push({
           type: 'separator'
         });
       }
     }
-    if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+    if (!isEditorControlsEnabled) {
       if (allowCommentsOnMedia) {
         toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi), {
           type: 'separator',
@@ -543,6 +539,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             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: _filePreview.default,
             title: intl.formatMessage(_mediaUi.messages.preview),
             onClick: function onClick() {
@@ -578,29 +575,45 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       supportsViewMode: true
     });
   }
-  if (allowAltTextOnImages && (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
-    var _pluginInjectionApi$a7;
-    toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
-      type: 'separator'
+  if (!isEditorControlsEnabled) {
+    if (allowAltTextOnImages) {
+      var _pluginInjectionApi$a7;
+      toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
+        type: 'separator'
+      });
+    }
+    var removeButton = {
+      id: 'editor.media.delete',
+      type: 'button',
+      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),
+      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false),
+      title: intl.formatMessage(_messages.default.remove),
+      onClick: remove,
+      testId: 'media-toolbar-remove-button',
+      supportsViewMode: false
+    };
+    var items = [].concat((0, _toConsumableArray2.default)(toolbarButtons), [{
+      type: 'copy-button',
+      items: [{
+        state: state,
+        formatMessage: intl.formatMessage,
+        nodeType: mediaSingle
+      }],
+      supportsViewMode: true
+    }]);
+    items.push({
+      type: 'separator',
+      supportsViewMode: false
     });
-  }
-  var removeButton = {
-    id: 'editor.media.delete',
-    type: 'button',
-    appearance: 'danger',
-    focusEditoronEnter: true,
-    icon: _delete.default,
-    iconFallback: _remove.default,
-    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true),
-    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false),
-    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true),
-    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false),
-    title: intl.formatMessage(_messages.default.remove),
-    onClick: remove,
-    testId: 'media-toolbar-remove-button',
-    supportsViewMode: false
-  };
-  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+    items.push(removeButton);
+    return items;
+  } else {
     // Preview Support
     if (allowAdvancedToolBarOptions && allowImagePreview) {
       var _mediaNode$attrs2;
@@ -613,6 +626,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           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: _filePreview.default,
           title: intl.formatMessage(_mediaUi.messages.preview),
           onClick: function onClick() {
@@ -626,8 +640,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           supportsViewMode: true
         }, {
           type: 'separator',
-          supportsViewMode: true,
-          fullHeight: true
+          supportsViewMode: true
         });
       }
     }
@@ -636,8 +649,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     if (allowLinking && (0, _linking3.shouldShowMediaLinkToolbar)(state) && mediaLinkingState && mediaLinkingState.editable) {
       toolbarButtons.push((0, _linking3.getOpenLinkToolbarButtonOption)(intl, mediaLinkingState, pluginInjectionApi), {
         type: 'separator',
-        supportsViewMode: true,
-        fullHeight: true
+        supportsViewMode: true
       });
     }
     isViewOnly && toolbarButtons.push({
@@ -653,26 +665,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       supportsViewMode: true
     });
     if (allowAdvancedToolBarOptions && allowCommentsOnMedia) {
-      // TODO: ED-26962 - add separator when overflow menu is added
+      (0, _utils2.updateToFullHeightSeparator)(toolbarButtons);
       toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi));
     }
     return toolbarButtons;
   }
-  var items = [].concat((0, _toConsumableArray2.default)(toolbarButtons), [{
-    type: 'copy-button',
-    items: [{
-      state: state,
-      formatMessage: intl.formatMessage,
-      nodeType: mediaSingle
-    }],
-    supportsViewMode: true
-  }]);
-  items.push({
-    type: 'separator',
-    supportsViewMode: false
-  });
-  items.push(removeButton);
-  return items;
 };
 var getMediaTypeMessage = function getMediaTypeMessage(selectedNodeTypeSingle) {
   var mediaType = Object.keys(mediaTypeMessages).find(function (key) {
@@ -774,34 +771,17 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
   }
   if (!mediaPluginState.isResizing && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
     var _pluginInjectionApi$a9;
-    var lastItem = items.at(-1);
-    if ((lastItem === null || lastItem === void 0 ? void 0 : lastItem.type) === 'separator') {
-      lastItem.fullHeight = true;
-    } else if (items.length) {
-      items.push({
-        type: 'separator',
-        fullHeight: true
+    (0, _utils2.updateToFullHeightSeparator)(items);
+    var customOptions = [].concat((0, _toConsumableArray2.default)((0, _linking3.getLinkingDropdownOptions)(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly)), (0, _toConsumableArray2.default)((0, _altText2.getAltTextDropdownOption)(state, intl.formatMessage, allowAltTextOnImages, selectedNodeType, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions)), (0, _toConsumableArray2.default)((0, _pixelResizing2.getResizeDropdownOption)(options, state, intl.formatMessage, selectedNodeType)));
+    if (customOptions.length) {
+      customOptions.push({
+        type: 'separator'
       });
     }
-    var altTextTitle = intl.formatMessage(_media.altTextMessages.addAltText);
     items.push({
       type: 'overflow-dropdown',
-      options: [].concat((0, _toConsumableArray2.default)((0, _linking3.getLinkingDropdownOptions)(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly)), [{
-        title: altTextTitle,
-        onClick: (0, _commands.openMediaAltTextMenu)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions),
-        icon: /*#__PURE__*/_react.default.createElement(_text.default, {
-          label: ""
-        })
-      }, {
-        title: 'Resize',
-        onClick: (0, _commands2.openPixelEditor)(),
-        icon: /*#__PURE__*/_react.default.createElement(_growHorizontal.default, {
-          label: ""
-        }),
-        testId: 'media-pixel-resizing-dropdown-option'
-      }, {
-        type: 'separator'
-      }, {
+      id: 'media',
+      options: [].concat((0, _toConsumableArray2.default)(customOptions), [{
         title: 'Copy',
         onClick: function onClick() {
           var _pluginInjectionApi$c4, _pluginInjectionApi$f3;