@atlaskit/renderer 109.15.3 → 109.16.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/renderer
 
+## 109.16.0
+
+### Minor Changes
+
+- [#89299](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89299) [`b462593ddae0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b462593ddae0) - [ED-22909] Update AnnotationRangeDispatchContext with actions to set and clear draft range for hover component
+
+### Patch Changes
+
+- [#89269](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89269) [`78ee8b68398b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/78ee8b68398b) - Add onClick functionality to comment badge renderer
+- Updated dependencies
+
 ## 109.15.3
 
 ### Patch Changes

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

@@ -32,6 +32,7 @@ var _styles = require("./styles");
 var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _reactIntlNext = require("react-intl-next");
 var _hooks = require("../../../ui/annotations/hooks");
+var _types = require("@atlaskit/editor-common/types");
 var _excluded = ["marks"];
 /** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -116,6 +117,7 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   var _marks$map;
   var marks = _ref5.marks,
     rest = (0, _objectWithoutProperties2.default)(_ref5, _excluded);
+  var updateSubscriber = (0, _hooks.useInlineCommentSubscriberContext)();
   var activeParentIds = (0, _hooks.useInlineCommentsFilter)({
     annotationIds: (_marks$map = marks === null || marks === void 0 ? void 0 : marks.map(function (mark) {
       return mark.attrs.id;
@@ -127,10 +129,16 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   if (!activeParentIds.length) {
     return null;
   }
-
-  // todo: handle onClick
+  var onClick = function onClick(e) {
+    if (updateSubscriber) {
+      updateSubscriber.emit(_types.AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
+        annotationIds: activeParentIds,
+        eventTarget: e.target
+      });
+    }
+  };
   return (0, _react2.jsx)(CommentBadge, (0, _extends2.default)({
-    onClick: function onClick() {}
+    onClick: onClick
   }, rest));
 };
 var Media = exports.default = /*#__PURE__*/function (_PureComponent) {

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

@@ -55,7 +55,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.15.3";
+var packageVersion = "109.16.0";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/cjs/ui/annotations/contexts/AnnotationRangeContext.js

@@ -39,6 +39,13 @@ function reducer(state, action) {
         });
       }
       return state;
+    case 'clearDraftHover':
+      if (state.type === 'hover') {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          draftRange: null
+        });
+      }
+      return state;
     case 'clearHover':
       if (state.type === 'hover') {
         return {
@@ -56,6 +63,14 @@ function reducer(state, action) {
         });
       }
       return state;
+    case 'setHover':
+      if (state.range !== action.range || state.type !== 'hover') {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          range: action.range,
+          type: 'hover'
+        });
+      }
+      return state;
     case 'setDraftSelection':
       if (state.draftRange !== action.draftRange || state.type !== 'selection') {
         return {
@@ -65,16 +80,14 @@ function reducer(state, action) {
         };
       }
       return state;
-    case 'setHover':
-      if (state.range !== action.range || state.type !== 'hover') {
+    case 'setDraftHover':
+      if (state.draftRange !== action.draftRange || state.type !== 'hover') {
         return _objectSpread(_objectSpread({}, state), {}, {
-          range: action.range,
-          type: 'hover'
+          draftRange: action.draftRange
         });
       }
       return state;
   }
-  return state;
 }
 var AnnotationRangeStateContext = exports.AnnotationRangeStateContext = /*#__PURE__*/(0, _react.createContext)({
   range: null,
@@ -113,8 +126,14 @@ var AnnotationRangeProvider = exports.AnnotationRangeProvider = function Annotat
       type: 'clearSelection'
     });
   }, []);
-  var clearDraftRange = (0, _react.useCallback)(function () {
-    return dispatch({
+  var clearDraftRange = (0, _react.useCallback)(function (type) {
+    if (type === 'hover') {
+      dispatch({
+        type: 'clearDraftHover'
+      });
+      return;
+    }
+    dispatch({
       type: 'clearDraftSelection'
     });
   }, []);
@@ -129,7 +148,14 @@ var AnnotationRangeProvider = exports.AnnotationRangeProvider = function Annotat
       range: range
     });
   }, []);
