@atlaskit/editor-plugin-media 2.3.8 → 2.3.9

package/dist/es2019/{ui/PixelEntry/index.js → pm-plugins/pixel-resizing/ui/pixel-entry.js}

@@ -3,22 +3,25 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState, useRef, Fragment } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { jsx, css } from '@emotion/react';
 import Button from '@atlaskit/button';
+import { IconButton } from '@atlaskit/button/new';
 import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
 import Form, { Field } from '@atlaskit/form';
-import { Box, Text, xcss } from '@atlaskit/primitives';
+import CloseIcon from '@atlaskit/icon/core/close';
+import { Inline, Box, Text, xcss } from '@atlaskit/primitives';
 import Textfield from '@atlaskit/textfield';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
-import { PIXELENTRY_MIGRATION_BUTTON_TESTID } from './constants';
-import { pixelEntryForm, pixelEntryHiddenSubmit, pixelSizingFullWidthLabelStyles, pixelSizingHeightInput, pixelSizingInput, pixelSizingWidthInput, pixelSizingWrapper } from './styles';
+import { PIXEL_RESIZING_TOOLBAR_WIDTH, PIXEL_VIEW_MODE_TOOLBAR_WIDTH, PIXELENTRY_MIGRATION_BUTTON_TESTID } from './constants';
+import { pixelEntryForm, pixelEntryHiddenSubmit, pixelSizingHeightInput, pixelSizingInput, pixelSizingWidthInput, pixelSizingWrapper } from './styles';
 const pixelSizingLabel = xcss({
   gridArea: 'label',
   lineHeight: "var(--ds-space-300, 24px)"
 });
