@atlaskit/editor-plugin-annotation 1.24.1 → 1.25.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-annotation
 
+## 1.25.0
+
+### Minor Changes
+
+- [#167231](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/167231)
+  [`335a373081eaf`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/335a373081eaf) -
+  [ux] Added hoveredAnnotation for the renderer and the editor to accomodate the newly implemented
+  comment's panel
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.24.1
 
 ### Patch Changes

package/dist/cjs/commands/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateMouseState = exports.updateInlineCommentResolvedState = exports.showInlineCommentForBlockNode = exports.setSelectedAnnotation = exports.setInlineCommentsVisibility = exports.setInlineCommentDraftState = exports.removeInlineCommentNearSelection = exports.createAnnotation = exports.closeComponent = exports.clearDirtyMark = exports.addInlineComment = void 0;
+exports.updateMouseState = exports.updateInlineCommentResolvedState = exports.showInlineCommentForBlockNode = exports.setSelectedAnnotation = exports.setInlineCommentsVisibility = exports.setInlineCommentDraftState = exports.setHoveredAnnotation = exports.removeInlineCommentNearSelection = exports.createAnnotation = exports.closeComponent = exports.clearDirtyMark = exports.addInlineComment = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -223,6 +223,17 @@ var setSelectedAnnotation = exports.setSelectedAnnotation = function setSelected
     }
   });
 };
+var setHoveredAnnotation = exports.setHoveredAnnotation = function setHoveredAnnotation(id) {
+  return (0, _pluginFactory.createCommand)({
+    type: _types.ACTIONS.SET_HOVERED_ANNOTATION,
+    data: {
+      hoveredAnnotations: [{
+        id: id,
+        type: _adfSchema.AnnotationTypes.INLINE_COMMENT
+      }]
+    }
+  });
+};
 var createAnnotation = exports.createAnnotation = function createAnnotation(editorAnalyticsAPI, editorAPI) {
   return function (id) {
     var annotationType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _adfSchema.AnnotationTypes.INLINE_COMMENT;

package/dist/cjs/nodeviews/index.js

@@ -51,11 +51,17 @@ var AnnotationNodeView = exports.AnnotationNodeView = /*#__PURE__*/function (_Re
   }]);
   return AnnotationNodeView;
 }(_reactNodeView.default);
