@atlaskit/renderer 109.47.0 → 109.48.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 109.48.0
+
+### Minor Changes
+
+- [#130065](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130065)
+  [`e71a357ea40dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e71a357ea40dd) -
+  [ux] [ED-24323] Add external image badge for externally hosted images
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 109.47.0
 
 ### Minor Changes

package/dist/cjs/react/nodes/media/index.js

@@ -36,7 +36,8 @@ var _reactIntlNext = require("react-intl-next");
 var _hooks = require("../../../ui/annotations/hooks");
 var _types = require("@atlaskit/editor-common/types");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _excluded = ["marks", "mediaSingleElement", "isDrafting"];
+var _excluded = ["marks", "mediaSingleElement", "isDrafting"],
+  _excluded2 = ["marks", "mediaSingleElement", "isDrafting"];
 var _templateObject, _templateObject2;
 /**
  * @jsxRuntime classic
@@ -163,7 +164,7 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
         var parentNode = mutation.target.parentNode;
         if (mutation.attributeName === 'data-has-focus') {
           var isMediaCaption = parentNode === null || parentNode === void 0 ? void 0 : parentNode.closest('[data-media-caption="true"]');
-          var elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!(0, _platformFeatureFlags.getBooleanFF)('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
+          var elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!(0, _platformFeatureFlags.fg)('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
           elementHasFocus ? setStatus('active') : setStatus('default');
         }
       });
@@ -205,6 +206,85 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
     onClick: onClick
   }, rest));
 };
+
+// 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 CommentBadgeWrapperWithRef = /*#__PURE__*/_react.default.forwardRef(function (_ref6, ref) {
+  var _marks$map2;
+  var marks = _ref6.marks,
+    mediaSingleElement = _ref6.mediaSingleElement,
+    _ref6$isDrafting = _ref6.isDrafting,
+    isDrafting = _ref6$isDrafting === void 0 ? false : _ref6$isDrafting,
+    rest = (0, _objectWithoutProperties2.default)(_ref6, _excluded2);
+  var intl = (0, _reactIntlNext.useIntl)();
+  var _useState5 = (0, _react.useState)('default'),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    status = _useState6[0],
+    setStatus = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    entered = _useState8[0],
+    setEntered = _useState8[1];
+  var updateSubscriber = (0, _hooks.useInlineCommentSubscriberContext)();
+  var activeParentIds = (0, _hooks.useInlineCommentsFilter)({
+    annotationIds: (_marks$map2 = marks === null || marks === void 0 ? void 0 : marks.map(function (mark) {
+      return mark.attrs.id;
+    })) !== null && _marks$map2 !== void 0 ? _marks$map2 : [''],
+    filter: {
+      state: _adfSchema.AnnotationMarkStates.ACTIVE
+    }
+  });
+  (0, _react.useEffect)(function () {
+    var observer = new MutationObserver(function (mutationList) {
+      mutationList.forEach(function (mutation) {
+        var parentNode = mutation.target.parentNode;
+        if (mutation.attributeName === 'data-has-focus') {
+          var isMediaCaption = parentNode === null || parentNode === void 0 ? void 0 : parentNode.closest('[data-media-caption="true"]');
+          var elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!(0, _platformFeatureFlags.fg)('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
+          elementHasFocus ? setStatus('active') : setStatus('default');
+        }
+      });
+    });
+    if (mediaSingleElement) {
+      observer.observe(mediaSingleElement, {
+        attributes: true,
+        subtree: true,
+        attributeFilter: ['data-has-focus']
+      });
+    }
+    return function () {
+      observer.disconnect();
+    };
+  }, [mediaSingleElement, setStatus]);
+  if (!isDrafting && !activeParentIds.length) {
+    return null;
+  }
+  var onClick = function onClick(e) {
+    e.preventDefault();
+    if (updateSubscriber) {
+      updateSubscriber.emit(_types.AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
+        annotationIds: activeParentIds,
+        eventTarget: e.target,
+        // use mediaSingle here to align with annotation viewed event dispatched in editor
+        eventTargetType: 'mediaSingle',
+        viewMethod: _analytics.VIEW_METHOD.BADGE
+      });
+    }
+  };
+  return (0, _react2.jsx)(_mediaSingle.CommentBadge, (0, _extends2.default)({
+    ref: ref,
+    intl: intl,
+    onMouseEnter: function onMouseEnter() {
+      return setEntered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setEntered(false);
+    },
+    status: entered ? 'entered' : status,
+    onClick: onClick,
+    mediaSingleElement: mediaSingleElement
+  }, rest));
+});
 var Media = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Media, _PureComponent);
   var _super = _createSuper(Media);
@@ -212,6 +292,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
     var _this;
     (0, _classCallCheck2.default)(this, Media);
     _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "commentBadgeRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCard", function () {
       var providers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var contextIdentifierProvider = providers.contextIdentifierProvider;
@@ -236,6 +317,14 @@ var Media = /*#__PURE__*/function (_PureComponent) {
       var isInPageInclude = mediaSingleElement === null || mediaSingleElement === void 0 ? void 0 : mediaSingleElement.closest('[data-node-type="include"]');
       var isIncludeExcerpt = !!(mediaSingleElement !== null && mediaSingleElement !== void 0 && mediaSingleElement.closest('.ak-excerpt-include'));
       var showCommentBadge = !!annotationMarks && (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia) && (!(featureFlags !== null && featureFlags !== void 0 && featureFlags.commentsOnMediaIncludePage) || !isInPageInclude) && (!(featureFlags !== null && featureFlags !== void 0 && featureFlags.commentsOnMediaInsertExcerpt) || !isIncludeExcerpt);
+      var insertMediaPluginPhaseOneFlag = (0, _platformFeatureFlags.fg)('platform_editor_insert_media_plugin_phase_one');
+      var shouldShowExternalMediaBadge = _this.props.type === 'external' && insertMediaPluginPhaseOneFlag;
+      var commentBadgeOffset = function commentBadgeOffset() {
+        if (_this.commentBadgeRef.current) {
+          return _this.commentBadgeRef.current.offsetWidth + 2;
+        }
+        return 0;
+      };
       return (0, _react2.jsx)(MediaLink, {
         mark: linkMark,
         onClick: _this.handleMediaLinkClickFn
@@ -247,13 +336,25 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         data: (0, _defineProperty2.default)({}, _analyticsNamespacedContext.MEDIA_CONTEXT, {
           border: !!borderMark
         })
-      }, showCommentBadge && (0, _react2.jsx)(CommentBadgeWrapper, {
+      }, shouldShowExternalMediaBadge && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
+        commentBadgeRightOffset: commentBadgeOffset(),
+        mediaElement: mediaSingleElement,
+        mediaWidth: width,
+        mediaHeight: height
+      }), showCommentBadge && (insertMediaPluginPhaseOneFlag ? (0, _react2.jsx)(CommentBadgeWrapperWithRef, {
+        ref: _this.commentBadgeRef,
         marks: annotationMarks,
         mediaSingleElement: mediaSingleElement,
         width: width,
         height: height,
         isDrafting: isDrafting
-      }), (0, _react2.jsx)(_MediaCard.MediaCard, (0, _extends2.default)({
+      }) : (0, _react2.jsx)(CommentBadgeWrapper, {
+        marks: annotationMarks,
+        mediaSingleElement: mediaSingleElement,
+        width: width,
+        height: height,
+        isDrafting: isDrafting
+      })), (0, _react2.jsx)(_MediaCard.MediaCard, (0, _extends2.default)({
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
         shouldOpenMediaViewer: shouldOpenMediaViewer,
@@ -314,14 +415,14 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
   var isCommentsOnMediaBugFixEnabled = !!(providers !== null && providers !== void 0 && providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   var dataAttributes = props.dataAttributes;
   var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
-  var _useState5 = (0, _react.useState)(),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    position = _useState6[0],
-    setPosition = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    shouldApplyDraftAnnotation = _useState8[0],
-    setShouldApplyDraftAnnotation = _useState8[1];
+  var _useState9 = (0, _react.useState)(),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    position = _useState10[0],
+    setPosition = _useState10[1];
+  var _useState11 = (0, _react.useState)(false),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    shouldApplyDraftAnnotation = _useState12[0],
+    setShouldApplyDraftAnnotation = _useState12[1];
   (0, _react.useEffect)(function () {
     var _draftPosition$from;
     if (pos === undefined) {

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

@@ -60,7 +60,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.47.0";
+var packageVersion = "109.48.0";
 var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);

package/dist/es2019/react/nodes/media/index.js

@@ -20,11 +20,11 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, VIEW_METHOD } fr
 import { MODE, PLATFORM } from '../../../analytics/events';
 import AnnotationComponent from '../../marks/annotation';
 import { AnnotationsDraftContext, ProvidersContext } from '../../../ui/annotations/context';
-import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
-import { injectIntl } from 'react-intl-next';
+import { CommentBadge as CommentBadgeComponent, ExternalImageBadge } from '@atlaskit/editor-common/media-single';
+import { useIntl, injectIntl } from 'react-intl-next';
 import { useInlineCommentSubscriberContext, useInlineCommentsFilter } from '../../../ui/annotations/hooks';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 export const linkStyle = css`
 	position: absolute;
@@ -148,7 +148,7 @@ const CommentBadgeWrapper = ({
         const parentNode = mutation.target.parentNode;
         if (mutation.attributeName === 'data-has-focus') {
           const isMediaCaption = parentNode === null || parentNode === void 0 ? void 0 : parentNode.closest('[data-media-caption="true"]');
-          const elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!getBooleanFF('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
+          const elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!fg('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
           elementHasFocus ? setStatus('active') : setStatus('default');
         }
       });
@@ -186,9 +186,77 @@ const CommentBadgeWrapper = ({
     onClick: onClick
   }, rest));
 };
+
+// This is a copy of above component with adding forwardRef.
+// Clean this up when removing fg('platform_editor_insert_media_plugin_phase_one') flag.
+const CommentBadgeWrapperWithRef = /*#__PURE__*/React.forwardRef(({
+  marks,
+  mediaSingleElement,
+  isDrafting = false,
+  ...rest
+}, ref) => {
+  var _marks$map2;
+  const intl = useIntl();
+  const [status, setStatus] = useState('default');
+  const [entered, setEntered] = useState(false);
+  const updateSubscriber = useInlineCommentSubscriberContext();
+  const activeParentIds = useInlineCommentsFilter({
+    annotationIds: (_marks$map2 = marks === null || marks === void 0 ? void 0 : marks.map(mark => mark.attrs.id)) !== null && _marks$map2 !== void 0 ? _marks$map2 : [''],
+    filter: {
+      state: AnnotationMarkStates.ACTIVE
+    }
+  });
+  useEffect(() => {
+    const observer = new MutationObserver(mutationList => {
+      mutationList.forEach(mutation => {
+        const parentNode = mutation.target.parentNode;
+        if (mutation.attributeName === 'data-has-focus') {
+          const isMediaCaption = parentNode === null || parentNode === void 0 ? void 0 : parentNode.closest('[data-media-caption="true"]');
+          const elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!fg('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
+          elementHasFocus ? setStatus('active') : setStatus('default');
+        }
+      });
+    });
+    if (mediaSingleElement) {
+      observer.observe(mediaSingleElement, {
+        attributes: true,
+        subtree: true,
+        attributeFilter: ['data-has-focus']
+      });
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [mediaSingleElement, setStatus]);
+  if (!isDrafting && !activeParentIds.length) {
+    return null;
+  }
+  const onClick = e => {
+    e.preventDefault();
+    if (updateSubscriber) {
+      updateSubscriber.emit(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
+        annotationIds: activeParentIds,
+        eventTarget: e.target,
+        // use mediaSingle here to align with annotation viewed event dispatched in editor
+        eventTargetType: 'mediaSingle',
+        viewMethod: VIEW_METHOD.BADGE
+      });
+    }
+  };
+  return jsx(CommentBadgeComponent, _extends({
+    ref: ref,
+    intl: intl,
+    onMouseEnter: () => setEntered(true),
+    onMouseLeave: () => setEntered(false),
+    status: entered ? 'entered' : status,
+    onClick: onClick,
+    mediaSingleElement: mediaSingleElement
+  }, rest));
+});
 class Media extends PureComponent {
   constructor(props) {
     super(props);
+    _defineProperty(this, "commentBadgeRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "renderCard", (providers = {}) => {
       const {
         contextIdentifierProvider
@@ -214,6 +282,14 @@ class Media extends PureComponent {
       const isInPageInclude = mediaSingleElement === null || mediaSingleElement === void 0 ? void 0 : mediaSingleElement.closest('[data-node-type="include"]');
       const isIncludeExcerpt = !!(mediaSingleElement !== null && mediaSingleElement !== void 0 && mediaSingleElement.closest('.ak-excerpt-include'));
       const showCommentBadge = !!annotationMarks && (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia) && (!(featureFlags !== null && featureFlags !== void 0 && featureFlags.commentsOnMediaIncludePage) || !isInPageInclude) && (!(featureFlags !== null && featureFlags !== void 0 && featureFlags.commentsOnMediaInsertExcerpt) || !isIncludeExcerpt);
+      const insertMediaPluginPhaseOneFlag = fg('platform_editor_insert_media_plugin_phase_one');
+      const shouldShowExternalMediaBadge = this.props.type === 'external' && insertMediaPluginPhaseOneFlag;
+      const commentBadgeOffset = () => {
+        if (this.commentBadgeRef.current) {
+          return this.commentBadgeRef.current.offsetWidth + 2;
+        }
+        return 0;
+      };
       return jsx(MediaLink, {
         mark: linkMark,
         onClick: this.handleMediaLinkClickFn
@@ -227,13 +303,25 @@ class Media extends PureComponent {
             border: !!borderMark
           }
         }
-      }, showCommentBadge && jsx(CommentBadgeWrapper, {
+      }, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
+        commentBadgeRightOffset: commentBadgeOffset(),
+        mediaElement: mediaSingleElement,
+        mediaWidth: width,
+        mediaHeight: height
+      }), showCommentBadge && (insertMediaPluginPhaseOneFlag ? jsx(CommentBadgeWrapperWithRef, {
+        ref: this.commentBadgeRef,
+        marks: annotationMarks,
+        mediaSingleElement: mediaSingleElement,
+        width: width,
+        height: height,
+        isDrafting: isDrafting
+      }) : jsx(CommentBadgeWrapper, {
         marks: annotationMarks,
         mediaSingleElement: mediaSingleElement,
         width: width,
         height: height,
         isDrafting: isDrafting
-      }), jsx(MediaCard, _extends({
+      })), jsx(MediaCard, _extends({
         contextIdentifierProvider: contextIdentifierProvider
       }, this.props, {
         shouldOpenMediaViewer: shouldOpenMediaViewer,

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

@@ -42,7 +42,7 @@ import { nodeToReact } from '../../react/nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.47.0";
+const packageVersion = "109.48.0";
 export const defaultNodeComponents = nodeToReact;
 export class Renderer extends PureComponent {
   constructor(props) {

package/dist/esm/react/nodes/media/index.js

@@ -9,7 +9,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["marks", "mediaSingleElement", "isDrafting"];
+var _excluded = ["marks", "mediaSingleElement", "isDrafting"],
+  _excluded2 = ["marks", "mediaSingleElement", "isDrafting"];
 var _templateObject, _templateObject2;
 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; }
@@ -35,11 +36,11 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, VIEW_METHOD } fr
 import { MODE, PLATFORM } from '../../../analytics/events';
 import AnnotationComponent from '../../marks/annotation';
 import { AnnotationsDraftContext, ProvidersContext } from '../../../ui/annotations/context';
-import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
-import { injectIntl } from 'react-intl-next';
+import { CommentBadge as CommentBadgeComponent, ExternalImageBadge } from '@atlaskit/editor-common/media-single';
+import { useIntl, injectIntl } from 'react-intl-next';
 import { useInlineCommentSubscriberContext, useInlineCommentsFilter } from '../../../ui/annotations/hooks';
 import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 export var linkStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tposition: absolute;\n\tbackground: transparent;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tcursor: pointer;\n\twidth: 100% !important;\n\theight: 100% !important;\n"])));
 
@@ -154,7 +155,7 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
         var parentNode = mutation.target.parentNode;
         if (mutation.attributeName === 'data-has-focus') {
           var isMediaCaption = parentNode === null || parentNode === void 0 ? void 0 : parentNode.closest('[data-media-caption="true"]');
-          var elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!getBooleanFF('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
+          var elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!fg('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
           elementHasFocus ? setStatus('active') : setStatus('default');
         }
       });
@@ -196,6 +197,85 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
     onClick: onClick
   }, rest));
 };
+
+// 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 CommentBadgeWrapperWithRef = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
+  var _marks$map2;
+  var marks = _ref6.marks,
+    mediaSingleElement = _ref6.mediaSingleElement,
+    _ref6$isDrafting = _ref6.isDrafting,
+    isDrafting = _ref6$isDrafting === void 0 ? false : _ref6$isDrafting,
+    rest = _objectWithoutProperties(_ref6, _excluded2);
+  var intl = useIntl();
+  var _useState5 = useState('default'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    status = _useState6[0],
+    setStatus = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    entered = _useState8[0],
+    setEntered = _useState8[1];
+  var updateSubscriber = useInlineCommentSubscriberContext();
+  var activeParentIds = useInlineCommentsFilter({
+    annotationIds: (_marks$map2 = marks === null || marks === void 0 ? void 0 : marks.map(function (mark) {
+      return mark.attrs.id;
+    })) !== null && _marks$map2 !== void 0 ? _marks$map2 : [''],
+    filter: {
+      state: AnnotationMarkStates.ACTIVE
+    }
+  });
+  useEffect(function () {
+    var observer = new MutationObserver(function (mutationList) {
+      mutationList.forEach(function (mutation) {
+        var parentNode = mutation.target.parentNode;
+        if (mutation.attributeName === 'data-has-focus') {
+          var isMediaCaption = parentNode === null || parentNode === void 0 ? void 0 : parentNode.closest('[data-media-caption="true"]');
+          var elementHasFocus = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.querySelector('[data-has-focus="true"]')) && (!fg('platform.comments-on-media.bug.incorrect-badge-highlight') || !isMediaCaption);
+          elementHasFocus ? setStatus('active') : setStatus('default');
+        }
+      });
+    });
+    if (mediaSingleElement) {
+      observer.observe(mediaSingleElement, {
+        attributes: true,
+        subtree: true,
+        attributeFilter: ['data-has-focus']
+      });
+    }
+    return function () {
+      observer.disconnect();
+    };
+  }, [mediaSingleElement, setStatus]);
+  if (!isDrafting && !activeParentIds.length) {
+    return null;
+  }
+  var onClick = function onClick(e) {
+    e.preventDefault();
+    if (updateSubscriber) {
+      updateSubscriber.emit(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
+        annotationIds: activeParentIds,
+        eventTarget: e.target,
+        // use mediaSingle here to align with annotation viewed event dispatched in editor
+        eventTargetType: 'mediaSingle',
+        viewMethod: VIEW_METHOD.BADGE
+      });
+    }
+  };
+  return jsx(CommentBadgeComponent, _extends({
+    ref: ref,
+    intl: intl,
+    onMouseEnter: function onMouseEnter() {
+      return setEntered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setEntered(false);
+    },
+    status: entered ? 'entered' : status,
+    onClick: onClick,
+    mediaSingleElement: mediaSingleElement
+  }, rest));
+});
 var Media = /*#__PURE__*/function (_PureComponent) {
   _inherits(Media, _PureComponent);
   var _super = _createSuper(Media);
@@ -203,6 +283,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
     var _this;
     _classCallCheck(this, Media);
     _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "commentBadgeRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "renderCard", function () {
       var providers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var contextIdentifierProvider = providers.contextIdentifierProvider;
@@ -227,6 +308,14 @@ var Media = /*#__PURE__*/function (_PureComponent) {
       var isInPageInclude = mediaSingleElement === null || mediaSingleElement === void 0 ? void 0 : mediaSingleElement.closest('[data-node-type="include"]');
       var isIncludeExcerpt = !!(mediaSingleElement !== null && mediaSingleElement !== void 0 && mediaSingleElement.closest('.ak-excerpt-include'));
       var showCommentBadge = !!annotationMarks && (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia) && (!(featureFlags !== null && featureFlags !== void 0 && featureFlags.commentsOnMediaIncludePage) || !isInPageInclude) && (!(featureFlags !== null && featureFlags !== void 0 && featureFlags.commentsOnMediaInsertExcerpt) || !isIncludeExcerpt);
+      var insertMediaPluginPhaseOneFlag = fg('platform_editor_insert_media_plugin_phase_one');
+      var shouldShowExternalMediaBadge = _this.props.type === 'external' && insertMediaPluginPhaseOneFlag;
+      var commentBadgeOffset = function commentBadgeOffset() {
+        if (_this.commentBadgeRef.current) {
+          return _this.commentBadgeRef.current.offsetWidth + 2;
+        }
+        return 0;
+      };
       return jsx(MediaLink, {
         mark: linkMark,
         onClick: _this.handleMediaLinkClickFn
@@ -238,13 +327,25 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         data: _defineProperty({}, MEDIA_CONTEXT, {
           border: !!borderMark
         })
-      }, showCommentBadge && jsx(CommentBadgeWrapper, {
+      }, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {
+        commentBadgeRightOffset: commentBadgeOffset(),
+        mediaElement: mediaSingleElement,
+        mediaWidth: width,
+        mediaHeight: height
+      }), showCommentBadge && (insertMediaPluginPhaseOneFlag ? jsx(CommentBadgeWrapperWithRef, {
+        ref: _this.commentBadgeRef,
         marks: annotationMarks,
         mediaSingleElement: mediaSingleElement,
         width: width,
         height: height,
         isDrafting: isDrafting
-      }), jsx(MediaCard, _extends({
+      }) : jsx(CommentBadgeWrapper, {
+        marks: annotationMarks,
+        mediaSingleElement: mediaSingleElement,
+        width: width,
+        height: height,
+        isDrafting: isDrafting
+      })), jsx(MediaCard, _extends({
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
         shouldOpenMediaViewer: shouldOpenMediaViewer,
@@ -305,14 +406,14 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
   var isCommentsOnMediaBugFixEnabled = !!(providers !== null && providers !== void 0 && providers.inlineComment.isCommentsOnMediaBugFixEnabled);
   var dataAttributes = props.dataAttributes;
   var pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
-  var _useState5 = useState(),
-    _useState6 = _slicedToArray(_useState5, 2),
-    position = _useState6[0],
-    setPosition = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    shouldApplyDraftAnnotation = _useState8[0],
-    setShouldApplyDraftAnnotation = _useState8[1];
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    position = _useState10[0],
+    setPosition = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    shouldApplyDraftAnnotation = _useState12[0],
+    setShouldApplyDraftAnnotation = _useState12[1];
   useEffect(function () {
     var _draftPosition$from;
     if (pos === undefined) {

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

@@ -52,7 +52,7 @@ import { nodeToReact } from '../../react/nodes';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.47.0";
+var packageVersion = "109.48.0";
 export var defaultNodeComponents = nodeToReact;
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "109.47.0",
+	"version": "109.48.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/button": "^20.0.0",
 		"@atlaskit/code": "^15.5.0",
-		"@atlaskit/editor-common": "^87.11.0",
+		"@atlaskit/editor-common": "^87.12.0",
 		"@atlaskit/editor-json-transformer": "^8.18.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
@@ -42,8 +42,8 @@
 		"@atlaskit/link-datasource": "^2.11.0",
 		"@atlaskit/media-card": "^78.0.0",
 		"@atlaskit/media-client": "^27.3.0",
-		"@atlaskit/media-client-react": "^2.0.0",
-		"@atlaskit/media-common": "^11.3.0",
+		"@atlaskit/media-client-react": "^2.1.0",
+		"@atlaskit/media-common": "^11.4.0",
 		"@atlaskit/media-filmstrip": "^47.2.0",
 		"@atlaskit/media-ui": "^25.11.0",
 		"@atlaskit/media-viewer": "^48.7.0",
@@ -64,7 +64,7 @@
 	},
 	"peerDependencies": {
 		"@atlaskit/link-provider": "^1.14.0",
-		"@atlaskit/media-core": "^34.2.0",
+		"@atlaskit/media-core": "^34.3.0",
 		"react": "^16.8.0",
 		"react-dom": "^16.8.0"
 	},
@@ -77,7 +77,7 @@
 		"@atlaskit/link-provider": "^1.14.0",
 		"@atlaskit/link-test-helpers": "^7.4.0",
 		"@atlaskit/linking-common": "^5.11.0",
-		"@atlaskit/media-core": "^34.2.0",
+		"@atlaskit/media-core": "^34.3.0",
 		"@atlaskit/media-integration-test-helpers": "^3.1.0",
 		"@atlaskit/media-test-helpers": "^34.0.0",
 		"@atlaskit/mention": "^23.2.0",
@@ -152,6 +152,9 @@
 		"platform.comments-on-media.bug.incorrect-badge-highlight": {
 			"type": "boolean"
 		},
+		"platform_editor_insert_media_plugin_phase_one": {
+			"type": "boolean"
+		},
 		"platform-fix-table-ssr-resizing": {
 			"type": "boolean"
 		},