@atlaskit/editor-plugin-media 1.35.0 → 1.36.0

package/dist/esm/nodeviews/mediaSingleNext.js

@@ -0,0 +1,576 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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) { _defineProperty(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
+ */
+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';
+var figureWrapperStyles = css({
+  margin: 0
+});
+var useMediaNodeUpdater = function useMediaNodeUpdater(_ref) {
+  var mediaProvider = _ref.mediaProvider,
+    mediaNode = _ref.mediaNode,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    mediaSingleNodeProps = _ref.mediaSingleNodeProps;
+  var previousMediaProvider = usePreviousState(mediaProvider);
+  var previousMediaNode = usePreviousState(mediaNode);
+  var mediaNodeUpdaterRef = React.useRef(null);
+  var createOrUpdateMediaNodeUpdater = React.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 = createMediaNodeUpdater(updaterProps);
+    } else {
+      mediaNodeUpdaterRef.current.setProps(updaterProps);
+    }
+  }, [mediaNode, dispatchAnalyticsEvent]);
+  React.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 = 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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(props) {
+    var updatedDimensions, currentAttrs, updatingNode, contextId, hasDifferentContextId, copyNode;
+    return _regeneratorRuntime.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.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 = usePreviousState(nextMediaNode);
+  var _React$useState = React.useState(nextMediaNode),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    mediaNode = _React$useState2[0],
+    setMediaNode = _React$useState2[1];
+  React.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' && isMediaBlobUrlFromAttrs(childMediaNodeAttrs);
+  var urlBlobAttrs = React.useMemo(function () {
+    if (!hasMediaUrlBlob) {
+      return null;
+    }
+    return getAttrsFromUrl(childMediaNodeAttrs.url);
+  }, [hasMediaUrlBlob, childMediaNodeAttrs]);
+  var _React$useMemo = React.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 = DEFAULT_IMAGE_WIDTH;
+        }
+        if (height === null) {
+          height = DEFAULT_IMAGE_HEIGHT;
+        }
+      }
+      if (!width || !height) {
+        width = DEFAULT_IMAGE_WIDTH;
+        height = 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.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(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;
+export var 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.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    mediaProvider = _React$useState4[0],
+    setMediaProvider = _React$useState4[1];
+  var _React$useState5 = React.useState(null),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    _contextIdentifierProvider = _React$useState6[0],
+    setContextIdentifierProvider = _React$useState6[1];
+  var _React$useState7 = React.useState(),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    viewMediaClientConfig = _React$useState8[0],
+    setViewMediaClientConfig = _React$useState8[1];
+  var mountedRef = React.useRef(true);
+  var pos = getPos();
+  var isSelected = selected();
+  var contentWidthForLegacyExperience = 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.useLayoutEffect(function () {
+    mountedRef.current = true;
+    return function () {
+      mountedRef.current = false;
+    };
+  }, []);
+  React.useLayoutEffect(function () {
+    if (!mediaProviderPromise) {
+      return;
+    }
+    mediaProviderPromise.then(function (resolvedProvider) {
+      var viewMediaClientConfig = resolvedProvider.viewMediaClientConfig;
+      if (mountedRef.current) {
+        setViewMediaClientConfig(viewMediaClientConfig);
+        setMediaProvider(resolvedProvider);
+      }
+    });
+  }, [mediaProviderPromise]);
+  React.useEffect(function () {
+    if (!contextIdentifierProviderPromise) {
+      return;
+    }
+    contextIdentifierProviderPromise.then(function (provider) {
+      if (mountedRef.current) {
+        setContextIdentifierProvider(provider);
+      }
+    });
+  }, [contextIdentifierProviderPromise]);
+  React.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 (editorExperiment('add-media-from-url', true)) {
+        editorExperiment('add-media-from-url', true, {
+          exposure: true
+        });
+      } else {
+        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.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.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 = !!findParentNodeOfTypeClosestToPos($pos, [table]);
+    return Boolean(result && !disabledNode);
+  }, [mediaOptions, pos, view, editorDisabled, editorViewMode]);
+  var badgeOffsetRight = React.useMemo(function () {
+    if (typeof pos !== 'number') {
+      return undefined;
+    }
+    var $pos = view.state.doc.resolve(pos);
+    var table = view.state.schema.nodes.table;
+    var foundTableNode = findParentNodeOfTypeClosestToPos($pos, [table]);
+    return foundTableNode ? '2px' : '14px';
+  }, [pos, view]);
+  var shouldShowPlaceholder = React.useMemo(function () {
+    var result = mediaOptions.allowCaptions && mediaNode.childCount !== 2 && isSelected && view.state.selection instanceof NodeSelection;
+    return !editorDisabled && result;
+  }, [editorDisabled, mediaOptions.allowCaptions, mediaNode, view, isSelected]);
+  var isInsideTable = React.useMemo(function () {
+    if (typeof pos !== 'number') {
+      return false;
+    }
+    return findParentNodeOfTypeClosestToPos(view.state.doc.resolve(pos), [view.state.schema.nodes.table]);
+  }, [pos, view]);
+  var currentMediaElement = React.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.useMemo(function () {
+    return 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: 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.createRef();
+  var captionPlaceHolderRef = /*#__PURE__*/React.createRef();
+  var onMediaSingleClicked = React.useCallback(function (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 || _captionPlaceHolderRe.click();
+  }, [mediaSingleWrapperRef, captionPlaceHolderRef]);
+  var clickPlaceholder = React.useCallback(function () {
+    var _pluginInjectionApi$a;
+    if (typeof getPos === 'boolean') {
+      return;
+    }
+    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.useMemo(function () {
+    return {
+      width: mediaSingleWidthAttribute,
+      widthType: widthType
+    };
+  }, [widthType, mediaSingleWidthAttribute]);
+  var 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
+  }, function (_ref8) {
+    var badgeSize = _ref8.badgeSize;
+    return 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));
+};