-var getAnnotationViewClassname = exports.getAnnotationViewClassname = function getAnnotationViewClassname(isUnresolved, hasFocus) {
+var getAnnotationViewClassname = exports.getAnnotationViewClassname = function getAnnotationViewClassname(isUnresolved, hasFocus, isHovered) {
   if (!isUnresolved) {
     return;
   }
-  return hasFocus ? _styles.AnnotationSharedClassNames.focus : _styles.AnnotationSharedClassNames.blur;
+  if (hasFocus) {
+    return _styles.AnnotationSharedClassNames.focus;
+  }
+  if (isHovered) {
+    return _styles.AnnotationSharedClassNames.hover;
+  }
+  return _styles.AnnotationSharedClassNames.blur;
 };
 var getBlockAnnotationViewClassname = exports.getBlockAnnotationViewClassname = function getBlockAnnotationViewClassname(isUnresolved, hasFocus) {
   if (!isUnresolved) {

package/dist/cjs/pm-plugins/inline-comment.js

@@ -82,6 +82,7 @@ var initialState = function initialState() {
   return {
     annotations: {},
     selectedAnnotations: [],
+    hoveredAnnotations: [],
     mouseData: {
       isSelecting: false
     },
@@ -172,9 +173,19 @@ var inlineCommentPlugin = exports.inlineCommentPlugin = function inlineCommentPl
           (0, _commands.setSelectedAnnotation)(annotationId)(editorView.state, editorView.dispatch);
         }
       };
+      var setHoveredAnnotationFn = function setHoveredAnnotationFn(annotationId) {
+        if (!annotationId) {
+          (0, _commands.closeComponent)()(editorView.state, editorView.dispatch);
+        } else {
+          (0, _commands.setHoveredAnnotation)(annotationId)(editorView.state, editorView.dispatch);
+        }
+      };
+      var removeHoveredannotationFn = function removeHoveredannotationFn() {
+        (0, _commands.setHoveredAnnotation)('')(editorView.state, editorView.dispatch);
+      };
       var updateSubscriber = provider.updateSubscriber;
       if (updateSubscriber) {
-        updateSubscriber.on('resolve', resolve).on('delete', resolve).on('unresolve', unResolve).on('create', unResolve).on('setvisibility', setVisibility).on('setselectedannotation', setSelectedAnnotationFn);
+        updateSubscriber.on('resolve', resolve).on('delete', resolve).on('unresolve', unResolve).on('create', unResolve).on('setvisibility', setVisibility).on('setselectedannotation', setSelectedAnnotationFn).on('sethoveredannotation', setHoveredAnnotationFn).on('removehoveredannotation', removeHoveredannotationFn);
       }
 
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -193,7 +204,7 @@ var inlineCommentPlugin = exports.inlineCommentPlugin = function inlineCommentPl
           // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
           editorView.root.removeEventListener('mouseup', mouseUp);
           if (updateSubscriber) {
-            updateSubscriber.off('resolve', resolve).off('delete', resolve).off('unresolve', unResolve).off('create', unResolve).off('setvisibility', setVisibility).off('setselectedannotation', setSelectedAnnotationFn);
+            updateSubscriber.off('resolve', resolve).off('delete', resolve).off('unresolve', unResolve).off('create', unResolve).off('setvisibility', setVisibility).off('setselectedannotation', setSelectedAnnotationFn).off('sethoveredannotation', setHoveredAnnotationFn).off('removehoveredannotation', removeHoveredannotationFn);
           }
         }
       };
@@ -226,7 +237,8 @@ var inlineCommentPlugin = exports.inlineCommentPlugin = function inlineCommentPl
           annotations = _ref5.annotations,
           selectedAnnotations = _ref5.selectedAnnotations,
           isVisible = _ref5.isVisible,
-          isInlineCommentViewClosed = _ref5.isInlineCommentViewClosed;
+          isInlineCommentViewClosed = _ref5.isInlineCommentViewClosed,
+          hoveredAnnotations = _ref5.hoveredAnnotations;
         var decorations = draftDecorationSet !== null && draftDecorationSet !== void 0 ? draftDecorationSet : _view.DecorationSet.empty;
         var focusDecorations = [];
         state.doc.descendants(function (node, pos) {
@@ -245,6 +257,9 @@ var inlineCommentPlugin = exports.inlineCommentPlugin = function inlineCommentPl
               var isSelected = !isInlineCommentViewClosed && !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(function (selectedAnnotation) {
                 return selectedAnnotation.id === mark.attrs.id;
               }));
+              var isHovered = !isInlineCommentViewClosed && !!(hoveredAnnotations !== null && hoveredAnnotations !== void 0 && hoveredAnnotations.some(function (hoveredAnnotation) {
+                return hoveredAnnotation.id === mark.attrs.id;
+              }));
               if (isSupportedBlockNode) {
                 focusDecorations.push(_view.Decoration.node(pos, pos + node.nodeSize, {
                   class: "".concat((0, _nodeviews.getBlockAnnotationViewClassname)(isUnresolved, isSelected), " ").concat(isUnresolved)
@@ -255,19 +270,19 @@ var inlineCommentPlugin = exports.inlineCommentPlugin = function inlineCommentPl
                 if ((0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes')) {
                   if (node.isText) {
                     focusDecorations.push(_view.Decoration.inline(pos, pos + node.nodeSize, {
-                      class: "".concat((0, _nodeviews.getAnnotationViewClassname)(isUnresolved, isSelected), " ").concat(isUnresolved),
+                      class: "".concat((0, _nodeviews.getAnnotationViewClassname)(isUnresolved, isSelected, isHovered), " ").concat(isUnresolved),
                       nodeName: 'span'
                     }));
                   } else {
                     focusDecorations.push(_view.Decoration.node(pos, pos + node.nodeSize, {
-                      class: "".concat((0, _nodeviews.getAnnotationViewClassname)(isUnresolved, isSelected), " ").concat(isUnresolved)
+                      class: "".concat((0, _nodeviews.getAnnotationViewClassname)(isUnresolved, isSelected, isHovered), " ").concat(isUnresolved)
                     }, {
                       key: _utils.decorationKey.block
                     }));
                   }
                 } else {
                   focusDecorations.push(_view.Decoration.inline(pos, pos + node.nodeSize, {
-                    class: "".concat((0, _nodeviews.getAnnotationViewClassname)(isUnresolved, isSelected), " ").concat(isUnresolved),
+                    class: "".concat((0, _nodeviews.getAnnotationViewClassname)(isUnresolved, isSelected, isHovered), " ").concat(isUnresolved),
                     nodeName: 'span'
                   }));
                 }

package/dist/cjs/pm-plugins/reducer.js

@@ -60,6 +60,12 @@ var _default = exports.default = function _default(pluginState, action) {
         isInlineCommentViewClosed: false,
         isOpeningMediaCommentFromToolbar: action.data.isOpeningMediaCommentFromToolbar
       });
+    case _types.ACTIONS.SET_HOVERED_ANNOTATION:
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        hoveredAnnotations: (0, _toConsumableArray2.default)(action.data.hoveredAnnotations),
+        skipSelectionHandling: true,
+        isInlineCommentViewClosed: false
+      });
     default:
       return pluginState;
   }

package/dist/cjs/pm-plugins/types.js

@@ -13,5 +13,6 @@ var ACTIONS = exports.ACTIONS = /*#__PURE__*/function (ACTIONS) {
   ACTIONS[ACTIONS["INLINE_COMMENT_SET_VISIBLE"] = 5] = "INLINE_COMMENT_SET_VISIBLE";
   ACTIONS[ACTIONS["CLOSE_COMPONENT"] = 6] = "CLOSE_COMPONENT";
   ACTIONS[ACTIONS["SET_SELECTED_ANNOTATION"] = 7] = "SET_SELECTED_ANNOTATION";
+  ACTIONS[ACTIONS["SET_HOVERED_ANNOTATION"] = 8] = "SET_HOVERED_ANNOTATION";
   return ACTIONS;
 }({});

package/dist/es2019/commands/index.js

@@ -185,6 +185,15 @@ export const setSelectedAnnotation = id => createCommand({
     }]
   }
 });
