@atlaskit/editor-plugin-media 2.3.7 → 2.3.9

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

@@ -14,11 +14,9 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _card = require("@atlaskit/editor-common/card");
 var _media = require("@atlaskit/editor-common/media");
 var _mediaInline = require("@atlaskit/editor-common/media-inline");
-var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
 var _growDiagonal = _interopRequireDefault(require("@atlaskit/icon/core/grow-diagonal"));
@@ -40,19 +38,22 @@ var _altText = require("../../pm-plugins/alt-text");
 var _commands = require("../../pm-plugins/alt-text/commands");
 var _linking = require("../../pm-plugins/commands/linking");
 var _linking2 = require("../../pm-plugins/linking");
+var _pixelResizing = require("../../pm-plugins/pixel-resizing");
+var _commands2 = require("../../pm-plugins/pixel-resizing/commands");
+var _ui = require("../../pm-plugins/pixel-resizing/ui");
 var _pluginKey = require("../../pm-plugins/plugin-key");
 var _currentMediaNode = require("../../pm-plugins/utils/current-media-node");
-var _mediaSingle2 = require("../../pm-plugins/utils/media-single");
+var _mediaSingle = require("../../pm-plugins/utils/media-single");
 var _ImageBorder = _interopRequireDefault(require("../../ui/ImageBorder"));
-var _PixelEntry = require("../../ui/PixelEntry");
 var _altText2 = require("./alt-text");
-var _commands2 = require("./commands");
+var _commands3 = require("./commands");
 var _comments = require("./comments");
 var _imageBorder = require("./imageBorder");
 var _layoutGroup = require("./layout-group");
 var _linking3 = require("./linking");
 var _linkingToolbarAppearance = require("./linking-toolbar-appearance");
 var _mediaInline2 = require("./mediaInline");
+var _pixelResizing2 = require("./pixel-resizing");
 var _utils2 = require("./utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -89,7 +90,7 @@ var handleShowMediaViewer = exports.handleShowMediaViewer = function handleShowM
   api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.media.commands.showMediaViewer(selectedNodeAttrs));
 };
 var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, editorAnalyticsAPI, forceFocusSelector, isViewOnly) {
-  var _mediaPluginState$med;
+  var _mediaPluginState$med, _pluginInjectionApi$c;
   if (isViewOnly) {
     return [];
   }
@@ -104,7 +105,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     selected: false,
     focusEditoronEnter: true,
     disabled: false,
-    onClick: (0, _commands2.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
+    onClick: (0, _commands3.changeMediaCardToInline)(editorAnalyticsAPI, forceFocusSelector),
     title: intl.formatMessage(_messages.cardMessages.inlineTitle),
     testId: 'inline-appearance',
     className: 'inline-appearance' // a11y. uses to force focus on item
@@ -138,6 +139,7 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
         api: pluginInjectionApi
       })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
     },
