@atlaskit/editor-plugin-media 1.35.0 → 1.36.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-media
 
+## 1.36.0
+
+### Minor Changes
+
+- [#151938](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/151938)
+  [`91b5768ef0c7c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/91b5768ef0c7c) -
+  [ux] ED-25203 refactor image previewer outside of floating toolbar
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.35.1
+
+### Patch Changes
+
+- [#151581](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/151581)
+  [`9932832b9aab3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9932832b9aab3) -
+  [ED-24127] Refactor MediaSingle legacy component
+- Updated dependencies
+
 ## 1.35.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/mediaNodeUpdater.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MediaNodeUpdater = void 0;
+exports.createMediaNodeUpdater = exports.MediaNodeUpdater = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -777,4 +777,10 @@ var MediaNodeUpdater = exports.MediaNodeUpdater = /*#__PURE__*/function () {
 }();
 var hasPrivateAttrsChanged = function hasPrivateAttrsChanged(currentAttrs, newAttrs) {
   return currentAttrs.__fileName !== newAttrs.__fileName || currentAttrs.__fileMimeType !== newAttrs.__fileMimeType || currentAttrs.__fileSize !== newAttrs.__fileSize || currentAttrs.__contextId !== newAttrs.__contextId;
+};
+var createMediaNodeUpdater = exports.createMediaNodeUpdater = function createMediaNodeUpdater(props) {
+  var updaterProps = _objectSpread(_objectSpread({}, props), {}, {
+    isMediaSingle: true
+  });
+  return new MediaNodeUpdater(updaterProps);
 };

package/dist/cjs/nodeviews/mediaSingle.js

@@ -40,6 +40,7 @@ var _ResizableMediaSingleNext = _interopRequireDefault(require("../ui/ResizableM
 var _mediaCommon = require("../utils/media-common");
 var _helpers = require("./helpers");
 var _mediaNodeUpdater = require("./mediaNodeUpdater");
+var _mediaSingleNext = require("./mediaSingleNext");
 var _styles = require("./styles");
 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; }
@@ -54,6 +55,9 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var figureWrapperStyles = (0, _react2.css)({
   margin: 0
 });
+/*
+ * @deprecated Please use the MediaSingleNodeNext
+ */
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(MediaSingleNode, _Component);
@@ -559,6 +563,29 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref7) {
   var mediaProvider = (0, _react.useMemo)(function () {
     return mediaState !== null && mediaState !== void 0 && mediaState.mediaProvider ? Promise.resolve(mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider) : undefined;
   }, [mediaState === null || mediaState === void 0 ? void 0 : mediaState.mediaProvider]);
+  if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2__media_single')) {
+    return (0, _react2.jsx)(_mediaSingleNext.MediaSingleNodeNext, {
+      width: (widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0,
+      lineLength: (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || 0,
+      node: node,
+      getPos: getPos,
+      mediaProvider: mediaProvider,
+      contextIdentifierProvider: contextIdentifierProvider,
+      mediaOptions: mediaOptions,
+      view: view,
+      fullWidthMode: fullWidthMode,
+      selected: selected,
+      eventDispatcher: eventDispatcher,
+      mediaPluginState: mediaState !== null && mediaState !== void 0 ? mediaState : undefined,
+      annotationPluginState: annotationState !== null && annotationState !== void 0 ? annotationState : undefined,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      forwardRef: forwardRef,
+      pluginInjectionApi: pluginInjectionApi,
+      editorDisabled: editorDisabledState === null || editorDisabledState === void 0 ? void 0 : editorDisabledState.editorDisabled,
+      editorViewMode: (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view',
+      editorAppearance: editorAppearance
+    });
+  }
   return (0, _react2.jsx)(MediaSingleNode, {
     width: widthState.width,
     lineLength: widthState.lineLength,

package/dist/cjs/nodeviews/mediaSingleNext.js

@@ -0,0 +1,583 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaSingleNodeNext = 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
+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 _mediaClient = require("@atlaskit/media-client");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _captions = require("../commands/captions");
+var _CaptionPlaceholder = require("../ui/CaptionPlaceholder");
+var _CommentBadge = require("../ui/CommentBadge");
+var _ResizableMediaSingle = _interopRequireDefault(require("../ui/ResizableMediaSingle"));
+var _ResizableMediaSingleNext = _interopRequireDefault(require("../ui/ResizableMediaSingle/ResizableMediaSingleNext"));
+var _mediaCommon = require("../utils/media-common");
+var _helpers = require("./helpers");
+var _mediaNodeUpdater = require("./mediaNodeUpdater");
+var _styles = require("./styles");
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var figureWrapperStyles = (0, _react2.css)({
+  margin: 0
+});
+var useMediaNodeUpdater = function useMediaNodeUpdater(_ref) {
+  var mediaProvider = _ref.mediaProvider,
+    mediaNode = _ref.mediaNode,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    mediaSingleNodeProps = _ref.mediaSingleNodeProps;
+  var previousMediaProvider = (0, _hooks.usePreviousState)(mediaProvider);
+  var previousMediaNode = (0, _hooks.usePreviousState)(mediaNode);
+  var mediaNodeUpdaterRef = _react.default.useRef(null);
+  var createOrUpdateMediaNodeUpdater = _react.default.useCallback(function (props) {
+    var mediaChildNode = mediaNode.firstChild;
+    var updaterProps = _objectSpread(_objectSpread({}, props), {}, {
+      isMediaSingle: true,
+      node: mediaChildNode ? mediaChildNode : mediaNode,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent
+    });
+    if (!mediaNodeUpdaterRef.current) {
+      mediaNodeUpdaterRef.current = (0, _mediaNodeUpdater.createMediaNodeUpdater)(updaterProps);
+    } else {
+      mediaNodeUpdaterRef.current.setProps(updaterProps);
+    }
+  }, [mediaNode, dispatchAnalyticsEvent]);
+  _react.default.useEffect(function () {
+    // Forced updates not required on mobile
+    if (mediaSingleNodeProps.isCopyPasteEnabled === false) {
+      return;
+    }
+    if (!mediaNodeUpdaterRef.current || previousMediaProvider !== mediaProvider) {
+      var _mediaNodeUpdaterRef$;
+      createOrUpdateMediaNodeUpdater(mediaSingleNodeProps);
+      (_mediaNodeUpdaterRef$ = mediaNodeUpdaterRef.current) === null || _mediaNodeUpdaterRef$ === void 0 || _mediaNodeUpdaterRef$.updateMediaSingleFileAttrs();
+    } else if (mediaNode.firstChild && previousMediaNode !== null && previousMediaNode !== void 0 && previousMediaNode.firstChild && mediaNode.firstChild !== (previousMediaNode === null || previousMediaNode === void 0 ? void 0 : previousMediaNode.firstChild)) {
+      var attrsChanged = (0, _helpers.hasPrivateAttrsChanged)(previousMediaNode.firstChild.attrs, mediaNode.firstChild.attrs);
+      if (attrsChanged) {
+        var _mediaNodeUpdaterRef$2;
+        createOrUpdateMediaNodeUpdater(mediaSingleNodeProps);
+        // We need to call this method on any prop change since attrs can get removed with collab editing
+        (_mediaNodeUpdaterRef$2 = mediaNodeUpdaterRef.current) === null || _mediaNodeUpdaterRef$2 === void 0 || _mediaNodeUpdaterRef$2.updateMediaSingleFileAttrs();
+      }
+    }
+  }, [createOrUpdateMediaNodeUpdater, mediaNode, mediaProvider, mediaSingleNodeProps, previousMediaNode, previousMediaProvider]);
+  return mediaNodeUpdaterRef.current;
+};
+var mediaAsyncOperations = /*#__PURE__*/function () {
+  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(props) {
+    var updatedDimensions, currentAttrs, updatingNode, contextId, hasDifferentContextId, copyNode;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return props.updater.getRemoteDimensions();
+        case 2:
+          updatedDimensions = _context.sent;
+          currentAttrs = props.mediaChildNode.attrs;
+          if (updatedDimensions && ((currentAttrs === null || currentAttrs === void 0 ? void 0 : currentAttrs.width) !== updatedDimensions.width || (currentAttrs === null || currentAttrs === void 0 ? void 0 : currentAttrs.height) !== updatedDimensions.height)) {
+            props.updater.updateDimensions(updatedDimensions);
+          }
+          if (!(props.mediaChildNode.attrs.type === 'external' && props.mediaChildNode.attrs.__external)) {
+            _context.next = 11;
+            break;
+          }
+          updatingNode = props.updater.handleExternalMedia(props.getPos);
+          props.addPendingTask(updatingNode);
+          _context.next = 10;
+          return updatingNode;
+        case 10:
+          return _context.abrupt("return");
+        case 11:
+          contextId = props.updater.getNodeContextId();
+          if (contextId) {
+            _context.next = 15;
+            break;
+          }
+          _context.next = 15;
+          return props.updater.updateContextId();
+        case 15:
+          _context.next = 17;
+          return props.updater.hasDifferentContextId();
+        case 17:
+          hasDifferentContextId = _context.sent;
+          if (!hasDifferentContextId) {
+            _context.next = 28;
+            break;
+          }
+          _context.prev = 19;
+          copyNode = props.updater.copyNode({
+            traceId: props.mediaNode.attrs.__mediaTraceId
+          });
+          props.addPendingTask(copyNode);
+          _context.next = 24;
+          return copyNode;
+        case 24:
+          _context.next = 28;
+          break;
+        case 26:
+          _context.prev = 26;
+          _context.t0 = _context["catch"](19);
+        case 28:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[19, 26]]);
+  }));
+  return function mediaAsyncOperations(_x) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+var useMediaAsyncOperations = function useMediaAsyncOperations(_ref3) {
+  var mediaNode = _ref3.mediaNode,
+    mediaNodeUpdater = _ref3.mediaNodeUpdater,
+    addPendingTask = _ref3.addPendingTask,
+    getPos = _ref3.getPos;
+  _react.default.useEffect(function () {
+    if (!mediaNodeUpdater) {
+      return;
+    }
+    // we want the first child of MediaSingle (type "media")
+    var childNode = mediaNode.firstChild;
+    if (!childNode) {
+      return;
+    }
+    mediaAsyncOperations({
+      mediaChildNode: childNode,
+      updater: mediaNodeUpdater,
+      getPos: getPos,
+      mediaNode: mediaNode,
+      addPendingTask: addPendingTask
+    });
+  }, [mediaNode, addPendingTask, mediaNodeUpdater, getPos]);
+};
+var noop = function noop() {};
+
+/**
+ * Keep returning the same ProseMirror Node, unless the node content changed.
+ *
+ * React uses shallow comparation with `Object.is`,
+ * but that can cause multiple re-renders when the same node is given in a different instance.
+ *
+ * To avoid unnecessary re-renders, this hook uses the `Node.eq` from ProseMirror API to compare
+ * previous and new values.
+ */
+var useLatestMediaNode = function useLatestMediaNode(nextMediaNode) {
+  var previousMediaNode = (0, _hooks.usePreviousState)(nextMediaNode);
+  var _React$useState = _react.default.useState(nextMediaNode),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    mediaNode = _React$useState2[0],
+    setMediaNode = _React$useState2[1];
+  _react.default.useEffect(function () {
+    if (!previousMediaNode) {
+      return;
+    }
+    if (!previousMediaNode.eq(nextMediaNode)) {
+      setMediaNode(nextMediaNode);
+    }
+  }, [previousMediaNode, nextMediaNode]);
+  return mediaNode;
+};
+var useMediaDimensionsLogic = function useMediaDimensionsLogic(_ref4) {
+  var childMediaNodeAttrs = _ref4.childMediaNodeAttrs;
+  var originalWidth = childMediaNodeAttrs.width,
+    originalHeight = childMediaNodeAttrs.height;
+  var isExternalMedia = childMediaNodeAttrs.type === 'external';
+  var hasMediaUrlBlob = isExternalMedia && typeof childMediaNodeAttrs.url === 'string' && (0, _mediaCommon.isMediaBlobUrlFromAttrs)(childMediaNodeAttrs);
+  var urlBlobAttrs = _react.default.useMemo(function () {
+    if (!hasMediaUrlBlob) {
+      return null;
+    }
+    return (0, _mediaClient.getAttrsFromUrl)(childMediaNodeAttrs.url);
+  }, [hasMediaUrlBlob, childMediaNodeAttrs]);
+  var _React$useMemo = _react.default.useMemo(function () {
+      // original width and height of child media node (scaled)
+      var width = originalWidth;
+      var height = originalHeight;
+      if (isExternalMedia) {
+        if (urlBlobAttrs) {
+          if (urlBlobAttrs) {
+            var urlWidth = urlBlobAttrs.width,
+              urlHeight = urlBlobAttrs.height;
+            width = width || urlWidth;
+            height = height || urlHeight;
+          }
+        }
+        if (width === null) {
+          width = _mediaSingle.DEFAULT_IMAGE_WIDTH;
+        }
+        if (height === null) {
+          height = _mediaSingle.DEFAULT_IMAGE_HEIGHT;
+        }
+      }
+      if (!width || !height) {
+        width = _mediaSingle.DEFAULT_IMAGE_WIDTH;
+        height = _mediaSingle.DEFAULT_IMAGE_HEIGHT;
+      }
+      return {
+        width: width,
+        height: height
+      };
+    }, [originalWidth, originalHeight, isExternalMedia, urlBlobAttrs]),
+    width = _React$useMemo.width,
+    height = _React$useMemo.height;
+  return {
+    width: width,
+    height: height
+  };
+};
+var useUpdateSizeCallback = function useUpdateSizeCallback(_ref5) {
+  var mediaNode = _ref5.mediaNode,
+    view = _ref5.view,
+    getPos = _ref5.getPos;
+  var updateSize = _react.default.useCallback(function (width, layout) {
+    var state = view.state,
+      dispatch = view.dispatch;
+    var pos = getPos();
+    if (typeof pos === 'undefined') {
+      return;
+    }
+    var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, mediaNode.attrs), {}, {
+      layout: layout,
+      width: width,
+      widthType: 'pixel'
+    }));
+    tr.setMeta('scrollIntoView', false);
+    /**
+     * Any changes to attributes of a node count the node as "recreated" in Prosemirror[1]
+     * This makes it so Prosemirror resets the selection to the child i.e. "media" instead of "media-single"
+     * The recommended fix is to reset the selection.[2]
+     *
+     * [1] https://discuss.prosemirror.net/t/setnodemarkup-loses-current-nodeselection/976
+     * [2] https://discuss.prosemirror.net/t/setnodemarkup-and-deselect/3673
+     */
+    tr.setSelection(_state.NodeSelection.create(tr.doc, pos));
+    return dispatch(tr);
+  }, [view, getPos, mediaNode]);
+  return updateSize;
+};
+
+/**
+ * This value is used to fallback when widthState is undefined.
+ *
+ * Previously, the old MediaSingle was ignoring the undefined situation:
+ *
+ * <MediaSingleNode
+ *	  width={widthState!.width}
+ *	  lineLength={widthState!.lineLength}
+ */
+var FALLBACK_MOST_COMMON_WIDTH = 760;
+var MediaSingleNodeNext = exports.MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNextProps) {
+  var _mediaOptions$getEdit, _pluginInjectionApi$m, _mediaNode$firstChild2;
+  var selected = mediaSingleNodeNextProps.selected,
+    getPos = mediaSingleNodeNextProps.getPos,
+    nextMediaNode = mediaSingleNodeNextProps.node,
+    mediaOptions = mediaSingleNodeNextProps.mediaOptions,
+    fullWidthMode = mediaSingleNodeNextProps.fullWidthMode,
+    view = mediaSingleNodeNextProps.view,
+    pluginInjectionApi = mediaSingleNodeNextProps.pluginInjectionApi,
+    containerWidth = mediaSingleNodeNextProps.width,
+    lineLength = mediaSingleNodeNextProps.lineLength,
+    dispatchAnalyticsEvent = mediaSingleNodeNextProps.dispatchAnalyticsEvent,
+    editorViewMode = mediaSingleNodeNextProps.editorViewMode,
+    editorDisabled = mediaSingleNodeNextProps.editorDisabled,
+    annotationPluginState = mediaSingleNodeNextProps.annotationPluginState,
+    editorAppearance = mediaSingleNodeNextProps.editorAppearance,
+    mediaProviderPromise = mediaSingleNodeNextProps.mediaProvider,
+    forwardRef = mediaSingleNodeNextProps.forwardRef,
+    contextIdentifierProviderPromise = mediaSingleNodeNextProps.contextIdentifierProvider,
+    mediaPluginState = mediaSingleNodeNextProps.mediaPluginState;
+  var _ref6 = (mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {},
+    _ref6$commentsOnMedia = _ref6.commentsOnMedia,
+    commentsOnMedia = _ref6$commentsOnMedia === void 0 ? false : _ref6$commentsOnMedia;
+  var _React$useState3 = _react.default.useState(null),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    mediaProvider = _React$useState4[0],
+    setMediaProvider = _React$useState4[1];
+  var _React$useState5 = _react.default.useState(null),
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    _contextIdentifierProvider = _React$useState6[0],
+    setContextIdentifierProvider = _React$useState6[1];
+  var _React$useState7 = _react.default.useState(),
+    _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+    viewMediaClientConfig = _React$useState8[0],
+    setViewMediaClientConfig = _React$useState8[1];
+  var mountedRef = _react.default.useRef(true);
+  var pos = getPos();
+  var isSelected = selected();
+  var contentWidthForLegacyExperience = (0, _mediaSingle.getMaxWidthForNestedNode)(view, getPos()) || lineLength;
+  var mediaNode = useLatestMediaNode(nextMediaNode);
+  var mediaNodeUpdater = useMediaNodeUpdater({
+    mediaNode: mediaNode,
+    mediaSingleNodeProps: mediaSingleNodeNextProps,
+    mediaProvider: mediaProvider,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  });
+  useMediaAsyncOperations({
+    mediaNodeUpdater: mediaNodeUpdater,
+    getPos: getPos,
+    mediaNode: mediaNode,
+    addPendingTask: (mediaPluginState === null || mediaPluginState === void 0 ? void 0 : mediaPluginState.addPendingTask) || noop
+  });
+  _react.default.useLayoutEffect(function () {
+    mountedRef.current = true;
+    return function () {
+      mountedRef.current = false;
+    };
+  }, []);
+  _react.default.useLayoutEffect(function () {
+    if (!mediaProviderPromise) {
+      return;
+    }
+    mediaProviderPromise.then(function (resolvedProvider) {
+      var viewMediaClientConfig = resolvedProvider.viewMediaClientConfig;
+      if (mountedRef.current) {
+        setViewMediaClientConfig(viewMediaClientConfig);
+        setMediaProvider(resolvedProvider);
+      }
+    });
+  }, [mediaProviderPromise]);
+  _react.default.useEffect(function () {
+    if (!contextIdentifierProviderPromise) {
+      return;
+    }
+    contextIdentifierProviderPromise.then(function (provider) {
+      if (mountedRef.current) {
+        setContextIdentifierProvider(provider);
+      }
+    });
+  }, [contextIdentifierProviderPromise]);
+  _react.default.useEffect(function () {
+    var _mediaNode$firstChild;
+    // No-op but logging an exposure when an external image is rendered
+    // Remove this block when cleaning up platform_editor_add_media_from_url
+    if (((_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.type) === 'external') {
+      if ((0, _experiments.editorExperiment)('add-media-from-url', true)) {
+        (0, _experiments.editorExperiment)('add-media-from-url', true, {
+          exposure: true
+        });
+      } else {
+        (0, _experiments.editorExperiment)('add-media-from-url', false, {
+          exposure: true
+        });
+      }
+    }
+  }, [mediaNode]);
+  var _ref7 = mediaNode.attrs,
+    layout = _ref7.layout,
+    widthType = _ref7.widthType,
+    mediaSingleWidthAttribute = _ref7.width;
+  var childNode = mediaNode.firstChild;
+  var childMediaNodeAttrs = _react.default.useMemo(function () {
+    return (childNode === null || childNode === void 0 ? void 0 : childNode.attrs) || {};
+  }, [childNode]);
+  var _useMediaDimensionsLo = useMediaDimensionsLogic({
+      childMediaNodeAttrs: childMediaNodeAttrs
+    }),
+    width = _useMediaDimensionsLo.width,
+    height = _useMediaDimensionsLo.height;
+  var updateSize = useUpdateSizeCallback({
+    view: view,
+    getPos: getPos,
+    mediaNode: mediaNode
+  });
+  var canResize = _react.default.useMemo(function () {
+    if (typeof pos !== 'number') {
+      return false;
+    }
+    var result = Boolean(!!mediaOptions.allowResizing && !editorDisabled && !editorViewMode);
+    if (mediaOptions.allowResizingInTables) {
+      return result;
+    }
+
+    // If resizing not allowed in tables, check parents for tables
+    var $pos = view.state.doc.resolve(pos);
+    var table = view.state.schema.nodes.table;
+    var disabledNode = !!(0, _utils2.findParentNodeOfTypeClosestToPos)($pos, [table]);
+    return Boolean(result && !disabledNode);
+  }, [mediaOptions, pos, view, editorDisabled, editorViewMode]);
+  var badgeOffsetRight = _react.default.useMemo(function () {
+    if (typeof pos !== 'number') {
+      return undefined;
+    }
+    var $pos = view.state.doc.resolve(pos);
+    var table = view.state.schema.nodes.table;
+    var foundTableNode = (0, _utils2.findParentNodeOfTypeClosestToPos)($pos, [table]);
+    return foundTableNode ? '2px' : '14px';
+  }, [pos, view]);
+  var shouldShowPlaceholder = _react.default.useMemo(function () {
+    var result = mediaOptions.allowCaptions && mediaNode.childCount !== 2 && isSelected && view.state.selection instanceof _state.NodeSelection;
+    return !editorDisabled && result;
+  }, [editorDisabled, mediaOptions.allowCaptions, mediaNode, view, isSelected]);
+  var isInsideTable = _react.default.useMemo(function () {
+    if (typeof pos !== 'number') {
+      return false;
+    }
+    return (0, _utils2.findParentNodeOfTypeClosestToPos)(view.state.doc.resolve(pos), [view.state.schema.nodes.table]);
+  }, [pos, view]);
+  var currentMediaElement = _react.default.useCallback(function () {
+    if (typeof pos !== 'number') {
+      return null;
+    }
+    var mediaNode = view.domAtPos(pos + 1).node;
+    return mediaNode instanceof HTMLElement ? mediaNode : null;
+  }, [view, pos]);
+  var mediaSingleWidth = _react.default.useMemo(function () {
+    return (0, _mediaSingle.calcMediaSinglePixelWidth)({
+      width: mediaSingleWidthAttribute,
+      widthType: widthType,
+      origWidth: width,
+      layout: layout,
+      // This will only be used when calculating legacy media single width
+      // thus we use the legacy value (exclude table as container node)
+      contentWidth: contentWidthForLegacyExperience,
+      containerWidth: containerWidth,
+      gutterOffset: _mediaSingle.MEDIA_SINGLE_GUTTER_SIZE
+    });
+  }, [mediaSingleWidthAttribute, widthType, width, layout, contentWidthForLegacyExperience, containerWidth]);
+  var currentMaxWidth = isSelected ? pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.media) === null || _pluginInjectionApi$m === void 0 || (_pluginInjectionApi$m = _pluginInjectionApi$m.sharedState.currentState()) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.currentMaxWidth : undefined;
+  var contentWidth = currentMaxWidth || lineLength;
+  var isCurrentNodeDrafting = Boolean((annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (mediaNode === null || mediaNode === void 0 || (_mediaNode$firstChild2 = mediaNode.firstChild) === null || _mediaNode$firstChild2 === void 0 ? void 0 : _mediaNode$firstChild2.attrs.id));
+  var shouldShowExternalMediaBadge = childMediaNodeAttrs.type === 'external';
+  var mediaSingleWrapperRef = /*#__PURE__*/_react.default.createRef();
+  var captionPlaceHolderRef = /*#__PURE__*/_react.default.createRef();
+  var onMediaSingleClicked = _react.default.useCallback(function (event) {
+    var _captionPlaceHolderRe;
+    // Workaround for iOS 16 Caption selection issue
+    // @see https://product-fabric.atlassian.net/browse/MEX-2012
+    if (!_utils.browser.ios) {
+      return;
+    }
+    if (mediaSingleWrapperRef.current !== event.target) {
+      return;
+    }
+    (_captionPlaceHolderRe = captionPlaceHolderRef.current) === null || _captionPlaceHolderRe === void 0 || _captionPlaceHolderRe.click();
+  }, [mediaSingleWrapperRef, captionPlaceHolderRef]);
+  var clickPlaceholder = _react.default.useCallback(function () {
+    var _pluginInjectionApi$a;
+    if (typeof getPos === 'boolean') {
+      return;
+    }
+    (0, _captions.insertAndSelectCaptionFromMediaSinglePos)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(getPos(), mediaNode)(view.state, view.dispatch);
+  }, [view, getPos, mediaNode, pluginInjectionApi]);
+  var legacySize = _react.default.useMemo(function () {
+    return {
+      width: mediaSingleWidthAttribute,
+      widthType: widthType
+    };
+  }, [widthType, mediaSingleWidthAttribute]);
+  var MediaChildren = (0, _react2.jsx)("figure", {
+    ref: mediaSingleWrapperRef,
+    css: figureWrapperStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: _styles.MediaSingleNodeSelector,
+    onClick: onMediaSingleClicked
+  }, (0, _experiments.editorExperiment)('add-media-from-url', true) && (0, _react2.jsx)(_mediaSingle.MediaBadges, {
+    mediaElement: currentMediaElement(),
+    mediaHeight: height,
+    mediaWidth: width,
+    extendedResizeOffset: (0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience') && !isInsideTable
+  }, function (_ref8) {
+    var badgeSize = _ref8.badgeSize;
+    return (0, _react2.jsx)(_react.default.Fragment, null, shouldShowExternalMediaBadge && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
+      badgeSize: badgeSize
+    }), commentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadgeNextWrapper, {
+      view: view,
+      api: pluginInjectionApi,
+      mediaNode: mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.firstChild,
+      getPos: getPos,
+      isDrafting: isCurrentNodeDrafting,
+      badgeSize: badgeSize
+    }));
+  }), !(0, _experiments.editorExperiment)('add-media-from-url', true) && commentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadge, {
+    view: view,
+    api: pluginInjectionApi,
+    mediaNode: mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.firstChild,
+    badgeOffsetRight: badgeOffsetRight,
+    getPos: getPos,
+    isDrafting: isCurrentNodeDrafting
+  }), (0, _react2.jsx)("div", {
+    ref: forwardRef
+  }), shouldShowPlaceholder && ((0, _experiments.editorExperiment)('typography_migration_ugc', true) ? (0, _react2.jsx)(_CaptionPlaceholder.CaptionPlaceholderButton
+  // platform_editor_typography_migration_ugc clean up
+  // remove typecasting
+  , {
+    ref: captionPlaceHolderRef,
+    onClick: clickPlaceholder
+  }) : (0, _react2.jsx)(_CaptionPlaceholder.CaptionPlaceholder, {
+    ref: captionPlaceHolderRef,
+    onClick: clickPlaceholder
+  })));
+  return (0, _react2.jsx)(_react.Fragment, null, canResize ? (0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience') ? (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'
+  }, 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
+  }, MediaChildren) : (0, _react2.jsx)(_ui.MediaSingle, {
+    layout: layout,
+    width: width,
+    height: height,
+    containerWidth: containerWidth,
+    fullWidthMode: fullWidthMode,
+    hasFallbackContainer: false,
+    editorAppearance: editorAppearance,
+    pctWidth: mediaSingleWidthAttribute,
+    lineLength: lineLength || FALLBACK_MOST_COMMON_WIDTH,
+    size: legacySize
+  }, MediaChildren));
+};