@atlaskit/editor-plugin-media 1.37.2 → 1.37.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-media
 
+## 1.37.4
+
+### Patch Changes
+
+- [#156360](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156360)
+  [`7125e8ac235ea`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7125e8ac235ea) -
+  [ED-25348] Refactor Media ResizeNext React Class component into Function Component
+- Updated dependencies
+
+## 1.37.3
+
+### Patch Changes
+
+- [#156556](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156556)
+  [`fa4db989cfa70`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fa4db989cfa70) -
+  [HOT-112603] Reduce memory leak footage by using WeakRef to store HTML element
+
 ## 1.37.2
 
 ### Patch Changes

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

@@ -740,7 +740,6 @@ var getMediaPluginState = exports.getMediaPluginState = function getMediaPluginS
 };
 var createPlugin = exports.createPlugin = function createPlugin(_schema, options, getIntl, pluginInjectionApi, dispatch, mediaOptions, newInsertionBehaviour) {
   var intl = getIntl();
-  var dropPlaceholder = createDropPlaceholder(intl, mediaOptions && mediaOptions.allowDropzoneDropLine);
   return new _safePlugin.SafePlugin({
     state: {
       init: function init(_config, state) {
@@ -882,8 +881,15 @@ var createPlugin = exports.createPlugin = function createPlugin(_schema, options
         if (pos === null || pos === undefined) {
           return _view2.DecorationSet.create(state.doc, mediaNodes);
         }
-        var dropPlaceholders = [_view2.Decoration.widget(pos, dropPlaceholder, {
-          key: 'drop-placeholder'
+        var dropPlaceholders = [_view2.Decoration.widget(pos, function () {
+          return createDropPlaceholder(intl, mediaOptions && mediaOptions.allowDropzoneDropLine);
+        }, {
+          key: 'drop-placeholder',
+          destroy: function destroy(elem) {
+            if (elem instanceof HTMLElement) {
+              _reactDom.default.unmountComponentAtNode(elem);
+            }
+          }
         })].concat(mediaNodes);
         return _view2.DecorationSet.create(state.doc, dropPlaceholders);
       },

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

@@ -1,11 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resizerNextTestId = exports.default = void 0;
+exports.resizerNextTestId = exports.default = exports.ResizableMediaSingleNextFunctional = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -15,7 +17,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
@@ -26,13 +28,17 @@ var _resizer = require("@atlaskit/editor-common/resizer");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _main = require("../../pm-plugins/main");
 var _analytics = require("../../utils/analytics");
 var _checkMediaType = require("../../utils/check-media-type");
 var _ResizableMediaMigrationNotification = require("./ResizableMediaMigrationNotification");
 var _styled = require("./styled");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
@@ -81,7 +87,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           return layout;
         }
       }
-      return _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode, _this.isNestedNode());
+      return _this.calcUnwrappedLayout(newWidth, containerWidth || 0, lineLength, fullWidthMode, _this.isNestedNode());
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth, fullWidthMode, isNestedNode) {
       if (isNestedNode) {
@@ -424,7 +430,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         fullWidthMode = _this$props7.fullWidthMode;
 
       // disable guidelines for nested media single node
-      return this.isNestedNode() ? [] : (0, _guideline.generateDefaultGuidelines)(lineLength, containerWidth, fullWidthMode);
+      return this.isNestedNode() ? [] : (0, _guideline.generateDefaultGuidelines)(lineLength, containerWidth || 0, fullWidthMode);
     }
   }, {
     key: "checkVideoFile",
@@ -545,4 +551,549 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }]);
   return ResizableMediaSingleNext;
 }(_react.default.Component);
-var _default = exports.default = ResizableMediaSingleNext;
+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;
+  return Math.min(contentWidth || _editorSharedStyles.akEditorDefaultLayoutWidth, isVideoFile ? _mediaSingle.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
+};
+var calcMaxWidth = function calcMaxWidth(_ref3) {
+  var containerWidth = _ref3.containerWidth,
+    editorAppearance = _ref3.editorAppearance;
+  return (0, _mediaSingle.calcMediaSingleMaxWidth)(containerWidth, editorAppearance);
+};
+var setIsResizingPluginState = function setIsResizingPluginState(_ref4) {
+  var isResizing = _ref4.isResizing,
+    nodePosition = _ref4.nodePosition,
+    initialWidth = _ref4.initialWidth;
+  return function (state, dispatch) {
+    var tr = state.tr;
+    tr.setMeta(_main.MEDIA_PLUGIN_IS_RESIZING_KEY, isResizing);
+    tr.setMeta('is-resizer-resizing', isResizing);
+    if (isResizing && typeof nodePosition === 'number') {
+      tr.setSelection(_state.NodeSelection.create(state.doc, nodePosition));
+    }
+    if (isResizing && typeof initialWidth === 'number') {
+      tr.setMeta(_main.MEDIA_PLUGIN_RESIZING_WIDTH_KEY, initialWidth);
+    }
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+var calcUnwrappedLayout = function calcUnwrappedLayout(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 - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2, _editorSharedStyles.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';
+};
+var calcNewLayout = function calcNewLayout(_ref5) {
+  var layout = _ref5.layout,
+    containerWidth = _ref5.containerWidth,
+    lineLength = _ref5.lineLength,
+    fullWidthMode = _ref5.fullWidthMode,
+    isNestedNode = _ref5.isNestedNode;
+  return function (newWidth, stop) {
+    var newPct = (0, _ui.calcPctFromPx)(newWidth, lineLength) * 100;
+    var wrappedLayout = _ui.wrappedLayouts.indexOf(layout) > -1;
+    if (newPct <= 100 && wrappedLayout) {
+      if (!stop || newPct !== 100) {
+        return layout;
+      }
+    }
+    return calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode, isNestedNode);
+  };
+};
+var calculateSizeState = function calculateSizeState(props) {
+  return function (size, delta) {
+    var onResizeStop = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var aspectRatio = arguments.length > 3 ? arguments[3] : undefined;
+    var calculatedWidth = Math.round(size.width + delta.width);
+    var calculatedWidthWithLayout = calcNewLayout(props)(calculatedWidth, onResizeStop);
+    return {
+      width: calculatedWidth,
+      height: calculatedWidth / aspectRatio,
+      layout: calculatedWidthWithLayout
+    };
+  };
+};
+var getAspectRatio = function getAspectRatio(_ref6) {
+  var width = _ref6.width,
+    height = _ref6.height;
+  if (width && height > 0) {
+    return width / height;
+  }
+
+  // TODO handle this case
+  return 1;
+};
+var updateSizeInPluginState = (0, _throttle.default)(function (_ref7) {
+  var width = _ref7.width,
+    view = _ref7.view;
+  var state = view.state,
+    dispatch = view.dispatch;
+  var tr = state.tr;
+  tr.setMeta(_main.MEDIA_PLUGIN_RESIZING_WIDTH_KEY, width);
+  return dispatch(tr);
+}, _mediaSingle.MEDIA_SINGLE_RESIZE_THROTTLE_TIME);
+var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctional = function ResizableMediaSingleNextFunctional(props) {
+  var origWidth = props.width,
+    children = props.children,
+    containerWidth = props.containerWidth,
+    fullWidthMode = props.fullWidthMode,
+    layout = props.layout,
+    selected = props.selected,
+    showLegacyNotification = props.showLegacyNotification,
+    className = props.className,
+    dispatchAnalyticsEvent = props.dispatchAnalyticsEvent,
+    editorAppearance = props.editorAppearance,
+    getPos = props.getPos,
+    lineLength = props.lineLength,
+    mediaSingleWidth = props.mediaSingleWidth,
+    height = props.height,
+    nodeType = props.nodeType,
+    pluginInjectionApi = props.pluginInjectionApi,
+    updateSize = props.updateSize,
+    view = props.view,
+    viewMediaClientConfig = props.viewMediaClientConfig;
+  var initialWidth = (0, _react.useMemo)(function () {
+    return mediaSingleWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
+  }, [mediaSingleWidth]);
+  var _useState = (0, _react.useState)({
+      width: initialWidth,
+      height: calcPxHeight({
+        newWidth: initialWidth,
+        previousWidth: initialWidth,
+        previousHeight: height
+      })
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    dimensions = _useState2[0],
+    setDimensions = _useState2[1];
+  var dimensionsRef = (0, _react.useRef)(dimensions);
+  var lastSnappedGuidelineKeysRef = (0, _react.useRef)([]);
+  var _useState3 = (0, _react.useState)({}),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    snaps = _useState4[0],
+    setSnaps = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isResizing = _useState6[0],
+    setIsResizing = _useState6[1];
+  var _useState7 = (0, _react.useState)(true),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    isVideoFile = _useState8[0],
+    setIsVideoFile = _useState8[1];
+  var nodePosition = (0, _react.useMemo)(function () {
+    if (typeof getPos !== 'function') {
+      return null;
+    }
+    var pos = getPos();
+    if (Number.isNaN(pos) || typeof pos !== 'number') {
+      return null;
+    }
+    return pos;
+  }, [getPos]);
+  var isNestedNode = (0, _react.useMemo)(function () {
+    if (nodePosition === null) {
+      return false;
+    }
+    var $pos = view.state.doc.resolve(nodePosition);
+    return !!($pos && $pos.depth !== 0);
+  }, [nodePosition, view]);
+  var maybeContainerWidth = containerWidth || origWidth;
+  var memoizedCss = (0, _react.useMemo)(function () {
+    return (0, _styled.wrapperStyle)({
+      layout: layout,
+      containerWidth: maybeContainerWidth,
+      fullWidthMode: fullWidthMode,
+      mediaSingleWidth: dimensions.width,
+      isNestedNode: isNestedNode,
+      isExtendedResizeExperienceOn: true
+    });
+  }, [layout, maybeContainerWidth, fullWidthMode, dimensions.width, isNestedNode]);
+  var maxWidth = (0, _react.useMemo)(function () {
+    if (!isResizing && isNestedNode) {
+      return undefined;
+    }
+    if (isNestedNode || fullWidthMode) {
+      return lineLength;
+    }
+    return calcMaxWidth({
+      containerWidth: containerWidth,
+      editorAppearance: editorAppearance
+    });
+  }, [isNestedNode, fullWidthMode, lineLength, editorAppearance, containerWidth, isResizing]);
+  var minWidth = calcMinWidth({
+    isVideoFile: isVideoFile,
+    contentWidth: 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%)");
+  var resizerNextClassName = (0, _react.useMemo)(function () {
+    // TODO: Clean up where this lives and how it gets generated
+    var classNameNext = (0, _classnames.default)(_styles.richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', className, {
+      'richMedia-selected': selected,
+      'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
+    });
+    return (0, _classnames.default)(classNameNext, _styles.resizerStyles);
+  }, [className, isResizing, layout, selected]);
+  var isInsideInlineLike = (0, _react.useMemo)(function () {
+    if (nodePosition === null) {
+      return false;
+    }
+    var $pos = view.state.doc.resolve(nodePosition);
+    var listItem = view.state.schema.nodes.listItem;
+    return !!(0, _utils2.findParentNodeOfTypeClosestToPos)($pos, [listItem]);
+  }, [nodePosition, view]);
+  var enable = (0, _react.useMemo)(function () {
+    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;
+      if (side === 'left' && isInsideInlineLike) {
+        acc[side] = false;
+      }
+      return acc;
+    }, {});
+  }, [layout, isInsideInlineLike]);
+  var defaultGuidelines = (0, _react.useMemo)(function () {
+    if (isNestedNode) {
+      return [];
+    }
+    return (0, _guideline.generateDefaultGuidelines)(lineLength, containerWidth, fullWidthMode);
+  }, [isNestedNode, lineLength, containerWidth, fullWidthMode]);
+  var relativeGuidesRef = (0, _react.useRef)({});
+  var guidelinesRef = (0, _react.useRef)([]);
+  var updateGuidelines = (0, _react.useCallback)(function () {
+    var _generateDynamicGuide2 = (0, _guideline.generateDynamicGuidelines)(view.state, lineLength, {
+        styles: {
+          lineStyle: 'dashed'
+        },
+        show: false
+      }),
+      relativeGuides = _generateDynamicGuide2.relativeGuides,
+      dynamicGuides = _generateDynamicGuide2.dynamicGuides;
+
+    // disable guidelines for nested media single node
+    var dynamicGuidelines = isNestedNode ? [] : dynamicGuides;
+    relativeGuidesRef.current = relativeGuides;
+    guidelinesRef.current = [].concat((0, _toConsumableArray2.default)(defaultGuidelines), (0, _toConsumableArray2.default)(dynamicGuidelines));
+  }, [view, lineLength, defaultGuidelines, isNestedNode]);
+  var isGuidelineEnabled = (0, _react.useMemo)(function () {
+    return !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.guideline);
+  }, [pluginInjectionApi]);
+  var handleResizeStart = (0, _react.useCallback)(function () {
+    setIsResizing(true);
+    setIsResizingPluginState({
+      isResizing: true,
+      nodePosition: nodePosition,
+      initialWidth: dimensionsRef.current.width
+    })(view.state, view.dispatch);
+    if (isGuidelineEnabled) {
+      updateGuidelines();
+    }
+  }, [view, nodePosition, updateGuidelines, isGuidelineEnabled]);
+  var getRelativeGuides = (0, _react.useCallback)(function () {
+    var _pluginInjectionApi$g;
+    if (typeof nodePosition !== 'number') {
+      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) || {
+        top: 0,
+        left: 0
+      },
+      topOffset = _ref8.top;
+    var $pos = view.state.doc.resolve(nodePosition);
+    var relativeGuides = $pos && $pos.nodeAfter && dimensionsRef.current.width ? (0, _guideline.getRelativeGuidelines)(relativeGuidesRef.current, {
+      node: $pos.nodeAfter,
+      pos: $pos.pos
+    }, view, lineLength, topOffset, dimensionsRef.current) : [];
+    return relativeGuides;
+  }, [pluginInjectionApi, nodePosition, view, lineLength]);
+  var updateActiveGuidelines = (0, _react.useCallback)(function () {
+    var _pluginInjectionApi$g2;
+    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) {
+      return;
+    }
+    var _findClosestSnap2 = (0, _guideline.findClosestSnap)(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, _mediaSingle.MEDIA_SINGLE_SNAP_GAP),
+      gap = _findClosestSnap2.gap,
+      activeGuidelineKeys = _findClosestSnap2.keys;
+    var relativeGuidelines = activeGuidelineKeys.length ? [] : getRelativeGuides();
+    lastSnappedGuidelineKeysRef.current = activeGuidelineKeys.length ? activeGuidelineKeys : relativeGuidelines.map(function (rg) {
+      return rg.key;
+    });
+    var nextGuideLines = [].concat((0, _toConsumableArray2.default)((0, _guideline.getGuidelinesWithHighlights)(gap, _mediaSingle.MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines)), (0, _toConsumableArray2.default)(relativeGuidelines));
+    pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$g2 = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g2 === void 0 || (_pluginInjectionApi$g2 = _pluginInjectionApi$g2.actions) === null || _pluginInjectionApi$g2 === void 0 || _pluginInjectionApi$g2.displayGuideline(view)({
+      guidelines: nextGuideLines
+    });
+  }, [getRelativeGuides, pluginInjectionApi, view]);
+  var aspectRatioRef = (0, _react.useRef)(getAspectRatio({
+    width: props.width,
+    height: props.height
+  }));
+  var handleResize = (0, _react.useCallback)(function (size, delta) {
+    var _calculateSizeState = calculateSizeState({
+        layout: layout,
+        containerWidth: containerWidth,
+        lineLength: lineLength,
+        fullWidthMode: fullWidthMode,
+        isNestedNode: isNestedNode
+      })(size, delta, false, aspectRatioRef.current),
+      width = _calculateSizeState.width,
+      height = _calculateSizeState.height,
+      newLayout = _calculateSizeState.layout;
+    if (isGuidelineEnabled) {
+      var guidelineSnaps = (0, _guideline.getGuidelineSnaps)(guidelinesRef.current, lineLength, layout);
+      updateActiveGuidelines(width, guidelinesRef.current, guidelineSnaps);
+      var relativeSnaps = (0, _guideline.getRelativeGuideSnaps)(relativeGuidesRef.current, aspectRatioRef.current);
+      setSnaps({
+        x: [].concat((0, _toConsumableArray2.default)(guidelineSnaps.snaps.x || []), (0, _toConsumableArray2.default)(relativeSnaps))
+      });
+    }
+    setDimensions({
+      width: width,
+      height: height
+    });
+    updateSizeInPluginState({
+      width: width,
+      view: view
+    });
+    if (newLayout !== layout) {
+      updateSize(width, newLayout);
+    }
+  }, [view, updateSize, layout, isGuidelineEnabled, containerWidth, lineLength, fullWidthMode, isNestedNode, updateActiveGuidelines]);
+  var handleResizeStop = (0, _react.useCallback)(function (size, delta) {
+    var _pluginInjectionApi$g3;
+    if (typeof nodePosition !== 'number') {
+      return;
+    }
+    var _calculateSizeState2 = calculateSizeState({
+        layout: layout,
+        containerWidth: containerWidth,
+        lineLength: lineLength,
+        fullWidthMode: fullWidthMode,
+        isNestedNode: isNestedNode
+      })(size, delta, false, aspectRatioRef.current),
+      width = _calculateSizeState2.width,
+      height = _calculateSizeState2.height,
+      newLayout = _calculateSizeState2.layout;
+    if (dispatchAnalyticsEvent) {
+      var $pos = view.state.doc.resolve(nodePosition);
+      var event = (0, _analytics.getMediaResizeAnalyticsEvent)(nodeType || 'mediaSingle', {
+        width: width,
+        layout: newLayout,
+        widthType: 'pixel',
+        snapType: (0, _guideline.getGuidelineTypeFromKey)(lastSnappedGuidelineKeysRef.current, guidelinesRef.current),
+        parentNode: $pos ? $pos.parent.type.name : undefined,
+        inputMethod: 'mouse'
+      });
+      if (event) {
+        dispatchAnalyticsEvent(event);
+      }
+    }
+    setIsResizing(false);
+    setIsResizingPluginState({
+      isResizing: false
+    })(view.state, view.dispatch);
+    pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$g3 = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g3 === void 0 || (_pluginInjectionApi$g3 = _pluginInjectionApi$g3.actions) === null || _pluginInjectionApi$g3 === void 0 || _pluginInjectionApi$g3.displayGuideline(view)({
+      guidelines: []
+    });
+    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 = _editorSharedStyles.akEditorFullWidthLayoutWidth;
+    }
+    setDimensions({
+      width: newWidth,
+      height: height
+    });
+    updateSize(newWidth, newLayout);
+  }, [nodeType, dispatchAnalyticsEvent, containerWidth, fullWidthMode, isNestedNode, layout, lineLength, view, nodePosition, pluginInjectionApi, updateSize]);
+  var mountedRef = _react.default.useRef(true);
+  (0, _react.useLayoutEffect)(function () {
+    mountedRef.current = true;
+    return function () {
+      mountedRef.current = false;
+    };
+  }, []);
+  (0, _react.useLayoutEffect)(function () {
+    setDimensions({
+      width: initialWidth,
+      height: calcPxHeight({
+        newWidth: initialWidth,
+        previousWidth: initialWidth,
+        previousHeight: height
+      })
+    });
+  }, [initialWidth, height]);
+  (0, _react.useEffect)(function () {
+    dimensionsRef.current = dimensions;
+  }, [dimensions]);
+  (0, _react.useEffect)(function () {
+    if (!viewMediaClientConfig || typeof nodePosition !== 'number') {
+      return;
+    }
+    var mediaNode = view.state.doc.nodeAt(nodePosition + 1);
+    if (!mediaNode) {
+      return;
+    }
+    (0, _checkMediaType.checkMediaType)(mediaNode, viewMediaClientConfig).then(function (mediaType) {
+      if (mountedRef.current) {
+        var _isVideoFile = mediaType !== 'external' && mediaType !== 'image';
+        setIsVideoFile(_isVideoFile);
+      }
+    });
+  }, [view, viewMediaClientConfig, nodePosition]);
+  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
+  }, (0, _react2.jsx)(_resizer.ResizerNext, {
+    minWidth: minViewWidth,
+    maxWidth: maxWidth
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: resizerNextClassName,
+    snapGap: _mediaSingle.MEDIA_SINGLE_SNAP_GAP,
+    enable: enable,
+    width: dimensions.width,
+    handleResizeStart: handleResizeStart,
+    handleResize: handleResize,
+    handleResizeStop: handleResizeStop,
+    snap: snaps,
+    resizeRatio: _utils.nonWrappedLayouts.includes(layout) ? 2 : 1,
+    "data-testid": resizerNextTestId,
+    isHandleVisible: selected,
+    handlePositioning: isNestedNode ? 'adjacent' : undefined,
+    handleHighlight: "full-height"
+  }, children, showLegacyNotification && (0, _react2.jsx)(_ResizableMediaMigrationNotification.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;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single')) {
+    return (0, _react2.jsx)(ResizableMediaSingleNextFunctional, {
+      allowBreakoutSnapPoints: allowBreakoutSnapPoints,
+      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
+    });
+  }
+  return (0, _react2.jsx)(ResizableMediaSingleNext, {
+    allowBreakoutSnapPoints: allowBreakoutSnapPoints,
+    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
+  });
+};
+var _default = exports.default = ResizableMediaSingleToggle;

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

