@atlaskit/editor-plugin-media 9.2.0 → 9.3.2

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-media
 
+## 9.3.2
+
+### Patch Changes
+
+- [`f0aa021b562bb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f0aa021b562bb) -
+  Updated with default media provider and handle optional view in media state
+- Updated dependencies
+
+## 9.3.1
+
+### Patch Changes
+
+- [`17e77ddc106cc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/17e77ddc106cc) -
+  Added basic image modal tests for editor-plugin-media-editing Added image-edit-toolbar-button into
+  the editor media testing toolbar Imported media editing plugin into the editor test helper
+- Updated dependencies
+
+## 9.3.0
+
+### Minor Changes
+
+- [`12da6b7aac3a9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/12da6b7aac3a9) -
+  add support of disable resize handles in resizable media single
+
 ## 9.2.0
 
 ### Minor Changes

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

@@ -145,6 +145,10 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           height: height
         };
         var isSelectedAndInteracted = _this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
+        var mediaProviderToUse = mediaProvider;
+        if (!mediaProviderToUse && (0, _expValEquals.expValEquals)('platform_editor_ssr_renderer', 'isEnabled', true)) {
+          mediaProviderToUse = mediaOptions.syncProvider ? Promise.resolve(mediaOptions.syncProvider) : mediaOptions.provider;
+        }
         return /*#__PURE__*/_react.default.createElement(_media.default, {
           api: pluginInjectionApi,
           view: _this.view,
@@ -154,7 +158,7 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           originalDimensions: originalDimensions,
           maxDimensions: maxDimensions,
           url: url,
-          mediaProvider: mediaProvider,
+          mediaProvider: mediaProviderToUse,
           contextIdentifierProvider: contextIdentifierProvider,
           mediaOptions: mediaOptions,
           onExternalImageLoaded: _this.onExternalImageLoaded,

package/dist/cjs/nodeviews/mediaSingleNext.js

@@ -498,6 +498,52 @@ var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNode
     onClick: clickPlaceholder,
     placeholderMessage: mediaOptions.allowImagePreview ? _media.captionMessages.placeholderWithDoubleClickPrompt : _media.captionMessages.placeholder
   })));
+  if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+    return mediaOptions.allowPixelResizing ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, {
+      view: view,
+      getPos: getPos,
+      updateSize: updateSize,
+      gridSize: 12,
+      viewMediaClientConfig: viewMediaClientConfig,
+      allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
+      selected: isSelected,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginInjectionApi: pluginInjectionApi,
+      layout: layout,
+      width: width,
+      height: height,
+      containerWidth: containerWidth,
+      lineLength: contentWidth || FALLBACK_MOST_COMMON_WIDTH,
+      fullWidthMode: fullWidthMode,
+      hasFallbackContainer: false,
+      mediaSingleWidth: mediaSingleWidth,
+      editorAppearance: editorAppearance,
+      showLegacyNotification: widthType !== 'pixel',
+      forceHandlePositioning: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.forceHandlePositioning,
+      disableHandles: !canResize
+    }, MediaChildren) : (0, _react2.jsx)(_ResizableMediaSingle.default, {
+      view: view,
+      getPos: getPos,
+      updateSize: updateSize,
+      gridSize: 12,
+      viewMediaClientConfig: viewMediaClientConfig,
+      allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
+      selected: isSelected,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginInjectionApi: pluginInjectionApi,
+      layout: layout,
+      width: width,
+      height: height,
+      containerWidth: containerWidth,
+      fullWidthMode: fullWidthMode,
+      hasFallbackContainer: false,
+      mediaSingleWidth: mediaSingleWidth,
+      editorAppearance: editorAppearance,
+      lineLength: contentWidthForLegacyExperience || FALLBACK_MOST_COMMON_WIDTH,
+      pctWidth: mediaSingleWidthAttribute,
+      disableHandles: !canResize
+    }, MediaChildren);
+  }
   return (0, _react2.jsx)(_react.Fragment, null, canResize ? mediaOptions.allowPixelResizing ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, {
     view: view,
     getPos: getPos,

package/dist/cjs/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -22,7 +22,7 @@ var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/core/chevron-left"));
-var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle"));
+var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
 var _colors = require("@atlaskit/theme/colors");
 var _commands = require("../commands");
 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)); }

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

@@ -418,7 +418,13 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
       return true;
     });
     (0, _defineProperty2.default)(this, "selectedMediaContainerNode", function () {
-      var selection = _this.view.state.selection;
+      var selection;
+      if ((0, _expValEquals.expValEquals)('platform_editor_ssr_renderer', 'isEnabled', true)) {
+        var _this$view;
+        selection = (_this$view = _this.view) === null || _this$view === void 0 || (_this$view = _this$view.state) === null || _this$view === void 0 ? void 0 : _this$view.selection;
+      } else {
+        selection = _this.view.state.selection;
+      }
       if (selection instanceof _state2.NodeSelection && _this.isMediaSchemaNode(selection.node)) {
         return selection.node;
       }
@@ -430,9 +436,9 @@ var MediaPluginStateImplementation = exports.MediaPluginStateImplementation = /*
         return;
       }
       _this.showDropzone = isActive;
-      var _this$view = _this.view,
-        dispatch = _this$view.dispatch,
-        state = _this$view.state;
+      var _this$view2 = _this.view,
+        dispatch = _this$view2.dispatch,
+        state = _this$view2.state;
       var tr = state.tr,
         selection = state.selection,
         doc = state.doc;

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

@@ -170,7 +170,8 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
     updateSize = props.updateSize,
     view = props.view,
     viewMediaClientConfig = props.viewMediaClientConfig,
-    forceHandlePositioning = props.forceHandlePositioning;
+    forceHandlePositioning = props.forceHandlePositioning,
+    disableHandles = props.disableHandles;
   var initialWidth = (0, _react.useMemo)(function () {
     return mediaSingleWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
   }, [mediaSingleWidth]);
@@ -247,6 +248,9 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
     if (isAdjacentMode || fullWidthMode) {
       return lineLength;
     }
+    if (!isResizing && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      return "var(--ak-editor-max-container-width)";
+    }
     return calcMaxWidth({
       containerWidth: containerWidth,
       editorAppearance: editorAppearance
@@ -262,7 +266,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
   var resizerNextClassName = (0, _react.useMemo)(function () {
     if ((0, _expValEquals.expValEquals)('platform_editor_resizer_styles_cleanup', 'isEnabled', true)) {
       var _classNameNext = (0, _classnames.default)(_styles.richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', className, _styles.resizerItemClassName, {
-        'display-handle': selected,
+        'display-handle': (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
         'richMedia-selected': selected,
         'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
       });
@@ -274,7 +278,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
       'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
     });
     return (0, _classnames.default)(classNameNext, _styles.resizerStyles);
-  }, [className, isResizing, layout, selected]);
+  }, [className, disableHandles, isResizing, layout, selected]);
   var isInsideInlineLike = (0, _react.useMemo)(function () {
     if (nodePosition === null) {
       return false;
@@ -284,6 +288,12 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
     return !!(0, _utils2.findParentNodeOfTypeClosestToPos)($pos, [listItem]);
   }, [nodePosition, view]);
   var enable = (0, _react.useMemo)(function () {
+    if (disableHandles && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      return {
+        left: false,
+        right: false
+      };
+    }
     return _ui.handleSides.reduce(function (acc, side) {
       var oppositeSide = side === 'left' ? 'right' : 'left';
       acc[side] = _utils.nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(_ui.imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
@@ -292,7 +302,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
       }
       return acc;
     }, {});
-  }, [layout, isInsideInlineLike]);
+  }, [disableHandles, layout, isInsideInlineLike]);
   var defaultGuidelines = (0, _react.useMemo)(function () {
     if (isAdjacentMode) {
       return [];
@@ -520,7 +530,7 @@ var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctio
     snap: snaps,
     resizeRatio: _utils.nonWrappedLayouts.includes(layout) ? 2 : 1,
     "data-testid": resizerNextTestId,
-    isHandleVisible: selected,
+    isHandleVisible: (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
     handlePositioning: handlePositioning,
     handleHighlight: "full-height"
   }, children, showLegacyNotification && (0, _react2.jsx)(_ResizableMediaMigrationNotification.ResizableMediaMigrationNotification, null)));

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

@@ -366,6 +366,12 @@ var ResizableMediaSingle = exports.default = /*#__PURE__*/function (_React$Compo
       var enable = {};
       _ui.handleSides.forEach(function (side) {
         var oppositeSide = side === 'left' ? 'right' : 'left';
+        if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+          if (_this2.props.disableHandles) {
+            enable[side] = false;
+            return;
+          }
+        }
         enable[side] = ['full-width', 'wide', 'center'].concat("wrap-".concat(oppositeSide)).concat("align-".concat(_ui.imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
         if (side === 'left' && _this2.insideInlineLike) {
           enable[side] = false;

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

@@ -582,7 +582,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
                 mediaPluginState: pluginState
               })) !== null && _handleShowImageEdito !== void 0 ? _handleShowImageEdito : false;
             },
-            supportsViewMode: false
+            // Making the button more accessible
+            supportsViewMode: false,
+            isRadioButton: true,
+            selected: false
           });
         }
       }

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

@@ -134,6 +134,10 @@ class MediaNodeView extends SelectionBasedNodeView {
           height
         };
         const isSelectedAndInteracted = this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
+        let mediaProviderToUse = mediaProvider;
+        if (!mediaProviderToUse && expValEquals('platform_editor_ssr_renderer', 'isEnabled', true)) {
+          mediaProviderToUse = mediaOptions.syncProvider ? Promise.resolve(mediaOptions.syncProvider) : mediaOptions.provider;
+        }
         return /*#__PURE__*/React.createElement(MediaNode, {
           api: pluginInjectionApi,
           view: this.view,
@@ -143,7 +147,7 @@ class MediaNodeView extends SelectionBasedNodeView {
           originalDimensions: originalDimensions,
           maxDimensions: maxDimensions,
           url: url,
-          mediaProvider: mediaProvider,
+          mediaProvider: mediaProviderToUse,
           contextIdentifierProvider: contextIdentifierProvider,
           mediaOptions: mediaOptions,
           onExternalImageLoaded: this.onExternalImageLoaded,

package/dist/es2019/nodeviews/mediaSingleNext.js

@@ -457,6 +457,52 @@ export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
     onClick: clickPlaceholder,
     placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
   })));
+  if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+    return mediaOptions.allowPixelResizing ? jsx(ResizableMediaSingleNext, {
+      view: view,
+      getPos: getPos,
+      updateSize: updateSize,
+      gridSize: 12,
+      viewMediaClientConfig: viewMediaClientConfig,
+      allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
+      selected: isSelected,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginInjectionApi: pluginInjectionApi,
+      layout: layout,
+      width: width,
+      height: height,
+      containerWidth: containerWidth,
+      lineLength: contentWidth || FALLBACK_MOST_COMMON_WIDTH,
+      fullWidthMode: fullWidthMode,
+      hasFallbackContainer: false,
+      mediaSingleWidth: mediaSingleWidth,
+      editorAppearance: editorAppearance,
+      showLegacyNotification: widthType !== 'pixel',
+      forceHandlePositioning: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.forceHandlePositioning,
+      disableHandles: !canResize
+    }, MediaChildren) : jsx(ResizableMediaSingle, {
+      view: view,
+      getPos: getPos,
+      updateSize: updateSize,
+      gridSize: 12,
+      viewMediaClientConfig: viewMediaClientConfig,
+      allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
+      selected: isSelected,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginInjectionApi: pluginInjectionApi,
+      layout: layout,
+      width: width,
+      height: height,
+      containerWidth: containerWidth,
+      fullWidthMode: fullWidthMode,
+      hasFallbackContainer: false,
+      mediaSingleWidth: mediaSingleWidth,
+      editorAppearance: editorAppearance,
+      lineLength: contentWidthForLegacyExperience || FALLBACK_MOST_COMMON_WIDTH,
+      pctWidth: mediaSingleWidthAttribute,
+      disableHandles: !canResize
+    }, MediaChildren);
+  }
   return jsx(Fragment, null, canResize ? mediaOptions.allowPixelResizing ? jsx(ResizableMediaSingleNext, {
     view: view,
     getPos: getPos,

package/dist/es2019/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -17,7 +17,7 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
 import { RECENT_SEARCH_WIDTH_IN_PX as CONTAINER_WIDTH_IN_PX, FloatingToolbarButton as Button, ErrorMessage, PanelTextInput } from '@atlaskit/editor-common/ui';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import ChevronLeftLargeIcon from '@atlaskit/icon/core/chevron-left';
-import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
+import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
 import { N200, N30, N80, R400 } from '@atlaskit/theme/colors';
 import { closeMediaAltTextMenu, closeMediaAltTextMenuAndSave } from '../commands';
 export const MAX_ALT_TEXT_LENGTH = 510; // double tweet length

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

@@ -389,9 +389,15 @@ export class MediaPluginStateImplementation {
       return true;
     });
     _defineProperty(this, "selectedMediaContainerNode", () => {
-      const {
-        selection
-      } = this.view.state;
+      let selection;
+      if (expValEquals('platform_editor_ssr_renderer', 'isEnabled', true)) {
+        var _this$view, _this$view$state;
+        selection = (_this$view = this.view) === null || _this$view === void 0 ? void 0 : (_this$view$state = _this$view.state) === null || _this$view$state === void 0 ? void 0 : _this$view$state.selection;
+      } else {
+        ({
+          selection
+        } = this.view.state);
+      }
       if (selection instanceof NodeSelection && this.isMediaSchemaNode(selection.node)) {
         return selection.node;
       }

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

@@ -161,7 +161,8 @@ export const ResizableMediaSingleNextFunctional = props => {
     updateSize,
     view,
     viewMediaClientConfig,
-    forceHandlePositioning
+    forceHandlePositioning,
+    disableHandles
   } = props;
   const initialWidth = useMemo(() => {
     return mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
@@ -224,6 +225,9 @@ export const ResizableMediaSingleNextFunctional = props => {
     if (isAdjacentMode || fullWidthMode) {
       return lineLength;
     }
+    if (!isResizing && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      return `var(--ak-editor-max-container-width)`;
+    }
     return calcMaxWidth({
       containerWidth,
       editorAppearance
@@ -239,7 +243,7 @@ export const ResizableMediaSingleNextFunctional = props => {
   const resizerNextClassName = useMemo(() => {
     if (expValEquals('platform_editor_resizer_styles_cleanup', 'isEnabled', true)) {
       const classNameNext = classnames(richMediaClassName, `image-${layout}`, isResizing ? 'is-resizing' : 'not-resizing', className, resizerItemClassName, {
-        'display-handle': selected,
+        'display-handle': expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
         'richMedia-selected': selected,
         'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
       });
@@ -251,7 +255,7 @@ export const ResizableMediaSingleNextFunctional = props => {
       'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
     });
     return classnames(classNameNext, resizerStyles);
-  }, [className, isResizing, layout, selected]);
+  }, [className, disableHandles, isResizing, layout, selected]);
   const isInsideInlineLike = useMemo(() => {
     if (nodePosition === null) {
       return false;
@@ -263,6 +267,12 @@ export const ResizableMediaSingleNextFunctional = props => {
     return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
   }, [nodePosition, view]);
   const enable = useMemo(() => {
+    if (disableHandles && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      return {
+        left: false,
+        right: false
+      };
+    }
     return handleSides.reduce((acc, side) => {
       const oppositeSide = side === 'left' ? 'right' : 'left';
       acc[side] = nonWrappedLayouts.concat(`wrap-${oppositeSide}`).concat(`align-${imageAlignmentMap[oppositeSide]}`).indexOf(layout) > -1;
@@ -271,7 +281,7 @@ export const ResizableMediaSingleNextFunctional = props => {
       }
       return acc;
     }, {});
-  }, [layout, isInsideInlineLike]);
+  }, [disableHandles, layout, isInsideInlineLike]);
   const defaultGuidelines = useMemo(() => {
     if (isAdjacentMode) {
       return [];
@@ -499,7 +509,7 @@ export const ResizableMediaSingleNextFunctional = props => {
     snap: snaps,
     resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
     "data-testid": resizerNextTestId,
-    isHandleVisible: selected,
+    isHandleVisible: expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
     handlePositioning: handlePositioning,
     handleHighlight: "full-height"
   }, children, showLegacyNotification && jsx(ResizableMediaMigrationNotification, null)));

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

@@ -296,6 +296,12 @@ export default class ResizableMediaSingle extends React.Component {
     const enable = {};
     handleSides.forEach(side => {
       const oppositeSide = side === 'left' ? 'right' : 'left';
+      if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+        if (this.props.disableHandles) {
+          enable[side] = false;
+          return;
+        }
+      }
       enable[side] = ['full-width', 'wide', 'center'].concat(`wrap-${oppositeSide}`).concat(`align-${imageAlignmentMap[oppositeSide]}`).indexOf(layout) > -1;
       if (side === 'left' && this.insideInlineLike) {
         enable[side] = false;

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

@@ -581,7 +581,10 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
                 mediaPluginState: pluginState
               })) !== null && _handleShowImageEdito !== void 0 ? _handleShowImageEdito : false;
             },
-            supportsViewMode: false
+            // Making the button more accessible
+            supportsViewMode: false,
+            isRadioButton: true,
+            selected: false
           });
         }
       }

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

@@ -139,6 +139,10 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           height: height
         };
         var isSelectedAndInteracted = _this.nodeInsideSelection() && interactionState !== 'hasNotHadInteraction';
+        var mediaProviderToUse = mediaProvider;
+        if (!mediaProviderToUse && expValEquals('platform_editor_ssr_renderer', 'isEnabled', true)) {
+          mediaProviderToUse = mediaOptions.syncProvider ? Promise.resolve(mediaOptions.syncProvider) : mediaOptions.provider;
+        }
         return /*#__PURE__*/React.createElement(MediaNode, {
           api: pluginInjectionApi,
           view: _this.view,
@@ -148,7 +152,7 @@ var MediaNodeView = /*#__PURE__*/function (_SelectionBasedNodeVi) {
           originalDimensions: originalDimensions,
           maxDimensions: maxDimensions,
           url: url,
-          mediaProvider: mediaProvider,
+          mediaProvider: mediaProviderToUse,
           contextIdentifierProvider: contextIdentifierProvider,
           mediaOptions: mediaOptions,
           onExternalImageLoaded: _this.onExternalImageLoaded,

package/dist/esm/nodeviews/mediaSingleNext.js

@@ -492,6 +492,52 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
     onClick: clickPlaceholder,
     placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
   })));
+  if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+    return mediaOptions.allowPixelResizing ? jsx(ResizableMediaSingleNext, {
+      view: view,
+      getPos: getPos,
+      updateSize: updateSize,
+      gridSize: 12,
+      viewMediaClientConfig: viewMediaClientConfig,
+      allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
+      selected: isSelected,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginInjectionApi: pluginInjectionApi,
+      layout: layout,
+      width: width,
+      height: height,
+      containerWidth: containerWidth,
+      lineLength: contentWidth || FALLBACK_MOST_COMMON_WIDTH,
+      fullWidthMode: fullWidthMode,
+      hasFallbackContainer: false,
+      mediaSingleWidth: mediaSingleWidth,
+      editorAppearance: editorAppearance,
+      showLegacyNotification: widthType !== 'pixel',
+      forceHandlePositioning: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.forceHandlePositioning,
+      disableHandles: !canResize
+    }, MediaChildren) : jsx(ResizableMediaSingle, {
+      view: view,
+      getPos: getPos,
+      updateSize: updateSize,
+      gridSize: 12,
+      viewMediaClientConfig: viewMediaClientConfig,
+      allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
+      selected: isSelected,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      pluginInjectionApi: pluginInjectionApi,
+      layout: layout,
+      width: width,
+      height: height,
+      containerWidth: containerWidth,
+      fullWidthMode: fullWidthMode,
+      hasFallbackContainer: false,
+      mediaSingleWidth: mediaSingleWidth,
+      editorAppearance: editorAppearance,
+      lineLength: contentWidthForLegacyExperience || FALLBACK_MOST_COMMON_WIDTH,
+      pctWidth: mediaSingleWidthAttribute,
+      disableHandles: !canResize
+    }, MediaChildren);
+  }
   return jsx(Fragment, null, canResize ? mediaOptions.allowPixelResizing ? jsx(ResizableMediaSingleNext, {
     view: view,
     getPos: getPos,

package/dist/esm/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -24,7 +24,7 @@ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-che
 import { RECENT_SEARCH_WIDTH_IN_PX as CONTAINER_WIDTH_IN_PX, FloatingToolbarButton as Button, ErrorMessage, PanelTextInput } from '@atlaskit/editor-common/ui';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import ChevronLeftLargeIcon from '@atlaskit/icon/core/chevron-left';
-import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
+import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
 import { N200, N30, N80, R400 } from '@atlaskit/theme/colors';
 import { closeMediaAltTextMenu, closeMediaAltTextMenuAndSave } from '../commands';
 export var MAX_ALT_TEXT_LENGTH = 510; // double tweet length

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

@@ -410,7 +410,13 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
       return true;
     });
     _defineProperty(this, "selectedMediaContainerNode", function () {
-      var selection = _this.view.state.selection;
+      var selection;
+      if (expValEquals('platform_editor_ssr_renderer', 'isEnabled', true)) {
+        var _this$view;
+        selection = (_this$view = _this.view) === null || _this$view === void 0 || (_this$view = _this$view.state) === null || _this$view === void 0 ? void 0 : _this$view.selection;
+      } else {
+        selection = _this.view.state.selection;
+      }
       if (selection instanceof NodeSelection && _this.isMediaSchemaNode(selection.node)) {
         return selection.node;
       }
@@ -422,9 +428,9 @@ export var MediaPluginStateImplementation = /*#__PURE__*/function () {
         return;
       }
       _this.showDropzone = isActive;
-      var _this$view = _this.view,
-        dispatch = _this$view.dispatch,
-        state = _this$view.state;
+      var _this$view2 = _this.view,
+        dispatch = _this$view2.dispatch,
+        state = _this$view2.state;
       var tr = state.tr,
         selection = state.selection,
         doc = state.doc;

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

@@ -160,7 +160,8 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
     updateSize = props.updateSize,
     view = props.view,
     viewMediaClientConfig = props.viewMediaClientConfig,
-    forceHandlePositioning = props.forceHandlePositioning;
+    forceHandlePositioning = props.forceHandlePositioning,
+    disableHandles = props.disableHandles;
   var initialWidth = useMemo(function () {
     return mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
   }, [mediaSingleWidth]);
@@ -237,6 +238,9 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
     if (isAdjacentMode || fullWidthMode) {
       return lineLength;
     }
+    if (!isResizing && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      return "var(--ak-editor-max-container-width)";
+    }
     return calcMaxWidth({
       containerWidth: containerWidth,
       editorAppearance: editorAppearance
@@ -252,7 +256,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
   var resizerNextClassName = useMemo(function () {
     if (expValEquals('platform_editor_resizer_styles_cleanup', 'isEnabled', true)) {
       var _classNameNext = classnames(richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', className, resizerItemClassName, {
-        'display-handle': selected,
+        'display-handle': expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
         'richMedia-selected': selected,
         'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
       });
@@ -264,7 +268,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
       'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
     });
     return classnames(classNameNext, resizerStyles);
-  }, [className, isResizing, layout, selected]);
+  }, [className, disableHandles, isResizing, layout, selected]);
   var isInsideInlineLike = useMemo(function () {
     if (nodePosition === null) {
       return false;
@@ -274,6 +278,12 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
     return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
   }, [nodePosition, view]);
   var enable = useMemo(function () {
+    if (disableHandles && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+      return {
+        left: false,
+        right: false
+      };
+    }
     return handleSides.reduce(function (acc, side) {
       var oppositeSide = side === 'left' ? 'right' : 'left';
       acc[side] = nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
@@ -282,7 +292,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
       }
       return acc;
     }, {});
-  }, [layout, isInsideInlineLike]);
+  }, [disableHandles, layout, isInsideInlineLike]);
   var defaultGuidelines = useMemo(function () {
     if (isAdjacentMode) {
       return [];
@@ -510,7 +520,7 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
     snap: snaps,
     resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
     "data-testid": resizerNextTestId,
-    isHandleVisible: selected,
+    isHandleVisible: expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
     handlePositioning: handlePositioning,
     handleHighlight: "full-height"
   }, children, showLegacyNotification && jsx(ResizableMediaMigrationNotification, null)));

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

@@ -362,6 +362,12 @@ var ResizableMediaSingle = /*#__PURE__*/function (_React$Component) {
       var enable = {};
       handleSides.forEach(function (side) {
         var oppositeSide = side === 'left' ? 'right' : 'left';
+        if (expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
+          if (_this2.props.disableHandles) {
+            enable[side] = false;
+            return;
+          }
+        }
         enable[side] = ['full-width', 'wide', 'center'].concat("wrap-".concat(oppositeSide)).concat("align-".concat(imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
         if (side === 'left' && _this2.insideInlineLike) {
           enable[side] = false;

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

@@ -573,7 +573,10 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
                 mediaPluginState: pluginState
               })) !== null && _handleShowImageEdito !== void 0 ? _handleShowImageEdito : false;
             },
-            supportsViewMode: false
+            // Making the button more accessible
+            supportsViewMode: false,
+            isRadioButton: true,
+            selected: false
           });
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "9.2.0",
+	"version": "9.3.2",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -51,24 +51,24 @@
 		"@atlaskit/editor-prosemirror": "^7.2.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/form": "^15.2.0",
-		"@atlaskit/icon": "^29.3.0",
-		"@atlaskit/icon-lab": "^5.13.0",
-		"@atlaskit/media-card": "^79.12.0",
+		"@atlaskit/form": "^15.3.0",
+		"@atlaskit/icon": "^29.4.0",
+		"@atlaskit/icon-lab": "^5.14.0",
+		"@atlaskit/media-card": "^79.13.0",
 		"@atlaskit/media-client": "^35.7.0",
 		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/media-common": "^12.3.0",
 		"@atlaskit/media-filmstrip": "^51.1.0",
 		"@atlaskit/media-picker": "^70.1.0",
 		"@atlaskit/media-ui": "^28.7.0",
-		"@atlaskit/media-viewer": "^52.5.0",
+		"@atlaskit/media-viewer": "^52.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^17.0.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.8.0",
+		"@atlaskit/tmp-editor-statsig": "^16.11.0",
 		"@atlaskit/tokens": "^9.1.0",
-		"@atlaskit/tooltip": "^20.11.0",
+		"@atlaskit/tooltip": "^20.12.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -78,7 +78,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.5.0",
+		"@atlaskit/editor-common": "^111.7.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",