@atlaskit/editor-plugin-annotation 1.2.2 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-annotation
 
+## 1.3.0
+
+### Minor Changes
+
+- [#80123](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80123) [`8bb18b4d686c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8bb18b4d686c) - [ux] - Add decoration to media node when there is active draft comment associated, update plugin state mapping so that create view component is removed when there's node changes invalidating the decoration
+
+  - Save featureFlags plugin state as one of the annotation plugin state
+
 ## 1.2.2
 
 ### Patch Changes

package/dist/cjs/commands/index.js

@@ -100,7 +100,7 @@ var removeInlineCommentNearSelection = exports.removeInlineCommentNearSelection
     return true;
   };
 };
-var getDraftCommandAction = function getDraftCommandAction(drafting, targetType, isCommentOnMediaOn) {
+var getDraftCommandAction = function getDraftCommandAction(drafting, targetType, isCommentOnMediaOn, supportedBlockNodes) {
   return function (editorState) {
     // validate selection only when entering draft mode
     if (drafting && (0, _utils.isSelectionValid)(editorState, isCommentOnMediaOn) !== _types2.AnnotationSelectionType.VALID) {
@@ -111,17 +111,20 @@ var getDraftCommandAction = function getDraftCommandAction(drafting, targetType,
       data: {
         drafting: drafting,
         editorState: editorState,
-        targetType: targetType
+        targetType: targetType,
+        isCommentOnMediaOn: isCommentOnMediaOn,
+        supportedBlockNodes: supportedBlockNodes
       }
     };
   };
 };
 var setInlineCommentDraftState = exports.setInlineCommentDraftState = function setInlineCommentDraftState(editorAnalyticsAPI) {
+  var supportedBlockNodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   return function (drafting) {
     var inputMethod = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _analytics.INPUT_METHOD.TOOLBAR;
     var targetType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'inline';
     var isCommentOnMediaOn = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-    var commandAction = getDraftCommandAction(drafting, targetType, isCommentOnMediaOn);
+    var commandAction = getDraftCommandAction(drafting, targetType, isCommentOnMediaOn, supportedBlockNodes);
     return (0, _pluginFactory.createCommand)(commandAction, _transform.default.addOpenCloseAnalytics(editorAnalyticsAPI)(drafting, inputMethod));
   };
 };

package/dist/cjs/plugin.js

@@ -37,13 +37,16 @@ var annotationPlugin = exports.annotationPlugin = function annotationPlugin(_ref
     },
     actions: {
       stripNonExistingAnnotations: _utils.stripNonExistingAnnotations,
-      setInlineCommentDraftState: (0, _commands.setInlineCommentDraftState)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
+      setInlineCommentDraftState: (0, _commands.setInlineCommentDraftState)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.supportedBlockNodes)
     },
     getSharedState: function getSharedState(editorState) {
       if (!editorState) {
         return undefined;
       }
-      return (0, _utils.getPluginState)(editorState) || undefined;
+      var pluginState = (0, _utils.getPluginState)(editorState) || undefined;
+      var clonedPluginState = Object.assign({}, pluginState);
+      clonedPluginState === null || clonedPluginState === void 0 || delete clonedPluginState.featureFlagsPluginState;
+      return clonedPluginState;
     },
     pmPlugins: function pmPlugins() {
       return [{
@@ -59,7 +62,8 @@ var annotationPlugin = exports.annotationPlugin = function annotationPlugin(_ref
               portalProviderAPI: portalProviderAPI,
               eventDispatcher: eventDispatcher,
               provider: annotationProviders.inlineComment,
-              editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions
+              editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
+              featureFlagsPluginState: featureFlags
             });
           }
           return;

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

@@ -77,6 +77,7 @@ var fetchState = /*#__PURE__*/function () {
 }();
 var initialState = function initialState() {
   var disallowOnWhitespace = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var featureFlagsPluginState = arguments.length > 1 ? arguments[1] : undefined;
   return {
     annotations: {},
     selectedAnnotations: [],
@@ -86,7 +87,8 @@ var initialState = function initialState() {
     disallowOnWhitespace: disallowOnWhitespace,
     isInlineCommentViewClosed: false,
     isVisible: true,
-    skipSelectionHandling: false
+    skipSelectionHandling: false,
+    featureFlagsPluginState: featureFlagsPluginState
   };
 };
 var hideToolbar = function hideToolbar(state, dispatch) {
@@ -140,10 +142,11 @@ var onSetVisibility = function onSetVisibility(view) {
 var inlineCommentPlugin = exports.inlineCommentPlugin = function inlineCommentPlugin(options) {
   var provider = options.provider,
     portalProviderAPI = options.portalProviderAPI,
-    eventDispatcher = options.eventDispatcher;
+    eventDispatcher = options.eventDispatcher,
+    featureFlagsPluginState = options.featureFlagsPluginState;
   return new _safePlugin.SafePlugin({
     key: _utils.inlineCommentPluginKey,
-    state: (0, _pluginFactory.createPluginState)(options.dispatch, initialState(provider.disallowOnWhitespace)),
+    state: (0, _pluginFactory.createPluginState)(options.dispatch, initialState(provider.disallowOnWhitespace, featureFlagsPluginState)),
     view: function view(editorView) {
       // Get initial state
       // Need to pass `editorView` to mitigate editor state going stale

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.createPluginState = exports.createCommand = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("@atlaskit/editor-common/utils");
+var _view = require("@atlaskit/editor-prosemirror/view");
 var _utils2 = require("../utils");
 var _reducer = _interopRequireDefault(require("./reducer"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -50,13 +51,30 @@ var getSelectionChangedHandler = function getSelectionChangedHandler(reopenComme
 var _pluginFactory = (0, _utils.pluginFactory)(_utils2.inlineCommentPluginKey, _reducer.default, {
     onSelectionChanged: getSelectionChangedHandler(true),
     onDocChanged: handleDocChanged,
-    mapping: function mapping(tr, pluginState) {
+    mapping: function mapping(tr, pluginState, editorState) {
       var draftDecorationSet = pluginState.draftDecorationSet,
-        bookmark = pluginState.bookmark;
-      var mappedDecorationSet, mappedBookmark;
+        bookmark = pluginState.bookmark,
+        featureFlagsPluginState = pluginState.featureFlagsPluginState;
+      var mappedDecorationSet = _view.DecorationSet.empty,
+        mappedBookmark;
+      var hasMappedDecorations = false;
       if (draftDecorationSet) {
         mappedDecorationSet = draftDecorationSet.map(tr.mapping, tr.doc);
       }
+      if (featureFlagsPluginState !== null && featureFlagsPluginState !== void 0 && featureFlagsPluginState.commentsOnMedia) {
+        hasMappedDecorations = mappedDecorationSet.find(undefined, undefined, function (spec) {
+          return Object.values(_utils2.decorationKey).includes(spec.key);
+        }).length > 0;
+
+        // When changes to decoration target make decoration invalid (e.g. delete text, add mark to node),
+        // we need to reset bookmark to hide create component and to avoid invalid draft being published
+        if (!hasMappedDecorations) {
+          return _objectSpread(_objectSpread({}, pluginState), {}, {
+            draftDecorationSet: mappedDecorationSet,
+            bookmark: undefined
+          });
+        }
+      }
       if (bookmark) {
         mappedBookmark = bookmark.map(tr.mapping);
       }

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

@@ -24,7 +24,7 @@ var _default = exports.default = function _default(pluginState, action) {
         mouseData: mouseData
       });
     case _types.ACTIONS.SET_INLINE_COMMENT_DRAFT_STATE:
-      return getNewDraftState(pluginState, action.data.drafting, action.data.editorState, action.data.targetType);
+      return getNewDraftState(pluginState, action.data.drafting, action.data.editorState, action.data.targetType, action.data.isCommentOnMediaOn, action.data.supportedBlockNodes);
     case _types.ACTIONS.INLINE_COMMENT_CLEAR_DIRTY_MARK:
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         dirtyAnnotations: false,
@@ -59,7 +59,7 @@ var _default = exports.default = function _default(pluginState, action) {
       return pluginState;
   }
 };
-function getNewDraftState(pluginState, drafting, editorState, targetType) {
+function getNewDraftState(pluginState, drafting, editorState, targetType, isCommentOnMediaOn, supportedBlockNodes) {
   var draftDecorationSet = pluginState.draftDecorationSet;
   if (!draftDecorationSet || !drafting) {
     draftDecorationSet = _view.DecorationSet.empty;
@@ -70,8 +70,10 @@ function getNewDraftState(pluginState, drafting, editorState, targetType) {
   newState.bookmark = undefined;
   if (drafting && editorState) {
     newState.bookmark = editorState.selection.getBookmark();
-    var resolvedBookmark = newState.bookmark.resolve(editorState.doc);
-    var draftDecoration = (0, _utils.addDraftDecoration)(resolvedBookmark.from, resolvedBookmark.to, targetType);
+    var _ref = isCommentOnMediaOn ? (0, _utils.resolveDraftBookmark)(editorState, newState.bookmark, supportedBlockNodes) : newState.bookmark.resolve(editorState.doc),
+      from = _ref.from,
+      to = _ref.to;
+    var draftDecoration = (0, _utils.addDraftDecoration)(from, to, targetType);
     newState.draftDecorationSet = draftDecorationSet.add(editorState.doc, [draftDecoration]);
   }
   return newState;

package/dist/cjs/utils.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "containsAnyAnnotations", {
     return _utils.containsAnyAnnotations;
   }
 });
-exports.getPluginState = exports.getDraftCommandAnalyticsPayload = exports.getAnnotationViewKey = exports.getAllAnnotations = exports.findAnnotationsInSelection = void 0;
+exports.getPluginState = exports.getDraftCommandAnalyticsPayload = exports.getAnnotationViewKey = exports.getAllAnnotations = exports.findAnnotationsInSelection = exports.decorationKey = void 0;
 exports.getSelectionPositions = getSelectionPositions;
 Object.defineProperty(exports, "hasAnnotationMark", {
   enumerable: true,
@@ -23,7 +23,7 @@ exports.hasInvalidNodes = void 0;
 exports.hasInvalidWhitespaceNode = hasInvalidWhitespaceNode;
 exports.inlineCommentPluginKey = void 0;
 exports.isSelectedAnnotationsChanged = isSelectedAnnotationsChanged;
-exports.isSupportedBlockNode = exports.isSelectionValid = void 0;
+exports.resolveDraftBookmark = exports.isSupportedBlockNode = exports.isSelectionValid = void 0;
 exports.stripNonExistingAnnotations = stripNonExistingAnnotations;
 exports.surroundingMarks = void 0;
 var _adfSchema = require("@atlaskit/adf-schema");
@@ -125,7 +125,10 @@ var validateAnnotationMark = function validateAnnotationMark(annotationMark) {
     return allowedTypes.includes(type);
   }
 };
-
+var decorationKey = exports.decorationKey = {
+  block: 'blockCommentDecoration',
+  inline: 'inlineCommentDecoration'
+};
 /*
  * add decoration for the comment selection in draft state
  * (when creating new comment)
@@ -134,11 +137,15 @@ var addDraftDecoration = exports.addDraftDecoration = function addDraftDecoratio
   var targetType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'inline';
   if (targetType === 'block') {
     return _view.Decoration.node(start, end, {
-      class: "".concat(_styles.AnnotationSharedClassNames.draft)
+      class: "".concat(_styles.BlockAnnotationSharedClassNames.draft)
+    }, {
+      key: decorationKey.block
     });
   }
   return _view.Decoration.inline(start, end, {
     class: "".concat(_styles.AnnotationSharedClassNames.draft)
+  }, {
+    key: decorationKey.inline
   });
 };
 var getAnnotationViewKey = exports.getAnnotationViewKey = function getAnnotationViewKey(annotations) {
@@ -179,7 +186,41 @@ var findAnnotationsInSelection = exports.findAnnotationsInSelection = function f
   reorderAnnotations(annotations, $anchor);
   return annotations;
 };
-
+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 from = resolvedBookmark.from,
+    to = resolvedBookmark.to,
+    head = resolvedBookmark.head;
+  var draftBookmark = {
+    from: from,
+    to: to,
+    head: head
+  };
+  if (resolvedBookmark instanceof _state.NodeSelection) {
+    // It's possible that annotation is only allowed in child node instead parent (e.g. mediaSingle vs media),
+    // thus, we traverse the node to find the first node that supports annotation and return its position
+    var nodeFound = false;
+    doc.nodesBetween(from, to, function (node, pos) {
+      // if we find the node, breakout the traversal to make sure we always record the first supported node
+      if (nodeFound) {
+        return false;
+      }
+      var nodeEndsAt = pos + node.nodeSize;
+      if (supportedBlockNodes.includes(node.type.name)) {
+        draftBookmark = {
+          from: pos,
+          to: nodeEndsAt,
+          head: nodeEndsAt
+        };
+        nodeFound = true;
+        return false;
+      }
+    });
+  }
+  return draftBookmark;
+};
 /**
  * get selection from position to apply new comment for
  * @return bookmarked positions if they exists, otherwise current selection positions

package/dist/es2019/commands/index.js

@@ -86,7 +86,7 @@ export const removeInlineCommentNearSelection = (id, supportedNodes = []) => (st
   }
   return true;
 };
-const getDraftCommandAction = (drafting, targetType, isCommentOnMediaOn) => {
+const getDraftCommandAction = (drafting, targetType, isCommentOnMediaOn, supportedBlockNodes) => {
   return editorState => {
     // validate selection only when entering draft mode
     if (drafting && isSelectionValid(editorState, isCommentOnMediaOn) !== AnnotationSelectionType.VALID) {
@@ -97,13 +97,15 @@ const getDraftCommandAction = (drafting, targetType, isCommentOnMediaOn) => {
       data: {
         drafting,
         editorState,
-        targetType
+        targetType,
+        isCommentOnMediaOn,
+        supportedBlockNodes
       }
     };
   };
 };
-export const setInlineCommentDraftState = editorAnalyticsAPI => (drafting, inputMethod = INPUT_METHOD.TOOLBAR, targetType = 'inline', isCommentOnMediaOn = false) => {
-  const commandAction = getDraftCommandAction(drafting, targetType, isCommentOnMediaOn);
+export const setInlineCommentDraftState = (editorAnalyticsAPI, supportedBlockNodes = []) => (drafting, inputMethod = INPUT_METHOD.TOOLBAR, targetType = 'inline', isCommentOnMediaOn = false) => {
+  const commandAction = getDraftCommandAction(drafting, targetType, isCommentOnMediaOn, supportedBlockNodes);
   return createCommand(commandAction, transform.addOpenCloseAnalytics(editorAnalyticsAPI)(drafting, inputMethod));
 };
 export const addInlineComment = (editorAnalyticsAPI, editorAPI) => id => {

package/dist/es2019/plugin.js

@@ -25,13 +25,16 @@ export const annotationPlugin = ({
     },
     actions: {
       stripNonExistingAnnotations,
-      setInlineCommentDraftState: setInlineCommentDraftState(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
+      setInlineCommentDraftState: setInlineCommentDraftState(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.supportedBlockNodes)
     },
     getSharedState(editorState) {
       if (!editorState) {
         return undefined;
       }
-      return getPluginState(editorState) || undefined;
+      const pluginState = getPluginState(editorState) || undefined;
+      const clonedPluginState = Object.assign({}, pluginState);
+      clonedPluginState === null || clonedPluginState === void 0 ? true : delete clonedPluginState.featureFlagsPluginState;
+      return clonedPluginState;
     },
     pmPlugins: () => [{
       name: 'annotation',
@@ -47,7 +50,8 @@ export const annotationPlugin = ({
             portalProviderAPI,
             eventDispatcher,
             provider: annotationProviders.inlineComment,
-            editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions
+            editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
+            featureFlagsPluginState: featureFlags
           });
         }
         return;

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

@@ -28,7 +28,7 @@ const fetchState = async (provider, annotationIds, editorView, editorAnalyticsAP
     updateInlineCommentResolvedState(editorAnalyticsAPI)(inlineCommentStates)(editorView.state, editorView.dispatch);
   }
 };
-const initialState = (disallowOnWhitespace = false) => {
+const initialState = (disallowOnWhitespace = false, featureFlagsPluginState) => {
   return {
     annotations: {},
     selectedAnnotations: [],
@@ -38,7 +38,8 @@ const initialState = (disallowOnWhitespace = false) => {
     disallowOnWhitespace,
     isInlineCommentViewClosed: false,
     isVisible: true,
-    skipSelectionHandling: false
+    skipSelectionHandling: false,
+    featureFlagsPluginState
   };
 };
 const hideToolbar = (state, dispatch) => () => {
@@ -86,11 +87,12 @@ export const inlineCommentPlugin = options => {
   const {
     provider,
     portalProviderAPI,
-    eventDispatcher
+    eventDispatcher,
+    featureFlagsPluginState
   } = options;
   return new SafePlugin({
     key: inlineCommentPluginKey,
-    state: createPluginState(options.dispatch, initialState(provider.disallowOnWhitespace)),
+    state: createPluginState(options.dispatch, initialState(provider.disallowOnWhitespace, featureFlagsPluginState)),
     view(editorView) {
       // Get initial state
       // Need to pass `editorView` to mitigate editor state going stale

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

@@ -1,5 +1,6 @@
 import { pluginFactory } from '@atlaskit/editor-common/utils';
-import { findAnnotationsInSelection, inlineCommentPluginKey, isSelectedAnnotationsChanged } from '../utils';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { decorationKey, findAnnotationsInSelection, inlineCommentPluginKey, isSelectedAnnotationsChanged } from '../utils';
 import reducer from './reducer';
 const handleDocChanged = (tr, prevPluginState) => {
   if (!tr.getMeta('replaceDocument')) {
@@ -50,15 +51,31 @@ export const {
 } = pluginFactory(inlineCommentPluginKey, reducer, {
   onSelectionChanged: getSelectionChangedHandler(true),
   onDocChanged: handleDocChanged,
-  mapping: (tr, pluginState) => {
+  mapping: (tr, pluginState, editorState) => {
     let {
       draftDecorationSet,
-      bookmark
+      bookmark,
+      featureFlagsPluginState
     } = pluginState;
-    let mappedDecorationSet, mappedBookmark;
+    let mappedDecorationSet = DecorationSet.empty,
+      mappedBookmark;
+    let hasMappedDecorations = false;
     if (draftDecorationSet) {
       mappedDecorationSet = draftDecorationSet.map(tr.mapping, tr.doc);
     }
+    if (featureFlagsPluginState !== null && featureFlagsPluginState !== void 0 && featureFlagsPluginState.commentsOnMedia) {
+      hasMappedDecorations = mappedDecorationSet.find(undefined, undefined, spec => Object.values(decorationKey).includes(spec.key)).length > 0;
+
+      // When changes to decoration target make decoration invalid (e.g. delete text, add mark to node),
+      // we need to reset bookmark to hide create component and to avoid invalid draft being published
+      if (!hasMappedDecorations) {
+        return {
+          ...pluginState,
+          draftDecorationSet: mappedDecorationSet,
+          bookmark: undefined
+        };
+      }
+    }
     if (bookmark) {
       mappedBookmark = bookmark.map(tr.mapping);
     }

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

@@ -1,5 +1,5 @@
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { addDraftDecoration } from '../utils';
+import { addDraftDecoration, resolveDraftBookmark } from '../utils';
 import { ACTIONS } from './types';
 export default ((pluginState, action) => {
   switch (action.type) {
@@ -18,7 +18,7 @@ export default ((pluginState, action) => {
         mouseData
       };
     case ACTIONS.SET_INLINE_COMMENT_DRAFT_STATE:
-      return getNewDraftState(pluginState, action.data.drafting, action.data.editorState, action.data.targetType);
+      return getNewDraftState(pluginState, action.data.drafting, action.data.editorState, action.data.targetType, action.data.isCommentOnMediaOn, action.data.supportedBlockNodes);
     case ACTIONS.INLINE_COMMENT_CLEAR_DIRTY_MARK:
       return {
         ...pluginState,
@@ -63,7 +63,7 @@ export default ((pluginState, action) => {
       return pluginState;
   }
 });
-function getNewDraftState(pluginState, drafting, editorState, targetType) {
+function getNewDraftState(pluginState, drafting, editorState, targetType, isCommentOnMediaOn, supportedBlockNodes) {
   let {
     draftDecorationSet
   } = pluginState;
@@ -77,8 +77,11 @@ function getNewDraftState(pluginState, drafting, editorState, targetType) {
   newState.bookmark = undefined;
   if (drafting && editorState) {
     newState.bookmark = editorState.selection.getBookmark();
-    const resolvedBookmark = newState.bookmark.resolve(editorState.doc);
-    const draftDecoration = addDraftDecoration(resolvedBookmark.from, resolvedBookmark.to, targetType);
+    const {
+      from,
+      to
+    } = isCommentOnMediaOn ? resolveDraftBookmark(editorState, newState.bookmark, supportedBlockNodes) : newState.bookmark.resolve(editorState.doc);
+    const draftDecoration = addDraftDecoration(from, to, targetType);
     newState.draftDecorationSet = draftDecorationSet.add(editorState.doc, [draftDecoration]);
   }
   return newState;

package/dist/es2019/utils.js

@@ -1,9 +1,9 @@
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { currentMediaNodeWithPos } from '@atlaskit/editor-common/media-single';
-import { AnnotationSharedClassNames } from '@atlaskit/editor-common/styles';
+import { AnnotationSharedClassNames, BlockAnnotationSharedClassNames } from '@atlaskit/editor-common/styles';
 import { canApplyAnnotationOnRange, containsAnyAnnotations, getAnnotationIdsFromRange, hasAnnotationMark, isParagraph, isText } from '@atlaskit/editor-common/utils';
-import { AllSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { AllSelection, NodeSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { AnnotationSelectionType } from './types';
 export { hasAnnotationMark, containsAnyAnnotations };
@@ -87,7 +87,10 @@ const validateAnnotationMark = annotationMark => {
     return allowedTypes.includes(type);
   }
 };
-
+export const decorationKey = {
+  block: 'blockCommentDecoration',
+  inline: 'inlineCommentDecoration'
+};
 /*
  * add decoration for the comment selection in draft state
  * (when creating new comment)
@@ -95,11 +98,15 @@ const validateAnnotationMark = annotationMark => {
 export const addDraftDecoration = (start, end, targetType = 'inline') => {
   if (targetType === 'block') {
     return Decoration.node(start, end, {
-      class: `${AnnotationSharedClassNames.draft}`
+      class: `${BlockAnnotationSharedClassNames.draft}`
+    }, {
+      key: decorationKey.block
     });
   }
   return Decoration.inline(start, end, {
     class: `${AnnotationSharedClassNames.draft}`
+  }, {
+    key: decorationKey.inline
   });
 };
 export const getAnnotationViewKey = annotations => {
@@ -136,7 +143,44 @@ export const findAnnotationsInSelection = (selection, doc) => {
   reorderAnnotations(annotations, $anchor);
   return annotations;
 };
-
+export const resolveDraftBookmark = (editorState, bookmark, supportedBlockNodes = []) => {
+  const {
+    doc
+  } = editorState;
+  const resolvedBookmark = bookmark.resolve(doc);
+  const {
+    from,
+    to,
+    head
+  } = resolvedBookmark;
+  let draftBookmark = {
+    from,
+    to,
+    head
+  };
+  if (resolvedBookmark instanceof NodeSelection) {
+    // It's possible that annotation is only allowed in child node instead parent (e.g. mediaSingle vs media),
+    // thus, we traverse the node to find the first node that supports annotation and return its position
+    let nodeFound = false;
+    doc.nodesBetween(from, to, (node, pos) => {
+      // if we find the node, breakout the traversal to make sure we always record the first supported node
+      if (nodeFound) {
+        return false;
+      }
+      const nodeEndsAt = pos + node.nodeSize;
+      if (supportedBlockNodes.includes(node.type.name)) {
+        draftBookmark = {
+          from: pos,
+          to: nodeEndsAt,
+          head: nodeEndsAt
+        };
+        nodeFound = true;
+        return false;
+      }
+    });
+  }
+  return draftBookmark;
+};
 /**
  * get selection from position to apply new comment for
  * @return bookmarked positions if they exists, otherwise current selection positions

package/dist/esm/commands/index.js

@@ -93,7 +93,7 @@ export var removeInlineCommentNearSelection = function removeInlineCommentNearSe
     return true;
   };
 };
-var getDraftCommandAction = function getDraftCommandAction(drafting, targetType, isCommentOnMediaOn) {
+var getDraftCommandAction = function getDraftCommandAction(drafting, targetType, isCommentOnMediaOn, supportedBlockNodes) {
   return function (editorState) {
     // validate selection only when entering draft mode
     if (drafting && isSelectionValid(editorState, isCommentOnMediaOn) !== AnnotationSelectionType.VALID) {
@@ -104,17 +104,20 @@ var getDraftCommandAction = function getDraftCommandAction(drafting, targetType,
       data: {
         drafting: drafting,
         editorState: editorState,
-        targetType: targetType
+        targetType: targetType,
+        isCommentOnMediaOn: isCommentOnMediaOn,
+        supportedBlockNodes: supportedBlockNodes
       }
     };
   };
 };
 export var setInlineCommentDraftState = function setInlineCommentDraftState(editorAnalyticsAPI) {
+  var supportedBlockNodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   return function (drafting) {
     var inputMethod = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INPUT_METHOD.TOOLBAR;
     var targetType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'inline';
     var isCommentOnMediaOn = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-    var commandAction = getDraftCommandAction(drafting, targetType, isCommentOnMediaOn);
+    var commandAction = getDraftCommandAction(drafting, targetType, isCommentOnMediaOn, supportedBlockNodes);
     return createCommand(commandAction, transform.addOpenCloseAnalytics(editorAnalyticsAPI)(drafting, inputMethod));
   };
 };

package/dist/esm/plugin.js

@@ -24,13 +24,16 @@ export var annotationPlugin = function annotationPlugin(_ref) {
     },
     actions: {
       stripNonExistingAnnotations: stripNonExistingAnnotations,
-      setInlineCommentDraftState: setInlineCommentDraftState(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
+      setInlineCommentDraftState: setInlineCommentDraftState(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment.supportedBlockNodes)
     },
     getSharedState: function getSharedState(editorState) {
       if (!editorState) {
         return undefined;
       }
-      return getPluginState(editorState) || undefined;
+      var pluginState = getPluginState(editorState) || undefined;
+      var clonedPluginState = Object.assign({}, pluginState);
+      clonedPluginState === null || clonedPluginState === void 0 || delete clonedPluginState.featureFlagsPluginState;
+      return clonedPluginState;
     },
     pmPlugins: function pmPlugins() {
       return [{
@@ -46,7 +49,8 @@ export var annotationPlugin = function annotationPlugin(_ref) {
               portalProviderAPI: portalProviderAPI,
               eventDispatcher: eventDispatcher,
               provider: annotationProviders.inlineComment,
-              editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions
+              editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
+              featureFlagsPluginState: featureFlags
             });
           }
           return;

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

@@ -70,6 +70,7 @@ var fetchState = /*#__PURE__*/function () {
 }();
 var initialState = function initialState() {
   var disallowOnWhitespace = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var featureFlagsPluginState = arguments.length > 1 ? arguments[1] : undefined;
   return {
     annotations: {},
     selectedAnnotations: [],
@@ -79,7 +80,8 @@ var initialState = function initialState() {
     disallowOnWhitespace: disallowOnWhitespace,
     isInlineCommentViewClosed: false,
     isVisible: true,
-    skipSelectionHandling: false
+    skipSelectionHandling: false,
+    featureFlagsPluginState: featureFlagsPluginState
   };
 };
 var hideToolbar = function hideToolbar(state, dispatch) {
@@ -133,10 +135,11 @@ var onSetVisibility = function onSetVisibility(view) {
 export var inlineCommentPlugin = function inlineCommentPlugin(options) {
   var provider = options.provider,
     portalProviderAPI = options.portalProviderAPI,
-    eventDispatcher = options.eventDispatcher;
+    eventDispatcher = options.eventDispatcher,
+    featureFlagsPluginState = options.featureFlagsPluginState;
   return new SafePlugin({
     key: inlineCommentPluginKey,
-    state: createPluginState(options.dispatch, initialState(provider.disallowOnWhitespace)),
+    state: createPluginState(options.dispatch, initialState(provider.disallowOnWhitespace, featureFlagsPluginState)),
     view: function view(editorView) {
       // Get initial state
       // Need to pass `editorView` to mitigate editor state going stale

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

@@ -2,7 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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 { findAnnotationsInSelection, inlineCommentPluginKey, isSelectedAnnotationsChanged } from '../utils';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { decorationKey, findAnnotationsInSelection, inlineCommentPluginKey, isSelectedAnnotationsChanged } from '../utils';
 import reducer from './reducer';
 var handleDocChanged = function handleDocChanged(tr, prevPluginState) {
   if (!tr.getMeta('replaceDocument')) {
@@ -43,13 +44,30 @@ var getSelectionChangedHandler = function getSelectionChangedHandler(reopenComme
 var _pluginFactory = pluginFactory(inlineCommentPluginKey, reducer, {
     onSelectionChanged: getSelectionChangedHandler(true),
     onDocChanged: handleDocChanged,
-    mapping: function mapping(tr, pluginState) {
+    mapping: function mapping(tr, pluginState, editorState) {
       var draftDecorationSet = pluginState.draftDecorationSet,
-        bookmark = pluginState.bookmark;
-      var mappedDecorationSet, mappedBookmark;
+        bookmark = pluginState.bookmark,
+        featureFlagsPluginState = pluginState.featureFlagsPluginState;
+      var mappedDecorationSet = DecorationSet.empty,
+        mappedBookmark;
+      var hasMappedDecorations = false;
       if (draftDecorationSet) {
         mappedDecorationSet = draftDecorationSet.map(tr.mapping, tr.doc);
       }
+      if (featureFlagsPluginState !== null && featureFlagsPluginState !== void 0 && featureFlagsPluginState.commentsOnMedia) {
+        hasMappedDecorations = mappedDecorationSet.find(undefined, undefined, function (spec) {
+          return Object.values(decorationKey).includes(spec.key);
+        }).length > 0;
+
+        // When changes to decoration target make decoration invalid (e.g. delete text, add mark to node),
+        // we need to reset bookmark to hide create component and to avoid invalid draft being published
+        if (!hasMappedDecorations) {
+          return _objectSpread(_objectSpread({}, pluginState), {}, {
+            draftDecorationSet: mappedDecorationSet,
+            bookmark: undefined
+          });
+        }
+      }
       if (bookmark) {
         mappedBookmark = bookmark.map(tr.mapping);
       }

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

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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 { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { addDraftDecoration } from '../utils';
+import { addDraftDecoration, resolveDraftBookmark } from '../utils';
 import { ACTIONS } from './types';
 export default (function (pluginState, action) {
   switch (action.type) {
@@ -17,7 +17,7 @@ export default (function (pluginState, action) {
         mouseData: mouseData
       });
     case ACTIONS.SET_INLINE_COMMENT_DRAFT_STATE:
-      return getNewDraftState(pluginState, action.data.drafting, action.data.editorState, action.data.targetType);
+      return getNewDraftState(pluginState, action.data.drafting, action.data.editorState, action.data.targetType, action.data.isCommentOnMediaOn, action.data.supportedBlockNodes);
     case ACTIONS.INLINE_COMMENT_CLEAR_DIRTY_MARK:
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         dirtyAnnotations: false,
@@ -52,7 +52,7 @@ export default (function (pluginState, action) {
       return pluginState;
   }
 });
-function getNewDraftState(pluginState, drafting, editorState, targetType) {
+function getNewDraftState(pluginState, drafting, editorState, targetType, isCommentOnMediaOn, supportedBlockNodes) {
   var draftDecorationSet = pluginState.draftDecorationSet;
   if (!draftDecorationSet || !drafting) {
     draftDecorationSet = DecorationSet.empty;
@@ -63,8 +63,10 @@ function getNewDraftState(pluginState, drafting, editorState, targetType) {
   newState.bookmark = undefined;
   if (drafting && editorState) {
     newState.bookmark = editorState.selection.getBookmark();
-    var resolvedBookmark = newState.bookmark.resolve(editorState.doc);
-    var draftDecoration = addDraftDecoration(resolvedBookmark.from, resolvedBookmark.to, targetType);
+    var _ref = isCommentOnMediaOn ? resolveDraftBookmark(editorState, newState.bookmark, supportedBlockNodes) : newState.bookmark.resolve(editorState.doc),
+      from = _ref.from,
+      to = _ref.to;
+    var draftDecoration = addDraftDecoration(from, to, targetType);
     newState.draftDecorationSet = draftDecorationSet.add(editorState.doc, [draftDecoration]);
   }
   return newState;

package/dist/esm/utils.js

@@ -1,9 +1,9 @@
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { currentMediaNodeWithPos } from '@atlaskit/editor-common/media-single';
-import { AnnotationSharedClassNames } from '@atlaskit/editor-common/styles';
+import { AnnotationSharedClassNames, BlockAnnotationSharedClassNames } from '@atlaskit/editor-common/styles';
 import { canApplyAnnotationOnRange, containsAnyAnnotations, getAnnotationIdsFromRange, hasAnnotationMark, isParagraph, isText } from '@atlaskit/editor-common/utils';
-import { AllSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { AllSelection, NodeSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { AnnotationSelectionType } from './types';
 export { hasAnnotationMark, containsAnyAnnotations };
@@ -98,7 +98,10 @@ var validateAnnotationMark = function validateAnnotationMark(annotationMark) {
     return allowedTypes.includes(type);
   }
 };
-
+export var decorationKey = {
+  block: 'blockCommentDecoration',
+  inline: 'inlineCommentDecoration'
+};
 /*
  * add decoration for the comment selection in draft state
  * (when creating new comment)
@@ -107,11 +110,15 @@ export var addDraftDecoration = function addDraftDecoration(start, end) {
   var targetType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'inline';
   if (targetType === 'block') {
     return Decoration.node(start, end, {
-      class: "".concat(AnnotationSharedClassNames.draft)
+      class: "".concat(BlockAnnotationSharedClassNames.draft)
+    }, {
+      key: decorationKey.block
     });
   }
   return Decoration.inline(start, end, {
     class: "".concat(AnnotationSharedClassNames.draft)
+  }, {
+    key: decorationKey.inline
   });
 };
 export var getAnnotationViewKey = function getAnnotationViewKey(annotations) {
@@ -152,7 +159,41 @@ export var findAnnotationsInSelection = function findAnnotationsInSelection(sele
   reorderAnnotations(annotations, $anchor);
   return annotations;
 };
-
+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 from = resolvedBookmark.from,
+    to = resolvedBookmark.to,
+    head = resolvedBookmark.head;
+  var draftBookmark = {
+    from: from,
+    to: to,
+    head: head
+  };
+  if (resolvedBookmark instanceof NodeSelection) {
+    // It's possible that annotation is only allowed in child node instead parent (e.g. mediaSingle vs media),
+    // thus, we traverse the node to find the first node that supports annotation and return its position
+    var nodeFound = false;
+    doc.nodesBetween(from, to, function (node, pos) {
+      // if we find the node, breakout the traversal to make sure we always record the first supported node
+      if (nodeFound) {
+        return false;
+      }
+      var nodeEndsAt = pos + node.nodeSize;
+      if (supportedBlockNodes.includes(node.type.name)) {
+        draftBookmark = {
+          from: pos,
+          to: nodeEndsAt,
+          head: nodeEndsAt
+        };
+        nodeFound = true;
+        return false;
+      }
+    });
+  }
+  return draftBookmark;
+};
 /**
  * get selection from position to apply new comment for
  * @return bookmarked positions if they exists, otherwise current selection positions

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

@@ -7,7 +7,7 @@ export declare const updateInlineCommentResolvedState: (editorAnalyticsAPI: Edit
 export declare const closeComponent: () => Command;
 export declare const clearDirtyMark: () => Command;
 export declare const removeInlineCommentNearSelection: (id: string, supportedNodes?: string[]) => Command;
-export declare const setInlineCommentDraftState: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (drafting: boolean, inputMethod?: InlineCommentInputMethod, targetType?: TargetType, isCommentOnMediaOn?: boolean) => Command;
+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 updateMouseState: (mouseData: InlineCommentMouseData) => Command;
 export declare const setSelectedAnnotation: (id: string) => Command;

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

@@ -1,6 +1,7 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
+import type { FeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorState, SelectionBookmark } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { AnnotationInfo, InlineCommentAnnotationProvider, TargetType } from '../types';
@@ -20,6 +21,7 @@ export interface InlineCommentPluginOptions {
     portalProviderAPI: PortalProviderAPI;
     provider: InlineCommentAnnotationProvider;
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+    featureFlagsPluginState?: FeatureFlags;
 }
 export interface InlineCommentMouseData {
     isSelecting: boolean;
@@ -36,6 +38,8 @@ export type InlineCommentAction = {
         drafting: boolean;
         editorState: EditorState;
         targetType?: TargetType;
+        isCommentOnMediaOn?: boolean;
+        supportedBlockNodes?: string[];
     };
 } | {
     type: ACTIONS.INLINE_COMMENT_UPDATE_MOUSE_STATE;
@@ -76,4 +80,5 @@ export type InlineCommentPluginState = {
     isInlineCommentViewClosed: boolean;
     isVisible: boolean;
     skipSelectionHandling: boolean;
+    featureFlagsPluginState?: FeatureFlags;
 };

package/dist/types/types.d.ts

@@ -129,4 +129,9 @@ export type CoordsAtPos = {
     left: number;
     right: number;
 };
+export type DraftBookmark = {
+    from: number;
+    to: number;
+    head: number;
+};
 export {};

package/dist/types/utils.d.ts

@@ -1,11 +1,11 @@
 import type { AnalyticsEventPayloadCallback } from '@atlaskit/editor-common/analytics';
 import { containsAnyAnnotations, hasAnnotationMark } from '@atlaskit/editor-common/utils';
 import type { Mark, Node, ResolvedPos, Schema, Slice } from '@atlaskit/editor-prosemirror/model';
-import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, Selection, SelectionBookmark } from '@atlaskit/editor-prosemirror/state';
 import { AllSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { InlineCommentPluginState } from './pm-plugins/types';
-import type { AnnotationInfo, InlineCommentInputMethod, TargetType } from './types';
+import type { AnnotationInfo, DraftBookmark, InlineCommentInputMethod, TargetType } from './types';
 import { AnnotationSelectionType } from './types';
 export { hasAnnotationMark, containsAnyAnnotations };
 /**
@@ -14,9 +14,14 @@ export { hasAnnotationMark, containsAnyAnnotations };
  */
 export declare const surroundingMarks: ($pos: ResolvedPos) => (readonly Mark[])[];
 export declare const getAllAnnotations: (doc: Node) => string[];
+export declare const decorationKey: {
+    block: string;
+    inline: string;
+};
 export declare const addDraftDecoration: (start: number, end: number, targetType?: TargetType) => Decoration;
 export declare const getAnnotationViewKey: (annotations: AnnotationInfo[]) => string;
 export declare const findAnnotationsInSelection: (selection: Selection, doc: Node) => AnnotationInfo[];
+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

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

@@ -7,7 +7,7 @@ export declare const updateInlineCommentResolvedState: (editorAnalyticsAPI: Edit
 export declare const closeComponent: () => Command;
 export declare const clearDirtyMark: () => Command;
 export declare const removeInlineCommentNearSelection: (id: string, supportedNodes?: string[]) => Command;
-export declare const setInlineCommentDraftState: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (drafting: boolean, inputMethod?: InlineCommentInputMethod, targetType?: TargetType, isCommentOnMediaOn?: boolean) => Command;
+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 updateMouseState: (mouseData: InlineCommentMouseData) => Command;
 export declare const setSelectedAnnotation: (id: string) => Command;

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

@@ -1,6 +1,7 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
+import type { FeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorState, SelectionBookmark } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { AnnotationInfo, InlineCommentAnnotationProvider, TargetType } from '../types';
@@ -20,6 +21,7 @@ export interface InlineCommentPluginOptions {
     portalProviderAPI: PortalProviderAPI;
     provider: InlineCommentAnnotationProvider;
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+    featureFlagsPluginState?: FeatureFlags;
 }
 export interface InlineCommentMouseData {
     isSelecting: boolean;
@@ -36,6 +38,8 @@ export type InlineCommentAction = {
         drafting: boolean;
         editorState: EditorState;
         targetType?: TargetType;
+        isCommentOnMediaOn?: boolean;
+        supportedBlockNodes?: string[];
     };
 } | {
     type: ACTIONS.INLINE_COMMENT_UPDATE_MOUSE_STATE;
@@ -76,4 +80,5 @@ export type InlineCommentPluginState = {
     isInlineCommentViewClosed: boolean;
     isVisible: boolean;
     skipSelectionHandling: boolean;
+    featureFlagsPluginState?: FeatureFlags;
 };

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

@@ -129,4 +129,9 @@ export type CoordsAtPos = {
     left: number;
     right: number;
 };
+export type DraftBookmark = {
+    from: number;
+    to: number;
+    head: number;
+};
 export {};

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

@@ -1,11 +1,11 @@
 import type { AnalyticsEventPayloadCallback } from '@atlaskit/editor-common/analytics';
 import { containsAnyAnnotations, hasAnnotationMark } from '@atlaskit/editor-common/utils';
 import type { Mark, Node, ResolvedPos, Schema, Slice } from '@atlaskit/editor-prosemirror/model';
-import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, Selection, SelectionBookmark } from '@atlaskit/editor-prosemirror/state';
 import { AllSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import type { InlineCommentPluginState } from './pm-plugins/types';
-import type { AnnotationInfo, InlineCommentInputMethod, TargetType } from './types';
+import type { AnnotationInfo, DraftBookmark, InlineCommentInputMethod, TargetType } from './types';
 import { AnnotationSelectionType } from './types';
 export { hasAnnotationMark, containsAnyAnnotations };
 /**
@@ -14,9 +14,14 @@ export { hasAnnotationMark, containsAnyAnnotations };
  */
 export declare const surroundingMarks: ($pos: ResolvedPos) => (readonly Mark[])[];
 export declare const getAllAnnotations: (doc: Node) => string[];
+export declare const decorationKey: {
+    block: string;
+    inline: string;
+};
 export declare const addDraftDecoration: (start: number, end: number, targetType?: TargetType) => Decoration;
 export declare const getAnnotationViewKey: (annotations: AnnotationInfo[]) => string;
 export declare const findAnnotationsInSelection: (selection: Selection, doc: Node) => AnnotationInfo[];
+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

package/package.json

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