@@ -625,7 +625,6 @@ export class MediaPluginStateImplementation {
 export const getMediaPluginState = state => stateKey.getState(state);
 export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, dispatch, mediaOptions, newInsertionBehaviour) => {
   const intl = getIntl();
-  const dropPlaceholder = createDropPlaceholder(intl, mediaOptions && mediaOptions.allowDropzoneDropLine);
   return new SafePlugin({
     state: {
       init(_config, state) {
@@ -764,8 +763,15 @@ export const createPlugin = (_schema, options, getIntl, pluginInjectionApi, disp
         if (pos === null || pos === undefined) {
           return DecorationSet.create(state.doc, mediaNodes);
         }
-        const dropPlaceholders = [Decoration.widget(pos, dropPlaceholder, {
-          key: 'drop-placeholder'
+        const dropPlaceholders = [Decoration.widget(pos, () => {
+          return createDropPlaceholder(intl, mediaOptions && mediaOptions.allowDropzoneDropLine);
+        }, {
+          key: 'drop-placeholder',
+          destroy: elem => {
+            if (elem instanceof HTMLElement) {
+              ReactDOM.unmountComponentAtNode(elem);
+            }
+          }
         }), ...mediaNodes];
         return DecorationSet.create(state.doc, dropPlaceholders);
       },