@atlaskit/editor-plugin-annotation 2.8.2 → 2.9.0

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

@@ -1,11 +1,12 @@
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { RESOLVE_METHOD } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { getAnnotationInlineNodeTypes } from '@atlaskit/editor-common/utils';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { clearDirtyMark, closeComponent, setHoveredAnnotation, setInlineCommentsVisibility, setSelectedAnnotation, updateInlineCommentResolvedState, updateMouseState } from '../editor-commands';
+import { clearDirtyMark, closeComponent, setHoveredAnnotation, setInlineCommentsVisibility, setSelectedAnnotation, flushPendingSelections, updateInlineCommentResolvedState, updateMouseState, setPendingSelectedAnnotation, setInlineCommentDraftState } from '../editor-commands';
 import { getAnnotationViewClassname, getBlockAnnotationViewClassname } from '../nodeviews';
-import { allowAnnotation, applyDraft, clearDraft, getDraft, startDraft } from './annotation-manager-hooks';
+import { allowAnnotation, applyDraft, clearDraft, clearAnnotation, getDraft, setIsAnnotationHovered, setIsAnnotationSelected, startDraft } from './annotation-manager-hooks';
 import { createPluginState } from './plugin-factory';
 import { decorationKey, getAllAnnotations, getPluginState, inlineCommentPluginKey } from './utils';
 const fetchProviderStates = async (provider, annotationIds) => {
@@ -49,7 +50,9 @@ const initialState = (disallowOnWhitespace = false, featureFlagsPluginState) =>
     isVisible: true,
     skipSelectionHandling: false,
     featureFlagsPluginState,
-    isDrafting: false
+    isDrafting: false,
+    pendingSelectedAnnotations: [],
+    pendingSelectedAnnotationsUpdateCount: 0
   };
 };
 const hideToolbar = (state, dispatch) => () => {
@@ -103,12 +106,33 @@ export const inlineCommentPlugin = options => {
     key: inlineCommentPluginKey,
     state: createPluginState(options.dispatch, initialState(provider.disallowOnWhitespace, featureFlagsPluginState)),
     view(editorView) {
+      let allowAnnotationFn;
+      let startDraftFn;
+      let clearDraftFn;
+      let applyDraftFn;
+      let getDraftFn;
+      let setIsAnnotationSelectedFn;
+      let setIsAnnotationHoveredFn;
+      let clearAnnotationFn;
       if (annotationManager && fg('platform_editor_comments_api_manager')) {
-        annotationManager.hook('allowAnnotation', allowAnnotation(editorView, options));
-        annotationManager.hook('startDraft', startDraft(editorView, options));
-        annotationManager.hook('clearDraft', clearDraft(editorView, options));
-        annotationManager.hook('applyDraft', applyDraft(editorView, options));
-        annotationManager.hook('getDraft', getDraft(editorView, options));
+        allowAnnotationFn = allowAnnotation(editorView, options);
+        startDraftFn = startDraft(editorView, options);
+        clearDraftFn = clearDraft(editorView, options);
+        applyDraftFn = applyDraft(editorView, options);
+        getDraftFn = getDraft(editorView, options);
+        annotationManager.hook('allowAnnotation', allowAnnotationFn);
+        annotationManager.hook('startDraft', startDraftFn);
+        annotationManager.hook('clearDraft', clearDraftFn);
+        annotationManager.hook('applyDraft', applyDraftFn);
+        annotationManager.hook('getDraft', getDraftFn);
+        if (fg('platform_editor_comments_api_manager_select')) {
+          setIsAnnotationSelectedFn = setIsAnnotationSelected(editorView, options);
+          setIsAnnotationHoveredFn = setIsAnnotationHovered(editorView, options);
+          clearAnnotationFn = clearAnnotation(editorView, options);
+          annotationManager.hook('setIsAnnotationSelected', setIsAnnotationSelectedFn);
+          annotationManager.hook('setIsAnnotationHovered', setIsAnnotationHoveredFn);
+          annotationManager.hook('clearAnnotation', clearAnnotationFn);
+        }
       }
       // Get initial state
       // Need to pass `editorView` to mitigate editor state going stale
@@ -160,6 +184,13 @@ export const inlineCommentPlugin = options => {
 
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       editorView.root.addEventListener('mouseup', mouseUp);
+
+      /**
+       * This flag is used to prevent the preemptive gate from being called multiple times while a check is in-flight.
+       * If a check is still pending then it's most likely because the product is busy and trying to block the
+       * selection of an annotation.
+       */
+      let isPreemptiveGateActive = false;
       return {
         update(view, _prevState) {
           var _prevSelectedAnnotati;
@@ -182,6 +213,83 @@ export const inlineCommentPlugin = options => {
             // The selectComponentExperience is using a simplified object, which is why it's type asserted.
             (_options$selectCommen = options.selectCommentExperience) === null || _options$selectCommen === void 0 ? void 0 : _options$selectCommen.selectAnnotation.complete(selectedAnnotationId);
           }
+          if (fg('platform_editor_comments_api_manager_select')) {
+            // In the Editor, Annotations can be selected in three ways:
+            // 1. By clicking on the annotation in the editor
+            // 2. By using the annotation manager to select the annotation
+            // 3. By moving the cursor to the annotation and using the keyboard to select it
+            // Item 1 & 3 need to be protected by the preemptive gate. This is because these actions could be performed by a user
+            // at a time when changing the selection could cause data loss.
+            // The following preemptive check is designed to cover these items.
+
+            const {
+              pendingSelectedAnnotations,
+              pendingSelectedAnnotationsUpdateCount
+            } = getPluginState(view.state) || {};
+            const {
+              pendingSelectedAnnotationsUpdateCount: prevPendingSelectedAnnotationsUpdateCount
+            } = getPluginState(_prevState) || {};
+            if (!isPreemptiveGateActive && pendingSelectedAnnotationsUpdateCount !== prevPendingSelectedAnnotationsUpdateCount && !!(pendingSelectedAnnotations !== null && pendingSelectedAnnotations !== void 0 && pendingSelectedAnnotations.length)) {
+              // Need to set a lock to avoid calling gate multiple times. The lock will be released
+              // when the preemptive gate is complete.
+              isPreemptiveGateActive = true;
+              annotationManager === null || annotationManager === void 0 ? void 0 : annotationManager.checkPreemptiveGate().then(canSelectAnnotation => {
+                const {
+                  isDrafting,
+                  pendingSelectedAnnotations: latestPendingSelectedAnnotations,
+                  selectedAnnotations: latestSelectedAnnotations
+                } = getPluginState(view.state) || {};
+                if (canSelectAnnotation) {
+                  if (isDrafting) {
+                    // The user must have chosen to discard there draft. So before we flush the pending selections
+                    // we need to clear the draft if there is one.
+                    setInlineCommentDraftState(options.editorAnalyticsAPI)(false)(view.state, view.dispatch);
+                  }
+
+                  // Flush the pending selections into the selected annotations list.
+                  flushPendingSelections(true)(view.state, view.dispatch);
+                  latestSelectedAnnotations === null || latestSelectedAnnotations === void 0 ? void 0 : latestSelectedAnnotations.filter(annotation => (latestPendingSelectedAnnotations === null || latestPendingSelectedAnnotations === void 0 ? void 0 : latestPendingSelectedAnnotations.findIndex(pendingAnnotation => pendingAnnotation.id === annotation.id)) === -1).forEach(annotation => {
+                    var _options$annotationMa, _getAnnotationInlineN;
+                    (_options$annotationMa = options.annotationManager) === null || _options$annotationMa === void 0 ? void 0 : _options$annotationMa.emit({
+                      name: 'annotationSelectionChanged',
+                      data: {
+                        annotationId: annotation.id,
+                        isSelected: false,
+                        inlineNodeTypes: (_getAnnotationInlineN = getAnnotationInlineNodeTypes(editorView.state, annotation.id)) !== null && _getAnnotationInlineN !== void 0 ? _getAnnotationInlineN : []
+                      }
+                    });
+                  });
+
+                  // Notify the annotation manager that the pending selection has changed.
+                  latestPendingSelectedAnnotations === null || latestPendingSelectedAnnotations === void 0 ? void 0 : latestPendingSelectedAnnotations.forEach(({
+                    id
+                  }) => {
+                    var _options$annotationMa2, _getAnnotationInlineN2;
+                    (_options$annotationMa2 = options.annotationManager) === null || _options$annotationMa2 === void 0 ? void 0 : _options$annotationMa2.emit({
+                      name: 'annotationSelectionChanged',
+                      data: {
+                        annotationId: id,
+                        isSelected: true,
+                        inlineNodeTypes: (_getAnnotationInlineN2 = getAnnotationInlineNodeTypes(view.state, id)) !== null && _getAnnotationInlineN2 !== void 0 ? _getAnnotationInlineN2 : []
+                      }
+                    });
+                  });
+                } else {
+                  // Clears the pending selections if the preemptive gate returns false.
+                  // We should need to worry about dispatching change events here because the pending selections
+                  // are being aborted and the selections will remain unchanged.
+                  flushPendingSelections(false)(view.state, view.dispatch);
+                }
+              }).catch(error => {
+                // TODO: EDITOR-595 - Ensure and anlytic is fired to indicate which reports on the error.
+
+                // If an error has occured we will clear any pending selections to avoid accidentally setting the wrong thing.
+                flushPendingSelections(false)(view.state, view.dispatch);
+              }).finally(() => {
+                isPreemptiveGateActive = false;
+              });
+            }
+          }
           const {
             dirtyAnnotations
           } = getPluginState(view.state) || {};
@@ -197,6 +305,16 @@ export const inlineCommentPlugin = options => {
           if (updateSubscriber) {
             updateSubscriber.off('resolve', resolve).off('delete', resolve).off('unresolve', unResolve).off('create', unResolve).off('setvisibility', setVisibility).off('setselectedannotation', setSelectedAnnotationFn).off('sethoveredannotation', setHoveredAnnotationFn).off('removehoveredannotation', removeHoveredannotationFn).off('closeinlinecomment', closeInlineCommentFn);
           }
+          if (annotationManager && fg('platform_editor_comments_api_manager')) {
+            annotationManager.unhook('allowAnnotation', allowAnnotationFn);
+            annotationManager.unhook('startDraft', startDraftFn);
+            annotationManager.unhook('clearDraft', clearDraftFn);
+            annotationManager.unhook('applyDraft', applyDraftFn);
+            annotationManager.unhook('getDraft', getDraftFn);
+            annotationManager.unhook('setIsAnnotationSelected', setIsAnnotationSelectedFn);
+            annotationManager.unhook('setIsAnnotationHovered', setIsAnnotationHoveredFn);
+            annotationManager.unhook('clearAnnotation', clearAnnotationFn);
+          }
         }
       };
     },
@@ -242,7 +360,22 @@ export const inlineCommentPlugin = options => {
           if (!isUnresolved) {
             return false;
           }
-          setSelectedAnnotation(annotationId)(view.state, view.dispatch);
+          if (fg('platform_editor_comments_api_manager_select')) {
+            var _pluginState$pendingS;
+            // The manager disable setting the selected annotation on click because in the editor this is already
+            // handled by the selection update handler. When the manager is enabled, and a selection changes it's pushed into
+            // the pendingSelectedAnnotations array. This is then used to update the selection when the preemptive gate
+            // is released.
+            const isPendingSelection = pluginState === null || pluginState === void 0 ? void 0 : (_pluginState$pendingS = pluginState.pendingSelectedAnnotations) === null || _pluginState$pendingS === void 0 ? void 0 : _pluginState$pendingS.some(selectedAnnotation => selectedAnnotation.id === annotationId);
+            // If the annotation is selected and the inline comment view is open, do nothing
+            // as the user is already in the comment view.
+            if (isPendingSelection) {
+              return false;
+            }
+            setPendingSelectedAnnotation(annotationId)(view.state, view.dispatch);
+          } else {
+            setSelectedAnnotation(annotationId)(view.state, view.dispatch);
+          }
           return true;
         }
       },
@@ -258,6 +391,10 @@ export const inlineCommentPlugin = options => {
         } = getPluginState(state) || {};
         let decorations = draftDecorationSet !== null && draftDecorationSet !== void 0 ? draftDecorationSet : DecorationSet.empty;
         const focusDecorations = [];
+
+        // TODO: EDITOR-760 - This needs to be optimised, it's not a good idea to scan the entire document
+        // everytime we need to update the decorations. This handler will be called alot. We should be caching
+        // the decorations in plugin state and only updating them when required.
         state.doc.descendants((node, pos) => {
           var _provider$supportedBl;
           // Inline comment on mediaInline is not supported as part of comments on media project

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

@@ -1,6 +1,7 @@
 import { pluginFactory } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 import reducer from './reducer';
 import { decorationKey, findAnnotationsInSelection, inlineCommentPluginKey, isBlockNodeAnnotationsSelected, isSelectedAnnotationsChanged } from './utils';
 const handleDocChanged = (tr, prevPluginState) => {
@@ -17,6 +18,10 @@ const handleDocChanged = (tr, prevPluginState) => {
  * We clear bookmark on the following conditions:
  * 1. if current selection is an empty selection, or
  * 2. if the current selection and bookmark selection are different
+ * @param tr
+ * @param editorState
+ * @param bookmark
+ * @example
  */
 export const shouldClearBookMarkCheck = (tr, editorState, bookmark) => {
   if (editorState.selection.empty || !bookmark) {
@@ -44,7 +49,7 @@ export const shouldClearBookMarkCheck = (tr, editorState, bookmark) => {
   // by default we discard bookmark
   return true;
 };
-const getSelectionChangedHandler = reopenCommentView => (tr, pluginState) => {
+const getSelectionChangeHandlerOld = reopenCommentView => (tr, pluginState) => {
   if (pluginState.skipSelectionHandling) {
     return {
       ...pluginState,
@@ -92,6 +97,51 @@ const getSelectionChangedHandler = reopenCommentView => (tr, pluginState) => {
     selectAnnotationMethod: undefined
   };
 };
+const getSelectionChangeHandlerNew = reopenCommentView => (tr, pluginState) => {
+  if (pluginState.skipSelectionHandling) {
+    return {
+      ...pluginState,
+      skipSelectionHandling: false,
+      ...(reopenCommentView && {
+        isInlineCommentViewClosed: false
+      })
+    };
+  }
+  const selectedAnnotations = findAnnotationsInSelection(tr.selection, tr.doc);
+
+  // NOTE: I've left this commented code here as a reference that the previous old code would reset the selected annotations
+  // if the selection is empty. If this is no longer needed, we can remove this code.
+  // clean up with platform_editor_comments_api_manager_select
+  // if (selectedAnnotations.length === 0) {
+  // 	return {
+  // 		...pluginState,
+  // 		pendingSelectedAnnotations: selectedAnnotations,
+  // 		pendingSelectedAnnotationsUpdateCount:
+  // 			pluginState.pendingSelectedAnnotationsUpdateCount + 1,
+  // 		isInlineCommentViewClosed: true,
+  // 		selectAnnotationMethod: undefined,
+  // 	};
+  // }
+
+  if (isSelectedAnnotationsChanged(selectedAnnotations, pluginState.pendingSelectedAnnotations)) {
+    return {
+      ...pluginState,
+      pendingSelectedAnnotations: selectedAnnotations,
+      pendingSelectedAnnotationsUpdateCount: pluginState.pendingSelectedAnnotationsUpdateCount + 1,
+      ...(reopenCommentView && {
+        isInlineCommentViewClosed: false
+      })
+    };
+  }
+  return {
+    ...pluginState,
+    ...(reopenCommentView && {
+      isInlineCommentViewClosed: false
+    }),
+    selectAnnotationMethod: undefined
+  };
+};
+const getSelectionChangedHandler = reopenCommentView => (tr, pluginState) => fg('platform_editor_comments_api_manager_select') ? getSelectionChangeHandlerNew(reopenCommentView)(tr, pluginState) : getSelectionChangeHandlerOld(reopenCommentView)(tr, pluginState);
 export const {
   createPluginState,
   createCommand

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

@@ -34,6 +34,9 @@ export default ((pluginState, action) => {
         isOpeningMediaCommentFromToolbar: false,
         ...(fg('platform_editor_annotation_selected_annotation') && {
           selectedAnnotations: []
+        }),
+        ...(fg('platform_editor_comments_api_manager_select') && {
+          selectedAnnotations: []
         })
       };
     case ACTIONS.ADD_INLINE_COMMENT:
@@ -46,7 +49,10 @@ export default ((pluginState, action) => {
           ...action.data.inlineComments
         },
         isInlineCommentViewClosed: false,
-        selectAnnotationMethod: undefined
+        selectAnnotationMethod: undefined,
+        ...(fg('platform_editor_comments_api_manager_select') && {
+          skipSelectionHandling: true
+        })
       };
     case ACTIONS.INLINE_COMMENT_SET_VISIBLE:
       const {
@@ -75,6 +81,21 @@ export default ((pluginState, action) => {
         skipSelectionHandling: true,
         isInlineCommentViewClosed: false
       };
+    case ACTIONS.FLUSH_PENDING_SELECTIONS:
+      return {
+        ...pluginState,
+        selectedAnnotations: action.data.canSetAsSelectedAnnotations ? [...pluginState.pendingSelectedAnnotations] : pluginState.selectedAnnotations,
+        pendingSelectedAnnotations: [],
+        isInlineCommentViewClosed: false
+      };
+    case ACTIONS.SET_PENDING_SELECTIONS:
+      return {
+        ...pluginState,
+        pendingSelectedAnnotations: [...action.data.selectedAnnotations],
+        pendingSelectedAnnotationsUpdateCount: pluginState.pendingSelectedAnnotationsUpdateCount + 1,
+        skipSelectionHandling: true,
+        isInlineCommentViewClosed: false
+      };
     default:
       return pluginState;
   }

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

@@ -135,7 +135,7 @@ export const buildToolbar = editorAnalyticsAPI => ({
       }
       if (fg('platform_editor_comments_api_manager')) {
         if (!annotationManager) {
-          // TODO: EDITOR-188 - If we've reached here and the manager is not initialized, we should
+          // TODO: EDITOR-595 - If we've reached here and the manager is not initialized, we should
           // dispatch an analytics event to indicate that the user has clicked the button but
           // the action was not completed.
           return false;
@@ -149,17 +149,19 @@ export const buildToolbar = editorAnalyticsAPI => ({
               }
             });
             createCommentExperience === null || createCommentExperience === void 0 ? void 0 : createCommentExperience.initExperience.start();
-            const {
-              success
-            } = annotationManager.startDraft();
-            if (!success) {
-              // TODO: EDITOR-188 - Report start draft attempt failed.
+            const result = annotationManager.startDraft();
+            if (result.success) {
+              // TODO: EDITOR-595 - Ensure and anlytic is fired to indicate that the user has started a draft.
+            } else {
+              // TODO: EDITOR-595 - Fire an analytics event to indicate that the user has clicked the button
+              // but the action was not completed, the result should contain a reason.
             }
           } else {
-            // TODO: EDITOR-188 - Dispatch analytics event
+            // TODO: EDITOR-595 - Track the toolbar comment button was clicked but the preemptive gate
+            // check returned false and the draft cannot be started.
           }
         }).catch(() => {
-          // TODO: EDITOR-188 - Handle preemptive gate check error and dispatch analytics event
+          // TODO: EDITOR-595 - Handle preemptive gate check error. Something went very wrong in the gate.
         });
         return true;
       } else {

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

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

package/dist/es2019/ui/InlineCommentView.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } 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 { sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
@@ -78,6 +78,7 @@ export function InlineCommentView({
     state,
     dispatch
   } = editorView;
+  const lastSelectedAnnotationId = useRef();
   const {
     createComponent: CreateComponent,
     viewComponent: ViewComponent
@@ -133,9 +134,17 @@ export function InlineCommentView({
 
   // Create Component
   if (bookmark) {
+    var _selectedAnnotations$;
     if (!CreateComponent) {
       return null;
     }
+    const currentlySelectedAnnotation = selectedAnnotations === null || selectedAnnotations === void 0 ? void 0 : (_selectedAnnotations$ = selectedAnnotations[0]) === null || _selectedAnnotations$ === void 0 ? void 0 : _selectedAnnotations$.id;
+    const isAnnotationSelectionChanged = currentlySelectedAnnotation !== lastSelectedAnnotationId.current;
+
+    // Update the last selected annotation ID if the selection was updated
+    if (isAnnotationSelectionChanged) {
+      lastSelectedAnnotationId.current = currentlySelectedAnnotation;
+    }
     const inlineNodeTypes = getRangeInlineNodeNames({
       doc: state.doc,
       pos: selection
@@ -149,6 +158,7 @@ export function InlineCommentView({
     }, /*#__PURE__*/React.createElement(CreateComponent, {
       dom: dom,
       textSelection: textSelection,
+      wasNewAnnotationSelected: !!currentlySelectedAnnotation && isAnnotationSelectionChanged,
       onCreate: id => {
         if (!fg('platform_editor_comments_api_manager')) {
           const createAnnotationResult = createAnnotation(editorAnalyticsAPI, editorAPI)(id, AnnotationTypes.INLINE_COMMENT, inlineCommentProvider.supportedBlockNodes)(editorView.state, editorView.dispatch);

package/dist/esm/editor-commands/index.js

@@ -44,6 +44,25 @@ export var clearDirtyMark = function clearDirtyMark() {
     type: ACTIONS.INLINE_COMMENT_CLEAR_DIRTY_MARK
   });
 };
+export var flushPendingSelections = function flushPendingSelections(canSetAsSelectedAnnotations) {
+  return createCommand({
+    type: ACTIONS.FLUSH_PENDING_SELECTIONS,
+    data: {
+      canSetAsSelectedAnnotations: canSetAsSelectedAnnotations
+    }
+  });
+};
+export var setPendingSelectedAnnotation = function setPendingSelectedAnnotation(id) {
+  return createCommand({
+    type: ACTIONS.SET_PENDING_SELECTIONS,
+    data: {
+      selectedAnnotations: [{
+        id: id,
+        type: AnnotationTypes.INLINE_COMMENT
+      }]
+    }
+  });
+};
 var removeInlineCommentFromNode = function removeInlineCommentFromNode(id) {
   var supportedBlockNodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var state = arguments.length > 2 ? arguments[2] : undefined;
@@ -105,6 +124,34 @@ export var removeInlineCommentNearSelection = function removeInlineCommentNearSe
     return true;
   };
 };
+export var removeInlineCommentFromDoc = function removeInlineCommentFromDoc(id) {
+  var supportedNodes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return function (state, dispatch) {
+    var tr = state.tr;
+    state.doc.descendants(function (node, pos) {
+      // Inline comment on mediaInline is not supported as part of comments on media project
+      // Thus, we skip the decoration for mediaInline node
+      if (node.type.name === 'mediaInline') {
+        return false;
+      }
+      var isSupportedBlockNode = node.isBlock && (supportedNodes === null || supportedNodes === void 0 ? void 0 : supportedNodes.includes(node.type.name));
+      node.marks.filter(function (mark) {
+        return mark.type === state.schema.marks.annotation && mark.attrs.id === id;
+      }).forEach(function (mark) {
+        if (isSupportedBlockNode) {
+          tr.removeNodeMark(pos, mark);
+        } else {
+          tr.removeMark(pos, pos + node.nodeSize, mark);
+        }
+      });
+    });
+    if (dispatch) {
+      dispatch(tr);
+      return true;
+    }
+    return false;
+  };
+};
 var getDraftCommandAction = function getDraftCommandAction(drafting, targetType, targetNodeId, supportedBlockNodes, isOpeningMediaCommentFromToolbar) {
   return function (editorState) {
     // validate selection only when entering draft mode
@@ -128,6 +175,8 @@ var getDraftCommandAction = function getDraftCommandAction(drafting, targetType,
 /**
  * Show active inline comments for a given block node, otherwise,
  * return false if the node has no comments or no unresolved comments.
+ * @param supportedBlockNodes
+ * @example
  */
 export var showInlineCommentForBlockNode = function showInlineCommentForBlockNode() {
   var supportedBlockNodes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];