@atlaskit/editor-plugin-media 2.3.13 → 2.3.15

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

@@ -6,7 +6,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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';
@@ -14,13 +13,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';
@@ -29,17 +26,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';
@@ -47,8 +42,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';
 var mediaTypeMessages = {
   image: messages.file_image_is_selected,
   video: messages.file_video_is_selected,
@@ -216,7 +211,6 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
       fullHeight: true
     }, download, {
       type: 'separator',
-      fullHeight: true,
       supportsViewMode: true
     }, preview, {
       type: 'separator',
@@ -241,6 +235,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 = editorExperiment('platform_editor_controls', 'variant1');
   if (shouldShowImageBorder(state)) {
     toolbarButtons.push({
       type: 'custom',
@@ -327,7 +322,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         var hasCaption = contains(selectedNode.node, state.schema.nodes.caption);
         var inlineSwitcherTitle = intl.formatMessage(hasCaption ? mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
         var floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
-        if (editorExperiment('platform_editor_controls', 'control')) {
+        if (!isEditorControlsEnabled) {
           var _pluginInjectionApi$a4;
           toolbarButtons.push({
             type: 'button',
@@ -463,14 +458,14 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         }
         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',
@@ -568,29 +563,45 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       supportsViewMode: true
     });
   }
-  if (allowAltTextOnImages && editorExperiment('platform_editor_controls', 'control')) {
-    var _pluginInjectionApi$a7;
-    toolbarButtons.push(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(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: 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
+    };
+    var items = [].concat(_toConsumableArray(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: 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;
@@ -616,8 +627,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           supportsViewMode: true
         }, {
           type: 'separator',
-          supportsViewMode: true,
-          fullHeight: true
+          supportsViewMode: true
         });
       }
     }
@@ -626,8 +636,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     if (allowLinking && shouldShowMediaLinkToolbar(state) && mediaLinkingState && mediaLinkingState.editable) {
       toolbarButtons.push(getOpenLinkToolbarButtonOption(intl, mediaLinkingState, pluginInjectionApi), {
         type: 'separator',
-        supportsViewMode: true,
-        fullHeight: true
+        supportsViewMode: true
       });
     }
     isViewOnly && toolbarButtons.push({
@@ -643,26 +652,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       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;
   }
-  var items = [].concat(_toConsumableArray(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) {
@@ -764,34 +758,17 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
   }
   if (!mediaPluginState.isResizing && 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
+    updateToFullHeightSeparator(items);
+    var customOptions = [].concat(_toConsumableArray(getLinkingDropdownOptions(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly)), _toConsumableArray(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)), _toConsumableArray(getResizeDropdownOption(options, state, intl.formatMessage, selectedNodeType)));
+    if (customOptions.length) {
+      customOptions.push({
+        type: 'separator'
       });
     }
-    var altTextTitle = intl.formatMessage(altTextMessages.addAltText);
     items.push({
       type: 'overflow-dropdown',
-      options: [].concat(_toConsumableArray(getLinkingDropdownOptions(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly)), [{
-        title: altTextTitle,
-        onClick: openMediaAltTextMenu(pluginInjectionApi === null || pluginInjectionApi === 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: [].concat(_toConsumableArray(customOptions), [{
         title: 'Copy',
         onClick: function onClick() {
           var _pluginInjectionApi$c4, _pluginInjectionApi$f3;

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

@@ -168,7 +168,6 @@ export var generateMediaInlineFloatingToolbar = function generateMediaInlineFloa
       fullHeight: true
     }, download, {
       type: 'separator',
-      fullHeight: true,
       supportsViewMode: true
     }, preview, {
       type: 'separator',
@@ -185,6 +184,11 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
   var mediaSingleTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
   var widthPluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
   var inlineImageItems = [];
+  var isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
+  var isViewOnly = options.isViewOnly,
+    allowAltTextOnImages = options.allowAltTextOnImages,
+    allowLinking = options.allowLinking,
+    allowImagePreview = options.allowImagePreview;
   if (shouldShowImageBorder(state)) {
     inlineImageItems.push({
       type: 'custom',
@@ -214,9 +218,20 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       type: 'separator'
     });
   }
+  var download = {
+    id: 'editor.media.image.download',
+    type: 'button',
+    icon: DownloadIcon,
+    onClick: function 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',
@@ -250,6 +265,48 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       onClick: changeMediaInlineToMediaSingle(editorAnalyticsAPI, widthPluginState)
     }, {
       type: 'separator'
+    }, {
+      type: 'custom',
+      fallback: [],
+      render: function render(editorView, idx) {
+        if (editorView !== null && editorView !== void 0 && editorView.state) {
+          var editLink = function editLink() {
+            if (editorView) {
+              var _state = editorView.state,
+                dispatch = editorView.dispatch;
+              showLinkingToolbar(_state, dispatch);
+            }
+          };
+          var openLink = function openLink() {
+            if (editorView) {
+              var _pluginInjectionApi$a4;
+              var tr = editorView.state.tr,
+                dispatch = editorView.dispatch;
+              pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 || _pluginInjectionApi$a4.actions.attachAnalyticsEvent({
+                eventType: EVENT_TYPE.TRACK,
+                action: ACTION.VISITED,
+                actionSubject: ACTION_SUBJECT.MEDIA,
+                actionSubjectId: ACTION_SUBJECT_ID.LINK
+              })(tr);
+              dispatch(tr);
+              return true;
+            }
+          };
+          return /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
+            key: idx,
+            editorState: editorView.state,
+            intl: intl,
+            mediaLinkingState: mediaLinkingState,
+            onAddLink: editLink,
+            onEditLink: editLink,
+            onOpenLink: openLink,
+            isInlineNode: true,
+            isViewOnly: options.isViewOnly
+          });
+        }
+        return null;
+      },
+      supportsViewMode: true
     });
   } else {
     var _options2 = [{
@@ -299,62 +356,21 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       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: function render(editorView, idx) {
-        if (editorView !== null && editorView !== void 0 && editorView.state) {
-          var editLink = function editLink() {
-            if (editorView) {
-              var _state = editorView.state,
-                dispatch = editorView.dispatch;
-              showLinkingToolbar(_state, dispatch);
-            }
-          };
-          var openLink = function openLink() {
-            if (editorView) {
-              var _pluginInjectionApi$a4;
-              var tr = editorView.state.tr,
-                dispatch = editorView.dispatch;
-              pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 || _pluginInjectionApi$a4.actions.attachAnalyticsEvent({
-                eventType: EVENT_TYPE.TRACK,
-                action: ACTION.VISITED,
-                actionSubject: ACTION_SUBJECT.MEDIA,
-                actionSubjectId: ACTION_SUBJECT_ID.LINK
-              })(tr);
-              dispatch(tr);
-              return true;
-            }
-          };
-          return /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
-            key: idx,
-            editorState: editorView.state,
-            intl: intl,
-            mediaLinkingState: mediaLinkingState,
-            onAddLink: editLink,
-            onEditLink: editLink,
-            onOpenLink: openLink,
-            isInlineNode: true,
-            isViewOnly: options.isViewOnly
-          });
-        }
-        return null;
-      },
-      supportsViewMode: 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: function onClick() {
@@ -367,42 +383,30 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       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: function 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 || (_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,
@@ -413,7 +417,7 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
       }]
     });
   }
-  if (editorExperiment('platform_editor_controls', 'control')) {
+  if (!isEditorControlsEnabled) {
     inlineImageItems.push({
       type: 'separator'
     });

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

@@ -2,6 +2,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
+import { 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';
@@ -37,4 +42,24 @@ export var getPixelResizingToolbar = function getPixelResizingToolbar(toolbarBas
       }
     }]
   });
+};
+export var 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 = 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/esm/ui/toolbar/utils.js

@@ -146,4 +146,15 @@ export var canShowSwitchButtons = function canShowSwitchButtons(mediaSingleNode)
     return mediaNode && !isVideo(mediaNode.attrs.__fileMimeType);
   }
   return false;
+};
+export var 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/types/nodeviews/mediaNodeView/media.d.ts

@@ -21,6 +21,7 @@ export interface MediaNodeProps extends ReactNodeProps, ImageLoaderProps {
     mediaProvider?: Promise<MediaProvider>;
     isLoading?: boolean;
     mediaOptions?: MediaOptions;
+    isViewOnly?: boolean;
 }
 interface MediaNodeState {
     viewMediaClientConfig?: MediaClientConfig;

package/dist/types/ui/toolbar/alt-text.d.ts

@@ -1,8 +1,9 @@
 import type { IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Command, FloatingToolbarButton, FloatingToolbarConfig } from '@atlaskit/editor-common/types';
+import type { Command, FloatingToolbarButton, FloatingToolbarConfig, FloatingToolbarOverflowDropdownOptions } from '@atlaskit/editor-common/types';
 import type { ForceFocusSelector } from '@atlaskit/editor-plugin-floating-toolbar';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { NodeType } from '@atlaskit/editor-prosemirror/model';
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { MediaToolbarBaseConfig } from '../../types';
 export declare const altTextButton: (intl: IntlShape, state: EditorState, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => FloatingToolbarButton<Command>;
 interface AltTextToolbarOptions {
@@ -10,4 +11,5 @@ interface AltTextToolbarOptions {
     forceFocusSelector?: ForceFocusSelector;
 }
 export declare const getAltTextToolbar: (toolbarBaseConfig: MediaToolbarBaseConfig, options?: AltTextToolbarOptions) => FloatingToolbarConfig;
+export declare const getAltTextDropdownOption: (state: EditorState, formatMessage: IntlShape['formatMessage'], allowAltTextOnImages?: boolean, selectedNodeType?: NodeType, editorAnalyticsAPI?: EditorAnalyticsAPI) => FloatingToolbarOverflowDropdownOptions<Command>;
 export {};

package/dist/types/ui/toolbar/pixel-resizing.d.ts

@@ -1,4 +1,8 @@
-import { FloatingToolbarConfig } from '@atlaskit/editor-common/types';
+import { IntlShape } from 'react-intl-next';
+import { FloatingToolbarConfig, FloatingToolbarOverflowDropdownOptions, Command } from '@atlaskit/editor-common/types';
+import { NodeType } from '@atlaskit/editor-prosemirror/model';
+import { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Props } from '../../pm-plugins/pixel-resizing/ui';
-import { MediaToolbarBaseConfig } from '../../types';
+import { MediaOptions, MediaToolbarBaseConfig } from '../../types';
 export declare const getPixelResizingToolbar: (toolbarBaseConfig: MediaToolbarBaseConfig, { pluginInjectionApi, intl, pluginState, hoverDecoration, isEditorFullWidthEnabled, }: Omit<Props, 'editorView' | 'selectedMediaSingleNode'>) => FloatingToolbarConfig;
+export declare const getResizeDropdownOption: (mediaOptions: MediaOptions, state: EditorState, formatMessage: IntlShape['formatMessage'], selectedNodeType?: NodeType) => FloatingToolbarOverflowDropdownOptions<Command>;

package/dist/types/ui/toolbar/utils.d.ts

@@ -1,5 +1,6 @@
 import type { ExternalMediaAttributes, MediaADFAttrs, RichMediaLayout } from '@atlaskit/adf-schema';
 import type { LayoutIcon } from '@atlaskit/editor-common/card';
+import { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
 import type { Node as ProseMirrorNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
@@ -19,3 +20,4 @@ export declare const getSelectedLayoutIcon: (layoutIcons: LayoutIcon[], selected
  * @param mediaSingleNode node to be checked
  */
 export declare const canShowSwitchButtons: (mediaSingleNode?: ProseMirrorNode) => boolean | null;
+export declare const updateToFullHeightSeparator: (items: FloatingToolbarItem<Command>[]) => void;

package/dist/types-ts4.5/nodeviews/mediaNodeView/media.d.ts

@@ -21,6 +21,7 @@ export interface MediaNodeProps extends ReactNodeProps, ImageLoaderProps {
     mediaProvider?: Promise<MediaProvider>;
     isLoading?: boolean;
     mediaOptions?: MediaOptions;
+    isViewOnly?: boolean;
 }
 interface MediaNodeState {
     viewMediaClientConfig?: MediaClientConfig;

package/dist/types-ts4.5/ui/toolbar/alt-text.d.ts

@@ -1,8 +1,9 @@
 import type { IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Command, FloatingToolbarButton, FloatingToolbarConfig } from '@atlaskit/editor-common/types';
+import type { Command, FloatingToolbarButton, FloatingToolbarConfig, FloatingToolbarOverflowDropdownOptions } from '@atlaskit/editor-common/types';
 import type { ForceFocusSelector } from '@atlaskit/editor-plugin-floating-toolbar';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { NodeType } from '@atlaskit/editor-prosemirror/model';
+import { type EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { MediaToolbarBaseConfig } from '../../types';
 export declare const altTextButton: (intl: IntlShape, state: EditorState, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => FloatingToolbarButton<Command>;
 interface AltTextToolbarOptions {
@@ -10,4 +11,5 @@ interface AltTextToolbarOptions {
     forceFocusSelector?: ForceFocusSelector;
 }
 export declare const getAltTextToolbar: (toolbarBaseConfig: MediaToolbarBaseConfig, options?: AltTextToolbarOptions) => FloatingToolbarConfig;
+export declare const getAltTextDropdownOption: (state: EditorState, formatMessage: IntlShape['formatMessage'], allowAltTextOnImages?: boolean, selectedNodeType?: NodeType, editorAnalyticsAPI?: EditorAnalyticsAPI) => FloatingToolbarOverflowDropdownOptions<Command>;
 export {};

package/dist/types-ts4.5/ui/toolbar/pixel-resizing.d.ts

@@ -1,4 +1,8 @@
-import { FloatingToolbarConfig } from '@atlaskit/editor-common/types';
+import { IntlShape } from 'react-intl-next';
+import { FloatingToolbarConfig, FloatingToolbarOverflowDropdownOptions, Command } from '@atlaskit/editor-common/types';
+import { NodeType } from '@atlaskit/editor-prosemirror/model';
+import { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Props } from '../../pm-plugins/pixel-resizing/ui';
-import { MediaToolbarBaseConfig } from '../../types';
+import { MediaOptions, MediaToolbarBaseConfig } from '../../types';
 export declare const getPixelResizingToolbar: (toolbarBaseConfig: MediaToolbarBaseConfig, { pluginInjectionApi, intl, pluginState, hoverDecoration, isEditorFullWidthEnabled, }: Omit<Props, 'editorView' | 'selectedMediaSingleNode'>) => FloatingToolbarConfig;
+export declare const getResizeDropdownOption: (mediaOptions: MediaOptions, state: EditorState, formatMessage: IntlShape['formatMessage'], selectedNodeType?: NodeType) => FloatingToolbarOverflowDropdownOptions<Command>;

package/dist/types-ts4.5/ui/toolbar/utils.d.ts

@@ -1,5 +1,6 @@
 import type { ExternalMediaAttributes, MediaADFAttrs, RichMediaLayout } from '@atlaskit/adf-schema';
 import type { LayoutIcon } from '@atlaskit/editor-common/card';
+import { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
 import type { Node as ProseMirrorNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
@@ -19,3 +20,4 @@ export declare const getSelectedLayoutIcon: (layoutIcons: LayoutIcon[], selected
  * @param mediaSingleNode node to be checked
  */
 export declare const canShowSwitchButtons: (mediaSingleNode?: ProseMirrorNode) => boolean | null;
+export declare const updateToFullHeightSeparator: (items: FloatingToolbarItem<Command>[]) => void;