-  var setDraftRange = (0, _react.useCallback)(function (range) {
+  var setDraftRange = (0, _react.useCallback)(function (range, type) {
+    if (type === 'hover') {
+      dispatch({
+        type: 'setDraftHover',
+        draftRange: range
+      });
+      return;
+    }
     dispatch({
       type: 'setDraftSelection',
       draftRange: range

package/dist/cjs/ui/annotations/wrapper.js

@@ -15,7 +15,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var AnnotationsContextWrapper = exports.AnnotationsContextWrapper = function AnnotationsContextWrapper(props) {
   var providers = (0, _react.useContext)(_context.ProvidersContext);
   var _useAnnotationRangeSt = (0, _AnnotationRangeContext.useAnnotationRangeState)(),
-    range = _useAnnotationRangeSt.range;
+    range = _useAnnotationRangeSt.range,
+    type = _useAnnotationRangeSt.type;
   var _useAnnotationRangeDi = (0, _AnnotationRangeContext.useAnnotationRangeDispatch)(),
     setDraftRange = _useAnnotationRangeDi.setDraftRange,
     clearDraftRange = _useAnnotationRangeDi.clearDraftRange;
@@ -28,8 +29,11 @@ var AnnotationsContextWrapper = exports.AnnotationsContextWrapper = function Ann
 
   // We want to set the draft to the range the user highlighted
   var setRangeForDraft = (0, _react.useCallback)(function () {
-    setDraftRange(range);
-  }, [range, setDraftRange]);
+    setDraftRange(range, type);
+  }, [range, setDraftRange, type]);
+  var clearRangeForDraft = (0, _react.useCallback)(function () {
+    clearDraftRange(type);
+  }, [type, clearDraftRange]);
   var render = (0, _react.useCallback)(function (_ref) {
     var applyAnnotationDraftAt = _ref.applyAnnotationDraftAt,
       clearAnnotationDraft = _ref.clearAnnotationDraft;
@@ -52,6 +56,6 @@ var AnnotationsContextWrapper = exports.AnnotationsContextWrapper = function Ann
   }
   return /*#__PURE__*/_react.default.createElement(_context.AnnotationsDraftContextWrapper, {
     setDraftRange: setRangeForDraft,
-    clearDraftRange: clearDraftRange
+    clearDraftRange: clearRangeForDraft
   }, render);
 };

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

@@ -18,7 +18,8 @@ import AnnotationComponent from '../../marks/annotation';
 import { linkStyle, borderStyle } from './styles';
 import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
 import { injectIntl } from 'react-intl-next';
-import { useInlineCommentsFilter } from '../../../ui/annotations/hooks';
+import { useInlineCommentSubscriberContext, useInlineCommentsFilter } from '../../../ui/annotations/hooks';
+import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
 const MediaBorder = ({
   mark,
   children
@@ -101,6 +102,7 @@ const CommentBadgeWrapper = ({
   ...rest
 }) => {
   var _marks$map;
+  const updateSubscriber = useInlineCommentSubscriberContext();
   const activeParentIds = useInlineCommentsFilter({
     annotationIds: (_marks$map = marks === null || marks === void 0 ? void 0 : marks.map(mark => mark.attrs.id)) !== null && _marks$map !== void 0 ? _marks$map : [''],
     filter: {
@@ -110,10 +112,16 @@ const CommentBadgeWrapper = ({
   if (!activeParentIds.length) {
     return null;
   }
-
-  // todo: handle onClick
+  const onClick = e => {
+    if (updateSubscriber) {
+      updateSubscriber.emit(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
+        annotationIds: activeParentIds,
+        eventTarget: e.target
+      });
+    }
+  };
   return jsx(CommentBadge, _extends({
-    onClick: () => {}
+    onClick: onClick
   }, rest));
 };
 export default class Media extends PureComponent {

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

@@ -36,7 +36,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.15.3";
+const packageVersion = "109.16.0";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/es2019/ui/annotations/contexts/AnnotationRangeContext.js

@@ -27,6 +27,14 @@ function reducer(state, action) {
         };
       }
       return state;
+    case 'clearDraftHover':
+      if (state.type === 'hover') {
+        return {
+          ...state,
+          draftRange: null
+        };
+      }
+      return state;
     case 'clearHover':
       if (state.type === 'hover') {
         return {
@@ -45,6 +53,15 @@ function reducer(state, action) {
         };
       }
       return state;
+    case 'setHover':
+      if (state.range !== action.range || state.type !== 'hover') {
+        return {
+          ...state,
+          range: action.range,
+          type: 'hover'
+        };
+      }
+      return state;
     case 'setDraftSelection':
       if (state.draftRange !== action.draftRange || state.type !== 'selection') {
         return {
@@ -54,17 +71,15 @@ function reducer(state, action) {
         };
       }
       return state;
-    case 'setHover':
-      if (state.range !== action.range || state.type !== 'hover') {
+    case 'setDraftHover':
+      if (state.draftRange !== action.draftRange || state.type !== 'hover') {
         return {
           ...state,
-          range: action.range,
-          type: 'hover'
+          draftRange: action.draftRange
         };
       }
       return state;
   }
-  return state;
 }
 export const AnnotationRangeStateContext = /*#__PURE__*/createContext({
   range: null,
@@ -98,9 +113,17 @@ export const AnnotationRangeProvider = ({
   const clearSelectionRange = useCallback(() => dispatch({
     type: 'clearSelection'
   }), []);
-  const clearDraftRange = useCallback(() => dispatch({
-    type: 'clearDraftSelection'
-  }), []);
+  const clearDraftRange = useCallback(type => {
+    if (type === 'hover') {
+      dispatch({
+        type: 'clearDraftHover'
+      });
+      return;
+    }
+    dispatch({
+      type: 'clearDraftSelection'
+    });
+  }, []);
   const clearHoverRange = useCallback(() => dispatch({
     type: 'clearHover'
   }), []);
@@ -108,7 +131,14 @@ export const AnnotationRangeProvider = ({
     type: 'setSelection',
     range
   }), []);
-  const setDraftRange = useCallback(range => {
+  const setDraftRange = useCallback((range, type) => {
+    if (type === 'hover') {
+      dispatch({
+        type: 'setDraftHover',
+        draftRange: range
+      });
+      return;
+    }
     dispatch({
       type: 'setDraftSelection',
       draftRange: range

package/dist/es2019/ui/annotations/wrapper.js

@@ -6,7 +6,8 @@ import { useAnnotationRangeDispatch, useAnnotationRangeState } from './contexts/
 export const AnnotationsContextWrapper = props => {
   const providers = useContext(ProvidersContext);
   const {
-    range
+    range,
+    type
   } = useAnnotationRangeState();
   const {
     setDraftRange,
@@ -23,8 +24,11 @@ export const AnnotationsContextWrapper = props => {
 
   // We want to set the draft to the range the user highlighted
   const setRangeForDraft = useCallback(() => {
-    setDraftRange(range);
-  }, [range, setDraftRange]);
+    setDraftRange(range, type);
+  }, [range, setDraftRange, type]);
+  const clearRangeForDraft = useCallback(() => {
+    clearDraftRange(type);
+  }, [type, clearDraftRange]);
   const render = useCallback(({
     applyAnnotationDraftAt,
     clearAnnotationDraft
@@ -48,6 +52,6 @@ export const AnnotationsContextWrapper = props => {
   }
   return /*#__PURE__*/React.createElement(AnnotationsDraftContextWrapper, {
     setDraftRange: setRangeForDraft,
-    clearDraftRange: clearDraftRange
+    clearDraftRange: clearRangeForDraft
   }, render);
 };

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

@@ -28,7 +28,8 @@ import AnnotationComponent from '../../marks/annotation';
 import { linkStyle, borderStyle } from './styles';
 import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/media-single';
 import { injectIntl } from 'react-intl-next';
-import { useInlineCommentsFilter } from '../../../ui/annotations/hooks';
+import { useInlineCommentSubscriberContext, useInlineCommentsFilter } from '../../../ui/annotations/hooks';
+import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
 var MediaBorder = function MediaBorder(_ref) {
   var _mark$attrs$color, _mark$attrs$size;
   var mark = _ref.mark,
@@ -107,6 +108,7 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   var _marks$map;
   var marks = _ref5.marks,
     rest = _objectWithoutProperties(_ref5, _excluded);
+  var updateSubscriber = useInlineCommentSubscriberContext();
   var activeParentIds = useInlineCommentsFilter({
     annotationIds: (_marks$map = marks === null || marks === void 0 ? void 0 : marks.map(function (mark) {
       return mark.attrs.id;
@@ -118,10 +120,16 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   if (!activeParentIds.length) {
     return null;
   }
-
-  // todo: handle onClick
+  var onClick = function onClick(e) {
+    if (updateSubscriber) {
+      updateSubscriber.emit(AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
+        annotationIds: activeParentIds,
+        eventTarget: e.target
+      });
+    }
+  };
   return jsx(CommentBadge, _extends({
-    onClick: function onClick() {}
+    onClick: onClick
   }, rest));
 };
 var Media = /*#__PURE__*/function (_PureComponent) {

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

@@ -46,7 +46,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.15.3";
+var packageVersion = "109.16.0";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/esm/ui/annotations/contexts/AnnotationRangeContext.js

@@ -29,6 +29,13 @@ function reducer(state, action) {
         });
       }
       return state;
+    case 'clearDraftHover':
+      if (state.type === 'hover') {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          draftRange: null
+        });
+      }
+      return state;
     case 'clearHover':
       if (state.type === 'hover') {
         return {
@@ -46,6 +53,14 @@ function reducer(state, action) {
         });
       }
       return state;
+    case 'setHover':
+      if (state.range !== action.range || state.type !== 'hover') {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          range: action.range,
+          type: 'hover'
+        });
+      }
+      return state;
     case 'setDraftSelection':
       if (state.draftRange !== action.draftRange || state.type !== 'selection') {
         return {
@@ -55,16 +70,14 @@ function reducer(state, action) {
         };
       }
       return state;
-    case 'setHover':
-      if (state.range !== action.range || state.type !== 'hover') {
+    case 'setDraftHover':
+      if (state.draftRange !== action.draftRange || state.type !== 'hover') {
         return _objectSpread(_objectSpread({}, state), {}, {
-          range: action.range,
-          type: 'hover'
+          draftRange: action.draftRange
         });
       }
       return state;
   }
-  return state;
 }
 export var AnnotationRangeStateContext = /*#__PURE__*/createContext({
   range: null,
@@ -103,8 +116,14 @@ export var AnnotationRangeProvider = function AnnotationRangeProvider(_ref) {
       type: 'clearSelection'
     });
   }, []);
-  var clearDraftRange = useCallback(function () {
-    return dispatch({
+  var clearDraftRange = useCallback(function (type) {
+    if (type === 'hover') {
+      dispatch({
+        type: 'clearDraftHover'
+      });
+      return;
+    }
+    dispatch({
       type: 'clearDraftSelection'
     });
   }, []);
@@ -119,7 +138,14 @@ export var AnnotationRangeProvider = function AnnotationRangeProvider(_ref) {
       range: range
     });
   }, []);
-  var setDraftRange = useCallback(function (range) {
+  var setDraftRange = useCallback(function (range, type) {
+    if (type === 'hover') {
+      dispatch({
+        type: 'setDraftHover',
+        draftRange: range
+      });
+      return;
+    }
     dispatch({
       type: 'setDraftSelection',
       draftRange: range

package/dist/esm/ui/annotations/wrapper.js

@@ -6,7 +6,8 @@ import { useAnnotationRangeDispatch, useAnnotationRangeState } from './contexts/
 export var AnnotationsContextWrapper = function AnnotationsContextWrapper(props) {
   var providers = useContext(ProvidersContext);
   var _useAnnotationRangeSt = useAnnotationRangeState(),
-    range = _useAnnotationRangeSt.range;
+    range = _useAnnotationRangeSt.range,
+    type = _useAnnotationRangeSt.type;
   var _useAnnotationRangeDi = useAnnotationRangeDispatch(),
     setDraftRange = _useAnnotationRangeDi.setDraftRange,
     clearDraftRange = _useAnnotationRangeDi.clearDraftRange;
@@ -19,8 +20,11 @@ export var AnnotationsContextWrapper = function AnnotationsContextWrapper(props)
 
   // We want to set the draft to the range the user highlighted
   var setRangeForDraft = useCallback(function () {
-    setDraftRange(range);
-  }, [range, setDraftRange]);
+    setDraftRange(range, type);
+  }, [range, setDraftRange, type]);
+  var clearRangeForDraft = useCallback(function () {
+    clearDraftRange(type);
+  }, [type, clearDraftRange]);
   var render = useCallback(function (_ref) {
     var applyAnnotationDraftAt = _ref.applyAnnotationDraftAt,
       clearAnnotationDraft = _ref.clearAnnotationDraft;
@@ -43,6 +47,6 @@ export var AnnotationsContextWrapper = function AnnotationsContextWrapper(props)
   }
   return /*#__PURE__*/React.createElement(AnnotationsDraftContextWrapper, {
     setDraftRange: setRangeForDraft,
-    clearDraftRange: clearDraftRange
+    clearDraftRange: clearRangeForDraft
   }, render);
 };

package/dist/types/ui/annotations/contexts/AnnotationRangeContext.d.ts

@@ -1,17 +1,18 @@
 import type { ReactNode } from 'react';
 import React from 'react';
+type RangeType = 'selection' | 'hover' | null;
 interface AnnotationRangeStateContext {
     range: Range | null;
     draftRange: Range | null;
-    type: 'selection' | 'hover' | null;
+    type: RangeType;
 }
 interface AnnotationRangeDispatchContext {
     clearRange: () => void;
     clearSelectionRange: () => void;
-    clearDraftRange: () => void;
+    clearDraftRange: (type: RangeType) => void;
     clearHoverRange: () => void;
     setRange: (range: Range) => void;
-    setDraftRange: (draftRange: Range | null) => void;
+    setDraftRange: (draftRange: Range | null, type: RangeType) => void;
     setHoverTarget?: (target: HTMLElement) => void;
 }
 export declare const AnnotationRangeStateContext: React.Context<AnnotationRangeStateContext>;

package/dist/types-ts4.5/ui/annotations/contexts/AnnotationRangeContext.d.ts

@@ -1,17 +1,18 @@
 import type { ReactNode } from 'react';
 import React from 'react';
+type RangeType = 'selection' | 'hover' | null;
 interface AnnotationRangeStateContext {
     range: Range | null;
     draftRange: Range | null;
-    type: 'selection' | 'hover' | null;
+    type: RangeType;
 }
 interface AnnotationRangeDispatchContext {
     clearRange: () => void;
     clearSelectionRange: () => void;
-    clearDraftRange: () => void;
+    clearDraftRange: (type: RangeType) => void;
     clearHoverRange: () => void;
     setRange: (range: Range) => void;
-    setDraftRange: (draftRange: Range | null) => void;
+    setDraftRange: (draftRange: Range | null, type: RangeType) => void;
     setHoverTarget?: (target: HTMLElement) => void;
 }
 export declare const AnnotationRangeStateContext: React.Context<AnnotationRangeStateContext>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.15.3",
+  "version": "109.16.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/button": "^17.11.0",
     "@atlaskit/code": "^15.1.0",
-    "@atlaskit/editor-common": "^78.24.0",
+    "@atlaskit/editor-common": "^78.25.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-prosemirror": "3.0.0",
@@ -39,8 +39,8 @@
     "@atlaskit/emoji": "^67.6.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/link-datasource": "^1.26.0",
-    "@atlaskit/media-card": "^77.10.0",
-    "@atlaskit/media-client": "^26.2.0",
+    "@atlaskit/media-card": "^77.11.0",
+    "@atlaskit/media-client": "^26.3.0",
     "@atlaskit/media-client-react": "^2.0.0",
     "@atlaskit/media-common": "^11.1.0",
     "@atlaskit/media-filmstrip": "^47.0.0",
@@ -52,7 +52,7 @@
     "@atlaskit/task-decision": "^17.9.0",
     "@atlaskit/theme": "^12.7.0",
     "@atlaskit/tokens": "^1.43.0",
-    "@atlaskit/tooltip": "^18.1.0",
+    "@atlaskit/tooltip": "^18.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "lodash": "^4.17.21",