@atlaskit/editor-plugin-media 8.7.2 → 8.9.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-media
 
+## 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
+
+- [`82d57d01a0f61`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/82d57d01a0f61) -
+  Distinguish between collab offline and internet offline cases for connectivity mode
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.7.2
 
 ### Patch Changes

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/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/comments.js

@@ -10,6 +10,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _media = require("@atlaskit/editor-common/media");
 var _messages = require("@atlaskit/editor-common/messages");
+var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -52,7 +53,7 @@ var commentButton = exports.commentButton = function commentButton(intl, state,
       description: title
     }),
     supportsViewMode: true,
-    disabled: (api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode) === 'offline',
+    disabled: (0, _editorPluginConnectivity.isOfflineMode)(api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode),
     onMount: function onMount() {
       if ((0, _platformFeatureFlags.fg)('confluence_frontend_preload_inline_comment_editor')) {
         onCommentButtonMount && onCommentButtonMount();

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

@@ -16,6 +16,7 @@ var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
 var _mediaInline = require("@atlaskit/editor-common/media-inline");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
 var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
+var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -147,7 +148,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',
+    disabled: (0, _editorPluginConnectivity.isOfflineMode)(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),
     supportsViewMode: true
   };
   var download = _objectSpread({
@@ -604,7 +605,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',
+            disabled: (0, _editorPluginConnectivity.isOfflineMode)(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),
             supportsViewMode: true
           }, {
             type: 'separator',
@@ -690,7 +691,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',
+          disabled: (0, _editorPluginConnectivity.isOfflineMode)(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),
           supportsViewMode: true
         }, {
           type: 'separator',

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

@@ -1,11 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { bind } from 'bind-event-listener';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { updateCurrentMediaNodeAttrs } from '../../pm-plugins/commands/helpers';
 import { isMediaBlobUrlFromAttrs } from '../../pm-plugins/utils/media-common';
 // Ignored via go/ees005
@@ -37,6 +40,13 @@ class MediaNodeView extends SelectionBasedNodeView {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "isSelected", false);
+    _defineProperty(this, "hasBeenResized", false);
+    _defineProperty(this, "hasResizedListener", () => {
+      if (!this.hasBeenResized) {
+        this.hasBeenResized = true;
+        this.update(this.node, this.decorations);
+      }
+    });
     _defineProperty(this, "onExternalImageLoaded", dimensions => {
       const getPos = this.getPos;
       const {
@@ -55,9 +65,37 @@ class MediaNodeView extends SelectionBasedNodeView {
         }, true)(this.view.state, this.view.dispatch);
       }
     });
+    _defineProperty(this, "getMaxCardDimensions", () => {
+      const flexibleDimensions = {
+        width: '100%',
+        height: '100%'
+      };
+      if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+        const pos = this.getPos();
+        if (typeof pos !== 'number') {
+          return flexibleDimensions;
+        }
+        if (this.hasBeenResized) {
+          return flexibleDimensions;
+        }
+        const mediaSingleNodeParent = this.getMediaSingleNode(this.getPos);
+
+        // If media parent not found, return default
+        if (!mediaSingleNodeParent) {
+          return flexibleDimensions;
+        }
+
+        // Compute normal dimensions
+        const maxWidth = this.getMaxWidthFromMediaSingleNode(mediaSingleNodeParent);
+        return {
+          width: `${maxWidth}px`,
+          height: '100%'
+        };
+      }
+      return flexibleDimensions;
+    });
     _defineProperty(this, "renderMediaNodeWithState", contextIdentifierProvider => {
       return ({
-        width: editorWidth,
         mediaProvider,
         interactionState
       }) => {
@@ -85,20 +123,17 @@ class MediaNodeView extends SelectionBasedNodeView {
         }
         width = width || DEFAULT_IMAGE_WIDTH;
         height = height || DEFAULT_IMAGE_HEIGHT;
+        const {
+          pluginInjectionApi
+        } = this.reactComponentProps;
 
         // mediaSingle defines the max dimensions, so we don't need to constrain twice.
-        const maxDimensions = {
-          width: `100%`,
-          height: `100%`
-        };
+        const maxDimensions = this.getMaxCardDimensions();
         const originalDimensions = {
           width,
           height
         };
         const isSelectedAndInteracted = this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
-        const {
-          pluginInjectionApi
-        } = this.reactComponentProps;
         return /*#__PURE__*/React.createElement(MediaNode, {
           api: pluginInjectionApi,
           view: this.view,
@@ -129,6 +164,39 @@ class MediaNodeView extends SelectionBasedNodeView {
       });
     });
   }
+  getMediaSingleNode(getPos) {
+    const pos = getPos();
+    if (typeof pos !== 'number') {
+      return null;
+    }
+    const $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;
+  }
+  getMaxWidthFromMediaSingleNode(mediaSingleNode) {
+    const {
+      width: widthAttr,
+      widthType: widthTypeAttr,
+      layout: layoutAttr
+    } = mediaSingleNode.attrs;
+    // 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 akEditorFullWidthLayoutWidth;
+      case 'wide':
+        return akEditorCalculatedWideLayoutWidth;
+      default:
+        return akEditorDefaultLayoutWidth;
+    }
+  }
   createDomRef() {
     const domRef = document.createElement('div');
     if (this.reactComponentProps.mediaOptions && this.reactComponentProps.mediaOptions.allowMediaSingleEditable) {
@@ -136,6 +204,12 @@ class MediaNodeView extends SelectionBasedNodeView {
       // see also: https://github.com/ProseMirror/prosemirror/issues/884
       domRef.contentEditable = 'true';
     }
+    if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      this.resizeListenerBinding = bind(domRef, {
+        type: 'resized',
+        listener: this.hasResizedListener
+      });
+    }
     return domRef;
   }
   viewShouldUpdate(nextNode, decorations) {
@@ -179,6 +253,12 @@ class MediaNodeView extends SelectionBasedNodeView {
       renderNode: this.renderMediaNodeWithProviders
     });
   }
