@atlaskit/editor-plugin-media 2.3.14 → 2.3.15

package/dist/cjs/ui/toolbar/pixel-resizing.js

@@ -4,12 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getPixelResizingToolbar = void 0;
+exports.getResizeDropdownOption = exports.getPixelResizingToolbar = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _media = require("@atlaskit/editor-common/media");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _growHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/grow-horizontal"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _commands = require("../../pm-plugins/pixel-resizing/commands");
 var _ui = require("../../pm-plugins/pixel-resizing/ui");
 var _constants = require("../../pm-plugins/pixel-resizing/ui/constants");
-var _utils = require("./utils");
+var _utils2 = require("./utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getPixelResizingToolbar = exports.getPixelResizingToolbar = function getPixelResizingToolbar(toolbarBaseConfig, _ref) {
@@ -28,7 +33,7 @@ var getPixelResizingToolbar = exports.getPixelResizingToolbar = function getPixe
         if (!editorView) {
           return null;
         }
-        var selectedMediaSingleNode = (0, _utils.getSelectedMediaSingle)(editorView.state);
+        var selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(editorView.state);
         if (!editorView || !selectedMediaSingleNode) {
           return null;
         }
@@ -44,4 +49,24 @@ var getPixelResizingToolbar = exports.getPixelResizingToolbar = function getPixe
       }
     }]
   });
+};
+var getResizeDropdownOption = exports.getResizeDropdownOption = function getResizeDropdownOption(mediaOptions, state, formatMessage, selectedNodeType) {
+  if ((selectedNodeType === null || selectedNodeType === void 0 ? void 0 : selectedNodeType.name) !== 'mediaSingle') {
+    return [];
+  }
+  var allowResizing = mediaOptions.allowResizing,
+    allowResizingInTables = mediaOptions.allowResizingInTables,
+    allowAdvancedToolBarOptions = mediaOptions.allowAdvancedToolBarOptions;
+  var isWithinTable = (0, _utils.hasParentNodeOfType)(state.schema.nodes.table)(state.selection);
+  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience')) {
+    return [{
+      title: formatMessage(_media.pixelEntryMessages.resizeOption),
+      onClick: (0, _commands.openPixelEditor)(),
+      icon: /*#__PURE__*/_react.default.createElement(_growHorizontal.default, {
+        label: ""
+      }),
+      testId: 'media-pixel-resizing-dropdown-option'
+    }];
+  }
+  return [];
 };

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeMediaGroupNode = exports.isExternalMedia = 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.getSelectedNearestMediaContainerNodeAttrs = exports.getSelectedMediaSingle = exports.getSelectedLayoutIcon = exports.getPixelWidthOfElement = 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 _memoizeOne = _interopRequireDefault(require("memoize-one"));
@@ -153,4 +153,15 @@ var canShowSwitchButtons = exports.canShowSwitchButtons = function canShowSwitch
     return mediaNode && !(0, _mediaSingle2.isVideo)(mediaNode.attrs.__fileMimeType);
   }
   return false;
+};
+var updateToFullHeightSeparator = exports.updateToFullHeightSeparator = function updateToFullHeightSeparator(items) {
+  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
+    });
+  }
 };

package/dist/es2019/nodeviews/mediaInline.js

