@atlaskit/renderer 109.28.1 → 109.28.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/renderer
 
+## 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
       });
     }
   };

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.28.2";
 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
       });
     }
   };

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.28.2";
 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
       });
     }
   };

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.28.2";
 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/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/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.28.2",
   "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",