-export const PixelEntry = ({
+export const PixelEntryComponent = ({
   width,
   mediaWidth,
   mediaHeight,
@@ -30,7 +33,9 @@ export const PixelEntry = ({
     formatMessage
   },
   showMigration,
-  onMigrate
+  onMigrate,
+  onCloseAndSave,
+  isViewMode
 }) => {
   const ratioWidth = useMemo(() => {
     return mediaHeight / mediaWidth;
@@ -78,6 +83,37 @@ export const PixelEntry = ({
     }
   };
 
+  // Handle submit when user presses enter or click close button in PixelEntryComponentNext
+  const handleCloseAndSave = useCallback(data => {
+    if (data.inputWidth === '' || data.inputHeight === '') {
+      return;
+    }
+    if (onCloseAndSave) {
+      let widthToBeSubmitted = data.inputWidth;
+      let validation = 'valid';
+      if (data.inputWidth < minWidth) {
+        widthToBeSubmitted = minWidth;
+        validation = 'less-than-min';
+      }
+      if (data.inputWidth > maxWidth) {
+        widthToBeSubmitted = maxWidth;
+        validation = 'greater-than-max';
+      }
+
+      // If user keeps submitting an invalid input, node width attribute will be updated with the same value
+      // and won't upadte the state in useEffect (since width is the same)
+      // Thus, we set the state here to always display the correct dimension
+      if (validation !== 'valid') {
+        setComputedWidth(widthToBeSubmitted);
+        setComputedHeight(Math.round(ratioWidth * widthToBeSubmitted));
+      }
+      onCloseAndSave({
+        width: widthToBeSubmitted,
+        validation
+      });
+    }
+  }, [maxWidth, minWidth, onCloseAndSave, ratioWidth]);
+
   // Handle updating computed fields based on
   const handleOnChange = useCallback(type => event => {
     const value = parseInt(event.currentTarget.value);
@@ -113,6 +149,17 @@ export const PixelEntry = ({
       testId: PIXELENTRY_MIGRATION_BUTTON_TESTID
     }, formatMessage(messages.migrationButtonText)));
   }
+  if (editorExperiment('platform_editor_controls', 'variant1')) {
+    return jsx(PixelEntryComponentNext, {
+      maxWidth: maxWidth,
+      formatMessage: formatMessage,
+      handleFieldChange: handleOnChange,
+      computedWidth: computedWidth,
+      computedHeight: computedHeight,
+      handleCloseAndSave: handleCloseAndSave,
+      isViewMode: isViewMode
+    });
+  }
   return (
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     jsx("div", {
@@ -143,7 +190,7 @@ export const PixelEntry = ({
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
         , _extends({}, fieldProps, {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
           css: [pixelSizingWidthInput, pixelSizingInput],
           appearance: "none",
           isCompact: true,
@@ -169,7 +216,7 @@ export const PixelEntry = ({
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
         , _extends({}, fieldProps, {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
           css: [pixelSizingHeightInput, pixelSizingInput],
           appearance: "none",
           isCompact: true,
@@ -184,15 +231,119 @@ export const PixelEntry = ({
     }))
   );
 };
-export const FullWidthDisplay = ({
-  intl: {
-    formatMessage
-  }
+const pixelEntryWrapperStyles = xcss({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  width: `${PIXEL_RESIZING_TOOLBAR_WIDTH}px`
+});
+const pixelEntryWrapperViewModeStyles = xcss({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  width: `${PIXEL_VIEW_MODE_TOOLBAR_WIDTH}px`
+});
+const fieldStyles = css({
+  // eslint-disable-next-line  @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-ds--text-field--input]': {
+    paddingBlock: "var(--ds-space-0, 0px)",
+    paddingInline: "var(--ds-space-100, 8px)"
+  },
+  flex: '1'
+});
+const dividerStyles = xcss({
+  width: '1px',
+  height: "var(--ds-space-500, 40px)",
+  background: "var(--ds-border, #091E4224)",
+  marginInlineEnd: 'space.050'
+});
+export const PixelEntryComponentNext = ({
+  maxWidth,
+  formatMessage,
+  handleFieldChange,
+  computedWidth,
+  computedHeight,
+  handleCloseAndSave,
+  isViewMode
 }) => {
-  return (
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    jsx("div", {
-      css: pixelSizingFullWidthLabelStyles
-    }, jsx(Text, null, formatMessage(messages.fullWidthLabel)))
-  );
+  const widthInputRef = useRef(null);
+  useEffect(() => {
+    if (widthInputRef.current) {
+      if (isViewMode) {
+        widthInputRef.current.blur();
+      } else {
+        widthInputRef.current.focus();
+      }
+    }
+  }, [isViewMode, widthInputRef]);
+  const handleKeyDown = useCallback(event => {
+    if (event.key === 'Enter') {
+      handleCloseAndSave({
+        inputWidth: computedWidth,
+        inputHeight: computedHeight
+      });
+    }
+  }, [computedWidth, computedHeight, handleCloseAndSave]);
+  return jsx(Box, {
+    xcss: [pixelEntryWrapperStyles, isViewMode && pixelEntryWrapperViewModeStyles]
+  }, jsx(Inline, {
+    alignBlock: "center",
+    spread: "space-between"
+  }, jsx(Box, {
+    paddingInlineStart: "space.100"
+  }, jsx(Text, {
+    color: "color.text.subtlest"
+  }, formatMessage(messages.inputWidthLabel))), jsx("div", {
+    css: fieldStyles
+  }, jsx(Tooltip, {
+    hideTooltipOnMouseDown: true,
+    hideTooltipOnClick: true,
+    position: "top",
+    content: formatMessage(messages.inputWidthTooltip, {
+      maxWidth
+    })
+  }, jsx(Textfield, {
+    name: "inputWidth",
+    value: computedWidth,
+    ref: widthInputRef,
+    height: "var(--ds-space-250, 20px)",
+    appearance: "none",
+    pattern: "\\d*",
+    "aria-label": formatMessage(messages.inputWidthAriaLabel, {
+      maxWidth
+    }),
+    onChange: handleFieldChange('inputWidth'),
+    onKeyDown: handleKeyDown
+  }))), jsx(Box, {
+    paddingInlineStart: "space.100"
+  }, jsx(Text, {
+    color: "color.text.subtlest"
+  }, formatMessage(messages.inputHeightTooltip))), jsx("div", {
+    css: fieldStyles
+  }, jsx(Tooltip, {
+    hideTooltipOnMouseDown: true,
+    hideTooltipOnClick: true,
+    content: formatMessage(messages.inputHeightTooltip),
+    position: "top"
+  }, jsx(Textfield, {
+    name: "inputHeight",
+    value: computedHeight,
+    height: "var(--ds-space-250, 20px)",
+    appearance: "none",
+    pattern: "\\d*",
+    "aria-label": formatMessage(messages.inputHeightAriaLabel),
+    onChange: handleFieldChange('inputHeight'),
+    onKeyDown: handleKeyDown
+  }))), !isViewMode && jsx(Fragment, null, jsx(Box, {
+    xcss: dividerStyles
+  }), jsx(IconButton, {
+    icon: () => jsx(CloseIcon, {
+      label: "",
+      color: "var(--ds-icon-subtlest, #626F86)"
+    }),
+    label: formatMessage(messages.closePixelEntry),
+    appearance: "subtle",
+    onClick: () => {
+      handleCloseAndSave({
+        inputWidth: computedWidth,
+        inputHeight: computedHeight
+      });
+    }
+  }))));
 };

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

@@ -239,10 +239,10 @@ export const setBorderMark = editorAnalyticsAPI => attrs => (state, dispatch) =>
   }
   return true;
 };
-export const updateMediaSingleWidth = editorAnalyticsAPI => (width, validation, inputMethod, layout) => (state, dispatch) => {
+export const updateMediaSingleWidthTr = (editorAnalyticsAPI, state, width, validation, inputMethod, layout) => {
   const selectedMediaSingleNode = getSelectedMediaSingle(state);
   if (!selectedMediaSingleNode) {
-    return false;
+    return null;
   }
   const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
     ...selectedMediaSingleNode.node.attrs,
@@ -264,6 +264,13 @@ export const updateMediaSingleWidth = editorAnalyticsAPI => (width, validation,
   if (payload) {
     editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(tr);
   }
+  return tr;
+};
+export const updateMediaSingleWidth = editorAnalyticsAPI => (width, validation, inputMethod, layout) => (state, dispatch) => {
+  const tr = updateMediaSingleWidthTr(editorAnalyticsAPI, state, width, validation, inputMethod, layout);
+  if (!tr) {
+    return false;
+  }
   if (dispatch) {
     dispatch(tr);
   }

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

@@ -4,11 +4,9 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit
 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 { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { contains, findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { contains, findParentNodeOfType, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import GrowDiagonalIcon from '@atlaskit/icon/core/grow-diagonal';
@@ -30,20 +28,23 @@ import { getPluginState as getMediaAltTextPluginState } from '../../pm-plugins/a
 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 { FullWidthDisplay, PixelEntry } from '../../ui/PixelEntry';
 import { altTextButton, getAltTextToolbar } from './alt-text';
-import { changeMediaCardToInline, changeMediaSingleToMediaInline, setBorderMark, toggleBorderMark, updateMediaSingleWidth } from './commands';
+import { changeMediaCardToInline, changeMediaSingleToMediaInline, setBorderMark, toggleBorderMark } from './commands';
 import { commentButton } from './comments';
 import { shouldShowImageBorder } from './imageBorder';
 import { LayoutGroup } from './layout-group';
 import { getLinkingDropdownOptions, getLinkingToolbar, getOpenLinkToolbarButtonOption, shouldShowMediaLinkToolbar } from './linking';
 import { LinkToolbarAppearance } from './linking-toolbar-appearance';
 import { generateMediaInlineFloatingToolbar } from './mediaInline';
-import { calcNewLayout, canShowSwitchButtons, downloadMedia, getMaxToolbarWidth, getPixelWidthOfElement, getSelectedLayoutIcon, getSelectedMediaSingle, getSelectedNearestMediaContainerNodeAttrs, removeMediaGroupNode } from './utils';
+import { getPixelResizingToolbar } from './pixel-resizing';
+import { canShowSwitchButtons, downloadMedia, getMaxToolbarWidth, getSelectedLayoutIcon, getSelectedMediaSingle, getSelectedNearestMediaContainerNodeAttrs, removeMediaGroupNode } from './utils';
 const mediaTypeMessages = {
   image: messages.file_image_is_selected,
   video: messages.file_video_is_selected,
@@ -372,73 +373,17 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         type: 'custom',
         fallback: [],
         render: editorView => {
-          var _widthPlugin$sharedSt2, _pluginInjectionApi$m, _pluginInjectionApi$m2;
           if (!editorView || !selectedMediaSingleNode) {
             return null;
           }
-          const {
-            state,
-            dispatch
-          } = editorView;
-          const contentWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength) || akEditorDefaultLayoutWidth;
-          const selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
-          if (!selectedMediaNode) {
-            return null;
-          }
-          const {
-            width: mediaSingleWidth,
-            widthType,
-            layout
-          } = selectedMediaSingleNode.node.attrs;
-          const {
-            width: mediaWidth,
-            height: mediaHeight
-          } = selectedMediaNode.attrs;
-          const maxWidthForNestedNode = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$m = pluginInjectionApi.media) === null || _pluginInjectionApi$m === void 0 ? void 0 : (_pluginInjectionApi$m2 = _pluginInjectionApi$m.sharedState.currentState()) === null || _pluginInjectionApi$m2 === void 0 ? void 0 : _pluginInjectionApi$m2.currentMaxWidth;
-          const maxWidth = maxWidthForNestedNode || akEditorFullWidthLayoutWidth;
-          const isVideoFile = isVideo(selectedMediaNode.attrs.__fileMimeType);
-          const minWidth = calcMinWidth(isVideoFile, maxWidthForNestedNode || contentWidth);
-          const hasPixelType = widthType === 'pixel';
-          const pixelWidthFromElement = getPixelWidthOfElement(editorView, selectedMediaSingleNode.pos + 1,
-          // get pos of media node
-          mediaWidth || DEFAULT_IMAGE_WIDTH);
-          const pixelWidth = hasPixelType ? mediaSingleWidth : pixelWidthFromElement;
-
-          //hasParentNode will return falsey value if selection depth === 0
-          const isNested = hasParentNode(n => n.type !== state.schema.nodes.doc)(state.selection);
           return /*#__PURE__*/React.createElement(PixelEntry, {
+            editorView: editorView,
             intl: intl,
-            width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
-            showMigration: !pluginState.isResizing && !hasPixelType,
-            mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
-            mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
-            minWidth: minWidth,
-            maxWidth: maxWidth,
-            onChange: valid => {
-              if (valid) {
-                hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true, 'warning')(editorView.state, dispatch, editorView);
-              } else {
-                hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false)(editorView.state, dispatch, editorView);
-              }
-            },
-            onSubmit: ({
-              width,
-              validation
-            }) => {
-              var _pluginInjectionApi$a6;
-              const newLayout = calcNewLayout(width, layout, contentWidth, options.fullWidthEnabled, isNested);
-              updateMediaSingleWidth(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
-            },
-            onMigrate: () => {
-              const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
-                ...selectedMediaSingleNode.node.attrs,
-                width: pixelWidthFromElement,
-                widthType: 'pixel'
-              });
-              tr.setMeta('scrollIntoView', false);
-              tr.setSelection(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
-              dispatch(tr);
-            }
+            selectedMediaSingleNode: selectedMediaSingleNode,
+            pluginInjectionApi: pluginInjectionApi,
+            pluginState: pluginState,
+            hoverDecoration: hoverDecoration,
+            isEditorFullWidthEnabled: options.fullWidthEnabled
           });
         }
       };
@@ -496,14 +441,14 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
               };
               const openLink = () => {
                 if (editorView) {
-                  var _pluginInjectionApi$a7;
+                  var _pluginInjectionApi$a6;
                   const {
                     state: {
                       tr
                     },
                     dispatch
                   } = editorView;
-                  pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions.attachAnalyticsEvent({
+                  pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions.attachAnalyticsEvent({
                     eventType: EVENT_TYPE.TRACK,
                     action: ACTION.VISITED,
                     actionSubject: ACTION_SUBJECT.MEDIA,
@@ -577,8 +522,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     });
   }
   if (allowAltTextOnImages && editorExperiment('platform_editor_controls', 'control')) {
-    var _pluginInjectionApi$a8;
-    toolbarButtons.push(altTextButton(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
+    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'
     });
   }
@@ -691,7 +636,9 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     providerFactory,
     allowMediaInline,
     allowResizing,
-    isViewOnly
+    isViewOnly,
+    allowResizingInTables,
+    allowAdvancedToolBarOptions
   } = options;
   const mediaPluginState = stateKey.getState(state);
   const mediaLinkingState = getMediaLinkingState(state);
@@ -723,6 +670,22 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
       });
     }
   }
+  const {
+    selection
+  } = state;
+  const isWithinTable = hasParentNodeOfType([state.schema.nodes.table])(selection);
+  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_media_extended_resize_experience')) {
+    const mediaPixelResizingPluginState = getMediaPixelResizingPluginState(state);
+    if (mediaPixelResizingPluginState !== null && mediaPixelResizingPluginState !== void 0 && mediaPixelResizingPluginState.isPixelEditorOpen) {
+      return getPixelResizingToolbar(baseToolbar, {
+        intl,
+        pluginInjectionApi,
+        pluginState: mediaPluginState,
+        hoverDecoration,
+        isEditorFullWidthEnabled: options.fullWidthEnabled
+      });
+    }
+  }
   let items = [];
   const parentMediaGroupNode = findParentNodeOfType(mediaGroup)(state.selection);
   let selectedNodeType;
@@ -730,7 +693,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$a9, _pluginInjectionApi$f3, _pluginInjectionApi$f4;
+    var _pluginInjectionApi$a8, _pluginInjectionApi$f3, _pluginInjectionApi$f4;
     const mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele;
@@ -739,7 +702,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : (_pluginInjectionApi$f4 = _pluginInjectionApi$f3.actions) === null || _pluginInjectionApi$f4 === void 0 ? void 0 : _pluginInjectionApi$f4.forceFocusSelector, isViewOnly);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : (_pluginInjectionApi$f4 = _pluginInjectionApi$f3.actions) === null || _pluginInjectionApi$f4 === void 0 ? void 0 : _pluginInjectionApi$f4.forceFocusSelector, isViewOnly);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
   } else {
@@ -753,7 +716,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
   }
   if (!mediaPluginState.isResizing && editorExperiment('platform_editor_controls', 'variant1')) {
-    var _pluginInjectionApi$a10;
+    var _pluginInjectionApi$a9;
     const lastItem = items.at(-1);
     if ((lastItem === null || lastItem === void 0 ? void 0 : lastItem.type) === 'separator') {
       lastItem.fullHeight = true;
@@ -768,21 +731,17 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
       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$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions),
+        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: altTextTitle
+          label: ""
         })
       }, {
         title: 'Resize',
-        onClick: () => {
-          // Ignored via go/ees007
-          // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
-          // TODO open resize dialog?
-          return true;
-        },
+        onClick: openPixelEditor(),
         icon: /*#__PURE__*/React.createElement(GrowHorizontalIcon, {
-          label: "Resize"
-        })
+          label: ""
+        }),
+        testId: 'media-pixel-resizing-dropdown-option'
       }, {
         type: 'separator'
       }, {
@@ -794,13 +753,13 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
           return true;
         },
         icon: /*#__PURE__*/React.createElement(CopyIcon, {
-          label: "Copy"
+          label: ""
         })
       }, {
         title: 'Delete',
         onClick: remove,
         icon: /*#__PURE__*/React.createElement(DeleteIcon, {
-          label: "Delete"
+          label: ""
         })
       }]
     });

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

