@atlaskit/editor-plugin-annotation 1.5.0 → 1.5.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-annotation
 
+## 1.5.2
+
+### Patch Changes
+
+- [#84685](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/84685) [`8884904b3f36`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8884904b3f36) - fix insert annotation analytics to include selectionType and nodeLocation
+
+## 1.5.1
+
+### Patch Changes
+
+- [#83942](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83942) [`210a84148721`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/210a84148721) - [ED-22547] Publish draft comment for media node when saving
+
 ## 1.5.0
 
 ### Minor Changes

package/dist/cjs/commands/index.js

@@ -152,7 +152,7 @@ var setInlineCommentDraftState = exports.setInlineCommentDraftState = function s
   };
 };
 var addInlineComment = exports.addInlineComment = function addInlineComment(editorAnalyticsAPI, editorAPI) {
-  return function (id) {
+  return function (id, supportedBlockNodes) {
     var commandAction = function commandAction(editorState) {
       return {
         type: _types.ACTIONS.ADD_INLINE_COMMENT,
@@ -169,7 +169,7 @@ var addInlineComment = exports.addInlineComment = function addInlineComment(edit
         }
       };
     };
-    return (0, _pluginFactory.createCommand)(commandAction, _transform.default.addInlineComment(editorAnalyticsAPI, editorAPI)(id));
+    return (0, _pluginFactory.createCommand)(commandAction, _transform.default.addInlineComment(editorAnalyticsAPI, editorAPI)(id, supportedBlockNodes));
   };
 };
 var updateMouseState = exports.updateMouseState = function updateMouseState(mouseData) {
@@ -194,6 +194,7 @@ var setSelectedAnnotation = exports.setSelectedAnnotation = function setSelected
 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;
+    var supportedBlockNodes = arguments.length > 2 ? arguments[2] : undefined;
     return function (state, dispatch) {
       // don't try to add if there are is no temp highlight bookmarked
       var _ref = (0, _utils.getPluginState)(state) || {},
@@ -202,7 +203,7 @@ var createAnnotation = exports.createAnnotation = function createAnnotation(edit
         return false;
       }
       if (annotationType === _adfSchema.AnnotationTypes.INLINE_COMMENT) {
-        return addInlineComment(editorAnalyticsAPI, editorAPI)(id)(state, dispatch);
+        return addInlineComment(editorAnalyticsAPI, editorAPI)(id, supportedBlockNodes)(state, dispatch);
       }
       return false;
     };

package/dist/cjs/commands/transform.js

@@ -9,29 +9,39 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _mark = require("@atlaskit/editor-common/mark");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("../utils");
-var addAnnotationMark = function addAnnotationMark(id) {
+var addAnnotationMark = function addAnnotationMark(id, supportedBlockNodes) {
   return function (transaction, state) {
     var inlineCommentState = (0, _utils.getPluginState)(state);
-    var _getSelectionPosition = (0, _utils.getSelectionPositions)(state, inlineCommentState),
-      from = _getSelectionPosition.from,
-      to = _getSelectionPosition.to,
-      head = _getSelectionPosition.head;
+    var _ref = inlineCommentState || {},
+      bookmark = _ref.bookmark;
     var annotationMark = state.schema.marks.annotation.create({
       id: id,
       type: _adfSchema.AnnotationTypes.INLINE_COMMENT
     });
-    // Apply the mark only to text node in the range.
-    var tr = (0, _mark.applyMarkOnRange)(from, to, false, annotationMark, transaction);
-    // set selection back to the end of annotation once annotation mark is applied
-    tr.setSelection(_state.TextSelection.create(tr.doc, head));
+    var _resolveDraftBookmark = (0, _utils.resolveDraftBookmark)(state, bookmark, supportedBlockNodes),
+      from = _resolveDraftBookmark.from,
+      to = _resolveDraftBookmark.to,
+      head = _resolveDraftBookmark.head,
+      isBlockNode = _resolveDraftBookmark.isBlockNode;
+    var tr = transaction;
+    if (isBlockNode) {
+      tr = tr.addNodeMark(from, annotationMark);
+      // Set selection on the node so that we can display view component
+      tr.setSelection(_state.NodeSelection.create(tr.doc, from));
+    } else {
+      // Apply the mark only to text node in the range.
+      var _tr = (0, _mark.applyMarkOnRange)(from, to, false, annotationMark, transaction);
+      // set selection back to the end of annotation once annotation mark is applied
+      _tr.setSelection(_state.TextSelection.create(_tr.doc, head));
+    }
     return tr;
   };
 };
 var addInlineComment = function addInlineComment(editorAnalyticsAPI, editorAPI) {
-  return function (id) {
+  return function (id, supportedBlockNodes) {
     return function (transaction, state) {
       var _editorAPI$editorView;
-      var tr = addAnnotationMark(id)(transaction, state);
+      var tr = addAnnotationMark(id, supportedBlockNodes)(transaction, state);
       editorAPI === null || editorAPI === void 0 || (_editorAPI$editorView = editorAPI.editorViewMode) === null || _editorAPI$editorView === void 0 || _editorAPI$editorView.actions.applyViewModeStepAt(tr);
 
       // add insert analytics step to transaction
@@ -58,7 +68,8 @@ var addInsertAnalytics = function addInsertAnalytics(editorAnalyticsAPI) {
       action: _analytics.ACTION.INSERTED,
       actionSubject: _analytics.ACTION_SUBJECT.ANNOTATION,
       eventType: _analytics.EVENT_TYPE.TRACK,
-      actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
+      attributes: {}
     })(transaction);
     return transaction;
   };

package/dist/cjs/pm-plugins/plugin-factory.js

@@ -22,6 +22,7 @@ var handleDocChanged = function handleDocChanged(tr, prevPluginState) {
 };
 var getSelectionChangedHandler = function getSelectionChangedHandler(reopenCommentView) {
   return function (tr, pluginState) {
+    var _pluginState$featureF;
     if (pluginState.skipSelectionHandling) {
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         skipSelectionHandling: false
@@ -29,11 +30,14 @@ var getSelectionChangedHandler = function getSelectionChangedHandler(reopenComme
         isInlineCommentViewClosed: false
       });
     }
-
-    /**
-     * Default we only handle caret selections.
-     * Node selection will be handled separately.
-     */
+    if ((_pluginState$featureF = pluginState.featureFlagsPluginState) !== null && _pluginState$featureF !== void 0 && _pluginState$featureF.commentsOnMedia &&
+    // If pluginState.selectedAnnotations is annotations of block node, i.e. when a new comment is created,
+    // we keep it as it is so that we can show comment view component with the newly created comment
+    (0, _utils2.isBlockNodeAnnotationsSelected)(tr.selection, pluginState.selectedAnnotations)) {
+      return _objectSpread(_objectSpread({}, pluginState), reopenCommentView && {
+        isInlineCommentViewClosed: false
+      });
+    }
     var selectedAnnotations = (0, _utils2.findAnnotationsInSelection)(tr.selection, tr.doc);
     if (selectedAnnotations.length === 0) {
       return _objectSpread(_objectSpread({}, pluginState), {}, {

package/dist/cjs/ui/InlineCommentView.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.InlineCommentView = InlineCommentView;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _commands = require("../commands");
@@ -91,7 +92,7 @@ function InlineCommentView(_ref) {
       dom: dom,
       textSelection: textSelection,
       onCreate: function onCreate(id) {
-        (0, _commands.createAnnotation)(editorAnalyticsAPI, editorAPI)(id)(editorView.state, editorView.dispatch);
+        (0, _commands.createAnnotation)(editorAnalyticsAPI, editorAPI)(id, _adfSchema.AnnotationTypes.INLINE_COMMENT, inlineCommentProvider.supportedBlockNodes)(editorView.state, editorView.dispatch);
         !editorView.hasFocus() && editorView.focus();
       },
       onClose: function onClose() {

package/dist/cjs/utils.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "hasAnnotationMark", {
 });
 exports.hasInvalidNodes = void 0;
 exports.hasInvalidWhitespaceNode = hasInvalidWhitespaceNode;
-exports.isCurrentBlockNodeSelected = exports.inlineCommentPluginKey = void 0;
+exports.isCurrentBlockNodeSelected = exports.isBlockNodeAnnotationsSelected = exports.inlineCommentPluginKey = void 0;
 exports.isSelectedAnnotationsChanged = isSelectedAnnotationsChanged;
 exports.resolveDraftBookmark = exports.isSupportedBlockNode = exports.isSelectionValid = void 0;
 exports.stripNonExistingAnnotations = stripNonExistingAnnotations;
@@ -202,14 +202,15 @@ var findAnnotationsInSelection = exports.findAnnotationsInSelection = function f
 var resolveDraftBookmark = exports.resolveDraftBookmark = function resolveDraftBookmark(editorState, bookmark) {
   var supportedBlockNodes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   var doc = editorState.doc;
-  var resolvedBookmark = bookmark.resolve(doc);
+  var resolvedBookmark = bookmark ? bookmark.resolve(doc) : editorState.selection;
   var from = resolvedBookmark.from,
     to = resolvedBookmark.to,
     head = resolvedBookmark.head;
   var draftBookmark = {
     from: from,
     to: to,
-    head: head
+    head: head,
+    isBlockNode: false
   };
   if (resolvedBookmark instanceof _state.NodeSelection) {
     // It's possible that annotation is only allowed in child node instead parent (e.g. mediaSingle vs media),
@@ -225,7 +226,8 @@ var resolveDraftBookmark = exports.resolveDraftBookmark = function resolveDraftB
         draftBookmark = {
           from: pos,
           to: nodeEndsAt,
-          head: nodeEndsAt
+          head: nodeEndsAt,
+          isBlockNode: node.isBlock
         };
         nodeFound = true;
         return false;
@@ -444,4 +446,24 @@ function isSelectedAnnotationsChanged(oldSelectedAnnotations, newSelectedAnnotat
       return annotation.id === pluginStateAnnotation.id && annotation.type === pluginStateAnnotation.type;
     });
   });
-}
+}
+
+/**
+ * Checks if the selectedAnnotations are the same as the annotations on the selected block node
+ */
+var isBlockNodeAnnotationsSelected = exports.isBlockNodeAnnotationsSelected = function isBlockNodeAnnotationsSelected(selection) {
+  var selectedAnnotations = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  if (selectedAnnotations.length && selection instanceof _state.NodeSelection) {
+    var node = selection.node.type.name === 'mediaSingle' ? selection.node.firstChild : selection.node;
+    var annotationMarks = (node === null || node === void 0 ? void 0 : node.marks.filter(function (mark) {
+      return mark.type.name === 'annotation';
+    }).map(function (mark) {
+      return {
+        id: mark.attrs.id,
+        type: mark.attrs.annotationType
+      };
+    })) || [];
+    return !isSelectedAnnotationsChanged(selectedAnnotations, annotationMarks);
+  }
+  return false;
+};

package/dist/es2019/commands/index.js

@@ -124,7 +124,7 @@ export const setInlineCommentDraftState = (editorAnalyticsAPI, supportedBlockNod
   const commandAction = getDraftCommandAction(drafting, targetType, isCommentOnMediaOn, supportedBlockNodes);
   return createCommand(commandAction, transform.addOpenCloseAnalytics(editorAnalyticsAPI)(drafting, inputMethod));
 };
-export const addInlineComment = (editorAnalyticsAPI, editorAPI) => id => {
+export const addInlineComment = (editorAnalyticsAPI, editorAPI) => (id, supportedBlockNodes) => {
   const commandAction = editorState => ({
     type: ACTIONS.ADD_INLINE_COMMENT,
     data: {
@@ -141,7 +141,7 @@ export const addInlineComment = (editorAnalyticsAPI, editorAPI) => id => {
       editorState
     }
   });
-  return createCommand(commandAction, transform.addInlineComment(editorAnalyticsAPI, editorAPI)(id));
+  return createCommand(commandAction, transform.addInlineComment(editorAnalyticsAPI, editorAPI)(id, supportedBlockNodes));
 };
 export const updateMouseState = mouseData => createCommand({
   type: ACTIONS.INLINE_COMMENT_UPDATE_MOUSE_STATE,
@@ -158,7 +158,7 @@ export const setSelectedAnnotation = id => createCommand({
     }]
   }
 });
-export const createAnnotation = (editorAnalyticsAPI, editorAPI) => (id, annotationType = AnnotationTypes.INLINE_COMMENT) => (state, dispatch) => {
+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 {
     bookmark
@@ -167,7 +167,7 @@ export const createAnnotation = (editorAnalyticsAPI, editorAPI) => (id, annotati
     return false;
   }
   if (annotationType === AnnotationTypes.INLINE_COMMENT) {
-    return addInlineComment(editorAnalyticsAPI, editorAPI)(id)(state, dispatch);
+    return addInlineComment(editorAnalyticsAPI, editorAPI)(id, supportedBlockNodes)(state, dispatch);
   }
   return false;
 };

package/dist/es2019/commands/transform.js

@@ -1,28 +1,39 @@
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { applyMarkOnRange } from '@atlaskit/editor-common/mark';
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
-import { getDraftCommandAnalyticsPayload, getPluginState, getSelectionPositions } from '../utils';
-const addAnnotationMark = id => (transaction, state) => {
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { getDraftCommandAnalyticsPayload, getPluginState, resolveDraftBookmark } from '../utils';
+const addAnnotationMark = (id, supportedBlockNodes) => (transaction, state) => {
   const inlineCommentState = getPluginState(state);
   const {
-    from,
-    to,
-    head
-  } = getSelectionPositions(state, inlineCommentState);
+    bookmark
+  } = inlineCommentState || {};
   const annotationMark = state.schema.marks.annotation.create({
     id,
     type: AnnotationTypes.INLINE_COMMENT
   });
-  // Apply the mark only to text node in the range.
-  let tr = applyMarkOnRange(from, to, false, annotationMark, transaction);
-  // set selection back to the end of annotation once annotation mark is applied
-  tr.setSelection(TextSelection.create(tr.doc, head));
+  const {
+    from,
+    to,
+    head,
+    isBlockNode
+  } = resolveDraftBookmark(state, bookmark, supportedBlockNodes);
+  let tr = transaction;
+  if (isBlockNode) {
+    tr = tr.addNodeMark(from, annotationMark);
+    // Set selection on the node so that we can display view component
+    tr.setSelection(NodeSelection.create(tr.doc, from));
+  } else {
+    // Apply the mark only to text node in the range.
+    let tr = applyMarkOnRange(from, to, false, annotationMark, transaction);
+    // set selection back to the end of annotation once annotation mark is applied
+    tr.setSelection(TextSelection.create(tr.doc, head));
+  }
   return tr;
 };
-const addInlineComment = (editorAnalyticsAPI, editorAPI) => id => (transaction, state) => {
+const addInlineComment = (editorAnalyticsAPI, editorAPI) => (id, supportedBlockNodes) => (transaction, state) => {
   var _editorAPI$editorView;
-  let tr = addAnnotationMark(id)(transaction, state);
+  let tr = addAnnotationMark(id, supportedBlockNodes)(transaction, state);
   editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$editorView = editorAPI.editorViewMode) === null || _editorAPI$editorView === void 0 ? void 0 : _editorAPI$editorView.actions.applyViewModeStepAt(tr);
 
   // add insert analytics step to transaction
@@ -41,7 +52,8 @@ const addInsertAnalytics = editorAnalyticsAPI => (transaction, state) => {
     action: ACTION.INSERTED,
     actionSubject: ACTION_SUBJECT.ANNOTATION,
     eventType: EVENT_TYPE.TRACK,
-    actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT
+    actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
+    attributes: {}
   })(transaction);
   return transaction;
 };

package/dist/es2019/pm-plugins/plugin-factory.js

@@ -1,6 +1,6 @@
 import { pluginFactory } from '@atlaskit/editor-common/utils';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { decorationKey, findAnnotationsInSelection, inlineCommentPluginKey, isSelectedAnnotationsChanged } from '../utils';
+import { decorationKey, findAnnotationsInSelection, inlineCommentPluginKey, isBlockNodeAnnotationsSelected, isSelectedAnnotationsChanged } from '../utils';
 import reducer from './reducer';
 const handleDocChanged = (tr, prevPluginState) => {
   if (!tr.getMeta('replaceDocument')) {
@@ -12,6 +12,7 @@ const handleDocChanged = (tr, prevPluginState) => {
   };
 };
 const getSelectionChangedHandler = reopenCommentView => (tr, pluginState) => {
+  var _pluginState$featureF;
   if (pluginState.skipSelectionHandling) {
     return {
       ...pluginState,
@@ -21,11 +22,17 @@ const getSelectionChangedHandler = reopenCommentView => (tr, pluginState) => {
       })
     };
   }
-
-  /**
-   * Default we only handle caret selections.
-   * Node selection will be handled separately.
-   */
+  if ((_pluginState$featureF = pluginState.featureFlagsPluginState) !== null && _pluginState$featureF !== void 0 && _pluginState$featureF.commentsOnMedia &&
+  // If pluginState.selectedAnnotations is annotations of block node, i.e. when a new comment is created,
+  // we keep it as it is so that we can show comment view component with the newly created comment
+  isBlockNodeAnnotationsSelected(tr.selection, pluginState.selectedAnnotations)) {
+    return {
+      ...pluginState,
+      ...(reopenCommentView && {
+        isInlineCommentViewClosed: false
+      })
+    };
+  }
   const selectedAnnotations = findAnnotationsInSelection(tr.selection, tr.doc);
   if (selectedAnnotations.length === 0) {
     return {

package/dist/es2019/ui/InlineCommentView.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, CONTENT_COMPONENT, EVENT_TYPE, RESOLVE_METHOD } from '@atlaskit/editor-common/analytics';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { closeComponent, createAnnotation, removeInlineCommentNearSelection, setInlineCommentDraftState, updateInlineCommentResolvedState } from '../commands';
@@ -91,7 +92,7 @@ export function InlineCommentView({
       dom: dom,
       textSelection: textSelection,
       onCreate: id => {
-        createAnnotation(editorAnalyticsAPI, editorAPI)(id)(editorView.state, editorView.dispatch);
+        createAnnotation(editorAnalyticsAPI, editorAPI)(id, AnnotationTypes.INLINE_COMMENT, inlineCommentProvider.supportedBlockNodes)(editorView.state, editorView.dispatch);
         !editorView.hasFocus() && editorView.focus();
       },
       onClose: () => {

package/dist/es2019/utils.js

@@ -162,7 +162,7 @@ export const resolveDraftBookmark = (editorState, bookmark, supportedBlockNodes
   const {
     doc
   } = editorState;
-  const resolvedBookmark = bookmark.resolve(doc);
+  const resolvedBookmark = bookmark ? bookmark.resolve(doc) : editorState.selection;
   const {
     from,
     to,
@@ -171,7 +171,8 @@ export const resolveDraftBookmark = (editorState, bookmark, supportedBlockNodes
   let draftBookmark = {
     from,
     to,
-    head
+    head,
+    isBlockNode: false
   };
   if (resolvedBookmark instanceof NodeSelection) {
     // It's possible that annotation is only allowed in child node instead parent (e.g. mediaSingle vs media),
@@ -187,7 +188,8 @@ export const resolveDraftBookmark = (editorState, bookmark, supportedBlockNodes
         draftBookmark = {
           from: pos,
           to: nodeEndsAt,
-          head: nodeEndsAt
+          head: nodeEndsAt,
+          isBlockNode: node.isBlock
         };
         nodeFound = true;
         return false;
@@ -408,4 +410,19 @@ export function isSelectedAnnotationsChanged(oldSelectedAnnotations, newSelected
   return newSelectedAnnotations.length !== oldSelectedAnnotations.length ||
   // assuming annotations have unique id's for simplicity
   newSelectedAnnotations.some(annotation => !oldSelectedAnnotations.find(pluginStateAnnotation => annotation.id === pluginStateAnnotation.id && annotation.type === pluginStateAnnotation.type));
-}
+}
+
+/**
+ * Checks if the selectedAnnotations are the same as the annotations on the selected block node
+ */
+export const isBlockNodeAnnotationsSelected = (selection, selectedAnnotations = []) => {
+  if (selectedAnnotations.length && selection instanceof NodeSelection) {
+    const node = selection.node.type.name === 'mediaSingle' ? selection.node.firstChild : selection.node;
+    const annotationMarks = (node === null || node === void 0 ? void 0 : node.marks.filter(mark => mark.type.name === 'annotation').map(mark => ({
+      id: mark.attrs.id,
+      type: mark.attrs.annotationType
+    }))) || [];
+    return !isSelectedAnnotationsChanged(selectedAnnotations, annotationMarks);
+  }
+  return false;
+};

package/dist/esm/commands/index.js

@@ -145,7 +145,7 @@ export var setInlineCommentDraftState = function setInlineCommentDraftState(edit
   };
 };
 export var addInlineComment = function addInlineComment(editorAnalyticsAPI, editorAPI) {
-  return function (id) {
+  return function (id, supportedBlockNodes) {
     var commandAction = function commandAction(editorState) {
       return {
         type: ACTIONS.ADD_INLINE_COMMENT,
@@ -162,7 +162,7 @@ export var addInlineComment = function addInlineComment(editorAnalyticsAPI, edit
         }
       };
     };
-    return createCommand(commandAction, transform.addInlineComment(editorAnalyticsAPI, editorAPI)(id));
+    return createCommand(commandAction, transform.addInlineComment(editorAnalyticsAPI, editorAPI)(id, supportedBlockNodes));
   };
 };
 export var updateMouseState = function updateMouseState(mouseData) {
@@ -187,6 +187,7 @@ export var setSelectedAnnotation = function setSelectedAnnotation(id) {
 export var createAnnotation = function createAnnotation(editorAnalyticsAPI, editorAPI) {
   return function (id) {
     var annotationType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : AnnotationTypes.INLINE_COMMENT;
+    var supportedBlockNodes = arguments.length > 2 ? arguments[2] : undefined;
     return function (state, dispatch) {
       // don't try to add if there are is no temp highlight bookmarked
       var _ref = getPluginState(state) || {},
@@ -195,7 +196,7 @@ export var createAnnotation = function createAnnotation(editorAnalyticsAPI, edit
         return false;
       }
       if (annotationType === AnnotationTypes.INLINE_COMMENT) {
-        return addInlineComment(editorAnalyticsAPI, editorAPI)(id)(state, dispatch);
+        return addInlineComment(editorAnalyticsAPI, editorAPI)(id, supportedBlockNodes)(state, dispatch);
       }
       return false;
     };

package/dist/esm/commands/transform.js

@@ -1,31 +1,41 @@
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { applyMarkOnRange } from '@atlaskit/editor-common/mark';
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
-import { getDraftCommandAnalyticsPayload, getPluginState, getSelectionPositions } from '../utils';
-var addAnnotationMark = function addAnnotationMark(id) {
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { getDraftCommandAnalyticsPayload, getPluginState, resolveDraftBookmark } from '../utils';
+var addAnnotationMark = function addAnnotationMark(id, supportedBlockNodes) {
   return function (transaction, state) {
     var inlineCommentState = getPluginState(state);
-    var _getSelectionPosition = getSelectionPositions(state, inlineCommentState),
-      from = _getSelectionPosition.from,
-      to = _getSelectionPosition.to,
-      head = _getSelectionPosition.head;
+    var _ref = inlineCommentState || {},
+      bookmark = _ref.bookmark;
     var annotationMark = state.schema.marks.annotation.create({
       id: id,
       type: AnnotationTypes.INLINE_COMMENT
     });
-    // Apply the mark only to text node in the range.
-    var tr = applyMarkOnRange(from, to, false, annotationMark, transaction);
-    // set selection back to the end of annotation once annotation mark is applied
-    tr.setSelection(TextSelection.create(tr.doc, head));
+    var _resolveDraftBookmark = resolveDraftBookmark(state, bookmark, supportedBlockNodes),
+      from = _resolveDraftBookmark.from,
+      to = _resolveDraftBookmark.to,
+      head = _resolveDraftBookmark.head,
+      isBlockNode = _resolveDraftBookmark.isBlockNode;
+    var tr = transaction;
+    if (isBlockNode) {
+      tr = tr.addNodeMark(from, annotationMark);
+      // Set selection on the node so that we can display view component
+      tr.setSelection(NodeSelection.create(tr.doc, from));
+    } else {
+      // Apply the mark only to text node in the range.
+      var _tr = applyMarkOnRange(from, to, false, annotationMark, transaction);
+      // set selection back to the end of annotation once annotation mark is applied
+      _tr.setSelection(TextSelection.create(_tr.doc, head));
+    }
     return tr;
   };
 };
 var addInlineComment = function addInlineComment(editorAnalyticsAPI, editorAPI) {
-  return function (id) {
+  return function (id, supportedBlockNodes) {
     return function (transaction, state) {
       var _editorAPI$editorView;
-      var tr = addAnnotationMark(id)(transaction, state);
+      var tr = addAnnotationMark(id, supportedBlockNodes)(transaction, state);
       editorAPI === null || editorAPI === void 0 || (_editorAPI$editorView = editorAPI.editorViewMode) === null || _editorAPI$editorView === void 0 || _editorAPI$editorView.actions.applyViewModeStepAt(tr);
 
       // add insert analytics step to transaction
@@ -52,7 +62,8 @@ var addInsertAnalytics = function addInsertAnalytics(editorAnalyticsAPI) {
       action: ACTION.INSERTED,
       actionSubject: ACTION_SUBJECT.ANNOTATION,
       eventType: EVENT_TYPE.TRACK,
-      actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT
+      actionSubjectId: ACTION_SUBJECT_ID.INLINE_COMMENT,
+      attributes: {}
     })(transaction);
     return transaction;
   };

package/dist/esm/pm-plugins/plugin-factory.js

@@ -3,7 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { pluginFactory } from '@atlaskit/editor-common/utils';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { decorationKey, findAnnotationsInSelection, inlineCommentPluginKey, isSelectedAnnotationsChanged } from '../utils';
+import { decorationKey, findAnnotationsInSelection, inlineCommentPluginKey, isBlockNodeAnnotationsSelected, isSelectedAnnotationsChanged } from '../utils';
 import reducer from './reducer';
 var handleDocChanged = function handleDocChanged(tr, prevPluginState) {
   if (!tr.getMeta('replaceDocument')) {
@@ -15,6 +15,7 @@ var handleDocChanged = function handleDocChanged(tr, prevPluginState) {
 };
 var getSelectionChangedHandler = function getSelectionChangedHandler(reopenCommentView) {
   return function (tr, pluginState) {
+    var _pluginState$featureF;
     if (pluginState.skipSelectionHandling) {
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         skipSelectionHandling: false
@@ -22,11 +23,14 @@ var getSelectionChangedHandler = function getSelectionChangedHandler(reopenComme
         isInlineCommentViewClosed: false
       });
     }
-
-    /**
-     * Default we only handle caret selections.
-     * Node selection will be handled separately.
-     */
+    if ((_pluginState$featureF = pluginState.featureFlagsPluginState) !== null && _pluginState$featureF !== void 0 && _pluginState$featureF.commentsOnMedia &&
+    // If pluginState.selectedAnnotations is annotations of block node, i.e. when a new comment is created,
+    // we keep it as it is so that we can show comment view component with the newly created comment
+    isBlockNodeAnnotationsSelected(tr.selection, pluginState.selectedAnnotations)) {
+      return _objectSpread(_objectSpread({}, pluginState), reopenCommentView && {
+        isInlineCommentViewClosed: false
+      });
+    }
     var selectedAnnotations = findAnnotationsInSelection(tr.selection, tr.doc);
     if (selectedAnnotations.length === 0) {
       return _objectSpread(_objectSpread({}, pluginState), {}, {

package/dist/esm/ui/InlineCommentView.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, CONTENT_COMPONENT, EVENT_TYPE, RESOLVE_METHOD } from '@atlaskit/editor-common/analytics';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { closeComponent, createAnnotation, removeInlineCommentNearSelection, setInlineCommentDraftState, updateInlineCommentResolvedState } from '../commands';
@@ -84,7 +85,7 @@ export function InlineCommentView(_ref) {
       dom: dom,
       textSelection: textSelection,
       onCreate: function onCreate(id) {
-        createAnnotation(editorAnalyticsAPI, editorAPI)(id)(editorView.state, editorView.dispatch);
+        createAnnotation(editorAnalyticsAPI, editorAPI)(id, AnnotationTypes.INLINE_COMMENT, inlineCommentProvider.supportedBlockNodes)(editorView.state, editorView.dispatch);
         !editorView.hasFocus() && editorView.focus();
       },
       onClose: function onClose() {

package/dist/esm/utils.js

@@ -175,14 +175,15 @@ export var findAnnotationsInSelection = function findAnnotationsInSelection(sele
 export var resolveDraftBookmark = function resolveDraftBookmark(editorState, bookmark) {
   var supportedBlockNodes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   var doc = editorState.doc;
-  var resolvedBookmark = bookmark.resolve(doc);
+  var resolvedBookmark = bookmark ? bookmark.resolve(doc) : editorState.selection;
   var from = resolvedBookmark.from,
     to = resolvedBookmark.to,
     head = resolvedBookmark.head;
   var draftBookmark = {
     from: from,
     to: to,
-    head: head
+    head: head,
+    isBlockNode: false
   };
   if (resolvedBookmark instanceof NodeSelection) {
     // It's possible that annotation is only allowed in child node instead parent (e.g. mediaSingle vs media),
@@ -198,7 +199,8 @@ export var resolveDraftBookmark = function resolveDraftBookmark(editorState, boo
         draftBookmark = {
           from: pos,
           to: nodeEndsAt,
-          head: nodeEndsAt
+          head: nodeEndsAt,
+          isBlockNode: node.isBlock
         };
         nodeFound = true;
         return false;
@@ -417,4 +419,24 @@ export function isSelectedAnnotationsChanged(oldSelectedAnnotations, newSelected
       return annotation.id === pluginStateAnnotation.id && annotation.type === pluginStateAnnotation.type;
     });
   });
-}
+}
+
+/**
+ * Checks if the selectedAnnotations are the same as the annotations on the selected block node
+ */
+export var isBlockNodeAnnotationsSelected = function isBlockNodeAnnotationsSelected(selection) {
+  var selectedAnnotations = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  if (selectedAnnotations.length && selection instanceof NodeSelection) {
+    var node = selection.node.type.name === 'mediaSingle' ? selection.node.firstChild : selection.node;
+    var annotationMarks = (node === null || node === void 0 ? void 0 : node.marks.filter(function (mark) {
+      return mark.type.name === 'annotation';
+    }).map(function (mark) {
+      return {
+        id: mark.attrs.id,
+        type: mark.attrs.annotationType
+      };
+    })) || [];
+    return !isSelectedAnnotationsChanged(selectedAnnotations, annotationMarks);
+  }
+  return false;
+};

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

@@ -10,8 +10,8 @@ export declare const clearDirtyMark: () => Command;
 export declare const removeInlineCommentNearSelection: (id: string, supportedNodes?: string[]) => Command;
 export declare const showInlineCommentForBlockNode: (supportedBlockNodes?: string[]) => (node: PMNode | null) => Command | undefined;
 export declare const setInlineCommentDraftState: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, supportedBlockNodes?: string[]) => (drafting: boolean, inputMethod?: InlineCommentInputMethod, targetType?: TargetType, isCommentOnMediaOn?: boolean) => Command;
-export declare const addInlineComment: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorAPI?: ExtractInjectionAPI<AnnotationPlugin> | undefined) => (id: string) => Command;
+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 createAnnotation: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorAPI?: ExtractInjectionAPI<AnnotationPlugin> | undefined) => (id: string, annotationType?: AnnotationTypes) => 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/commands/transform.d.ts

@@ -2,7 +2,7 @@ import type { EditorAnalyticsAPI, RESOLVE_METHOD } from '@atlaskit/editor-common
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { InlineCommentInputMethod } from '../types';
 declare const _default: {
-    addAnnotationMark: (id: string) => (transaction: Transaction, state: EditorState) => Transaction;
+    addAnnotationMark: (id: string, supportedBlockNodes?: string[] | undefined) => (transaction: Transaction, state: EditorState) => Transaction;
     addInlineComment: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorAPI: import("@atlaskit/editor-common/types").PublicPluginAPI<[import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"annotation", {
         pluginConfiguration: import("../types").AnnotationProviders | undefined;
         sharedState: import("..").InlineCommentPluginState | undefined;
@@ -130,7 +130,7 @@ declare const _default: {
     } | undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
         pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
         sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
-    }, import("@atlaskit/editor-common/types").FeatureFlags>>]> | undefined) => (id: string) => (transaction: Transaction, state: EditorState) => Transaction;
+    }, import("@atlaskit/editor-common/types").FeatureFlags>>]> | undefined) => (id: string, supportedBlockNodes?: string[] | undefined) => (transaction: Transaction, state: EditorState) => Transaction;
     addOpenCloseAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (drafting: boolean, method?: InlineCommentInputMethod) => (transaction: Transaction, state: EditorState) => Transaction;
     addInsertAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (transaction: Transaction, state: EditorState) => Transaction;
     addResolveAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (method?: RESOLVE_METHOD | undefined) => (transaction: Transaction, state: EditorState) => Transaction;

package/dist/types/types.d.ts

@@ -140,5 +140,6 @@ export type DraftBookmark = {
     from: number;
     to: number;
     head: number;
+    isBlockNode?: boolean;
 };
 export {};

package/dist/types/utils.d.ts

@@ -22,7 +22,7 @@ export declare const addDraftDecoration: (start: number, end: number, targetType
 export declare const getAnnotationViewKey: (annotations: AnnotationInfo[]) => string;
 export declare const isCurrentBlockNodeSelected: (state: EditorState, node: Node) => boolean;
 export declare const findAnnotationsInSelection: (selection: Selection, doc: Node) => AnnotationInfo[];
-export declare const resolveDraftBookmark: (editorState: EditorState, bookmark: SelectionBookmark, supportedBlockNodes?: string[]) => DraftBookmark;
+export declare const resolveDraftBookmark: (editorState: EditorState, bookmark?: SelectionBookmark, supportedBlockNodes?: string[]) => DraftBookmark;
 /**
  * get selection from position to apply new comment for
  * @return bookmarked positions if they exists, otherwise current selection positions
@@ -49,3 +49,7 @@ export declare function stripNonExistingAnnotations(slice: Slice, state: EditorS
  * This function assumes annotations will have unique id's for simplicity
  */
 export declare function isSelectedAnnotationsChanged(oldSelectedAnnotations: AnnotationInfo[], newSelectedAnnotations: AnnotationInfo[]): boolean;
+/**
+ * Checks if the selectedAnnotations are the same as the annotations on the selected block node
+ */
+export declare const isBlockNodeAnnotationsSelected: (selection: Selection, selectedAnnotations?: AnnotationInfo[]) => boolean;

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

@@ -10,8 +10,8 @@ export declare const clearDirtyMark: () => Command;
 export declare const removeInlineCommentNearSelection: (id: string, supportedNodes?: string[]) => Command;
 export declare const showInlineCommentForBlockNode: (supportedBlockNodes?: string[]) => (node: PMNode | null) => Command | undefined;
 export declare const setInlineCommentDraftState: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, supportedBlockNodes?: string[]) => (drafting: boolean, inputMethod?: InlineCommentInputMethod, targetType?: TargetType, isCommentOnMediaOn?: boolean) => Command;
-export declare const addInlineComment: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorAPI?: ExtractInjectionAPI<AnnotationPlugin> | undefined) => (id: string) => Command;
+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 createAnnotation: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorAPI?: ExtractInjectionAPI<AnnotationPlugin> | undefined) => (id: string, annotationType?: AnnotationTypes) => 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/commands/transform.d.ts

@@ -2,7 +2,7 @@ import type { EditorAnalyticsAPI, RESOLVE_METHOD } from '@atlaskit/editor-common
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { InlineCommentInputMethod } from '../types';
 declare const _default: {
-    addAnnotationMark: (id: string) => (transaction: Transaction, state: EditorState) => Transaction;
+    addAnnotationMark: (id: string, supportedBlockNodes?: string[] | undefined) => (transaction: Transaction, state: EditorState) => Transaction;
     addInlineComment: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined, editorAPI: import("@atlaskit/editor-common/types").PublicPluginAPI<[
         import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"annotation", {
             pluginConfiguration: import("../types").AnnotationProviders | undefined;
@@ -157,7 +157,7 @@ declare const _default: {
             pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
             sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
         }, import("@atlaskit/editor-common/types").FeatureFlags>>
-    ]> | undefined) => (id: string) => (transaction: Transaction, state: EditorState) => Transaction;
+    ]> | undefined) => (id: string, supportedBlockNodes?: string[] | undefined) => (transaction: Transaction, state: EditorState) => Transaction;
     addOpenCloseAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (drafting: boolean, method?: InlineCommentInputMethod) => (transaction: Transaction, state: EditorState) => Transaction;
     addInsertAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (transaction: Transaction, state: EditorState) => Transaction;
     addResolveAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (method?: RESOLVE_METHOD | undefined) => (transaction: Transaction, state: EditorState) => Transaction;

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

@@ -140,5 +140,6 @@ export type DraftBookmark = {
     from: number;
     to: number;
     head: number;
+    isBlockNode?: boolean;
 };
 export {};

package/dist/types-ts4.5/utils.d.ts

@@ -22,7 +22,7 @@ export declare const addDraftDecoration: (start: number, end: number, targetType
 export declare const getAnnotationViewKey: (annotations: AnnotationInfo[]) => string;
 export declare const isCurrentBlockNodeSelected: (state: EditorState, node: Node) => boolean;
 export declare const findAnnotationsInSelection: (selection: Selection, doc: Node) => AnnotationInfo[];
-export declare const resolveDraftBookmark: (editorState: EditorState, bookmark: SelectionBookmark, supportedBlockNodes?: string[]) => DraftBookmark;
+export declare const resolveDraftBookmark: (editorState: EditorState, bookmark?: SelectionBookmark, supportedBlockNodes?: string[]) => DraftBookmark;
 /**
  * get selection from position to apply new comment for
  * @return bookmarked positions if they exists, otherwise current selection positions
@@ -49,3 +49,7 @@ export declare function stripNonExistingAnnotations(slice: Slice, state: EditorS
  * This function assumes annotations will have unique id's for simplicity
  */
 export declare function isSelectedAnnotationsChanged(oldSelectedAnnotations: AnnotationInfo[], newSelectedAnnotations: AnnotationInfo[]): boolean;
+/**
+ * Checks if the selectedAnnotations are the same as the annotations on the selected block node
+ */
+export declare const isBlockNodeAnnotationsSelected: (selection: Selection, selectedAnnotations?: AnnotationInfo[]) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-annotation",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "Annotation plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^35.7.0",
-    "@atlaskit/editor-common": "^78.18.0",
+    "@atlaskit/editor-common": "^78.20.0",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-editor-viewmode": "^1.0.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",