+export const setHoveredAnnotation = id => createCommand({
+  type: ACTIONS.SET_HOVERED_ANNOTATION,
+  data: {
+    hoveredAnnotations: [{
+      id,
+      type: AnnotationTypes.INLINE_COMMENT
+    }]
+  }
+});
 export const createAnnotation = (editorAnalyticsAPI, editorAPI) => (id, annotationType = AnnotationTypes.INLINE_COMMENT, supportedBlockNodes) => (state, dispatch) => {
   // don't try to add if there are is no temp highlight bookmarked
   const {

package/dist/es2019/nodeviews/index.js

@@ -23,11 +23,17 @@ export class AnnotationNodeView extends ReactNodeView {
     );
   }
 }
-export const getAnnotationViewClassname = (isUnresolved, hasFocus) => {
+export const getAnnotationViewClassname = (isUnresolved, hasFocus, isHovered) => {
   if (!isUnresolved) {
     return;
   }
-  return hasFocus ? AnnotationSharedClassNames.focus : AnnotationSharedClassNames.blur;
+  if (hasFocus) {
+    return AnnotationSharedClassNames.focus;
+  }
+  if (isHovered) {
+    return AnnotationSharedClassNames.hover;
+  }
+  return AnnotationSharedClassNames.blur;
 };
 export const getBlockAnnotationViewClassname = (isUnresolved, hasFocus) => {
   if (!isUnresolved) {

package/dist/es2019/pm-plugins/inline-comment.js

@@ -3,7 +3,7 @@ import { RESOLVE_METHOD } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { clearDirtyMark, closeComponent, setInlineCommentsVisibility, setSelectedAnnotation, updateInlineCommentResolvedState, updateMouseState } from '../commands';
+import { clearDirtyMark, closeComponent, setHoveredAnnotation, setInlineCommentsVisibility, setSelectedAnnotation, updateInlineCommentResolvedState, updateMouseState } from '../commands';
 import { AnnotationNodeView, getAnnotationViewClassname, getBlockAnnotationViewClassname } from '../nodeviews';
 import { decorationKey, getAllAnnotations, getPluginState, inlineCommentPluginKey } from '../utils';
 import { createPluginState } from './plugin-factory';
@@ -33,6 +33,7 @@ const initialState = (disallowOnWhitespace = false, featureFlagsPluginState) =>
   return {
     annotations: {},
     selectedAnnotations: [],
+    hoveredAnnotations: [],
     mouseData: {
       isSelecting: false
     },
@@ -110,11 +111,21 @@ export const inlineCommentPlugin = options => {
           setSelectedAnnotation(annotationId)(editorView.state, editorView.dispatch);
         }
       };
+      const setHoveredAnnotationFn = annotationId => {
+        if (!annotationId) {
+          closeComponent()(editorView.state, editorView.dispatch);
+        } else {
+          setHoveredAnnotation(annotationId)(editorView.state, editorView.dispatch);
+        }
+      };
+      const removeHoveredannotationFn = () => {
+        setHoveredAnnotation('')(editorView.state, editorView.dispatch);
+      };
       const {
         updateSubscriber
       } = provider;
       if (updateSubscriber) {
-        updateSubscriber.on('resolve', resolve).on('delete', resolve).on('unresolve', unResolve).on('create', unResolve).on('setvisibility', setVisibility).on('setselectedannotation', setSelectedAnnotationFn);
+        updateSubscriber.on('resolve', resolve).on('delete', resolve).on('unresolve', unResolve).on('create', unResolve).on('setvisibility', setVisibility).on('setselectedannotation', setSelectedAnnotationFn).on('sethoveredannotation', setHoveredAnnotationFn).on('removehoveredannotation', removeHoveredannotationFn);
       }
 
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -134,7 +145,7 @@ export const inlineCommentPlugin = options => {
           // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
           editorView.root.removeEventListener('mouseup', mouseUp);
           if (updateSubscriber) {
-            updateSubscriber.off('resolve', resolve).off('delete', resolve).off('unresolve', unResolve).off('create', unResolve).off('setvisibility', setVisibility).off('setselectedannotation', setSelectedAnnotationFn);
+            updateSubscriber.off('resolve', resolve).off('delete', resolve).off('unresolve', unResolve).off('create', unResolve).off('setvisibility', setVisibility).off('setselectedannotation', setSelectedAnnotationFn).off('sethoveredannotation', setHoveredAnnotationFn).off('removehoveredannotation', removeHoveredannotationFn);
           }
         }
       };
@@ -165,7 +176,8 @@ export const inlineCommentPlugin = options => {
           annotations,
           selectedAnnotations,
           isVisible,
-          isInlineCommentViewClosed
+          isInlineCommentViewClosed,
+          hoveredAnnotations
         } = getPluginState(state) || {};
         let decorations = draftDecorationSet !== null && draftDecorationSet !== void 0 ? draftDecorationSet : DecorationSet.empty;
         const focusDecorations = [];
@@ -181,6 +193,7 @@ export const inlineCommentPlugin = options => {
             if (isVisible) {
               const isUnresolved = !!annotations && annotations[mark.attrs.id] === false;
               const isSelected = !isInlineCommentViewClosed && !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(selectedAnnotation => selectedAnnotation.id === mark.attrs.id));
+              const isHovered = !isInlineCommentViewClosed && !!(hoveredAnnotations !== null && hoveredAnnotations !== void 0 && hoveredAnnotations.some(hoveredAnnotation => hoveredAnnotation.id === mark.attrs.id));
               if (isSupportedBlockNode) {
                 focusDecorations.push(Decoration.node(pos, pos + node.nodeSize, {
                   class: `${getBlockAnnotationViewClassname(isUnresolved, isSelected)} ${isUnresolved}`
@@ -191,19 +204,19 @@ export const inlineCommentPlugin = options => {
                 if (fg('editor_inline_comments_on_inline_nodes')) {
                   if (node.isText) {
                     focusDecorations.push(Decoration.inline(pos, pos + node.nodeSize, {
-                      class: `${getAnnotationViewClassname(isUnresolved, isSelected)} ${isUnresolved}`,
+                      class: `${getAnnotationViewClassname(isUnresolved, isSelected, isHovered)} ${isUnresolved}`,
                       nodeName: 'span'
                     }));
                   } else {
                     focusDecorations.push(Decoration.node(pos, pos + node.nodeSize, {
-                      class: `${getAnnotationViewClassname(isUnresolved, isSelected)} ${isUnresolved}`
+                      class: `${getAnnotationViewClassname(isUnresolved, isSelected, isHovered)} ${isUnresolved}`
                     }, {
                       key: decorationKey.block
                     }));
                   }
                 } else {
                   focusDecorations.push(Decoration.inline(pos, pos + node.nodeSize, {
-                    class: `${getAnnotationViewClassname(isUnresolved, isSelected)} ${isUnresolved}`,
+                    class: `${getAnnotationViewClassname(isUnresolved, isSelected, isHovered)} ${isUnresolved}`,
                     nodeName: 'span'
                   }));
                 }

package/dist/es2019/pm-plugins/reducer.js

@@ -64,6 +64,13 @@ export default ((pluginState, action) => {
         isInlineCommentViewClosed: false,
         isOpeningMediaCommentFromToolbar: action.data.isOpeningMediaCommentFromToolbar
       };
+    case ACTIONS.SET_HOVERED_ANNOTATION:
+      return {
+        ...pluginState,
+        hoveredAnnotations: [...action.data.hoveredAnnotations],
+        skipSelectionHandling: true,
+        isInlineCommentViewClosed: false
+      };
     default:
       return pluginState;
   }

package/dist/es2019/pm-plugins/types.js

@@ -7,5 +7,6 @@ export let ACTIONS = /*#__PURE__*/function (ACTIONS) {
   ACTIONS[ACTIONS["INLINE_COMMENT_SET_VISIBLE"] = 5] = "INLINE_COMMENT_SET_VISIBLE";
   ACTIONS[ACTIONS["CLOSE_COMPONENT"] = 6] = "CLOSE_COMPONENT";
   ACTIONS[ACTIONS["SET_SELECTED_ANNOTATION"] = 7] = "SET_SELECTED_ANNOTATION";
+  ACTIONS[ACTIONS["SET_HOVERED_ANNOTATION"] = 8] = "SET_HOVERED_ANNOTATION";
   return ACTIONS;
 }({});

package/dist/esm/commands/index.js

@@ -216,6 +216,17 @@ export var setSelectedAnnotation = function setSelectedAnnotation(id) {
     }
   });
 };
+export var setHoveredAnnotation = function setHoveredAnnotation(id) {
+  return createCommand({
+    type: ACTIONS.SET_HOVERED_ANNOTATION,
+    data: {
+      hoveredAnnotations: [{
+        id: id,
+        type: AnnotationTypes.INLINE_COMMENT
+      }]
+    }
+  });
+};
 export var createAnnotation = function createAnnotation(editorAnalyticsAPI, editorAPI) {
   return function (id) {
     var annotationType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : AnnotationTypes.INLINE_COMMENT;

package/dist/esm/nodeviews/index.js

@@ -44,11 +44,17 @@ export var AnnotationNodeView = /*#__PURE__*/function (_ReactNodeView) {
   }]);
   return AnnotationNodeView;
 }(ReactNodeView);
-export var getAnnotationViewClassname = function getAnnotationViewClassname(isUnresolved, hasFocus) {
+export var getAnnotationViewClassname = function getAnnotationViewClassname(isUnresolved, hasFocus, isHovered) {
   if (!isUnresolved) {
     return;
   }
-  return hasFocus ? AnnotationSharedClassNames.focus : AnnotationSharedClassNames.blur;
+  if (hasFocus) {
+    return AnnotationSharedClassNames.focus;
+  }
+  if (isHovered) {
+    return AnnotationSharedClassNames.hover;
+  }
+  return AnnotationSharedClassNames.blur;
 };
 export var getBlockAnnotationViewClassname = function getBlockAnnotationViewClassname(isUnresolved, hasFocus) {
   if (!isUnresolved) {

package/dist/esm/pm-plugins/inline-comment.js

@@ -6,7 +6,7 @@ import { RESOLVE_METHOD } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { clearDirtyMark, closeComponent, setInlineCommentsVisibility, setSelectedAnnotation, updateInlineCommentResolvedState, updateMouseState } from '../commands';
+import { clearDirtyMark, closeComponent, setHoveredAnnotation, setInlineCommentsVisibility, setSelectedAnnotation, updateInlineCommentResolvedState, updateMouseState } from '../commands';
 import { AnnotationNodeView, getAnnotationViewClassname, getBlockAnnotationViewClassname } from '../nodeviews';
 import { decorationKey, getAllAnnotations, getPluginState, inlineCommentPluginKey } from '../utils';
 import { createPluginState } from './plugin-factory';
@@ -75,6 +75,7 @@ var initialState = function initialState() {
   return {
     annotations: {},
     selectedAnnotations: [],
+    hoveredAnnotations: [],
     mouseData: {
       isSelecting: false
     },
@@ -165,9 +166,19 @@ export var inlineCommentPlugin = function inlineCommentPlugin(options) {
           setSelectedAnnotation(annotationId)(editorView.state, editorView.dispatch);
         }
       };
+      var setHoveredAnnotationFn = function setHoveredAnnotationFn(annotationId) {
+        if (!annotationId) {
+          closeComponent()(editorView.state, editorView.dispatch);
+        } else {
+          setHoveredAnnotation(annotationId)(editorView.state, editorView.dispatch);
+        }
+      };
+      var removeHoveredannotationFn = function removeHoveredannotationFn() {
+        setHoveredAnnotation('')(editorView.state, editorView.dispatch);
+      };
       var updateSubscriber = provider.updateSubscriber;
       if (updateSubscriber) {
-        updateSubscriber.on('resolve', resolve).on('delete', resolve).on('unresolve', unResolve).on('create', unResolve).on('setvisibility', setVisibility).on('setselectedannotation', setSelectedAnnotationFn);
+        updateSubscriber.on('resolve', resolve).on('delete', resolve).on('unresolve', unResolve).on('create', unResolve).on('setvisibility', setVisibility).on('setselectedannotation', setSelectedAnnotationFn).on('sethoveredannotation', setHoveredAnnotationFn).on('removehoveredannotation', removeHoveredannotationFn);
       }
 
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -186,7 +197,7 @@ export var inlineCommentPlugin = function inlineCommentPlugin(options) {
           // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
           editorView.root.removeEventListener('mouseup', mouseUp);
           if (updateSubscriber) {
-            updateSubscriber.off('resolve', resolve).off('delete', resolve).off('unresolve', unResolve).off('create', unResolve).off('setvisibility', setVisibility).off('setselectedannotation', setSelectedAnnotationFn);
+            updateSubscriber.off('resolve', resolve).off('delete', resolve).off('unresolve', unResolve).off('create', unResolve).off('setvisibility', setVisibility).off('setselectedannotation', setSelectedAnnotationFn).off('sethoveredannotation', setHoveredAnnotationFn).off('removehoveredannotation', removeHoveredannotationFn);
           }
         }
       };
@@ -219,7 +230,8 @@ export var inlineCommentPlugin = function inlineCommentPlugin(options) {
           annotations = _ref5.annotations,
           selectedAnnotations = _ref5.selectedAnnotations,
           isVisible = _ref5.isVisible,
-          isInlineCommentViewClosed = _ref5.isInlineCommentViewClosed;
+          isInlineCommentViewClosed = _ref5.isInlineCommentViewClosed,
+          hoveredAnnotations = _ref5.hoveredAnnotations;
         var decorations = draftDecorationSet !== null && draftDecorationSet !== void 0 ? draftDecorationSet : DecorationSet.empty;
         var focusDecorations = [];
         state.doc.descendants(function (node, pos) {
@@ -238,6 +250,9 @@ export var inlineCommentPlugin = function inlineCommentPlugin(options) {
               var isSelected = !isInlineCommentViewClosed && !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(function (selectedAnnotation) {
                 return selectedAnnotation.id === mark.attrs.id;
               }));
+              var isHovered = !isInlineCommentViewClosed && !!(hoveredAnnotations !== null && hoveredAnnotations !== void 0 && hoveredAnnotations.some(function (hoveredAnnotation) {
+                return hoveredAnnotation.id === mark.attrs.id;
+              }));
               if (isSupportedBlockNode) {
                 focusDecorations.push(Decoration.node(pos, pos + node.nodeSize, {
                   class: "".concat(getBlockAnnotationViewClassname(isUnresolved, isSelected), " ").concat(isUnresolved)
@@ -248,19 +263,19 @@ export var inlineCommentPlugin = function inlineCommentPlugin(options) {
                 if (fg('editor_inline_comments_on_inline_nodes')) {
                   if (node.isText) {
                     focusDecorations.push(Decoration.inline(pos, pos + node.nodeSize, {
-                      class: "".concat(getAnnotationViewClassname(isUnresolved, isSelected), " ").concat(isUnresolved),
+                      class: "".concat(getAnnotationViewClassname(isUnresolved, isSelected, isHovered), " ").concat(isUnresolved),
                       nodeName: 'span'
                     }));
                   } else {
                     focusDecorations.push(Decoration.node(pos, pos + node.nodeSize, {
-                      class: "".concat(getAnnotationViewClassname(isUnresolved, isSelected), " ").concat(isUnresolved)
+                      class: "".concat(getAnnotationViewClassname(isUnresolved, isSelected, isHovered), " ").concat(isUnresolved)
                     }, {
                       key: decorationKey.block
                     }));
                   }
                 } else {
                   focusDecorations.push(Decoration.inline(pos, pos + node.nodeSize, {
-                    class: "".concat(getAnnotationViewClassname(isUnresolved, isSelected), " ").concat(isUnresolved),
+                    class: "".concat(getAnnotationViewClassname(isUnresolved, isSelected, isHovered), " ").concat(isUnresolved),
                     nodeName: 'span'
                   }));
                 }

package/dist/esm/pm-plugins/reducer.js

@@ -53,6 +53,12 @@ export default (function (pluginState, action) {
         isInlineCommentViewClosed: false,
         isOpeningMediaCommentFromToolbar: action.data.isOpeningMediaCommentFromToolbar
       });
+    case ACTIONS.SET_HOVERED_ANNOTATION:
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        hoveredAnnotations: _toConsumableArray(action.data.hoveredAnnotations),
+        skipSelectionHandling: true,
+        isInlineCommentViewClosed: false
+      });
     default:
       return pluginState;
   }

package/dist/esm/pm-plugins/types.js

@@ -7,5 +7,6 @@ export var ACTIONS = /*#__PURE__*/function (ACTIONS) {
   ACTIONS[ACTIONS["INLINE_COMMENT_SET_VISIBLE"] = 5] = "INLINE_COMMENT_SET_VISIBLE";
   ACTIONS[ACTIONS["CLOSE_COMPONENT"] = 6] = "CLOSE_COMPONENT";
   ACTIONS[ACTIONS["SET_SELECTED_ANNOTATION"] = 7] = "SET_SELECTED_ANNOTATION";
+  ACTIONS[ACTIONS["SET_HOVERED_ANNOTATION"] = 8] = "SET_HOVERED_ANNOTATION";
   return ACTIONS;
 }({});

package/dist/types/commands/index.d.ts

@@ -18,5 +18,6 @@ export declare const setInlineCommentDraftState: (editorAnalyticsAPI: EditorAnal
 export declare const addInlineComment: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorAPI?: ExtractInjectionAPI<AnnotationPlugin> | undefined) => (id: string, supportedBlockNodes?: string[]) => Command;
 export declare const updateMouseState: (mouseData: InlineCommentMouseData) => Command;
 export declare const setSelectedAnnotation: (id: string) => Command;
+export declare const setHoveredAnnotation: (id: string) => Command;
 export declare const createAnnotation: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorAPI?: ExtractInjectionAPI<AnnotationPlugin> | undefined) => (id: string, annotationType?: AnnotationTypes, supportedBlockNodes?: string[]) => Command;
 export declare const setInlineCommentsVisibility: (isVisible: boolean) => Command;

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

@@ -8,5 +8,5 @@ export declare class AnnotationNodeView extends ReactNodeView {
     };
     render(_props: {}, forwardRef: ForwardRef): JSX.Element;
 }
-export declare const getAnnotationViewClassname: (isUnresolved: boolean, hasFocus: boolean) => string | undefined;
+export declare const getAnnotationViewClassname: (isUnresolved: boolean, hasFocus: boolean, isHovered: boolean) => string | undefined;
 export declare const getBlockAnnotationViewClassname: (isUnresolved: boolean, hasFocus: boolean) => string | undefined;

package/dist/types/pm-plugins/types.d.ts

@@ -13,7 +13,8 @@ export declare enum ACTIONS {
     ADD_INLINE_COMMENT = 4,
     INLINE_COMMENT_SET_VISIBLE = 5,
     CLOSE_COMPONENT = 6,
-    SET_SELECTED_ANNOTATION = 7
+    SET_SELECTED_ANNOTATION = 7,
+    SET_HOVERED_ANNOTATION = 8
 }
 export interface InlineCommentPluginOptions {
     dispatch: Dispatch;
@@ -71,6 +72,12 @@ export type InlineCommentAction = {
         selectAnnotationMethod?: VIEW_METHOD;
         isOpeningMediaCommentFromToolbar?: boolean;
     };
+} | {
+    type: ACTIONS.SET_HOVERED_ANNOTATION;
+    data: {
+        hoveredAnnotations: AnnotationInfo[];
+        selectAnnotationMethod?: VIEW_METHOD;
+    };
 };
 export type InlineCommentPluginState = {
     annotations: InlineCommentMap;
@@ -79,6 +86,7 @@ export type InlineCommentPluginState = {
     mouseData: InlineCommentMouseData;
     draftDecorationSet?: DecorationSet;
     bookmark?: SelectionBookmark;
+    hoveredAnnotations?: AnnotationInfo[];
     disallowOnWhitespace: boolean;
     isInlineCommentViewClosed: boolean;
     isVisible: boolean;

package/dist/types-ts4.5/commands/index.d.ts

@@ -18,5 +18,6 @@ export declare const setInlineCommentDraftState: (editorAnalyticsAPI: EditorAnal
 export declare const addInlineComment: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorAPI?: ExtractInjectionAPI<AnnotationPlugin> | undefined) => (id: string, supportedBlockNodes?: string[]) => Command;
 export declare const updateMouseState: (mouseData: InlineCommentMouseData) => Command;
 export declare const setSelectedAnnotation: (id: string) => Command;
+export declare const setHoveredAnnotation: (id: string) => Command;
 export declare const createAnnotation: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorAPI?: ExtractInjectionAPI<AnnotationPlugin> | undefined) => (id: string, annotationType?: AnnotationTypes, supportedBlockNodes?: string[]) => Command;
 export declare const setInlineCommentsVisibility: (isVisible: boolean) => Command;

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

@@ -8,5 +8,5 @@ export declare class AnnotationNodeView extends ReactNodeView {
     };
     render(_props: {}, forwardRef: ForwardRef): JSX.Element;
 }
-export declare const getAnnotationViewClassname: (isUnresolved: boolean, hasFocus: boolean) => string | undefined;
+export declare const getAnnotationViewClassname: (isUnresolved: boolean, hasFocus: boolean, isHovered: boolean) => string | undefined;
 export declare const getBlockAnnotationViewClassname: (isUnresolved: boolean, hasFocus: boolean) => string | undefined;

package/dist/types-ts4.5/pm-plugins/types.d.ts

@@ -13,7 +13,8 @@ export declare enum ACTIONS {
     ADD_INLINE_COMMENT = 4,
     INLINE_COMMENT_SET_VISIBLE = 5,
     CLOSE_COMPONENT = 6,
-    SET_SELECTED_ANNOTATION = 7
+    SET_SELECTED_ANNOTATION = 7,
+    SET_HOVERED_ANNOTATION = 8
 }
 export interface InlineCommentPluginOptions {
     dispatch: Dispatch;
@@ -71,6 +72,12 @@ export type InlineCommentAction = {
         selectAnnotationMethod?: VIEW_METHOD;
         isOpeningMediaCommentFromToolbar?: boolean;
     };
+} | {
+    type: ACTIONS.SET_HOVERED_ANNOTATION;
+    data: {
+        hoveredAnnotations: AnnotationInfo[];
+        selectAnnotationMethod?: VIEW_METHOD;
+    };
 };
 export type InlineCommentPluginState = {
     annotations: InlineCommentMap;
@@ -79,6 +86,7 @@ export type InlineCommentPluginState = {
     mouseData: InlineCommentMouseData;
     draftDecorationSet?: DecorationSet;
     bookmark?: SelectionBookmark;
+    hoveredAnnotations?: AnnotationInfo[];
     disallowOnWhitespace: boolean;
     isInlineCommentViewClosed: boolean;
     isVisible: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-annotation",
-	"version": "1.24.1",
+	"version": "1.25.0",
 	"description": "Annotation plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,13 +32,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^44.2.0",
-		"@atlaskit/editor-common": "^95.0.0",
+		"@atlaskit/editor-common": "^95.4.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-editor-viewmode-effects": "^1.1.0",
 		"@atlaskit/editor-plugin-engagement-platform": "^2.1.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.2.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
-		"@atlaskit/icon": "^22.24.0",
+		"@atlaskit/icon": "^22.25.0",
 		"@atlaskit/onboarding": "^12.1.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/tmp-editor-statsig": "^2.19.0",