@atlaskit/editor-plugin-media 4.0.0 → 4.1.0

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

@@ -1,15 +1,5 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -20,14 +10,12 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
 import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import throttle from 'lodash/throttle';
-import memoizeOne from 'memoize-one';
-import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { findClosestSnap, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps, getGuidelinesWithHighlights, getGuidelineTypeFromKey, getRelativeGuidelines, getRelativeGuideSnaps } from '@atlaskit/editor-common/guideline';
 import { calcMediaSingleMaxWidth, DEFAULT_IMAGE_WIDTH, MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { resizerStyles, richMediaClassName } from '@atlaskit/editor-common/styles';
 import { calcPctFromPx, handleSides, imageAlignmentMap, wrappedLayouts } from '@atlaskit/editor-common/ui';
-import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/utils';
+import { nonWrappedLayouts } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
@@ -38,562 +26,26 @@ import { checkMediaType } from '../../pm-plugins/utils/check-media-type';
 import { ResizableMediaMigrationNotification } from './ResizableMediaMigrationNotification';
 import { wrapperStyle } from './styled';
 export var resizerNextTestId = 'mediaSingle.resizerNext.testid';
-// eslint-disable-next-line @repo/internal/react/no-class-components
-var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
-  function ResizableMediaSingleNext(props) {
-    var _this;
-    _classCallCheck(this, ResizableMediaSingleNext);
-    _this = _callSuper(this, ResizableMediaSingleNext, [props]);
-    _defineProperty(_this, "lastSnappedGuidelineKeys", []);
-    _defineProperty(_this, "updateGuidelines", function () {
-      var _this$props = _this.props,
-        view = _this$props.view,
-        lineLength = _this$props.lineLength;
-      var defaultGuidelines = _this.getDefaultGuidelines();
-      var _generateDynamicGuide = generateDynamicGuidelines(view.state, lineLength, {
-          styles: {
-            lineStyle: 'dashed'
-          },
-          show: false
-        }),
-        relativeGuides = _generateDynamicGuide.relativeGuides,
-        dynamicGuides = _generateDynamicGuide.dynamicGuides;
-
-      // disable guidelines for nested media single node
-      var dynamicGuidelines = _this.isAdjacentMode() ? [] : dynamicGuides;
-      _this.setState({
-        relativeGuides: relativeGuides,
-        guidelines: [].concat(_toConsumableArray(defaultGuidelines), _toConsumableArray(dynamicGuidelines))
-      });
-    });
-    _defineProperty(_this, "calcNewLayout", function (newWidth, stop) {
-      var _this$props2 = _this.props,
-        layout = _this$props2.layout,
-        containerWidth = _this$props2.containerWidth,
-        lineLength = _this$props2.lineLength,
-        fullWidthMode = _this$props2.fullWidthMode;
-      var newPct = calcPctFromPx(newWidth, lineLength) * 100;
-      if (newPct <= 100 && _this.wrappedLayout) {
-        if (!stop || newPct !== 100) {
-          return layout;
-        }
-      }
-      return _this.calcUnwrappedLayout(newWidth, containerWidth || 0, lineLength, fullWidthMode, _this.isAdjacentMode());
-    });
-    _defineProperty(_this, "calcUnwrappedLayout", function (width, containerWidth, contentWidth, fullWidthMode, isNestedNode) {
-      if (isNestedNode) {
-        return 'center';
-      }
-      if (fullWidthMode) {
-        if (width < contentWidth) {
-          return 'center';
-        }
-        return 'full-width';
-      }
-
-      // handle top-level node in fixed-width editor
-      if (width <= contentWidth) {
-        return 'center';
-      }
-      if (width < Math.min(containerWidth - akEditorGutterPaddingDynamic() * 2, akEditorFullWidthLayoutWidth)) {
-        return 'wide';
-      }
-
-      // set full width to be containerWidth - akEditorGutterPaddingDynamic() * 2
-      // instead of containerWidth - akEditorBreakoutPadding,
-      // so that we have image aligned with text
-      return 'full-width';
-    });
-    _defineProperty(_this, "calcPxHeight", function (newWidth) {
-      var _this$props3 = _this.props,
-        _this$props3$width = _this$props3.width,
-        width = _this$props3$width === void 0 ? newWidth : _this$props3$width,
-        height = _this$props3.height;
-      return Math.round(height / width * newWidth);
-    });
-    _defineProperty(_this, "displayGuideline", function (guidelines) {
-      var _this$props$pluginInj;
-      return (_this$props$pluginInj = _this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || (_this$props$pluginInj = _this$props$pluginInj.guideline) === null || _this$props$pluginInj === void 0 || (_this$props$pluginInj = _this$props$pluginInj.actions) === null || _this$props$pluginInj === void 0 ? void 0 : _this$props$pluginInj.displayGuideline(_this.props.view)({
-        guidelines: guidelines
-      });
-    });
-    _defineProperty(_this, "setIsResizing", function (isResizing) {
-      var _this$props$view = _this.props.view,
-        state = _this$props$view.state,
-        dispatch = _this$props$view.dispatch;
-      var tr = state.tr;
-      tr.setMeta(MEDIA_PLUGIN_IS_RESIZING_KEY, isResizing);
-      tr.setMeta('is-resizer-resizing', isResizing);
-      return dispatch(tr);
-    });
-    _defineProperty(_this, "updateSizeInPluginState", throttle(function (width) {
-      var _this$props$view2 = _this.props.view,
-        state = _this$props$view2.state,
-        dispatch = _this$props$view2.dispatch;
-      var tr = state.tr;
-      tr.setMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY, width);
-      return dispatch(tr);
-    }, MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
-    _defineProperty(_this, "calcMaxWidth", memoizeOne(function (contentWidth, containerWidth, fullWidthMode) {
-      if (_this.isAdjacentMode() || fullWidthMode) {
-        return contentWidth;
-      }
-      return calcMediaSingleMaxWidth(containerWidth, _this.props.editorAppearance);
-    }));
-    _defineProperty(_this, "calcMinWidth", memoizeOne(function (isVideoFile, contentWidth) {
-      return Math.min(contentWidth || akEditorDefaultLayoutWidth, isVideoFile ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
-    }));
-    _defineProperty(_this, "getRelativeGuides", function () {
-      var _this$props$pluginInj2;
-      var guidelinePluginState = (_this$props$pluginInj2 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj2 === void 0 || (_this$props$pluginInj2 = _this$props$pluginInj2.guideline) === null || _this$props$pluginInj2 === void 0 || (_this$props$pluginInj2 = _this$props$pluginInj2.sharedState) === null || _this$props$pluginInj2 === void 0 ? void 0 : _this$props$pluginInj2.currentState();
-      var _ref = (guidelinePluginState === null || guidelinePluginState === void 0 ? void 0 : guidelinePluginState.rect) || {
-          top: 0,
-          left: 0
-        },
-        topOffset = _ref.top;
-      var $pos = _this.$pos;
-      var relativeGuides = $pos && $pos.nodeAfter && _this.state.size.width ? getRelativeGuidelines(_this.state.relativeGuides, {
-        node: $pos.nodeAfter,
-        pos: $pos.pos
-      }, _this.props.view, _this.props.lineLength, topOffset, _this.state.size) : [];
-      return relativeGuides;
-    });
-    _defineProperty(_this, "updateActiveGuidelines", function () {
-      var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      var guidelines = arguments.length > 1 ? arguments[1] : undefined;
-      var guidelineSnapsReference = arguments.length > 2 ? arguments[2] : undefined;
-      if (guidelineSnapsReference.snaps.x) {
-        var _findClosestSnap = findClosestSnap(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, MEDIA_SINGLE_SNAP_GAP),
-          gap = _findClosestSnap.gap,
-          activeGuidelineKeys = _findClosestSnap.keys;
-        var relativeGuidelines = activeGuidelineKeys.length ? [] : _this.getRelativeGuides();
-        _this.lastSnappedGuidelineKeys = activeGuidelineKeys.length ? activeGuidelineKeys : relativeGuidelines.map(function (rg) {
-          return rg.key;
-        });
-        _this.displayGuideline([].concat(_toConsumableArray(getGuidelinesWithHighlights(gap, MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines)), _toConsumableArray(relativeGuidelines)));
-      }
-    });
-    _defineProperty(_this, "calculateSizeState", function (size, delta) {
-      var onResizeStop = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-      var calculatedWidth = Math.round(size.width + delta.width);
-      var calculatedWidthWithLayout = _this.calcNewLayout(calculatedWidth, onResizeStop);
-      return {
-        width: calculatedWidth,
-        height: calculatedWidth / _this.aspectRatio,
-        layout: calculatedWidthWithLayout
-      };
-    });
-    _defineProperty(_this, "selectCurrentMediaNode", function () {
-      // TODO: ED-26962 - if adding !this.props.selected, it doesn't work if media single node is at top postion
-      if (_this.pos === null) {
-        return;
-      }
-      setNodeSelection(_this.props.view, _this.pos);
-    });
-    _defineProperty(_this, "handleResizeStart", function () {
-      _this.setState({
-        isResizing: true
-      });
-      _this.selectCurrentMediaNode();
-      _this.setIsResizing(true);
-      _this.updateSizeInPluginState(_this.state.size.width);
-      // re-calculate guidelines
-      if (_this.isGuidelineEnabled) {
-        _this.updateGuidelines();
-      }
-    });
-    _defineProperty(_this, "handleResize", function (size, delta) {
-      var _this$props4 = _this.props,
-        layout = _this$props4.layout,
-        updateSize = _this$props4.updateSize,
-        lineLength = _this$props4.lineLength;
-      var _this$calculateSizeSt = _this.calculateSizeState(size, delta),
-        width = _this$calculateSizeSt.width,
-        height = _this$calculateSizeSt.height,
-        newLayout = _this$calculateSizeSt.layout;
-      if (_this.isGuidelineEnabled) {
-        var guidelineSnaps = getGuidelineSnaps(_this.state.guidelines, lineLength, layout);
-        _this.updateActiveGuidelines(width, _this.state.guidelines, guidelineSnaps);
-        var relativeSnaps = getRelativeGuideSnaps(_this.state.relativeGuides, _this.aspectRatio);
-        _this.setState({
-          size: {
-            width: width,
-            height: height
-          },
-          snaps: {
-            x: [].concat(_toConsumableArray(guidelineSnaps.snaps.x || []), _toConsumableArray(relativeSnaps))
-          }
-        });
-      } else {
-        _this.setState({
-          size: {
-            width: width,
-            height: height
-          }
-        });
-      }
-      _this.updateSizeInPluginState(width);
-      if (newLayout !== layout) {
-        updateSize(width, newLayout);
-      }
-    });
-    _defineProperty(_this, "handleResizeStop", function (size, delta) {
-      var _this$props5 = _this.props,
-        updateSize = _this$props5.updateSize,
-        dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent,
-        nodeType = _this$props5.nodeType;
-      var _this$calculateSizeSt2 = _this.calculateSizeState(size, delta, true),
-        width = _this$calculateSizeSt2.width,
-        height = _this$calculateSizeSt2.height,
-        newLayout = _this$calculateSizeSt2.layout;
-      if (dispatchAnalyticsEvent) {
-        var $pos = _this.$pos;
-        var event = getMediaResizeAnalyticsEvent(nodeType || 'mediaSingle', {
-          width: width,
-          layout: newLayout,
-          widthType: 'pixel',
-          snapType: getGuidelineTypeFromKey(_this.lastSnappedGuidelineKeys, _this.state.guidelines),
-          parentNode: $pos ? $pos.parent.type.name : undefined,
-          inputMethod: 'mouse'
-        });
-        if (event) {
-          dispatchAnalyticsEvent(event);
-        }
-      }
-      _this.setIsResizing(false);
-      _this.displayGuideline([]);
-      var newWidth = width;
-      if (newLayout === 'full-width') {
-        // When a node reaches full width in current viewport,
-        // update its width with 1800 to align with pixel entry
-        newWidth = akEditorFullWidthLayoutWidth;
-      }
-      _this.setState({
-        isResizing: false,
-        size: {
-          width: newWidth,
-          height: height
-        }
-      }, function () {
-        updateSize(newWidth, newLayout);
-      });
-    });
-    _defineProperty(_this, "getMaxWidth", function () {
-      var _this$props6 = _this.props,
-        lineLength = _this$props6.lineLength,
-        containerWidth = _this$props6.containerWidth,
-        fullWidthMode = _this$props6.fullWidthMode,
-        editorAppearance = _this$props6.editorAppearance,
-        forceHandlePositioning = _this$props6.forceHandlePositioning;
-      var isResizing = _this.state.isResizing;
-      if (editorAppearance === 'chromeless' && forceHandlePositioning === 'adjacent' && fg('platform_editor_inline_resize_media_to_edge')) {
-        return containerWidth - MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN * 2;
-      }
-      return !isResizing && _this.isAdjacentMode() ?
-      // set undefined to fall back to 100%
-      undefined : _this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
-    });
-    var initialWidth = props.mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
-    _this.state = {
-      isVideoFile: true,
-      isResizing: false,
-      size: {
-        width: initialWidth,
-        height: _this.calcPxHeight(initialWidth)
-      },
-      snaps: {},
-      relativeGuides: {},
-      guidelines: []
-    };
-    return _this;
-  }
-  _inherits(ResizableMediaSingleNext, _React$Component);
-  return _createClass(ResizableMediaSingleNext, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.mediaSingleWidth !== this.props.mediaSingleWidth && this.props.mediaSingleWidth) {
-        // update size when lineLength becomes defined later
-        // ensures extended experience renders legacy image with the same size as the legacy experience
-        var initialWidth = this.props.mediaSingleWidth;
-        this.setState({
-          size: {
-            width: initialWidth,
-            height: this.calcPxHeight(initialWidth)
-          }
-        });
-      }
-      return true;
-    }
-  }, {
-    key: "componentDidMount",
-    value: function () {
-      var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var viewMediaClientConfig;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              viewMediaClientConfig = this.props.viewMediaClientConfig;
-              if (!viewMediaClientConfig) {
-                _context.next = 4;
-                break;
-              }
-              _context.next = 4;
-              return this.checkVideoFile(viewMediaClientConfig);
-            case 4:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, this);
-      }));
-      function componentDidMount() {
-        return _componentDidMount.apply(this, arguments);
-      }
-      return componentDidMount;
-    }()
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (this.props.viewMediaClientConfig !== nextProps.viewMediaClientConfig) {
-        this.checkVideoFile(nextProps.viewMediaClientConfig);
-      }
-    }
-  }, {
-    key: "wrappedLayout",
-    get: function get() {
-      return wrappedLayouts.indexOf(this.props.layout) > -1;
-    }
-  }, {
-    key: "pos",
-    get: function get() {
-      if (typeof this.props.getPos !== 'function') {
-        return null;
-      }
-      var pos = this.props.getPos();
-      if (Number.isNaN(pos) || typeof pos !== 'number') {
-        return null;
-      }
-      return pos;
-    }
-  }, {
-    key: "$pos",
-    get: function get() {
-      var pos = this.pos;
-      // need to pass view because we may not get updated props in time
-      return pos === null ? pos : this.props.view.state.doc.resolve(pos);
-    }
-  }, {
-    key: "aspectRatio",
-    get: function get() {
-      var _this$props7 = this.props,
-        width = _this$props7.width,
-        height = _this$props7.height;
-      if (width) {
-        return width / height;
-      }
-
-      // TODO: ED-26962 - handle this case
-      return 1;
-    }
-  }, {
-    key: "insideInlineLike",
-    get: function get() {
-      var $pos = this.$pos;
-      if (!$pos) {
-        return false;
-      }
-      var listItem = this.props.view.state.schema.nodes.listItem;
-      return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
-    }
-  }, {
-    key: "insideLayout",
-    get: function get() {
-      var $pos = this.$pos;
-      if (!$pos) {
-        return false;
-      }
-      var layoutColumn = this.props.view.state.schema.nodes.layoutColumn;
-      return !!findParentNodeOfTypeClosestToPos($pos, [layoutColumn]);
-    }
-  }, {
-    key: "isGuidelineEnabled",
-    get: function get() {
-      var _this$props$pluginInj3;
-      return !!((_this$props$pluginInj3 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj3 !== void 0 && _this$props$pluginInj3.guideline);
-    }
-
-    // check if is inside of layout, table, expand, nestedExpand and list item
-  }, {
-    key: "isNestedNode",
-    value: function isNestedNode() {
-      var $pos = this.$pos;
-      return !!($pos && $pos.depth !== 0);
-    }
-
-    // Check if adjacement mode should be activated;
-  }, {
-    key: "isAdjacentMode",
-    value: function isAdjacentMode() {
-      var _this$isNestedNode;
-      if (fg('platform_editor_inline_resize_media_to_edge')) {
-        if (this.props.forceHandlePositioning === 'adjacent') {
-          return true;
-        }
-      }
-      return (_this$isNestedNode = this.isNestedNode()) !== null && _this$isNestedNode !== void 0 ? _this$isNestedNode : false;
-    }
-  }, {
-    key: "getHandlePositioning",
-    value: function getHandlePositioning() {
-      return this.isAdjacentMode() ? 'adjacent' : undefined;
-    }
-  }, {
-    key: "getDefaultGuidelines",
-    value: function getDefaultGuidelines() {
-      var _this$props8 = this.props,
-        lineLength = _this$props8.lineLength,
-        containerWidth = _this$props8.containerWidth,
-        fullWidthMode = _this$props8.fullWidthMode;
-
-      // disable guidelines for nested media single node
-      return this.isAdjacentMode() ? [] : generateDefaultGuidelines(lineLength, containerWidth || 0, fullWidthMode);
-    }
-  }, {
-    key: "checkVideoFile",
-    value: function () {
-      var _checkVideoFile = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(viewMediaClientConfig) {
-        var mediaNode, mediaType, isVideoFile;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              if (!(this.pos === null || !viewMediaClientConfig)) {
-                _context2.next = 2;
-                break;
-              }
-              return _context2.abrupt("return");
-            case 2:
-              mediaNode = this.props.view.state.doc.nodeAt(this.pos + 1);
-              if (!mediaNode) {
-                _context2.next = 9;
-                break;
-              }
-              _context2.next = 6;
-              return checkMediaType(mediaNode, viewMediaClientConfig);
-            case 6:
-              _context2.t0 = _context2.sent;
-              _context2.next = 10;
-              break;
-            case 9:
-              _context2.t0 = undefined;
-            case 10:
-              mediaType = _context2.t0;
-              isVideoFile = mediaType !== 'external' && mediaType !== 'image';
-              if (this.state.isVideoFile !== isVideoFile) {
-                this.setState({
-                  isVideoFile: isVideoFile
-                });
-              }
-            case 13:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2, this);
-      }));
-      function checkVideoFile(_x) {
-        return _checkVideoFile.apply(this, arguments);
-      }
-      return checkVideoFile;
-    }()
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props9 = this.props,
-        origWidth = _this$props9.width,
-        layout = _this$props9.layout,
-        containerWidth = _this$props9.containerWidth,
-        fullWidthMode = _this$props9.fullWidthMode,
-        selected = _this$props9.selected,
-        children = _this$props9.children,
-        lineLength = _this$props9.lineLength,
-        showLegacyNotification = _this$props9.showLegacyNotification;
-      var _this$state = this.state,
-        isResizing = _this$state.isResizing,
-        size = _this$state.size,
-        isVideoFile = _this$state.isVideoFile;
-      var enable = {};
-      handleSides.forEach(function (side) {
-        var oppositeSide = side === 'left' ? 'right' : 'left';
-        enable[side] = nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
-        if (side === 'left' && _this2.insideInlineLike) {
-          enable[side] = false;
-        }
-      });
-
-      // TODO: ED-26962 - Clean up where this lives and how it gets generated
-      var className = classnames(richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', this.props.className, {
-        'richMedia-selected': selected,
-        'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
-      });
-      var resizerNextClassName = classnames(className, resizerStyles);
-      var isNestedNode = this.isAdjacentMode();
-      var handlePositioning = this.getHandlePositioning();
-      var maxWidth = isSSR() && size.width && fg('platform_editor_fix_image_size_diff_during_ssr') ? undefined : this.getMaxWidth();
-      var minWidth = this.calcMinWidth(isVideoFile, lineLength);
-
-      // while is not resizing, we take 100% as min-width if the container width is less than the min-width
-      var minViewWidth = isResizing ? minWidth : "min(".concat(minWidth, "px, 100%)");
-      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: wrapperStyle({
-          layout: layout,
-          containerWidth: containerWidth || origWidth,
-          fullWidthMode: fullWidthMode,
-          mediaSingleWidth: this.state.size.width,
-          isNestedNode: isNestedNode,
-          isExtendedResizeExperienceOn: true
-        })
-      }, jsx(ResizerNext, {
-        minWidth: minViewWidth,
-        maxWidth: maxWidth
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        ,
-        className: resizerNextClassName,
-        snapGap: MEDIA_SINGLE_SNAP_GAP,
-        enable: enable,
-        width: size.width,
-        handleResizeStart: this.handleResizeStart,
-        handleResize: this.handleResize,
-        handleResizeStop: this.handleResizeStop,
-        snap: this.state.snaps,
-        resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
-        "data-testid": resizerNextTestId,
-        isHandleVisible: selected,
-        handlePositioning: handlePositioning,
-        handleHighlight: "full-height"
-      }, children, showLegacyNotification && jsx(ResizableMediaMigrationNotification, null)));
-    }
-  }]);
-}(React.Component);
 var calcPxHeight = function calcPxHeight(props) {
   var newWidth = props.newWidth,
     previousWidth = props.previousWidth,
     previousHeight = props.previousHeight;
   return Math.round(previousHeight / previousWidth * newWidth);
 };