@@ -137,7 +137,8 @@ export const 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 jsx(MediaViewerContainer, {

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

@@ -53,6 +53,7 @@ class MediaNodeView extends SelectionBasedNodeView {
         width: editorWidth,
         mediaProvider
       }) => {
+        var _this$reactComponentP, _this$reactComponentP2, _this$reactComponentP3;
         const getPos = this.getPos;
         const {
           mediaOptions
@@ -97,7 +98,8 @@ class MediaNodeView extends SelectionBasedNodeView {
           mediaProvider: mediaProvider,
           contextIdentifierProvider: contextIdentifierProvider,
           mediaOptions: mediaOptions,
-          onExternalImageLoaded: this.onExternalImageLoaded
+          onExternalImageLoaded: this.onExternalImageLoaded,
+          isViewOnly: ((_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 ? void 0 : (_this$reactComponentP2 = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP2 === void 0 ? void 0 : (_this$reactComponentP3 = _this$reactComponentP2.sharedState.currentState()) === null || _this$reactComponentP3 === void 0 ? void 0 : _this$reactComponentP3.mode) === 'view'
         });
       };
     });

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

@@ -6,6 +6,7 @@ import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { setNodeSelection, setTextSelection, withImageLoader } from '@atlaskit/editor-common/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { Card, CardLoading } from '@atlaskit/media-card';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { stateKey as mediaStateKey } from '../../pm-plugins/plugin-key';
 import { MediaCardWrapper } from '../styles';
 
@@ -32,6 +33,13 @@ export class MediaNode extends Component {
       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 && editorExperiment('platform_editor_controls', 'variant1')) {
+        event.preventDefault();
+      }
     });
     _defineProperty(this, "selectMediaSingle", event => {
       const propPos = this.props.getPos();
@@ -39,9 +47,13 @@ export class MediaNode extends 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 (editorExperiment('platform_editor_controls', 'control')) {
+        event.stopPropagation();
+      }
       const {
         state
       } = this.props.view;

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

@@ -3,8 +3,11 @@ import { addAltText, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { altTextMessages as messages } from '@atlaskit/editor-common/media';
 import { MediaSharedClassNames as ClassNames } from '@atlaskit/editor-common/styles';
 import { RECENT_SEARCH_WIDTH_IN_PX as CONTAINER_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import TextIcon from '@atlaskit/icon/core/text';
 import { openMediaAltTextMenu } from '../../pm-plugins/alt-text/commands';
 import AltTextEdit from '../../pm-plugins/alt-text/ui/AltTextEdit';
+import { isImage } from '../../pm-plugins/utils/is-type';
 import { getMediaSingleOrInlineNodeFromSelection } from '../../pm-plugins/utils/media-common';
 import { getNodeType } from './commands';
 const testId = 'alt-text-edit-button';
@@ -75,4 +78,21 @@ export const getAltTextToolbar = (toolbarBaseConfig, options) => {
     className: ClassNames.FLOATING_TOOLBAR_COMPONENT,
     items: [altTextEditComponent(options)]
   };
+};
+export const getAltTextDropdownOption = (state, formatMessage, allowAltTextOnImages, selectedNodeType, editorAnalyticsAPI) => {
+  const {
+    mediaSingle,
+    mediaInline
+  } = state.schema.nodes;
+  const mediaType = state.selection instanceof NodeSelection && state.selection.node.attrs.type;
+  if (allowAltTextOnImages && (selectedNodeType === mediaSingle || selectedNodeType === mediaInline && isImage(mediaType))) {
+    return [{
+      title: formatMessage(messages.addAltText),
+      onClick: openMediaAltTextMenu(editorAnalyticsAPI),
+      icon: /*#__PURE__*/React.createElement(TextIcon, {
+        label: ""
+      })
+    }];
+  }
+  return [];
 };

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

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { alignmentIcons, buildLayoutButtons, IconCard, IconEmbed, IconInline, layoutToMessages, wrappingIcons } from '@atlaskit/editor-common/card';
-import { altTextMessages } from '@atlaskit/editor-common/media';
 import { mediaInlineImagesEnabled } from '@atlaskit/editor-common/media-inline';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
@@ -10,13 +9,11 @@ import { contains, findParentNodeOfType, hasParentNodeOfType, removeSelectedNode
 import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
-import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
 import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
 import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
 import MaximizeIcon from '@atlaskit/icon/core/maximize';
 import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import SmartLinkCardIcon from '@atlaskit/icon/core/smart-link-card';
-import TextIcon from '@atlaskit/icon/core/text';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
@@ -25,17 +22,15 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { MediaSingleNodeSelector } from '../../nodeviews/styles';
 import { getPluginState as getMediaAltTextPluginState } from '../../pm-plugins/alt-text';
-import { openMediaAltTextMenu } from '../../pm-plugins/alt-text/commands';
 import { showLinkingToolbar } from '../../pm-plugins/commands/linking';
 import { getMediaLinkingState } from '../../pm-plugins/linking';
 import { getPluginState as getMediaPixelResizingPluginState } from '../../pm-plugins/pixel-resizing';
-import { openPixelEditor } from '../../pm-plugins/pixel-resizing/commands';
 import { FullWidthDisplay, PixelEntry } from '../../pm-plugins/pixel-resizing/ui';
 import { stateKey } from '../../pm-plugins/plugin-key';
 import { currentMediaOrInlineNodeBorderMark } from '../../pm-plugins/utils/current-media-node';
 import { isVideo } from '../../pm-plugins/utils/media-single';
 import ImageBorderItem from '../../ui/ImageBorder';
-import { altTextButton, getAltTextToolbar } from './alt-text';
+import { altTextButton, getAltTextToolbar, getAltTextDropdownOption } from './alt-text';
 import { changeMediaCardToInline, changeMediaSingleToMediaInline, setBorderMark, toggleBorderMark } from './commands';
 import { commentButton } from './comments';
 import { shouldShowImageBorder } from './imageBorder';
@@ -43,8 +38,8 @@ import { LayoutGroup } from './layout-group';
 import { getLinkingDropdownOptions, getLinkingToolbar, getOpenLinkToolbarButtonOption, shouldShowMediaLinkToolbar } from './linking';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { generateMediaInlineFloatingToolbar } from './mediaInline';
-import { getPixelResizingToolbar } from './pixel-resizing';
-import { canShowSwitchButtons, downloadMedia, getMaxToolbarWidth, getSelectedLayoutIcon, getSelectedMediaSingle, getSelectedNearestMediaContainerNodeAttrs, removeMediaGroupNode } from './utils';
+import { getPixelResizingToolbar, getResizeDropdownOption } from './pixel-resizing';
+import { canShowSwitchButtons, downloadMedia, getMaxToolbarWidth, getSelectedLayoutIcon, getSelectedMediaSingle, getSelectedNearestMediaContainerNodeAttrs, removeMediaGroupNode, updateToFullHeightSeparator } from './utils';
 const mediaTypeMessages = {
   image: messages.file_image_is_selected,
   video: messages.file_video_is_selected,
@@ -210,7 +205,6 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
       fullHeight: true
     }, download, {
       type: 'separator',
-      fullHeight: true,
       supportsViewMode: true
     }, preview, {
       type: 'separator',
@@ -240,6 +234,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
   const {
     hoverDecoration
   } = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {};
+  const isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
   if (shouldShowImageBorder(state)) {
     toolbarButtons.push({
       type: 'custom',
@@ -328,7 +323,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         const hasCaption = contains(selectedNode.node, state.schema.nodes.caption);
         const inlineSwitcherTitle = intl.formatMessage(hasCaption ? mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
         const floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
-        if (editorExperiment('platform_editor_controls', 'control')) {
+        if (!isEditorControlsEnabled) {
           var _pluginInjectionApi$a4;
           toolbarButtons.push({
             type: 'button',
@@ -462,14 +457,14 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         }
         return [sizeInput];
       }
-      if (editorExperiment('platform_editor_controls', 'control')) {
+      if (!isEditorControlsEnabled) {
         toolbarButtons.push(sizeInput);
         toolbarButtons.push({
           type: 'separator'
         });
       }
     }
-    if (editorExperiment('platform_editor_controls', 'control')) {
+    if (!isEditorControlsEnabled) {
       if (allowCommentsOnMedia) {
         toolbarButtons.push(commentButton(intl, state, pluginInjectionApi), {
           type: 'separator',
@@ -573,29 +568,45 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
       supportsViewMode: true
     });
   }
-  if (allowAltTextOnImages && editorExperiment('platform_editor_controls', 'control')) {
-    var _pluginInjectionApi$a7;
-    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
+        type: 'separator'
+      });
+    }
+    const removeButton = {
+      id: 'editor.media.delete',
+      type: 'button',
+      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),
+      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false),
+      title: intl.formatMessage(commonMessages.remove),
+      onClick: remove,
+      testId: 'media-toolbar-remove-button',
+      supportsViewMode: false
+    };
+    const items = [...toolbarButtons, {
+      type: 'copy-button',
+      items: [{
+        state,
+        formatMessage: intl.formatMessage,
+        nodeType: mediaSingle
+      }],
+      supportsViewMode: true
+    }];
+    items.push({
+      type: 'separator',
+      supportsViewMode: false
     });
-  }
-  const removeButton = {
-    id: 'editor.media.delete',
-    type: 'button',
-    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),
-    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false),
-    title: intl.formatMessage(commonMessages.remove),
-    onClick: remove,
-    testId: 'media-toolbar-remove-button',
-    supportsViewMode: false
-  };
-  if (editorExperiment('platform_editor_controls', 'variant1')) {
+    items.push(removeButton);
+    return items;
+  } else {
     // Preview Support
     if (allowAdvancedToolBarOptions && allowImagePreview) {
       var _mediaNode$attrs2;
@@ -621,8 +632,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
           supportsViewMode: true
         }, {
           type: 'separator',
-          supportsViewMode: true,
-          fullHeight: true
+          supportsViewMode: true
         });
       }
     }
@@ -631,8 +641,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     if (allowLinking && shouldShowMediaLinkToolbar(state) && mediaLinkingState && mediaLinkingState.editable) {
       toolbarButtons.push(getOpenLinkToolbarButtonOption(intl, mediaLinkingState, pluginInjectionApi), {
         type: 'separator',
-        supportsViewMode: true,
-        fullHeight: true
+        supportsViewMode: true
       });
     }
     isViewOnly && toolbarButtons.push({
@@ -648,26 +657,11 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
       supportsViewMode: true
     });
     if (allowAdvancedToolBarOptions && allowCommentsOnMedia) {
-      // TODO: ED-26962 - add separator when overflow menu is added
+      updateToFullHeightSeparator(toolbarButtons);
       toolbarButtons.push(commentButton(intl, state, pluginInjectionApi));
     }
     return toolbarButtons;
   }
-  const items = [...toolbarButtons, {
-    type: 'copy-button',
-    items: [{
-      state,
-      formatMessage: intl.formatMessage,
-      nodeType: mediaSingle
-    }],
-    supportsViewMode: true
-  }];
-  items.push({
-    type: 'separator',
-    supportsViewMode: false
-  });
-  items.push(removeButton);
-  return items;
 };
 const getMediaTypeMessage = selectedNodeTypeSingle => {
   const mediaType = Object.keys(mediaTypeMessages).find(key => selectedNodeTypeSingle === null || selectedNodeTypeSingle === void 0 ? void 0 : selectedNodeTypeSingle.includes(key));
@@ -769,34 +763,17 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
   }
   if (!mediaPluginState.isResizing && editorExperiment('platform_editor_controls', 'variant1')) {
     var _pluginInjectionApi$a9;
-    const 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
+    updateToFullHeightSeparator(items);
+    const customOptions = [...getLinkingDropdownOptions(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly), ...getAltTextDropdownOption(state, intl.formatMessage, allowAltTextOnImages, selectedNodeType, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions), ...getResizeDropdownOption(options, state, intl.formatMessage, selectedNodeType)];
+    if (customOptions.length) {
+      customOptions.push({
+        type: 'separator'
       });
     }
-    const altTextTitle = intl.formatMessage(altTextMessages.addAltText);
     items.push({
       type: 'overflow-dropdown',
-      options: [...getLinkingDropdownOptions(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly), {
-        title: altTextTitle,
-        onClick: openMediaAltTextMenu(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions),
-        icon: /*#__PURE__*/React.createElement(TextIcon, {
-          label: ""
-        })
-      }, {
-        title: 'Resize',
-        onClick: openPixelEditor(),
-        icon: /*#__PURE__*/React.createElement(GrowHorizontalIcon, {
-          label: ""
-        }),
-        testId: 'media-pixel-resizing-dropdown-option'
-      }, {
-        type: 'separator'
-      }, {
+      id: 'media',
+      options: [...customOptions, {
         title: 'Copy',
         onClick: () => {
           var _pluginInjectionApi$c10, _pluginInjectionApi$f5;

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

@@ -162,7 +162,6 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
       fullHeight: true
     }, download, {
       type: 'separator',
-      fullHeight: true,
       supportsViewMode: true
     }, preview, {
       type: 'separator',
@@ -180,6 +179,13 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
   const mediaSingleTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
   const widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
   const inlineImageItems = [];
+  const isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
+  const {
+    isViewOnly,
+    allowAltTextOnImages,
+    allowLinking,
+    allowImagePreview
+  } = options;
   if (shouldShowImageBorder(state)) {
     inlineImageItems.push({
       type: 'custom',
@@ -211,9 +217,20 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
       type: 'separator'
     });
   }
+  const download = {
+    id: 'editor.media.image.download',
+    type: 'button',
+    icon: DownloadIcon,
+    onClick: () => {
+      downloadMedia(mediaPluginState, options.isViewOnly);
+      return true;
+    },
+    title: intl.formatMessage(messages.download),
+    supportsViewMode: true
+  };
 
   // For Editor Controls: show options to convert from 'Inline' to 'Original size' via dropdown
-  if (editorExperiment('platform_editor_controls', 'control')) {
+  if (!isEditorControlsEnabled) {
     inlineImageItems.push({
       id: 'editor.media.convert.mediainline',
       type: 'button',
@@ -243,58 +260,7 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
       onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState)
     }, {
       type: 'separator'
-    });
-  } else {
-    const options = [{
-      id: 'editor.media.convert.mediainline',
-      title: mediaInlineImageTitle,
-      onClick: () => {
-        return true;
-      },
-      selected: true,
-      disabled: false,
-      icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
-        color: "currentColor",
-        spacing: "spacious",
-        label: mediaInlineImageTitle,
-        LEGACY_size: "medium",
-        LEGACY_fallbackIcon: IconInline
-      })
     }, {
-      id: 'editor.media.convert.mediasingle',
-      title: mediaSingleTitle,
-      onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState),
-      icon: /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
-        color: "currentColor",
-        spacing: "spacious",
-        label: mediaSingleTitle,
-        LEGACY_size: "medium",
-        LEGACY_fallbackIcon: IconEmbed
-      })
-    }];
-    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
-      })
-    };
-    inlineImageItems.push(switchFromInlineToBlock, {
-      type: 'separator',
-      fullHeight: true
-    });
-  }
-
-  // TODO: ED-26961 - editor controls move to overflow menu
-  if (editorExperiment('platform_editor_controls', 'control')) {
-    inlineImageItems.push({
       type: 'custom',
       fallback: [],
       render: (editorView, idx) => {
@@ -343,15 +309,67 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
       },
       supportsViewMode: true
     });
+  } else {
+    const options = [{
+      id: 'editor.media.convert.mediainline',
+      title: mediaInlineImageTitle,
+      onClick: () => {
+        return true;
+      },
+      selected: true,
+      disabled: false,
+      icon: /*#__PURE__*/React.createElement(ImageInlineIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: mediaInlineImageTitle,
+        LEGACY_size: "medium",
+        LEGACY_fallbackIcon: IconInline
+      })
+    }, {
+      id: 'editor.media.convert.mediasingle',
+      title: mediaSingleTitle,
+      onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState),
+      icon: /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: mediaSingleTitle,
+        LEGACY_size: "medium",
+        LEGACY_fallbackIcon: IconEmbed
+      })
+    }];
+    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
+      })
+    };
+    inlineImageItems.push(switchFromInlineToBlock, {
+      type: 'separator',
+      fullHeight: true
+    });
+    if (isViewOnly) {
+      inlineImageItems.push(download, {
+        type: 'separator',
+        supportsViewMode: true
+      });
+    }
   }
 
   //Image Preview