@@ -153,7 +153,7 @@ export const getLinkingDropdownOptions = (editorState, intl, mediaLinkingState,
         return true;
       },
       icon: /*#__PURE__*/React.createElement(LinkIcon, {
-        label: title
+        label: ""
       })
     }];
   }

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { PixelEntry } from '../../pm-plugins/pixel-resizing/ui';
+import { PIXEL_RESIZING_TOOLBAR_WIDTH } from '../../pm-plugins/pixel-resizing/ui/constants';
+import { getSelectedMediaSingle } from './utils';
+export const getPixelResizingToolbar = (toolbarBaseConfig, {
+  pluginInjectionApi,
+  intl,
+  pluginState,
+  hoverDecoration,
+  isEditorFullWidthEnabled
+}) => ({
+  ...toolbarBaseConfig,
+  width: PIXEL_RESIZING_TOOLBAR_WIDTH,
+  scrollable: true,
+  items: [{
+    type: 'custom',
+    fallback: [],
+    render: editorView => {
+      if (!editorView) {
+        return null;
+      }
+      const selectedMediaSingleNode = getSelectedMediaSingle(editorView.state);
+      if (!editorView || !selectedMediaSingleNode) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(PixelEntry, {
+        editorView: editorView,
+        intl: intl,
+        selectedMediaSingleNode: selectedMediaSingleNode,
+        pluginInjectionApi: pluginInjectionApi,
+        pluginState: pluginState,
+        hoverDecoration: hoverDecoration,
+        isEditorFullWidthEnabled: isEditorFullWidthEnabled
+      });
+    }
+  }]
+});