+    disabled: (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.sharedState) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.currentState()) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.mode) === 'offline',
     supportsViewMode: true
   }, {
     type: 'separator'
@@ -210,11 +212,11 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         return /*#__PURE__*/_react.default.createElement(_ImageBorder.default, {
           toggleBorder: function toggleBorder() {
             var _pluginInjectionApi$a;
-            (0, _commands2.toggleBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(state, dispatch);
+            (0, _commands3.toggleBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(state, dispatch);
           },
           setBorder: function setBorder(attrs) {
             var _pluginInjectionApi$a2;
-            (0, _commands2.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(attrs)(state, dispatch);
+            (0, _commands3.setBorderMark)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions)(attrs)(state, dispatch);
           },
           borderMark: borderMark,
           intl: intl
@@ -297,7 +299,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
                 LEGACY_fallbackIcon: _card.IconInline
               });
             },
-            onClick: (0, _commands2.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
+            onClick: (0, _commands3.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
             testId: 'image-inline-appearance'
           }, {
             type: 'button',
@@ -325,7 +327,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           var _options2 = [{
             id: 'editor.media.convert.mediainline',
             title: inlineSwitcherTitle,
-            onClick: (0, _commands2.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
+            onClick: (0, _commands3.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions),
             icon: /*#__PURE__*/_react.default.createElement(_imageInline.default, {
               color: "currentColor",
               spacing: "spacious",
@@ -381,69 +383,17 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         type: 'custom',
         fallback: [],
         render: function render(editorView) {
-          var _widthPlugin$sharedSt2, _pluginInjectionApi$m;
           if (!editorView || !selectedMediaSingleNode) {
             return null;
           }
-          var state = editorView.state,
-            dispatch = editorView.dispatch;
-          var contentWidth = (widthPlugin === null || widthPlugin === void 0 || (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength) || _editorSharedStyles.akEditorDefaultLayoutWidth;
-          var selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
-          if (!selectedMediaNode) {
-            return null;
-          }
-          var _selectedMediaSingleN = selectedMediaSingleNode.node.attrs,
-            mediaSingleWidth = _selectedMediaSingleN.width,
-            widthType = _selectedMediaSingleN.widthType,
-            layout = _selectedMediaSingleN.layout;
-          var _selectedMediaNode$at = selectedMediaNode.attrs,
-            mediaWidth = _selectedMediaNode$at.width,
-            mediaHeight = _selectedMediaNode$at.height;
-          var maxWidthForNestedNode = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.media) === null || _pluginInjectionApi$m === void 0 || (_pluginInjectionApi$m = _pluginInjectionApi$m.sharedState.currentState()) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.currentMaxWidth;
-          var maxWidth = maxWidthForNestedNode || _editorSharedStyles.akEditorFullWidthLayoutWidth;
-          var isVideoFile = (0, _mediaSingle2.isVideo)(selectedMediaNode.attrs.__fileMimeType);
-          var minWidth = (0, _mediaSingle.calcMinWidth)(isVideoFile, maxWidthForNestedNode || contentWidth);
-          var hasPixelType = widthType === 'pixel';
-          var pixelWidthFromElement = (0, _utils2.getPixelWidthOfElement)(editorView, selectedMediaSingleNode.pos + 1,
-          // get pos of media node
-          mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH);
-          var pixelWidth = hasPixelType ? mediaSingleWidth : pixelWidthFromElement;
-
-          //hasParentNode will return falsey value if selection depth === 0
-          var isNested = (0, _utils.hasParentNode)(function (n) {
-            return n.type !== state.schema.nodes.doc;
-          })(state.selection);
-          return /*#__PURE__*/_react.default.createElement(_PixelEntry.PixelEntry, {
+          return /*#__PURE__*/_react.default.createElement(_ui.PixelEntry, {
+            editorView: editorView,
             intl: intl,
-            width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
-            showMigration: !pluginState.isResizing && !hasPixelType,
-            mediaWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
-            mediaHeight: mediaHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT,
-            minWidth: minWidth,
-            maxWidth: maxWidth,
-            onChange: function onChange(valid) {
-              if (valid) {
-                hoverDecoration === null || hoverDecoration === void 0 || hoverDecoration(mediaSingle, true, 'warning')(editorView.state, dispatch, editorView);
-              } else {
-                hoverDecoration === null || hoverDecoration === void 0 || hoverDecoration(mediaSingle, false)(editorView.state, dispatch, editorView);
-              }
-            },
-            onSubmit: function onSubmit(_ref3) {
-              var _pluginInjectionApi$a6;
-              var width = _ref3.width,
-                validation = _ref3.validation;
-              var newLayout = (0, _utils2.calcNewLayout)(width, layout, contentWidth, options.fullWidthEnabled, isNested);
-              (0, _commands2.updateMediaSingleWidth)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 ? void 0 : _pluginInjectionApi$a6.actions)(width, validation, 'floatingToolBar', newLayout)(state, dispatch);
-            },
-            onMigrate: function onMigrate() {
-              var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
-                width: pixelWidthFromElement,
-                widthType: 'pixel'
-              }));
-              tr.setMeta('scrollIntoView', false);
-              tr.setSelection(_state2.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
-              dispatch(tr);
-            }
+            selectedMediaSingleNode: selectedMediaSingleNode,
+            pluginInjectionApi: pluginInjectionApi,
+            pluginState: pluginState,
+            hoverDecoration: hoverDecoration,
+            isEditorFullWidthEnabled: options.fullWidthEnabled
           });
         }
       };
@@ -459,7 +409,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             type: 'custom',
             fallback: [],
             render: function render() {
-              return /*#__PURE__*/_react.default.createElement(_PixelEntry.FullWidthDisplay, {
+              return /*#__PURE__*/_react.default.createElement(_ui.FullWidthDisplay, {
                 intl: intl
               });
             }
@@ -497,10 +447,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               };
               var openLink = function openLink() {
                 if (editorView) {
-                  var _pluginInjectionApi$a7;
+                  var _pluginInjectionApi$a6;
                   var tr = editorView.state.tr,
                     dispatch = editorView.dispatch;
-                  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 || _pluginInjectionApi$a7.actions.attachAnalyticsEvent({
+                  pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a6 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a6 === void 0 || _pluginInjectionApi$a6.actions.attachAnalyticsEvent({
                     eventType: _analytics.EVENT_TYPE.TRACK,
                     action: _analytics.ACTION.VISITED,
                     actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
@@ -531,7 +481,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         var _mediaNode$attrs;
         var _selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
         var mediaNode = _selectedMediaSingleNode === null || _selectedMediaSingleNode === void 0 ? void 0 : _selectedMediaSingleNode.node.content.firstChild;
-        if (!(0, _mediaSingle2.isVideo)(mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.__fileMimeType)) {
+        if (!(0, _mediaSingle.isVideo)(mediaNode === null || mediaNode === void 0 || (_mediaNode$attrs = mediaNode.attrs) === null || _mediaNode$attrs === void 0 ? void 0 : _mediaNode$attrs.__fileMimeType)) {
+          var _pluginInjectionApi$c2;
           toolbarButtons.push({
             id: 'editor.media.viewer',
             testId: 'file-preview-toolbar-button',
@@ -546,6 +497,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
                 mediaPluginState: pluginState
               })) !== null && _handleShowMediaViewe2 !== void 0 ? _handleShowMediaViewe2 : false;
             },
+            disabled: (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c2 === void 0 || (_pluginInjectionApi$c2 = _pluginInjectionApi$c2.sharedState) === null || _pluginInjectionApi$c2 === void 0 || (_pluginInjectionApi$c2 = _pluginInjectionApi$c2.currentState()) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.mode) === 'offline',
             supportsViewMode: true
           }, {
             type: 'separator',
@@ -572,8 +524,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     });
   }
   if (allowAltTextOnImages && (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
-    var _pluginInjectionApi$a8;
-    toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions), {
+    var _pluginInjectionApi$a7;
+    toolbarButtons.push((0, _altText2.altTextButton)(intl, state, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a7 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a7 === void 0 ? void 0 : _pluginInjectionApi$a7.actions), {
       type: 'separator'
     });
   }
@@ -599,7 +551,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       var _mediaNode$attrs2;
       var _selectedMediaSingleNode2 = (0, _utils2.getSelectedMediaSingle)(state);
       var _mediaNode = _selectedMediaSingleNode2 === null || _selectedMediaSingleNode2 === void 0 ? void 0 : _selectedMediaSingleNode2.node.content.firstChild;
-      if (!(0, _mediaSingle2.isVideo)(_mediaNode === null || _mediaNode === void 0 || (_mediaNode$attrs2 = _mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
+      if (!(0, _mediaSingle.isVideo)(_mediaNode === null || _mediaNode === void 0 || (_mediaNode$attrs2 = _mediaNode.attrs) === null || _mediaNode$attrs2 === void 0 ? void 0 : _mediaNode$attrs2.__fileMimeType)) {
+        var _pluginInjectionApi$c3;
         toolbarButtons.push({
           id: 'editor.media.viewer',
           testId: 'file-preview-toolbar-button',
@@ -614,6 +567,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
               mediaPluginState: pluginState
             })) !== null && _handleShowMediaViewe3 !== void 0 ? _handleShowMediaViewe3 : false;
           },
+          disabled: (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c3 = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c3 === void 0 || (_pluginInjectionApi$c3 = _pluginInjectionApi$c3.sharedState) === null || _pluginInjectionApi$c3 === void 0 || (_pluginInjectionApi$c3 = _pluginInjectionApi$c3.currentState()) === null || _pluginInjectionApi$c3 === void 0 ? void 0 : _pluginInjectionApi$c3.mode) === 'offline',
           supportsViewMode: true
         }, {
           type: 'separator',
@@ -686,11 +640,13 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     providerFactory = options.providerFactory,
     allowMediaInline = options.allowMediaInline,
     allowResizing = options.allowResizing,
-    isViewOnly = options.isViewOnly;
+    isViewOnly = options.isViewOnly,
+    allowResizingInTables = options.allowResizingInTables,
+    allowAdvancedToolBarOptions = options.allowAdvancedToolBarOptions;
   var mediaPluginState = _pluginKey.stateKey.getState(state);
   var mediaLinkingState = (0, _linking2.getMediaLinkingState)(state);
-  var _ref4 = (_pluginInjectionApi$d3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d4 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions) !== null && _pluginInjectionApi$d3 !== void 0 ? _pluginInjectionApi$d3 : {},
-    hoverDecoration = _ref4.hoverDecoration;
+  var _ref3 = (_pluginInjectionApi$d3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d4 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions) !== null && _pluginInjectionApi$d3 !== void 0 ? _pluginInjectionApi$d3 : {},
+    hoverDecoration = _ref3.hoverDecoration;
   if (!mediaPluginState) {
     return;
   }
@@ -718,6 +674,20 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
       });
     }
   }
+  var selection = state.selection;
+  var isWithinTable = (0, _utils.hasParentNodeOfType)([state.schema.nodes.table])(selection);
+  if (allowAdvancedToolBarOptions && allowResizing && (!isWithinTable || allowResizingInTables === true) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_media_extended_resize_experience')) {
+    var mediaPixelResizingPluginState = (0, _pixelResizing.getPluginState)(state);
+    if (mediaPixelResizingPluginState !== null && mediaPixelResizingPluginState !== void 0 && mediaPixelResizingPluginState.isPixelEditorOpen) {
+      return (0, _pixelResizing2.getPixelResizingToolbar)(baseToolbar, {
+        intl: intl,
+        pluginInjectionApi: pluginInjectionApi,
+        pluginState: mediaPluginState,
+        hoverDecoration: hoverDecoration,
+        isEditorFullWidthEnabled: options.fullWidthEnabled
+      });
+    }
+  }
   var items = [];
   var parentMediaGroupNode = (0, _utils.findParentNodeOfType)(mediaGroup)(state.selection);
   var selectedNodeType;
@@ -725,7 +695,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$a9, _pluginInjectionApi$f2;
+    var _pluginInjectionApi$a8, _pluginInjectionApi$f2;
     var mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele;
@@ -734,7 +704,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
       // 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 || (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector, isViewOnly);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a8 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a8 === void 0 ? void 0 : _pluginInjectionApi$a8.actions, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 || (_pluginInjectionApi$f2 = _pluginInjectionApi$f2.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector, isViewOnly);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
     items = (0, _mediaInline2.generateMediaInlineFloatingToolbar)(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, options);
   } else {
@@ -748,7 +718,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
   }
   if (!mediaPluginState.isResizing && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
-    var _pluginInjectionApi$a10;
+    var _pluginInjectionApi$a9;
     var lastItem = items.at(-1);
     if ((lastItem === null || lastItem === void 0 ? void 0 : lastItem.type) === 'separator') {
       lastItem.fullHeight = true;
@@ -763,39 +733,35 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
       type: 'overflow-dropdown',
       options: [].concat((0, _toConsumableArray2.default)((0, _linking3.getLinkingDropdownOptions)(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly)), [{
         title: altTextTitle,
-        onClick: (0, _commands.openMediaAltTextMenu)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a10 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a10 === void 0 ? void 0 : _pluginInjectionApi$a10.actions),
+        onClick: (0, _commands.openMediaAltTextMenu)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a9 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a9 === void 0 ? void 0 : _pluginInjectionApi$a9.actions),
         icon: /*#__PURE__*/_react.default.createElement(_text.default, {
-          label: altTextTitle
+          label: ""
         })
       }, {
         title: 'Resize',
-        onClick: function onClick() {
-          // Ignored via go/ees007
-          // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
-          // TODO open resize dialog?
-          return true;
-        },
+        onClick: (0, _commands2.openPixelEditor)(),
         icon: /*#__PURE__*/_react.default.createElement(_growHorizontal.default, {
-          label: "Resize"
-        })
+          label: ""
+        }),
+        testId: 'media-pixel-resizing-dropdown-option'
       }, {
         type: 'separator'
       }, {
         title: 'Copy',
         onClick: function onClick() {
-          var _pluginInjectionApi$c, _pluginInjectionApi$f3;
-          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute( // @ts-ignore
+          var _pluginInjectionApi$c4, _pluginInjectionApi$f3;
+          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 || _pluginInjectionApi$c4.actions.execute( // @ts-ignore
           pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f3 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f3 === void 0 ? void 0 : _pluginInjectionApi$f3.commands.copyNode(nodeType));
           return true;
         },
         icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
-          label: "Copy"
+          label: ""
         })
       }, {
         title: 'Delete',
         onClick: remove,
         icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
-          label: "Delete"
+          label: ""
         })
       }])
     });

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

@@ -150,7 +150,7 @@ var getLinkingDropdownOptions = exports.getLinkingDropdownOptions = function get
         return true;
       },
       icon: /*#__PURE__*/_react.default.createElement(_link.default, {
-        label: _title
+        label: ""
       })
     }];
   }

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPixelResizingToolbar = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _ui = require("../../pm-plugins/pixel-resizing/ui");
+var _constants = require("../../pm-plugins/pixel-resizing/ui/constants");
+var _utils = require("./utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var getPixelResizingToolbar = exports.getPixelResizingToolbar = function getPixelResizingToolbar(toolbarBaseConfig, _ref) {
+  var pluginInjectionApi = _ref.pluginInjectionApi,
+    intl = _ref.intl,
+    pluginState = _ref.pluginState,
+    hoverDecoration = _ref.hoverDecoration,
+    isEditorFullWidthEnabled = _ref.isEditorFullWidthEnabled;
+  return _objectSpread(_objectSpread({}, toolbarBaseConfig), {}, {
+    width: _constants.PIXEL_RESIZING_TOOLBAR_WIDTH,
+    scrollable: true,
+    items: [{
+      type: 'custom',
+      fallback: [],
+      render: function render(editorView) {
+        if (!editorView) {
+          return null;
+        }
+        var selectedMediaSingleNode = (0, _utils.getSelectedMediaSingle)(editorView.state);
+        if (!editorView || !selectedMediaSingleNode) {
+          return null;
+        }
+        return /*#__PURE__*/_react.default.createElement(_ui.PixelEntry, {
+          editorView: editorView,
+          intl: intl,
+          selectedMediaSingleNode: selectedMediaSingleNode,
+          pluginInjectionApi: pluginInjectionApi,
+          pluginState: pluginState,
+          hoverDecoration: hoverDecoration,
+          isEditorFullWidthEnabled: isEditorFullWidthEnabled
+        });
+      }
+    }]
+  });
+};

