@atlaskit/editor-plugin-media 1.29.9 → 1.30.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-media
 
+## 1.30.0
+
+### Minor Changes
+
+- [#137821](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137821)
+  [`e26174c7d02a6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e26174c7d02a6) -
+  ED-24631 Refactor how ExternalImageBadge and CommentBadge are rendered
+
+### Patch Changes
+
+- [#138118](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138118)
+  [`5e4d9eb1aefe4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5e4d9eb1aefe4) -
+  NOISSUE: Upgrades editor React peer dependencies to v18
+- Updated dependencies
+
 ## 1.29.9
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaSingle.js

@@ -48,6 +48,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @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
@@ -72,7 +73,6 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mediaSingleWrapperRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "captionPlaceHolderRef", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "commentBadgeRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createOrUpdateMediaNodeUpdater", function (props) {
       var node = _this.props.node.firstChild;
       var updaterProps = _objectSpread(_objectSpread({}, props), {}, {
@@ -332,12 +332,7 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _mediaOptions$getEdit,
-        _pluginInjectionApi$m,
-        _node$firstChild,
-        _this2 = this,
-        _mediaOptions$getEdit3,
-        _mediaOptions$getEdit4;
+      var _mediaOptions$getEdit, _pluginInjectionApi$m, _node$firstChild, _mediaOptions$getEdit2;
       var _this$props2 = this.props,
         selected = _this$props2.selected,
         getPos = _this$props2.getPos,
@@ -431,9 +426,9 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
       var canResize = !!this.props.mediaOptions.allowResizing && !editorDisabled && !editorViewMode;
       if (!this.props.mediaOptions.allowResizingInTables) {
         // If resizing not allowed in tables, check parents for tables
-        var pos = getPos();
-        if (pos) {
-          var $pos = state.doc.resolve(pos);
+        var _pos = getPos();
+        if (_pos) {
+          var $pos = state.doc.resolve(_pos);
           var table = state.schema.nodes.table;
           var disabledNode = !!(0, _utils2.findParentNodeOfTypeClosestToPos)($pos, [table]);
           canResize = canResize && !disabledNode;
@@ -454,33 +449,14 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         shouldShowPlaceholder = !editorDisabled && shouldShowPlaceholder;
       }
       var isCurrentNodeDrafting = (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (node === null || node === void 0 || (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id);
-      var insertMediaPluginPhaseOneFeatureFlag = (0, _platformFeatureFlags.fg)('platform_editor_insert_media_plugin_phase_one');
-      var shouldShowExternalMediaBadge = attrs.type === 'external' && attrs.__external && insertMediaPluginPhaseOneFeatureFlag;
-      var commentBadgeOffset = function commentBadgeOffset() {
-        if (_this2.commentBadgeRef.current) {
-          var _mediaOptions$getEdit2;
-          var commentsOnMediaBugFixEnabled = mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 || (_mediaOptions$getEdit2 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : _mediaOptions$getEdit2.commentsOnMediaBugFix;
-          var commentBadgeWidth = _this2.commentBadgeRef.current.offsetWidth;
-          var isMediaInsideTable = function isMediaInsideTable() {
-            var pos = getPos();
-            if (pos !== undefined) {
-              var _$pos2 = view.state.doc.resolve(pos);
-              var _table2 = view.state.schema.nodes.table;
-              var foundTableNode = (0, _utils2.findParentNodeOfTypeClosestToPos)(_$pos2, [_table2]);
-              return Boolean(foundTableNode);
-            }
-            return false;
-          };
-          if (commentsOnMediaBugFixEnabled && isMediaInsideTable()) {
-            return commentBadgeWidth + 2;
-          }
-          return commentBadgeWidth + 14;
-        }
-        return 0;
-      };
+      var shouldShowExternalMediaBadge = attrs.type === 'external';
+      var pos = getPos();
+      var isInsideTable = pos !== undefined && (0, _utils2.findParentNodeOfTypeClosestToPos)(state.doc.resolve(pos), [state.schema.nodes.table]);
       var currentMediaElement = function currentMediaElement() {
-        var pos = getPos();
-        return view.domAtPos(pos + 1).node;
+        if (pos !== undefined) {
+          return view.domAtPos(pos + 1).node;
+        }
+        return null;
       };
       var MediaChildren = (0, _react2.jsx)("figure", {
         ref: this.mediaSingleWrapperRef,
@@ -489,29 +465,32 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
         ,
         className: _styles.MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
-      }, shouldShowExternalMediaBadge && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
-        commentBadgeRightOffset: commentBadgeOffset(),
+      }, (0, _platformFeatureFlags.fg)('platform_editor_insert_media_plugin_phase_one') && (0, _react2.jsx)(_mediaSingle.MediaBadges, {
         mediaElement: currentMediaElement(),
         mediaHeight: height,
-        mediaWidth: width
-      }), commentsOnMedia && (insertMediaPluginPhaseOneFeatureFlag ? (0, _react2.jsx)(_CommentBadge.CommentBadgeWithRef, {
-        ref: this.commentBadgeRef,
-        commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit3 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit3 === void 0 || (_mediaOptions$getEdit3 = _mediaOptions$getEdit3.call(mediaOptions)) === null || _mediaOptions$getEdit3 === void 0 ? void 0 : _mediaOptions$getEdit3.commentsOnMediaBugFix,
+        mediaWidth: width,
+        extendedResizeOffset: (0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience') && !isInsideTable
+      }, function (_ref6) {
+        var badgeSize = _ref6.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: node === null || node === void 0 ? void 0 : node.firstChild,
+          getPos: getPos,
+          isDrafting: isCurrentNodeDrafting,
+          badgeSize: badgeSize
+        }));
+      }), !(0, _platformFeatureFlags.fg)('platform_editor_insert_media_plugin_phase_one') && commentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadge, {
+        commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 || (_mediaOptions$getEdit2 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : _mediaOptions$getEdit2.commentsOnMediaBugFix,
         view: view,
         api: pluginInjectionApi,
         mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
         badgeOffsetRight: badgeOffsetRight,
         getPos: getPos,
         isDrafting: isCurrentNodeDrafting
-      }) : (0, _react2.jsx)(_CommentBadge.CommentBadge, {
-        commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit4 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit4 === void 0 || (_mediaOptions$getEdit4 = _mediaOptions$getEdit4.call(mediaOptions)) === null || _mediaOptions$getEdit4 === void 0 ? void 0 : _mediaOptions$getEdit4.commentsOnMediaBugFix,
-        view: view,
-        api: pluginInjectionApi,
-        mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
-        badgeOffsetRight: badgeOffsetRight,
-        getPos: getPos,
-        isDrafting: isCurrentNodeDrafting
-      })), (0, _react2.jsx)("div", {
+      }), (0, _react2.jsx)("div", {
         ref: this.props.forwardRef
       }), shouldShowPlaceholder && (0, _react2.jsx)(_CaptionPlaceholder.default, {
         ref: this.captionPlaceHolderRef,
@@ -537,19 +516,19 @@ var MediaSingleNode = exports.default = /*#__PURE__*/function (_Component) {
   mediaOptions: {}
 });
 (0, _defineProperty2.default)(MediaSingleNode, "displayName", 'MediaSingleNode');
-var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
-  var pluginInjectionApi = _ref6.pluginInjectionApi,
-    contextIdentifierProvider = _ref6.contextIdentifierProvider,
-    node = _ref6.node,
-    getPos = _ref6.getPos,
-    mediaOptions = _ref6.mediaOptions,
-    view = _ref6.view,
-    fullWidthMode = _ref6.fullWidthMode,
-    selected = _ref6.selected,
-    eventDispatcher = _ref6.eventDispatcher,
-    dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent,
-    forwardRef = _ref6.forwardRef,
-    editorAppearance = _ref6.editorAppearance;
+var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref7) {
+  var pluginInjectionApi = _ref7.pluginInjectionApi,
+    contextIdentifierProvider = _ref7.contextIdentifierProvider,
+    node = _ref7.node,
+    getPos = _ref7.getPos,
+    mediaOptions = _ref7.mediaOptions,
+    view = _ref7.view,
+    fullWidthMode = _ref7.fullWidthMode,
+    selected = _ref7.selected,
+    eventDispatcher = _ref7.eventDispatcher,
+    dispatchAnalyticsEvent = _ref7.dispatchAnalyticsEvent,
+    forwardRef = _ref7.forwardRef,
+    editorAppearance = _ref7.editorAppearance;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']),
     widthState = _useSharedPluginState.widthState,
     mediaState = _useSharedPluginState.mediaState,
@@ -585,18 +564,18 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   (0, _inherits2.default)(MediaSingleNodeView, _ReactNodeView);
   var _super2 = _createSuper(MediaSingleNodeView);
   function MediaSingleNodeView() {
-    var _this3;
+    var _this2;
     (0, _classCallCheck2.default)(this, MediaSingleNodeView);
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-    _this3 = _super2.call.apply(_super2, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "lastOffsetLeft", 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "forceViewUpdate", false);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "selectionType", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "checkAndUpdateSelectionType", function () {
-      var getPos = _this3.getPos;
-      var selection = _this3.view.state.selection;
+    _this2 = _super2.call.apply(_super2, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "lastOffsetLeft", 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "forceViewUpdate", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "selectionType", null);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "checkAndUpdateSelectionType", function () {
+      var getPos = _this2.getPos;
+      var selection = _this2.view.state.selection;
 
       /**
        *  ED-19831
@@ -609,15 +588,15 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       } catch (e) {
         pos = undefined;
       }
-      var isNodeSelected = (0, _utils.isNodeSelectedOrInRange)(selection.$anchor.pos, selection.$head.pos, pos, _this3.node.nodeSize);
-      _this3.selectionType = isNodeSelected;
+      var isNodeSelected = (0, _utils.isNodeSelectedOrInRange)(selection.$anchor.pos, selection.$head.pos, pos, _this2.node.nodeSize);
+      _this2.selectionType = isNodeSelected;
       return isNodeSelected;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this3), "isNodeSelected", function () {
-      _this3.checkAndUpdateSelectionType();
-      return _this3.selectionType !== null;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "isNodeSelected", function () {
+      _this2.checkAndUpdateSelectionType();
+      return _this2.selectionType !== null;
     });
-    return _this3;
+    return _this2;
   }
   (0, _createClass2.default)(MediaSingleNodeView, [{
     key: "createDomRef",
@@ -682,10 +661,10 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "update",
     value: function update(node, decorations, _innerDecorations, isValidUpdate) {
-      var _this4 = this;
+      var _this3 = this;
       if (!isValidUpdate) {
         isValidUpdate = function isValidUpdate(currentNode, newNode) {
-          return _this4.getNodeMediaId(currentNode) === _this4.getNodeMediaId(newNode);
+          return _this3.getNodeMediaId(currentNode) === _this3.getNodeMediaId(newNode);
         };
       }
       return (0, _get2.default)((0, _getPrototypeOf2.default)(MediaSingleNodeView.prototype), "update", this).call(this, node, decorations, _innerDecorations, isValidUpdate);
@@ -693,7 +672,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render(props, forwardRef) {
-      var _this5 = this;
+      var _this4 = this;
       var _this$reactComponentP = this.reactComponentProps,
         eventDispatcher = _this$reactComponentP.eventDispatcher,
         fullWidthMode = _this$reactComponentP.fullWidthMode,
@@ -708,17 +687,17 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       return (0, _react2.jsx)(_providerFactory.WithProviders, {
         providers: ['contextIdentifierProvider'],
         providerFactory: providerFactory,
-        renderNode: function renderNode(_ref7) {
-          var contextIdentifierProvider = _ref7.contextIdentifierProvider;
+        renderNode: function renderNode(_ref8) {
+          var contextIdentifierProvider = _ref8.contextIdentifierProvider;
           return (0, _react2.jsx)(MediaSingleNodeWrapper, {
             pluginInjectionApi: pluginInjectionApi,
             contextIdentifierProvider: contextIdentifierProvider,
-            node: _this5.node,
+            node: _this4.node,
             getPos: getPos,
             mediaOptions: mediaOptions,
-            view: _this5.view,
+            view: _this4.view,
             fullWidthMode: fullWidthMode,
-            selected: _this5.isNodeSelected,
+            selected: _this4.isNodeSelected,
             eventDispatcher: eventDispatcher,
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             forwardRef: forwardRef,

package/dist/cjs/ui/CommentBadge/index.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CommentBadgeWithRef = exports.CommentBadge = void 0;
+exports.CommentBadgeNextWrapper = exports.CommentBadge = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
@@ -77,17 +77,19 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
 };
 var CommentBadge = exports.CommentBadge = (0, _reactIntlNext.injectIntl)(CommentBadgeWrapper);
 
-// This is a copy of above component with adding forwardRef.
-// Clean this up when removing fg('platform_editor_insert_media_plugin_phase_one') flag.
-var CommentBadgeWithRef = exports.CommentBadgeWithRef = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+/**
+ * Remove CommentBadgeWrapper component above
+ * and rename CommentBadgeNextWrapper to CommentBadgeWrapper
+ * when clean up platform_editor_insert_media_plugin_phase_one feature flag
+ */
+
+var CommentBadgeNextWrapper = exports.CommentBadgeNextWrapper = function CommentBadgeNextWrapper(_ref2) {
   var api = _ref2.api,
     mediaNode = _ref2.mediaNode,
     view = _ref2.view,
     getPos = _ref2.getPos,
     isDrafting = _ref2.isDrafting,
-    badgeOffsetRight = _ref2.badgeOffsetRight,
-    commentsOnMediaBugFixEnabled = _ref2.commentsOnMediaBugFixEnabled;
-  var intl = (0, _reactIntlNext.useIntl)();
+    badgeSize = _ref2.badgeSize;
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     entered = _useState4[0],
@@ -123,21 +125,16 @@ var CommentBadgeWithRef = exports.CommentBadgeWithRef = /*#__PURE__*/(0, _react.
     return null;
   }
   var mediaSingleElement = view.domAtPos(pos + 1).node;
-  return /*#__PURE__*/_react.default.createElement(_mediaSingle.CommentBadge, {
-    ref: ref,
-    commentsOnMediaBugFixEnabled: commentsOnMediaBugFixEnabled,
-    badgeOffsetRight: badgeOffsetRight,
-    width: mediaNode.attrs.width,
-    height: mediaNode.attrs.height,
+  return /*#__PURE__*/_react.default.createElement(_mediaSingle.CommentBadgeNext, {
     onClick: onClick,
     mediaSingleElement: mediaSingleElement,
-    intl: intl,
     status: entered ? 'entered' : status,
     onMouseEnter: function onMouseEnter() {
       return setEntered(true);
     },
     onMouseLeave: function onMouseLeave() {
       return setEntered(false);
-    }
+    },
+    badgeSize: badgeSize
   });
-});
+};

package/dist/es2019/nodeviews/mediaSingle.js

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag
  */
 
 import React, { Component, Fragment, useMemo } from 'react';
@@ -11,7 +12,7 @@ import React, { Component, Fragment, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, getMaxWidthForNestedNode, MEDIA_SINGLE_GUTTER_SIZE } from '@atlaskit/editor-common/media-single';
-import { ExternalImageBadge } from '@atlaskit/editor-common/media-single';
+import { ExternalImageBadge, MediaBadges } from '@atlaskit/editor-common/media-single';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { MediaSingle } from '@atlaskit/editor-common/ui';
@@ -24,7 +25,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import CaptionPlaceholder from '../ui/CaptionPlaceholder';
-import { CommentBadge, CommentBadgeWithRef } from '../ui/CommentBadge';
+import { CommentBadge, CommentBadgeNextWrapper } from '../ui/CommentBadge';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
 import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
@@ -47,7 +48,6 @@ export default class MediaSingleNode extends Component {
     });
     _defineProperty(this, "mediaSingleWrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "captionPlaceHolderRef", /*#__PURE__*/React.createRef());
-    _defineProperty(this, "commentBadgeRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "createOrUpdateMediaNodeUpdater", props => {
       const node = this.props.node.firstChild;
       const updaterProps = {
@@ -236,7 +236,7 @@ export default class MediaSingleNode extends Component {
     });
   }
   render() {
-    var _mediaOptions$getEdit, _pluginInjectionApi$m, _pluginInjectionApi$m2, _node$firstChild, _mediaOptions$getEdit4, _mediaOptions$getEdit5, _mediaOptions$getEdit6, _mediaOptions$getEdit7;
+    var _mediaOptions$getEdit, _pluginInjectionApi$m, _pluginInjectionApi$m2, _node$firstChild, _mediaOptions$getEdit2, _mediaOptions$getEdit3;
     const {
       selected,
       getPos,
@@ -367,35 +367,14 @@ export default class MediaSingleNode extends Component {
       shouldShowPlaceholder = !editorDisabled && shouldShowPlaceholder;
     }
     const isCurrentNodeDrafting = (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (node === null || node === void 0 ? void 0 : (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id);
-    const insertMediaPluginPhaseOneFeatureFlag = fg('platform_editor_insert_media_plugin_phase_one');
-    const shouldShowExternalMediaBadge = attrs.type === 'external' && attrs.__external && insertMediaPluginPhaseOneFeatureFlag;
-    const commentBadgeOffset = () => {
-      if (this.commentBadgeRef.current) {
-        var _mediaOptions$getEdit2, _mediaOptions$getEdit3;
-        const commentsOnMediaBugFixEnabled = mediaOptions === null || mediaOptions === void 0 ? void 0 : (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : (_mediaOptions$getEdit3 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit3 === void 0 ? void 0 : _mediaOptions$getEdit3.commentsOnMediaBugFix;
-        const commentBadgeWidth = this.commentBadgeRef.current.offsetWidth;
-        const isMediaInsideTable = () => {
-          const pos = getPos();
-          if (pos !== undefined) {
-            const $pos = view.state.doc.resolve(pos);
-            const {
-              table
-            } = view.state.schema.nodes;
-            const foundTableNode = findParentNodeOfTypeClosestToPos($pos, [table]);
-            return Boolean(foundTableNode);
-          }
-          return false;
-        };
-        if (commentsOnMediaBugFixEnabled && isMediaInsideTable()) {
-          return commentBadgeWidth + 2;
-        }
-        return commentBadgeWidth + 14;
-      }
-      return 0;
-    };
+    const shouldShowExternalMediaBadge = attrs.type === 'external';
+    const pos = getPos();
+    const isInsideTable = pos !== undefined && findParentNodeOfTypeClosestToPos(state.doc.resolve(pos), [state.schema.nodes.table]);
     const currentMediaElement = () => {
-      const pos = getPos();
-      return view.domAtPos(pos + 1).node;
+      if (pos !== undefined) {
+        return view.domAtPos(pos + 1).node;
+      }
+      return null;
     };
     const MediaChildren = jsx("figure", {
       ref: this.mediaSingleWrapperRef,
@@ -404,29 +383,31 @@ export default class MediaSingleNode extends Component {
       ,
       className: MediaSingleNodeSelector,
       onClick: this.onMediaSingleClicked
-    }, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
-      commentBadgeRightOffset: commentBadgeOffset(),
+    }, fg('platform_editor_insert_media_plugin_phase_one') && jsx(MediaBadges, {
       mediaElement: currentMediaElement(),
       mediaHeight: height,
-      mediaWidth: width
-    }), commentsOnMedia && (insertMediaPluginPhaseOneFeatureFlag ? jsx(CommentBadgeWithRef, {
-      ref: this.commentBadgeRef,
-      commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 ? void 0 : (_mediaOptions$getEdit4 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit4 === void 0 ? void 0 : (_mediaOptions$getEdit5 = _mediaOptions$getEdit4.call(mediaOptions)) === null || _mediaOptions$getEdit5 === void 0 ? void 0 : _mediaOptions$getEdit5.commentsOnMediaBugFix,
+      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: node === null || node === void 0 ? void 0 : node.firstChild,
-      badgeOffsetRight: badgeOffsetRight,
       getPos: getPos,
-      isDrafting: isCurrentNodeDrafting
-    }) : jsx(CommentBadge, {
-      commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 ? void 0 : (_mediaOptions$getEdit6 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit6 === void 0 ? void 0 : (_mediaOptions$getEdit7 = _mediaOptions$getEdit6.call(mediaOptions)) === null || _mediaOptions$getEdit7 === void 0 ? void 0 : _mediaOptions$getEdit7.commentsOnMediaBugFix,
+      isDrafting: isCurrentNodeDrafting,
+      badgeSize: badgeSize
+    }))), !fg('platform_editor_insert_media_plugin_phase_one') && commentsOnMedia && jsx(CommentBadge, {
+      commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 ? void 0 : (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : (_mediaOptions$getEdit3 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit3 === void 0 ? void 0 : _mediaOptions$getEdit3.commentsOnMediaBugFix,
       view: view,
       api: pluginInjectionApi,
       mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
       badgeOffsetRight: badgeOffsetRight,
       getPos: getPos,
       isDrafting: isCurrentNodeDrafting
-    })), jsx("div", {
+    }), jsx("div", {
       ref: this.props.forwardRef
     }), shouldShowPlaceholder && jsx(CaptionPlaceholder, {
       ref: this.captionPlaceHolderRef,

package/dist/es2019/ui/CommentBadge/index.js

@@ -1,8 +1,8 @@
-import React, { forwardRef, useCallback, useMemo, useState } from 'react';
-import { injectIntl, useIntl } from 'react-intl-next';
+import React, { useCallback, useMemo, useState } from 'react';
+import { injectIntl } from 'react-intl-next';
 import { VIEW_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
+import { CommentBadge as CommentBadgeComponent, CommentBadgeNext } from '@atlaskit/editor-common/media-single';
 const CommentBadgeWrapper = ({
   api,
   mediaNode,
@@ -66,18 +66,20 @@ const CommentBadgeWrapper = ({
 };
 export const CommentBadge = injectIntl(CommentBadgeWrapper);
 
-// This is a copy of above component with adding forwardRef.
-// Clean this up when removing fg('platform_editor_insert_media_plugin_phase_one') flag.
-export const CommentBadgeWithRef = /*#__PURE__*/forwardRef(({
+/**
+ * Remove CommentBadgeWrapper component above
+ * and rename CommentBadgeNextWrapper to CommentBadgeWrapper
+ * when clean up platform_editor_insert_media_plugin_phase_one feature flag
+ */
+
+export const CommentBadgeNextWrapper = ({
   api,
   mediaNode,
   view,
   getPos,
   isDrafting,
-  badgeOffsetRight,
-  commentsOnMediaBugFixEnabled
-}, ref) => {
-  const intl = useIntl();
+  badgeSize
+}) => {
   const [entered, setEntered] = useState(false);
   const {
     annotationState
@@ -116,17 +118,12 @@ export const CommentBadgeWithRef = /*#__PURE__*/forwardRef(({
     return null;
   }
   const mediaSingleElement = view.domAtPos(pos + 1).node;
-  return /*#__PURE__*/React.createElement(CommentBadgeComponent, {
-    ref: ref,
-    commentsOnMediaBugFixEnabled: commentsOnMediaBugFixEnabled,
-    badgeOffsetRight: badgeOffsetRight,
-    width: mediaNode.attrs.width,
-    height: mediaNode.attrs.height,
+  return /*#__PURE__*/React.createElement(CommentBadgeNext, {
     onClick: onClick,
     mediaSingleElement: mediaSingleElement,
-    intl: intl,
     status: entered ? 'entered' : status,
     onMouseEnter: () => setEntered(true),
-    onMouseLeave: () => setEntered(false)
+    onMouseLeave: () => setEntered(false),
+    badgeSize: badgeSize
   });
-});
+};

package/dist/esm/nodeviews/mediaSingle.js

@@ -16,6 +16,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag
  */
 
 import React, { Component, Fragment, useMemo } from 'react';
@@ -24,7 +25,7 @@ import React, { Component, Fragment, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, getMaxWidthForNestedNode, MEDIA_SINGLE_GUTTER_SIZE } from '@atlaskit/editor-common/media-single';
-import { ExternalImageBadge } from '@atlaskit/editor-common/media-single';
+import { ExternalImageBadge, MediaBadges } from '@atlaskit/editor-common/media-single';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { MediaSingle } from '@atlaskit/editor-common/ui';
@@ -37,7 +38,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
 import CaptionPlaceholder from '../ui/CaptionPlaceholder';
-import { CommentBadge, CommentBadgeWithRef } from '../ui/CommentBadge';
+import { CommentBadge, CommentBadgeNextWrapper } from '../ui/CommentBadge';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
 import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
@@ -67,7 +68,6 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "mediaSingleWrapperRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "captionPlaceHolderRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "commentBadgeRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "createOrUpdateMediaNodeUpdater", function (props) {
       var node = _this.props.node.firstChild;
       var updaterProps = _objectSpread(_objectSpread({}, props), {}, {
@@ -327,12 +327,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _mediaOptions$getEdit,
-        _pluginInjectionApi$m,
-        _node$firstChild,
-        _this2 = this,
-        _mediaOptions$getEdit3,
-        _mediaOptions$getEdit4;
+      var _mediaOptions$getEdit, _pluginInjectionApi$m, _node$firstChild, _mediaOptions$getEdit2;
       var _this$props2 = this.props,
         selected = _this$props2.selected,
         getPos = _this$props2.getPos,
@@ -426,9 +421,9 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       var canResize = !!this.props.mediaOptions.allowResizing && !editorDisabled && !editorViewMode;
       if (!this.props.mediaOptions.allowResizingInTables) {
         // If resizing not allowed in tables, check parents for tables
-        var pos = getPos();
-        if (pos) {
-          var $pos = state.doc.resolve(pos);
+        var _pos = getPos();
+        if (_pos) {
+          var $pos = state.doc.resolve(_pos);
           var table = state.schema.nodes.table;
           var disabledNode = !!findParentNodeOfTypeClosestToPos($pos, [table]);
           canResize = canResize && !disabledNode;
@@ -449,33 +444,14 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         shouldShowPlaceholder = !editorDisabled && shouldShowPlaceholder;
       }
       var isCurrentNodeDrafting = (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.isDrafting) && (annotationPluginState === null || annotationPluginState === void 0 ? void 0 : annotationPluginState.targetNodeId) === (node === null || node === void 0 || (_node$firstChild = node.firstChild) === null || _node$firstChild === void 0 ? void 0 : _node$firstChild.attrs.id);
-      var insertMediaPluginPhaseOneFeatureFlag = fg('platform_editor_insert_media_plugin_phase_one');
-      var shouldShowExternalMediaBadge = attrs.type === 'external' && attrs.__external && insertMediaPluginPhaseOneFeatureFlag;
-      var commentBadgeOffset = function commentBadgeOffset() {
-        if (_this2.commentBadgeRef.current) {
-          var _mediaOptions$getEdit2;
-          var commentsOnMediaBugFixEnabled = mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 || (_mediaOptions$getEdit2 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : _mediaOptions$getEdit2.commentsOnMediaBugFix;
-          var commentBadgeWidth = _this2.commentBadgeRef.current.offsetWidth;
-          var isMediaInsideTable = function isMediaInsideTable() {
-            var pos = getPos();
-            if (pos !== undefined) {
-              var _$pos2 = view.state.doc.resolve(pos);
-              var _table2 = view.state.schema.nodes.table;
-              var foundTableNode = findParentNodeOfTypeClosestToPos(_$pos2, [_table2]);
-              return Boolean(foundTableNode);
-            }
-            return false;
-          };
-          if (commentsOnMediaBugFixEnabled && isMediaInsideTable()) {
-            return commentBadgeWidth + 2;
-          }
-          return commentBadgeWidth + 14;
-        }
-        return 0;
-      };
+      var shouldShowExternalMediaBadge = attrs.type === 'external';
+      var pos = getPos();
+      var isInsideTable = pos !== undefined && findParentNodeOfTypeClosestToPos(state.doc.resolve(pos), [state.schema.nodes.table]);
       var currentMediaElement = function currentMediaElement() {
-        var pos = getPos();
-        return view.domAtPos(pos + 1).node;
+        if (pos !== undefined) {
+          return view.domAtPos(pos + 1).node;
+        }
+        return null;
       };
       var MediaChildren = jsx("figure", {
         ref: this.mediaSingleWrapperRef,
@@ -484,29 +460,32 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         ,
         className: MediaSingleNodeSelector,
         onClick: this.onMediaSingleClicked
-      }, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
-        commentBadgeRightOffset: commentBadgeOffset(),
+      }, fg('platform_editor_insert_media_plugin_phase_one') && jsx(MediaBadges, {
         mediaElement: currentMediaElement(),
         mediaHeight: height,
-        mediaWidth: width
-      }), commentsOnMedia && (insertMediaPluginPhaseOneFeatureFlag ? jsx(CommentBadgeWithRef, {
-        ref: this.commentBadgeRef,
-        commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit3 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit3 === void 0 || (_mediaOptions$getEdit3 = _mediaOptions$getEdit3.call(mediaOptions)) === null || _mediaOptions$getEdit3 === void 0 ? void 0 : _mediaOptions$getEdit3.commentsOnMediaBugFix,
+        mediaWidth: width,
+        extendedResizeOffset: fg('platform.editor.media.extended-resize-experience') && !isInsideTable
+      }, function (_ref6) {
+        var badgeSize = _ref6.badgeSize;
+        return jsx(React.Fragment, null, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
+          badgeSize: badgeSize
+        }), commentsOnMedia && jsx(CommentBadgeNextWrapper, {
+          view: view,
+          api: pluginInjectionApi,
+          mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
+          getPos: getPos,
+          isDrafting: isCurrentNodeDrafting,
+          badgeSize: badgeSize
+        }));
+      }), !fg('platform_editor_insert_media_plugin_phase_one') && commentsOnMedia && jsx(CommentBadge, {
+        commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit2 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit2 === void 0 || (_mediaOptions$getEdit2 = _mediaOptions$getEdit2.call(mediaOptions)) === null || _mediaOptions$getEdit2 === void 0 ? void 0 : _mediaOptions$getEdit2.commentsOnMediaBugFix,
         view: view,
         api: pluginInjectionApi,
         mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
         badgeOffsetRight: badgeOffsetRight,
         getPos: getPos,
         isDrafting: isCurrentNodeDrafting
-      }) : jsx(CommentBadge, {
-        commentsOnMediaBugFixEnabled: mediaOptions === null || mediaOptions === void 0 || (_mediaOptions$getEdit4 = mediaOptions.getEditorFeatureFlags) === null || _mediaOptions$getEdit4 === void 0 || (_mediaOptions$getEdit4 = _mediaOptions$getEdit4.call(mediaOptions)) === null || _mediaOptions$getEdit4 === void 0 ? void 0 : _mediaOptions$getEdit4.commentsOnMediaBugFix,
-        view: view,
-        api: pluginInjectionApi,
-        mediaNode: node === null || node === void 0 ? void 0 : node.firstChild,
-        badgeOffsetRight: badgeOffsetRight,
-        getPos: getPos,
-        isDrafting: isCurrentNodeDrafting
-      })), jsx("div", {
+      }), jsx("div", {
         ref: this.props.forwardRef
       }), shouldShowPlaceholder && jsx(CaptionPlaceholder, {
         ref: this.captionPlaceHolderRef,
@@ -533,19 +512,19 @@ _defineProperty(MediaSingleNode, "defaultProps", {
 });
 _defineProperty(MediaSingleNode, "displayName", 'MediaSingleNode');
 export { MediaSingleNode as default };
-var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref6) {
-  var pluginInjectionApi = _ref6.pluginInjectionApi,
-    contextIdentifierProvider = _ref6.contextIdentifierProvider,
-    node = _ref6.node,
-    getPos = _ref6.getPos,
-    mediaOptions = _ref6.mediaOptions,
-    view = _ref6.view,
-    fullWidthMode = _ref6.fullWidthMode,
-    selected = _ref6.selected,
-    eventDispatcher = _ref6.eventDispatcher,
-    dispatchAnalyticsEvent = _ref6.dispatchAnalyticsEvent,
-    forwardRef = _ref6.forwardRef,
-    editorAppearance = _ref6.editorAppearance;
+var MediaSingleNodeWrapper = function MediaSingleNodeWrapper(_ref7) {
+  var pluginInjectionApi = _ref7.pluginInjectionApi,
+    contextIdentifierProvider = _ref7.contextIdentifierProvider,
+    node = _ref7.node,
+    getPos = _ref7.getPos,
+    mediaOptions = _ref7.mediaOptions,
+    view = _ref7.view,
+    fullWidthMode = _ref7.fullWidthMode,
+    selected = _ref7.selected,
+    eventDispatcher = _ref7.eventDispatcher,
+    dispatchAnalyticsEvent = _ref7.dispatchAnalyticsEvent,
+    forwardRef = _ref7.forwardRef,
+    editorAppearance = _ref7.editorAppearance;
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width', 'media', 'annotation', 'editorDisabled', 'editorViewMode']),
     widthState = _useSharedPluginState.widthState,
     mediaState = _useSharedPluginState.mediaState,
@@ -581,18 +560,18 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   _inherits(MediaSingleNodeView, _ReactNodeView);
   var _super2 = _createSuper(MediaSingleNodeView);
   function MediaSingleNodeView() {
-    var _this3;
+    var _this2;
     _classCallCheck(this, MediaSingleNodeView);
     for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
       args[_key2] = arguments[_key2];
     }
-    _this3 = _super2.call.apply(_super2, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this3), "lastOffsetLeft", 0);
-    _defineProperty(_assertThisInitialized(_this3), "forceViewUpdate", false);
-    _defineProperty(_assertThisInitialized(_this3), "selectionType", null);
-    _defineProperty(_assertThisInitialized(_this3), "checkAndUpdateSelectionType", function () {
-      var getPos = _this3.getPos;
-      var selection = _this3.view.state.selection;
+    _this2 = _super2.call.apply(_super2, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this2), "lastOffsetLeft", 0);
+    _defineProperty(_assertThisInitialized(_this2), "forceViewUpdate", false);
+    _defineProperty(_assertThisInitialized(_this2), "selectionType", null);
+    _defineProperty(_assertThisInitialized(_this2), "checkAndUpdateSelectionType", function () {
+      var getPos = _this2.getPos;
+      var selection = _this2.view.state.selection;
 
       /**
        *  ED-19831
@@ -605,15 +584,15 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       } catch (e) {
         pos = undefined;
       }
-      var isNodeSelected = isNodeSelectedOrInRange(selection.$anchor.pos, selection.$head.pos, pos, _this3.node.nodeSize);
-      _this3.selectionType = isNodeSelected;
+      var isNodeSelected = isNodeSelectedOrInRange(selection.$anchor.pos, selection.$head.pos, pos, _this2.node.nodeSize);
+      _this2.selectionType = isNodeSelected;
       return isNodeSelected;
     });
-    _defineProperty(_assertThisInitialized(_this3), "isNodeSelected", function () {
-      _this3.checkAndUpdateSelectionType();
-      return _this3.selectionType !== null;
+    _defineProperty(_assertThisInitialized(_this2), "isNodeSelected", function () {
+      _this2.checkAndUpdateSelectionType();
+      return _this2.selectionType !== null;
     });
-    return _this3;
+    return _this2;
   }
   _createClass(MediaSingleNodeView, [{
     key: "createDomRef",
@@ -678,10 +657,10 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "update",
     value: function update(node, decorations, _innerDecorations, isValidUpdate) {
-      var _this4 = this;
+      var _this3 = this;
       if (!isValidUpdate) {
         isValidUpdate = function isValidUpdate(currentNode, newNode) {
-          return _this4.getNodeMediaId(currentNode) === _this4.getNodeMediaId(newNode);
+          return _this3.getNodeMediaId(currentNode) === _this3.getNodeMediaId(newNode);
         };
       }
       return _get(_getPrototypeOf(MediaSingleNodeView.prototype), "update", this).call(this, node, decorations, _innerDecorations, isValidUpdate);
@@ -689,7 +668,7 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render(props, forwardRef) {
-      var _this5 = this;
+      var _this4 = this;
       var _this$reactComponentP = this.reactComponentProps,
         eventDispatcher = _this$reactComponentP.eventDispatcher,
         fullWidthMode = _this$reactComponentP.fullWidthMode,
@@ -704,17 +683,17 @@ var MediaSingleNodeView = /*#__PURE__*/function (_ReactNodeView) {
       return jsx(WithProviders, {
         providers: ['contextIdentifierProvider'],
         providerFactory: providerFactory,
-        renderNode: function renderNode(_ref7) {
-          var contextIdentifierProvider = _ref7.contextIdentifierProvider;
+        renderNode: function renderNode(_ref8) {
+          var contextIdentifierProvider = _ref8.contextIdentifierProvider;
           return jsx(MediaSingleNodeWrapper, {
             pluginInjectionApi: pluginInjectionApi,
             contextIdentifierProvider: contextIdentifierProvider,
-            node: _this5.node,
+            node: _this4.node,
             getPos: getPos,
             mediaOptions: mediaOptions,
-            view: _this5.view,
+            view: _this4.view,
             fullWidthMode: fullWidthMode,
-            selected: _this5.isNodeSelected,
+            selected: _this4.isNodeSelected,
             eventDispatcher: eventDispatcher,
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             forwardRef: forwardRef,

package/dist/esm/ui/CommentBadge/index.js

@@ -1,9 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { forwardRef, useCallback, useMemo, useState } from 'react';
-import { injectIntl, useIntl } from 'react-intl-next';
+import React, { useCallback, useMemo, useState } from 'react';
+import { injectIntl } from 'react-intl-next';
 import { VIEW_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
+import { CommentBadge as CommentBadgeComponent, CommentBadgeNext } from '@atlaskit/editor-common/media-single';
 var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
   var api = _ref.api,
     mediaNode = _ref.mediaNode,
@@ -67,17 +67,19 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref) {
 };
 export var CommentBadge = injectIntl(CommentBadgeWrapper);
 
-// This is a copy of above component with adding forwardRef.
-// Clean this up when removing fg('platform_editor_insert_media_plugin_phase_one') flag.
-export var CommentBadgeWithRef = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+/**
+ * Remove CommentBadgeWrapper component above
+ * and rename CommentBadgeNextWrapper to CommentBadgeWrapper
+ * when clean up platform_editor_insert_media_plugin_phase_one feature flag
+ */
+
+export var CommentBadgeNextWrapper = function CommentBadgeNextWrapper(_ref2) {
   var api = _ref2.api,
     mediaNode = _ref2.mediaNode,
     view = _ref2.view,
     getPos = _ref2.getPos,
     isDrafting = _ref2.isDrafting,
-    badgeOffsetRight = _ref2.badgeOffsetRight,
-    commentsOnMediaBugFixEnabled = _ref2.commentsOnMediaBugFixEnabled;
-  var intl = useIntl();
+    badgeSize = _ref2.badgeSize;
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     entered = _useState4[0],
@@ -113,21 +115,16 @@ export var CommentBadgeWithRef = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     return null;
   }
   var mediaSingleElement = view.domAtPos(pos + 1).node;
-  return /*#__PURE__*/React.createElement(CommentBadgeComponent, {
-    ref: ref,
-    commentsOnMediaBugFixEnabled: commentsOnMediaBugFixEnabled,
-    badgeOffsetRight: badgeOffsetRight,
-    width: mediaNode.attrs.width,
-    height: mediaNode.attrs.height,
+  return /*#__PURE__*/React.createElement(CommentBadgeNext, {
     onClick: onClick,
     mediaSingleElement: mediaSingleElement,
-    intl: intl,
     status: entered ? 'entered' : status,
     onMouseEnter: function onMouseEnter() {
       return setEntered(true);
     },
     onMouseLeave: function onMouseLeave() {
       return setEntered(false);
-    }
+    },
+    badgeSize: badgeSize
   });
-});
+};

package/dist/types/nodeviews/mediaSingle.d.ts

@@ -1,6 +1,7 @@
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag
  */
 import type { MouseEvent } from 'react';
 import React, { Component } from 'react';
@@ -34,7 +35,6 @@ export default class MediaSingleNode extends Component<MediaSingleNodeProps, Med
     state: MediaSingleNodeState;
     mediaSingleWrapperRef: React.RefObject<HTMLDivElement>;
     captionPlaceHolderRef: React.RefObject<HTMLSpanElement>;
-    commentBadgeRef: React.RefObject<HTMLDivElement>;
     createOrUpdateMediaNodeUpdater: (props: MediaSingleNodeProps) => void;
     UNSAFE_componentWillReceiveProps(nextProps: MediaSingleNodeProps): void;
     setViewMediaClientConfig: (props: MediaSingleNodeProps) => Promise<void>;

package/dist/types/ui/CommentBadge/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { IntlShape } from 'react-intl-next';
+import type { AnnotationMarkDefinition } from '@atlaskit/adf-schema';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -18,5 +19,20 @@ type CommentBadgeProps = {
 export declare const CommentBadge: React.FC<import("react-intl-next").WithIntlProps<CommentBadgeProps>> & {
     WrappedComponent: React.ComponentType<CommentBadgeProps>;
 };
-export declare const CommentBadgeWithRef: React.ForwardRefExoticComponent<Omit<CommentBadgeProps, "intl"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Remove CommentBadgeWrapper component above
+ * and rename CommentBadgeNextWrapper to CommentBadgeWrapper
+ * when clean up platform_editor_insert_media_plugin_phase_one feature flag
+ */
+type CommentBadgeNextWrapperProps = {
+    mediaSingleElement?: HTMLElement | null;
+    marks?: AnnotationMarkDefinition[];
+    isDrafting?: boolean;
+    api: ExtractInjectionAPI<MediaNextEditorPluginType>;
+    mediaNode: PMNode | null;
+    view: EditorView;
+    getPos: getPosHandler;
+    badgeSize: 'small' | 'medium';
+};
+export declare const CommentBadgeNextWrapper: ({ api, mediaNode, view, getPos, isDrafting, badgeSize, }: CommentBadgeNextWrapperProps) => JSX.Element | null;
 export {};

package/dist/types-ts4.5/nodeviews/mediaSingle.d.ts

@@ -1,6 +1,7 @@
 /**
  * @jsxRuntime classic
  * @jsx jsx
+ * @jsxFrag
  */
 import type { MouseEvent } from 'react';
 import React, { Component } from 'react';
@@ -34,7 +35,6 @@ export default class MediaSingleNode extends Component<MediaSingleNodeProps, Med
     state: MediaSingleNodeState;
     mediaSingleWrapperRef: React.RefObject<HTMLDivElement>;
     captionPlaceHolderRef: React.RefObject<HTMLSpanElement>;
-    commentBadgeRef: React.RefObject<HTMLDivElement>;
     createOrUpdateMediaNodeUpdater: (props: MediaSingleNodeProps) => void;
     UNSAFE_componentWillReceiveProps(nextProps: MediaSingleNodeProps): void;
     setViewMediaClientConfig: (props: MediaSingleNodeProps) => Promise<void>;

package/dist/types-ts4.5/ui/CommentBadge/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { IntlShape } from 'react-intl-next';
+import type { AnnotationMarkDefinition } from '@atlaskit/adf-schema';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -18,5 +19,20 @@ type CommentBadgeProps = {
 export declare const CommentBadge: React.FC<import("react-intl-next").WithIntlProps<CommentBadgeProps>> & {
     WrappedComponent: React.ComponentType<CommentBadgeProps>;
 };
-export declare const CommentBadgeWithRef: React.ForwardRefExoticComponent<Omit<CommentBadgeProps, "intl"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Remove CommentBadgeWrapper component above
+ * and rename CommentBadgeNextWrapper to CommentBadgeWrapper
+ * when clean up platform_editor_insert_media_plugin_phase_one feature flag
+ */
+type CommentBadgeNextWrapperProps = {
+    mediaSingleElement?: HTMLElement | null;
+    marks?: AnnotationMarkDefinition[];
+    isDrafting?: boolean;
+    api: ExtractInjectionAPI<MediaNextEditorPluginType>;
+    mediaNode: PMNode | null;
+    view: EditorView;
+    getPos: getPosHandler;
+    badgeSize: 'small' | 'medium';
+};
+export declare const CommentBadgeNextWrapper: ({ api, mediaNode, view, getPos, isDrafting, badgeSize, }: CommentBadgeNextWrapperProps) => JSX.Element | null;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "1.29.9",
+	"version": "1.30.0",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -9,9 +9,8 @@
 	},
 	"atlassian": {
 		"team": "Editor: Media Experience Porygon",
-		"releaseModel": "continuous",
 		"singleton": true,
-		"runReact18": false
+		"runReact18": true
 	},
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"main": "dist/cjs/index.js",
@@ -34,17 +33,17 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.9.0",
-		"@atlaskit/analytics-namespaced-context": "^6.11.0",
+		"@atlaskit/analytics-namespaced-context": "^6.12.0",
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/button": "^20.1.0",
-		"@atlaskit/editor-common": "^88.5.0",
+		"@atlaskit/editor-common": "^88.12.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
-		"@atlaskit/editor-plugin-annotation": "1.19.3",
+		"@atlaskit/editor-plugin-annotation": "1.19.4",
 		"@atlaskit/editor-plugin-decorations": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
-		"@atlaskit/editor-plugin-floating-toolbar": "^1.11.0",
+		"@atlaskit/editor-plugin-floating-toolbar": "^1.12.0",
 		"@atlaskit/editor-plugin-focus": "^1.3.0",
 		"@atlaskit/editor-plugin-grid": "^1.2.0",
 		"@atlaskit/editor-plugin-guideline": "^1.2.0",
@@ -54,7 +53,7 @@
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/form": "^10.5.0",
-		"@atlaskit/icon": "^22.15.0",
+		"@atlaskit/icon": "^22.16.0",
 		"@atlaskit/media-card": "^78.2.0",
 		"@atlaskit/media-client": "^27.6.0",
 		"@atlaskit/media-client-react": "^2.2.0",
@@ -64,7 +63,7 @@
 		"@atlaskit/media-ui": "^25.11.0",
 		"@atlaskit/media-viewer": "^48.7.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^12.0.0",
+		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/textfield": "^6.5.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tokens": "^1.59.0",
@@ -83,8 +82,8 @@
 	},
 	"peerDependencies": {
 		"@atlaskit/media-core": "^34.3.0",
-		"react": "^16.8.0",
-		"react-dom": "^16.8.0",
+		"react": "^16.8.0 || ^17.0.0 || ~18.2.0",
+		"react-dom": "^16.8.0 || ^17.0.0 || ~18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"techstack": {