@atlaskit/renderer 109.28.1 → 109.29.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/renderer
 
+## 109.29.0
+
+### Minor Changes
+
+-   [#99230](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99230)
+    [`8b5008e65c2c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8b5008e65c2c) -
+    [ux] Feature Flag with fix for include page on media
+
+## 109.28.2
+
+### Patch Changes
+
+-   [#100662](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100662)
+    [`3d61cd8f2afe`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3d61cd8f2afe) -
+    [ED-23355] Update annotation viewed event to with attributes nodeType and method to capture
+    usage for comments on media
+-   Updated dependencies
+
 ## 109.28.1
 
 ### Patch Changes

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

@@ -176,7 +176,10 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
     if (updateSubscriber) {
       updateSubscriber.emit(_types.AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
         annotationIds: activeParentIds,
-        eventTarget: e.target
+        eventTarget: e.target,
+        // use mediaSingle here to align with annotation viewed event dispatched in editor
+        eventTargetType: 'mediaSingle',
+        viewMethod: _analytics.VIEW_METHOD.BADGE
       });
     }
   };
@@ -212,13 +215,15 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         height = _this$props.height,
         mediaSingleElement = _this$props.mediaSingleElement,
         _this$props$isDraftin = _this$props.isDrafting,
-        isDrafting = _this$props$isDraftin === void 0 ? false : _this$props$isDraftin;
+        isDrafting = _this$props$isDraftin === void 0 ? false : _this$props$isDraftin,
+        isInPageInclude = _this$props.isInPageInclude;
       var annotationMarks = _this.props.isAnnotationMark ? _this.props.marks.filter(_this.props.isAnnotationMark) : undefined;
       var borderMark = _this.props.marks.find(_this.props.isBorderMark);
       var linkMark = _this.props.marks.find(_this.props.isLinkMark);
       var linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       var eventHandlers = linkHref ? undefined : _this.props.eventHandlers;
       var shouldOpenMediaViewer = !linkHref && allowMediaViewer;
+      var showCommentBadge = !!annotationMarks && (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia) && (!(featureFlags !== null && featureFlags !== void 0 && featureFlags.commentsOnMediaIncludePage) || !isInPageInclude);
       return (0, _react2.jsx)(MediaLink, {
         mark: linkMark,
         onClick: _this.handleMediaLinkClickFn
@@ -230,7 +235,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         data: (0, _defineProperty2.default)({}, _analyticsNamespacedContext.MEDIA_CONTEXT, {
           border: !!borderMark
         })
-      }, !!annotationMarks && (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia) && (0, _react2.jsx)(CommentBadgeWrapper, {
+      }, showCommentBadge && (0, _react2.jsx)(CommentBadgeWrapper, {
         marks: annotationMarks,
         mediaElement: mediaSingleElement,
         width: width,
@@ -297,6 +302,11 @@ 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 parentElementClosest;
+  if (typeof document !== "undefined") {
+    var elementAtPos = pos && document.querySelector("[data-renderer-start-pos=\"".concat(pos, "\"]"));
+    parentElementClosest = elementAtPos instanceof Element ? elementAtPos.closest('[data-node-type="include"]') : null;
+  }
   var _useState5 = (0, _react.useState)(),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     position = _useState6[0],
@@ -318,7 +328,7 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
       setShouldApplyDraftAnnotation(false);
       setPosition(undefined);
     }
-  }, [draftPosition, pos, shouldApplyDraftAnnotation, isCommentsOnMediaBugFixEnabled]);
+  }, [draftPosition, parentElementClosest, pos, shouldApplyDraftAnnotation, isCommentsOnMediaBugFixEnabled]);
   var applyDraftAnnotation = props.allowAnnotationsDraftMode && shouldApplyDraftAnnotation && position !== undefined;
   var dataAttributesWithDraftAnnotation = (0, _react.useMemo)(function () {
     return applyDraftAnnotation ? _objectSpread(_objectSpread({}, dataAttributes), {}, {
@@ -328,7 +338,8 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
   }, [applyDraftAnnotation, dataAttributes]);
   return (0, _react2.jsx)(Media, (0, _extends2.default)({}, props, {
     dataAttributes: dataAttributesWithDraftAnnotation,
-    isDrafting: shouldApplyDraftAnnotation
+    isDrafting: shouldApplyDraftAnnotation,
+    isInPageInclude: !!parentElementClosest
   }));
 };
 var _default = exports.default = MediaWithDraftAnnotation;

package/dist/cjs/react/nodes/mention.js

@@ -32,12 +32,14 @@ var MentionItem = exports.default = /*#__PURE__*/function (_PureComponent) {
         id = _this$props.id,
         providers = _this$props.providers,
         text = _this$props.text,
-        accessLevel = _this$props.accessLevel;
+        accessLevel = _this$props.accessLevel,
+        localId = _this$props.localId;
       return /*#__PURE__*/_react.default.createElement(_mention.Mention, {
         id: id,
         text: text,
         accessLevel: accessLevel,
         providers: providers,
+        localId: localId,
         eventHandlers: eventHandlers && eventHandlers.mention
       });
     }

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

@@ -56,7 +56,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.28.1";
+var packageVersion = "109.29.0";
 var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);

package/dist/cjs/ui/annotations/hooks/use-events.js

@@ -78,14 +78,17 @@ var useAnnotationClickEvent = exports.useAnnotationClickEvent = function useAnno
     annotationClickEvent = _useState6[0],
     setAnnotationClickEvent = _useState6[1];
   var updateSubscriber = props.updateSubscriber,
-    createAnalyticsEvent = props.createAnalyticsEvent;
+    createAnalyticsEvent = props.createAnalyticsEvent,
+    isCommentsOnMediaAnalyticsEnabled = props.isCommentsOnMediaAnalyticsEnabled;
   (0, _react.useLayoutEffect)(function () {
     if (!updateSubscriber) {
       return;
     }
     var clickCb = function clickCb(_ref3) {
       var annotationIds = _ref3.annotationIds,
-        eventTarget = _ref3.eventTarget;
+        eventTarget = _ref3.eventTarget,
+        eventTargetType = _ref3.eventTargetType,
+        viewMethod = _ref3.viewMethod;
       var annotationsByType = annotationIds.filter(function (id) {
         return !!id;
       }).map(function (id) {
@@ -100,9 +103,12 @@ var useAnnotationClickEvent = exports.useAnnotationClickEvent = function useAnno
           actionSubject: _analytics.ACTION_SUBJECT.ANNOTATION,
           actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
           eventType: _analytics.EVENT_TYPE.TRACK,
-          attributes: {
+          attributes: _objectSpread({
             overlap: annotationsByType.length || 0
-          }
+          }, isCommentsOnMediaAnalyticsEnabled && {
+            targetNodeType: eventTargetType,
+            method: viewMethod
+          })
         }).fire(_analyticsListeners.FabricChannel.editor);
       }
       setAnnotationClickEvent({
@@ -122,6 +128,6 @@ var useAnnotationClickEvent = exports.useAnnotationClickEvent = function useAnno
       updateSubscriber.off(_types.AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);
       updateSubscriber.off(_types.AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
     };
-  }, [updateSubscriber, createAnalyticsEvent]);
+  }, [updateSubscriber, createAnalyticsEvent, isCommentsOnMediaAnalyticsEnabled]);
   return annotationClickEvent;
 };

package/dist/cjs/ui/annotations/view/index.js

@@ -16,9 +16,11 @@ var AnnotationView = exports.AnnotationView = function AnnotationView(props) {
   var actionContext = (0, _react.useContext)(_RendererActionsContext.RendererContext);
   var inlineCommentProvider = providers && providers.inlineComment;
   var updateSubscriber = inlineCommentProvider && inlineCommentProvider.updateSubscriber || null;
+  var isCommentsOnMediaAnalyticsEnabled = inlineCommentProvider === null || inlineCommentProvider === void 0 ? void 0 : inlineCommentProvider.isCommentsOnMediaAnalyticsEnabled;
   var viewComponentProps = (0, _hooks.useAnnotationClickEvent)({
     updateSubscriber: updateSubscriber,
-    createAnalyticsEvent: props.createAnalyticsEvent
+    createAnalyticsEvent: props.createAnalyticsEvent,
+    isCommentsOnMediaAnalyticsEnabled: isCommentsOnMediaAnalyticsEnabled
   });
   var ViewComponent = inlineCommentProvider && inlineCommentProvider.viewComponent;
   var deleteAnnotation = (0, _react.useMemo)(function () {

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

@@ -12,7 +12,7 @@ import { MediaCard } from '../../../ui/MediaCard';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
 import { getEventHandler } from '../../../utils';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, VIEW_METHOD } from '@atlaskit/editor-common/analytics';
 import { MODE, PLATFORM } from '../../../analytics/events';
 import AnnotationComponent from '../../marks/annotation';
 import { AnnotationsDraftContext, ProvidersContext } from '../../../ui/annotations/context';
@@ -161,7 +161,10 @@ const CommentBadgeWrapper = ({
     if (updateSubscriber) {
       updateSubscriber.emit(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
         annotationIds: activeParentIds,
-        eventTarget: e.target
+        eventTarget: e.target,
+        // use mediaSingle here to align with annotation viewed event dispatched in editor
+        eventTargetType: 'mediaSingle',
+        viewMethod: VIEW_METHOD.BADGE
       });
     }
   };
@@ -189,7 +192,8 @@ class Media extends PureComponent {
         width,
         height,
         mediaSingleElement,
-        isDrafting = false
+        isDrafting = false,
+        isInPageInclude
       } = this.props;
       const annotationMarks = this.props.isAnnotationMark ? this.props.marks.filter(this.props.isAnnotationMark) : undefined;
       const borderMark = this.props.marks.find(this.props.isBorderMark);
@@ -197,6 +201,7 @@ class Media extends PureComponent {
       const linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       const eventHandlers = linkHref ? undefined : this.props.eventHandlers;
       const shouldOpenMediaViewer = !linkHref && allowMediaViewer;
+      const showCommentBadge = !!annotationMarks && (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia) && (!(featureFlags !== null && featureFlags !== void 0 && featureFlags.commentsOnMediaIncludePage) || !isInPageInclude);
       return jsx(MediaLink, {
         mark: linkMark,
         onClick: this.handleMediaLinkClickFn
@@ -210,7 +215,7 @@ class Media extends PureComponent {
             border: !!borderMark
           }
         }
-      }, !!annotationMarks && (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia) && jsx(CommentBadgeWrapper, {
+      }, showCommentBadge && jsx(CommentBadgeWrapper, {
         marks: annotationMarks,
         mediaElement: mediaSingleElement,
         width: width,
@@ -277,6 +282,11 @@ const MediaWithDraftAnnotation = props => {
     dataAttributes
   } = props;
   const pos = dataAttributes && dataAttributes['data-renderer-start-pos'];
+  let parentElementClosest;
+  if (typeof document !== "undefined") {
+    const elementAtPos = pos && document.querySelector(`[data-renderer-start-pos="${pos}"]`);
+    parentElementClosest = elementAtPos instanceof Element ? elementAtPos.closest('[data-node-type="include"]') : null;
+  }
   const [position, setPosition] = useState();
   const [shouldApplyDraftAnnotation, setShouldApplyDraftAnnotation] = useState(false);
   useEffect(() => {
@@ -292,7 +302,7 @@ const MediaWithDraftAnnotation = props => {
       setShouldApplyDraftAnnotation(false);
       setPosition(undefined);
     }
-  }, [draftPosition, pos, shouldApplyDraftAnnotation, isCommentsOnMediaBugFixEnabled]);
+  }, [draftPosition, parentElementClosest, pos, shouldApplyDraftAnnotation, isCommentsOnMediaBugFixEnabled]);
   const applyDraftAnnotation = props.allowAnnotationsDraftMode && shouldApplyDraftAnnotation && position !== undefined;
   const dataAttributesWithDraftAnnotation = useMemo(() => applyDraftAnnotation ? {
     ...dataAttributes,
@@ -301,7 +311,8 @@ const MediaWithDraftAnnotation = props => {
   } : dataAttributes, [applyDraftAnnotation, dataAttributes]);
   return jsx(Media, _extends({}, props, {
     dataAttributes: dataAttributesWithDraftAnnotation,
-    isDrafting: shouldApplyDraftAnnotation
+    isDrafting: shouldApplyDraftAnnotation,
+    isInPageInclude: !!parentElementClosest
   }));
 };
 export default MediaWithDraftAnnotation;

package/dist/es2019/react/nodes/mention.js

@@ -8,13 +8,15 @@ export default class MentionItem extends PureComponent {
       id,
       providers,
       text,
-      accessLevel
+      accessLevel,
+      localId
     } = this.props;
     return /*#__PURE__*/React.createElement(Mention, {
       id: id,
       text: text,
       accessLevel: accessLevel,
       providers: providers,
+      localId: localId,
       eventHandlers: eventHandlers && eventHandlers.mention
     });
   }

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

@@ -37,7 +37,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.28.1";
+const packageVersion = "109.29.0";
 export const defaultNodeComponents = nodeToReact;
 export class Renderer extends PureComponent {
   constructor(props) {

package/dist/es2019/ui/annotations/hooks/use-events.js

@@ -67,7 +67,8 @@ export const useAnnotationClickEvent = props => {
   const [annotationClickEvent, setAnnotationClickEvent] = useState(null);
   const {
     updateSubscriber,
-    createAnalyticsEvent
+    createAnalyticsEvent,
+    isCommentsOnMediaAnalyticsEnabled
   } = props;
   useLayoutEffect(() => {
     if (!updateSubscriber) {
@@ -75,7 +76,9 @@ export const useAnnotationClickEvent = props => {
     }
     const clickCb = ({
       annotationIds,
-      eventTarget
+      eventTarget,
+      eventTargetType,
+      viewMethod
     }) => {
       const annotationsByType = annotationIds.filter(id => !!id).map(id => ({
         id,
@@ -88,7 +91,11 @@ export const useAnnotationClickEvent = props => {
           actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
           eventType: EVENT_TYPE.TRACK,
           attributes: {
-            overlap: annotationsByType.length || 0
+            overlap: annotationsByType.length || 0,
+            ...(isCommentsOnMediaAnalyticsEnabled && {
+              targetNodeType: eventTargetType,
+              method: viewMethod
+            })
           }
         }).fire(FabricChannel.editor);
       }
@@ -109,6 +116,6 @@ export const useAnnotationClickEvent = props => {
       updateSubscriber.off(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);
       updateSubscriber.off(AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
     };
-  }, [updateSubscriber, createAnalyticsEvent]);
+  }, [updateSubscriber, createAnalyticsEvent, isCommentsOnMediaAnalyticsEnabled]);
   return annotationClickEvent;
 };

package/dist/es2019/ui/annotations/view/index.js

@@ -7,9 +7,11 @@ const AnnotationView = props => {
   const actionContext = useContext(RendererContext);
   const inlineCommentProvider = providers && providers.inlineComment;
   const updateSubscriber = inlineCommentProvider && inlineCommentProvider.updateSubscriber || null;
+  const isCommentsOnMediaAnalyticsEnabled = inlineCommentProvider === null || inlineCommentProvider === void 0 ? void 0 : inlineCommentProvider.isCommentsOnMediaAnalyticsEnabled;
   const viewComponentProps = useAnnotationClickEvent({
     updateSubscriber,
-    createAnalyticsEvent: props.createAnalyticsEvent
+    createAnalyticsEvent: props.createAnalyticsEvent,
+    isCommentsOnMediaAnalyticsEnabled
   });
   const ViewComponent = inlineCommentProvider && inlineCommentProvider.viewComponent;
   const deleteAnnotation = useMemo(() => annotationInfo => actionContext.deleteAnnotation(annotationInfo.id, annotationInfo.type), [actionContext]);

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

@@ -27,7 +27,7 @@ import { MediaCard } from '../../../ui/MediaCard';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
 import { getEventHandler } from '../../../utils';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, VIEW_METHOD } from '@atlaskit/editor-common/analytics';
 import { MODE, PLATFORM } from '../../../analytics/events';
 import AnnotationComponent from '../../marks/annotation';
 import { AnnotationsDraftContext, ProvidersContext } from '../../../ui/annotations/context';
@@ -167,7 +167,10 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
     if (updateSubscriber) {
       updateSubscriber.emit(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
         annotationIds: activeParentIds,
-        eventTarget: e.target
+        eventTarget: e.target,
+        // use mediaSingle here to align with annotation viewed event dispatched in editor
+        eventTargetType: 'mediaSingle',
+        viewMethod: VIEW_METHOD.BADGE
       });
     }
   };
@@ -203,13 +206,15 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         height = _this$props.height,
         mediaSingleElement = _this$props.mediaSingleElement,
         _this$props$isDraftin = _this$props.isDrafting,
-        isDrafting = _this$props$isDraftin === void 0 ? false : _this$props$isDraftin;
+        isDrafting = _this$props$isDraftin === void 0 ? false : _this$props$isDraftin,
+        isInPageInclude = _this$props.isInPageInclude;
       var annotationMarks = _this.props.isAnnotationMark ? _this.props.marks.filter(_this.props.isAnnotationMark) : undefined;
       var borderMark = _this.props.marks.find(_this.props.isBorderMark);
       var linkMark = _this.props.marks.find(_this.props.isLinkMark);
       var linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       var eventHandlers = linkHref ? undefined : _this.props.eventHandlers;
       var shouldOpenMediaViewer = !linkHref && allowMediaViewer;
+      var showCommentBadge = !!annotationMarks && (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia) && (!(featureFlags !== null && featureFlags !== void 0 && featureFlags.commentsOnMediaIncludePage) || !isInPageInclude);
       return jsx(MediaLink, {
         mark: linkMark,
         onClick: _this.handleMediaLinkClickFn
@@ -221,7 +226,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         data: _defineProperty({}, MEDIA_CONTEXT, {
           border: !!borderMark
         })
-      }, !!annotationMarks && (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.commentsOnMedia) && jsx(CommentBadgeWrapper, {
+      }, showCommentBadge && jsx(CommentBadgeWrapper, {
         marks: annotationMarks,
         mediaElement: mediaSingleElement,
         width: width,
@@ -288,6 +293,11 @@ 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 parentElementClosest;
+  if (typeof document !== "undefined") {
+    var elementAtPos = pos && document.querySelector("[data-renderer-start-pos=\"".concat(pos, "\"]"));
+    parentElementClosest = elementAtPos instanceof Element ? elementAtPos.closest('[data-node-type="include"]') : null;
+  }
   var _useState5 = useState(),
     _useState6 = _slicedToArray(_useState5, 2),
     position = _useState6[0],
@@ -309,7 +319,7 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
       setShouldApplyDraftAnnotation(false);
       setPosition(undefined);
     }
-  }, [draftPosition, pos, shouldApplyDraftAnnotation, isCommentsOnMediaBugFixEnabled]);
+  }, [draftPosition, parentElementClosest, pos, shouldApplyDraftAnnotation, isCommentsOnMediaBugFixEnabled]);
   var applyDraftAnnotation = props.allowAnnotationsDraftMode && shouldApplyDraftAnnotation && position !== undefined;
   var dataAttributesWithDraftAnnotation = useMemo(function () {
     return applyDraftAnnotation ? _objectSpread(_objectSpread({}, dataAttributes), {}, {
@@ -319,7 +329,8 @@ var MediaWithDraftAnnotation = function MediaWithDraftAnnotation(props) {
   }, [applyDraftAnnotation, dataAttributes]);
   return jsx(Media, _extends({}, props, {
     dataAttributes: dataAttributesWithDraftAnnotation,
-    isDrafting: shouldApplyDraftAnnotation
+    isDrafting: shouldApplyDraftAnnotation,
+    isInPageInclude: !!parentElementClosest
   }));
 };
 export default MediaWithDraftAnnotation;

package/dist/esm/react/nodes/mention.js

@@ -23,12 +23,14 @@ var MentionItem = /*#__PURE__*/function (_PureComponent) {
         id = _this$props.id,
         providers = _this$props.providers,
         text = _this$props.text,
-        accessLevel = _this$props.accessLevel;
+        accessLevel = _this$props.accessLevel,
+        localId = _this$props.localId;
       return /*#__PURE__*/React.createElement(Mention, {
         id: id,
         text: text,
         accessLevel: accessLevel,
         providers: providers,
+        localId: localId,
         eventHandlers: eventHandlers && eventHandlers.mention
       });
     }

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

@@ -47,7 +47,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.28.1";
+var packageVersion = "109.29.0";
 export var defaultNodeComponents = nodeToReact;
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);

package/dist/esm/ui/annotations/hooks/use-events.js

@@ -71,14 +71,17 @@ export var useAnnotationClickEvent = function useAnnotationClickEvent(props) {
     annotationClickEvent = _useState6[0],
     setAnnotationClickEvent = _useState6[1];
   var updateSubscriber = props.updateSubscriber,
-    createAnalyticsEvent = props.createAnalyticsEvent;
+    createAnalyticsEvent = props.createAnalyticsEvent,
+    isCommentsOnMediaAnalyticsEnabled = props.isCommentsOnMediaAnalyticsEnabled;
   useLayoutEffect(function () {
     if (!updateSubscriber) {
       return;
     }
     var clickCb = function clickCb(_ref3) {
       var annotationIds = _ref3.annotationIds,
-        eventTarget = _ref3.eventTarget;
+        eventTarget = _ref3.eventTarget,
+        eventTargetType = _ref3.eventTargetType,
+        viewMethod = _ref3.viewMethod;
       var annotationsByType = annotationIds.filter(function (id) {
         return !!id;
       }).map(function (id) {
@@ -93,9 +96,12 @@ export var useAnnotationClickEvent = function useAnnotationClickEvent(props) {
           actionSubject: ACTION_SUBJECT.ANNOTATION,
           actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
           eventType: EVENT_TYPE.TRACK,
-          attributes: {
+          attributes: _objectSpread({
             overlap: annotationsByType.length || 0
-          }
+          }, isCommentsOnMediaAnalyticsEnabled && {
+            targetNodeType: eventTargetType,
+            method: viewMethod
+          })
         }).fire(FabricChannel.editor);
       }
       setAnnotationClickEvent({
@@ -115,6 +121,6 @@ export var useAnnotationClickEvent = function useAnnotationClickEvent(props) {
       updateSubscriber.off(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, clickCb);
       updateSubscriber.off(AnnotationUpdateEvent.DESELECT_ANNOTATIONS, deselectCb);
     };
-  }, [updateSubscriber, createAnalyticsEvent]);
+  }, [updateSubscriber, createAnalyticsEvent, isCommentsOnMediaAnalyticsEnabled]);
   return annotationClickEvent;
 };

package/dist/esm/ui/annotations/view/index.js

@@ -7,9 +7,11 @@ var AnnotationView = function AnnotationView(props) {
   var actionContext = useContext(RendererContext);
   var inlineCommentProvider = providers && providers.inlineComment;
   var updateSubscriber = inlineCommentProvider && inlineCommentProvider.updateSubscriber || null;
+  var isCommentsOnMediaAnalyticsEnabled = inlineCommentProvider === null || inlineCommentProvider === void 0 ? void 0 : inlineCommentProvider.isCommentsOnMediaAnalyticsEnabled;
   var viewComponentProps = useAnnotationClickEvent({
     updateSubscriber: updateSubscriber,
-    createAnalyticsEvent: props.createAnalyticsEvent
+    createAnalyticsEvent: props.createAnalyticsEvent,
+    isCommentsOnMediaAnalyticsEnabled: isCommentsOnMediaAnalyticsEnabled
   });
   var ViewComponent = inlineCommentProvider && inlineCommentProvider.viewComponent;
   var deleteAnnotation = useMemo(function () {

package/dist/types/react/nodes/media/index.d.ts

@@ -26,6 +26,7 @@ export type MediaProps = MediaCardProps & {
     width?: number;
     height?: number;
     isDrafting: boolean;
+    isInPageInclude?: boolean;
 };
 export declare const linkStyle: import("@emotion/react").SerializedStyles;
 export declare const borderStyle: (color: string, width: number) => import("@emotion/react").SerializedStyles;

package/dist/types/react/nodes/mention.d.ts

@@ -1,5 +1,5 @@
 import { PureComponent } from 'react';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 export interface Props {
     id: string;
@@ -7,6 +7,7 @@ export interface Props {
     eventHandlers?: EventHandlers;
     text: string;
     accessLevel?: string;
+    localId?: string;
 }
 export default class MentionItem extends PureComponent<Props, {}> {
     render(): JSX.Element;

package/dist/types/ui/annotations/hooks/use-events.d.ts

@@ -14,5 +14,7 @@ type UseAnnotationUpdateSatteByEventProps = {
 export declare const useAnnotationStateByTypeEvent: ({ type, updateSubscriber, }: UseAnnotationUpdateSatteByEventProps) => Record<string, AnnotationMarkStates | null>;
 export declare const useHasFocusEvent: ({ id, updateSubscriber, }: ListenEventProps) => boolean;
 type AnnotationsWithClickTarget = Pick<InlineCommentViewComponentProps, 'annotations' | 'clickElementTarget'> | null;
-export declare const useAnnotationClickEvent: (props: Pick<ListenEventProps, 'updateSubscriber' | 'createAnalyticsEvent'>) => AnnotationsWithClickTarget;
+export declare const useAnnotationClickEvent: (props: Pick<ListenEventProps, "createAnalyticsEvent" | "updateSubscriber"> & {
+    isCommentsOnMediaAnalyticsEnabled?: boolean | undefined;
+}) => AnnotationsWithClickTarget;
 export {};

package/dist/types/ui/annotations/view/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 type Props = {
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
 };

package/dist/types-ts4.5/react/nodes/media/index.d.ts

@@ -26,6 +26,7 @@ export type MediaProps = MediaCardProps & {
     width?: number;
     height?: number;
     isDrafting: boolean;
+    isInPageInclude?: boolean;
 };
 export declare const linkStyle: import("@emotion/react").SerializedStyles;
 export declare const borderStyle: (color: string, width: number) => import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/react/nodes/mention.d.ts

@@ -1,5 +1,5 @@
 import { PureComponent } from 'react';
-import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 export interface Props {
     id: string;
@@ -7,6 +7,7 @@ export interface Props {
     eventHandlers?: EventHandlers;
     text: string;
     accessLevel?: string;
+    localId?: string;
 }
 export default class MentionItem extends PureComponent<Props, {}> {
     render(): JSX.Element;

package/dist/types-ts4.5/ui/annotations/hooks/use-events.d.ts

@@ -14,5 +14,7 @@ type UseAnnotationUpdateSatteByEventProps = {
 export declare const useAnnotationStateByTypeEvent: ({ type, updateSubscriber, }: UseAnnotationUpdateSatteByEventProps) => Record<string, AnnotationMarkStates | null>;
 export declare const useHasFocusEvent: ({ id, updateSubscriber, }: ListenEventProps) => boolean;
 type AnnotationsWithClickTarget = Pick<InlineCommentViewComponentProps, 'annotations' | 'clickElementTarget'> | null;
-export declare const useAnnotationClickEvent: (props: Pick<ListenEventProps, 'updateSubscriber' | 'createAnalyticsEvent'>) => AnnotationsWithClickTarget;
+export declare const useAnnotationClickEvent: (props: Pick<ListenEventProps, "createAnalyticsEvent" | "updateSubscriber"> & {
+    isCommentsOnMediaAnalyticsEnabled?: boolean | undefined;
+}) => AnnotationsWithClickTarget;
 export {};

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 type Props = {
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.28.1",
+  "version": "109.29.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/button": "^17.14.0",
     "@atlaskit/code": "^15.2.0",
-    "@atlaskit/editor-common": "^80.3.0",
+    "@atlaskit/editor-common": "^80.4.0",
     "@atlaskit/editor-json-transformer": "^8.13.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-prosemirror": "4.0.1",