@atlaskit/editor-plugin-media 8.8.0 → 8.10.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-media
 
+## 8.10.0
+
+### Minor Changes
+
+- [`3323827ca91e6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3323827ca91e6) -
+  [ux] EDITOR-4139 Refactor existing image editing functionality into its own plugin
+  editor-plugin-media-editing
+
+### Patch Changes
+
+- Updated dependencies
+
+## 8.9.0
+
+### Minor Changes
+
+- [`bb5f3706afa84`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bb5f3706afa84) -
+  fix media card dimensions on load for ssr
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.8.0
 
 ### Minor Changes

package/dist/cjs/mediaPlugin.js

@@ -14,7 +14,6 @@ var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _mediaCommon = require("@atlaskit/media-common");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _lazyMedia = require("./nodeviews/lazy-media");
 var _lazyMediaGroup = require("./nodeviews/lazy-media-group");
 var _lazyMediaInline = require("./nodeviews/lazy-media-inline");
@@ -35,7 +34,6 @@ var _pixelResizing = require("./pm-plugins/pixel-resizing");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _mediaCommon2 = require("./pm-plugins/utils/media-common");
 var _mediaSingle2 = require("./pm-plugins/utils/media-single");
-var _ModalWrapper = require("./ui/ImageEditor/ModalWrapper");
 var _MediaPicker = require("./ui/MediaPicker");
 var _PortalWrapper = require("./ui/MediaViewer/PortalWrapper");
 var _toolbar = require("./ui/toolbar");
@@ -106,36 +104,10 @@ var MediaViewerFunctionalComponent = function MediaViewerFunctionalComponent(_re
     items: mediaItems
   });
 };
-var imageEditorStateSelector = function imageEditorStateSelector(states) {
-  var _states$mediaState6, _states$mediaState7, _states$mediaState8;
-  return {
-    isImageEditorVisible: (_states$mediaState6 = states.mediaState) === null || _states$mediaState6 === void 0 ? void 0 : _states$mediaState6.isImageEditorVisible,
-    imageEditorSelectedMedia: (_states$mediaState7 = states.mediaState) === null || _states$mediaState7 === void 0 ? void 0 : _states$mediaState7.imageEditorSelectedMedia,
-    mediaClientConfig: (_states$mediaState8 = states.mediaState) === null || _states$mediaState8 === void 0 ? void 0 : _states$mediaState8.mediaClientConfig
-  };
-};
-var ImageEditorFunctionalComponent = function ImageEditorFunctionalComponent(_ref3) {
-  var api = _ref3.api;
-  var _useSharedPluginState3 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['media'], imageEditorStateSelector),
-    isImageEditorVisible = _useSharedPluginState3.isImageEditorVisible,
-    imageEditorSelectedMedia = _useSharedPluginState3.imageEditorSelectedMedia,
-    mediaClientConfig = _useSharedPluginState3.mediaClientConfig;
-  if (!isImageEditorVisible || !imageEditorSelectedMedia || !mediaClientConfig) {
-    return null;
-  }
-  var handleOnClose = function handleOnClose() {
-    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.media.commands.hideImageEditor);
-  };
-  return /*#__PURE__*/_react.default.createElement(_ModalWrapper.RenderImageEditor, {
-    mediaClientConfig: mediaClientConfig,
-    onClose: handleOnClose,
-    selectedNodeAttrs: imageEditorSelectedMedia
-  });
-};
-var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref4) {
-  var _ref4$config = _ref4.config,
-    options = _ref4$config === void 0 ? {} : _ref4$config,
-    api = _ref4.api;
+var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref3) {
+  var _ref3$config = _ref3.config,
+    options = _ref3$config === void 0 ? {} : _ref3$config,
+    api = _ref3.api;
   var previousMediaProvider;
   var mediaErrorLocalIds = new Set();
   return {
@@ -176,8 +148,8 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref4) {
           return false;
         }
         previousMediaProvider = provider;
-        return (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(function (_ref5) {
-          var tr = _ref5.tr;
+        return (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(function (_ref4) {
+          var tr = _ref4.tr;
           return tr.setMeta(_pluginKey.stateKey, {
             mediaProvider: provider
           });
@@ -187,21 +159,19 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref4) {
     commands: {
       showMediaViewer: _commands.showMediaViewer,
       hideMediaViewer: _commands.hideMediaViewer,
-      trackMediaPaste: _commands.trackMediaPaste,
-      showImageEditor: _commands.showImageEditor,
-      hideImageEditor: _commands.hideImageEditor
+      trackMediaPaste: _commands.trackMediaPaste
     },
     nodes: function nodes() {
-      var _ref6 = options || {},
-        _ref6$allowMediaGroup = _ref6.allowMediaGroup,
-        allowMediaGroup = _ref6$allowMediaGroup === void 0 ? true : _ref6$allowMediaGroup,
-        _ref6$allowMediaSingl = _ref6.allowMediaSingle,
-        allowMediaSingle = _ref6$allowMediaSingl === void 0 ? false : _ref6$allowMediaSingl,
-        _ref6$allowPixelResiz = _ref6.allowPixelResizing,
-        allowPixelResizing = _ref6$allowPixelResiz === void 0 ? false : _ref6$allowPixelResiz,
-        allowCaptions = _ref6.allowCaptions,
-        allowMediaInlineImages = _ref6.allowMediaInlineImages,
-        mediaFeatureFlags = _ref6.featureFlags;
+      var _ref5 = options || {},
+        _ref5$allowMediaGroup = _ref5.allowMediaGroup,
+        allowMediaGroup = _ref5$allowMediaGroup === void 0 ? true : _ref5$allowMediaGroup,
+        _ref5$allowMediaSingl = _ref5.allowMediaSingle,
+        allowMediaSingle = _ref5$allowMediaSingl === void 0 ? false : _ref5$allowMediaSingl,
+        _ref5$allowPixelResiz = _ref5.allowPixelResizing,
+        allowPixelResizing = _ref5$allowPixelResiz === void 0 ? false : _ref5$allowPixelResiz,
+        allowCaptions = _ref5.allowCaptions,
+        allowMediaInlineImages = _ref5.allowMediaInlineImages,
+        mediaFeatureFlags = _ref5.featureFlags;
       var allowMediaInline = (0, _platformFeatureFlags.fg)('platform_editor_remove_media_inline_feature_flag') ? allowMediaInlineImages : (0, _mediaCommon.getMediaFeatureFlag)('mediaInline', mediaFeatureFlags);
       var mediaSingleOption = {
         withCaption: allowCaptions,
@@ -235,16 +205,16 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref4) {
     pmPlugins: function pmPlugins() {
       var pmPlugins = [{
         name: 'media',
-        plugin: function plugin(_ref7) {
-          var schema = _ref7.schema,
-            dispatch = _ref7.dispatch,
-            getIntl = _ref7.getIntl,
-            eventDispatcher = _ref7.eventDispatcher,
-            providerFactory = _ref7.providerFactory,
-            errorReporter = _ref7.errorReporter,
-            portalProviderAPI = _ref7.portalProviderAPI,
-            dispatchAnalyticsEvent = _ref7.dispatchAnalyticsEvent,
-            nodeViewPortalProviderAPI = _ref7.nodeViewPortalProviderAPI;
+        plugin: function plugin(_ref6) {
+          var schema = _ref6.schema,
+            dispatch = _ref6.dispatch,
+            getIntl = _ref6.getIntl,
+            eventDispatcher = _ref6.eventDispatcher,
+            providerFactory = _ref6.providerFactory,
+            errorReporter = _ref6.errorReporter,
+            portalProviderAPI = _ref6.portalProviderAPI,
+            dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent,
+            nodeViewPortalProviderAPI = _ref6.nodeViewPortalProviderAPI;
           return (0, _main.createPlugin)(schema, {
             providerFactory: providerFactory,
             nodeViews: {
@@ -263,17 +233,17 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref4) {
         }
       }, {
         name: 'mediaKeymap',
-        plugin: function plugin(_ref8) {
+        plugin: function plugin(_ref7) {
           var _api$analytics3, _api$selection;
-          var getIntl = _ref8.getIntl;
+          var getIntl = _ref7.getIntl;
           return (0, _keymap2.default)(options, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, api === null || api === void 0 || (_api$selection = api.selection) === null || _api$selection === void 0 ? void 0 : _api$selection.actions, api === null || api === void 0 ? void 0 : api.width, getIntl);
         }
       }];
       if (options && options.allowMediaSingle) {
         pmPlugins.push({
           name: 'mediaSingleKeymap',
-          plugin: function plugin(_ref9) {
-            var schema = _ref9.schema;
+          plugin: function plugin(_ref8) {
+            var schema = _ref8.schema;
             return (0, _keymapMedia.default)(schema);
           }
         });
@@ -285,9 +255,9 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref4) {
         });
         pmPlugins.push({
           name: 'mediaAltTextKeymap',
-          plugin: function plugin(_ref0) {
+          plugin: function plugin(_ref9) {
             var _api$analytics4;
-            var schema = _ref0.schema;
+            var schema = _ref9.schema;
             return (0, _keymap.default)(schema, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
           }
         });
@@ -295,15 +265,15 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref4) {
       if (options && options.allowLinking) {
         pmPlugins.push({
           name: 'mediaLinking',
-          plugin: function plugin(_ref1) {
-            var dispatch = _ref1.dispatch;
+          plugin: function plugin(_ref0) {
+            var dispatch = _ref0.dispatch;
             return (0, _linking.default)(dispatch);
           }
         });
         pmPlugins.push({
           name: 'mediaLinkingKeymap',
-          plugin: function plugin(_ref10) {
-            var schema = _ref10.schema;
+          plugin: function plugin(_ref1) {
+            var schema = _ref1.schema;
             return (0, _keymap3.default)(schema);
           }
         });
@@ -345,16 +315,13 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref4) {
       });
       return pmPlugins;
     },
-    contentComponent: function contentComponent(_ref11) {
-      var editorView = _ref11.editorView,
-        appearance = _ref11.appearance;
+    contentComponent: function contentComponent(_ref10) {
+      var editorView = _ref10.editorView,
+        appearance = _ref10.appearance;
       if (!editorView) {
         return null;
       }
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (options === null || options === void 0 ? void 0 : options.allowImageEditing) && (0, _expValEquals.expValEquals)('platform_editor_add_image_editing', 'isEnabled', true) && /*#__PURE__*/_react.default.createElement(ImageEditorFunctionalComponent, {
-        api: api,
-        editorView: editorView
-      }), /*#__PURE__*/_react.default.createElement(MediaViewerFunctionalComponent, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(MediaViewerFunctionalComponent, {
         api: api,
         editorView: editorView
       }), /*#__PURE__*/_react.default.createElement(MediaPickerFunctionalComponent, {
@@ -363,8 +330,8 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref4) {
         api: api
       }));
     },
-    secondaryToolbarComponent: function secondaryToolbarComponent(_ref12) {
-      var disabled = _ref12.disabled;
+    secondaryToolbarComponent: function secondaryToolbarComponent(_ref11) {
+      var disabled = _ref11.disabled;
       return /*#__PURE__*/_react.default.createElement(_ToolbarMedia.default, {
         isDisabled: disabled,
         isReducedSpacing: true,
@@ -386,7 +353,7 @@ var mediaPlugin = exports.mediaPlugin = function mediaPlugin(_ref4) {
           allowLinking: options && options.allowLinking,
           allowAdvancedToolBarOptions: options && options.allowAdvancedToolBarOptions,
           allowAltTextOnImages: options && options.allowAltTextOnImages,
-          allowImageEditing: options && options.allowImageEditing,
+          allowImageEditing: !!(api !== null && api !== void 0 && api.mediaEditing) && options && options.allowImageEditing,
           allowImagePreview: options && options.allowImagePreview,
           altTextValidator: options && options.altTextValidator,
           fullWidthEnabled: options && options.fullWidthEnabled,

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

@@ -14,12 +14,15 @@ var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _bindEventListener = require("bind-event-listener");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _selectionBasedNodeView = require("@atlaskit/editor-common/selection-based-node-view");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _mediaClient = require("@atlaskit/media-client");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _helpers = require("../../pm-plugins/commands/helpers");
 var _mediaCommon = require("../../pm-plugins/utils/media-common");
 var _media = _interopRequireDefault(require("./media"));
@@ -59,6 +62,13 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
     }
     _this = _callSuper(this, MediaNodeView, [].concat(args));
     (0, _defineProperty2.default)(_this, "isSelected", false);
+    (0, _defineProperty2.default)(_this, "hasBeenResized", false);
+    (0, _defineProperty2.default)(_this, "hasResizedListener", function () {
+      if (!_this.hasBeenResized) {
+        _this.hasBeenResized = true;
+        _this.update(_this.node, _this.decorations);
+      }
+    });
     (0, _defineProperty2.default)(_this, "onExternalImageLoaded", function (dimensions) {
       var getPos = _this.getPos;
       var _this$getAttrs = _this.getAttrs(),
@@ -75,11 +85,39 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         }, true)(_this.view.state, _this.view.dispatch);
       }
     });
+    (0, _defineProperty2.default)(_this, "getMaxCardDimensions", function () {
+      var flexibleDimensions = {
+        width: '100%',
+        height: '100%'
+      };
+      if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+        var pos = _this.getPos();
+        if (typeof pos !== 'number') {
+          return flexibleDimensions;
+        }
+        if (_this.hasBeenResized) {
+          return flexibleDimensions;
+        }
+        var mediaSingleNodeParent = _this.getMediaSingleNode(_this.getPos);
+
+        // If media parent not found, return default
+        if (!mediaSingleNodeParent) {
+          return flexibleDimensions;
+        }
+
+        // Compute normal dimensions
+        var maxWidth = _this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent);
+        return {
+          width: "".concat(maxWidth, "px"),
+          height: '100%'
+        };
+      }
+      return flexibleDimensions;
+    });
     (0, _defineProperty2.default)(_this, "renderMediaNodeWithState", function (contextIdentifierProvider) {
       return function (_ref2) {
         var _this$reactComponentP;
-        var editorWidth = _ref2.width,
-          mediaProvider = _ref2.mediaProvider,
+        var mediaProvider = _ref2.mediaProvider,
           interactionState = _ref2.interactionState;
         var getPos = _this.getPos;
         var mediaOptions = _this.reactComponentProps.mediaOptions;
@@ -98,18 +136,15 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         }
         width = width || _mediaSingle.DEFAULT_IMAGE_WIDTH;
         height = height || _mediaSingle.DEFAULT_IMAGE_HEIGHT;
+        var pluginInjectionApi = _this.reactComponentProps.pluginInjectionApi;
 
         // mediaSingle defines the max dimensions, so we don't need to constrain twice.
-        var maxDimensions = {
-          width: "100%",
-          height: "100%"
-        };
+        var maxDimensions = _this.getMaxCardDimensions();
         var originalDimensions = {
           width: width,
           height: height
         };
         var isSelectedAndInteracted = _this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
-        var pluginInjectionApi = _this.reactComponentProps.pluginInjectionApi;
         return /*#__PURE__*/_react.default.createElement(_media.default, {
           api: pluginInjectionApi,
           view: _this.view,
@@ -140,6 +175,42 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
   }
   (0, _inherits2.default)(MediaNodeView, _SelectionBasedNodeVi);
   return (0, _createClass2.default)(MediaNodeView, [{
+    key: "getMediaSingleNode",
+    value: function getMediaSingleNode(getPos) {
+      var pos = getPos();
+      if (typeof pos !== 'number') {
+        return null;
+      }
+      var $pos = this.view.state.doc.resolve(pos);
+
+      // The parent of the media node should be mediaSingle
+      if ($pos.parent && $pos.parent.type.name === 'mediaSingle') {
+        return $pos.parent;
+      }
+      return null;
+    }
+  }, {
+    key: "getMaxWidthFromMediaSingleNode",
+    value: function getMaxWidthFromMediaSingleNode(mediaSingleNode) {
+      var _mediaSingleNode$attr = mediaSingleNode.attrs,
+        widthAttr = _mediaSingleNode$attr.width,
+        widthTypeAttr = _mediaSingleNode$attr.widthType,
+        layoutAttr = _mediaSingleNode$attr.layout;
+      // for extended mediaSingle nodes with width and widthType attributes ( default behaviour )
+      if (widthAttr && widthTypeAttr === 'pixel') {
+        return widthAttr;
+      }
+      // for legacy mediaSingle nodes without widthType attribute
+      switch (layoutAttr) {
+        case 'full-width':
+          return _editorSharedStyles.akEditorFullWidthLayoutWidth;
+        case 'wide':
+          return _editorSharedStyles.akEditorCalculatedWideLayoutWidth;
+        default:
+          return _editorSharedStyles.akEditorDefaultLayoutWidth;
+      }
+    }
+  }, {
     key: "createDomRef",
     value: function createDomRef() {
       var domRef = document.createElement('div');
@@ -148,6 +219,12 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         // see also: https://github.com/ProseMirror/prosemirror/issues/884
         domRef.contentEditable = 'true';
       }
+      if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+        this.resizeListenerBinding = (0, _bindEventListener.bind)(domRef, {
+          type: 'resized',
+          listener: this.hasResizedListener
+        });
+      }
       return domRef;
     }
   }, {
@@ -199,6 +276,14 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         renderNode: this.renderMediaNodeWithProviders
       });
     }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (this.resizeListenerBinding) {
+        this.resizeListenerBinding();
+      }
+      _superPropGet(MediaNodeView, "destroy", this, 3)([]);
+    }
   }]);
 }(_selectionBasedNodeView.SelectionBasedNodeView);
 var ReactMediaNode = exports.ReactMediaNode = function ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory) {

package/dist/cjs/nodeviews/mediaSingle.js

@@ -19,6 +19,7 @@ var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _utils = require("@atlaskit/editor-common/utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _main = require("../pm-plugins/main");
 var _mediaSingleNext = require("./mediaSingleNext");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -104,6 +105,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
     (0, _defineProperty2.default)(_this, "lastOffsetLeft", 0);
     (0, _defineProperty2.default)(_this, "forceViewUpdate", false);
     (0, _defineProperty2.default)(_this, "selectionType", null);
+    (0, _defineProperty2.default)(_this, "hasResized", false);
     (0, _defineProperty2.default)(_this, "checkAndUpdateSelectionType", function () {
       var getPos = _this.getPos;
       var selection = _this.view.state.selection;
@@ -116,7 +118,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       var pos;
       try {
         pos = getPos ? getPos() : undefined;
-      } catch (e) {
+      } catch (_unused) {
         pos = undefined;
       }
       var isNodeSelected = (0, _utils.isNodeSelectedOrInRange)(selection.$anchor.pos, selection.$head.pos, pos, _this.node.nodeSize);
@@ -228,6 +230,11 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
           return _this3.getNodeMediaId(currentNode) === _this3.getNodeMediaId(newNode);
         };
       }
+      // Detect mediaSingle width attribute changes and signal child media node to update
+      if (!this.hasResized && this.node.attrs.width !== node.attrs.width && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+        var target = this.dom.querySelector('div[data-prosemirror-node-name="media"]');
+        target === null || target === void 0 || target.dispatchEvent(new CustomEvent('resized'));
+      }
       return _superPropGet(MediaSingleNodeView, "update", this, 3)([node, decorations, _innerDecorations, isValidUpdate]);
     }
   }, {

package/dist/cjs/pm-plugins/commands.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.trackMediaPaste = exports.showMediaViewer = exports.showImageEditor = exports.hideMediaViewer = exports.hideImageEditor = void 0;
+exports.trackMediaPaste = exports.showMediaViewer = exports.hideMediaViewer = void 0;
 var _actions = require("../pm-plugins/actions");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _mediaCommon = require("../pm-plugins/utils/media-common");
@@ -37,26 +37,4 @@ var trackMediaPaste = exports.trackMediaPaste = function trackMediaPaste(attrs)
     });
     return tr;
   };
-};
-var showImageEditor = exports.showImageEditor = function showImageEditor(media) {
-  return function (_ref4) {
-    var tr = _ref4.tr;
-    tr.setMeta(_pluginKey.stateKey, {
-      type: _actions.ACTIONS.SHOW_IMAGE_EDITOR,
-      imageEditorSelectedMedia: media,
-      isImageEditorVisible: true
-    });
-    tr.setMeta('addToHistory', false);
-    return tr;
-  };
-};
-var hideImageEditor = exports.hideImageEditor = function hideImageEditor(_ref5) {
-  var tr = _ref5.tr;
-  tr.setMeta(_pluginKey.stateKey, {
-    type: _actions.ACTIONS.HIDE_IMAGE_EDITOR,
-    imageEditorSelectedMedia: null,
-    isImageEditorVisible: false
-  });
-  tr.setMeta('addToHistory', false);
-  return tr;
 };

package/dist/cjs/pm-plugins/main.js

@@ -90,7 +90,6 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
     (0, _defineProperty2.default)(this, "allowInlineImages", false);
     (0, _defineProperty2.default)(this, "uploadInProgressSubscriptions", []);
     (0, _defineProperty2.default)(this, "uploadInProgressSubscriptionsNotified", false);
-    (0, _defineProperty2.default)(this, "isImageEditorVisible", false);
     // this is only a temporary variable, which gets cleared after the last inserted node has been selected
     (0, _defineProperty2.default)(this, "lastAddedMediaSingleFileIds", []);
     (0, _defineProperty2.default)(this, "destroyed", false);
@@ -638,11 +637,6 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
     value: function setResizingWidth(width) {
       this.resizingWidth = width;
     }
-  }, {
-    key: "setImageEditorVisibility",
-    value: function setImageEditorVisibility(isVisible) {
-      this.isImageEditorVisible = isVisible;
-    }
   }, {
     key: "updateElement",
     value: function updateElement() {
@@ -884,16 +878,6 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
               nextPluginState = pluginState.clone();
             }
             break;
-          case _actions.ACTIONS.SHOW_IMAGE_EDITOR:
-            pluginState.imageEditorSelectedMedia = meta.imageEditorSelectedMedia;
-            pluginState.isImageEditorVisible = meta.isImageEditorVisible;
-            nextPluginState = nextPluginState.clone();
-            break;
-          case _actions.ACTIONS.HIDE_IMAGE_EDITOR:
-            pluginState.imageEditorSelectedMedia = undefined;
-            pluginState.isImageEditorVisible = meta.isImageEditorVisible;
-            nextPluginState = nextPluginState.clone();
-            break;
         }
 
         // NOTE: We're not calling passing new state to the Editor, because we depend on the view.state reference

package/dist/cjs/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -199,6 +199,10 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     isVideoFile = _useState8[0],
     setIsVideoFile = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
+    hasResized = _useState0[0],
+    setHasResized = _useState0[1];
   var nodePosition = (0, _react.useMemo)(function () {
     if (typeof getPos !== 'function') {
       return null;
@@ -368,6 +372,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
     width: props.width,
     height: props.height
   }));
+  var resizerContainerRef = (0, _react.useRef)(null);
   var handleResize = (0, _react.useCallback)(function (size, delta) {
     var _calculateSizeState = calculateSizeState({
         layout: layout,
@@ -379,6 +384,14 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
       width = _calculateSizeState.width,
       height = _calculateSizeState.height,
       newLayout = _calculateSizeState.layout;
+    var resizerDomEl = resizerContainerRef.current;
+    if (resizerDomEl && !hasResized && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      // dispatch resize event to media node DOM element inside resizerDom
+      var mediaDomEl = resizerDomEl.querySelector('div[data-prosemirror-node-name="media"]');
+      var event = new CustomEvent('resized');
+      mediaDomEl === null || mediaDomEl === void 0 || mediaDomEl.dispatchEvent(event);
+      setHasResized(true);
+    }
     if (isGuidelineEnabled) {
       var guidelineSnaps = (0, _guideline.getGuidelineSnaps)(guidelinesRef.current, lineLength, layout);
       updateActiveGuidelines(width, guidelinesRef.current, guidelineSnaps);
@@ -398,7 +411,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
     if (newLayout !== layout) {
       updateSize(width, newLayout);
     }
-  }, [view, updateSize, layout, isGuidelineEnabled, containerWidth, lineLength, fullWidthMode, isAdjacentMode, updateActiveGuidelines]);
+  }, [layout, containerWidth, lineLength, fullWidthMode, isAdjacentMode, hasResized, isGuidelineEnabled, view, updateActiveGuidelines, updateSize]);
   var handleResizeStop = (0, _react.useCallback)(function (size, delta) {
     var _pluginInjectionApi$g3;
     if (typeof nodePosition !== 'number') {
@@ -490,7 +503,8 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
   }, [forceHandlePositioning, isAdjacentMode]);
   return (0, _react2.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: memoizedCss
+    css: memoizedCss,
+    ref: resizerContainerRef
   }, (0, _react2.jsx)(_resizer.ResizerNext, {
     minWidth: minViewWidth,
     maxWidth: maxWidth

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

@@ -22,6 +22,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _checkMediaType = require("../../pm-plugins/utils/check-media-type");
 var _styled = require("./styled");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -38,6 +39,7 @@ var ResizableMediaSingle = exports.default = /*#__PURE__*/function (_React$Compo
       args[_key] = arguments[_key];
     }
     _this = _callSuper(this, ResizableMediaSingle, [].concat(args));
+    (0, _defineProperty2.default)(_this, "hasResized", false);
     (0, _defineProperty2.default)(_this, "state", {
       offsetLeft: (0, _mediaSingle.calculateOffsetLeft)(_this.insideInlineLike, _this.insideLayout, _this.props.view.dom, undefined),
       isVideoFile: !(0, _platformFeatureFlags.fg)('platform_editor_media_video_check_fix')
@@ -57,6 +59,15 @@ var ResizableMediaSingle = exports.default = /*#__PURE__*/function (_React$Compo
       var _this$props2 = _this.props,
         layout = _this$props2.layout,
         state = _this$props2.view.state;
+      if (!_this.hasResized && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+        var _this$wrapper;
+        var mediaDomEl = (_this$wrapper = _this.wrapper) === null || _this$wrapper === void 0 ? void 0 : _this$wrapper.querySelector('div[data-prosemirror-node-name="media"]');
+        if (mediaDomEl) {
+          var event = new CustomEvent('resized');
+          mediaDomEl === null || mediaDomEl === void 0 || mediaDomEl.dispatchEvent(event);
+        }
+        _this.hasResized = true;
+      }
       var newPct = (0, _ui.calcPctFromPx)(newWidth, _this.props.lineLength) * 100;
       _this.setState({
         resizedPctWidth: newPct

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

@@ -123,13 +123,14 @@ 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 handleShowImageEditor = exports.handleShowImageEditor = function handleShowImageEditor(_ref2) {
+  var _api$mediaEditing;
   var api = _ref2.api,
     mediaPluginState = _ref2.mediaPluginState;
   var selectedNodeAttrs = (0, _utils2.getSelectedNearestMediaContainerNodeAttrs)(mediaPluginState);
   if (!selectedNodeAttrs) {
     return false;
   }
-  api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.media.commands.showImageEditor(selectedNodeAttrs));
+  api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$mediaEditing = api.mediaEditing) === null || _api$mediaEditing === void 0 ? void 0 : _api$mediaEditing.commands.showImageEditor(selectedNodeAttrs));
 };
 var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, editorAnalyticsAPI, forceFocusSelector, isViewOnly) {
   var _pluginInjectionApi$c;
@@ -563,7 +564,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         });
       }
       // Image Editing Support
-      if (allowImageEditing && (0, _expValEquals.expValEquals)('platform_editor_add_image_editing', 'isEnabled', true)) {
+      if (!!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.mediaEditing) && allowImageEditing && (0, _expValEquals.expValEquals)('platform_editor_add_image_editing', 'isEnabled', true)) {
         var _mediaNode$attrs;
         var _selectedMediaSingleNode = (0, _utils2.getSelectedMediaSingle)(state);
         var mediaNode = _selectedMediaSingleNode === null || _selectedMediaSingleNode === void 0 ? void 0 : _selectedMediaSingleNode.node.content.firstChild;