-var calcMinWidth = function calcMinWidth(_ref2) {
-  var isVideoFile = _ref2.isVideoFile,
-    contentWidth = _ref2.contentWidth;
+var calcMinWidth = function calcMinWidth(_ref) {
+  var isVideoFile = _ref.isVideoFile,
+    contentWidth = _ref.contentWidth;
   return Math.min(contentWidth || akEditorDefaultLayoutWidth, isVideoFile ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
 };
-var calcMaxWidth = function calcMaxWidth(_ref3) {
-  var containerWidth = _ref3.containerWidth,
-    editorAppearance = _ref3.editorAppearance;
+var calcMaxWidth = function calcMaxWidth(_ref2) {
+  var containerWidth = _ref2.containerWidth,
+    editorAppearance = _ref2.editorAppearance;
   return calcMediaSingleMaxWidth(containerWidth, editorAppearance);
 };
-var setIsResizingPluginState = function setIsResizingPluginState(_ref4) {
-  var isResizing = _ref4.isResizing,
-    nodePosition = _ref4.nodePosition,
-    initialWidth = _ref4.initialWidth;
+var setIsResizingPluginState = function setIsResizingPluginState(_ref3) {
+  var isResizing = _ref3.isResizing,
+    nodePosition = _ref3.nodePosition,
+    initialWidth = _ref3.initialWidth;
   return function (state, dispatch) {
     var tr = state.tr;
     tr.setMeta(MEDIA_PLUGIN_IS_RESIZING_KEY, isResizing);
@@ -634,12 +86,12 @@ var calcUnwrappedLayout = function calcUnwrappedLayout(width, containerWidth, co
   // so that we have image aligned with text
   return 'full-width';
 };
-var calcNewLayout = function calcNewLayout(_ref5) {
-  var layout = _ref5.layout,
-    containerWidth = _ref5.containerWidth,
-    lineLength = _ref5.lineLength,
-    fullWidthMode = _ref5.fullWidthMode,
-    isNestedNode = _ref5.isNestedNode;
+var calcNewLayout = function calcNewLayout(_ref4) {
+  var layout = _ref4.layout,
+    containerWidth = _ref4.containerWidth,
+    lineLength = _ref4.lineLength,
+    fullWidthMode = _ref4.fullWidthMode,
+    isNestedNode = _ref4.isNestedNode;
   return function (newWidth, stop) {
     var newPct = calcPctFromPx(newWidth, lineLength) * 100;
     var wrappedLayout = wrappedLayouts.indexOf(layout) > -1;
@@ -664,9 +116,9 @@ var calculateSizeState = function calculateSizeState(props) {
     };
   };
 };
-var getAspectRatio = function getAspectRatio(_ref6) {
-  var width = _ref6.width,
-    height = _ref6.height;
+var getAspectRatio = function getAspectRatio(_ref5) {
+  var width = _ref5.width,
+    height = _ref5.height;
   if (width && height > 0) {
     return width / height;
   }
@@ -674,9 +126,9 @@ var getAspectRatio = function getAspectRatio(_ref6) {
   // TODO: ED-26962 - handle this case
   return 1;
 };
-var updateSizeInPluginState = throttle(function (_ref7) {
-  var width = _ref7.width,
-    view = _ref7.view;
+var updateSizeInPluginState = throttle(function (_ref6) {
+  var width = _ref6.width,
+    view = _ref6.view;
   var state = view.state,
     dispatch = view.dispatch;
   var tr = state.tr;
@@ -825,14 +277,14 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
   var relativeGuidesRef = useRef({});
   var guidelinesRef = useRef([]);
   var updateGuidelines = useCallback(function () {
-    var _generateDynamicGuide2 = generateDynamicGuidelines(view.state, lineLength, {
+    var _generateDynamicGuide = generateDynamicGuidelines(view.state, lineLength, {
         styles: {
           lineStyle: 'dashed'
         },
         show: false
       }),
-      relativeGuides = _generateDynamicGuide2.relativeGuides,
-      dynamicGuides = _generateDynamicGuide2.dynamicGuides;
+      relativeGuides = _generateDynamicGuide.relativeGuides,
+      dynamicGuides = _generateDynamicGuide.dynamicGuides;
 
     // disable guidelines for nested media single node
     var dynamicGuidelines = isAdjacentMode ? [] : dynamicGuides;
@@ -859,11 +311,11 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
       return [];
     }
     var guidelinePluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$g = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g === void 0 || (_pluginInjectionApi$g = _pluginInjectionApi$g.sharedState) === null || _pluginInjectionApi$g === void 0 ? void 0 : _pluginInjectionApi$g.currentState();
-    var _ref8 = (guidelinePluginState === null || guidelinePluginState === void 0 ? void 0 : guidelinePluginState.rect) || {
+    var _ref7 = (guidelinePluginState === null || guidelinePluginState === void 0 ? void 0 : guidelinePluginState.rect) || {
         top: 0,
         left: 0
       },
-      topOffset = _ref8.top;
+      topOffset = _ref7.top;
     var $pos = view.state.doc.resolve(nodePosition);
     var relativeGuides = $pos && $pos.nodeAfter && dimensionsRef.current.width ? getRelativeGuidelines(relativeGuidesRef.current, {
       node: $pos.nodeAfter,
@@ -879,9 +331,9 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
     if (!guidelineSnapsReference.snaps.x) {
       return;
     }
-    var _findClosestSnap2 = findClosestSnap(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, MEDIA_SINGLE_SNAP_GAP),
-      gap = _findClosestSnap2.gap,
-      activeGuidelineKeys = _findClosestSnap2.keys;
+    var _findClosestSnap = findClosestSnap(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, MEDIA_SINGLE_SNAP_GAP),
+      gap = _findClosestSnap.gap,
+      activeGuidelineKeys = _findClosestSnap.keys;
     var relativeGuidelines = activeGuidelineKeys.length ? [] : getRelativeGuides();
     lastSnappedGuidelineKeysRef.current = activeGuidelineKeys.length ? activeGuidelineKeys : relativeGuidelines.map(function (rg) {
       return rg.key;
@@ -1038,76 +490,38 @@ export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNex
     handleHighlight: "full-height"
   }, children, showLegacyNotification && jsx(ResizableMediaMigrationNotification, null)));
 };
-var ResizableMediaSingleToggle = function ResizableMediaSingleToggle(_ref9) {
-  var allowBreakoutSnapPoints = _ref9.allowBreakoutSnapPoints,
-    children = _ref9.children,
-    className = _ref9.className,
-    containerWidth = _ref9.containerWidth,
-    dataAttributes = _ref9.dataAttributes,
-    disableHandles = _ref9.disableHandles,
-    dispatchAnalyticsEvent = _ref9.dispatchAnalyticsEvent,
-    editorAppearance = _ref9.editorAppearance,
-    fullWidthMode = _ref9.fullWidthMode,
-    getPos = _ref9.getPos,
-    gridSize = _ref9.gridSize,
-    handleMediaSingleRef = _ref9.handleMediaSingleRef,
-    hasFallbackContainer = _ref9.hasFallbackContainer,
-    height = _ref9.height,
-    isInsideOfInlineExtension = _ref9.isInsideOfInlineExtension,
-    isLoading = _ref9.isLoading,
-    layout = _ref9.layout,
-    lineLength = _ref9.lineLength,
-    mediaSingleWidth = _ref9.mediaSingleWidth,
-    nodeType = _ref9.nodeType,
-    pctWidth = _ref9.pctWidth,
-    pluginInjectionApi = _ref9.pluginInjectionApi,
-    selected = _ref9.selected,
-    showLegacyNotification = _ref9.showLegacyNotification,
-    size = _ref9.size,
-    updateSize = _ref9.updateSize,
-    view = _ref9.view,
-    viewMediaClientConfig = _ref9.viewMediaClientConfig,
-    width = _ref9.width,
-    forceHandlePositioning = _ref9.forceHandlePositioning;
-  if (fg('platform_editor_react18_phase2__media_single') || fg('platform_editor_react18_phase2__media_single_jira')) {
-    return jsx(ResizableMediaSingleNextFunctional, {
-      allowBreakoutSnapPoints: allowBreakoutSnapPoints
-      // eslint-disable-next-line react/no-children-prop
-      ,
-      children: children
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: className,
-      containerWidth: containerWidth,
-      dataAttributes: dataAttributes,
-      disableHandles: disableHandles,
-      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-      editorAppearance: editorAppearance,
-      fullWidthMode: fullWidthMode,
-      getPos: getPos,
-      gridSize: gridSize,
-      handleMediaSingleRef: handleMediaSingleRef,
-      hasFallbackContainer: hasFallbackContainer,
-      height: height,
-      isInsideOfInlineExtension: isInsideOfInlineExtension,
-      isLoading: isLoading,
-      layout: layout,
-      lineLength: lineLength,
-      mediaSingleWidth: mediaSingleWidth,
-      nodeType: nodeType,
-      pctWidth: pctWidth,
-      pluginInjectionApi: pluginInjectionApi,
-      selected: selected,
-      showLegacyNotification: showLegacyNotification,
-      size: size,
-      updateSize: updateSize,
-      view: view,
-      viewMediaClientConfig: viewMediaClientConfig,
-      width: width,
-      forceHandlePositioning: forceHandlePositioning
-    });
-  }
-  return jsx(ResizableMediaSingleNext, {
+var ResizableMediaSingleToggle = function ResizableMediaSingleToggle(_ref8) {
+  var allowBreakoutSnapPoints = _ref8.allowBreakoutSnapPoints,
+    children = _ref8.children,
+    className = _ref8.className,
+    containerWidth = _ref8.containerWidth,
+    dataAttributes = _ref8.dataAttributes,
+    disableHandles = _ref8.disableHandles,
+    dispatchAnalyticsEvent = _ref8.dispatchAnalyticsEvent,
+    editorAppearance = _ref8.editorAppearance,
+    fullWidthMode = _ref8.fullWidthMode,
+    getPos = _ref8.getPos,
+    gridSize = _ref8.gridSize,
+    handleMediaSingleRef = _ref8.handleMediaSingleRef,
+    hasFallbackContainer = _ref8.hasFallbackContainer,
+    height = _ref8.height,
+    isInsideOfInlineExtension = _ref8.isInsideOfInlineExtension,
+    isLoading = _ref8.isLoading,
+    layout = _ref8.layout,
+    lineLength = _ref8.lineLength,
+    mediaSingleWidth = _ref8.mediaSingleWidth,
+    nodeType = _ref8.nodeType,
+    pctWidth = _ref8.pctWidth,
+    pluginInjectionApi = _ref8.pluginInjectionApi,
+    selected = _ref8.selected,
+    showLegacyNotification = _ref8.showLegacyNotification,
+    size = _ref8.size,
+    updateSize = _ref8.updateSize,
+    view = _ref8.view,
+    viewMediaClientConfig = _ref8.viewMediaClientConfig,
+    width = _ref8.width,
+    forceHandlePositioning = _ref8.forceHandlePositioning;
+  return jsx(ResizableMediaSingleNextFunctional, {
     allowBreakoutSnapPoints: allowBreakoutSnapPoints
     // eslint-disable-next-line react/no-children-prop
     ,