-  if (options.allowImagePreview) {
+  if (allowImagePreview) {
     inlineImageItems.push({
       id: 'editor.media.viewer',
       testId: 'file-preview-toolbar-button',
       type: 'button',
-      icon: MaximizeIcon,
+      icon: isEditorControlsEnabled ? GrowDiagonalIcon : MaximizeIcon,
       iconFallback: FilePreviewIcon,
       title: intl.formatMessage(messages.preview),
       onClick: () => {
@@ -364,42 +382,30 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
       supportsViewMode: true
     }, {
       type: 'separator',
-      supportsViewMode: true,
-      fullHeight: editorExperiment('platform_editor_controls', 'variant1')
+      supportsViewMode: true
     });
   }
 
   // open link
-  if (options.allowLinking && shouldShowMediaLinkToolbar(state) && mediaLinkingState && mediaLinkingState.editable && editorExperiment('platform_editor_controls', 'variant1')) {
+  if (allowLinking && shouldShowMediaLinkToolbar(state) && mediaLinkingState && mediaLinkingState.editable && isEditorControlsEnabled) {
     inlineImageItems.push(getOpenLinkToolbarButtonOption(intl, mediaLinkingState, pluginInjectionApi), {
       type: 'separator',
-      supportsViewMode: true,
-      fullHeight: true
+      supportsViewMode: true
     });
   }
-  if (options.isViewOnly) {
-    inlineImageItems.push({
-      id: 'editor.media.image.download',
-      type: 'button',
-      icon: DownloadIcon,
-      onClick: () => {
-        downloadMedia(mediaPluginState, options.isViewOnly);
-        return true;
-      },
-      title: intl.formatMessage(messages.download),
-      supportsViewMode: true
-    }, {
+  if (isViewOnly && !isEditorControlsEnabled) {
+    inlineImageItems.push(download, {
       type: 'separator',
       supportsViewMode: true
     });
   }
-  if (options.allowAltTextOnImages && editorExperiment('platform_editor_controls', 'control')) {
+  if (allowAltTextOnImages && !isEditorControlsEnabled) {
     var _pluginInjectionApi$a5;
     inlineImageItems.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions), {
       type: 'separator'
     });
   }
-  if (options.isViewOnly || editorExperiment('platform_editor_controls', 'control')) {
+  if (isViewOnly || !isEditorControlsEnabled) {
     inlineImageItems.push({
       type: 'copy-button',
       supportsViewMode: true,
@@ -410,7 +416,7 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
       }]
     });
   }
-  if (editorExperiment('platform_editor_controls', 'control')) {
+  if (!isEditorControlsEnabled) {
     inlineImageItems.push({
       type: 'separator'
     });