+  destroy() {
+    if (this.resizeListenerBinding) {
+      this.resizeListenerBinding();
+    }
+    super.destroy();
+  }
 }
 export const ReactMediaNode = (portalProviderAPI, eventDispatcher, providerFactory, mediaOptions = {}, pluginInjectionApi) => (node, view, getPos) => {
   return new MediaNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, {

package/dist/es2019/nodeviews/mediaSingle.js

@@ -13,6 +13,7 @@ import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { isNodeSelectedOrInRange } from '@atlaskit/editor-common/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import { MediaSingleNodeNext } from './mediaSingleNext';
 const selector = states => {
@@ -84,6 +85,7 @@ class MediaSingleNodeView extends ReactNodeView {
     _defineProperty(this, "lastOffsetLeft", 0);
     _defineProperty(this, "forceViewUpdate", false);
     _defineProperty(this, "selectionType", null);
+    _defineProperty(this, "hasResized", false);
     _defineProperty(this, "checkAndUpdateSelectionType", () => {
       const getPos = this.getPos;
       const {
@@ -98,7 +100,7 @@ class MediaSingleNodeView extends ReactNodeView {
       let pos;
       try {
         pos = getPos ? getPos() : undefined;
-      } catch (e) {
+      } catch {
         pos = undefined;
       }
       const isNodeSelected = isNodeSelectedOrInRange(selection.$anchor.pos, selection.$head.pos, pos, this.node.nodeSize);
@@ -188,6 +190,11 @@ class MediaSingleNodeView extends ReactNodeView {
     if (!isValidUpdate) {
       isValidUpdate = (currentNode, newNode) => this.getNodeMediaId(currentNode) === this.getNodeMediaId(newNode);
     }
+    // Detect mediaSingle width attribute changes and signal child media node to update
+    if (!this.hasResized && this.node.attrs.width !== node.attrs.width && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      const target = this.dom.querySelector('div[data-prosemirror-node-name="media"]');
+      target === null || target === void 0 ? void 0 : target.dispatchEvent(new CustomEvent('resized'));
+    }
     return super.update(node, decorations, _innerDecorations, isValidUpdate);
   }
   render(props, forwardRef) {

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

@@ -179,6 +179,7 @@ export const ResizableMediaSingleNextFunctional = props => {
   const [snaps, setSnaps] = useState({});
   const [isResizing, setIsResizing] = useState(false);
   const [isVideoFile, setIsVideoFile] = useState(!(fg('platform_editor_media_video_check_fix') || fg('platform_editor_ssr_media')));
+  const [hasResized, setHasResized] = useState(false);
   const nodePosition = useMemo(() => {
     if (typeof getPos !== 'function') {
       return null;
@@ -348,6 +349,7 @@ export const ResizableMediaSingleNextFunctional = props => {
     width: props.width,
     height: props.height
   }));
+  const resizerContainerRef = useRef(null);
   const handleResize = useCallback((size, delta) => {
     const {
       width,
@@ -360,6 +362,14 @@ export const ResizableMediaSingleNextFunctional = props => {
       fullWidthMode,
       isNestedNode: isAdjacentMode
     })(size, delta, false, aspectRatioRef.current);
+    const resizerDomEl = resizerContainerRef.current;
+    if (resizerDomEl && !hasResized && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      // dispatch resize event to media node DOM element inside resizerDom
+      const mediaDomEl = resizerDomEl.querySelector('div[data-prosemirror-node-name="media"]');
+      const event = new CustomEvent('resized');
+      mediaDomEl === null || mediaDomEl === void 0 ? void 0 : mediaDomEl.dispatchEvent(event);
+      setHasResized(true);
+    }
     if (isGuidelineEnabled) {
       const guidelineSnaps = getGuidelineSnaps(guidelinesRef.current, lineLength, layout);
       updateActiveGuidelines(width, guidelinesRef.current, guidelineSnaps);
@@ -379,7 +389,7 @@ export const ResizableMediaSingleNextFunctional = props => {
     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]);
   const handleResizeStop = useCallback((size, delta) => {
     var _pluginInjectionApi$g5, _pluginInjectionApi$g6;
     if (typeof nodePosition !== 'number') {
@@ -472,7 +482,8 @@ export const ResizableMediaSingleNextFunctional = props => {
   }, [forceHandlePositioning, isAdjacentMode]);
   return 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
   }, jsx(ResizerNext, {
     minWidth: minViewWidth,
     maxWidth: maxWidth

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

@@ -14,12 +14,14 @@ import { calculateSnapPoints } from '@atlaskit/editor-common/utils';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { checkMediaType } from '../../pm-plugins/utils/check-media-type';
 import { wrapperStyle } from './styled';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export default class ResizableMediaSingle extends React.Component {
   constructor(...args) {
     super(...args);
+    _defineProperty(this, "hasResized", false);
     _defineProperty(this, "state", {
       offsetLeft: calculateOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, undefined),
       isVideoFile: !fg('platform_editor_media_video_check_fix')
@@ -43,6 +45,15 @@ export default class ResizableMediaSingle extends React.Component {
           state
         }
       } = this.props;
+      if (!this.hasResized && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+        var _this$wrapper;
+        const mediaDomEl = (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 ? void 0 : _this$wrapper.querySelector('div[data-prosemirror-node-name="media"]');
+        if (mediaDomEl) {
+          const event = new CustomEvent('resized');
+          mediaDomEl === null || mediaDomEl === void 0 ? void 0 : mediaDomEl.dispatchEvent(event);
+        }
+        this.hasResized = true;
+      }
       const newPct = calcPctFromPx(newWidth, this.props.lineLength) * 100;
       this.setState({
         resizedPctWidth: newPct

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

@@ -3,6 +3,7 @@ import { INPUT_METHOD, VIEW_METHOD } from '@atlaskit/editor-common/analytics';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { commentMessages as messages } from '@atlaskit/editor-common/media';
 import { annotationMessages } from '@atlaskit/editor-common/messages';
+import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import CommentIcon from '@atlaskit/icon/core/comment';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -44,7 +45,7 @@ export const commentButton = (intl, state, api, onCommentButtonMount) => {
       description: title
     }),
     supportsViewMode: true,
-    disabled: (api === null || api === void 0 ? void 0 : (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : (_api$connectivity$sha = _api$connectivity.sharedState) === null || _api$connectivity$sha === void 0 ? void 0 : (_api$connectivity$sha2 = _api$connectivity$sha.currentState()) === null || _api$connectivity$sha2 === void 0 ? void 0 : _api$connectivity$sha2.mode) === 'offline',
+    disabled: isOfflineMode(api === null || api === void 0 ? void 0 : (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : (_api$connectivity$sha = _api$connectivity.sharedState) === null || _api$connectivity$sha === void 0 ? void 0 : (_api$connectivity$sha2 = _api$connectivity$sha.currentState()) === null || _api$connectivity$sha2 === void 0 ? void 0 : _api$connectivity$sha2.mode),
     onMount: () => {
       if (fg('confluence_frontend_preload_inline_comment_editor')) {
         onCommentButtonMount && onCommentButtonMount();

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

@@ -6,6 +6,7 @@ import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { mediaInlineImagesEnabled } from '@atlaskit/editor-common/media-inline';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
+import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { contains, findParentNodeOfType, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
@@ -136,7 +137,7 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
         api: pluginInjectionApi
       })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
     },
-    disabled: (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c === void 0 ? void 0 : (_pluginInjectionApi$c2 = _pluginInjectionApi$c.sharedState) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : (_pluginInjectionApi$c3 = _pluginInjectionApi$c2.currentState()) === null || _pluginInjectionApi$c3 === void 0 ? void 0 : _pluginInjectionApi$c3.mode) === 'offline',
+    disabled: isOfflineMode(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c === void 0 ? void 0 : (_pluginInjectionApi$c2 = _pluginInjectionApi$c.sharedState) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : (_pluginInjectionApi$c3 = _pluginInjectionApi$c2.currentState()) === null || _pluginInjectionApi$c3 === void 0 ? void 0 : _pluginInjectionApi$c3.mode),
     supportsViewMode: true
   };
   const download = {
@@ -603,7 +604,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
                 mediaPluginState: pluginState
               })) !== null && _handleShowMediaViewe2 !== void 0 ? _handleShowMediaViewe2 : false;
             },
-            disabled: (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c4 = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c4 === void 0 ? void 0 : (_pluginInjectionApi$c5 = _pluginInjectionApi$c4.sharedState) === null || _pluginInjectionApi$c5 === void 0 ? void 0 : (_pluginInjectionApi$c6 = _pluginInjectionApi$c5.currentState()) === null || _pluginInjectionApi$c6 === void 0 ? void 0 : _pluginInjectionApi$c6.mode) === 'offline',
+            disabled: isOfflineMode(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c4 = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c4 === void 0 ? void 0 : (_pluginInjectionApi$c5 = _pluginInjectionApi$c4.sharedState) === null || _pluginInjectionApi$c5 === void 0 ? void 0 : (_pluginInjectionApi$c6 = _pluginInjectionApi$c5.currentState()) === null || _pluginInjectionApi$c6 === void 0 ? void 0 : _pluginInjectionApi$c6.mode),
             supportsViewMode: true
           }, {
             type: 'separator',
@@ -689,7 +690,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
               mediaPluginState: pluginState
             })) !== null && _handleShowMediaViewe3 !== void 0 ? _handleShowMediaViewe3 : false;
           },
-          disabled: (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c7 = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c7 === void 0 ? void 0 : (_pluginInjectionApi$c8 = _pluginInjectionApi$c7.sharedState) === null || _pluginInjectionApi$c8 === void 0 ? void 0 : (_pluginInjectionApi$c9 = _pluginInjectionApi$c8.currentState()) === null || _pluginInjectionApi$c9 === void 0 ? void 0 : _pluginInjectionApi$c9.mode) === 'offline',
+          disabled: isOfflineMode(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c7 = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c7 === void 0 ? void 0 : (_pluginInjectionApi$c8 = _pluginInjectionApi$c7.sharedState) === null || _pluginInjectionApi$c8 === void 0 ? void 0 : (_pluginInjectionApi$c9 = _pluginInjectionApi$c8.currentState()) === null || _pluginInjectionApi$c9 === void 0 ? void 0 : _pluginInjectionApi$c9.mode),
           supportsViewMode: true
         }, {
           type: 'separator',

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

@@ -13,12 +13,15 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
 import React from 'react';
+import { bind } from 'bind-event-listener';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { updateCurrentMediaNodeAttrs } from '../../pm-plugins/commands/helpers';
 import { isMediaBlobUrlFromAttrs } from '../../pm-plugins/utils/media-common';
 // Ignored via go/ees005
@@ -53,6 +56,13 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
     }
     _this = _callSuper(this, MediaNodeView, [].concat(args));
     _defineProperty(_this, "isSelected", false);
+    _defineProperty(_this, "hasBeenResized", false);
+    _defineProperty(_this, "hasResizedListener", function () {
+      if (!_this.hasBeenResized) {
+        _this.hasBeenResized = true;
+        _this.update(_this.node, _this.decorations);
+      }
+    });
     _defineProperty(_this, "onExternalImageLoaded", function (dimensions) {
       var getPos = _this.getPos;
       var _this$getAttrs = _this.getAttrs(),
@@ -69,11 +79,39 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         }, true)(_this.view.state, _this.view.dispatch);
       }
     });
+    _defineProperty(_this, "getMaxCardDimensions", function () {
+      var flexibleDimensions = {
+        width: '100%',
+        height: '100%'
+      };
+      if (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;
+    });
     _defineProperty(_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;
@@ -92,18 +130,15 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         }
         width = width || DEFAULT_IMAGE_WIDTH;
         height = height || 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.createElement(MediaNode, {
           api: pluginInjectionApi,
           view: _this.view,
@@ -134,6 +169,42 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
   }
   _inherits(MediaNodeView, _SelectionBasedNodeVi);
   return _createClass(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 akEditorFullWidthLayoutWidth;
+        case 'wide':
+          return akEditorCalculatedWideLayoutWidth;
+        default:
+          return akEditorDefaultLayoutWidth;
+      }
+    }
+  }, {
     key: "createDomRef",
     value: function createDomRef() {
       var domRef = document.createElement('div');
@@ -142,6 +213,12 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
         // see also: https://github.com/ProseMirror/prosemirror/issues/884
         domRef.contentEditable = 'true';
       }
+      if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+        this.resizeListenerBinding = bind(domRef, {
+          type: 'resized',
+          listener: this.hasResizedListener
+        });
+      }
       return domRef;
     }
   }, {
@@ -193,6 +270,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);
 export var ReactMediaNode = function ReactMediaNode(portalProviderAPI, eventDispatcher, providerFactory) {

package/dist/esm/nodeviews/mediaSingle.js

@@ -22,6 +22,7 @@ import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { isNodeSelectedOrInRange } from '@atlaskit/editor-common/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import { MediaSingleNodeNext } from './mediaSingleNext';
 var selector = function selector(states) {
@@ -100,6 +101,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
     _defineProperty(_this, "lastOffsetLeft", 0);
     _defineProperty(_this, "forceViewUpdate", false);
     _defineProperty(_this, "selectionType", null);
+    _defineProperty(_this, "hasResized", false);
     _defineProperty(_this, "checkAndUpdateSelectionType", function () {
       var getPos = _this.getPos;
       var selection = _this.view.state.selection;
@@ -112,7 +114,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       var pos;
       try {
         pos = getPos ? getPos() : undefined;
-      } catch (e) {
+      } catch (_unused) {
         pos = undefined;
       }
       var isNodeSelected = isNodeSelectedOrInRange(selection.$anchor.pos, selection.$head.pos, pos, _this.node.nodeSize);
@@ -224,6 +226,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 && 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/esm/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -189,6 +189,10 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
     _useState8 = _slicedToArray(_useState7, 2),
     isVideoFile = _useState8[0],
     setIsVideoFile = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    hasResized = _useState0[0],
+    setHasResized = _useState0[1];
   var nodePosition = useMemo(function () {
     if (typeof getPos !== 'function') {
       return null;
@@ -358,6 +362,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
     width: props.width,
     height: props.height
   }));
+  var resizerContainerRef = useRef(null);
   var handleResize = useCallback(function (size, delta) {
     var _calculateSizeState = calculateSizeState({
         layout: layout,
@@ -369,6 +374,14 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
       width = _calculateSizeState.width,
       height = _calculateSizeState.height,
       newLayout = _calculateSizeState.layout;
+    var resizerDomEl = resizerContainerRef.current;
+    if (resizerDomEl && !hasResized && 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 = getGuidelineSnaps(guidelinesRef.current, lineLength, layout);
       updateActiveGuidelines(width, guidelinesRef.current, guidelineSnaps);
@@ -388,7 +401,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
     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 = useCallback(function (size, delta) {
     var _pluginInjectionApi$g3;
     if (typeof nodePosition !== 'number') {
@@ -480,7 +493,8 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
   }, [forceHandlePositioning, isAdjacentMode]);
   return 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
   }, jsx(ResizerNext, {
     minWidth: minViewWidth,
     maxWidth: maxWidth

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

@@ -23,6 +23,7 @@ import { calculateSnapPoints } from '@atlaskit/editor-common/utils';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { checkMediaType } from '../../pm-plugins/utils/check-media-type';
 import { wrapperStyle } from './styled';
 // eslint-disable-next-line @repo/internal/react/no-class-components
@@ -34,6 +35,7 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
       args[_key] = arguments[_key];
     }
     _this = _callSuper(this, ResizableMediaSingle, [].concat(args));
+    _defineProperty(_this, "hasResized", false);
     _defineProperty(_this, "state", {
       offsetLeft: calculateOffsetLeft(_this.insideInlineLike, _this.insideLayout, _this.props.view.dom, undefined),
       isVideoFile: !fg('platform_editor_media_video_check_fix')
@@ -53,6 +55,15 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = _this.props,
         layout = _this$props2.layout,
         state = _this$props2.view.state;
+      if (!_this.hasResized && 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 = calcPctFromPx(newWidth, _this.props.lineLength) * 100;
       _this.setState({
         resizedPctWidth: newPct

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

@@ -3,6 +3,7 @@ import { INPUT_METHOD, VIEW_METHOD } from '@atlaskit/editor-common/analytics';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { commentMessages as messages } from '@atlaskit/editor-common/media';
 import { annotationMessages } from '@atlaskit/editor-common/messages';
+import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import CommentIcon from '@atlaskit/icon/core/comment';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -45,7 +46,7 @@ export var commentButton = function commentButton(intl, state, api, onCommentBut
       description: title
     }),
     supportsViewMode: true,
-    disabled: (api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode) === 'offline',
+    disabled: isOfflineMode(api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode),
     onMount: function onMount() {
       if (fg('confluence_frontend_preload_inline_comment_editor')) {
         onCommentButtonMount && onCommentButtonMount();

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

@@ -10,6 +10,7 @@ import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { mediaInlineImagesEnabled } from '@atlaskit/editor-common/media-inline';
 import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atlaskit/editor-common/messages';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
+import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { contains, findParentNodeOfType, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
@@ -138,7 +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',
+    disabled: isOfflineMode(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),
     supportsViewMode: true
   };
   var download = _objectSpread({
@@ -595,7 +596,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',
+            disabled: isOfflineMode(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),
             supportsViewMode: true
           }, {
             type: 'separator',
@@ -681,7 +682,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',
+          disabled: isOfflineMode(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),
           supportsViewMode: true
         }, {
           type: 'separator',

package/dist/types/nodeviews/mediaNodeView/index.d.ts

@@ -4,20 +4,24 @@ import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ContextIdentifierProvider, MediaProvider, ProviderFactory, Providers } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
-import type { ExtractInjectionAPI, EditorContainerWidth as WidthPluginState } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { SharedInteractionState } from '@atlaskit/editor-plugin-interaction';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaNextEditorPluginType } from '../../mediaPluginType';
-import type { getPosHandler, MediaOptions } from '../../types';
+import type { getPosHandler, getPosHandlerNode, MediaOptions } from '../../types';
 import type { MediaNodeViewProps } from '../types';
 interface MediaNodeWithPluginStateComponentProps {
     interactionState?: SharedInteractionState['interactionState'];
     mediaProvider?: Promise<MediaProvider>;
-    width?: WidthPluginState;
 }
 declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
     private isSelected;
+    private hasBeenResized;
+    private resizeListenerBinding?;
+    getMediaSingleNode(getPos: getPosHandlerNode): PMNode | null;
+    getMaxWidthFromMediaSingleNode(mediaSingleNode: PMNode): number;
+    hasResizedListener: () => void;
     createDomRef(): HTMLElement;
     viewShouldUpdate(nextNode: PMNode, decorations: Decoration[]): boolean;
     stopEvent(event: Event): boolean;
@@ -27,9 +31,14 @@ declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
         height: number;
         width: number;
     }) => void;
-    renderMediaNodeWithState: (contextIdentifierProvider?: Promise<ContextIdentifierProvider>) => ({ width: editorWidth, mediaProvider, interactionState, }: MediaNodeWithPluginStateComponentProps) => React.JSX.Element;
+    getMaxCardDimensions: () => {
+        width: string;
+        height: string;
+    };
+    renderMediaNodeWithState: (contextIdentifierProvider?: Promise<ContextIdentifierProvider>) => ({ mediaProvider, interactionState, }: MediaNodeWithPluginStateComponentProps) => React.JSX.Element;
     renderMediaNodeWithProviders: ({ contextIdentifierProvider }: Providers) => React.JSX.Element;
     render(): React.JSX.Element;
+    destroy(): void;
 }
 export declare const ReactMediaNode: (portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, mediaOptions: MediaOptions | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => (node: PMNode, view: EditorView, getPos: getPosHandler) => MediaNodeView;
 export {};

package/dist/types/nodeviews/mediaSingle.d.ts

@@ -15,6 +15,7 @@ declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps
     forceViewUpdate: boolean;
     selectionType: number | null;
     unsubscribeToViewModeChange: (() => void) | undefined;
+    hasResized: boolean;
     createDomRef(): HTMLElement;
     getContentDOM(): {
         dom: HTMLDivElement;

package/dist/types/ui/ResizableMediaSingle/index.d.ts

@@ -13,6 +13,7 @@ type State = {
     resizedPctWidth?: number;
 };
 export default class ResizableMediaSingle extends React.Component<Props, State> {
+    private hasResized;
     state: State;
     componentDidUpdate(prevProps: Props): boolean;
     private displayGrid;

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

@@ -4,20 +4,24 @@ import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ContextIdentifierProvider, MediaProvider, ProviderFactory, Providers } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
-import type { ExtractInjectionAPI, EditorContainerWidth as WidthPluginState } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { SharedInteractionState } from '@atlaskit/editor-plugin-interaction';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaNextEditorPluginType } from '../../mediaPluginType';
-import type { getPosHandler, MediaOptions } from '../../types';
+import type { getPosHandler, getPosHandlerNode, MediaOptions } from '../../types';
 import type { MediaNodeViewProps } from '../types';
 interface MediaNodeWithPluginStateComponentProps {
     interactionState?: SharedInteractionState['interactionState'];
     mediaProvider?: Promise<MediaProvider>;
-    width?: WidthPluginState;
 }
 declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
     private isSelected;
+    private hasBeenResized;
+    private resizeListenerBinding?;
+    getMediaSingleNode(getPos: getPosHandlerNode): PMNode | null;
+    getMaxWidthFromMediaSingleNode(mediaSingleNode: PMNode): number;
+    hasResizedListener: () => void;
     createDomRef(): HTMLElement;
     viewShouldUpdate(nextNode: PMNode, decorations: Decoration[]): boolean;
     stopEvent(event: Event): boolean;
@@ -27,9 +31,14 @@ declare class MediaNodeView extends SelectionBasedNodeView<MediaNodeViewProps> {
         height: number;
         width: number;
     }) => void;
-    renderMediaNodeWithState: (contextIdentifierProvider?: Promise<ContextIdentifierProvider>) => ({ width: editorWidth, mediaProvider, interactionState, }: MediaNodeWithPluginStateComponentProps) => React.JSX.Element;
+    getMaxCardDimensions: () => {
+        width: string;
+        height: string;
+    };
+    renderMediaNodeWithState: (contextIdentifierProvider?: Promise<ContextIdentifierProvider>) => ({ mediaProvider, interactionState, }: MediaNodeWithPluginStateComponentProps) => React.JSX.Element;
     renderMediaNodeWithProviders: ({ contextIdentifierProvider }: Providers) => React.JSX.Element;
     render(): React.JSX.Element;
+    destroy(): void;
 }
 export declare const ReactMediaNode: (portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, mediaOptions: MediaOptions | undefined, pluginInjectionApi: ExtractInjectionAPI<MediaNextEditorPluginType> | undefined) => (node: PMNode, view: EditorView, getPos: getPosHandler) => MediaNodeView;
 export {};

package/dist/types-ts4.5/nodeviews/mediaSingle.d.ts

@@ -15,6 +15,7 @@ declare class MediaSingleNodeView extends ReactNodeView<MediaSingleNodeViewProps
     forceViewUpdate: boolean;
     selectionType: number | null;
     unsubscribeToViewModeChange: (() => void) | undefined;
+    hasResized: boolean;
     createDomRef(): HTMLElement;
     getContentDOM(): {
         dom: HTMLDivElement;

package/dist/types-ts4.5/ui/ResizableMediaSingle/index.d.ts

@@ -13,6 +13,7 @@ type State = {
     resizedPctWidth?: number;
 };
 export default class ResizableMediaSingle extends React.Component<Props, State> {
+    private hasResized;
     state: State;
     componentDidUpdate(prevProps: Props): boolean;
     private displayGrid;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "8.7.2",
+	"version": "8.9.0",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,8 +35,8 @@
 		"@atlaskit/button": "^23.9.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-analytics": "^6.2.0",
-		"@atlaskit/editor-plugin-annotation": "^6.3.0",
-		"@atlaskit/editor-plugin-connectivity": "^6.0.0",
+		"@atlaskit/editor-plugin-annotation": "^6.4.0",
+		"@atlaskit/editor-plugin-connectivity": "^6.1.0",
 		"@atlaskit/editor-plugin-decorations": "^6.1.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^6.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^8.0.0",
@@ -46,12 +46,12 @@
 		"@atlaskit/editor-plugin-guideline": "^6.0.0",
 		"@atlaskit/editor-plugin-interaction": "^11.0.0",
 		"@atlaskit/editor-plugin-selection": "^6.1.0",
-		"@atlaskit/editor-plugin-toolbar": "^3.4.0",
+		"@atlaskit/editor-plugin-toolbar": "^3.5.0",
 		"@atlaskit/editor-plugin-width": "^7.0.0",
 		"@atlaskit/editor-prosemirror": "^7.2.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/form": "^15.1.0",
+		"@atlaskit/form": "^15.2.0",
 		"@atlaskit/icon": "^29.3.0",
 		"@atlaskit/icon-lab": "^5.13.0",
 		"@atlaskit/media-card": "^79.11.0",
@@ -67,7 +67,7 @@
 		"@atlaskit/primitives": "^17.0.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.0.0",
+		"@atlaskit/tmp-editor-statsig": "^16.1.0",
 		"@atlaskit/tokens": "^9.0.0",
 		"@atlaskit/tooltip": "^20.11.0",
 		"@babel/runtime": "^7.0.0",
@@ -79,7 +79,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.46.0",
+		"@atlaskit/editor-common": "^110.48.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",