package/dist/esm/mediaPlugin.js

@@ -24,6 +24,7 @@ import keymapMediaSinglePlugin from './pm-plugins/keymap-media';
 import linkingPlugin from './pm-plugins/linking';
 import keymapLinkingPlugin from './pm-plugins/linking/keymap';
 import { createPlugin } from './pm-plugins/main';
+import { createPlugin as createMediaPixelResizingPlugin } from './pm-plugins/pixel-resizing';
 import { stateKey } from './pm-plugins/plugin-key';
 import { createMediaIdentifierArray, extractMediaNodes } from './pm-plugins/utils/media-common';
 import { insertMediaAsMediaSingle as _insertMediaAsMediaSingle } from './pm-plugins/utils/media-single';
@@ -234,6 +235,12 @@ export var mediaPlugin = function mediaPlugin(_ref3) {
           }
         });
       }
+      if (options && options.allowAdvancedToolBarOptions && options.allowResizing && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_media_extended_resize_experience')) {
+        pmPlugins.push({
+          name: 'mediaPixelResizing',
+          plugin: createMediaPixelResizingPlugin
+        });
+      }
       pmPlugins.push({
         name: 'mediaSelectionHandler',
         plugin: function plugin() {

package/dist/esm/pm-plugins/pixel-resizing/commands.js

@@ -0,0 +1,16 @@
+import { createCommand } from './index';
+export var openPixelEditor = function openPixelEditor() {
+  return createCommand({
+    type: 'openPixelEditor'
+  });
+};
+export var closePixelEditor = function closePixelEditor() {
+  return createCommand({
+    type: 'closePixelEditor'
+  });
+};
+export var closePixelEditorAndSave = function closePixelEditorAndSave(saveTransform) {
+  return createCommand({
+    type: 'closePixelEditor'
+  }, saveTransform);
+};

package/dist/esm/pm-plugins/pixel-resizing/index.js

@@ -0,0 +1,25 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import reducer from './reducer';
+var pluginKey = new PluginKey('mediaPixelResizingPlugin');
+var _pluginFactory = pluginFactory(pluginKey, reducer, {
+    onSelectionChanged: function onSelectionChanged() {
+      return {
+        isPixelEditorOpen: false
+      };
+    }
+  }),
+  createPluginState = _pluginFactory.createPluginState,
+  createCommand = _pluginFactory.createCommand,
+  getPluginState = _pluginFactory.getPluginState;
+export var createPlugin = function createPlugin(_ref) {
+  var dispatch = _ref.dispatch;
+  return new SafePlugin({
+    state: createPluginState(dispatch, {
+      isPixelEditorOpen: false
+    }),
+    key: pluginKey
+  });
+};
+export { createCommand, getPluginState };

package/dist/esm/pm-plugins/pixel-resizing/reducer.js

@@ -0,0 +1,21 @@
+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; }
+export default (function (state, action) {
+  switch (action.type) {
+    case 'openPixelEditor':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          isPixelEditorOpen: true
+        });
+      }
+    case 'closePixelEditor':
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          isPixelEditorOpen: false
+        });
+      }
+    default:
+      return state;
+  }
+});