@atlaskit/editor-plugin-media 1.34.10 → 1.35.1

package/dist/es2019/nodeviews/mediaNodeUpdater.js

@@ -421,4 +421,11 @@ export class MediaNodeUpdater {
 }
 const hasPrivateAttrsChanged = (currentAttrs, newAttrs) => {
   return currentAttrs.__fileName !== newAttrs.__fileName || currentAttrs.__fileMimeType !== newAttrs.__fileMimeType || currentAttrs.__fileSize !== newAttrs.__fileSize || currentAttrs.__contextId !== newAttrs.__contextId;
+};
+export const createMediaNodeUpdater = props => {
+  const updaterProps = {
+    ...props,
+    isMediaSingle: true
+  };
+  return new MediaNodeUpdater(updaterProps);
 };

package/dist/es2019/nodeviews/mediaSingle.js

@@ -31,10 +31,14 @@ import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaS
 import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
 import { hasPrivateAttrsChanged } from './helpers';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
+import { MediaSingleNodeNext } from './mediaSingleNext';
 import { MediaSingleNodeSelector } from './styles';
 const figureWrapperStyles = css({
   margin: 0
 });
+/*
+ * @deprecated Please use the MediaSingleNodeNext
+ */
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export default class MediaSingleNode extends Component {
   constructor(...args) {
@@ -474,6 +478,29 @@ const MediaSingleNodeWrapper = ({
     editorViewModeState
   } = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']);
   const mediaProvider = useMemo(() => 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 (fg('platform_editor_react18_phase2__media_single')) {
+    return jsx(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 jsx(MediaSingleNode, {
     width: widthState.width,
     lineLength: widthState.lineLength,

package/dist/es2019/nodeviews/mediaSingleNext.js

@@ -0,0 +1,543 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ * @jsxFrag
+ */
+import React, { Fragment } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { usePreviousState } from '@atlaskit/editor-common/hooks';
+import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, ExternalImageBadge, getMaxWidthForNestedNode, MEDIA_SINGLE_GUTTER_SIZE, MediaBadges } from '@atlaskit/editor-common/media-single';
+import { MediaSingle } from '@atlaskit/editor-common/ui';
+import { browser } from '@atlaskit/editor-common/utils';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
+import { getAttrsFromUrl } from '@atlaskit/media-client';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
+import { CaptionPlaceholder, CaptionPlaceholderButton } from '../ui/CaptionPlaceholder';
+import { CommentBadge, CommentBadgeNextWrapper } from '../ui/CommentBadge';
+import ResizableMediaSingle from '../ui/ResizableMediaSingle';
+import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
+import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
+import { hasPrivateAttrsChanged } from './helpers';
+import { createMediaNodeUpdater } from './mediaNodeUpdater';
+import { MediaSingleNodeSelector } from './styles';
+const figureWrapperStyles = css({
+  margin: 0
+});
+const useMediaNodeUpdater = ({
+  mediaProvider,
+  mediaNode,
+  dispatchAnalyticsEvent,
+  mediaSingleNodeProps
+}) => {
+  const previousMediaProvider = usePreviousState(mediaProvider);
+  const previousMediaNode = usePreviousState(mediaNode);
+  const mediaNodeUpdaterRef = React.useRef(null);
+  const createOrUpdateMediaNodeUpdater = React.useCallback(props => {
+    const mediaChildNode = mediaNode.firstChild;
+    const updaterProps = {
+      ...props,
+      isMediaSingle: true,
+      node: mediaChildNode ? mediaChildNode : mediaNode,
+      dispatchAnalyticsEvent
+    };
+    if (!mediaNodeUpdaterRef.current) {
+      mediaNodeUpdaterRef.current = createMediaNodeUpdater(updaterProps);
+    } else {
+      mediaNodeUpdaterRef.current.setProps(updaterProps);
+    }
+  }, [mediaNode, dispatchAnalyticsEvent]);
+  React.useEffect(() => {
+    // 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 ? 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)) {
+      const attrsChanged = 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 ? void 0 : _mediaNodeUpdaterRef$2.updateMediaSingleFileAttrs();
+      }
+    }
+  }, [createOrUpdateMediaNodeUpdater, mediaNode, mediaProvider, mediaSingleNodeProps, previousMediaNode, previousMediaProvider]);
+  return mediaNodeUpdaterRef.current;
+};
+const mediaAsyncOperations = async props => {
+  const updatedDimensions = await props.updater.getRemoteDimensions();
+  const 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) {
+    const updatingNode = props.updater.handleExternalMedia(props.getPos);
+    props.addPendingTask(updatingNode);
+    await updatingNode;
+    return;
+  }
+  const contextId = props.updater.getNodeContextId();
+  if (!contextId) {
+    await props.updater.updateContextId();
+  }
+  const hasDifferentContextId = await props.updater.hasDifferentContextId();
+  if (hasDifferentContextId) {
+    try {
+      const copyNode = props.updater.copyNode({
+        traceId: props.mediaNode.attrs.__mediaTraceId
+      });
+      props.addPendingTask(copyNode);
+      await copyNode;
+    } catch (e) {}
+  }
+};
+const useMediaAsyncOperations = ({
+  mediaNode,
+  mediaNodeUpdater,
+  addPendingTask,
+  getPos
+}) => {
+  React.useEffect(() => {
+    if (!mediaNodeUpdater) {
+      return;
+    }
+    // we want the first child of MediaSingle (type "media")
+    const childNode = mediaNode.firstChild;
+    if (!childNode) {
+      return;
+    }
+    mediaAsyncOperations({
+      mediaChildNode: childNode,
+      updater: mediaNodeUpdater,
+      getPos,
+      mediaNode,
+      addPendingTask
+    });
+  }, [mediaNode, addPendingTask, mediaNodeUpdater, getPos]);
+};
+const 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.
+ */
+const useLatestMediaNode = nextMediaNode => {
+  const previousMediaNode = usePreviousState(nextMediaNode);
+  const [mediaNode, setMediaNode] = React.useState(nextMediaNode);
+  React.useEffect(() => {
+    if (!previousMediaNode) {
+      return;
+    }
+    if (!previousMediaNode.eq(nextMediaNode)) {
+      setMediaNode(nextMediaNode);
+    }
+  }, [previousMediaNode, nextMediaNode]);
+  return mediaNode;
+};
+const useMediaDimensionsLogic = ({
+  childMediaNodeAttrs
+}) => {
+  const {
+    width: originalWidth,
+    height: originalHeight
+  } = childMediaNodeAttrs;
+  const isExternalMedia = childMediaNodeAttrs.type === 'external';
+  const hasMediaUrlBlob = isExternalMedia && typeof childMediaNodeAttrs.url === 'string' && isMediaBlobUrlFromAttrs(childMediaNodeAttrs);
+  const urlBlobAttrs = React.useMemo(() => {
+    if (!hasMediaUrlBlob) {
+      return null;
+    }
+    return getAttrsFromUrl(childMediaNodeAttrs.url);
+  }, [hasMediaUrlBlob, childMediaNodeAttrs]);
+  const {
+    width,
+    height
+  } = React.useMemo(() => {
+    // original width and height of child media node (scaled)
+    let width = originalWidth;
+    let height = originalHeight;
+    if (isExternalMedia) {
+      if (urlBlobAttrs) {
+        if (urlBlobAttrs) {
+          const {
+            width: urlWidth,
+            height: urlHeight
+          } = urlBlobAttrs;
+          width = width || urlWidth;
+          height = height || urlHeight;
+        }
+      }
+      if (width === null) {
+        width = DEFAULT_IMAGE_WIDTH;
+      }
+      if (height === null) {
+        height = DEFAULT_IMAGE_HEIGHT;
+      }
+    }
+    if (!width || !height) {
+      width = DEFAULT_IMAGE_WIDTH;
+      height = DEFAULT_IMAGE_HEIGHT;
+    }
+    return {
+      width,
+      height
+    };
+  }, [originalWidth, originalHeight, isExternalMedia, urlBlobAttrs]);
+  return {
+    width,
+    height
+  };
+};
+const useUpdateSizeCallback = ({
+  mediaNode,
+  view,
+  getPos
+}) => {
+  const updateSize = React.useCallback((width, layout) => {
+    const {
+      state,
+      dispatch
+    } = view;
+    const pos = getPos();
+    if (typeof pos === 'undefined') {
+      return;
+    }
+    const tr = state.tr.setNodeMarkup(pos, undefined, {
+      ...mediaNode.attrs,
+      layout,
+      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(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}
+ */
+const FALLBACK_MOST_COMMON_WIDTH = 760;
+export const MediaSingleNodeNext = mediaSingleNodeNextProps => {
+  var _mediaOptions$getEdit, _pluginInjectionApi$m, _pluginInjectionApi$m2, _mediaNode$firstChild2;
+  const {
+    selected,
+    getPos,
+    node: nextMediaNode,
+    mediaOptions,
+    fullWidthMode,
+    view,
+    pluginInjectionApi,
+    width: containerWidth,
+    lineLength,
+    dispatchAnalyticsEvent,
+    editorViewMode,
+    editorDisabled,
+    annotationPluginState,
+    editorAppearance,
+    mediaProvider: mediaProviderPromise,
+    forwardRef,
+    contextIdentifierProvider: contextIdentifierProviderPromise,
+    mediaPluginState
+  } = mediaSingleNodeNextProps;
+  const {
+    commentsOnMedia = false
+  } = (mediaOptions === null || mediaOptions === void 0 ? void 0 : (_mediaOptions$getEdit = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit === void 0 ? void 0 : _mediaOptions$getEdit.call(mediaOptions)) || {};
+  const [mediaProvider, setMediaProvider] = React.useState(null);
+  const [_contextIdentifierProvider, setContextIdentifierProvider] = React.useState(null);
+  const [viewMediaClientConfig, setViewMediaClientConfig] = React.useState();
+  const mountedRef = React.useRef(true);
+  const pos = getPos();
+  const isSelected = selected();
+  const contentWidthForLegacyExperience = getMaxWidthForNestedNode(view, getPos()) || lineLength;
+  const mediaNode = useLatestMediaNode(nextMediaNode);
+  const mediaNodeUpdater = useMediaNodeUpdater({
+    mediaNode,
+    mediaSingleNodeProps: mediaSingleNodeNextProps,
+    mediaProvider,
+    dispatchAnalyticsEvent
+  });
+  useMediaAsyncOperations({
+    mediaNodeUpdater,
+    getPos,
+    mediaNode,
+    addPendingTask: (mediaPluginState === null || mediaPluginState === void 0 ? void 0 : mediaPluginState.addPendingTask) || noop
+  });
+  React.useLayoutEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  React.useLayoutEffect(() => {
+    if (!mediaProviderPromise) {
+      return;
+    }
+    mediaProviderPromise.then(resolvedProvider => {
+      const {
+        viewMediaClientConfig
+      } = resolvedProvider;
+      if (mountedRef.current) {
+        setViewMediaClientConfig(viewMediaClientConfig);
+        setMediaProvider(resolvedProvider);
+      }
+    });
+  }, [mediaProviderPromise]);
+  React.useEffect(() => {
+    if (!contextIdentifierProviderPromise) {
+      return;
+    }
+    contextIdentifierProviderPromise.then(provider => {
+      if (mountedRef.current) {
+        setContextIdentifierProvider(provider);
+      }
+    });
+  }, [contextIdentifierProviderPromise]);
+  React.useEffect(() => {
+    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 (editorExperiment('add-media-from-url', true)) {
+        editorExperiment('add-media-from-url', true, {
+          exposure: true
+        });
+      } else {
+        editorExperiment('add-media-from-url', false, {
+          exposure: true
+        });
+      }
+    }
+  }, [mediaNode]);
+  const {
+    layout,
+    widthType,
+    width: mediaSingleWidthAttribute
+  } = mediaNode.attrs;
+  const childNode = mediaNode.firstChild;
+  const childMediaNodeAttrs = React.useMemo(() => {
+    return (childNode === null || childNode === void 0 ? void 0 : childNode.attrs) || {};
+  }, [childNode]);
+  const {
+    width,
+    height
+  } = useMediaDimensionsLogic({
+    childMediaNodeAttrs
+  });
+  const updateSize = useUpdateSizeCallback({
+    view,
+    getPos,
+    mediaNode
+  });
+  const canResize = React.useMemo(() => {
+    if (typeof pos !== 'number') {
+      return false;
+    }
+    const result = Boolean(!!mediaOptions.allowResizing && !editorDisabled && !editorViewMode);
+    if (mediaOptions.allowResizingInTables) {
+      return result;
+    }
+
+    // If resizing not allowed in tables, check parents for tables
+    const $pos = view.state.doc.resolve(pos);
+    const {
+      table
+    } = view.state.schema.nodes;
+    const disabledNode = !!findParentNodeOfTypeClosestToPos($pos, [table]);
+    return Boolean(result && !disabledNode);
+  }, [mediaOptions, pos, view, editorDisabled, editorViewMode]);
+  const badgeOffsetRight = React.useMemo(() => {
+    if (typeof pos !== 'number') {
+      return undefined;
+    }
+    const $pos = view.state.doc.resolve(pos);
+    const {
+      table
+    } = view.state.schema.nodes;
+    const foundTableNode = findParentNodeOfTypeClosestToPos($pos, [table]);
+    return foundTableNode ? '2px' : '14px';
+  }, [pos, view]);
+  const shouldShowPlaceholder = React.useMemo(() => {
+    const result = mediaOptions.allowCaptions && mediaNode.childCount !== 2 && isSelected && view.state.selection instanceof NodeSelection;
+    return !editorDisabled && result;
+  }, [editorDisabled, mediaOptions.allowCaptions, mediaNode, view, isSelected]);
+  const isInsideTable = React.useMemo(() => {
+    if (typeof pos !== 'number') {
+      return false;
+    }
+    return findParentNodeOfTypeClosestToPos(view.state.doc.resolve(pos), [view.state.schema.nodes.table]);
+  }, [pos, view]);
+  const currentMediaElement = React.useCallback(() => {
+    if (typeof pos !== 'number') {
+      return null;
+    }
+    const mediaNode = view.domAtPos(pos + 1).node;
+    return mediaNode instanceof HTMLElement ? mediaNode : null;
+  }, [view, pos]);
+  const mediaSingleWidth = React.useMemo(() => {
+    return calcMediaSinglePixelWidth({
+      width: mediaSingleWidthAttribute,
+      widthType,
+      origWidth: width,
+      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,
+      gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
+    });
+  }, [mediaSingleWidthAttribute, widthType, width, layout, contentWidthForLegacyExperience, containerWidth]);
+  const currentMaxWidth = isSelected ? pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$m = pluginInjectionApi.media) === null || _pluginInjectionApi$m === void 0 ? void 0 : (_pluginInjectionApi$m2 = _pluginInjectionApi$m.sharedState.currentState()) === null || _pluginInjectionApi$m2 === void 0 ? void 0 : _pluginInjectionApi$m2.currentMaxWidth : undefined;
+  const contentWidth = currentMaxWidth || lineLength;
+  const 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 ? void 0 : (_mediaNode$firstChild2 = mediaNode.firstChild) === null || _mediaNode$firstChild2 === void 0 ? void 0 : _mediaNode$firstChild2.attrs.id));
+  const shouldShowExternalMediaBadge = childMediaNodeAttrs.type === 'external';
+  const mediaSingleWrapperRef = /*#__PURE__*/React.createRef();
+  const captionPlaceHolderRef = /*#__PURE__*/React.createRef();
+  const onMediaSingleClicked = React.useCallback(event => {
+    var _captionPlaceHolderRe;
+    // Workaround for iOS 16 Caption selection issue
+    // @see https://product-fabric.atlassian.net/browse/MEX-2012
+    if (!browser.ios) {
+      return;
+    }
+    if (mediaSingleWrapperRef.current !== event.target) {
+      return;
+    }
+    (_captionPlaceHolderRe = captionPlaceHolderRef.current) === null || _captionPlaceHolderRe === void 0 ? void 0 : _captionPlaceHolderRe.click();
+  }, [mediaSingleWrapperRef, captionPlaceHolderRef]);
+  const clickPlaceholder = React.useCallback(() => {
+    var _pluginInjectionApi$a;
+    if (typeof getPos === 'boolean') {
+      return;
+    }
+    insertAndSelectCaptionFromMediaSinglePos(pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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]);
+  const legacySize = React.useMemo(() => {
+    return {
+      width: mediaSingleWidthAttribute,
+      widthType: widthType
+    };
+  }, [widthType, mediaSingleWidthAttribute]);
+  const MediaChildren = jsx("figure", {
+    ref: mediaSingleWrapperRef,
+    css: figureWrapperStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: MediaSingleNodeSelector,
+    onClick: onMediaSingleClicked
+  }, editorExperiment('add-media-from-url', true) && jsx(MediaBadges, {
+    mediaElement: currentMediaElement(),
+    mediaHeight: height,
+    mediaWidth: width,
+    extendedResizeOffset: fg('platform.editor.media.extended-resize-experience') && !isInsideTable
+  }, ({
+    badgeSize
+  }) => jsx(React.Fragment, null, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
+    badgeSize: badgeSize
+  }), commentsOnMedia && jsx(CommentBadgeNextWrapper, {
+    view: view,
+    api: pluginInjectionApi,
+    mediaNode: mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.firstChild,
+    getPos: getPos,
+    isDrafting: isCurrentNodeDrafting,
+    badgeSize: badgeSize
+  }))), !editorExperiment('add-media-from-url', true) && commentsOnMedia && jsx(CommentBadge, {
+    view: view,
+    api: pluginInjectionApi,
+    mediaNode: mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.firstChild,
+    badgeOffsetRight: badgeOffsetRight,
+    getPos: getPos,
+    isDrafting: isCurrentNodeDrafting
+  }), jsx("div", {
+    ref: forwardRef
+  }), shouldShowPlaceholder && (editorExperiment('typography_migration_ugc', true) ? jsx(CaptionPlaceholderButton
+  // platform_editor_typography_migration_ugc clean up
+  // remove typecasting
+  , {
+    ref: captionPlaceHolderRef,
+    onClick: clickPlaceholder
+  }) : jsx(CaptionPlaceholder, {
+    ref: captionPlaceHolderRef,
+    onClick: clickPlaceholder
+  })));
+  return jsx(Fragment, null, canResize ? fg('platform.editor.media.extended-resize-experience') ? jsx(ResizableMediaSingleNext, {
+    view: view,
+    getPos: getPos,
+    updateSize: updateSize,
+    gridSize: 12,
+    viewMediaClientConfig: viewMediaClientConfig,
+    allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
+    selected: isSelected,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    pluginInjectionApi: pluginInjectionApi,
+    layout: layout,
+    width: width,
+    height: height,
+    containerWidth: containerWidth,
+    lineLength: contentWidth || FALLBACK_MOST_COMMON_WIDTH,
+    fullWidthMode: fullWidthMode,
+    hasFallbackContainer: false,
+    mediaSingleWidth: mediaSingleWidth,
+    editorAppearance: editorAppearance,
+    showLegacyNotification: widthType !== 'pixel'
+  }, MediaChildren) : jsx(ResizableMediaSingle, {
+    view: view,
+    getPos: getPos,
+    updateSize: updateSize,
+    gridSize: 12,
+    viewMediaClientConfig: viewMediaClientConfig,
+    allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
+    selected: isSelected,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    pluginInjectionApi: pluginInjectionApi,
+    layout: layout,
+    width: width,
+    height: height,
+    containerWidth: containerWidth,
+    fullWidthMode: fullWidthMode,
+    hasFallbackContainer: false,
+    mediaSingleWidth: mediaSingleWidth,
+    editorAppearance: editorAppearance,
+    lineLength: contentWidthForLegacyExperience || FALLBACK_MOST_COMMON_WIDTH,
+    pctWidth: mediaSingleWidthAttribute
+  }, MediaChildren) : jsx(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));
+};

package/dist/esm/nodeviews/mediaNodeUpdater.js

@@ -770,4 +770,10 @@ export var 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;
+};
+export var createMediaNodeUpdater = function createMediaNodeUpdater(props) {
+  var updaterProps = _objectSpread(_objectSpread({}, props), {}, {
+    isMediaSingle: true
+  });
+  return new MediaNodeUpdater(updaterProps);
 };

package/dist/esm/nodeviews/mediaSingle.js

@@ -44,10 +44,14 @@ import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaS
 import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
 import { hasPrivateAttrsChanged } from './helpers';
 import { MediaNodeUpdater } from './mediaNodeUpdater';
+import { MediaSingleNodeNext } from './mediaSingleNext';
 import { MediaSingleNodeSelector } from './styles';
 var figureWrapperStyles = css({
   margin: 0
 });
+/*
+ * @deprecated Please use the MediaSingleNodeNext
+ */
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var MediaSingleNode = /*#__PURE__*/function (_Component) {
   _inherits(MediaSingleNode, _Component);
@@ -554,6 +558,29 @@ var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref7) {
   var mediaProvider = 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 (fg('platform_editor_react18_phase2__media_single')) {
+    return jsx(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 jsx(MediaSingleNode, {
     width: widthState.width,
     lineLength: widthState.lineLength,