@atlaskit/editor-plugin-annotation 1.2.1 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @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
+
+- [#79658](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/79658) [`4b195011d7c1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4b195011d7c1) - ED-22112 support remove annotation from supported nodes
+
 ## 1.2.1
 
 ### Patch Changes

package/dist/cjs/commands/index.js

@@ -8,6 +8,7 @@ exports.updateMouseState = exports.updateInlineCommentResolvedState = exports.se
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _types = require("../pm-plugins/types");
 var _types2 = require("../types");
@@ -38,11 +39,48 @@ var clearDirtyMark = exports.clearDirtyMark = function clearDirtyMark() {
     type: _types.ACTIONS.INLINE_COMMENT_CLEAR_DIRTY_MARK
   });
 };
+var removeInlineCommentFromNode = function removeInlineCommentFromNode(id) {
+  var supportedBlockNodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var state = arguments.length > 2 ? arguments[2] : undefined;
+  var dispatch = arguments.length > 3 ? arguments[3] : undefined;
+  var tr = state.tr,
+    selection = state.selection;
+  if (selection instanceof _state.NodeSelection && (0, _utils.isSupportedBlockNode)(selection.node, supportedBlockNodes)) {
+    var $from = selection.$from;
+    var currNode = selection.node;
+    var from = $from.start();
+
+    // for media annotation, the selection is on media Single
+    if (currNode.type === state.schema.nodes.mediaSingle && currNode.firstChild) {
+      currNode = currNode.firstChild;
+      from = from + 1;
+    }
+    var annotationMarkType = state.schema.marks.annotation;
+    var hasAnnotation = currNode.marks.some(function (mark) {
+      return mark.type === annotationMarkType;
+    });
+    if (!hasAnnotation) {
+      return false;
+    }
+    tr.removeNodeMark(from, annotationMarkType.create({
+      id: id,
+      type: _adfSchema.AnnotationTypes.INLINE_COMMENT
+    }));
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  }
+  return false;
+};
 var removeInlineCommentNearSelection = exports.removeInlineCommentNearSelection = function removeInlineCommentNearSelection(id) {
-  var _supportedNodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var supportedNodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   return function (state, dispatch) {
     var tr = state.tr,
       $from = state.selection.$from;
+    if (removeInlineCommentFromNode(id, supportedNodes, state, dispatch)) {
+      return true;
+    }
     var annotationMarkType = state.schema.marks.annotation;
     var hasAnnotation = $from.marks().some(function (mark) {
       return mark.type === annotationMarkType;
@@ -62,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) {
@@ -73,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/nodeviews/index.js

@@ -14,7 +14,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _styles = require("@atlaskit/editor-common/styles");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var AnnotationNodeView = exports.AnnotationNodeView = /*#__PURE__*/function (_ReactNodeView) {
   (0, _inherits2.default)(AnnotationNodeView, _ReactNodeView);
   var _super = _createSuper(AnnotationNodeView);

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/toolbar.js

@@ -58,7 +58,6 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(editorAnalyticsA
       },
       supportsViewMode: true // TODO: MODES-3950 Clean up this floating toolbar view mode logic
     };
-
     var annotation = schema.marks.annotation;
     var validNodes = Object.keys(schema.nodes).reduce(function (acc, current) {
       var type = schema.nodes[current];

package/dist/cjs/ui/AnnotationViewWrapper.js

@@ -12,7 +12,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _react = _interopRequireDefault(require("react"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var AnnotationViewWrapper = exports.AnnotationViewWrapper = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(AnnotationViewWrapper, _React$PureComponent);

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.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
@@ -299,6 +340,10 @@ function isEmptyTextSelection(selection, schema) {
   });
   return !hasContent;
 }
+var isSupportedBlockNode = exports.isSupportedBlockNode = function isSupportedBlockNode(node) {
+  var supportedBlockNodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return supportedBlockNodes.indexOf(node.type.name) >= 0 || node.type.name === 'mediaSingle' && supportedBlockNodes.indexOf('media') >= 0;
+};
 
 /**
  * Checks if any of the nodes in a given selection are completely whitespace

package/dist/es2019/commands/index.js

@@ -1,9 +1,10 @@
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { createCommand } from '../pm-plugins/plugin-factory';
 import { ACTIONS } from '../pm-plugins/types';
 import { AnnotationSelectionType } from '../types';
-import { getPluginState, isSelectionValid } from '../utils';
+import { getPluginState, isSelectionValid, isSupportedBlockNode } from '../utils';
 import transform from './transform';
 export const updateInlineCommentResolvedState = editorAnalyticsAPI => (partialNewState, resolveMethod) => {
   const command = {
@@ -22,13 +23,51 @@ export const closeComponent = () => createCommand({
 export const clearDirtyMark = () => createCommand({
   type: ACTIONS.INLINE_COMMENT_CLEAR_DIRTY_MARK
 });
-export const removeInlineCommentNearSelection = (id, _supportedNodes = []) => (state, dispatch) => {
+const removeInlineCommentFromNode = (id, supportedBlockNodes = [], state, dispatch) => {
+  const {
+    tr,
+    selection
+  } = state;
+  if (selection instanceof NodeSelection && isSupportedBlockNode(selection.node, supportedBlockNodes)) {
+    const {
+      $from
+    } = selection;
+    let currNode = selection.node;
+    let from = $from.start();
+
+    // for media annotation, the selection is on media Single
+    if (currNode.type === state.schema.nodes.mediaSingle && currNode.firstChild) {
+      currNode = currNode.firstChild;
+      from = from + 1;
+    }
+    const {
+      annotation: annotationMarkType
+    } = state.schema.marks;
+    const hasAnnotation = currNode.marks.some(mark => mark.type === annotationMarkType);
+    if (!hasAnnotation) {
+      return false;
+    }
+    tr.removeNodeMark(from, annotationMarkType.create({
+      id,
+      type: AnnotationTypes.INLINE_COMMENT
+    }));
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  }
+  return false;
+};
+export const removeInlineCommentNearSelection = (id, supportedNodes = []) => (state, dispatch) => {
   const {
     tr,
     selection: {
       $from
     }
   } = state;
+  if (removeInlineCommentFromNode(id, supportedNodes, state, dispatch)) {
+    return true;
+  }
   const {
     annotation: annotationMarkType
   } = state.schema.marks;
@@ -47,7 +86,7 @@ export const removeInlineCommentNearSelection = (id, _supportedNodes = []) => (s
   }
   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) {
@@ -58,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/toolbar.js

@@ -49,7 +49,6 @@ export const buildToolbar = editorAnalyticsAPI => (state, intl, isToolbarAbove =
     },
     supportsViewMode: true // TODO: MODES-3950 Clean up this floating toolbar view mode logic
   };
-
   const {
     annotation
   } = schema.marks;