package/dist/es2019/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 } from './pm-plugins/utils/media-single';
@@ -236,6 +237,12 @@ export const mediaPlugin = ({
           }) => keymapLinkingPlugin(schema)
         });
       }
+      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: () => {

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

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

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

@@ -0,0 +1,27 @@
+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';
+const pluginKey = new PluginKey('mediaPixelResizingPlugin');
+const {
+  createPluginState,
+  createCommand,
+  getPluginState
+} = pluginFactory(pluginKey, reducer, {
+  onSelectionChanged() {
+    return {
+      isPixelEditorOpen: false
+    };
+  }
+});
+export const createPlugin = ({
+  dispatch
+}) => {
+  return new SafePlugin({
+    state: createPluginState(dispatch, {
+      isPixelEditorOpen: false
+    }),
+    key: pluginKey
+  });
+};
+export { createCommand, getPluginState };

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

@@ -0,0 +1,20 @@
+export default ((state, action) => {
+  switch (action.type) {
+    case 'openPixelEditor':
+      {
+        return {
+          ...state,
+          isPixelEditorOpen: true
+        };
+      }
+    case 'closePixelEditor':
+      {
+        return {
+          ...state,
+          isPixelEditorOpen: false
+        };
+      }
+    default:
+      return state;
+  }
+});

package/dist/es2019/pm-plugins/pixel-resizing/ui/constants.js

@@ -0,0 +1,5 @@
+export const PIXELENTRY_MIGRATION_BUTTON_TESTID = 'pixel-entry-convert-pixels-btn';
+
+// pixel resizing toolbar width (with `platform_editor_controls` enabled)
+export const PIXEL_RESIZING_TOOLBAR_WIDTH = 240;
+export const PIXEL_VIEW_MODE_TOOLBAR_WIDTH = 204;

package/dist/es2019/pm-plugins/pixel-resizing/ui/index.js

@@ -0,0 +1,126 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { pixelEntryMessages as messages } from '@atlaskit/editor-common/media';
+import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { hasParentNode } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { Text } from '@atlaskit/primitives';
+import { updateMediaSingleWidthTr } from '../../../ui/toolbar/commands';
+import { getPixelWidthOfElement, calcNewLayout } from '../../../ui/toolbar/utils';
+import { isVideo } from '../../utils/media-single';
+import { closePixelEditorAndSave } from '../commands';
+import { PixelEntryComponent } from './pixel-entry';
+import { pixelSizingFullWidthLabelStyles } from './styles';
+export const PixelEntry = ({
+  editorView,
+  selectedMediaSingleNode,
+  pluginInjectionApi,
+  intl,
+  pluginState,
+  hoverDecoration,
+  isEditorFullWidthEnabled
+}) => {
+  var _pluginInjectionApi$w, _pluginInjectionApi$m, _pluginInjectionApi$m2;
+  const {
+    state,
+    dispatch
+  } = editorView;
+  const {
+    mediaSingle
+  } = state.schema.nodes;
+  const contentWidth = (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$w = pluginInjectionApi.width.sharedState.currentState()) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.lineLength) || akEditorDefaultLayoutWidth;
+  const {
+    width: mediaSingleWidth,
+    widthType,
+    layout
+  } = selectedMediaSingleNode.node.attrs;
+
+  // hasParentNode will return falsey value if selection depth === 0
+  const isNested = hasParentNode(n => n.type !== state.schema.nodes.doc)(state.selection);
+  const updateNodeWithTr = useCallback((width, validation) => {
+    var _pluginInjectionApi$a;
+    const newLayout = calcNewLayout(width, layout, contentWidth, isEditorFullWidthEnabled, isNested);
+    return updateMediaSingleWidthTr(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions, state, width, validation, 'floatingToolBar', newLayout);
+  }, [layout, contentWidth, isEditorFullWidthEnabled, isNested, state, pluginInjectionApi]);
+  const selectedMediaNode = selectedMediaSingleNode.node.content.firstChild;
+  if (!selectedMediaNode) {
+    return null;
+  }
+  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;
+  return jsx(PixelEntryComponent, {
+    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
+    }) => {
+      const tr = updateNodeWithTr(width, validation);
+      if (tr) {
+        dispatch(tr);
+      }
+    },
+    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);
+    },
+    onCloseAndSave: ({
+      width,
+      validation
+    }) => {
+      const tr = updateNodeWithTr(width, validation);
+      if (tr) {
+        return closePixelEditorAndSave(() => tr)(state, dispatch);
+      }
+    },
+    isViewMode: pluginState.isResizing
+  });
+};
+export const FullWidthDisplay = ({
+  intl: {
+    formatMessage
+  }
+}) => {
+  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)))
+  );
+};