@atlaskit/editor-plugin-media 2.3.13 → 2.3.15

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'
     });

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

@@ -1,4 +1,9 @@
 import React from 'react';
+import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
+import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { openPixelEditor } from '../../pm-plugins/pixel-resizing/commands';
 import { PixelEntry } from '../../pm-plugins/pixel-resizing/ui';
 import { PIXEL_RESIZING_TOOLBAR_WIDTH } from '../../pm-plugins/pixel-resizing/ui/constants';
 import { getSelectedMediaSingle } from './utils';
@@ -34,4 +39,26 @@ export const getPixelResizingToolbar = (toolbarBaseConfig, {
       });
     }
   }]
-});
+});
+export const getResizeDropdownOption = (mediaOptions, state, formatMessage, selectedNodeType) => {
+  if ((selectedNodeType === null || selectedNodeType === void 0 ? void 0 : selectedNodeType.name) !== 'mediaSingle') {
+    return [];
+  }
+  const {
+    allowResizing,
+    allowResizingInTables,
+    allowAdvancedToolBarOptions
+  } = mediaOptions;
+  const isWithinTable = hasParentNodeOfType(state.schema.nodes.table)(state.selection);
+  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && fg('platform_editor_media_extended_resize_experience')) {
+    return [{
+      title: formatMessage(messages.resizeOption),
+      onClick: openPixelEditor(),
+      icon: /*#__PURE__*/React.createElement(GrowHorizontalIcon, {
+        label: ""
+      }),
+      testId: 'media-pixel-resizing-dropdown-option'
+    }];
+  }
+  return [];
+};

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

@@ -126,4 +126,15 @@ export const canShowSwitchButtons = mediaSingleNode => {
     return mediaNode && !isVideo(mediaNode.attrs.__fileMimeType);
   }
   return false;
+};
+export const updateToFullHeightSeparator = items => {
+  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
+    });
+  }
 };

package/dist/esm/nodeviews/mediaInline.js

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

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

@@ -64,6 +64,7 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
     });
     _defineProperty(_this, "renderMediaNodeWithState", function (contextIdentifierProvider) {
       return function (_ref2) {
+        var _this$reactComponentP;
         var editorWidth = _ref2.width,
           mediaProvider = _ref2.mediaProvider;
         var getPos = _this.getPos;
@@ -104,7 +105,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/esm/nodeviews/mediaNodeView/media.js

@@ -15,6 +15,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';
 
@@ -54,6 +55,13 @@ export var MediaNode = /*#__PURE__*/function (_Component) {
     _defineProperty(_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 && editorExperiment('platform_editor_controls', 'variant1')) {
+        event.preventDefault();
+      }
     });
     _defineProperty(_this, "selectMediaSingle", function (event) {
       var propPos = _this.props.getPos();
@@ -61,9 +69,13 @@ export var 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 (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/esm/pm-plugins/utils/media-single.js

@@ -54,8 +54,19 @@ function insertNodesWithOptionalParagraph(_ref) {
     if (state.selection.empty) {
       var insertFrom = atTheBeginningOfBlock(state) && fg('platform_editor_axe_leading_paragraph_from_media') ? state.selection.$from.before() : state.selection.from;
       if (fg('platform_editor_axe_leading_paragraph_from_media')) {
-        var shouldInsertFrom = !isInsidePotentialEmptyParagraph(state);
-        updatedTr = atTheBeginningOfBlock(state) ? pmSafeInsert(nodes[0], shouldInsertFrom ? insertFrom : undefined, false)(updatedTr) : updatedTr.insert(insertFrom, nodes);
+        if (fg('platform_editor_multi_images_overridden_upload_fix')) {
+          // the use of pmSafeInsert causes the node selection to media single node.
+          // It leads to discrepancy between the full-page and comment editor - not sure why :shrug:
+          // When multiple images are uploaded, the node selection is set to the previous node
+          // and got overridden by the next node inserted.
+          // It also causes the images position shifted when the images are uploaded.
+          // E.g the images are uploaded after a table, the images will be inserted inside the table.
+          // so we revert to use tr.insert instead. No extra paragraph is added.
+          updatedTr = updatedTr.insert(insertFrom, nodes);
+        } else {
+          var shouldInsertFrom = !isInsidePotentialEmptyParagraph(state);
+          updatedTr = atTheBeginningOfBlock(state) ? pmSafeInsert(nodes[0], shouldInsertFrom ? insertFrom : undefined, false)(updatedTr) : updatedTr.insert(insertFrom, nodes);
+        }
       } else {
         updatedTr.insert(insertFrom, nodes);
       }

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

@@ -6,8 +6,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';
 var testId = 'alt-text-edit-button';
@@ -73,4 +76,20 @@ export var getAltTextToolbar = function getAltTextToolbar(toolbarBaseConfig, opt
     className: ClassNames.FLOATING_TOOLBAR_COMPONENT,
     items: [altTextEditComponent(options)]
   });
+};
+export var 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 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 [];
 };